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

src/api/projects.ts

@@ -17,6 +17,7 @@ export interface Project {
   name: string;
   description: string;
   color: string;
+  created_at?: string;
   is_archived: boolean;
   is_deleted?: boolean;
   workspace: string;
@@ -35,7 +36,15 @@ export interface ProjectPayload {
 
 export const getProjects = async (
   workspaceId: string,
-  params: { limit?: number; offset?: number; search?: string; client?: string; is_archived?: boolean, ordering?: string } = {}
+  params: {
+    limit?: number;
+    offset?: number;
+    search?: string;
+    client?: string;
+    clients?: string[];
+    is_archived?: boolean;
+    ordering?: string;
+  } = {}
 ) => {
   const queryParams = new URLSearchParams({ workspace: workspaceId });
 
@@ -43,13 +52,23 @@ export const getProjects = async (
   if (params.offset !== undefined) queryParams.append("offset", params.offset.toString());
   if (params.search) queryParams.append("search", params.search);
   if (params.client) queryParams.append("client", params.client);
+  params.clients?.forEach((clientId) => queryParams.append("clients", clientId));
   if (params.is_archived !== undefined) queryParams.append("is_archived", params.is_archived.toString());
   if (params.ordering !== undefined) queryParams.append("ordering", params.ordering.toString());
 
   const response = await authFetch(`/api/projects/?${queryParams.toString()}`);
 
   if (!response.ok) throw new Error("Failed to fetch projects");
-  return response.json();
+  const data = await response.json();
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.items)) {
+    return {
+      ...data,
+      results: data.items,
+      count: data.total_items ?? data.items.length,
+    };
+  }
+  return data;
 };
 
 export const getProject = async (id: string) => {

src/components/projects/ProjectCreateModal.tsx

@@ -53,11 +53,13 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
         client: formData.client || null,
       });
 
+      toast.success(t.projects?.createSuccess || "Project created successfully.");
       window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
       onClose();
       setFormData({ name: "", description: "", color: "#3B82F6", client: "" });
     } catch (error) {
       console.error(error);
+      toast.error(t.projects?.createError || "Failed to create project.");
     } finally {
       setLoading(false);
     }

src/components/projects/ProjectEditModal.tsx

@@ -66,10 +66,12 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
         client: formData.client || null,
       });
 
+      toast.success(t.projects?.updateSuccess || "Project updated successfully.");
       window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
       onClose();
     } catch (error) {
       console.error(error);
+      toast.error(t.projects?.updateError || "Failed to update project.");
     } finally {
       setLoading(false);
     }
@@ -80,10 +82,16 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
     setLoading(true);
     try {
       const updated = await toggleArchiveProject(project.id);
+      toast.success(
+        project?.is_archived
+          ? t.projects?.restoreSuccess || t.projects?.updateSuccess || "Project updated successfully."
+          : t.projects?.archiveSuccess || t.projects?.updateSuccess || "Project updated successfully.",
+      );
       window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
       onClose();
     } catch (error) {
       console.error(error);
+      toast.error(t.projects?.updateError || "Failed to update project.");
     } finally {
       setLoading(false);
     }

src/locales/en.ts

@@ -294,6 +294,7 @@ export const en = {
     archived: "Archived Projects",
     createNew: "Create New",
     searchPlaceholder: "Search projects...",
+    selectWorkspace: "Please select a workspace first.",
     titlePlaceholder: "Enter title",
     descriptionPlaceholder: "Enter desription",
     titleLabel: "Title",
@@ -314,7 +315,12 @@ export const en = {
     editProject: "Edit Project",
     restore: "Restore",
     archive: "Archive",
+    archiveSuccess: "Project archived successfully.",
+    restoreSuccess: "Project restored successfully.",
+    fetchError: "Failed to fetch projects.",
     clientFetchError: "Failed to load clients.",
+    filterClients: "Filter by client",
+    clearClientFilters: "Clear filters",
     namePlaceholder: "Project name...",
     teamMembers: "Team Members",
     creator: "Creator",

src/locales/fa.ts

@@ -291,6 +291,7 @@ export const fa = {
     archived: "پروژه‌های بایگانی شده",
     createNew: "ایجاد پروژه جدید",
     searchPlaceholder: "جستجوی پروژه‌ها...",
+    selectWorkspace: "لطفاً ابتدا یک ورک‌اسپیس انتخاب کنید.",
     titlePlaceholder: "عنوان پروژه",
     descriptionPlaceholder: "توضیحات پروژه",
     titleLabel: "عنوان",
@@ -311,7 +312,12 @@ export const fa = {
     editProject: "ویرایش پروژه",
     restore: "بازیابی",
     archive: "بایگانی",
+    archiveSuccess: "پروژه با موفقیت بایگانی شد.",
+    restoreSuccess: "پروژه با موفقیت بازیابی شد.",
+    fetchError: "خطا در دریافت پروژه‌ها.",
     clientFetchError: "خطا در دریافت لیست مشتری‌ها.",
+    filterClients: "فیلتر بر اساس مشتری",
+    clearClientFilters: "پاک کردن فیلترها",
     memberAlreadyAdded: "این کاربر قبلا اضافه شده است",
     creator: "سازنده",
     addUser: "افزودن کاربر",

src/pages/Projects.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useEffect } from "react";
+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 { Plus, Archive, Building2, Pencil, Trash2, X } from "lucide-react";
 
 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 { Modal } from "../components/Modal";
 import { toast } from "sonner";
 import { Input } from "../components/ui/input";
@@ -31,19 +32,20 @@ export const Projects: React.FC = () => {
   const canEditProject = canWorkspace(workspaceRole, PROJECTS_EDIT);
   const canArchiveProject = canWorkspace(workspaceRole, PROJECTS_ARCHIVE);
   
-  const [projects, setProjects] = useState<any[]>([]);
+  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<any | null>(null);
+  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 [projectToDelete, setProjectToDelete] = useState<Project | null>(null);
   const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; project: Project | null}>({isOpen: false, project: null});
   const [deleteInput, setDeleteInput] = useState('');
 
@@ -54,6 +56,10 @@ export const Projects: React.FC = () => {
     { value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
   ];
 
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [search, ordering, isArchived, selectedClientIds]);
+
   const fetchProjectList = async () => {
     if (!activeWorkspace) return;
     setLoading(true);
@@ -63,6 +69,7 @@ export const Projects: React.FC = () => {
         limit, 
         offset, 
         search, 
+        clients: selectedClientIds,
         is_archived: isArchived,
         ordering 
       });
@@ -72,21 +79,37 @@ export const Projects: React.FC = () => {
       setTotalItems(count)
     } catch (error) {
       console.error("Failed to fetch projects", error);
+      toast.error(t.projects?.fetchError || "Failed to fetch projects.");
     } finally {
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    const delayDebounceFn = setTimeout(() => {
+    if (!activeWorkspace?.id) return;
-      fetchProjectList();
+
-    }, 300);
+    getClients(activeWorkspace.id, "", "name", 300, 0)
-    return () => clearTimeout(delayDebounceFn);
+      .then((data: any) => {
-  }, [activeWorkspace, currentPage, limit, search, isArchived, ordering]);
+        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 handleCreated = () => fetchProjectList();
+    const delayDebounceFn = setTimeout(() => {
-    const handleUpdated = () => fetchProjectList();
+      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,10 +120,6 @@ 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 {
@@ -134,118 +153,222 @@ export const Projects: React.FC = () => {
     }
   }
 
+  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="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 flex-col sm:flex-row justify-between items-start sm: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>
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.projects?.title || 'Projects'}</h1>
+          <div>
-          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.projects?.description(activeWorkspace?.name || "-") || 'Manage your projects'}</p>
+            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.projects?.title || 'Projects'}</h1>
-        </div>
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t.projects?.description(activeWorkspace.name) || 'Manage your projects'}</p>
-        <div className="flex items-center gap-3 w-full sm:w-auto">
+          </div>
-          {canArchiveProject && (
+          <div className="flex w-full items-center gap-3 sm:w-auto">
-            <Button
+            {canArchiveProject && (
-              variant={isArchived ? "default" : "secondary"}
+              <Button
-              onClick={() => setIsArchived(!isArchived)}
+                variant={isArchived ? "default" : "secondary"}
-              className="gap-2 shadow-sm flex-1 sm:flex-none"
+                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')}
+                <Archive className="h-4 w-4" />
-            </Button>
+                {isArchived ? (t.projects?.active || 'Active Projects') : (t.projects?.archived || 'Archived Projects')}
-          )}
+              </Button>
-          {canCreateProject && (
+            )}
-            <Button
+            {canCreateProject && (
-              onClick={() => setIsCreateModalOpen(true)}
+              <Button
-              size="icon"
+                onClick={() => setIsCreateModalOpen(true)}
-              className="shadow-sm"
+                size="icon"
-              title={t.projects?.createNew || 'Create New'}
+                className="shrink-0 shadow-sm"
-            >
+                title={t.projects?.createNew || 'Create New'}
-              <Plus className="h-5 w-5" />
+              >
-            </Button>
+                <Plus className="h-5 w-5" />
-          )}
+              </Button>
+            )}
+          </div>
         </div>
       </div>
 
-      <FilterBar 
+      <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">
-        searchQuery={search}
+        <FilterBar 
-        setSearchQuery={setSearch}
+          searchQuery={search}
-        ordering={ordering}
+          setSearchQuery={setSearch}
-        setOrdering={setOrdering}
+          ordering={ordering}
-        orderingOptions={orderingOptions}
+          setOrdering={setOrdering}
-        searchPlaceholder={t.projects?.searchPlaceholder || 'Search projects...'}
+          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="p-12 flex justify-center text-slate-500">
+        <div className="rounded-3xl border border-slate-200 bg-white p-12 shadow-sm dark:border-slate-800 dark:bg-slate-900">
-           <div className="animate-pulse">{t.projects?.loading || 'Loading...'}</div>
+          <div className="text-center text-slate-500 dark:text-slate-400">{t.projects?.loading || 'Loading...'}</div>
         </div>
       ) : (
-        <div className="flex flex-col flex-1">
+        <div className="space-y-6">
-          <Card className="overflow-hidden dark:bg-slate-800 dark:border-slate-700 mb-6">
+          {projects.length === 0 ? (
-            <div className="p-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">
-              {projects.length === 0 ? (
+              <Building2 className="mx-auto mb-3 h-12 w-12 text-slate-300 dark:text-slate-700" />
-                <div className="py-16 flex flex-col items-center justify-center">
+              <p className="font-medium text-slate-500 dark:text-slate-400">{t.projects?.emptyState || 'No projects found'}</p>
-                  <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
+            </div>
-                </div>
+          ) : (
-              ) : (
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-3">
-                <ul className="divide-y divide-slate-200 dark:divide-slate-800">
+              {projects.map((project) => {
-                  {projects.map((project) => {
+                const canDeleteProject = canDeleteWorkspaceResource({
-                    const canDeleteProject = canDeleteWorkspaceResource({
+                  workspaceRole,
-                      workspaceRole,
+                  currentUserId: user?.id,
-                      currentUserId: user?.id,
+                  createdById: project.created_by?.id,
-                      createdById: project.created_by?.id,
+                });
-                    });
+
-                    return (
+                return (
-                    <li
+                  <Card key={project.id} className="shadow-sm dark:border-slate-700 dark:bg-slate-800">
-                      key={project.id}
+                    <CardContent className="flex h-full flex-col gap-4 p-5">
-                      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 items-start justify-between gap-3">
-                    >
+                        <div className="flex min-w-0 items-center gap-3">
-                      <div className="flex-1 min-w-0">
+                          <div
-                        <h4 className="font-medium text-slate-900 dark:text-white truncate">{project.name}</h4>
+                            className="h-10 w-10 shrink-0 rounded-xl border border-slate-200 dark:border-slate-700"
-                        <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                            style={{ backgroundColor: project.color || "#3B82F6" }}
-                          {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
+                          />
-                        </p>
+                          <div className="min-w-0">
-                        {project.description && (
+                            <CardTitle className="truncate text-base text-slate-900 dark:text-white">{project.name}</CardTitle>
-                          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1 truncate">
+                            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-                            {project.description}
+                              {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noClient || "No client"}
-                          </p>
+                            </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>
 
-                      {(canEditProject || canDeleteProject) && (
+                      <div className="space-y-3">
-                        <div className="flex items-center gap-1 shrink-0">
+                        <p className="min-h-[3.75rem] text-sm leading-6 text-slate-600 line-clamp-3 dark:text-slate-300">
-                          {canEditProject && (
+                          {project.description || t.workspace?.noDescription || "No description"}
-                            <Button
+                        </p>
-                              variant="ghost"
+                        <div className="flex flex-wrap items-center gap-2 text-xs font-medium uppercase tracking-[0.14em] text-slate-400 dark:text-slate-500">
-                              size="icon"
+                          <span>{formatDate(project.created_at)}</span>
-                              onClick={() => setEditingProject(project)}
+                          {project.is_archived ? (
-                              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"
+                            <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">
-                              title={t.actions?.edit || "Edit"}
+                              {t.projects?.archived || "Archived Projects"}
-                            >
+                            </span>
-                              <Pencil className="w-4 h-4" />
+                          ) : null}
-                            </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>
-                      )}
+                      </div>
-                    </li>
+                    </CardContent>
-                    );
+                  </Card>
-                  })}
+                );
-                </ul>
+              })}
-              )}
             </div>
-          </Card>
+          )}
 
           <Pagination
             currentPage={currentPage}