public release

resources/css/app.css

@@ -0,0 +1,8 @@
+/* ./resources/css/app.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.form-input {
+    @apply border border-gray-300 rounded-md;
+}

resources/js/airwire.ts

@@ -0,0 +1,12 @@
+// This file is generated by Airwire
+export const componentDefaults = {"report-filter":{"search":"","assignee":null,"category":null,"status":null,"reports":[]},"create-report":{"name":null,"assignee":null,"category":null},"create-user":{"name":"","email":"","password":"","password_confirmation":""}}
+
+import Airwire from './../../vendor/archtechx/airwire/resources/js';
+
+export default window.Airwire = new Airwire(componentDefaults)
+
+declare global {
+    interface Window {
+        Airwire: Airwire
+    }
+}

resources/js/airwired.d.ts

@@ -0,0 +1,90 @@
+
+declare global {
+    type Report = { id: number, name: string, assignee_id: string, category: string, status: string, created_at: string, updated_at: string, assignee: User };
+
+type User = { id: number, name: string, email: string, email_verified_at: string, created_at: string, updated_at: string, reports: Report };
+
+
+}
+
+import './../../vendor/archtechx/airwire/resources/js/airwired'
+
+declare module 'airwire' {
+    export type TypeMap = {
+    'report-filter': ReportFilter
+    'create-report': CreateReport
+    'create-user': CreateUser
+}
+    interface ReportFilter {
+    search: string;
+    assignee: number;
+    category: number;
+    status: string;
+    reports: Report[];
+    changeStatus(report: Report|string|number): AirwirePromise<string>;
+    mount(): AirwirePromise<any>;
+    errors: {
+        [key in keyof WiredProperties<ReportFilter>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<ReportFilter>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<ReportFilter>;
+    remount(...args: any): ComponentResponse<ReportFilter>;
+
+    readonly: ReportFilter;
+
+    deferred: ReportFilter;
+    $component: ReportFilter;
+}
+
+interface CreateReport {
+    name: string;
+    assignee: number;
+    category: number;
+    create(): AirwirePromise<Report>;
+    mount(): AirwirePromise<any>;
+    errors: {
+        [key in keyof WiredProperties<CreateReport>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<CreateReport>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<CreateReport>;
+    remount(...args: any): ComponentResponse<CreateReport>;
+
+    readonly: CreateReport;
+
+    deferred: CreateReport;
+    $component: CreateReport;
+}
+
+interface CreateUser {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+    create(): AirwirePromise<User>;
+    errors: {
+        [key in keyof WiredProperties<CreateUser>]: string[];
+    }
+
+    loading: boolean;
+
+    watch(responses: (response: ComponentResponse<CreateUser>) => void, errors?: (error: AirwireException) => void): void;
+    defer(callback: CallableFunction): void;
+    refresh(): ComponentResponse<CreateUser>;
+    remount(...args: any): ComponentResponse<CreateUser>;
+
+    readonly: CreateUser;
+
+    deferred: CreateUser;
+    $component: CreateUser;
+}
+
+
+}

resources/js/app.ts

@@ -0,0 +1,23 @@
+
+import Airwire from './airwire';
+
+import { createApp, reactive } from 'vue';
+
+createApp(require('./components/Main.vue').default)
+    .use(Airwire.plugin('vue')(reactive))
+    .mount('#app')
+
+Airwire.watch(response => {
+    if (response.metadata.notification) {
+        window.notify(response.metadata.notification);
+    }
+}, exception => {
+    alert(exception.message);
+})
+
+
+declare module 'vue' {
+    export interface ComponentCustomProperties {
+        $airwire: typeof window.Airwire
+    }
+}

resources/js/bootstrap.js

@@ -0,0 +1,41 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });

resources/js/components/CreateReport.vue

@@ -0,0 +1,66 @@
+<template>
+    <form class="flex flex-col space-y-6 w-full" @submit.prevent="submit" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Create Report</h2>
+
+        <form-group label="Assignee" :errors="component.errors.assignee">
+            <select class="form-input" v-model.lazy="component.assignee">
+                <option :value="user.id" v-for="user in component.users" :key="user.id">{{ user.name }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Name" :errors="component.errors.name">
+            <input type="text" class="form-input" v-model.lazy="component.name">
+        </form-group>
+
+        <form-group label="Category" :errors="component.errors.category">
+            <select class="form-input" v-model.lazy="component.category">
+                <option :value="category" v-for="category in categories" :key="category">{{ category }}</option>
+            </select>
+        </form-group>
+
+        <button type="submit" class="bg-blue-500 text-blue-50 px-2 py-1.5 shadow rounded">Create Report</button>
+    </form>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+export default defineComponent({
+    props: {
+        categories: {
+            type: Object as PropType<number[]>,
+            required: true,
+        },
+    },
+
+    components: { Errors, FormGroup },
+
+    data() {
+        return {
+            component: this.$airwire.component('create-report', {
+                name: 'Report ...',
+            }),
+        }
+    },
+
+    mounted() {
+        this.component.mount().then(data => {
+            this.component.defer(() => {
+                this.component.category = this.categories[0];
+                this.component.assignee = (Object.values(data.users)[0] as any).id as number;
+            });
+        })
+    },
+
+    methods: {
+        submit() {
+            this.component.create().then(_ => {
+                window.Airwire.remount(['report-filter']);
+            });
+        }
+    }
+})
+</script>

resources/js/components/CreateUser.vue

@@ -0,0 +1,50 @@
+<template>
+    <form class="flex flex-col space-y-6 w-full" @submit.prevent="submit" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Create User</h2>
+
+        <form-group label="Name" :errors="component.errors.name">
+            <input type="text" class="form-input" v-model.lazy="component.deferred.name">
+        </form-group>
+
+        <form-group label="Email" :errors="component.errors.email">
+            <input type="email" class="form-input" v-model.lazy="component.deferred.email">
+        </form-group>
+
+        <form-group label="Password" :errors="component.errors.password">
+            <input type="password" class="form-input" v-model.lazy="component.deferred.password">
+        </form-group>
+
+        <form-group label="Confirm password" :errors="component.errors.password_confirmation">
+            <input type="password" class="form-input" v-model.lazy="component.deferred.password_confirmation">
+        </form-group>
+
+        <button type="submit" class="bg-blue-500 text-blue-50 px-2 py-1.5 shadow rounded">Create User</button>
+    </form>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+export default defineComponent({
+    components: { Errors, FormGroup },
+
+    data() {
+        return {
+            component: this.$airwire.component('create-user', {
+                name: 'John Doe',
+            }),
+        }
+    },
+
+    methods: {
+        submit() {
+            this.component.create().then(_ => {
+                window.Airwire.remount(['report-filter', 'create-report']);
+            });
+        }
+    }
+})
+</script>

resources/js/components/Errors.vue

@@ -0,0 +1,13 @@
+<template>
+    <ul class="flex flex-col list-style-none gap-2 text-red-400 text-sm font-bold">
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+    </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    props: ['errors'],
+})
+</script>

resources/js/components/FormGroup.vue

@@ -0,0 +1,16 @@
+<template>
+    <label class="flex flex-col space-y-1" :key="label">
+        <span class="text-sm font-semibold text-gray-600">{{ label }}</span>
+        <slot />
+        <errors :errors="errors" :key="label" />
+    </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Errors from './Errors.vue'
+export default defineComponent({
+  components: { Errors },
+    props: ['label', 'errors']
+})
+</script>

resources/js/components/Main.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="flex space-x-16 p-8 w-3/4 mx-auto">
+
+        <div class="w-2/3">
+            <report-filter :categories="categories" :statuses="statuses" />
+        </div>
+        <div class="w-1/3 flex flex-col">
+            <create-report :categories="categories" />
+            <div class="my-6"></div>
+            <create-user />
+        </div>
+
+        <notification />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import CreateReport from './CreateReport.vue'
+import CreateUser from './CreateUser.vue'
+import Notification from './Notification.vue'
+import ReportFilter from './ReportFilter.vue'
+
+export default defineComponent({
+    components: { CreateReport, Notification, ReportFilter, CreateUser },
+
+    data: _ => ({
+        categories: [1, 2, 3],
+        statuses: {
+            pending: {
+                code: 'pending',
+                name: 'Pending',
+                color: 'yellow', // bg-yellow-100 text-yellow-800
+            },
+            resolved: {
+                code: 'resolved',
+                name: 'Resolved',
+                color: 'green', // bg-green-100 text-green-800
+            },
+            invalid: {
+                code: 'invalid',
+                name: 'Invalid',
+                color: 'gray', // bg-gray-100 text-gray-800
+            },
+        }
+    })
+})
+</script>

resources/js/components/Notification.vue

@@ -0,0 +1,52 @@
+<template>
+  <div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
+    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
+      <transition v-for="notification in notifications" :key="notification" enter-active-class="transform ease-out duration-300 transition" enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" enter-to-class="translate-y-0 opacity-100 sm:translate-x-0" leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+        <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
+          <div class="p-4">
+            <div class="flex items-center">
+              <div class="w-0 flex-1 flex justify-between">
+                <p class="w-0 flex-1 text-sm font-medium text-gray-900">
+                  {{ notification }}
+                </p>
+              </div>
+              <div class="ml-4 flex-shrink-0 flex">
+                <button @click="remove(notification)" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  <span class="sr-only">Close</span>
+                  <XIcon class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { XIcon } from '@heroicons/vue/solid'
+import { defineComponent } from '@vue/runtime-core'
+
+export default defineComponent({
+    components: {
+        XIcon,
+    },
+
+    data: () => ({
+        notifications: [] as string[],
+    }),
+
+    mounted() {
+        window.notify = (notification: string) => {
+            this.notifications.push(notification);
+        }
+    },
+
+    methods: {
+        remove(notification: string) {
+            this.notifications = this.notifications.filter(n => n !== notification);
+        }
+    },
+})
+</script>

resources/js/components/Report.vue

@@ -0,0 +1,62 @@
+<template>
+    <a href="#" class="block hover:bg-gray-50">
+        <div class="px-4 py-4 sm:px-6">
+            <div class="flex items-center justify-between">
+                <p class="text-sm font-medium text-indigo-600 truncate">
+                    {{ report.name }}
+                </p>
+                <div class="ml-2 flex-shrink-0 flex">
+                    <p :class="`px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-${color}-100 text-${color}-800`">
+                        {{ status }}
+                    </p>
+                </div>
+            </div>
+            <div class="mt-2 sm:flex sm:justify-between">
+                <div class="sm:flex">
+                    <p class="flex items-center text-sm text-gray-500">
+                        <UsersIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                        {{ report.assignee.name }}
+                    </p>
+                    <p class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
+                        <LocationMarkerIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                        {{ report.category }}
+                    </p>
+                </div>
+                <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                    <CalendarIcon class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" aria-hidden="true" />
+                    <p>
+                        Reported on
+                        {{ ' ' }}
+                        {{ report.created_at }}
+                    </p>
+                </div>
+            </div>
+        </div>
+    </a>
+</template>
+
+<script lang="ts">
+import { CalendarIcon, LocationMarkerIcon, UsersIcon } from '@heroicons/vue/solid'
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+    components: { CalendarIcon, LocationMarkerIcon, UsersIcon },
+
+    props: {
+        report: {
+            type: Object as PropType<Report>,
+            required: true,
+        },
+
+        status: {
+            type: String,
+            required: true,
+        },
+
+        color: {
+            type: String,
+            required: true,
+        },
+    }
+})
+</script>

resources/js/components/ReportFilter.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="flex flex-col space-y-6 w-full" :class="{
+        'opacity-60': component.loading,
+    }">
+        <h2 class="text-xl font-medium">Reports</h2>
+
+        <form-group label="Search" :errors="component.errors.search">
+            <input type="text" class="form-input" v-model.lazy="component.search">
+        </form-group>
+
+        <form-group label="Assignee" :errors="component.errors.assignee">
+            <select class="form-input" v-model.lazy="component.assignee">
+                <option :value="null">Any</option>
+                <option :value="user.id" v-for="user in component.users" :key="user.id">{{ user.name }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Category" :errors="component.errors.category">
+            <select class="form-input" v-model.lazy="component.category">
+                <option :value="null">Any</option>
+                <option :value="category" v-for="category in component.categories" :key="category">{{ category }}</option>
+            </select>
+        </form-group>
+
+        <form-group label="Status" :errors="component.errors.status">
+            <select class="form-input" v-model.lazy="component.status">
+                <option :value="null">Any</option>
+                <option :value="code" v-for="(status, code) in component.statuses" :key="code">{{ status.name }}</option>
+            </select>
+        </form-group>
+
+        <div class="bg-white shadow overflow-hidden sm:rounded-md" v-if="component.reports.length">
+            <ul class="divide-y divide-gray-200">
+                <li v-for="report in component.reports" :key="report.id">
+                    <div @click="component.changeStatus(report.id)">
+                        <report :report="report" :status="statuses[report.status].name" :color="statuses[report.status].color" />
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div v-else>No reports found.</div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/runtime-core'
+import Errors from './Errors.vue'
+import FormGroup from './FormGroup.vue'
+import Report from './Report.vue'
+
+export default defineComponent({
+    props: {
+        categories: {
+            type: Object as PropType<number[]>,
+            required: true,
+        },
+        statuses: {
+            type: Object as PropType<{ [key: string]: { name: string, color: string, code: string } }>,
+            required: true,
+        }
+    },
+
+    components: { Errors, Report, FormGroup },
+
+    data() {
+        let storedState = JSON.parse(window.localStorage.getItem('report-filters') ?? '{}');
+
+        return {
+            component: this.$airwire.component('report-filter', {
+                readonly: {
+                    categories: this.categories,
+                    statuses: this.statuses,
+                },
+
+                ...storedState
+            }),
+        };
+    },
+
+    mounted() {
+        this.component.mount().then(data => {
+            // Load last filters
+            this.component.defer(() => {
+                this.component.status = Object.keys(this.statuses)[0];
+                this.component.category = this.categories[0];
+                this.component.assignee = (Object.values(data.users)[0] as any).id;
+            });
+
+            // Commit the changes
+            this.component.refresh();
+        })
+
+        this.component.watch(response => {
+            window.localStorage.setItem('report-filters', JSON.stringify({
+                search: response.data.search,
+                category: response.data.category,
+                assignee: response.data.assignee,
+                status: response.data.status,
+            }));
+        })
+    }
+})
+</script>

resources/js/types.d.ts

@@ -0,0 +1,11 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
+
+declare module '@heroicons/*';
+
+interface Window {
+    notify(notification: string): void;
+}

resources/lang/en/auth.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used during authentication for various
+    | messages that we need to display to the user. You are free to modify
+    | these language lines according to your application's requirements.
+    |
+    */
+
+    'failed' => 'These credentials do not match our records.',
+    'password' => 'The provided password is incorrect.',
+    'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
+
+];

resources/lang/en/pagination.php

@@ -0,0 +1,19 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Pagination Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used by the paginator library to build
+    | the simple pagination links. You are free to change them to anything
+    | you want to customize your views to better match your application.
+    |
+    */
+
+    'previous' => '&laquo; Previous',
+    'next' => 'Next &raquo;',
+
+];

resources/lang/en/passwords.php

@@ -0,0 +1,22 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Reset Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are the default lines which match reasons
+    | that are given by the password broker for a password update attempt
+    | has failed, such as for an invalid token or invalid new password.
+    |
+    */
+
+    'reset' => 'Your password has been reset!',
+    'sent' => 'We have emailed your password reset link!',
+    'throttled' => 'Please wait before retrying.',
+    'token' => 'This password reset token is invalid.',
+    'user' => "We can't find a user with that email address.",
+
+];

resources/lang/en/reports.php

@@ -0,0 +1,6 @@
+<?php
+
+return [
+    'created' => 'The report :name has been created with id :id!',
+    'status_changed' => 'The status was changed to :status!',
+];

resources/lang/en/users.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+    'created' => 'The user :name has been created with id :id!',
+];

resources/lang/en/validation.php

@@ -0,0 +1,155 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines contain the default error messages used by
+    | the validator class. Some of these rules have multiple versions such
+    | as the size rules. Feel free to tweak each of these messages here.
+    |
+    */
+
+    'accepted' => 'The :attribute must be accepted.',
+    'active_url' => 'The :attribute is not a valid URL.',
+    'after' => 'The :attribute must be a date after :date.',
+    'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
+    'alpha' => 'The :attribute must only contain letters.',
+    'alpha_dash' => 'The :attribute must only contain letters, numbers, dashes and underscores.',
+    'alpha_num' => 'The :attribute must only contain letters and numbers.',
+    'array' => 'The :attribute must be an array.',
+    'before' => 'The :attribute must be a date before :date.',
+    'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
+    'between' => [
+        'numeric' => 'The :attribute must be between :min and :max.',
+        'file' => 'The :attribute must be between :min and :max kilobytes.',
+        'string' => 'The :attribute must be between :min and :max characters.',
+        'array' => 'The :attribute must have between :min and :max items.',
+    ],
+    'boolean' => 'The :attribute field must be true or false.',
+    'confirmed' => 'The :attribute confirmation does not match.',
+    'date' => 'The :attribute is not a valid date.',
+    'date_equals' => 'The :attribute must be a date equal to :date.',
+    'date_format' => 'The :attribute does not match the format :format.',
+    'different' => 'The :attribute and :other must be different.',
+    'digits' => 'The :attribute must be :digits digits.',
+    'digits_between' => 'The :attribute must be between :min and :max digits.',
+    'dimensions' => 'The :attribute has invalid image dimensions.',
+    'distinct' => 'The :attribute field has a duplicate value.',
+    'email' => 'The :attribute must be a valid email address.',
+    'ends_with' => 'The :attribute must end with one of the following: :values.',
+    'exists' => 'The selected :attribute is invalid.',
+    'file' => 'The :attribute must be a file.',
+    'filled' => 'The :attribute field must have a value.',
+    'gt' => [
+        'numeric' => 'The :attribute must be greater than :value.',
+        'file' => 'The :attribute must be greater than :value kilobytes.',
+        'string' => 'The :attribute must be greater than :value characters.',
+        'array' => 'The :attribute must have more than :value items.',
+    ],
+    'gte' => [
+        'numeric' => 'The :attribute must be greater than or equal :value.',
+        'file' => 'The :attribute must be greater than or equal :value kilobytes.',
+        'string' => 'The :attribute must be greater than or equal :value characters.',
+        'array' => 'The :attribute must have :value items or more.',
+    ],
+    'image' => 'The :attribute must be an image.',
+    'in' => 'The selected :attribute is invalid.',
+    'in_array' => 'The :attribute field does not exist in :other.',
+    'integer' => 'The :attribute must be an integer.',
+    'ip' => 'The :attribute must be a valid IP address.',
+    'ipv4' => 'The :attribute must be a valid IPv4 address.',
+    'ipv6' => 'The :attribute must be a valid IPv6 address.',
+    'json' => 'The :attribute must be a valid JSON string.',
+    'lt' => [
+        'numeric' => 'The :attribute must be less than :value.',
+        'file' => 'The :attribute must be less than :value kilobytes.',
+        'string' => 'The :attribute must be less than :value characters.',
+        'array' => 'The :attribute must have less than :value items.',
+    ],
+    'lte' => [
+        'numeric' => 'The :attribute must be less than or equal :value.',
+        'file' => 'The :attribute must be less than or equal :value kilobytes.',
+        'string' => 'The :attribute must be less than or equal :value characters.',
+        'array' => 'The :attribute must not have more than :value items.',
+    ],
+    'max' => [
+        'numeric' => 'The :attribute must not be greater than :max.',
+        'file' => 'The :attribute must not be greater than :max kilobytes.',
+        'string' => 'The :attribute must not be greater than :max characters.',
+        'array' => 'The :attribute must not have more than :max items.',
+    ],
+    'mimes' => 'The :attribute must be a file of type: :values.',
+    'mimetypes' => 'The :attribute must be a file of type: :values.',
+    'min' => [
+        'numeric' => 'The :attribute must be at least :min.',
+        'file' => 'The :attribute must be at least :min kilobytes.',
+        'string' => 'The :attribute must be at least :min characters.',
+        'array' => 'The :attribute must have at least :min items.',
+    ],
+    'multiple_of' => 'The :attribute must be a multiple of :value.',
+    'not_in' => 'The selected :attribute is invalid.',
+    'not_regex' => 'The :attribute format is invalid.',
+    'numeric' => 'The :attribute must be a number.',
+    'password' => 'The password is incorrect.',
+    'present' => 'The :attribute field must be present.',
+    'regex' => 'The :attribute format is invalid.',
+    'required' => 'The :attribute field is required.',
+    'required_if' => 'The :attribute field is required when :other is :value.',
+    'required_unless' => 'The :attribute field is required unless :other is in :values.',
+    'required_with' => 'The :attribute field is required when :values is present.',
+    'required_with_all' => 'The :attribute field is required when :values are present.',
+    'required_without' => 'The :attribute field is required when :values is not present.',
+    'required_without_all' => 'The :attribute field is required when none of :values are present.',
+    'prohibited' => 'The :attribute field is prohibited.',
+    'prohibited_if' => 'The :attribute field is prohibited when :other is :value.',
+    'prohibited_unless' => 'The :attribute field is prohibited unless :other is in :values.',
+    'same' => 'The :attribute and :other must match.',
+    'size' => [
+        'numeric' => 'The :attribute must be :size.',
+        'file' => 'The :attribute must be :size kilobytes.',
+        'string' => 'The :attribute must be :size characters.',
+        'array' => 'The :attribute must contain :size items.',
+    ],
+    'starts_with' => 'The :attribute must start with one of the following: :values.',
+    'string' => 'The :attribute must be a string.',
+    'timezone' => 'The :attribute must be a valid zone.',
+    'unique' => 'The :attribute has already been taken.',
+    'uploaded' => 'The :attribute failed to upload.',
+    'url' => 'The :attribute format is invalid.',
+    'uuid' => 'The :attribute must be a valid UUID.',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Language Lines
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify custom validation messages for attributes using the
+    | convention "attribute.rule" to name the lines. This makes it quick to
+    | specify a specific custom language line for a given attribute rule.
+    |
+    */
+
+    'custom' => [
+        'attribute-name' => [
+            'rule-name' => 'custom-message',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Custom Validation Attributes
+    |--------------------------------------------------------------------------
+    |
+    | The following language lines are used to swap our attribute placeholder
+    | with something more reader friendly such as "E-Mail Address" instead
+    | of "email". This simply helps us make our message more expressive.
+    |
+    */
+
+    'attributes' => [],
+
+];

resources/sass/_variables.scss

@@ -0,0 +1,19 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;

resources/sass/app.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';

resources/views/alpine.blade.php

@@ -0,0 +1 @@
+// todo

resources/views/components/notification.blade.php

@@ -0,0 +1,108 @@
+@props([
+    // For how long should a notification be displayed before it's removed.
+    'duration' => 1750,
+    // Display stored notifications after 150ms, to give the rest of the page time to load, making things feel smoother.
+    'loadDelay' => 150,
+])
+
+<div
+    x-data='{
+        messages: {},
+        pendingRemovals: {},
+        add(message) {
+            if (typeof message === "string") {
+                message = {
+                    title: message,
+                    body: "",
+                    link: "",
+                }
+            }
+            let indices = Object.keys(this.messages).sort();
+            let lastIndex = parseInt(indices[indices.length - 1]) || 0;
+            let index = lastIndex + 1;
+            this.messages[index] = message;
+            this.scheduleRemoval(index);
+        },
+        scheduleRemoval(messageIndex) {
+            // For loops we use integers
+            messageIndex = parseInt(messageIndex);
+            // Schedule removals for the object and all of the following ones of they dont have a removal scheduled yet.
+            for (let i = messageIndex; i >= 0; i--) {
+                // For object keys we use strings
+                let index = i.toString();
+                if (! Object.keys(this.pendingRemovals).includes(index)) {
+                    this.pendingRemovals[index] = setTimeout(() => { this.remove(index) }, {!! $duration !!});
+                }
+            }
+        },
+        cancelRemoval(messageIndex) {
+            // For loops we use integers
+            messageIndex = parseInt(messageIndex);
+            // When we cancel the removal of a message, we also want to cancel the removal of all
+            // messages above it, to prevent the messages from changing position on the screen.
+            for (let i = 0; i <= messageIndex; i++) {
+                // For object keys we use strings
+                let index = i.toString();
+                clearTimeout(this.pendingRemovals[index]);
+                delete this.pendingRemovals[index];
+            }
+        },
+        remove(messageIndex) {
+            delete this.messages[messageIndex];
+            delete this.pendingRemovals[messageIndex];
+        },
+    }'
+    x-init="window.notify = (...args) => add(...args)"
+    class="
+    fixed inset-0 px-4 py-6 pointer-events-none sm:p-6
+    flex flex-col {{-- Stack notifications below each other --}}
+    items-center justify-start {{-- Mobile: top center --}}
+    sm:items-end sm:justify-start {{-- Desktop: top right corner --}}
+    space-y-3 {{-- Space between individual notifications --}}
+    "
+>
+    <template x-for="[index, message] of Object.entries(messages)" :key="index" hidden>
+        <div
+            x-transition:enter="transform ease-out duration-200 transition"
+            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-10"
+            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
+            x-transition:leave="transition ease-in duration-200"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            class="max-w-sm w-full bg-white hover:bg-purple-50 shadow rounded-md overflow-hidden pointer-events-auto"
+            @mouseenter="cancelRemoval(index)"
+            @mouseleave="scheduleRemoval(index)"
+        >
+            <div class="rounded-lg shadow-xs overflow-hidden">
+                <div class="p-4">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                            @svg('heroicon-o-information-circle', ['class' => 'h-6 w-6 text-purple-500'])
+                        </div>
+                        <template x-if="message.link">
+                            <a :href="message.link" class="ml-3 w-0 flex-1 pt-0.5">
+                                <p x-text="message.title" class="text-sm leading-5 font-medium text-gray-700"></p>
+                                <p x-text="message.body" class="mt-1 text-sm text-gray-500"></p>
+                            </a>
+                        </template>
+                        <template x-if="! message.link">
+                            <div class="ml-3 w-0 flex-1 pt-0.5">
+                                <p x-text="message.title" class="text-sm leading-5 font-medium text-gray-700"></p>
+                                <p x-text="message.body" class="mt-1 text-sm text-gray-500"></p>
+                            </div>
+                        </template>
+                        <div class="ml-4 flex-shrink-0 flex">
+                            <button
+                                @click="remove(index)"
+                                class="rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                            >
+                                <span class="sr-only">Close notification</span>
+                                @svg('heroicon-o-x', ['class' => 'h-5 w-5'])
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>

resources/views/vue.blade.php

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+
+    <title>Vue | Airwire</title>
+
+    <!-- Fonts -->
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+
+    <style>
+        body {
+            font-family: 'Inter var', sans-serif;
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 py-4 sm:pt-0">
+        <div id="app" class="2xl:w-3/4 w-full"></div>
+    </div>
+</body>
+
+<script src="{{ asset('js/app.js') }}"></script>
+</html>