add tanstack table, add clients table

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -7,23 +7,28 @@ import {
 import type { Client } from '@/packages/api/src';
 import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
 import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
+import { ref } from 'vue';
 
 const emit = defineEmits<{
     delete: [];
-    edit: [];
     archive: [];
 }>();
 const props = defineProps<{
     client: Client;
 }>();
+const showEditModal = ref(false);
 </script>
 
 <template>
+    <ClientEditModal
+        :client="client"
+        v-model:show="showEditModal"></ClientEditModal>
     <MoreOptionsDropdown :label="'Actions for Client ' + props.client.name">
         <div class="min-w-[150px]">
             <button
                 v-if="canUpdateClients()"
-                @click="emit('edit')"
+                @click="showEditModal = true"
                 :aria-label="'Edit Client ' + props.client.name"
                 data-testid="client_edit"
                 class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">