feat(clients): refresh clients page layout and toast feedback

src/components/CreateClientModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { toast } from "sonner";
 import { createClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
 import { Button } from "./ui/button";
@@ -24,12 +25,14 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
     setIsLoading(true);
     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);
     }

src/components/DeleteClientModal.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { toast } from "sonner";
 import { type Client } from "../types/client";
 import { deleteClient } from "../api/clients";
 import { useTranslation } from "../hooks/useTranslation";
@@ -21,10 +22,12 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
     setIsLoading(true);
     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);
     }

src/components/EditClientModal.tsx

@@ -1,4 +1,5 @@
 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";
@@ -32,10 +33,12 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
     setIsLoading(true);
     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);
     }

src/locales/en.ts

@@ -246,6 +246,9 @@ export const en = {
     deleteConfirmMessage: (name: string) => `Are you sure you want to delete ${name}?`,
     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",

src/locales/fa.ts

@@ -243,6 +243,9 @@ export const fa = {
     deleteConfirmMessage: (name: string) => `آیا از حذف ${name} اطمینان دارید؟`,
     delete: "حذف",
     saveChanges: "ذخیره تغییرات",
+    createSuccess: "مشتری با موفقیت ایجاد شد.",
+    updateSuccess: "مشتری با موفقیت به‌روزرسانی شد.",
+    deleteSuccess: "مشتری با موفقیت حذف شد.",
     errors: {
       createFailed: "خطا در ایجاد مشتری",
       fetchFailed: "خطا در دریافت لیست مشتری‌ها",

src/pages/Clients.tsx

@@ -1,5 +1,6 @@
 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" 
@@ -16,7 +17,7 @@ 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 { Card, CardContent, CardTitle } from "../components/ui/card"
 import { Pagination } from "../components/Pagination"
 
 export default function Clients() {
@@ -84,6 +85,7 @@ export default function Clients() {
       setTotalItems(count)
     } catch (error) {
       console.error(t.clients.errors.fetchFailed, error)
+      toast.error(t.clients.errors.fetchFailed)
       setClients([]) 
     } finally {
       setIsLoading(false)
@@ -109,18 +111,21 @@ export default function Clients() {
 
   if (!activeWorkspace) {
     return (
-      <div className="p-6 text-center text-slate-500">
+      <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="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
+    <div className="mx-auto max-w-7xl space-y-5 p-4 md:p-6">
-      <div className="flex justify-between items-center mb-8 gap-4">
+      <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="text-slate-500 dark:text-slate-400 text-sm mt-1">
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
               {t.clients.description(activeWorkspace.name)}
             </p>
           </div>
@@ -129,14 +134,16 @@ export default function Clients() {
             <Button
               onClick={() => setIsCreateModalOpen(true)}
               size="icon"
-            className="shadow-sm shrink-0"
+              className="shrink-0 shadow-sm"
               title={t.clients.addClient}
             >
-            <Plus className="w-5 h-5" />
+              <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}
@@ -145,50 +152,57 @@ export default function Clients() {
           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">
+      {isLoading ? (
-              <Building2 className="w-12 h-12 text-slate-300 dark:text-slate-700 mx-auto mb-3" />
+        <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="text-slate-500 dark:text-slate-400 mt-1">
+              <p className="mt-1 text-slate-500 dark:text-slate-400">
                 {searchQuery ? t.clients.noClientsSearch : t.clients.noClientsAdd}
               </p>
             </div>
           ) : (
-            <ul className="divide-y divide-slate-200 dark:divide-slate-800">
+            <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">
+                  <Card key={client.id} className="shadow-sm dark:border-slate-700 dark:bg-slate-800">
-                  <div className="flex-1 min-w-0">
+                    <CardContent className="flex h-full flex-col gap-4 p-5">
-                    <h4 className="font-medium text-slate-900 dark:text-white truncate">{client.name}</h4>
+                      <div className="flex items-start justify-between gap-3">
-                    {client.notes && (
+                        <div className="flex min-w-0 items-center gap-3">
-                      <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                          <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.notes}
+                            {client.name.trim().charAt(0).toUpperCase() || "C"}
-                      </p>
+                          </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 items-center gap-1 shrink-0">
+                          <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:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                                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="w-4 h-4" />
+                                <Pencil className="h-4 w-4" />
                               </Button>
                             )}
                             {canDeleteClient && (
@@ -196,22 +210,32 @@ export default function Clients() {
                                 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"
+                                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="w-4 h-4" />
+                                <Trash2 className="h-4 w-4" />
                               </Button>
                             )}
                           </div>
                         )}
-                </li>
+                      </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>
-      </Card>
+          )}
 
-      {!isLoading && clients.length > 0 && (
+          {clients.length > 0 && (
             <Pagination
               currentPage={currentPage}
               totalCount={totalItems}
@@ -220,6 +244,8 @@ export default function Clients() {
               onLimitChange={setLimit}
             />
           )}
+        </div>
+      )}
 
       {canCreateClient && (
         <CreateClientModal