display the number of projects in a separate column in the clients table

Author: Onatcer

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

@@ -22,7 +22,7 @@ const createClient = ref(false);
             <div
                 data-testid="client_table"
                 class="grid min-w-full"
-                style="grid-template-columns: 1fr 150px 80px">
+                style="grid-template-columns: 1fr 150px 200px 80px">
                 <ClientTableHeading></ClientTableHeading>
                 <div
                     class="col-span-2 py-24 text-center"

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

@@ -8,6 +8,7 @@ import TableHeading from '@/Components/Common/TableHeading.vue';
             class="py-1.5 pr-3 text-left 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 font-semibold text-white"></div>
         <div class="px-3 py-1.5 text-left 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">
             <span class="sr-only">Edit</span>

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

@@ -45,6 +45,9 @@ const showEditModal = ref(false);
             <span>
                 {{ client.name }}
             </span>
+        </div>
+        <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 class="text-muted"> {{ projectCount }} Projects </span>
         </div>
         <div