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

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}