project list

src/config/Pages.ts

@@ -170,5 +170,6 @@ export const Pages = {
     workspace: "/taskmanager/workspace/",
     createWorkspace: "/workspace/create",
     createProject: "/project/create",
+    projectList: "/project/list",
   },
 };

src/langs/fa.json

@@ -987,6 +987,8 @@
     "background": "پس زمینه",
     "background_image": "تصویر پس زمینه",
     "upload_background": "تصویر مورد نظر را دراپ کنید",
-    "select_date": "انتخاب تاریخ"
+    "select_date": "انتخاب تاریخ",
+    "projects": "پروژه‌ها",
+    "delete_project": "پاک کردن"
   }
 }

src/pages/taskmanager/project/List.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import projectsData from "./data/projects.json";
+import ProjectGrid from "./components/ProjectGrid";
+import ProjectListHeader from "./components/ProjectListHeader";
+import WorkspaceInfoBanner from "./components/WorkspaceInfoBanner";
+import type { ProjectItem, WorkspaceInfo } from "./types/ProjectTypes";
+
+const List = () => {
+  const { workspace, projects: initialProjects } = projectsData as {
+    workspace: WorkspaceInfo;
+    projects: ProjectItem[];
+  };
+
+  const [projects, setProjects] = useState<ProjectItem[]>(initialProjects);
+
+  const handleDelete = (id: string) => {
+    setProjects((prev) => prev.filter((project) => project.id !== id));
+  };
+
+  return (
+    <div className="w-full mt-4">
+      <ProjectListHeader title={workspace.name} />
+
+      <WorkspaceInfoBanner description={workspace.description} />
+
+      <ProjectGrid projects={projects} onDelete={handleDelete} />
+    </div>
+  );
+};
+
+export default List;

src/pages/taskmanager/project/components/ProjectCard.tsx

@@ -0,0 +1,48 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import { Pages } from "../../../../config/Pages";
+import type { ProjectItem } from "../types/ProjectTypes";
+import ProjectCardMenu from "./ProjectCardMenu";
+
+type Props = {
+  project: ProjectItem;
+  onDelete: (id: string) => void;
+};
+
+const hexToRgba = (hex: string, alpha: number) => {
+  const normalized = hex.replace("#", "");
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const getCardBackground = (background: string) => {
+  const color = /^#[0-9A-Fa-f]{6}$/i.test(background) ? background : (background.match(/#[0-9A-Fa-f]{6}/i)?.[0] ?? "#A8E6CF");
+
+  return `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`;
+};
+
+const ProjectCard: FC<Props> = ({ project, onDelete }) => {
+  const handleEdit = () => {
+    // TODO: navigate to edit page when available
+  };
+
+  return (
+    <div className="bg-white rounded-[20px] overflow-hidden shadow-sm border border-border/40 p-3">
+      <Link to={Pages.taskmanager.workspace + project.id}>
+        <div className="h-[84px] w-full rounded-[16px]" style={{ background: getCardBackground(project.background) }} />
+      </Link>
+
+      <div className="flex items-center justify-between mt-3.5">
+        <Link to={Pages.taskmanager.workspace + project.id} className="text-sm font-medium text-black hover:opacity-70 transition-opacity">
+          {project.name}
+        </Link>
+
+        <ProjectCardMenu onEdit={handleEdit} onDelete={() => onDelete(project.id)} />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/pages/taskmanager/project/components/ProjectCardMenu.tsx

@@ -0,0 +1,43 @@
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { More } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+  onEdit: () => void;
+  onDelete: () => void;
+};
+
+const ProjectCardMenu: FC<Props> = ({ onEdit, onDelete }) => {
+  const { t } = useTranslation("global");
+
+  return (
+    <Popover className="relative">
+      <PopoverButton className="flex items-center justify-center size-8 rounded-lg hover:bg-[#F4F5F9] transition-colors outline-none">
+        <More size={20} color="#8C90A3" />
+      </PopoverButton>
+
+      <PopoverPanel
+        anchor="bottom start"
+        className="z-20 mt-1 min-w-[120px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
+      >
+        <button
+          type="button"
+          onClick={onEdit}
+          className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
+        >
+          {t("edit")}
+        </button>
+        <button
+          type="button"
+          onClick={onDelete}
+          className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
+        >
+          {t("taskmanager.delete_project")}
+        </button>
+      </PopoverPanel>
+    </Popover>
+  );
+};
+
+export default ProjectCardMenu;

src/pages/taskmanager/project/components/ProjectGrid.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import type { ProjectItem } from "../types/ProjectTypes";
+import ProjectCard from "./ProjectCard";
+
+type Props = {
+  projects: ProjectItem[];
+  onDelete: (id: string) => void;
+};
+
+const ProjectGrid: FC<Props> = ({ projects, onDelete }) => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="mt-6">
+      <h2 className="text-sm font-bold mb-4">{t("taskmanager.projects")}</h2>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
+        {projects.map((project) => (
+          <ProjectCard key={project.id} project={project} onDelete={onDelete} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectGrid;

src/pages/taskmanager/project/components/ProjectListHeader.tsx

@@ -0,0 +1,37 @@
+import { Add, Setting2 } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import Button from "../../../../components/Button";
+import { Pages } from "../../../../config/Pages";
+
+type Props = {
+  title: string;
+  onSettingsClick?: () => void;
+};
+
+const ProjectListHeader: FC<Props> = ({ title, onSettingsClick }) => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="flex w-full justify-between items-center">
+      <h1>{title}</h1>
+
+      <div className="flex items-center gap-3">
+        <Button onClick={onSettingsClick} className="flex items-center gap-2 bg-[#C3C7DD] text-black whitespace-nowrap px-4">
+          <Setting2 size={18} color="black" />
+          <span>{t("sidebar.setting")}</span>
+        </Button>
+
+        <Link to={Pages.taskmanager.createProject}>
+          <Button onClick={onSettingsClick} className="flex items-center gap-2 whitespace-nowrap px-4">
+            <Add size={18} color="white" />
+            <span>{t("taskmanager.new_project")}</span>
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectListHeader;

src/pages/taskmanager/project/components/WorkspaceInfoBanner.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+type Props = {
+  description: string;
+};
+
+const WorkspaceInfoBanner: FC<Props> = ({ description }) => {
+  return <div className="mt-6 bg-white rounded-3xl px-6 py-5 text-sm tracking-widest text-[#6C7080] leading-7">{description}</div>;
+};
+
+export default WorkspaceInfoBanner;

src/pages/taskmanager/project/data/projects.json

@@ -0,0 +1,23 @@
+{
+  "workspace": {
+    "name": "فضای کار طراحی",
+    "description": "در این فضا می‌توانید پروژه‌های طراحی خود را مدیریت و سازماندهی کنید. از مرحله ایده تا پیاده‌سازی نهایی، تمام پروژه‌هایتان در یک جا قابل دسترسی و پیگیری هستند."
+  },
+  "projects": [
+    {
+      "id": "1",
+      "name": "طراحی Dpage",
+      "background": "linear-gradient(135deg, #0052d4, #4364f7)"
+    },
+    {
+      "id": "2",
+      "name": "طراحی Dmenu",
+      "background": "linear-gradient(135deg, #2c3e50, #1a1a2e)"
+    },
+    {
+      "id": "3",
+      "name": "طراحی Dmail",
+      "background": "linear-gradient(135deg, #ff00cc, #c71585)"
+    }
+  ]
+}

src/pages/taskmanager/project/types/ProjectTypes.ts

@@ -0,0 +1,10 @@
+export type ProjectItem = {
+  id: string;
+  name: string;
+  background: string;
+};
+
+export type WorkspaceInfo = {
+  name: string;
+  description: string;
+};

src/router/Main.tsx

@@ -79,6 +79,7 @@ import SupportList from "../pages/support/List";
 import PlanUsers from "../pages/support/PlanUsers";
 import UpdateSupport from "../pages/support/Update";
 import CreateProject from "../pages/taskmanager/project/Create.tsx";
+import ProjectList from "../pages/taskmanager/project/List.tsx";
 import Workspace from "../pages/taskmanager/workspace.tsx";
 import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
 import TicketCategory from "../pages/ticket/Category";
@@ -211,6 +212,7 @@ const MainRouter: FC = () => {
               <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
               <Route path={Pages.taskmanager.createWorkspace} element={<CreateWorkspace />} />
               <Route path={Pages.taskmanager.createProject} element={<CreateProject />} />
+              <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />
             </Routes>
           </div>
           <div className="h-20 shrink-0 xl:hidden" />