refactor(lists): align client and project page controls

2026-04-27 20:52:18 +03:30
parent 8ecf317700
commit 1e5f0b6b5e
3 changed files with 211 additions and 217 deletions
--- a/src/pages/Clients.tsx
+++ b/src/pages/Clients.tsx
@@ -1,13 +1,13 @@
 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 { useTranslation } from "../hooks/useTranslation" 
+import {
+  CLIENTS_CREATE,
+  CLIENTS_DELETE,
+  CLIENTS_EDIT,
+  canWorkspace,
+} from "../lib/permissions"
 import { type Client } from "../types/client"
 import { getClients } from "../api/clients"
 import CreateClientModal from "../components/CreateClientModal"
@@ -38,12 +38,12 @@ export default function Clients() {
  const [editClient, setEditClient] = useState<Client | null>(null)
  const [deleteClient, setDeleteClient] = useState<Client | null>(null)
  
-  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 { 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 orderingOptions = [
    { value: "-created_at", label: t.ordering?.createdAtDesc || "Newest First" },
@@ -116,24 +116,24 @@ export default function Clients() {

  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-4 h-4" />
-          </Button>
-        )}
+      <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
@@ -170,35 +170,32 @@ export default function Clients() {
                        {client.notes}
                      </p>
                    )}
-                    <div className="text-[11px] text-slate-400 mt-3 font-medium">
-                      {t.clients.addedOn}: {formatDate(client.created_at)}
-                    </div>
                  </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>
-                  )}
+                  {(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>
              ))}
            </ul>
@@ -216,32 +213,32 @@ export default function Clients() {
        />
      )}

-      {canCreateClient && (
-        <CreateClientModal
-          isOpen={isCreateModalOpen}
-          onClose={() => setIsCreateModalOpen(false)}
-          onSuccess={fetchClientsList}
-          workspaceId={activeWorkspace.id}
-        />
-      )}
-
-      {canEditClient && (
-        <EditClientModal
-          isOpen={!!editClient}
-          onClose={() => setEditClient(null)}
-          onSuccess={fetchClientsList}
-          client={editClient}
-        />
-      )}
-
-      {canDeleteClient && (
-        <DeleteClientModal
-          isOpen={!!deleteClient}
-          onClose={() => setDeleteClient(null)}
-          onSuccess={fetchClientsList}
-          client={deleteClient}
-        />
-      )}
+      {canCreateClient && (
+        <CreateClientModal
+          isOpen={isCreateModalOpen}
+          onClose={() => setIsCreateModalOpen(false)}
+          onSuccess={fetchClientsList}
+          workspaceId={activeWorkspace.id}
+        />
+      )}
+
+      {canEditClient && (
+        <EditClientModal
+          isOpen={!!editClient}
+          onClose={() => setEditClient(null)}
+          onSuccess={fetchClientsList}
+          client={editClient}
+        />
+      )}
+
+      {canDeleteClient && (
+        <DeleteClientModal
+          isOpen={!!deleteClient}
+          onClose={() => setDeleteClient(null)}
+          onSuccess={fetchClientsList}
+          client={deleteClient}
+        />
+      )}
    </div>
  )
 }
--- a/src/pages/Projects.tsx
+++ b/src/pages/Projects.tsx
@@ -9,26 +9,26 @@ import { Plus, Archive, Trash2, Pencil } from "lucide-react";

 import FilterBar from "../components/FilterBar";
 import { Button } from "../components/ui/button";
-import { Card } from "../components/ui/card";
+import { Card } from "../components/ui/card";
 import { Modal } from "../components/Modal";
-import { toast } from "sonner";
-import { Input } from "../components/ui/input";
-import {
-  PROJECTS_ARCHIVE,
-  PROJECTS_CREATE,
-  PROJECTS_DELETE,
-  PROJECTS_EDIT,
-  canWorkspace,
-} from "../lib/permissions";
+import { toast } from "sonner";
+import { Input } from "../components/ui/input";
+import {
+  PROJECTS_ARCHIVE,
+  PROJECTS_CREATE,
+  PROJECTS_DELETE,
+  PROJECTS_EDIT,
+  canWorkspace,
+} from "../lib/permissions";

-export const Projects: React.FC = () => {
-  const { t, lang } = useTranslation();
-  const { activeWorkspace } = useWorkspace();
-  const workspaceRole = activeWorkspace?.my_role;
-  const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
-  const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
-  const canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
-  const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
+export const Projects: React.FC = () => {
+  const { t, lang } = useTranslation();
+  const { activeWorkspace } = useWorkspace();
+  const workspaceRole = activeWorkspace?.my_role;
+  const canCreateProject = canWorkspace(workspaceRole, PROJECTS_CREATE);
+  const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
+  const canDeleteProject = canWorkspace(workspaceRole, PROJECTS_DELETE);
+  const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
  
  const [projects, setProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
@@ -100,7 +100,7 @@ export const Projects: React.FC = () => {
    setProjectToDelete(project);
  };

-  const confirmDelete = async () => {
+  const confirmDelete = async () => {
    if (!deleteModal.project) return;
    try {
      const deletedId = deleteModal.project.id;
@@ -118,20 +118,20 @@ export const Projects: React.FC = () => {
    } catch (error) {
      toast.error(t.projects?.deleteError || 'Failed to delete project');
    }
-  };
-
-  const formatDate = (dateStr: string | undefined) => {
-    if (!dateStr) return "-"
-    try {
-      const date = new Date(dateStr)
-      return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
-        dateStyle: "long",
-        timeZone: "Asia/Tehran",
-      }).format(date)
-    } catch {
-      return dateStr
-    }
-  }
+  };
+
+  const formatDate = (dateStr: string | undefined) => {
+    if (!dateStr) return "-"
+    try {
+      const date = new Date(dateStr)
+      return new Intl.DateTimeFormat(lang === "fa" ? "fa-IR" : "en-US", {
+        dateStyle: "long",
+        timeZone: "Asia/Tehran",
+      }).format(date)
+    } catch {
+      return dateStr
+    }
+  }


  return (
@@ -142,26 +142,26 @@ export const Projects: React.FC = () => {
          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.projects?.description(activeWorkspace?.name || "-") || 'Manage your projects'}</p>
        </div>
        <div className="flex items-center gap-3 w-full sm:w-auto">
-          {canArchiveProject && (
-            <Button
-              variant={isArchived ? "default" : "secondary"}
-              onClick={() => setIsArchived(!isArchived)}
-              className="gap-2 shadow-sm flex-1 sm:flex-none"
-            >
-              <Archive className="h-4 w-4" />
-              {isArchived ? (t.projects?.active || 'Active Projects') : (t.projects?.archived || 'Archived Projects')}
-            </Button>
-          )}
-          {canCreateProject && (
-            <Button
-              onClick={() => setIsCreateModalOpen(true)}
-              size="icon"
-              className="shadow-sm"
-              title={t.projects?.createNew || 'Create New'}
-            >
-              <Plus className="h-5 w-5" />
-            </Button>
-          )}
+          {canArchiveProject && (
+            <Button
+              variant={isArchived ? "default" : "secondary"}
+              onClick={() => setIsArchived(!isArchived)}
+              className="gap-2 shadow-sm flex-1 sm:flex-none"
+            >
+              <Archive className="h-4 w-4" />
+              {isArchived ? (t.projects?.active || 'Active Projects') : (t.projects?.archived || 'Archived Projects')}
+            </Button>
+          )}
+          {canCreateProject && (
+            <Button
+              onClick={() => setIsCreateModalOpen(true)}
+              size="icon"
+              className="shadow-sm"
+              title={t.projects?.createNew || 'Create New'}
+            >
+              <Plus className="h-5 w-5" />
+            </Button>
+          )}
        </div>
      </div>

@@ -174,76 +174,73 @@ export const Projects: React.FC = () => {
        searchPlaceholder={t.projects?.searchPlaceholder || 'Search projects...'}
      />

-      {loading ? (
-        <div className="p-12 flex justify-center text-slate-500">
-           <div className="animate-pulse">{t.projects?.loading || 'Loading...'}</div>
-        </div>
-      ) : (
-        <div className="flex flex-col flex-1">
-          <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
-            <div className="p-0">
-              {projects.length === 0 ? (
-                <div className="py-16 flex flex-col items-center justify-center">
-                  <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
-                </div>
-              ) : (
-                <ul className="divide-y divide-slate-200 dark:divide-slate-800">
-                  {projects.map((project) => (
-                    <li
-                      key={project.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">{project.name}</h4>
-                        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
-                          {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
-                        </p>
-                        {project.description && (
-                          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
-                            {project.description}
-                          </p>
-                        )}
-                        <div className="text-[11px] text-slate-400 mt-3 font-medium">
-                          {(t.projects as any)?.addedOn || "Added on"}: {formatDate(project.created_at)}
-                        </div>
-                      </div>
-
-                      {(canEditProject || canDeleteProject) && (
-                        <div className="flex items-center gap-1 shrink-0">
-                          {canEditProject && (
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => setEditingProject(project)}
-                              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"
-                              title={t.actions?.edit || "Edit"}
-                            >
-                              <Pencil className="w-4 h-4" />
-                            </Button>
-                          )}
-
-                          {canDeleteProject && (
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              onClick={() => setDeleteModal({ isOpen: true, project })}
-                              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"
-                              title={t.actions?.delete || "Delete"}
-                            >
-                              <Trash2 className="w-4 h-4" />
-                            </Button>
-                          )}
-                        </div>
-                      )}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          </Card>
-
-          <Pagination
-            currentPage={currentPage}
+      {loading ? (
+        <div className="p-12 flex justify-center text-slate-500">
+           <div className="animate-pulse">{t.projects?.loading || 'Loading...'}</div>
+        </div>
+      ) : (
+        <div className="flex flex-col flex-1">
+          <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
+            <div className="p-0">
+              {projects.length === 0 ? (
+                <div className="py-16 flex flex-col items-center justify-center">
+                  <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
+                </div>
+              ) : (
+                <ul className="divide-y divide-slate-200 dark:divide-slate-800">
+                  {projects.map((project) => (
+                    <li
+                      key={project.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">{project.name}</h4>
+                        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                          {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
+                        </p>
+                        {project.description && (
+                          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                            {project.description}
+                          </p>
+                        )}
+                      </div>
+
+                      {(canEditProject || canDeleteProject) && (
+                        <div className="flex items-center gap-1 shrink-0">
+                          {canEditProject && (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => setEditingProject(project)}
+                              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"
+                              title={t.actions?.edit || "Edit"}
+                            >
+                              <Pencil className="w-4 h-4" />
+                            </Button>
+                          )}
+
+                          {canDeleteProject && (
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => setDeleteModal({ isOpen: true, project })}
+                              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"
+                              title={t.actions?.delete || "Delete"}
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </Button>
+                          )}
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </Card>
+
+          <Pagination
+            currentPage={currentPage}
            totalCount={totalItems}
            limit={limit}
            onPageChange={setCurrentPage}
@@ -254,15 +251,15 @@ export const Projects: React.FC = () => {
      )}

      {/* Modals */}
-      {canCreateProject && isCreateModalOpen && (
-        <ProjectCreateModal
-          isOpen={isCreateModalOpen}
-          onClose={() => setIsCreateModalOpen(false)}
-        />
-      )}
-      
-      {canEditProject && editingProject && (
-        <ProjectEditModal
+      {canCreateProject && isCreateModalOpen && (
+        <ProjectCreateModal
+          isOpen={isCreateModalOpen}
+          onClose={() => setIsCreateModalOpen(false)}
+        />
+      )}
+      
+      {canEditProject && editingProject && (
+        <ProjectEditModal
          project={editingProject}
          isOpen={!!editingProject}
          onClose={() => setEditingProject(null)}
--- a/src/pages/Tags.tsx
+++ b/src/pages/Tags.tsx
@@ -153,7 +153,7 @@ export default function Tags() {
        </div>
        {canCreateTag && (
          <Button onClick={openCreateModal} size="icon" className="shadow-sm shrink-0" title={t.tags?.create || "Create Tag"}>
-            <Plus className="h-4 w-4" />
+            <Plus className="h-5 w-5" />
          </Button>
        )}
      </div>