add projects detail page, task create / delete

resources/js/Components/Common/Member/MemberTable.vue

@@ -16,7 +16,7 @@ const createClient = ref(false);
         <div class="inline-block min-w-full align-middle">
             <div
                 data-testid="client_table"
-                class="grid min-w-full divide-y divide-row-separator border-b border-row-separator"
+                class="grid min-w-full"
                 style="grid-template-columns: 1fr 1fr 180px 180px 150px 80px">
                 <MemberTableHeading></MemberTableHeading>
                 <template v-for="member in members" :key="member.id">

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
 
 <template>
-    <div
-        class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 bg-row-heading-background border-t border-row-heading-border">
-        Name
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Email
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Role
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Billable Rate
-    </div>
-    <div
-        class="px-3 py-1.5 text-left text-sm font-semibold text-white bg-row-heading-background">
-        Status
-    </div>
-    <div
-        class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
-        <span class="sr-only">Edit</span>
-    </div>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left text-sm font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Email
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Role
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Billable Rate
+        </div>
+        <div class="px-3 py-1.5 text-left text-sm font-semibold text-white">
+            Status
+        </div>
+        <div
+            class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Member/MemberTableRow.vue

@@ -3,6 +3,7 @@ import type { Member } from '@/utils/api';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
+import TableRow from '@/Components/TableRow.vue';
 
 const props = defineProps<{
     member: Member;
@@ -18,38 +19,40 @@ function capitalizeFirstLetter(string: string) {
 </script>
 
 <template>
-    <div
-        class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
-        <span>
-            {{ member.name }}
-        </span>
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ member.email }}
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ capitalizeFirstLetter(member.role) }}
-    </div>
-    <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
-        {{ member.billable_rate ?? '--' }}
-    </div>
-    <div
-        class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
-        <CheckCircleIcon
-            v-if="member.is_placeholder === false"
-            class="w-5"></CheckCircleIcon>
-        <span v-if="member.is_placeholder === false">Active</span>
-        <UserCircleIcon
-            v-if="member.is_placeholder === true"
-            class="w-5"></UserCircleIcon>
-        <span v-if="member.is_placeholder === true">Inactive</span>
-    </div>
-    <div
-        class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
-        <MemberMoreOptionsDropdown
-            :member="member"
-            @delete="removeMember"></MemberMoreOptionsDropdown>
-    </div>
+    <TableRow>
+        <div
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <span>
+                {{ member.name }}
+            </span>
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ member.email }}
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ capitalizeFirstLetter(member.role) }}
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ member.billable_rate ?? '--' }}
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon
+                v-if="member.is_placeholder === false"
+                class="w-5"></CheckCircleIcon>
+            <span v-if="member.is_placeholder === false">Active</span>
+            <UserCircleIcon
+                v-if="member.is_placeholder === true"
+                class="w-5"></UserCircleIcon>
+            <span v-if="member.is_placeholder === true">Inactive</span>
+        </div>
+        <div
+            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <MemberMoreOptionsDropdown
+                :member="member"
+                @delete="removeMember"></MemberMoreOptionsDropdown>
+        </div>
+    </TableRow>
 </template>
 
 <style scoped></style>