From 6f78e46ee6215e35c357b5dc010283f2e6f5c76f Mon Sep 17 00:00:00 2001
From: c00b3r <sanuyOKmaklaren0@gmail.com>
Date: Thu, 19 Jun 2025 12:23:32 +0500
Subject: [PATCH] feat: enhance ClientsPage UI with client details and improved
 layout

---
 src/pages/ClientsPage.tsx | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/pages/ClientsPage.tsx b/src/pages/ClientsPage.tsx
index cfb62bc..e876d25 100644
--- a/src/pages/ClientsPage.tsx
+++ b/src/pages/ClientsPage.tsx
@@ -10,6 +10,7 @@ import { User } from "../types/User";
 import { Client } from "../types/Client";
 import { useDebounce } from "@uidotdev/usehooks";
 import pluralize from "../utils/pluralize";
+import ChevronRightIcon from "../components/icons/ChevronRightIcon";
 
 function ClientsPage() {
   const [limit, setLimit] = useState(10);
@@ -95,15 +96,29 @@ function ClientsPage() {
           </div>
         </div>
       </div>
-      <div className="space-y-[1.667vw]">
+      <div className="space-y-[0.278vw]">
         {isLoading ? (
           <div className="size-[2.222vw] m-auto text-[#7B60F3] animate-spin">
             <SpinIcon />
           </div>
         ) : clients?.length ? (
-          clients?.map(({ name }) => (
-            <div key={name} className="aspace-y-[0.833vw]">
-              <p className="caption-m font-medium opacity-40">{name}</p>
+          clients?.map(({ name, email, phone }) => (
+            <div className="p-[0.278vw] border-b border-[#F6F6F6]">
+              <div
+                key={name}
+                className="flex justify-between items-center cursor-pointer aspace-y-[0.833vw] p-[1.111vw] hover:bg-[#F6F6F6] rounded-[0.833vw]"
+              >
+                <div className="flex flex-col gap-[0.556vw]">
+                  <p className="button-m font-medium">{name}</p>
+                  <div className="flex gap-[0.278vw] caption-s font-medium text-[#7D7D7D]">
+                    <p>{phone}</p>
+                    <p>{email ? "• " + email : ""}</p>
+                  </div>
+                </div>
+                <div className="size-[1.389vw] text-[#7D7D7D]">
+                  <ChevronRightIcon />
+                </div>
+              </div>
             </div>
           ))
         ) : (
@@ -118,7 +133,7 @@ function ClientsPage() {
           </div>
         )}
       </div>
-      {!!clients?.length && clients?.length === 0 && (
+      {!!clients?.length && clients?.length !== 0 && (
         <Button
           size="large"
           variant="primary"