From e758bbf70b3e860895e84089c706bdf8815bf98d Mon Sep 17 00:00:00 2001
From: Claudio Dekker <claudio@ubient.net>
Date: Wed, 8 Dec 2021 18:52:56 +0100
Subject: [PATCH] WIP

---
 .eslintrc.js                                |  1 +
 package.json                                |  5 ++
 resources/js/Pages/Auth/Login.vue           | 12 ++--
 resources/js/Pages/Contacts/Create.vue      | 28 ++++----
 resources/js/Pages/Contacts/Edit.vue        | 32 ++++-----
 resources/js/Pages/Contacts/Index.vue       | 34 ++++-----
 resources/js/Pages/Dashboard/Index.vue      |  4 +-
 resources/js/Pages/Organizations/Create.vue | 24 +++----
 resources/js/Pages/Organizations/Edit.vue   | 50 +++++++-------
 resources/js/Pages/Organizations/Index.vue  | 76 +++++++++++----------
 resources/js/Pages/Reports/Index.vue        |  2 +-
 resources/js/Pages/Users/Create.vue         | 20 +++---
 resources/js/Pages/Users/Edit.vue           | 28 ++++----
 resources/js/Pages/Users/Index.vue          | 36 +++++-----
 resources/js/Shared/Dropdown.vue            |  6 +-
 resources/js/Shared/FileInput.vue           |  9 +--
 resources/js/Shared/FlashMessages.vue       |  8 +--
 resources/js/Shared/Icon.vue                |  7 +-
 resources/js/Shared/Layout.vue              | 30 ++++----
 resources/js/Shared/MainMenu.vue            | 18 ++---
 resources/js/Shared/Pagination.vue          |  4 +-
 resources/js/Shared/SearchFilter.vue        | 13 ++--
 resources/js/Shared/SelectInput.vue         |  1 +
 resources/js/Shared/TextInput.vue           |  1 +
 resources/js/Shared/TextareaInput.vue       |  1 +
 resources/js/Shared/TrashedMessage.vue      |  9 +--
 yarn.lock                                   | 53 ++++++++++++++
 27 files changed, 283 insertions(+), 229 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index a38644f..88b3b71 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
     'comma-dangle': ['warn', 'always-multiline'],
     'vue/multi-word-component-names': 'off',
     'vue/max-attributes-per-line': 'off',
+    'vue/no-v-html': 'off',
     'vue/require-default-prop': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/html-self-closing': [
diff --git a/package.json b/package.json
index c5479b6..41fe9de 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
     "scripts": {
         "dev": "npm run development",
         "development": "mix",
+        "fix:eslint": "eslint --ext .js,.vue resources/js/ --fix",
+        "fix:prettier": "prettier --write --loglevel warn 'resources/js/**/*.vue'",
+        "fix-code-style": "npm run fix:prettier && npm run fix:eslint",
         "watch": "mix watch",
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
@@ -23,6 +26,8 @@
         "postcss": "^8.4.4",
         "postcss-import": "^12.0.1",
         "postcss-nesting": "^7.0.1",
+        "prettier": "^2.5.1",
+        "prettier-plugin-tailwind": "^2.2.12",
         "tailwindcss": "^2.0.3",
         "uuid": "^8.3.2",
         "vue": "^3.2.24",
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index fbb877d..57e9e31 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,21 +1,21 @@
 <template>
   <Head title="Login" />
-  <div class="p-6 bg-indigo-800 min-h-screen flex justify-center items-center">
+  <div class="flex items-center justify-center p-6 min-h-screen bg-indigo-800">
     <div class="w-full max-w-md">
       <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
       <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="login">
         <div class="px-10 py-12">
-          <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
-          <div class="mx-auto mt-6 w-24 border-b-2" />
+          <h1 class="text-center text-3xl font-bold">Welcome Back!</h1>
+          <div class="mt-6 mx-auto w-24 border-b-2" />
           <text-input v-model="form.email" :error="form.errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
           <text-input v-model="form.password" :error="form.errors.password" class="mt-6" label="Password" type="password" />
-          <label class="mt-6 select-none flex items-center" for="remember">
+          <label class="flex items-center mt-6 select-none" for="remember">
             <input id="remember" v-model="form.remember" class="mr-1" type="checkbox" />
             <span class="text-sm">Remember Me</span>
           </label>
         </div>
-        <div class="px-10 py-4 bg-gray-100 border-t border-gray-100 flex">
-          <loading-button :loading="form.processing" class="ml-auto btn-indigo" type="submit">Login</loading-button>
+        <div class="flex px-10 py-4 bg-gray-100 border-t border-gray-100">
+          <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Login</loading-button>
         </div>
       </form>
     </div>
diff --git a/resources/js/Pages/Contacts/Create.vue b/resources/js/Pages/Contacts/Create.vue
index cbf9cb6..6aa065d 100644
--- a/resources/js/Pages/Contacts/Create.vue
+++ b/resources/js/Pages/Contacts/Create.vue
@@ -1,32 +1,32 @@
 <template>
   <div>
     <Head title="Create Contact" />
-    <h1 class="mb-8 font-bold text-3xl">
+    <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/contacts">Contacts</Link>
       <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
-          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
-          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
             <option :value="null" />
             <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
           </select-input>
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.phone" :error="form.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
-          <text-input v-model="form.address" :error="form.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
-          <text-input v-model="form.city" :error="form.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
-          <text-input v-model="form.region" :error="form.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
-          <select-input v-model="form.country" :error="form.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
+          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
           <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Contact</loading-button>
         </div>
       </form>
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index e74007c..08a3cc3 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -1,36 +1,34 @@
 <template>
   <div>
     <Head :title="`${form.first_name} ${form.last_name}`" />
-    <h1 class="mb-8 font-bold text-3xl">
+    <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/contacts">Contacts</Link>
       <span class="text-indigo-400 font-medium">/</span>
       {{ form.first_name }} {{ form.last_name }}
     </h1>
-    <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
-      This contact has been deleted.
-    </trashed-message>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> This contact has been deleted. </trashed-message>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
-          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
-          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <select-input v-model="form.organization_id" :error="form.errors.organization_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Organization">
             <option :value="null" />
             <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
           </select-input>
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.phone" :error="form.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
-          <text-input v-model="form.address" :error="form.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
-          <text-input v-model="form.city" :error="form.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
-          <text-input v-model="form.region" :error="form.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
-          <select-input v-model="form.country" :error="form.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
+          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
+        <div class="flex items-center px-8 py-4 bg-gray-50 border-t border-gray-100">
           <button v-if="!contact.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Contact</button>
           <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</loading-button>
         </div>
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 6a885d0..a083ec3 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <Head title="Contacts" />
-    <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
-    <div class="mb-6 flex justify-between items-center">
-      <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
+    <h1 class="mb-8 text-3xl font-bold">Contacts</h1>
+    <div class="flex items-center justify-between mb-6">
+      <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
         <label class="block text-gray-700">Trashed:</label>
-        <select v-model="form.trashed" class="mt-1 w-full form-select">
+        <select v-model="form.trashed" class="form-select mt-1 w-full">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
@@ -19,43 +19,43 @@
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <tr class="text-left font-bold">
-          <th class="px-6 pt-6 pb-4">Name</th>
-          <th class="px-6 pt-6 pb-4">Organization</th>
-          <th class="px-6 pt-6 pb-4">City</th>
-          <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
+          <th class="pb-4 pt-6 px-6">Name</th>
+          <th class="pb-4 pt-6 px-6">Organization</th>
+          <th class="pb-4 pt-6 px-6">City</th>
+          <th class="pb-4 pt-6 px-6" colspan="2">Phone</th>
         </tr>
         <tr v-for="contact in contacts.data" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="`/contacts/${contact.id}/edit`">
+            <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/contacts/${contact.id}/edit`">
               {{ contact.name }}
-              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               <div v-if="contact.organization">
                 {{ contact.organization.name }}
               </div>
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               {{ contact.city }}
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               {{ contact.phone }}
             </Link>
           </td>
-          <td class="border-t w-px">
-            <Link class="px-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+          <td class="w-px border-t">
+            <Link class="flex items-center px-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
         <tr v-if="contacts.data.length === 0">
-          <td class="border-t px-6 py-4" colspan="4">No contacts found.</td>
+          <td class="px-6 py-4 border-t" colspan="4">No contacts found.</td>
         </tr>
       </table>
     </div>
@@ -97,7 +97,7 @@ export default {
   watch: {
     form: {
       deep: true,
-      handler: throttle(function() {
+      handler: throttle(function () {
         this.$inertia.get('/contacts', pickBy(this.form), { preserveState: true })
       }, 150),
     },
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 52f6553..6e71281 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <Head title="Dashboard" />
-    <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
-    <p class="mb-8 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 underline hover:text-orange-600" href="https://inertiajs.com">Inertia.js</a> works.</p>
+    <h1 class="mb-8 text-3xl font-bold">Dashboard</h1>
+    <p class="mb-8 leading-normal">Hey there! Welcome to Ping CRM, a demo app designed to help illustrate how <a class="text-indigo-500 hover:text-orange-600 underline" href="https://inertiajs.com">Inertia.js</a> works.</p>
   </div>
 </template>
 
diff --git a/resources/js/Pages/Organizations/Create.vue b/resources/js/Pages/Organizations/Create.vue
index dc57fde..31e0e34 100644
--- a/resources/js/Pages/Organizations/Create.vue
+++ b/resources/js/Pages/Organizations/Create.vue
@@ -1,27 +1,27 @@
 <template>
   <div>
     <Head title="Create Organization" />
-    <h1 class="mb-8 font-bold text-3xl">
+    <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/organizations">Organizations</Link>
       <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.phone" :error="form.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
-          <text-input v-model="form.address" :error="form.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
-          <text-input v-model="form.city" :error="form.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
-          <text-input v-model="form.region" :error="form.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
-          <select-input v-model="form.country" :error="form.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
+          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
           <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create Organization</loading-button>
         </div>
       </form>
diff --git a/resources/js/Pages/Organizations/Edit.vue b/resources/js/Pages/Organizations/Edit.vue
index c1282aa..6f704d1 100644
--- a/resources/js/Pages/Organizations/Edit.vue
+++ b/resources/js/Pages/Organizations/Edit.vue
@@ -1,69 +1,67 @@
 <template>
   <div>
     <Head :title="form.name" />
-    <h1 class="mb-8 font-bold text-3xl">
+    <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/organizations">Organizations</Link>
       <span class="text-indigo-400 font-medium">/</span>
       {{ form.name }}
     </h1>
-    <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
-      This organization has been deleted.
-    </trashed-message>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore"> This organization has been deleted. </trashed-message>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.name" :error="form.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.phone" :error="form.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
-          <text-input v-model="form.address" :error="form.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
-          <text-input v-model="form.city" :error="form.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
-          <text-input v-model="form.region" :error="form.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
-          <select-input v-model="form.country" :error="form.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :error="form.errors.country" class="pb-8 pr-6 w-full lg:w-1/2" label="Country">
             <option :value="null" />
             <option value="CA">Canada</option>
             <option value="US">United States</option>
           </select-input>
-          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
+          <text-input v-model="form.postal_code" :error="form.errors.postal_code" class="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
+        <div class="flex items-center px-8 py-4 bg-gray-50 border-t border-gray-100">
           <button v-if="!organization.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete Organization</button>
           <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Organization</loading-button>
         </div>
       </form>
     </div>
-    <h2 class="mt-12 font-bold text-2xl">Contacts</h2>
+    <h2 class="mt-12 text-2xl font-bold">Contacts</h2>
     <div class="mt-6 bg-white rounded shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <tr class="text-left font-bold">
-          <th class="px-6 pt-6 pb-4">Name</th>
-          <th class="px-6 pt-6 pb-4">City</th>
-          <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
+          <th class="pb-4 pt-6 px-6">Name</th>
+          <th class="pb-4 pt-6 px-6">City</th>
+          <th class="pb-4 pt-6 px-6" colspan="2">Phone</th>
         </tr>
         <tr v-for="contact in organization.contacts" :key="contact.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="`/contacts/${contact.id}/edit`">
+            <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/contacts/${contact.id}/edit`">
               {{ contact.name }}
-              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
+              <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               {{ contact.city }}
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               {{ contact.phone }}
             </Link>
           </td>
-          <td class="border-t w-px">
-            <Link class="px-4 flex items-center" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
+          <td class="w-px border-t">
+            <Link class="flex items-center px-4" :href="`/contacts/${contact.id}/edit`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
         <tr v-if="organization.contacts.length === 0">
-          <td class="border-t px-6 py-4" colspan="4">No contacts found.</td>
+          <td class="px-6 py-4 border-t" colspan="4">No contacts found.</td>
         </tr>
       </table>
     </div>
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index f8cb232..3fd801e 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <Head title="Organizations" />
-    <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
-    <div class="mb-6 flex justify-between items-center">
-      <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
+    <h1 class="mb-8 text-3xl font-bold">Organizations</h1>
+    <div class="flex items-center justify-between mb-6">
+      <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
         <label class="block text-gray-700">Trashed:</label>
-        <select v-model="form.trashed" class="mt-1 w-full form-select">
+        <select v-model="form.trashed" class="form-select mt-1 w-full">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
@@ -18,37 +18,41 @@
     </div>
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
-        <tr class="text-left font-bold">
-          <th class="px-6 pt-6 pb-4">Name</th>
-          <th class="px-6 pt-6 pb-4">City</th>
-          <th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
-        </tr>
-        <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
-          <td class="border-t">
-            <Link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="`/organizations/${organization.id}/edit`">
-              {{ organization.name }}
-              <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
-            </Link>
-          </td>
-          <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.city }}
-            </Link>
-          </td>
-          <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              {{ organization.phone }}
-            </Link>
-          </td>
-          <td class="border-t w-px">
-            <Link class="px-4 flex items-center" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
-              <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
-            </Link>
-          </td>
-        </tr>
-        <tr v-if="organizations.data.length === 0">
-          <td class="border-t px-6 py-4" colspan="4">No organizations found.</td>
-        </tr>
+        <thead>
+          <tr class="text-left font-bold">
+            <th class="pb-4 pt-6 px-6">Name</th>
+            <th class="pb-4 pt-6 px-6">City</th>
+            <th class="pb-4 pt-6 px-6" colspan="2">Phone</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
+            <td class="border-t">
+              <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/organizations/${organization.id}/edit`">
+                {{ organization.name }}
+                <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+                {{ organization.city }}
+              </Link>
+            </td>
+            <td class="border-t">
+              <Link class="flex items-center px-6 py-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+                {{ organization.phone }}
+              </Link>
+            </td>
+            <td class="w-px border-t">
+              <Link class="flex items-center px-4" :href="`/organizations/${organization.id}/edit`" tabindex="-1">
+                <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
+              </Link>
+            </td>
+          </tr>
+          <tr v-if="organizations.data.length === 0">
+            <td class="px-6 py-4 border-t" colspan="4">No organizations found.</td>
+          </tr>
+        </tbody>
       </table>
     </div>
     <pagination class="mt-6" :links="organizations.links" />
@@ -89,7 +93,7 @@ export default {
   watch: {
     form: {
       deep: true,
-      handler: throttle(function() {
+      handler: throttle(function () {
         this.$inertia.get('/organizations', pickBy(this.form), { preserveState: true })
       }, 150),
     },
diff --git a/resources/js/Pages/Reports/Index.vue b/resources/js/Pages/Reports/Index.vue
index 0b9e71e..3e0f5df 100644
--- a/resources/js/Pages/Reports/Index.vue
+++ b/resources/js/Pages/Reports/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Head title="Reports" />
-    <h1 class="mb-8 font-bold text-3xl">Reports</h1>
+    <h1 class="mb-8 text-3xl font-bold">Reports</h1>
   </div>
 </template>
 
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 2f57be0..cdb9a61 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,24 +1,24 @@
 <template>
   <div>
     <Head title="Create User" />
-    <h1 class="mb-8 font-bold text-3xl">
+    <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/users">Users</Link>
       <span class="text-indigo-400 font-medium">/</span> Create
     </h1>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
-          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.password" :error="form.errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
-          <select-input v-model="form.owner" :error="form.errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.password" :error="form.errors.password" class="pb-8 pr-6 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
+          <select-input v-model="form.owner" :error="form.errors.owner" class="pb-8 pr-6 w-full lg:w-1/2" label="Owner">
             <option :value="true">Yes</option>
             <option :value="false">No</option>
           </select-input>
-          <file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
+          <file-input v-model="form.photo" :error="form.errors.photo" class="pb-8 pr-6 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex justify-end items-center">
+        <div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
           <loading-button :loading="form.processing" class="btn-indigo" type="submit">Create User</loading-button>
         </div>
       </form>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 8863f5c..2ef4096 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,31 +1,29 @@
 <template>
   <div>
     <Head :title="`${form.first_name} ${form.last_name}`" />
-    <div class="mb-8 flex justify-start max-w-3xl">
-      <h1 class="font-bold text-3xl">
+    <div class="flex justify-start mb-8 max-w-3xl">
+      <h1 class="text-3xl font-bold">
         <Link class="text-indigo-400 hover:text-indigo-600" href="/users">Users</Link>
         <span class="text-indigo-400 font-medium">/</span>
         {{ form.first_name }} {{ form.last_name }}
       </h1>
-      <img v-if="user.photo" class="block w-8 h-8 rounded-full ml-4" :src="user.photo" />
+      <img v-if="user.photo" class="block ml-4 w-8 h-8 rounded-full" :src="user.photo" />
     </div>
-    <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
-      This user has been deleted.
-    </trashed-message>
-    <div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
+    <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore"> This user has been deleted. </trashed-message>
+    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
-        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
-          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
-          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
-          <text-input v-model="form.email" :error="form.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
-          <text-input v-model="form.password" :error="form.errors.password" class="pr-6 pb-8 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
-          <select-input v-model="form.owner" :error="form.errors.owner" class="pr-6 pb-8 w-full lg:w-1/2" label="Owner">
+        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
+          <text-input v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <text-input v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.password" :error="form.errors.password" class="pb-8 pr-6 w-full lg:w-1/2" type="password" autocomplete="new-password" label="Password" />
+          <select-input v-model="form.owner" :error="form.errors.owner" class="pb-8 pr-6 w-full lg:w-1/2" label="Owner">
             <option :value="true">Yes</option>
             <option :value="false">No</option>
           </select-input>
-          <file-input v-model="form.photo" :error="form.errors.photo" class="pr-6 pb-8 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
+          <file-input v-model="form.photo" :error="form.errors.photo" class="pb-8 pr-6 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
         </div>
-        <div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
+        <div class="flex items-center px-8 py-4 bg-gray-50 border-t border-gray-100">
           <button v-if="!user.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete User</button>
           <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</loading-button>
         </div>
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index b1976ab..45f4506 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
     <Head title="Users" />
-    <h1 class="mb-8 font-bold text-3xl">Users</h1>
-    <div class="mb-6 flex justify-between items-center">
-      <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
+    <h1 class="mb-8 text-3xl font-bold">Users</h1>
+    <div class="flex items-center justify-between mb-6">
+      <search-filter v-model="form.search" class="mr-4 w-full max-w-md" @reset="reset">
         <label class="block text-gray-700">Role:</label>
-        <select v-model="form.role" class="mt-1 w-full form-select">
+        <select v-model="form.role" class="form-select mt-1 w-full">
           <option :value="null" />
           <option value="user">User</option>
           <option value="owner">Owner</option>
         </select>
-        <label class="mt-4 block text-gray-700">Trashed:</label>
-        <select v-model="form.trashed" class="mt-1 w-full form-select">
+        <label class="block mt-4 text-gray-700">Trashed:</label>
+        <select v-model="form.trashed" class="form-select mt-1 w-full">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
@@ -25,36 +25,36 @@
     <div class="bg-white rounded-md shadow overflow-x-auto">
       <table class="w-full whitespace-nowrap">
         <tr class="text-left font-bold">
-          <th class="px-6 pt-6 pb-4">Name</th>
-          <th class="px-6 pt-6 pb-4">Email</th>
-          <th class="px-6 pt-6 pb-4" colspan="2">Role</th>
+          <th class="pb-4 pt-6 px-6">Name</th>
+          <th class="pb-4 pt-6 px-6">Email</th>
+          <th class="pb-4 pt-6 px-6" colspan="2">Role</th>
         </tr>
         <tr v-for="user in users" :key="user.id" class="hover:bg-gray-100 focus-within:bg-gray-100">
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center focus:text-indigo-500" :href="`/users/${user.id}/edit`">
-              <img v-if="user.photo" class="block w-5 h-5 rounded-full mr-2 -my-2" :src="user.photo" />
+            <Link class="flex items-center px-6 py-4 focus:text-indigo-500" :href="`/users/${user.id}/edit`">
+              <img v-if="user.photo" class="block -my-2 mr-2 w-5 h-5 rounded-full" :src="user.photo" />
               {{ user.name }}
-              <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-gray-400 ml-2" />
+              <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/users/${user.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/users/${user.id}/edit`" tabindex="-1">
               {{ user.email }}
             </Link>
           </td>
           <td class="border-t">
-            <Link class="px-6 py-4 flex items-center" :href="`/users/${user.id}/edit`" tabindex="-1">
+            <Link class="flex items-center px-6 py-4" :href="`/users/${user.id}/edit`" tabindex="-1">
               {{ user.owner ? 'Owner' : 'User' }}
             </Link>
           </td>
-          <td class="border-t w-px">
-            <Link class="px-4 flex items-center" :href="`/users/${user.id}/edit`" tabindex="-1">
+          <td class="w-px border-t">
+            <Link class="flex items-center px-4" :href="`/users/${user.id}/edit`" tabindex="-1">
               <icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
         <tr v-if="users.length === 0">
-          <td class="border-t px-6 py-4" colspan="4">No users found.</td>
+          <td class="px-6 py-4 border-t" colspan="4">No users found.</td>
         </tr>
       </table>
     </div>
@@ -94,7 +94,7 @@ export default {
   watch: {
     form: {
       deep: true,
-      handler: throttle(function() {
+      handler: throttle(function () {
         this.$inertia.get('/users', pickBy(this.form), { preserveState: true })
       }, 150),
     },
diff --git a/resources/js/Shared/Dropdown.vue b/resources/js/Shared/Dropdown.vue
index 97453bf..9e2d7ea 100644
--- a/resources/js/Shared/Dropdown.vue
+++ b/resources/js/Shared/Dropdown.vue
@@ -3,8 +3,8 @@
     <slot />
     <teleport v-if="show" to="#dropdown">
       <div>
-        <div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: .2" @click="show = false" />
-        <div ref="dropdown" style="position: absolute; z-index: 99999;" @click.stop="show = !autoClose">
+        <div style="position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99998; background: black; opacity: 0.2" @click="show = false" />
+        <div ref="dropdown" style="position: absolute; z-index: 99999" @click.stop="show = !autoClose">
           <slot name="dropdown" />
         </div>
       </div>
@@ -53,7 +53,7 @@ export default {
     },
   },
   mounted() {
-    document.addEventListener('keydown', e => {
+    document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         this.show = false
       }
diff --git a/resources/js/Shared/FileInput.vue b/resources/js/Shared/FileInput.vue
index dd6bc7a..3c843f9 100644
--- a/resources/js/Shared/FileInput.vue
+++ b/resources/js/Shared/FileInput.vue
@@ -4,17 +4,13 @@
     <div class="form-input p-0" :class="{ error: errors.length }">
       <input ref="file" type="file" :accept="accept" class="hidden" @change="change" />
       <div v-if="!modelValue" class="p-2">
-        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="browse">
-          Browse
-        </button>
+        <button type="button" class="px-4 py-1 text-white text-xs font-medium bg-gray-500 hover:bg-gray-700 rounded-sm" @click="browse">Browse</button>
       </div>
       <div v-else class="flex items-center justify-between p-2">
         <div class="flex-1 pr-1">
           {{ modelValue.name }} <span class="text-gray-500 text-xs">({{ filesize(modelValue.size) }})</span>
         </div>
-        <button type="button" class="px-4 py-1 bg-gray-500 hover:bg-gray-700 rounded-sm text-xs font-medium text-white" @click="remove">
-          Remove
-        </button>
+        <button type="button" class="px-4 py-1 text-white text-xs font-medium bg-gray-500 hover:bg-gray-700 rounded-sm" @click="remove">Remove</button>
       </div>
     </div>
     <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
@@ -32,6 +28,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['update:modelValue'],
   watch: {
     modelValue(value) {
       if (!value) {
diff --git a/resources/js/Shared/FlashMessages.vue b/resources/js/Shared/FlashMessages.vue
index 1a152fc..1b40882 100644
--- a/resources/js/Shared/FlashMessages.vue
+++ b/resources/js/Shared/FlashMessages.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div v-if="$page.props.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
+    <div v-if="$page.props.flash.success && show" class="flex items-center justify-between mb-8 max-w-3xl bg-green-500 rounded">
       <div class="flex items-center">
-        <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
+        <svg class="flex-shrink-0 ml-4 mr-2 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
         <div class="py-4 text-white text-sm font-medium">{{ $page.props.flash.success }}</div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
         <svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
       </button>
     </div>
-    <div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-400 rounded max-w-3xl">
+    <div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="flex items-center justify-between mb-8 max-w-3xl bg-red-500 rounded">
       <div class="flex items-center">
-        <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
+        <svg class="flex-shrink-0 ml-4 mr-2 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
         <div v-if="$page.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div>
         <div v-else class="py-4 text-white text-sm font-medium">
           <span v-if="Object.keys($page.props.errors).length === 1">There is one form error.</span>
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
index ec99414..35db91a 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -1,14 +1,9 @@
 <template>
-  <svg v-if="name === 'apple'" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="nonzero"><path d="M46.173 19.967C49.927-1.838 19.797-.233 14.538.21c-.429.035-.648.4-.483.8 2.004 4.825 14.168 31.66 32.118 18.957zm13.18 1.636c1.269-.891 1.35-1.614.047-2.453l-2.657-1.71c-.94-.607-1.685-.606-2.532.129-5.094 4.42-7.336 9.18-8.211 15.24 1.597.682 3.55.79 5.265.328 1.298-4.283 3.64-8.412 8.088-11.534z" /><path d="M88.588 67.75c9.65-27.532-13.697-45.537-35.453-32.322-1.84 1.118-4.601 1.118-6.441 0-21.757-13.215-45.105 4.79-35.454 32.321 5.302 15.123 17.06 39.95 37.295 29.995.772-.38 1.986-.38 2.758 0 20.235 9.955 31.991-14.872 37.295-29.995z" /></g></svg>
-  <svg v-else-if="name === 'book'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 4H5a1 1 0 1 1 0-2h11V1a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V5a1 1 0 0 0-1-1h-7v8l-2-2-2 2V4z" /></svg>
-  <svg v-else-if="name === 'cheveron-down'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
+  <svg v-if="name === 'cheveron-down'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
   <svg v-else-if="name === 'cheveron-right'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="12.95 10.707 13.657 10 8 4.343 6.586 5.757 10.828 10 6.586 14.243 8 15.657 12.95 10.707" /></svg>
   <svg v-else-if="name === 'dashboard'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm-5.6-4.29a9.95 9.95 0 0 1 11.2 0 8 8 0 1 0-11.2 0zm6.12-7.64l3.02-3.02 1.41 1.41-3.02 3.02a2 2 0 1 1-1.41-1.41z" /></svg>
-  <svg v-else-if="name === 'location'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /></svg>
   <svg v-else-if="name === 'office'" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill-rule="evenodd" d="M7 0h86v100H57.108V88.418H42.892V100H7V0zm9 64h11v15H16V64zm57 0h11v15H73V64zm-19 0h11v15H54V64zm-19 0h11v15H35V64zM16 37h11v15H16V37zm57 0h11v15H73V37zm-19 0h11v15H54V37zm-19 0h11v15H35V37zM16 11h11v15H16V11zm57 0h11v15H73V11zm-19 0h11v15H54V11zm-19 0h11v15H35V11z" /></svg>
   <svg v-else-if="name === 'printer'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 16H0V6h20v10h-4v4H4v-4zm2-4v6h8v-6H6zM4 0h12v5H4V0zM2 8v2h2V8H2zm4 0v2h2V8H6z" /></svg>
-  <svg v-else-if="name === 'shopping-cart'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 2h16l-3 9H4a1 1 0 1 0 0 2h13v2H4a3 3 0 0 1 0-6h.33L3 5 2 2H0V0h3a1 1 0 0 1 1 1v1zm1 18a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm10 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
-  <svg v-else-if="name === 'store-front'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z" /></svg>
   <svg v-else-if="name === 'trash'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z" /></svg>
   <svg v-else-if="name === 'users'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z" /></svg>
 </template>
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 81c4f5d..f98c4d3 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -2,48 +2,48 @@
   <div>
     <div id="dropdown" />
     <div class="md:flex md:flex-col">
-      <div class="md:h-screen md:flex md:flex-col">
+      <div class="md:flex md:flex-col md:h-screen">
         <div class="md:flex md:flex-shrink-0">
-          <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
+          <div class="flex items-center justify-between px-6 py-4 bg-indigo-900 md:flex-shrink-0 md:justify-center md:w-56">
             <Link class="mt-1" href="/">
               <logo class="fill-white" width="120" height="28" />
             </Link>
             <dropdown class="md:hidden" placement="bottom-end">
               <template #default>
-                <svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
+                <svg class="w-6 h-6 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
               </template>
               <template #dropdown>
-                <div class="mt-2 px-8 py-4 shadow-lg bg-indigo-800 rounded">
+                <div class="mt-2 px-8 py-4 bg-indigo-800 rounded shadow-lg">
                   <main-menu />
                 </div>
               </template>
             </dropdown>
           </div>
-          <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
-            <div class="mt-1 mr-4">{{ auth.user.account.name }}</div>
+          <div class="md:text-md flex items-center justify-between p-4 w-full text-sm bg-white border-b md:px-12 md:py-0">
+            <div class="mr-4 mt-1">{{ auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <template #default>
-                <div class="flex items-center cursor-pointer select-none group">
-                  <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-nowrap">
+                <div class="group flex items-center cursor-pointer select-none">
+                  <div class="mr-1 text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 whitespace-nowrap">
                     <span>{{ auth.user.first_name }}</span>
                     <span class="hidden md:inline">&nbsp;{{ auth.user.last_name }}</span>
                   </div>
-                  <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
+                  <icon class="w-5 h-5 fill-gray-700 group-hover:fill-indigo-600 focus:fill-indigo-600" name="cheveron-down" />
                 </div>
               </template>
               <template #dropdown>
-                <div class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
-                  <Link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="`/users/${auth.user.id}/edit`">My Profile</Link>
-                  <Link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" href="/users">Manage Users</Link>
-                  <Link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white w-full text-left" href="/logout" method="delete" as="button">Logout</Link>
+                <div class="mt-2 py-2 text-sm bg-white rounded shadow-xl">
+                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" :href="`/users/${auth.user.id}/edit`">My Profile</Link>
+                  <Link class="block px-6 py-2 hover:text-white hover:bg-indigo-500" href="/users">Manage Users</Link>
+                  <Link class="block px-6 py-2 w-full text-left hover:text-white hover:bg-indigo-500" href="/logout" method="delete" as="button">Logout</Link>
                 </div>
               </template>
             </dropdown>
           </div>
         </div>
         <div class="md:flex md:flex-grow md:overflow-hidden">
-          <main-menu class="hidden md:block bg-indigo-800 flex-shrink-0 w-56 p-12 overflow-y-auto" />
-          <div class="md:flex-1 px-4 py-8 md:p-12 md:overflow-y-auto" scroll-region>
+          <main-menu class="hidden flex-shrink-0 p-12 w-56 bg-indigo-800 overflow-y-auto md:block" />
+          <div class="px-4 py-8 md:flex-1 md:p-12 md:overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
           </div>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index e6ece26..c3be4cf 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
     <div class="mb-4">
-      <Link class="flex items-center group py-3" href="/">
-        <icon name="dashboard" class="w-4 h-4 mr-2" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+      <Link class="group flex items-center py-3" href="/">
+        <icon name="dashboard" class="mr-2 w-4 h-4" :class="isUrl('') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
         <div :class="isUrl('') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Dashboard</div>
       </Link>
     </div>
     <div class="mb-4">
-      <Link class="flex items-center group py-3" href="/organizations">
-        <icon name="office" class="w-4 h-4 mr-2" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+      <Link class="group flex items-center py-3" href="/organizations">
+        <icon name="office" class="mr-2 w-4 h-4" :class="isUrl('organizations') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
         <div :class="isUrl('organizations') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
       </Link>
     </div>
     <div class="mb-4">
-      <Link class="flex items-center group py-3" href="/contacts">
-        <icon name="users" class="w-4 h-4 mr-2" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+      <Link class="group flex items-center py-3" href="/contacts">
+        <icon name="users" class="mr-2 w-4 h-4" :class="isUrl('contacts') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
         <div :class="isUrl('contacts') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
       </Link>
     </div>
     <div class="mb-4">
-      <Link class="flex items-center group py-3" href="/reports">
-        <icon name="printer" class="w-4 h-4 mr-2" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
+      <Link class="group flex items-center py-3" href="/reports">
+        <icon name="printer" class="mr-2 w-4 h-4" :class="isUrl('reports') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
         <div :class="isUrl('reports') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
       </Link>
     </div>
@@ -42,7 +42,7 @@ export default {
       if (urls[0] === '') {
         return currentUrl === ''
       }
-      return urls.filter(url => currentUrl.startsWith(url)).length
+      return urls.filter((url) => currentUrl.startsWith(url)).length
     },
   },
 }
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 1cc614e..0c82203 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -2,8 +2,8 @@
   <div v-if="links.length > 3">
     <div class="flex flex-wrap -mb-1">
       <template v-for="(link, key) in links">
-        <div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded" v-html="link.label" />
-        <Link v-else :key="`link-${key}`" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />
+        <div v-if="link.url === null" :key="key" class="mb-1 mr-1 px-4 py-3 text-gray-400 text-sm leading-4 border rounded" v-html="link.label" />
+        <Link v-else :key="`link-${key}`" class="mb-1 mr-1 px-4 py-3 focus:text-indigo-500 text-sm leading-4 hover:bg-white border focus:border-indigo-500 rounded" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />
       </template>
     </div>
   </div>
diff --git a/resources/js/Shared/SearchFilter.vue b/resources/js/Shared/SearchFilter.vue
index f091fcf..039b3dc 100644
--- a/resources/js/Shared/SearchFilter.vue
+++ b/resources/js/Shared/SearchFilter.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="flex items-center">
-    <div class="flex w-full bg-white shadow rounded">
-      <dropdown :auto-close="false" class="px-4 md:px-6 rounded-l border-r hover:bg-gray-100 focus:border-white focus:ring focus:z-10" placement="bottom-start">
+    <div class="flex w-full bg-white rounded shadow">
+      <dropdown :auto-close="false" class="focus:z-10 px-4 hover:bg-gray-100 border-r focus:border-white rounded-l focus:ring md:px-6" placement="bottom-start">
         <template #default>
           <div class="flex items-baseline">
-            <span class="text-gray-700 hidden md:inline">Filter</span>
+            <span class="hidden text-gray-700 md:inline">Filter</span>
             <svg class="w-2 h-2 fill-gray-700 md:ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 961.243 599.998">
               <path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
             </svg>
           </div>
         </template>
         <template #dropdown>
-          <div class="mt-2 px-4 py-6 w-screen shadow-xl bg-white rounded" :style="{ maxWidth: `${maxWidth}px` }">
+          <div class="mt-2 px-4 py-6 w-screen bg-white rounded shadow-xl" :style="{ maxWidth: `${maxWidth}px` }">
             <slot />
           </div>
         </template>
       </dropdown>
-      <input class="relative w-full px-6 py-3 rounded-r focus:ring" autocomplete="off" type="text" name="search" placeholder="Search…" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
+      <input class="relative px-6 py-3 w-full rounded-r focus:shadow-outline" autocomplete="off" type="text" name="search" placeholder="Search…" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
     </div>
-    <button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-indigo-500" type="button" @click="$emit('reset')">Reset</button>
+    <button class="ml-3 text-gray-500 hover:text-gray-700 focus:text-indigo-500 text-sm" type="button" @click="$emit('reset')">Reset</button>
   </div>
 </template>
 
@@ -36,5 +36,6 @@ export default {
       default: 300,
     },
   },
+  emits: ['update:modelValue', 'reset'],
 }
 </script>
diff --git a/resources/js/Shared/SelectInput.vue b/resources/js/Shared/SelectInput.vue
index e83799d..6c1ef01 100644
--- a/resources/js/Shared/SelectInput.vue
+++ b/resources/js/Shared/SelectInput.vue
@@ -25,6 +25,7 @@ export default {
     label: String,
     modelValue: [String, Number, Boolean],
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       selected: this.modelValue,
diff --git a/resources/js/Shared/TextInput.vue b/resources/js/Shared/TextInput.vue
index 5bc05cb..f1e67eb 100644
--- a/resources/js/Shared/TextInput.vue
+++ b/resources/js/Shared/TextInput.vue
@@ -27,6 +27,7 @@ export default {
     label: String,
     modelValue: String,
   },
+  emits: ['update:modelValue'],
   methods: {
     focus() {
       this.$refs.input.focus()
diff --git a/resources/js/Shared/TextareaInput.vue b/resources/js/Shared/TextareaInput.vue
index e754465..1ae941b 100644
--- a/resources/js/Shared/TextareaInput.vue
+++ b/resources/js/Shared/TextareaInput.vue
@@ -23,6 +23,7 @@ export default {
     label: String,
     modelValue: String,
   },
+  emits: ['update:modelValue'],
   methods: {
     focus() {
       this.$refs.input.focus()
diff --git a/resources/js/Shared/TrashedMessage.vue b/resources/js/Shared/TrashedMessage.vue
index 48c8110..480e0f9 100644
--- a/resources/js/Shared/TrashedMessage.vue
+++ b/resources/js/Shared/TrashedMessage.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="p-4 bg-yellow-300 rounded flex items-center justify-between max-w-3xl">
+  <div class="flex items-center justify-between p-4 max-w-3xl bg-yellow-400 rounded">
     <div class="flex items-center">
-      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" />
-      <div class="text-sm font-medium text-yellow-800">
+      <icon name="trash" class="flex-shrink-0 mr-2 w-4 h-4 fill-yellow-800" />
+      <div class="text-yellow-800 text-sm font-medium">
         <slot />
       </div>
     </div>
-    <button class="text-sm text-yellow-800 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
+    <button class="text-yellow-800 hover:underline text-sm" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
   </div>
 </template>
 
@@ -17,5 +17,6 @@ export default {
   components: {
     Icon,
   },
+  emits: ['restore'],
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 7eea9a1..e7905d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2957,6 +2957,14 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -3842,6 +3850,13 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
@@ -4313,6 +4328,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz"
@@ -4320,6 +4342,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
 p-map@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz"
@@ -4810,6 +4839,18 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwind@^2.2.12:
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwind/-/prettier-plugin-tailwind-2.2.12.tgz#959b4710f9245eb37765a922d3117c2df8c556f3"
+  integrity sha512-2SvZxpsYme0g5MrxGsKM43rx28f9AVlJrbwMnx4a03svCfsHwVGtcN6oN1YlClnEwZbquu3IhVAMcawEMKTjuA==
+  dependencies:
+    tailwind-classes-sorter "^0.2.5"
+
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz"
@@ -5541,6 +5582,13 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+tailwind-classes-sorter@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/tailwind-classes-sorter/-/tailwind-classes-sorter-0.2.5.tgz#fa499fb5564783e5edd77259ce1a3ba9e0c8b3ad"
+  integrity sha512-7S0AaDitt+Fjy9m3v0GrQ/KZrCswNDD25SSXX9U/HIB5h9lk0ImSkq/VVcnzu78cRQxR0fFfvHYFdfcqN3dCGA==
+  dependencies:
+    find-up "^5.0.0"
+
 tailwindcss@^2.0.3:
   version "2.2.19"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz"
@@ -6058,3 +6106,8 @@ yargs@^17.2.1:
     string-width "^4.2.3"
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

Name	Organization	City	Phone		Name	Organization	City	Phone
- + {{ contact.name }} - +	- + {{ contact.organization.name }}	- + {{ contact.city }}	- + {{ contact.phone }}	- +	+
No contacts found.				No contacts found.
Name	City	Phone
- - {{ organization.name }} - - -	- - {{ organization.city }} - -	- - {{ organization.phone }} - -	- - - -
No organizations found.
Name	City	Phone
+ + {{ organization.name }} + + +	+ + {{ organization.city }} + +	+ + {{ organization.phone }} + +	+ + + +
No organizations found.
Name	Email	Role		Name	Email	Role
- - + + {{ user.name }} - +	- + {{ user.email }}	- + {{ user.owner ? 'Owner' : 'User' }}	- +	+
No users found.				No users found.