From 9976cd96690d13bf5859957c02b8e15c1beac4b0 Mon Sep 17 00:00:00 2001
From: mchev <martin.chevignard@gmail.com>
Date: Wed, 24 Apr 2024 14:41:57 +0200
Subject: [PATCH] Transition to composition API

---
 package.json                                |   1 -
 resources/js/Pages/Auth/Login.vue           |  54 +++-----
 resources/js/Pages/Contacts/Create.vue      | 102 +++++++--------
 resources/js/Pages/Contacts/Edit.vue        | 133 +++++++++-----------
 resources/js/Pages/Contacts/Index.vue       |  94 ++++++--------
 resources/js/Pages/Dashboard/Index.vue      |  22 ++--
 resources/js/Pages/Organizations/Create.vue |  87 ++++++-------
 resources/js/Pages/Organizations/Edit.vue   | 128 +++++++++----------
 resources/js/Pages/Organizations/Index.vue  |  94 ++++++--------
 resources/js/Pages/Reports/Index.vue        |  20 +--
 resources/js/Pages/Users/Create.vue         |  82 +++++-------
 resources/js/Pages/Users/Edit.vue           | 122 ++++++++----------
 resources/js/Pages/Users/Index.vue          |  90 ++++++-------
 resources/js/Shared/Dropdown.vue            | 130 ++++++++++---------
 resources/js/Shared/FileInput.vue           |  80 ++++++------
 resources/js/Shared/FlashMessages.vue       |  41 +++---
 resources/js/Shared/Icon.vue                |  15 +--
 resources/js/Shared/Layout.vue              |  53 +++-----
 resources/js/Shared/LoadingButton.vue       |  13 +-
 resources/js/Shared/MainMenu.vue            |  46 +++----
 resources/js/Shared/Pagination.vue          |  22 ++--
 resources/js/Shared/SearchFilter.vue        |  39 +++---
 resources/js/Shared/SelectInput.vue         |  68 +++++-----
 resources/js/Shared/TextInput.vue           |  62 ++++-----
 resources/js/Shared/TextareaInput.vue       |  51 ++++----
 resources/js/Shared/TrashedMessage.vue      |  20 ++-
 26 files changed, 719 insertions(+), 950 deletions(-)
diff --git a/package.json b/package.json
index 69da4712e..1a06e0c14 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
     },
     "devDependencies": {
         "@inertiajs/vue3": "^1.0.15",
-        "@popperjs/core": "^2.11.0",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vue/server-renderer": "^3.2.27",
         "autoprefixer": "^10.4.19",
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index a959f1681..e96e9a2b9 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,3 +1,19 @@
+<script setup>
+import { Head, useForm } from '@inertiajs/vue3'
+import Logo from '@/Shared/Logo.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+
+const form = useForm({
+  email: 'johndoe@example.com',
+  password: 'secret',
+  remember: false,
+});
+
+const login = () => {
+  form.post('/login')
+};
+</script>
 <template>
   <Head title="Login" />
   <div class="flex items-center justify-center p-6 min-h-screen bg-indigo-800">
@@ -7,47 +23,17 @@
         <div class="px-10 py-12">
           <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" />
+          <TextInput v-model="form.email" :error="form.errors.email" class="mt-10" label="Email" type="email" autofocus autocapitalize="off" />
+          <TextInput v-model="form.password" :error="form.errors.password" class="mt-6" label="Password" type="password" />
           <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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo ml-auto" type="submit">Login</LoadingButton>
         </div>
       </form>
     </div>
   </div>
-</template>
-
-<script>
-import { Head } from '@inertiajs/vue3'
-import Logo from '@/Shared/Logo.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-
-export default {
-  components: {
-    Head,
-    LoadingButton,
-    Logo,
-    TextInput,
-  },
-  data() {
-    return {
-      form: this.$inertia.form({
-        email: 'johndoe@example.com',
-        password: 'secret',
-        remember: false,
-      }),
-    }
-  },
-  methods: {
-    login() {
-      this.form.post('/login')
-    },
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Contacts/Create.vue b/resources/js/Pages/Contacts/Create.vue
index 62f4cfa84..1d6e45c18 100644
--- a/resources/js/Pages/Contacts/Create.vue
+++ b/resources/js/Pages/Contacts/Create.vue
@@ -1,5 +1,33 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+
+defineProps({
+  organizations: Array,
+});
+
+const form = useForm({
+  first_name: '',
+  last_name: '',
+  organization_id: null,
+  email: '',
+  phone: '',
+  address: '',
+  city: '',
+  region: '',
+  country: '',
+  postal_code: '',
+});
+
+const store = () => {
+  form.post('/contacts')
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Create Contact" />
     <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/contacts">Contacts</Link>
@@ -8,72 +36,28 @@
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
         <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">
+          <TextInput v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <TextInput v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <SelectInput 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="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">
+          </SelectInput>
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <TextInput v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <TextInput v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <TextInput v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
+          </SelectInput>
+          <TextInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo" type="submit">Create Contact</LoadingButton>
         </div>
       </form>
     </div>
-  </div>
+  </Layout>
 </template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-
-export default {
-  components: {
-    Head,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-  },
-  layout: Layout,
-  props: {
-    organizations: Array,
-  },
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        first_name: '',
-        last_name: '',
-        organization_id: null,
-        email: '',
-        phone: '',
-        address: '',
-        city: '',
-        region: '',
-        country: '',
-        postal_code: '',
-      }),
-    }
-  },
-  methods: {
-    store() {
-      this.form.post('/contacts')
-    },
-  },
-}
-</script>
diff --git a/resources/js/Pages/Contacts/Edit.vue b/resources/js/Pages/Contacts/Edit.vue
index fb1019d2f..4282832d3 100644
--- a/resources/js/Pages/Contacts/Edit.vue
+++ b/resources/js/Pages/Contacts/Edit.vue
@@ -1,95 +1,80 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import TrashedMessage from '@/Shared/TrashedMessage.vue'
+
+const props = defineProps({
+  contact: Object,
+  organizations: Array,
+});
+
+const form = useForm({
+  first_name: props.contact.first_name,
+  last_name: props.contact.last_name,
+  organization_id: props.contact.organization_id,
+  email: props.contact.email,
+  phone: props.contact.phone,
+  address: props.contact.address,
+  city: props.contact.city,
+  region: props.contact.region,
+  country: props.contact.country,
+  postal_code: props.contact.postal_code,
+});
+
+const update = () => {
+  form.put(`/contacts/${props.contact.id}`)
+};
+
+const destroy = () => {
+  if (confirm('Are you sure you want to delete this contact?')) {
+    router.delete(`/contacts/${props.contact.id}`)
+  }
+};
+
+const restore = () => {
+  if (confirm('Are you sure you want to restore this contact?')) {
+    router.put(`/contacts/${props.contact.id}/restore`)
+  }
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head :title="`${form.first_name} ${form.last_name}`" />
     <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>
+    <TrashedMessage v-if="contact.deleted_at" class="mb-6" @restore="restore"> This contact has been deleted. </TrashedMessage>
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
         <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">
+          <TextInput v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <TextInput v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <SelectInput 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="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">
+          </SelectInput>
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <TextInput v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <TextInput v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <TextInput v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
+          </SelectInput>
+          <TextInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Contact</LoadingButton>
         </div>
       </form>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-import TrashedMessage from '@/Shared/TrashedMessage.vue'
-
-export default {
-  components: {
-    Head,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-    TrashedMessage,
-  },
-  layout: Layout,
-  props: {
-    contact: Object,
-    organizations: Array,
-  },
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        first_name: this.contact.first_name,
-        last_name: this.contact.last_name,
-        organization_id: this.contact.organization_id,
-        email: this.contact.email,
-        phone: this.contact.phone,
-        address: this.contact.address,
-        city: this.contact.city,
-        region: this.contact.region,
-        country: this.contact.country,
-        postal_code: this.contact.postal_code,
-      }),
-    }
-  },
-  methods: {
-    update() {
-      this.form.put(`/contacts/${this.contact.id}`)
-    },
-    destroy() {
-      if (confirm('Are you sure you want to delete this contact?')) {
-        this.$inertia.delete(`/contacts/${this.contact.id}`)
-      }
-    },
-    restore() {
-      if (confirm('Are you sure you want to restore this contact?')) {
-        this.$inertia.put(`/contacts/${this.contact.id}/restore`)
-      }
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Contacts/Index.vue b/resources/js/Pages/Contacts/Index.vue
index 27b666ce9..05ff67f99 100644
--- a/resources/js/Pages/Contacts/Index.vue
+++ b/resources/js/Pages/Contacts/Index.vue
@@ -1,16 +1,47 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import { watch } from 'vue'
+import throttle from 'lodash/throttle'
+import Icon from '@/Shared/Icon.vue'
+import Layout from '@/Shared/Layout.vue'
+import Pagination from '@/Shared/Pagination.vue'
+import SearchFilter from '@/Shared/SearchFilter.vue'
+
+const props = defineProps({
+  filters: Object,
+  contacts: Object,
+});
+
+const form = useForm({
+  search: props.filters.search,
+  trashed: props.filters.trashed,
+});
+
+watch(
+  form,
+  throttle(() => {
+    router.get('/contacts', form, { preserveState: true })
+  }, 150),
+  { deep: true },
+);
+
+const reset = () => {
+  form.reset();
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Contacts" />
     <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">
+      <SearchFilter 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="form-select mt-1 w-full">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
-      </search-filter>
+      </SearchFilter>
       <Link class="btn-indigo" href="/contacts/create">
         <span>Create</span>
         <span class="hidden md:inline">&nbsp;Contact</span>
@@ -28,7 +59,7 @@
           <td class="border-t">
             <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="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              <Icon v-if="contact.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
@@ -50,7 +81,7 @@
           </td>
           <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" />
+              <Icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
@@ -59,53 +90,6 @@
         </tr>
       </table>
     </div>
-    <pagination class="mt-6" :links="contacts.links" />
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-import pickBy from 'lodash/pickBy'
-import Layout from '@/Shared/Layout.vue'
-import throttle from 'lodash/throttle'
-import mapValues from 'lodash/mapValues'
-import Pagination from '@/Shared/Pagination.vue'
-import SearchFilter from '@/Shared/SearchFilter.vue'
-
-export default {
-  components: {
-    Head,
-    Icon,
-    Link,
-    Pagination,
-    SearchFilter,
-  },
-  layout: Layout,
-  props: {
-    filters: Object,
-    contacts: Object,
-  },
-  data() {
-    return {
-      form: {
-        search: this.filters.search,
-        trashed: this.filters.trashed,
-      },
-    }
-  },
-  watch: {
-    form: {
-      deep: true,
-      handler: throttle(function () {
-        this.$inertia.get('/contacts', pickBy(this.form), { preserveState: true })
-      }, 150),
-    },
-  },
-  methods: {
-    reset() {
-      this.form = mapValues(this.form, () => null)
-    },
-  },
-}
-</script>
+    <Pagination class="mt-6" :links="contacts.links" />
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 2d6feb5da..0d1dbc33f 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -1,19 +1,11 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Dashboard" />
     <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>
-
-<script>
-import { Head } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-
-export default {
-  components: {
-    Head,
-  },
-  layout: Layout,
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Organizations/Create.vue b/resources/js/Pages/Organizations/Create.vue
index c7c46953a..7ac62258c 100644
--- a/resources/js/Pages/Organizations/Create.vue
+++ b/resources/js/Pages/Organizations/Create.vue
@@ -1,5 +1,27 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+
+const form = useForm({
+  name: null,
+  email: null,
+  phone: null,
+  address: null,
+  city: null,
+  region: null,
+  country: null,
+  postal_code: null,
+});
+
+const store = () => {
+  form.post('/organizations')
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Create Organization" />
     <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/organizations">Organizations</Link>
@@ -8,62 +30,23 @@
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
         <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">
+          <TextInput v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <TextInput v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <TextInput v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <TextInput v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
+          </SelectInput>
+          <TextInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo" type="submit">Create Organization</LoadingButton>
         </div>
       </form>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-
-export default {
-  components: {
-    Head,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-  },
-  layout: Layout,
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        name: null,
-        email: null,
-        phone: null,
-        address: null,
-        city: null,
-        region: null,
-        country: null,
-        postal_code: null,
-      }),
-    }
-  },
-  methods: {
-    store() {
-      this.form.post('/organizations')
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Organizations/Edit.vue b/resources/js/Pages/Organizations/Edit.vue
index f6abdf46b..b0de988d4 100644
--- a/resources/js/Pages/Organizations/Edit.vue
+++ b/resources/js/Pages/Organizations/Edit.vue
@@ -1,31 +1,71 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import Icon from '@/Shared/Icon.vue'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import TrashedMessage from '@/Shared/TrashedMessage.vue'
+
+const props = defineProps({
+  organization: Object,
+});
+
+const form = useForm({
+  name: props.organization.name,
+  email: props.organization.email,
+  phone: props.organization.phone,
+  address: props.organization.address,
+  city: props.organization.city,
+  region: props.organization.region,
+  country: props.organization.country,
+  postal_code: props.organization.postal_code,
+});
+
+const update = () => {
+  form.put(`/organizations/${props.organization.id}`)
+};
+
+const destroy = () => {
+  if (confirm('Are you sure you want to delete this organization?')) {
+    router.delete(`/organizations/${props.organization.id}`)
+  }
+};
+
+const restore = () => {
+  if (confirm('Are you sure you want to restore this organization?')) {
+    router.put(`/organizations/${props.organization.id}/restore`)
+  }
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head :title="form.name" />
     <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>
+    <TrashedMessage v-if="organization.deleted_at" class="mb-6" @restore="restore"> This organization has been deleted. </TrashedMessage>
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
         <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">
+          <TextInput v-model="form.name" :error="form.errors.name" class="pb-8 pr-6 w-full lg:w-1/2" label="Name" />
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput v-model="form.phone" :error="form.errors.phone" class="pb-8 pr-6 w-full lg:w-1/2" label="Phone" />
+          <TextInput v-model="form.address" :error="form.errors.address" class="pb-8 pr-6 w-full lg:w-1/2" label="Address" />
+          <TextInput v-model="form.city" :error="form.errors.city" class="pb-8 pr-6 w-full lg:w-1/2" label="City" />
+          <TextInput v-model="form.region" :error="form.errors.region" class="pb-8 pr-6 w-full lg:w-1/2" label="Province/State" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" label="Postal code" />
+          </SelectInput>
+          <TextInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update Organization</LoadingButton>
         </div>
       </form>
     </div>
@@ -41,7 +81,7 @@
           <td class="border-t">
             <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="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              <Icon v-if="contact.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
@@ -56,7 +96,7 @@
           </td>
           <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" />
+              <Icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
@@ -65,61 +105,5 @@
         </tr>
       </table>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-import Layout from '@/Shared/Layout.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-import TrashedMessage from '@/Shared/TrashedMessage.vue'
-
-export default {
-  components: {
-    Head,
-    Icon,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-    TrashedMessage,
-  },
-  layout: Layout,
-  props: {
-    organization: Object,
-  },
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        name: this.organization.name,
-        email: this.organization.email,
-        phone: this.organization.phone,
-        address: this.organization.address,
-        city: this.organization.city,
-        region: this.organization.region,
-        country: this.organization.country,
-        postal_code: this.organization.postal_code,
-      }),
-    }
-  },
-  methods: {
-    update() {
-      this.form.put(`/organizations/${this.organization.id}`)
-    },
-    destroy() {
-      if (confirm('Are you sure you want to delete this organization?')) {
-        this.$inertia.delete(`/organizations/${this.organization.id}`)
-      }
-    },
-    restore() {
-      if (confirm('Are you sure you want to restore this organization?')) {
-        this.$inertia.put(`/organizations/${this.organization.id}/restore`)
-      }
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Organizations/Index.vue b/resources/js/Pages/Organizations/Index.vue
index 9fc263fa4..81c9aa6b0 100644
--- a/resources/js/Pages/Organizations/Index.vue
+++ b/resources/js/Pages/Organizations/Index.vue
@@ -1,16 +1,47 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import { watch } from 'vue'
+import throttle from 'lodash/throttle'
+import Icon from '@/Shared/Icon.vue'
+import Layout from '@/Shared/Layout.vue'
+import Pagination from '@/Shared/Pagination.vue'
+import SearchFilter from '@/Shared/SearchFilter.vue'
+
+const props = defineProps({
+  filters: Object,
+  organizations: Object,
+});
+
+const form = useForm({
+  search: props.filters.search,
+  trashed: props.filters.trashed,
+});
+
+watch(
+  form,
+  throttle(() => {
+    router.get('/organizations', form, { preserveState: true })
+  }, 150),
+  { deep: true },
+);
+
+const reset = () => {
+  form.reset();
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Organizations" />
     <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">
+      <SearchFilter 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="form-select mt-1 w-full">
           <option :value="null" />
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
-      </search-filter>
+      </SearchFilter>
       <Link class="btn-indigo" href="/organizations/create">
         <span>Create</span>
         <span class="hidden md:inline">&nbsp;Organization</span>
@@ -30,7 +61,7 @@
             <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="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+                <Icon v-if="organization.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
               </Link>
             </td>
             <td class="border-t">
@@ -45,7 +76,7 @@
             </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" />
+                <Icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
               </Link>
             </td>
           </tr>
@@ -55,53 +86,6 @@
         </tbody>
       </table>
     </div>
-    <pagination class="mt-6" :links="organizations.links" />
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-import pickBy from 'lodash/pickBy'
-import Layout from '@/Shared/Layout.vue'
-import throttle from 'lodash/throttle'
-import mapValues from 'lodash/mapValues'
-import Pagination from '@/Shared/Pagination.vue'
-import SearchFilter from '@/Shared/SearchFilter.vue'
-
-export default {
-  components: {
-    Head,
-    Icon,
-    Link,
-    Pagination,
-    SearchFilter,
-  },
-  layout: Layout,
-  props: {
-    filters: Object,
-    organizations: Object,
-  },
-  data() {
-    return {
-      form: {
-        search: this.filters.search,
-        trashed: this.filters.trashed,
-      },
-    }
-  },
-  watch: {
-    form: {
-      deep: true,
-      handler: throttle(function () {
-        this.$inertia.get('/organizations', pickBy(this.form), { preserveState: true })
-      }, 150),
-    },
-  },
-  methods: {
-    reset() {
-      this.form = mapValues(this.form, () => null)
-    },
-  },
-}
-</script>
+    <Pagination class="mt-6" :links="organizations.links" />
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Reports/Index.vue b/resources/js/Pages/Reports/Index.vue
index e464089cb..4086d9c7d 100644
--- a/resources/js/Pages/Reports/Index.vue
+++ b/resources/js/Pages/Reports/Index.vue
@@ -1,18 +1,10 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Reports" />
     <h1 class="mb-8 text-3xl font-bold">Reports</h1>
-  </div>
+  </Layout>
 </template>
-
-<script>
-import { Head } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-
-export default {
-  components: {
-    Head,
-  },
-  layout: Layout,
-}
-</script>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index e7361dc1f..13be824d1 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -1,5 +1,26 @@
+<script setup>
+import { Head, Link, useForm } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import FileInput from '@/Shared/FileInput.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+
+const form = useForm({
+  first_name: '',
+  last_name: '',
+  email: '',
+  password: '',
+  owner: false,
+  photo: null,
+});
+
+const store = () => {
+  form.post('/users')
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Create User" />
     <h1 class="mb-8 text-3xl font-bold">
       <Link class="text-indigo-400 hover:text-indigo-600" href="/users">Users</Link>
@@ -8,59 +29,20 @@
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="store">
         <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">
+          <TextInput v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <TextInput v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput 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" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
+          </SelectInput>
+          <FileInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo" type="submit">Create User</LoadingButton>
         </div>
       </form>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-import FileInput from '@/Shared/FileInput.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-
-export default {
-  components: {
-    FileInput,
-    Head,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-  },
-  layout: Layout,
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        first_name: '',
-        last_name: '',
-        email: '',
-        password: '',
-        owner: false,
-        photo: null,
-      }),
-    }
-  },
-  methods: {
-    store() {
-      this.form.post('/users')
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index d7fd57232..07b16e81f 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -1,5 +1,46 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import Layout from '@/Shared/Layout.vue'
+import TextInput from '@/Shared/TextInput.vue'
+import FileInput from '@/Shared/FileInput.vue'
+import SelectInput from '@/Shared/SelectInput.vue'
+import LoadingButton from '@/Shared/LoadingButton.vue'
+import TrashedMessage from '@/Shared/TrashedMessage.vue'
+
+const props = defineProps({
+  user: Object,
+});
+
+const form = useForm({
+  _method: 'put',
+  first_name: props.user.first_name,
+  last_name: props.user.last_name,
+  email: props.user.email,
+  password: '',
+  owner: props.user.owner,
+  photo: null,
+});
+
+const update = () => {
+  form.post(`/users/${props.user.id}`, {
+    onSuccess: () => form.reset('password', 'photo'),
+  })
+};
+
+const destroy = () => {
+  if (confirm('Are you sure you want to delete this user?')) {
+    router.delete(`/users/${props.user.id}`)
+  }
+};
+
+const restore = () => {
+  if (confirm('Are you sure you want to restore this user?')) {
+    router.put(`/users/${props.user.id}/restore`)
+  }
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head :title="`${form.first_name} ${form.last_name}`" />
     <div class="flex justify-start mb-8 max-w-3xl">
       <h1 class="text-3xl font-bold">
@@ -9,82 +50,25 @@
       </h1>
       <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>
+    <TrashedMessage v-if="user.deleted_at" class="mb-6" @restore="restore"> This user has been deleted. </TrashedMessage>
     <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
       <form @submit.prevent="update">
         <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">
+          <TextInput v-model="form.first_name" :error="form.errors.first_name" class="pb-8 pr-6 w-full lg:w-1/2" label="First name" />
+          <TextInput v-model="form.last_name" :error="form.errors.last_name" class="pb-8 pr-6 w-full lg:w-1/2" label="Last name" />
+          <TextInput v-model="form.email" :error="form.errors.email" class="pb-8 pr-6 w-full lg:w-1/2" label="Email" />
+          <TextInput 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" />
+          <SelectInput 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="pb-8 pr-6 w-full lg:w-1/2" type="file" accept="image/*" label="Photo" />
+          </SelectInput>
+          <FileInput 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="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>
+          <LoadingButton :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update User</LoadingButton>
         </div>
       </form>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Layout from '@/Shared/Layout.vue'
-import TextInput from '@/Shared/TextInput.vue'
-import FileInput from '@/Shared/FileInput.vue'
-import SelectInput from '@/Shared/SelectInput.vue'
-import LoadingButton from '@/Shared/LoadingButton.vue'
-import TrashedMessage from '@/Shared/TrashedMessage.vue'
-
-export default {
-  components: {
-    FileInput,
-    Head,
-    Link,
-    LoadingButton,
-    SelectInput,
-    TextInput,
-    TrashedMessage,
-  },
-  layout: Layout,
-  props: {
-    user: Object,
-  },
-  remember: 'form',
-  data() {
-    return {
-      form: this.$inertia.form({
-        _method: 'put',
-        first_name: this.user.first_name,
-        last_name: this.user.last_name,
-        email: this.user.email,
-        password: '',
-        owner: this.user.owner,
-        photo: null,
-      }),
-    }
-  },
-  methods: {
-    update() {
-      this.form.post(`/users/${this.user.id}`, {
-        onSuccess: () => this.form.reset('password', 'photo'),
-      })
-    },
-    destroy() {
-      if (confirm('Are you sure you want to delete this user?')) {
-        this.$inertia.delete(`/users/${this.user.id}`)
-      }
-    },
-    restore() {
-      if (confirm('Are you sure you want to restore this user?')) {
-        this.$inertia.put(`/users/${this.user.id}/restore`)
-      }
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Users/Index.vue b/resources/js/Pages/Users/Index.vue
index d2390033a..ab296c71a 100644
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -1,9 +1,39 @@
+<script setup>
+import { Head, Link, useForm, router } from '@inertiajs/vue3'
+import { watch } from 'vue'
+import throttle from 'lodash/throttle'
+import Icon from '@/Shared/Icon.vue'
+import Layout from '@/Shared/Layout.vue'
+import SearchFilter from '@/Shared/SearchFilter.vue'
+
+const props = defineProps({
+  filters: Object,
+  users: Object,
+});
+
+const form = useForm({
+  search: props.filters.search,
+  trashed: props.filters.trashed,
+});
+
+watch(
+  form,
+  throttle(() => {
+    router.get('/users', form, { preserveState: true })
+  }, 150),
+  { deep: true },
+);
+
+const reset = () => {
+  form.reset();
+};
+</script>
 <template>
-  <div>
+  <Layout>
     <Head title="Users" />
     <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">
+      <SearchFilter 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="form-select mt-1 w-full">
           <option :value="null" />
@@ -16,7 +46,7 @@
           <option value="with">With Trashed</option>
           <option value="only">Only Trashed</option>
         </select>
-      </search-filter>
+      </SearchFilter>
       <Link class="btn-indigo" href="/users/create">
         <span>Create</span>
         <span class="hidden md:inline">&nbsp;User</span>
@@ -34,7 +64,7 @@
             <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="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
+              <Icon v-if="user.deleted_at" name="trash" class="shrink-0 ml-2 w-3 h-3 fill-gray-400" />
             </Link>
           </td>
           <td class="border-t">
@@ -49,7 +79,7 @@
           </td>
           <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" />
+              <Icon name="cheveron-right" class="block w-6 h-6 fill-gray-400" />
             </Link>
           </td>
         </tr>
@@ -58,51 +88,5 @@
         </tr>
       </table>
     </div>
-  </div>
-</template>
-
-<script>
-import { Head, Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-import pickBy from 'lodash/pickBy'
-import Layout from '@/Shared/Layout.vue'
-import throttle from 'lodash/throttle'
-import mapValues from 'lodash/mapValues'
-import SearchFilter from '@/Shared/SearchFilter.vue'
-
-export default {
-  components: {
-    Head,
-    Icon,
-    Link,
-    SearchFilter,
-  },
-  layout: Layout,
-  props: {
-    filters: Object,
-    users: Array,
-  },
-  data() {
-    return {
-      form: {
-        search: this.filters.search,
-        role: this.filters.role,
-        trashed: this.filters.trashed,
-      },
-    }
-  },
-  watch: {
-    form: {
-      deep: true,
-      handler: throttle(function () {
-        this.$inertia.get('/users', pickBy(this.form), { preserveState: true })
-      }, 150),
-    },
-  },
-  methods: {
-    reset() {
-      this.form = mapValues(this.form, () => null)
-    },
-  },
-}
-</script>
+  </Layout>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Dropdown.vue b/resources/js/Shared/Dropdown.vue
index 9e2d7ea2b..7389c2389 100644
--- a/resources/js/Shared/Dropdown.vue
+++ b/resources/js/Shared/Dropdown.vue
@@ -1,63 +1,77 @@
-<template>
-  <button type="button" @click="show = true">
-    <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: 0.2" @click="show = false" />
-        <div ref="dropdown" style="position: absolute; z-index: 99999" @click.stop="show = !autoClose">
-          <slot name="dropdown" />
-        </div>
-      </div>
-    </teleport>
-  </button>
-</template>
-
-<script>
-import { createPopper } from '@popperjs/core'
-
-export default {
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom-end',
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+    align: {
+        type: String,
+        default: 'right',
+    },
+    width: {
+        type: String,
+        default: '48',
     },
-    autoClose: {
-      type: Boolean,
-      default: true,
+    contentClasses: {
+        type: String,
+        default: '',
     },
-  },
-  data() {
+});
+
+const closeOnEscape = (e) => {
+    if (show.value && e.key === 'Escape') {
+        show.value = false;
+    }
+};
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape));
+onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
+
+const widthClass = computed(() => {
     return {
-      show: false,
+        48: 'w-48',
+    }[props.width.toString()];
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === 'left') {
+        return 'ltr:origin-top-left rtl:origin-top-right start-0';
+    } else if (props.align === 'right') {
+        return 'ltr:origin-top-right rtl:origin-top-left end-0';
+    } else {
+        return 'origin-top';
     }
-  },
-  watch: {
-    show(show) {
-      if (show) {
-        this.$nextTick(() => {
-          this.popper = createPopper(this.$el, this.$refs.dropdown, {
-            placement: this.placement,
-            modifiers: [
-              {
-                name: 'preventOverflow',
-                options: {
-                  altBoundary: true,
-                },
-              },
-            ],
-          })
-        })
-      } else if (this.popper) {
-        setTimeout(() => this.popper.destroy(), 100)
-      }
-    },
-  },
-  mounted() {
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        this.show = false
-      }
-    })
-  },
-}
+});
+
+const show = ref(false);
 </script>
+
+<template>
+    <div class="relative">
+        <div @click="show = !show" class="flex h-full cursor-pointer">
+            <slot />
+        </div>
+
+        <!-- Full Screen Dropdown Overlay -->
+        <div v-show="show" class="fixed inset-0 z-40" @click="show = false"></div>
+
+        <Transition
+            enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition ease-in duration-75"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+        >
+            <div
+                v-show="show"
+                class="absolute z-50 rounded-md shadow-lg"
+                :class="[widthClass, alignmentClasses]"
+                style="display: none"
+                @click="show = false"
+            >
+                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                    <slot name="dropdown" />
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/FileInput.vue b/resources/js/Shared/FileInput.vue
index 3c843f980..5431be1ab 100644
--- a/resources/js/Shared/FileInput.vue
+++ b/resources/js/Shared/FileInput.vue
@@ -1,3 +1,44 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: File,
+  label: String,
+  accept: String,
+  errors: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const file = ref(null);
+
+const emit = defineEmits(['update:modelValue']);
+
+watch(() => props.modelValue, (value) => {
+  if (!value) {
+    file.value = '';
+  }
+}, { immediate: true });
+
+const filesize = (size) => {
+  var i = Math.floor(Math.log(size) / Math.log(1024))
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+};
+
+const browse = () => {
+  file.value.click()
+};
+
+const change = (e) => {
+  emit('update:modelValue', e.target.files[0])
+};
+
+const remove = () => {
+  emit('update:modelValue', null)
+};
+
+</script>
 <template>
   <div>
     <label v-if="label" class="form-label">{{ label }}:</label>
@@ -15,41 +56,4 @@
     </div>
     <div v-if="errors.length" class="form-error">{{ errors[0] }}</div>
   </div>
-</template>
-
-<script>
-export default {
-  props: {
-    modelValue: File,
-    label: String,
-    accept: String,
-    errors: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['update:modelValue'],
-  watch: {
-    modelValue(value) {
-      if (!value) {
-        this.$refs.file.value = ''
-      }
-    },
-  },
-  methods: {
-    filesize(size) {
-      var i = Math.floor(Math.log(size) / Math.log(1024))
-      return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
-    },
-    browse() {
-      this.$refs.file.click()
-    },
-    change(e) {
-      this.$emit('update:modelValue', e.target.files[0])
-    },
-    remove() {
-      this.$emit('update:modelValue', null)
-    },
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/FlashMessages.vue b/resources/js/Shared/FlashMessages.vue
index f6614ac89..e758d2afb 100644
--- a/resources/js/Shared/FlashMessages.vue
+++ b/resources/js/Shared/FlashMessages.vue
@@ -1,18 +1,31 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+
+const show = ref(false);
+const flash = computed(() => usePage().props.flash)
+
+watch(flash, () => {
+    show.value = true;
+  },
+  { deep: true },
+);
+</script>
 <template>
   <div>
-    <div v-if="$page.props.flash.success && show" class="flex items-center justify-between mb-8 max-w-3xl bg-green-500 rounded">
+    <div v-if="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="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 class="py-4 text-white text-sm font-medium">{{ 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="flex items-center justify-between mb-8 max-w-3xl bg-red-500 rounded">
+    <div v-if="(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="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-if="flash.error" class="py-4 text-white text-sm font-medium">{{ 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>
           <span v-else>There are {{ Object.keys($page.props.errors).length }} form errors.</span>
@@ -23,22 +36,4 @@
       </button>
     </div>
   </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      show: true,
-    }
-  },
-  watch: {
-    '$page.props.flash': {
-      handler() {
-        this.show = true
-      },
-      deep: true,
-    },
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Icon.vue b/resources/js/Shared/Icon.vue
index 35db91a36..e64d9edf1 100644
--- a/resources/js/Shared/Icon.vue
+++ b/resources/js/Shared/Icon.vue
@@ -1,3 +1,8 @@
+<script setup>
+defineProps({
+  name: String,
+});
+</script>
 <template>
   <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>
@@ -6,12 +11,4 @@
   <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 === '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>
-
-<script>
-export default {
-  props: {
-    name: String,
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Layout.vue b/resources/js/Shared/Layout.vue
index 5c6217b19..fd1b998ea 100644
--- a/resources/js/Shared/Layout.vue
+++ b/resources/js/Shared/Layout.vue
@@ -1,3 +1,13 @@
+<script setup>
+import { Link, usePage } from '@inertiajs/vue3'
+import Icon from '@/Shared/Icon.vue'
+import Logo from '@/Shared/Logo.vue'
+import Dropdown from '@/Shared/Dropdown.vue'
+import MainMenu from '@/Shared/MainMenu.vue'
+import FlashMessages from '@/Shared/FlashMessages.vue'
+
+const auth = usePage().props.auth;
+</script>
 <template>
   <div>
     <div id="dropdown" />
@@ -6,22 +16,22 @@
         <div class="md:flex md:shrink-0">
           <div class="flex items-center justify-between px-6 py-4 bg-indigo-900 md:shrink-0 md:justify-center md:w-56">
             <Link class="mt-1" href="/">
-              <logo class="fill-white" width="120" height="28" />
+              <Logo class="fill-white" width="120" height="28" />
             </Link>
-            <dropdown class="md:hidden" placement="bottom-end">
+            <Dropdown class="md:hidden" align="right">
               <template #default>
                 <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 bg-indigo-800 rounded shadow-lg">
-                  <main-menu />
+                  <MainMenu />
                 </div>
               </template>
-            </dropdown>
+            </Dropdown>
           </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">
+            <Dropdown class="mt-1" placement="bottom-end">
               <template #default>
                 <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">
@@ -35,43 +45,20 @@
                 <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>
+                  <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>
+            </Dropdown>
           </div>
         </div>
         <div class="md:flex md:grow md:overflow-hidden">
-          <main-menu class="hidden shrink-0 p-12 w-56 bg-indigo-800 overflow-y-auto md:block" />
+          <MainMenu class="hidden 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 />
+            <FlashMessages />
             <slot />
           </div>
         </div>
       </div>
     </div>
   </div>
-</template>
-
-<script>
-import { Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-import Logo from '@/Shared/Logo.vue'
-import Dropdown from '@/Shared/Dropdown.vue'
-import MainMenu from '@/Shared/MainMenu.vue'
-import FlashMessages from '@/Shared/FlashMessages.vue'
-
-export default {
-  components: {
-    Dropdown,
-    FlashMessages,
-    Icon,
-    Link,
-    Logo,
-    MainMenu,
-  },
-  props: {
-    auth: Object,
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/LoadingButton.vue b/resources/js/Shared/LoadingButton.vue
index 9d144beae..f9b3f85d5 100644
--- a/resources/js/Shared/LoadingButton.vue
+++ b/resources/js/Shared/LoadingButton.vue
@@ -1,14 +1,11 @@
+<script setup>
+defineProps({
+  loading: Boolean,
+});
+</script>
 <template>
   <button :disabled="loading" class="flex items-center">
     <div v-if="loading" class="btn-spinner mr-2" />
     <slot />
   </button>
 </template>
-
-<script>
-export default {
-  props: {
-    loading: Boolean,
-  },
-}
-</script>
diff --git a/resources/js/Shared/MainMenu.vue b/resources/js/Shared/MainMenu.vue
index 365694652..338f993ee 100644
--- a/resources/js/Shared/MainMenu.vue
+++ b/resources/js/Shared/MainMenu.vue
@@ -1,49 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+import { Link, usePage } from '@inertiajs/vue3'
+import Icon from '@/Shared/Icon.vue'
+
+const url = ref(usePage().url);
+
+const isUrl = (...urls) => {
+  let currentUrl = url.value.substr(1)
+  if (urls[0] === '') {
+    return currentUrl === ''
+  }
+  return urls.filter((url) => currentUrl.startsWith(url)).length
+}
+</script>
 <template>
   <div>
     <div class="mb-4">
       <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'" />
+        <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="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'" />
+        <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="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'" />
+        <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="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'" />
+        <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>
   </div>
-</template>
-
-<script>
-import { Link } from '@inertiajs/vue3'
-import Icon from '@/Shared/Icon.vue'
-
-export default {
-  components: {
-    Icon,
-    Link,
-  },
-  methods: {
-    isUrl(...urls) {
-      let currentUrl = this.$page.url.substr(1)
-      if (urls[0] === '') {
-        return currentUrl === ''
-      }
-      return urls.filter((url) => currentUrl.startsWith(url)).length
-    },
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/Pagination.vue b/resources/js/Shared/Pagination.vue
index 7eb3e644b..81c72911d 100644
--- a/resources/js/Shared/Pagination.vue
+++ b/resources/js/Shared/Pagination.vue
@@ -1,3 +1,10 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+
+defineProps({
+  links: Array,
+});
+</script>
 <template>
   <div v-if="links.length > 3">
     <div class="flex flex-wrap -mb-1">
@@ -7,17 +14,4 @@
       </template>
     </div>
   </div>
-</template>
-
-<script>
-import { Link } from '@inertiajs/vue3'
-
-export default {
-  components: {
-    Link,
-  },
-  props: {
-    links: Array,
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/SearchFilter.vue b/resources/js/Shared/SearchFilter.vue
index ed989c563..d64aa11f2 100644
--- a/resources/js/Shared/SearchFilter.vue
+++ b/resources/js/Shared/SearchFilter.vue
@@ -1,9 +1,22 @@
+<script setup>
+import Dropdown from '@/Shared/Dropdown.vue'
+
+defineProps({
+  modelValue: String,
+  maxWidth: {
+    type: Number,
+    default: 300,
+  },
+});
+
+defineEmits(['update:modelValue', 'reset']);
+</script>
 <template>
   <div class="flex items-center">
     <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">
+      <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" align="left">
         <template #default>
-          <div class="flex items-baseline">
+          <div class="flex items-center flex-1">
             <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" />
@@ -15,27 +28,9 @@
             <slot />
           </div>
         </template>
-      </dropdown>
+      </Dropdown>
       <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-gray-500 hover:text-gray-700 focus:text-indigo-500 text-sm" type="button" @click="$emit('reset')">Reset</button>
   </div>
-</template>
-
-<script>
-import Dropdown from '@/Shared/Dropdown.vue'
-
-export default {
-  components: {
-    Dropdown,
-  },
-  props: {
-    modelValue: String,
-    maxWidth: {
-      type: Number,
-      default: 300,
-    },
-  },
-  emits: ['update:modelValue', 'reset'],
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/SelectInput.vue b/resources/js/Shared/SelectInput.vue
index 0c331824b..2ecb7c5c0 100644
--- a/resources/js/Shared/SelectInput.vue
+++ b/resources/js/Shared/SelectInput.vue
@@ -1,3 +1,33 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps({
+  id: {
+    type: String,
+    default() {
+      return `select-input-${uuid()}`
+    },
+  },
+  error: String,
+  label: String,
+  modelValue: [String, Number, Boolean],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const selected = ref(props.modelValue);
+
+const input = ref(null);
+
+watch(selected, (selected) => {
+  emit('update:modelValue', selected)
+});
+</script>
 <template>
   <div :class="$attrs.class">
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
@@ -7,41 +37,3 @@
     <div v-if="error" class="form-error">{{ error }}</div>
   </div>
 </template>
-
-<script>
-import { v4 as uuid } from 'uuid'
-
-export default {
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default() {
-        return `select-input-${uuid()}`
-      },
-    },
-    error: String,
-    label: String,
-    modelValue: [String, Number, Boolean],
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      selected: this.modelValue,
-    }
-  },
-  watch: {
-    selected(selected) {
-      this.$emit('update:modelValue', selected)
-    },
-  },
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-    select() {
-      this.$refs.input.select()
-    },
-  },
-}
-</script>
diff --git a/resources/js/Shared/TextInput.vue b/resources/js/Shared/TextInput.vue
index f17b28470..2ca9619d1 100644
--- a/resources/js/Shared/TextInput.vue
+++ b/resources/js/Shared/TextInput.vue
@@ -1,42 +1,32 @@
-<template>
-  <div :class="$attrs.class">
-    <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
-    <input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
-    <div v-if="error" class="form-error">{{ error }}</div>
-  </div>
-</template>
+<script setup>
+import { v4 as uuid } from 'uuid';
 
-<script>
-import { v4 as uuid } from 'uuid'
+defineOptions({
+  inheritAttrs: false
+});
 
-export default {
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default() {
-        return `text-input-${uuid()}`
-      },
-    },
-    type: {
-      type: String,
-      default: 'text',
+defineProps({
+  id: {
+    type: String,
+    default() {
+      return `text-input-${uuid()}`
     },
-    error: String,
-    label: String,
-    modelValue: String,
   },
-  emits: ['update:modelValue'],
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-    select() {
-      this.$refs.input.select()
-    },
-    setSelectionRange(start, end) {
-      this.$refs.input.setSelectionRange(start, end)
-    },
+  type: {
+    type: String,
+    default: 'text',
   },
-}
+  error: String,
+  label: String,
+  modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
 </script>
+<template>
+  <div :class="$attrs.class">
+    <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
+    <input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }" :type="type" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
+    <div v-if="error" class="form-error">{{ error }}</div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/TextareaInput.vue b/resources/js/Shared/TextareaInput.vue
index a5158aede..a10a330ab 100644
--- a/resources/js/Shared/TextareaInput.vue
+++ b/resources/js/Shared/TextareaInput.vue
@@ -1,35 +1,28 @@
+<script setup>
+import { v4 as uuid } from 'uuid';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps({
+  id: {
+    type: String,
+    default() {
+      return `textarea-input-${uuid()}`
+    },
+  },
+  error: String,
+  label: String,
+  modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
+</script>
 <template>
   <div :class="$attrs.class">
     <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
     <textarea :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-textarea" :class="{ error: error }" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
     <div v-if="error" class="form-error">{{ error }}</div>
   </div>
-</template>
-
-<script>
-import { v4 as uuid } from 'uuid'
-
-export default {
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default() {
-        return `textarea-input-${uuid()}`
-      },
-    },
-    error: String,
-    label: String,
-    modelValue: String,
-  },
-  emits: ['update:modelValue'],
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-    select() {
-      this.$refs.input.select()
-    },
-  },
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/resources/js/Shared/TrashedMessage.vue b/resources/js/Shared/TrashedMessage.vue
index e8253e845..7b545e5f3 100644
--- a/resources/js/Shared/TrashedMessage.vue
+++ b/resources/js/Shared/TrashedMessage.vue
@@ -1,22 +1,16 @@
+<script setup>
+import Icon from '@/Shared/Icon.vue'
+
+defineEmits(['restore']);
+</script>
 <template>
   <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="shrink-0 mr-2 w-4 h-4 fill-yellow-800" />
+      <Icon name="trash" class="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-yellow-800 hover:underline text-sm" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
   </div>
-</template>
-
-<script>
-import Icon from '@/Shared/Icon.vue'
-
-export default {
-  components: {
-    Icon,
-  },
-  emits: ['restore'],
-}
-</script>
+</template>
\ No newline at end of file
