From 36a8c0e24cb6724a1346245a6f4a15b352398de1 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Tue, 28 Apr 2026 21:53:26 +0330
Subject: [PATCH] feat(clients): refresh clients page layout and toast feedback

---
 src/components/CreateClientModal.tsx |  33 ++--
 src/components/DeleteClientModal.tsx |  27 +--
 src/components/EditClientModal.tsx   |  29 +--
 src/locales/en.ts                    |  11 +-
 src/locales/fa.ts                    |  11 +-
 src/pages/Clients.tsx                | 262 +++++++++++++++------------
 6 files changed, 207 insertions(+), 166 deletions(-)

diff --git a/src/components/CreateClientModal.tsx b/src/components/CreateClientModal.tsx
index 3fbc1a4..4d6938e 100644
--- a/src/components/CreateClientModal.tsx
+++ b/src/components/CreateClientModal.tsx
@@ -1,5 +1,6 @@
-import { useState } from "react";
-import { createClient } from "../api/clients";
+import { useState } from "react";
+import { toast } from "sonner";
+import { createClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -22,18 +23,20 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
   const handleSubmit = async () => {
     if (!name.trim()) return;
     setIsLoading(true);
-    try {
-      await createClient(workspaceId, { name, notes });
-      onSuccess();
-      setName("");
-      setNotes("");
-      onClose();
-    } catch (error) {
-      console.error(t.clients.errors.createFailed, error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    try {
+      await createClient(workspaceId, { name, notes });
+      toast.success(t.clients.createSuccess);
+      onSuccess();
+      setName("");
+      setNotes("");
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.createFailed, error);
+      toast.error(t.clients.errors.createFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const footer = (
     <>
@@ -72,4 +75,4 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
       </div>
     </Modal>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/DeleteClientModal.tsx b/src/components/DeleteClientModal.tsx
index e84caf1..594fdff 100644
--- a/src/components/DeleteClientModal.tsx
+++ b/src/components/DeleteClientModal.tsx
@@ -1,5 +1,6 @@
-import { useState } from "react";
-import { type Client } from "../types/client";
+import { useState } from "react";
+import { toast } from "sonner";
+import { type Client } from "../types/client";
 import { deleteClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
 import { Button } from "./ui/button";
@@ -19,16 +20,18 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
   const handleDelete = async () => {
     if (!client) return;
     setIsLoading(true);
-    try {
-      await deleteClient(client.id);
-      onSuccess();
-      onClose();
-    } catch (error) {
-      console.error(t.clients.errors.deleteFailed, error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    try {
+      await deleteClient(client.id);
+      toast.success(t.clients.deleteSuccess);
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.deleteFailed, error);
+      toast.error(t.clients.errors.deleteFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const footer = (
     <>
diff --git a/src/components/EditClientModal.tsx b/src/components/EditClientModal.tsx
index 218969e..287ad3b 100644
--- a/src/components/EditClientModal.tsx
+++ b/src/components/EditClientModal.tsx
@@ -1,5 +1,6 @@
-import { useState, useEffect } from "react";
-import { type Client } from "../types/client";
+import { useState, useEffect } from "react";
+import { toast } from "sonner";
+import { type Client } from "../types/client";
 import { updateClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
 import { Button } from "./ui/button";
@@ -30,16 +31,18 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
   const handleSubmit = async () => {
     if (!client || !name.trim()) return;
     setIsLoading(true);
-    try {
-      await updateClient(client.id, { name, notes });
-      onSuccess();
-      onClose();
-    } catch (error) {
-      console.error(t.clients.errors.updateFailed, error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+    try {
+      await updateClient(client.id, { name, notes });
+      toast.success(t.clients.updateSuccess);
+      onSuccess();
+      onClose();
+    } catch (error) {
+      console.error(t.clients.errors.updateFailed, error);
+      toast.error(t.clients.errors.updateFailed);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   const footer = (
     <>
@@ -78,4 +81,4 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
       </div>
     </Modal>
   );
-}
\ No newline at end of file
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1917c42..985abbf 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -244,10 +244,13 @@ export const en = {
     editClient: "Edit Client",
     deleteConfirmTitle: "Delete Client",
     deleteConfirmMessage: (name: string) => `Are you sure you want to delete ${name}?`,
-    delete: "Delete",
-    saveChanges: "Save Changes",
-    errors: {
-      createFailed: "Failed to create client",
+    delete: "Delete",
+    saveChanges: "Save Changes",
+    createSuccess: "Client created successfully.",
+    updateSuccess: "Client updated successfully.",
+    deleteSuccess: "Client deleted successfully.",
+    errors: {
+      createFailed: "Failed to create client",
       fetchFailed: "Failed to fetch clients",
       updateFailed: "Failed to update client",
       deleteFailed: "Failed to delete client",
diff --git a/src/locales/fa.ts b/src/locales/fa.ts
index ecb4ae1..d982c8b 100644
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -241,10 +241,13 @@ export const fa = {
     editClient: "ویرایش مشتری",
     deleteConfirmTitle: "حذف مشتری",
     deleteConfirmMessage: (name: string) => `آیا از حذف ${name} اطمینان دارید؟`,
-    delete: "حذف",
-    saveChanges: "ذخیره تغییرات",
-    errors: {
-      createFailed: "خطا در ایجاد مشتری",
+    delete: "حذف",
+    saveChanges: "ذخیره تغییرات",
+    createSuccess: "مشتری با موفقیت ایجاد شد.",
+    updateSuccess: "مشتری با موفقیت به‌روزرسانی شد.",
+    deleteSuccess: "مشتری با موفقیت حذف شد.",
+    errors: {
+      createFailed: "خطا در ایجاد مشتری",
       fetchFailed: "خطا در دریافت لیست مشتری‌ها",
       updateFailed: "خطا در ویرایش مشتری",
       deleteFailed: "خطا در حذف مشتری",
diff --git a/src/pages/Clients.tsx b/src/pages/Clients.tsx
index 33d2ac2..b335764 100644
--- a/src/pages/Clients.tsx
+++ b/src/pages/Clients.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react"
-import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
+import { toast } from "sonner"
 import { useWorkspace } from "../context/WorkspaceContext" 
 import { useAppContext } from "../context/AppContext"
 import { useTranslation } from "../hooks/useTranslation" 
@@ -13,11 +14,11 @@ import { type Client } from "../types/client"
 import { getClients } from "../api/clients"
 import CreateClientModal from "../components/CreateClientModal"
 import EditClientModal from "../components/EditClientModal"
-import DeleteClientModal from "../components/DeleteClientModal"
-import FilterBar from "../components/FilterBar"
-import { Button } from "../components/ui/button"
-import { Card } from "../components/ui/card"
-import { Pagination } from "../components/Pagination"
+import DeleteClientModal from "../components/DeleteClientModal"
+import FilterBar from "../components/FilterBar"
+import { Button } from "../components/ui/button"
+import { Card, CardContent, CardTitle } from "../components/ui/card"
+import { Pagination } from "../components/Pagination"
 
 export default function Clients() {
   const { activeWorkspace } = useWorkspace()
@@ -82,11 +83,12 @@ export default function Clients() {
       
       setClients(items)
       setTotalItems(count)
-    } catch (error) {
-      console.error(t.clients.errors.fetchFailed, error)
-      setClients([]) 
-    } finally {
-      setIsLoading(false)
+    } catch (error) {
+      console.error(t.clients.errors.fetchFailed, error)
+      toast.error(t.clients.errors.fetchFailed)
+      setClients([]) 
+    } finally {
+      setIsLoading(false)
     }
   }
 
@@ -107,122 +109,146 @@ export default function Clients() {
     fetchClientsList()
   }, [activeWorkspace?.id, debouncedSearch, ordering, currentPage, limit])
 
-  if (!activeWorkspace) {
-    return (
-      <div className="p-6 text-center text-slate-500">
-        {t.clients.selectWorkspace}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
-      <div className="flex justify-between items-center mb-8 gap-4">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
-          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">
-            {t.clients.description(activeWorkspace.name)}
-          </p>
-        </div>
-        
-        {canCreateClient && (
-          <Button
-            onClick={() => setIsCreateModalOpen(true)}
-            size="icon"
-            className="shadow-sm shrink-0"
-            title={t.clients.addClient}
-          >
-            <Plus className="w-5 h-5" />
-          </Button>
-        )}
-      </div>
-
-      <FilterBar
-        searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
-        ordering={ordering}
-        setOrdering={setOrdering}
-        orderingOptions={orderingOptions}
-        searchPlaceholder={t.clients.searchPlaceholder}
-      />
-
-      <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
-        <div className="p-0">
-          {isLoading ? (
-            <div className="flex justify-center items-center p-12 text-slate-500">
-              <Loader2 className="w-8 h-8 animate-spin" />
-            </div>
-          ) : clients.length === 0 ? (
-            <div className="text-center p-12">
-              <Building2 className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3" />
-              <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
-              <p className="text-slate-500 dark:text-slate-400 mt-1">
-                {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
-              </p>
-            </div>
-          ) : (
-            <ul className="divide-y divide-slate-200 dark:divide-slate-800">
+  if (!activeWorkspace) {
+    return (
+      <div className="mx-auto max-w-7xl p-4 md:p-6">
+        <div className="rounded-3xl border border-slate-200 bg-white p-6 text-slate-600 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300">
+          {t.clients.selectWorkspace}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
+      <div className="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.clients.title}</h1>
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              {t.clients.description(activeWorkspace.name)}
+            </p>
+          </div>
+
+          {canCreateClient && (
+            <Button
+              onClick={() => setIsCreateModalOpen(true)}
+              size="icon"
+              className="shrink-0 shadow-sm"
+              title={t.clients.addClient}
+            >
+              <Plus className="h-5 w-5" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="rounded-3xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-5">
+        <FilterBar
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          ordering={ordering}
+          setOrdering={setOrdering}
+          orderingOptions={orderingOptions}
+          searchPlaceholder={t.clients.searchPlaceholder}
+        />
+      </div>
+
+      {isLoading ? (
+        <div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="flex items-center justify-center text-slate-500 dark:text-slate-400">
+            <Loader2 className="h-8 w-8 animate-spin" />
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {clients.length === 0 ? (
+            <div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
+              <Building2 className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
+              <h3 className="text-lg font-medium text-slate-900 dark:text-white">{t.clients.noClients}</h3>
+              <p className="mt-1 text-slate-500 dark:text-slate-400">
+                {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-3">
               {clients.map((client) => {
                 const canDeleteClient = canDeleteWorkspaceResource({
                   workspaceRole,
                   currentUserId: user?.id,
                   createdById: client.created_by?.id,
                 })
+
                 return (
-                <li key={client.id} className="p-4 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors flex items-center justify-between gap-4">
-                  <div className="flex-1 min-w-0">
-                    <h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
-                    {client.notes && (
-                      <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
-                        {client.notes}
-                      </p>
-                    )}
-                  </div>
-                  
-                  {(canEditClient || canDeleteClient) && (
-                    <div className="flex items-center gap-1 shrink-0">
-                      {canEditClient && (
-                        <Button 
-                          variant="ghost" 
-                          size="icon"
-                          onClick={() => setEditClient(client)}
-                          className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
-                        >
-                          <Pencil className="w-4 h-4" />
-                        </Button>
-                      )}
-                      {canDeleteClient && (
-                        <Button 
-                          variant="ghost" 
-                          size="icon"
-                          onClick={() => setDeleteClient(client)}
-                          className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </li>
+                  <Card key={client.id} className="shadow-sm dark:border-slate-700 dark:bg-slate-800">
+                    <CardContent className="flex h-full flex-col gap-4 p-5">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex min-w-0 items-center gap-3">
+                          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-sm font-semibold text-slate-700 dark:bg-slate-700 dark:text-slate-200">
+                            {client.name.trim().charAt(0).toUpperCase() || "C"}
+                          </div>
+                          <div className="min-w-0">
+                            <CardTitle className="truncate text-base text-slate-900 dark:text-white">{client.name}</CardTitle>
+                          </div>
+                        </div>
+
+                        {(canEditClient || canDeleteClient) && (
+                          <div className="flex shrink-0 items-center gap-1">
+                            {canEditClient && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setEditClient(client)}
+                                className="h-8 w-8 text-slate-400 hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
+                                title={t.actions?.edit || "Edit"}
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                            )}
+                            {canDeleteClient && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setDeleteClient(client)}
+                                className="h-8 w-8 text-slate-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                                title={t.actions?.delete || "Delete"}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="space-y-3">
+                        <p className="min-h-[3.75rem] text-sm leading-6 text-slate-600 line-clamp-3 dark:text-slate-300">
+                          {client.notes || t.workspace?.noDescription || "No description"}
+                        </p>
+                        <div className="text-xs font-medium uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500">
+                          {t.clients.addedOn}: {formatDate(client.created_at)}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
                 )
               })}
-            </ul>
+            </div>
           )}
-        </div>
-      </Card>
-
-      {!isLoading && clients.length > 0 && (
-        <Pagination
-          currentPage={currentPage}
-          totalCount={totalItems}
-          limit={limit}
-          onPageChange={setCurrentPage}
-          onLimitChange={setLimit}
-        />
-      )}
-
-      {canCreateClient && (
-        <CreateClientModal
+
+          {clients.length > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalCount={totalItems}
+              limit={limit}
+              onPageChange={setCurrentPage}
+              onLimitChange={setLimit}
+            />
+          )}
+        </div>
+      )}
+
+      {canCreateClient && (
+        <CreateClientModal
           isOpen={isCreateModalOpen}
           onClose={() => setIsCreateModalOpen(false)}
           onSuccess={fetchClientsList}