fix(permissions): align workspace resource actions with role rules

src/pages/Clients.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react"
 import { Plus, Building2, Loader2, Pencil, Trash2 } from "lucide-react"
-import { useWorkspace } from "../context/WorkspaceContext" 
-import { useTranslation } from "../hooks/useTranslation" 
-import {
-  CLIENTS_CREATE,
-  CLIENTS_DELETE,
-  CLIENTS_EDIT,
-  canWorkspace,
-} from "../lib/permissions"
+import { useWorkspace } from "../context/WorkspaceContext" 
+import { useAppContext } from "../context/AppContext"
+import { useTranslation } from "../hooks/useTranslation" 
+import {
+  CLIENTS_CREATE,
+  CLIENTS_EDIT,
+  canDeleteWorkspaceResource,
+  canWorkspace,
+} from "../lib/permissions"
 import { type Client } from "../types/client"
 import { getClients } from "../api/clients"
 import CreateClientModal from "../components/CreateClientModal"
@@ -18,9 +19,10 @@ import { Button } from "../components/ui/button"
 import { Card } from "../components/ui/card"
 import { Pagination } from "../components/Pagination"
 
-export default function Clients() {
-  const { activeWorkspace } = useWorkspace()
-  const [clients, setClients] = useState<Client[]>([]) 
+export default function Clients() {
+  const { activeWorkspace } = useWorkspace()
+  const { user } = useAppContext()
+  const [clients, setClients] = useState<Client[]>([]) 
   const [isLoading, setIsLoading] = useState(true)
   
   // Pagination States
@@ -40,10 +42,9 @@ export default function Clients() {
   
   const { t, lang } = useTranslation()
   const isFa = lang === "fa"
-  const workspaceRole = activeWorkspace?.my_role
-  const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
-  const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
-  const canDeleteClient = canWorkspace(workspaceRole, CLIENTS_DELETE)
+  const workspaceRole = activeWorkspace?.my_role
+  const canCreateClient = canWorkspace(workspaceRole, CLIENTS_CREATE)
+  const canEditClient = canWorkspace(workspaceRole, CLIENTS_EDIT)
 
   const orderingOptions = [
     { value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
@@ -161,8 +162,14 @@ export default function Clients() {
             </div>
           ) : (
             <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-              {clients.map((client) => (
-                <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">
+              {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 && (
@@ -196,10 +203,11 @@ export default function Clients() {
                       )}
                     </div>
                   )}
-                </li>
-              ))}
-            </ul>
-          )}
+                </li>
+                )
+              })}
+            </ul>
+          )}
         </div>
       </Card>
 
@@ -231,12 +239,12 @@ export default function Clients() {
         />
       )}
 
-      {canDeleteClient && (
-        <DeleteClientModal
-          isOpen={!!deleteClient}
-          onClose={() => setDeleteClient(null)}
-          onSuccess={fetchClientsList}
-          client={deleteClient}
+      {!!deleteClient && (
+        <DeleteClientModal
+          isOpen={!!deleteClient}
+          onClose={() => setDeleteClient(null)}
+          onSuccess={fetchClientsList}
+          client={deleteClient}
         />
       )}
     </div>