feat(projects): add client strip filtering and page refresh

src/pages/Projects.tsx

@@ -1,19 +1,20 @@
-import React, { useState, useEffect } from "react";
-import { useTranslation } from "../hooks/useTranslation";
+import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "../hooks/useTranslation";
 import { getProjects, deleteProject, type Project } from "../api/projects";
+import { getClients } from "../api/clients";
 import { useAppContext } from "../context/AppContext";
 import { useWorkspace } from "../context/WorkspaceContext";
-import { ProjectCreateModal } from "../components/projects/ProjectCreateModal";
-import { ProjectEditModal } from "../components/projects/ProjectEditModal";
-import { Pagination } from "../components/Pagination";
-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 { Modal } from "../components/Modal";
-import { toast } from "sonner";
-import { Input } from "../components/ui/input";
+import { ProjectCreateModal } from "../components/projects/ProjectCreateModal";
+import { ProjectEditModal } from "../components/projects/ProjectEditModal";
+import { Pagination } from "../components/Pagination";
+import { Plus, Archive, Building2, Pencil, Trash2, X } from "lucide-react";
+
+import FilterBar from "../components/FilterBar";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardTitle } from "../components/ui/card";
+import { Modal } from "../components/Modal";
+import { toast } from "sonner";
+import { Input } from "../components/ui/input";
 import {
   PROJECTS_ARCHIVE,
   PROJECTS_CREATE,
@@ -22,7 +23,7 @@ import {
   canWorkspace,
 } from "../lib/permissions";
 
-export const Projects: React.FC = () => {
+export const Projects: React.FC = () => {
   const { t, lang } = useTranslation();
   const { user } = useAppContext();
   const { activeWorkspace } = useWorkspace();
@@ -31,62 +32,84 @@ export const Projects: React.FC = () => {
   const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
   const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
   
-  const [projects, setProjects] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [editingProject, setEditingProject] = useState<any | null>(null);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [clients, setClients] = useState<{ id: string; name: string }[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+
+  const [search, setSearch] = useState("");
+  const [ordering, setOrdering] = useState("-created_at");
+  const [isArchived, setIsArchived] = useState(false);
+  const [selectedClientIds, setSelectedClientIds] = useState<string[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [limit, setLimit] = useState(10);
+  const [totalItems, setTotalItems] = useState(0);
+
+  const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; project: Project | null}>({isOpen: false, project: null});
+  const [deleteInput, setDeleteInput] = useState('');
 
-  const [search, setSearch] = useState("");
-  const [ordering, setOrdering] = useState("-created_at");
-  const [isArchived, setIsArchived] = useState(false);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [limit, setLimit] = useState(10);
-  const [totalItems, setTotalItems] = useState(0);
-
-  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
-  const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; project: Project | null}>({isOpen: false, project: null});
-  const [deleteInput, setDeleteInput] = useState('');
-
-  const orderingOptions = [
-    { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
-    { value: 'created_at', label: t.ordering?.createdAt || 'Oldest First' },
-    { value: 'name', label: t.ordering?.name || 'Name (A-Z)' },
-    { value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
-  ];
-
-  const fetchProjectList = async () => {
-    if (!activeWorkspace) return;
-    setLoading(true);
-    try {
-      const offset = (currentPage - 1) * limit;
-      const data = await getProjects(activeWorkspace.id, { 
-        limit, 
-        offset, 
-        search, 
-        is_archived: isArchived,
-        ordering 
-      });
+  const orderingOptions = [
+    { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
+    { value: 'created_at', label: t.ordering?.createdAt || 'Oldest First' },
+    { value: 'name', label: t.ordering?.name || 'Name (A-Z)' },
+    { value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
+  ];
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, ordering, isArchived, selectedClientIds]);
+
+  const fetchProjectList = async () => {
+    if (!activeWorkspace) return;
+    setLoading(true);
+    try {
+      const offset = (currentPage - 1) * limit;
+      const data = await getProjects(activeWorkspace.id, { 
+        limit, 
+        offset, 
+        search, 
+        clients: selectedClientIds,
+        is_archived: isArchived,
+        ordering 
+      });
       const items = data?.results || (Array.isArray(data) ? data : [])
       const count = data?.count !== undefined ? data.count : items.length
-      setProjects(items);
-      setTotalItems(count)
-    } catch (error) {
-      console.error("Failed to fetch projects", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    const delayDebounceFn = setTimeout(() => {
-      fetchProjectList();
-    }, 300);
-    return () => clearTimeout(delayDebounceFn);
-  }, [activeWorkspace, currentPage, limit, search, isArchived, ordering]);
-
-  useEffect(() => {
-    const handleCreated = () => fetchProjectList();
-    const handleUpdated = () => fetchProjectList();
+      setProjects(items);
+      setTotalItems(count)
+    } catch (error) {
+      console.error("Failed to fetch projects", error);
+      toast.error(t.projects?.fetchError || "Failed to fetch projects.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!activeWorkspace?.id) return;
+
+    getClients(activeWorkspace.id, "", "name", 300, 0)
+      .then((data: any) => {
+        const items = data?.results || (Array.isArray(data) ? data : []);
+        setClients(items.map((client: { id: string; name: string }) => ({ id: client.id, name: client.name })));
+      })
+      .catch((error) => {
+        console.error(error);
+        toast.error(t.projects?.clientFetchError || "Failed to load clients.");
+        setClients([]);
+      });
+  }, [activeWorkspace?.id, t.projects?.clientFetchError]);
+
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      void fetchProjectList();
+    }, 300);
+    return () => clearTimeout(delayDebounceFn);
+  }, [activeWorkspace, currentPage, limit, search, isArchived, ordering, selectedClientIds]);
+
+  useEffect(() => {
+    const handleCreated = () => void fetchProjectList();
+    const handleUpdated = () => void fetchProjectList();
     
     window.addEventListener("project_created", handleCreated);
     window.addEventListener("project_updated", handleUpdated);
@@ -97,13 +120,9 @@ export const Projects: React.FC = () => {
     };
   }, [activeWorkspace, currentPage, limit, search, isArchived, ordering]);
 
-  const handleDeleteClick = (project: Project) => {
-    setProjectToDelete(project);
-  };
-
-  const confirmDelete = async () => {
-    if (!deleteModal.project) return;
-    try {
+  const confirmDelete = async () => {
+    if (!deleteModal.project) return;
+    try {
       const deletedId = deleteModal.project.id;
       await deleteProject(deletedId);
       
@@ -121,7 +140,7 @@ export const Projects: React.FC = () => {
     }
   };
 
-  const formatDate = (dateStr: string | undefined) => {
+  const formatDate = (dateStr: string | undefined) => {
     if (!dateStr) return "-"
     try {
       const date = new Date(dateStr)
@@ -132,133 +151,237 @@ export const Projects: React.FC = () => {
     } catch {
       return dateStr
     }
-  }
-
-
-  return (
-    <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.projects?.title || 'Projects'}</h1>
-          <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>
-          )}
-        </div>
-      </div>
-
-      <FilterBar 
-        searchQuery={search}
-        setSearchQuery={setSearch}
-        ordering={ordering}
-        setOrdering={setOrdering}
-        orderingOptions={orderingOptions}
-        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) => {
-                    const canDeleteProject = canDeleteWorkspaceResource({
-                      workspaceRole,
-                      currentUserId: user?.id,
-                      createdById: project.created_by?.id,
-                    });
-                    return (
-                    <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}
-            onLimitChange={setLimit}
-            pageSizeOptions={[10, 20, 50]}
-          />
-        </div>
-      )}
-
-      {/* Modals */}
+  }
+
+  const sortedClients = useMemo(() => {
+    if (!selectedClientIds.length) return clients;
+    const selected = clients.filter((client) => selectedClientIds.includes(client.id));
+    const unselected = clients.filter((client) => !selectedClientIds.includes(client.id));
+    return [...selected, ...unselected];
+  }, [clients, selectedClientIds]);
+
+  const toggleClientFilter = (clientId: string) => {
+    setCurrentPage(1);
+    setSelectedClientIds((current) =>
+      current.includes(clientId)
+        ? current.filter((id) => id !== clientId)
+        : [...current, clientId],
+    );
+  };
+
+  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.projects?.selectWorkspace || 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 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.projects?.title || 'Projects'}</h1>
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t.projects?.description(activeWorkspace.name) || 'Manage your projects'}</p>
+          </div>
+          <div className="flex w-full items-center gap-3 sm:w-auto">
+            {canArchiveProject && (
+              <Button
+                variant={isArchived ? "default" : "secondary"}
+                onClick={() => setIsArchived(!isArchived)}
+                className="flex-1 gap-2 shadow-sm 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="shrink-0 shadow-sm"
+                title={t.projects?.createNew || 'Create New'}
+              >
+                <Plus className="h-5 w-5" />
+              </Button>
+            )}
+          </div>
+        </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={search}
+          setSearchQuery={setSearch}
+          ordering={ordering}
+          setOrdering={setOrdering}
+          orderingOptions={orderingOptions}
+          searchPlaceholder={t.projects?.searchPlaceholder || 'Search projects...'}
+        />
+
+        <div className="mt-4 flex items-center justify-between gap-3">
+          <div className="text-xs font-semibold uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500">
+            {t.projects?.filterClients || "Filter by client"}
+          </div>
+          {selectedClientIds.length > 0 ? (
+            <button
+              type="button"
+              onClick={() => {
+                setCurrentPage(1);
+                setSelectedClientIds([]);
+              }}
+              className="text-xs font-medium text-slate-500 transition hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+            >
+              {t.projects?.clearClientFilters || "Clear filters"}
+            </button>
+          ) : null}
+        </div>
+
+        <div className="mt-3 overflow-x-auto pb-2">
+          <div className="flex min-w-max items-center gap-2">
+            {sortedClients.map((client) => {
+              const isSelected = selectedClientIds.includes(client.id);
+              return (
+                <button
+                  key={client.id}
+                  type="button"
+                  onClick={() => toggleClientFilter(client.id)}
+                  className={`inline-flex items-center gap-2 rounded-full border px-3 py-2 text-sm font-medium transition ${
+                    isSelected
+                      ? "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-300"
+                      : "border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-950/60 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
+                  }`}
+                >
+                  <span className="whitespace-nowrap">{client.name}</span>
+                  {isSelected ? (
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        toggleClientFilter(client.id);
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          toggleClientFilter(client.id);
+                        }
+                      }}
+                      className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-200"
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
+                  ) : null}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <div className="text-center text-slate-500 dark:text-slate-400">{t.projects?.loading || 'Loading...'}</div>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {projects.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" />
+              <p className="font-medium text-slate-500 dark:text-slate-400">{t.projects?.emptyState || 'No projects found'}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-3">
+              {projects.map((project) => {
+                const canDeleteProject = canDeleteWorkspaceResource({
+                  workspaceRole,
+                  currentUserId: user?.id,
+                  createdById: project.created_by?.id,
+                });
+
+                return (
+                  <Card key={project.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="h-10 w-10 shrink-0 rounded-xl border border-slate-200 dark:border-slate-700"
+                            style={{ backgroundColor: project.color || "#3B82F6" }}
+                          />
+                          <div className="min-w-0">
+                            <CardTitle className="truncate text-base text-slate-900 dark:text-white">{project.name}</CardTitle>
+                            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                              {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
+                            </div>
+                          </div>
+                        </div>
+
+                        {(canEditProject || canDeleteProject) && (
+                          <div className="flex shrink-0 items-center gap-1">
+                            {canEditProject && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setEditingProject(project)}
+                                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>
+                            )}
+
+                            {canDeleteProject && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => setDeleteModal({ isOpen: true, project })}
+                                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">
+                          {project.description || t.workspace?.noDescription || "No description"}
+                        </p>
+                        <div className="flex flex-wrap items-center gap-2 text-xs font-medium uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500">
+                          <span>{formatDate(project.created_at)}</span>
+                          {project.is_archived ? (
+                            <span className="rounded-full bg-amber-100 px-2 py-1 text-[11px] font-semibold tracking-[0.1em] text-amber-700 dark:bg-amber-500/15 dark:text-amber-300">
+                              {t.projects?.archived || "Archived Projects"}
+                            </span>
+                          ) : null}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+
+          <Pagination
+            currentPage={currentPage}
+            totalCount={totalItems}
+            limit={limit}
+            onPageChange={setCurrentPage}
+            onLimitChange={setLimit}
+            pageSizeOptions={[10, 20, 50]}
+          />
+        </div>
+      )}
+
+      {/* Modals */}
       {canCreateProject && isCreateModalOpen && (
         <ProjectCreateModal
           isOpen={isCreateModalOpen}