From 014bffe86d9eb390ca614ed6b6841fc58cfca304 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Thu, 26 Sep 2024 00:59:51 +0200
Subject: [PATCH] display the number of projects in a separate column in the
 clients table

---
 resources/js/Components/Common/Client/ClientTable.vue        | 2 +-
 resources/js/Components/Common/Client/ClientTableHeading.vue | 1 +
 resources/js/Components/Common/Client/ClientTableRow.vue     | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/Components/Common/Client/ClientTable.vue b/resources/js/Components/Common/Client/ClientTable.vue
index a2eb7d49..0d0918ea 100644
--- a/resources/js/Components/Common/Client/ClientTable.vue
+++ b/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"
diff --git a/resources/js/Components/Common/Client/ClientTableHeading.vue b/resources/js/Components/Common/Client/ClientTableHeading.vue
index 75c121b3..aa85e1c7 100644
--- a/resources/js/Components/Common/Client/ClientTableHeading.vue
+++ b/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>
diff --git a/resources/js/Components/Common/Client/ClientTableRow.vue b/resources/js/Components/Common/Client/ClientTableRow.vue
index 23fe0dd1..07786686 100644
--- a/resources/js/Components/Common/Client/ClientTableRow.vue
+++ b/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