feat(projects): add Projects page and component modals + translations

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from "react-router-dom"
+import { createBrowserRouter, RouterProvider, Navigate, Outlet } from "react-router-dom"
 import { ThemeProvider } from "./components/ThemeProvider"
 import { LanguageProvider } from "./components/LanguageProvider"
 import { Toaster } from "./components/ui/toaster"
@@ -13,16 +13,17 @@ import CreateWorkspace from "./pages/WorkspaceCreate"
 import WorkspaceDetail from "./pages/WorkspaceDetail"
 import EditWorkspace from "./pages/WorkspaceEdit"
 import Clients from "./pages/Clients"
+import { Projects } from "./pages/Projects"
 
 const MainLayout = () => {
   return (
     <div className="flex h-screen bg-slate-50 dark:bg-slate-950 overflow-hidden text-slate-900 dark:text-slate-100">
       <Sidebar />
 
-      <div className="flex-1 flex flex-col h-screen overflow-hidden">
+      <div className="flex-1 flex flex-col h-screen overflow-y-auto relative">
         <Navbar />
 
-        <main className="flex-1 overflow-y-auto relative">
+        <main className="flex-1 relative">
           <Outlet />
         </main>
       </div>
@@ -35,28 +36,38 @@ const RootRedirect = () => {
   return isAuthenticated ? <Navigate to="/workspaces" replace /> : <Navigate to="/auth" replace />
 }
 
+const router = createBrowserRouter([
+  {
+    element: (
+      <WorkspaceProvider>
+        <Outlet />
+      </WorkspaceProvider>
+    ),
+    children: [
+      { path: "/", element: <RootRedirect /> },
+      { path: "/auth", element: <Auth /> },
+      { path: "/terms", element: <Terms /> },
+      {
+        element: <MainLayout />,
+        children: [
+          { path: "/profile", element: <Profile /> },
+          { path: "/workspaces", element: <Workspaces /> },
+          { path: "/workspaces/create", element: <CreateWorkspace /> },
+          { path: "/workspaces/:id", element: <WorkspaceDetail /> },
+          { path: "/workspaces/:id/edit", element: <EditWorkspace /> },
+          { path: "/clients", element: <Clients /> },
+          { path: "/projects", element: <Projects /> },
+        ],
+      },
+    ],
+  },
+]);
+
 function App() {
   return (
     <ThemeProvider>
       <LanguageProvider>
-        <Router>
+        <RouterProvider router={router} />
-          <WorkspaceProvider>
-            <Routes>
-              <Route path="/" element={<RootRedirect />} />
-              <Route path="/auth" element={<Auth />} />
-              <Route path="/terms" element={<Terms />} />
-              
-              <Route element={<MainLayout />}>
-                <Route path="/profile" element={<Profile />} />
-                <Route path="/workspaces" element={<Workspaces />} />
-                <Route path="/workspaces/create" element={<CreateWorkspace />} />
-                <Route path="/workspaces/:id" element={<WorkspaceDetail />} />
-                <Route path="/workspaces/:id/edit" element={<EditWorkspace />} />
-                <Route path="/clients" element={<Clients />} />
-              </Route>
-            </Routes>
-          </WorkspaceProvider>
-        </Router>
         <Toaster />
       </LanguageProvider>
     </ThemeProvider>

src/api/projects.ts

@@ -0,0 +1,97 @@
+import { authFetch } from "./client";
+
+export interface ProjectClient {
+  id: string;
+  name: string;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string;
+  color: string;
+  is_archived: boolean;
+  workspace: string;
+  client: ProjectClient | null;
+}
+
+export interface ProjectPayload {
+  id: string;
+  name: string;
+  description: string;
+  color: string;
+  is_archived: boolean;
+  workspace: string;
+  client: string | null;
+}
+
+export const getProjects = async (
+  workspaceId: string,
+  params: { limit?: number; offset?: number; search?: string; client?: string; is_archived?: boolean, ordering?: string } = {}
+) => {
+  const queryParams = new URLSearchParams({ workspace: workspaceId });
+
+  if (params.limit !== undefined) queryParams.append("limit", params.limit.toString());
+  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);
+  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();
+};
+
+export const createProject = async (data: Partial<ProjectPayload> & { workspace: string; name: string }) => {
+  const response = await authFetch("/api/projects/", {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to create project");
+  }
+  return response.json();
+};
+
+export const updateProject = async (id: string, data: Partial<ProjectPayload>) => {
+  const response = await authFetch(`/api/projects/${id}/`, {
+    method: "PATCH",
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to update project");
+  }
+  return response.json();
+};
+
+export const deleteProject = async (id: string) => {
+  const response = await authFetch(`/api/projects/${id}/`, {
+    method: "DELETE",
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || "Failed to delete project");
+  }
+  
+  if (response.status === 204) return { success: true };
+  return response.json().catch(() => ({ success: true }));
+};
+
+export const toggleArchiveProject = async (id: string) => {
+  const response = await authFetch(`/api/projects/${id}/archive/`, {
+    method: "POST",
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(errorData?.detail || errorData?.message || `Failed to archive project`);
+  }
+  return response.json();
+};

src/components/projects/ProjectCreateModal.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "../../hooks/useTranslation";
+import { Modal } from "../Modal";
+import { createProject } from "../../api/projects";
+import { getClients } from "../../api/clients";
+import { useWorkspace } from "../../context/WorkspaceContext";
+import { Select } from "../ui/Select";
+import { Input } from "../ui/input";
+
+interface ProjectCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen, onClose }) => {
+  const { t } = useTranslation();
+  const { activeWorkspace } = useWorkspace();
+  const [loading, setLoading] = useState(false);
+  const [clients, setClients] = useState<any[]>([]);
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    color: "#3B82F6",
+    client: "",
+  });
+
+  useEffect(() => {
+    if (isOpen && activeWorkspace) {
+      getClients(activeWorkspace.id)
+        .then((res: any) => setClients(res.results || res))
+        .catch(console.error);
+    }
+  }, [isOpen, activeWorkspace]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!activeWorkspace || !formData.name) return;
+
+    setLoading(true);
+    try {
+      const newProject = await createProject({
+        workspace: activeWorkspace.id,
+        name: formData.name,
+        description: formData.description,
+        color: formData.color,
+        client: formData.client || null,
+      });
+
+      window.dispatchEvent(new CustomEvent("project_created", { detail: newProject }));
+      onClose();
+      setFormData({ name: "", description: "", color: "#3B82F6", client: "" });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const footer = (
+    <>
+      <button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700">
+        {t.actions?.cancel || "Cancel"}
+      </button>
+      <button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
+        {loading ? "..." : t.projects.create_project}
+      </button>
+    </>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t.projects.create_project} footer={footer}>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_name}</label>
+          <Input
+            type="text"
+            required
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
+          <Select
+            value={formData.client}
+            onChange={(val) => setFormData({ ...formData, client: val })}
+            options={[
+              { value: "", label: t.projects.no_client },
+              ...clients.map(c => ({ value: c.id, label: c.name }))
+            ]}
+            className="w-full"
+            buttonClassName="w-full"
+          />
+        </div>
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_color}</label>
+          <Input
+            type="color"
+            value={formData.color}
+            onChange={(e) => setFormData({ ...formData, color: e.target.value })}
+            className="w-14 h-10 p-1 border rounded-lg cursor-pointer dark:bg-slate-800 dark:border-slate-700"
+          />
+        </div>
+      </form>
+    </Modal>
+  );
+};

src/components/projects/ProjectEditModal.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "../../hooks/useTranslation";
+import { Modal } from "../Modal";
+import { updateProject, toggleArchiveProject } from "../../api/projects";
+import { getClients } from "../../api/clients";
+import { useWorkspace } from "../../context/WorkspaceContext";
+import { Archive, RefreshCcw } from "lucide-react";
+import { Select } from "../ui/Select";
+import { Input } from "../ui/input";
+
+interface ProjectEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  project: any;
+}
+
+export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onClose, project }) => {
+  const { t } = useTranslation();
+  const { activeWorkspace } = useWorkspace();
+  const [loading, setLoading] = useState(false);
+  const [clients, setClients] = useState<any[]>([]);
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    color: "#3B82F6",
+    client: "",
+  });
+
+  useEffect(() => {
+    if (isOpen && activeWorkspace) {
+      getClients(activeWorkspace.id).then((res: any) => setClients(res.results || res));
+    }
+  }, [isOpen, activeWorkspace]);
+
+  useEffect(() => {
+    if (project) {
+      setFormData({
+        name: project.name || "",
+        description: project.description || "",
+        color: project.color || "#3B82F6",
+        client: project.client ? project.client.id : "",
+      });
+    }
+  }, [project]);
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if (!project || !formData.name) return;
+
+    setLoading(true);
+    try {
+      const updated = await updateProject(project.id, {
+        name: formData.name,
+        description: formData.description,
+        color: formData.color,
+        client: formData.client || null,
+      });
+
+      window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
+      onClose();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleArchiveToggle = async () => {
+    if (!project) return;
+    setLoading(true);
+    try {
+      const updated = await toggleArchiveProject(project.id);
+      window.dispatchEvent(new CustomEvent("project_updated", { detail: updated }));
+      onClose();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const footer = (
+    <div className="flex justify-between w-full">
+      <button
+        onClick={handleArchiveToggle}
+        type="button"
+        disabled={loading}
+        className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border ${
+          project?.is_archived 
+            ? "text-green-600 border-green-600 hover:bg-green-50" 
+            : "text-amber-600 border-amber-600 hover:bg-amber-50"
+        }`}
+      >
+        {project?.is_archived ? <RefreshCcw size={16} /> : <Archive size={16} />}
+        {project?.is_archived ? t.projects.restore : t.projects.archive}
+      </button>
+      
+      <div className="flex gap-2">
+        <button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600">
+          {t.actions?.cancel || "Cancel"}
+        </button>
+        <button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
+          {loading ? "..." : t.save || "Save"}
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={t.projects.edit_project} footer={footer}>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_name}</label>
+          <Input type="text" required value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="w-full px-3 py-2 border rounded-lg dark:bg-slate-800 dark:border-slate-700 outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.select_client}</label>
+          <Select
+            value={formData.client}
+            onChange={(val) => setFormData({ ...formData, client: val })}
+            options={[
+              { value: "", label: t.projects.no_client },
+              ...clients.map(c => ({ value: c.id, label: c.name }))
+            ]}
+            className="w-full"
+            buttonClassName="w-full"
+          />
+
+        </div>
+        <div>
+          <label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{t.projects.project_color}</label>
+          <Input type="color" value={formData.color} onChange={(e) => setFormData({ ...formData, color: e.target.value })} className="w-14 h-10 p-1 border rounded-lg cursor-pointer dark:bg-slate-800 dark:border-slate-700" />
+        </div>
+      </form>
+    </Modal>
+  );
+};

src/locales/en.ts

@@ -4,10 +4,20 @@ export const en = {
   logoutToast: "Successfully logged out!",
   confirmLogoutTitle: "Confirm Logout",
   confirmLogoutMessage: "Are you sure you want to log out of your account?",
+  confirmLeave: "You have unsaved changes. Are you sure you want to leave?",
   cancel: "Cancel",
+  save: "Save",
   lightMode: "Light Mode",
   darkMode: "Dark Mode",
 
+  actions: {
+    create: "Create",
+    view: "View",
+    edit: "Edit",
+    delete: "Delete",
+    cancel: "Cancel",
+  },
+
   login: {
     welcome: (title: string = "Qlockifiy") => `Welcome to ${title}`,
     enterPassword: "Enter your password",
@@ -132,9 +142,6 @@ export const en = {
     deleteError: "Error deleting workspace",
     subtitle: "Manage your workspaces",
     noDescription: "No description",
-    view: "View",
-    edit: "Edit",
-    delete: "Delete",
     emptyState: "You are not a member of any workspace.",
     createTitle: "Create Workspace",
     editTitle: "Edit Workspace",
@@ -172,9 +179,9 @@ export const en = {
     confirmDeleteTitle: "Remove Member",
     confirmDeleteMessage: "Are you sure you want to remove this member from the workspace?",
     successCreate: "Workspace created successfully.",
-    errorCreate: "Failed to create workspace.",
     toast: {
       successCreate: "Workspace created successfully.",
+      errorCreate: "Failed to create workspace.",
       successUpdate: "Workspace updated successfully.",
       errorUpdate: "Failed to update workspace.",
       successAdd: "Member added successfully.",
@@ -186,6 +193,7 @@ export const en = {
       errorLoad: "Failed to load workspace data.",
       cannotAddSelf: "You are automatically the owner.",
     },
+    onlyNumbersAllowed: "Only numbers are allowed for mobile number.",
   },
 
   clients: {
@@ -231,7 +239,35 @@ export const en = {
   sidebar: {
     workspaces: 'Workspaces',
     clients: 'Clients',
+    projects: "Projects",
     expand: 'Expand',
     collapse: 'Collapse',
   },
+
+  ordering: {
+    createdAtDesc: "Newest First",
+    createdAt: "Olders First",
+    updatedAtDesc: "Recently Updated",
+    name: "Name (A-Z)",
+    nameDesc: "Name (Z-A)",
+  },
+
+  projects: {
+    title: "Projects",
+    description: (workspaceName: string) => `Manage projects for ${workspaceName}`,
+    active: "Active Projects",
+    archived: "Archived Projects",
+    createNew: "Create New",
+    searchPlaceholder: "Search projects...",
+    loading: "Loading...",
+    client: "Client",
+    noClient: "No client",
+    emptyState: "No projects found",
+    deleteTitle: "Delete Project",
+    deleteWarning: "To confirm deletion, please type the project name:",
+    deleteSuccess: "Project deleted successfully",
+    deleteError: "Failed to delete project",
+    cancel: "Cancel",
+  },
+
 }

src/locales/fa.ts

@@ -4,10 +4,20 @@ export const fa = {
   logoutToast: "با موفقیت خارج شدید!",
   confirmLogoutTitle: "تایید خروج",
   confirmLogoutMessage: "آیا مطمئن هستید که می‌خواهید از حساب خود خارج شوید؟",
+  confirmLeave: "تغییرات ذخیره نشده‌ای دارید. آیا مطمئن هستید که می‌خواهید خارج شوید؟",
   cancel: "لغو",
+  save: "ذخیره",
   lightMode: "حالت روشن",
   darkMode: "حالت تاریک",
 
+  actions: {
+    create: "ایجاد",
+    view: "مشاهده",
+    edit: "ویرایش",
+    delete: "حذف",
+    cancel: "لغو",
+  },
+
   login: {
     welcome: (title: string = "Qlockifiy") => `به ${title} خوش آمدید`,
     enterPassword: "رمز عبور خود را وارد کنید",
@@ -111,10 +121,10 @@ export const fa = {
 
   workspace: {
     title: "مدیریت ورک‌اسپیس‌ها",
-    createNew: "ایجاد فضای کاری جدید",
+    createNew: "ایجاد ورک‌اسپیس جدید",
     manage: "مدیریت ورک‌اسپیس‌ها",
-    nameLabel: "نام فضای کاری",
+    nameLabel: "عنوان",
-    namePlaceholder: "نام فضای کاری را وارد کنید",
+    namePlaceholder: "نام ورک‌اسپیس را وارد کنید",
     descriptionLabel: "توضیحات",
     descriptionPlaceholder: "توضیحات (اختیاری)",
     searchMemberPlaceholder: "جستجو با موبایل دقیق (مثلا 09123456789)",
@@ -129,17 +139,14 @@ export const fa = {
     submit: "ایجاد",
     cancel: "لغو",
     loading: "در حال بارگذاری...",
-    confirmDelete: "آیا از حذف این فضای کاری اطمینان دارید؟",
+    confirmDelete: "آیا از حذف این ورک‌اسپیس اطمینان دارید؟",
-    deleteError: "خطا در حذف فضای کاری",
+    deleteError: "خطا در حذف ورک‌اسپیس",
     subtitle: "ورک‌اسپیس‌های خود را مدیریت کنید",
     noDescription: "بدون توضیحات",
-    view: "مشاهده",
+    emptyState: "شما در هیچ ورک‌اسپیس عضو نیستید.",
-    edit: "ویرایش",
+    createTitle: "ایجاد ورک‌اسپیس",
-    delete: "حذف",
+    editTitle: "ویرایش ورک‌اسپیس",
-    emptyState: "شما در هیچ فضای کاری عضو نیستید.",
+    detailTitle: "جزئیات ورک‌اسپیس",
-    createTitle: "ایجاد فضای کاری",
-    editTitle: "ویرایش فضای کاری",
-    detailTitle: "جزئیات فضای کاری",
     save: "ذخیره",
     create: "ایجاد",
     back: "بازگشت به ورک‌اسپیس‌ها",
@@ -150,43 +157,40 @@ export const fa = {
       member: "عضو",
       guest: "مهمان",
     },
-    createdSuccess: "فضای کاری با موفقیت ایجاد شد",
+    createdSuccess: "ورک‌اسپیس با موفقیت ایجاد شد",
-    updatedSuccess: "فضای کاری با موفقیت ویرایش شد",
+    updatedSuccess: "ورک‌اسپیس با موفقیت ویرایش شد",
-    fetchError: "خطا در دریافت اطلاعات فضای کاری",
+    fetchError: "خطا در دریافت اطلاعات ورک‌اسپیس",
     remove: "حذف",
     noUsersFound: "کاربری یافت نشد",
     selectRole: "انتخاب نقش",
     add: "افزودن",
     searchPlaceholder: "جستوجوی ورک‌اسپیس‌ها...",
-    orderByUpdatedDesc: "آخرین ویرایش",
+    deleteSuccess: "ورک‌اسپیس با موفقیت حذف شد",
-    orderByCreatedDesc: "جدیدترین",
+    deleteTitle: "حذف ورک‌اسپیس",
-    orderByCreatedAsc: "قدیمی‌ترین",
+    deleteWarning: "برای تأیید حذف، لطفاً نام ورک‌اسپیس را وارد کنید:",
-    orderByName: "نام (الفبایی)",
-    deleteSuccess: "فضای کاری با موفقیت حذف شد",
-    deleteTitle: "حذف فضای کاری",
-    deleteWarning: "برای تأیید حذف، لطفاً نام فضای کاری را وارد کنید:",
     members: "اعضا",
     searchUser: "جستجوی کاربر با شماره موبایل",
     searching: "در حال جستجو...",
     noMembers: "عضوی یافت نشد.",
     removeMemberTitle: "حذف عضو",
     confirmDeleteTitle: "حذف عضو",
-    confirmDeleteMessage: "آیا مطمئن هستید که می‌خواهید این عضو را از فضای کاری حذف کنید؟",
+    confirmDeleteMessage: "آیا مطمئن هستید که می‌خواهید این عضو را از ورک‌اسپیس حذف کنید؟",
+    successCreate: "ورک‌اسپیس با موفقیت ایجاد شد.",
     toast: {
-      successCreate: "فضای کاری با موفقیت ساخته شد.",
+      successCreate: "ورک‌اسپیس با موفقیت ساخته شد.",
-      successUpdate: "فضای کاری با موفقیت به‌روزرسانی شد.",
+      errorCreate: "ایجاد ورک‌اسپیس ناموفق بود.",
-      errorUpdate: "به‌روزرسانی فضای کاری با خطا مواجه شد.",
+      successUpdate: "ورک‌اسپیس با موفقیت به‌روزرسانی شد.",
-      successAdd: "کاربر جدید با موفقیت به فضای کاری افزوده شد.",
+      errorUpdate: "به‌روزرسانی ورک‌اسپیس با خطا مواجه شد.",
+      successAdd: "کاربر جدید با موفقیت به ورک‌اسپیس افزوده شد.",
       errorAdd: "افزودن کاربر با خطا مواجه شد.",
-      successRemove: "کاربر با موفقیت از فضای کاری حذف شد.",
+      successRemove: "کاربر با موفقیت از ورک‌اسپیس حذف شد.",
       errorRemove: "حذف کاربر با خطا مواجه شد.",
       successRole: "نقش کاربر با موفقیت تغییر کرد.",
       errorRole: "تغییر نقش کاربر با خطا مواجه شد.",
-      errorLoad: "دریافت اطلاعات فضای کاری با خطا مواجه شد.",
+      errorLoad: "دریافت اطلاعات ورک‌اسپیس با خطا مواجه شد.",
       cannotAddSelf: "شما به‌صورت خودکار مالک هستید.",
     },
-    errorCreate: "ایجاد فضای کاری ناموفق بود.",
+    onlyNumbersAllowed: "برای شماره موبایل فقط مجاز به وارد کردن عدد هستید.",
-    successCreate: "فضای کاری با موفقیت ایجاد شد.",
   },
 
   clients: {
@@ -198,7 +202,7 @@ export const fa = {
     noClientsSearch: "لطفاً عبارت جستجو را تغییر دهید.",
     noClientsAdd: "برای شروع اولین مشتری خود را اضافه کنید.",
     addedOn: "تاریخ افزودن",
-    selectWorkspace: "لطفاً ابتدا یک فضای کاری انتخاب کنید.",
+    selectWorkspace: "لطفاً ابتدا یک ورک‌اسپیس انتخاب کنید.",
     modalTitle: "ایجاد مشتری جدید",
     clientName: "نام مشتری",
     clientNamePlaceholder: "مثال: شرکت الف",
@@ -232,7 +236,35 @@ export const fa = {
   sidebar: {
     workspaces: 'ورک‌اسپیس‌ها',
     clients: 'مشتریان',
+    projects: "پروژه‌ها",
     expand: 'باز کردن',
     collapse: 'جمع کردن',
   },
+
+  ordering: {
+    createdAtDesc: "جدیدترین",
+    createdAt: "قدیمی‌ترین",
+    updatedAtDesc: "اخیراً بروزرسانی شده",
+    name: "نام (صعودی)",
+    nameDesc: "نام (نزولی)",
+  },
+
+  projects: {
+    title: "پروژه‌ها",
+    description: (workspaceName: string) => `مدیریت پروژه‌ها برای ${workspaceName}`,
+    active: "پروژه‌های فعال",
+    archived: "پروژه‌های آرشیو شده",
+    createNew: "ایجاد پروژه جدید",
+    searchPlaceholder: "جستجوی پروژه‌ها...",
+    loading: "در حال بارگذاری...",
+    client: "مشتری",
+    noClient: "بدون مشتری",
+    emptyState: "پروژه‌ای یافت نشد",
+    deleteTitle: "حذف پروژه",
+    deleteWarning: "برای تایید حذف، لطفاً نام پروژه را تایپ کنید:",
+    deleteSuccess: "پروژه با موفقیت حذف شد",
+    deleteError: "خطا در حذف پروژه",
+    cancel: "انصراف",
+  },
+
 }

src/pages/Projects.tsx

@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "../hooks/useTranslation";
+import { getProjects, deleteProject, type Project } from "../api/projects";
+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, CardHeader, CardTitle, CardContent } from "../components/ui/card";
+import { Modal } from "../components/Modal";
+import { toast } from "sonner";
+import { Input } from "../components/ui/input";
+
+export const Projects: React.FC = () => {
+  const { t } = useTranslation();
+  const { activeWorkspace } = useWorkspace();
+  
+  const [projects, setProjects] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<any | null>(null);
+
+  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 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();
+    
+    window.addEventListener("project_created", handleCreated);
+    window.addEventListener("project_updated", handleUpdated);
+    
+    return () => {
+      window.removeEventListener("project_created", handleCreated);
+      window.removeEventListener("project_updated", handleUpdated);
+    };
+  }, [activeWorkspace, currentPage, limit, search, isArchived, ordering]);
+
+  const handleDeleteClick = (project: Project) => {
+    setProjectToDelete(project);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteModal.project) return;
+    try {
+      const deletedId = deleteModal.project.id;
+      await deleteProject(deletedId);
+      
+      fetchProjectList();
+
+      window.dispatchEvent(new CustomEvent('project_deleted', { 
+        detail: { id: deletedId } 
+      }));
+
+      toast.success(t.projects?.deleteSuccess || 'Project deleted successfully');
+      setDeleteModal({ isOpen: false, project: null });
+      setDeleteInput('');
+    } catch (error) {
+      toast.error(t.projects?.deleteError || 'Failed to delete project');
+    }
+  };
+
+
+  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">
+          <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>
+          <Button
+            onClick={() => setIsCreateModalOpen(true)}
+            className="gap-2 shadow-sm flex-1 sm:flex-none"
+          >
+            <Plus className="h-5 w-5" />
+            {t.projects?.createNew || 'Create New'}
+          </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">
+          <div className="flex flex-col gap-4 mb-6">
+            {projects.map((project) => (
+              <Card key={project.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
+                <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <CardTitle className="text-lg line-clamp-1">
+                        {project.name}
+                      </CardTitle>
+                    </div>
+                    <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
+                      {project.client ? `${t.projects?.client || "Client"}: ${project.client.name}` : t.projects?.noDescription || 'No description'}
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-2 shrink-0">
+                    <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>
+
+                    <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>
+                </CardContent>
+              </Card>
+            ))}
+
+            {projects.length === 0 && (
+              <div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
+                <p className="text-slate-500 dark:text-slate-400 font-medium">{t.projects?.emptyState || 'No projects found'}</p>
+              </div>
+            )}
+          </div>
+
+          <Pagination
+            currentPage={currentPage}
+            totalCount={totalItems}
+            limit={limit}
+            onPageChange={setCurrentPage}
+            onLimitChange={setLimit}
+            pageSizeOptions={[10, 20, 50]}
+          />
+        </div>
+      )}
+
+      {/* Modals */}
+      {isCreateModalOpen && (
+        <ProjectCreateModal
+          isOpen={isCreateModalOpen}
+          onClose={() => setIsCreateModalOpen(false)}
+        />
+      )}
+      
+      {editingProject && (
+        <ProjectEditModal
+          project={editingProject}
+          isOpen={!!editingProject}
+          onClose={() => setEditingProject(null)}
+        />
+      )}
+
+      {deleteModal.project && (
+        <Modal
+          isOpen={deleteModal.isOpen}
+          onClose={() => {
+            setDeleteModal({ isOpen: false, project: null });
+            setDeleteInput('');
+          }}
+          title={t.projects?.deleteTitle || 'Delete Project'}
+          maxWidth="max-w-md"
+          footer={
+            <>
+              <Button 
+                variant="secondary"
+                onClick={() => { 
+                  setDeleteModal({ isOpen: false, project: null }); 
+                  setDeleteInput(''); 
+                }} 
+                className="rounded-xl font-semibold"
+              >
+                {t.actions?.cancel || 'Cancel'}
+              </Button>
+              <Button 
+                variant="destructive"
+                disabled={deleteInput !== deleteModal.project.name}
+                onClick={confirmDelete} 
+                className="rounded-xl font-semibold"
+              >
+                {t.actions?.delete || 'Delete'}
+              </Button>
+            </>
+          }
+        >
+          <div className="flex flex-col gap-4">
+            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+              {t.projects?.deleteWarning || 'To confirm deletion, please type the project name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.project.name}</strong>
+            </p>
+            
+            <Input
+              type="text"
+              value={deleteInput}
+              onChange={(e) => setDeleteInput(e.target.value)}
+              placeholder={deleteModal.project.name}
+            />
+          </div>
+        </Modal>
+      )}
+
+    </div>
+  );
+
+};