workspace create

.cursor/skills/danak-admin/SKILL.md

@@ -0,0 +1,109 @@
+---
+name: danak-admin
+description: Documents danak-admin React admin panel conventions — page structure, routing, TanStack Query hooks, axios services, sidebar, and Persian i18n. Use when adding pages or features, wiring API calls, updating navigation, or working in this repository.
+---
+
+# Danak Admin
+
+Persian (RTL) admin panel: React 19, Vite, TypeScript, React Router 7, TanStack Query, Formik/Yup, Tailwind, iconsax-react.
+
+## Stack
+
+| Layer | Location / tool |
+|-------|-----------------|
+| Routes (paths) | `src/config/Pages.ts` |
+| Route components | `src/router/Main.tsx` |
+| Auth routes | `src/router/Auth.tsx` |
+| HTTP client | `src/config/axios.ts` — `import axios from "../../../config/axios"` |
+| Shared UI | `src/components/` |
+| Layout | `src/shared/` (Header, SideBar, Footer) |
+| i18n | `src/langs/fa.json`, namespace `global`, `useTranslation('global')` |
+| Env | `VITE_BASE_URL`, `VITE_TOKEN_NAME`, `VITE_REFRESH_TOKEN_NAME` |
+
+## Feature folder layout
+
+Each domain lives under `src/pages/{feature}/`:
+
+```
+{feature}/
+├── List.tsx              # index table view
+├── Create.tsx            # create form
+├── Update.tsx            # edit form (uses :id param)
+├── hooks/use{Feature}Data.ts
+├── service/{Feature}Service.ts
+├── types/{Feature}Types.ts
+└── components/           # feature-specific UI (Delete, filters, etc.)
+```
+
+Mirror an existing feature (e.g. `customer/`, `ads/`) before inventing new patterns.
+
+## Data layer
+
+**Service** — plain async functions, one API call each:
+
+```typescript
+import axios from "../../../config/axios";
+import { CreateCustomerType } from "../types/CustomerTypes";
+
+export const getCustomers = async (page: number) => {
+  const { data } = await axios.get(`/users/customers?page=${page}&paginate=1`);
+  return data;
+};
+
+export const createCustomer = async (params: CreateCustomerType) => {
+  const { data } = await axios.post(`/users/customers`, params);
+  return data;
+};
+```
+
+**Hooks** — TanStack Query wrappers in `hooks/use{Feature}Data.ts`:
+
+- Lists: `useQuery({ queryKey: ["customers", page], queryFn: () => api.getCustomers(page) })`
+- Detail: add `enabled: !!id`
+- Mutations: `useMutation` + `queryClient.invalidateQueries({ queryKey: ["customers"] })`
+- Export hooks as `useGetX`, `useCreateX`, `useUpdateX`, `useDeleteX`
+
+**Types** — `{Feature}ItemType`, `Create{Feature}Type` in `types/`.
+
+## Page patterns
+
+**List** — header + optional filters + `PageLoading` while pending + `<table>` with `Td` + `Pagination`. Link actions via `Pages.{feature}.*`.
+
+**Create / Update** — Formik + Yup validation, `toast.success(t('success'))` on success, `toast.error(error.response?.data?.error.message[0])` on error (`ErrorType` from `src/helpers/types.ts`). Navigate back to list with `useNavigate()` + `Pages.*`.
+
+**Delete** — small component using `ModalConfrim` + mutation hook; call `refetch()` or rely on query invalidation.
+
+## Adding a feature
+
+Follow the checklist in [add-feature.md](add-feature.md). Minimum steps:
+
+1. Add paths to `src/config/Pages.ts`
+2. Create page files under `src/pages/{feature}/`
+3. Register `<Route>` entries in `src/router/Main.tsx` (static imports, no lazy loading)
+4. Add sidebar entry in `src/shared/SideBar.tsx` if user-facing
+5. Add translation keys to `src/langs/fa.json`
+
+Dynamic routes use string concat: `Pages.customer.update + ":id"`.
+
+## Sidebar & submenu
+
+- Main items: `SideBarItem` in `SideBar.tsx` with `link`, `isActive`, `activeName`
+- Features with sub-nav: add segment to `SideBarItemHasSubMenu` in `src/config/SideBarSubMenu.ts`, create `{Feature}SubMenu.tsx` in `src/shared/components/`, render it in the `subMenuName === "..."` block at bottom of `SideBar.tsx`
+- Submenu items use `SubMenuItem` with `Pages.*` links
+- `subMenuName` is derived from first URL segment (`location.pathname.split("/")[1]`)
+
+## Conventions
+
+- Components: `const MyPage: FC = () => { ... }; export default MyPage`
+- Styling: Tailwind utility classes; `clx()` from `src/helpers/utils` for conditional classes
+- Icons: `iconsax-react` (Outline/Bold variants, `#8C90A3` inactive / `black` active)
+- Do not add lazy-loaded routes — project uses direct imports in `Main.tsx`
+- Keep API paths relative to `VITE_BASE_URL`; auth token is attached automatically by axios interceptor
+- Prefer reusing `Button`, `Input`, `Select`, `Textarea`, `Pagination`, `PageLoading`, `ModalConfrim` from `src/components/`
+
+## Do not
+
+- Commit `.env` or secrets
+- Introduce new state libraries (Zustand is only used in `sharedStore` for layout)
+- Add English-only UI strings — add keys to `fa.json`
+- Change axios/auth/token refresh logic unless explicitly requested

.cursor/skills/danak-admin/add-feature.md

@@ -0,0 +1,83 @@
+# Add Feature Checklist
+
+Copy and track when adding a new admin section (e.g. `coupons`):
+
+```
+- [ ] Pages.ts paths
+- [ ] types/{Feature}Types.ts
+- [ ] service/{Feature}Service.ts
+- [ ] hooks/use{Feature}Data.ts
+- [ ] List.tsx (+ Create/Update if CRUD)
+- [ ] components/ (Delete, filters, etc.)
+- [ ] Main.tsx routes + imports
+- [ ] SideBar.tsx (+ SubMenu if multi-page)
+- [ ] fa.json translations
+```
+
+## 1. Pages.ts
+
+```typescript
+coupons: {
+  list: "/coupons/list",
+  create: "/coupons/create",
+  detail: "/coupons/detail/",
+},
+```
+
+Use kebab-case URL segments consistent with existing routes.
+
+## 2. Service + hooks + types
+
+Copy structure from `src/pages/customer/` or `src/pages/ads/`. Adjust API paths to match backend.
+
+## 3. Main.tsx
+
+Add import at top, then route(s):
+
+```tsx
+import CouponsList from "../pages/coupons/List";
+// ...
+<Route path={Pages.coupons.list} element={<CouponsList />} />
+<Route path={Pages.coupons.create} element={<CreateCoupon />} />
+<Route path={Pages.coupons.detail + ":id"} element={<UpdateCoupon />} />
+```
+
+## 4. Sidebar (optional)
+
+**Single-page feature** — add `SideBarItem`:
+
+```tsx
+<SideBarItem
+  icon={<TicketDiscount variant={isActive("coupons") ? "Bold" : "Outline"} color={isActive("coupons") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
+  title={t("sidebar.coupons")}
+  isActive={isActive("coupons")}
+  link={Pages.coupons.list}
+  activeName="coupons"
+/>
+```
+
+**Multi-page feature** — also:
+
+1. Add `"coupons"` to `SideBarItemHasSubMenu` in `src/config/SideBarSubMenu.ts`
+2. Create `src/shared/components/CouponsSubMenu.tsx` (copy `CustomerSubMenu.tsx`)
+3. Import and add branch in `SideBar.tsx`: `subMenuName === "coupons" ? <CouponsSubMenu /> : ...`
+4. Point main sidebar link to list path; first URL segment must match `activeName` / submenu key
+
+## 5. Translations
+
+Add keys under logical groups in `src/langs/fa.json`:
+
+```json
+"sidebar": { "coupons": "کوپن‌ها" },
+"submenu": { "coupon_list": "لیست کوپن‌ها" },
+"coupon": { "coupon_list": "لیست کوپن‌ها", "add_coupon": "افزودن کوپن" }
+```
+
+Use `t('coupon.add_coupon')` in components.
+
+## 6. Verify
+
+- `npm run build` passes
+- List loads, create/update navigate correctly
+- Sidebar highlights on correct routes
+- Mutation invalidates list query cache

src/config/SideBarSubMenu.ts

@@ -8,4 +8,5 @@ export const SideBarItemHasSubMenu = [
   "blog",
   "support",
   "accessLogs",
+  "taskmanager",
 ];

src/langs/fa.json

@@ -143,7 +143,11 @@
     "guide": "راهنمای سرویس",
     "access_logs_list": "لیست لاگ‌ها",
     "access_logs_stats": "آمار لاگ‌ها",
-    "access_logs_errors": "لاگ‌های خطا"
+    "access_logs_errors": "لاگ‌های خطا",
+    "taskmanager_workspace": "فضای کاری",
+    "taskmanager_create_workspace": "ساخت فضای کاری جدید",
+    "taskmanager_project_list": "لیست پروژه‌ها",
+    "taskmanager_create_project": "افزودن پروژه"
   },
   "guide": {
     "list_guide": "لیست راهنمای سرویس",
@@ -972,6 +976,7 @@
     "submit_workspace": "ثبت فضای کاری",
     "workspacename": "نام",
     "workspacetype": "نوع",
+    "workspace_info": "اطلاعات",
     "workspace_description": "توضیحات",
     "workspace_status": "وضعیت فضای کار",
     "choose_color": "انتخاب رنگ دلخواه",

src/pages/taskmanager/workspace/Create.tsx

@@ -1,20 +1,71 @@
+import { FC, useState } from "react";
 import { TickCircle } from "iconsax-react";
+import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
 import Button from "../../../components/Button";
 import Input from "../../../components/Input";
-import Select from "../../../components/Select";
 import Textarea from "../../../components/Textarea";
-import CreateWorkspaceSidebar from "./components/CreateWorkspaceSidebar";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useCreateWorkspace } from "./hooks/useWorkspaceData";
+import { CreateWorkspaceType } from "./types/WorkspaceTypes";
+import CreateWorkspaceSidebar, {
+  SelectedUser,
+} from "./components/CreateWorkspaceSidebar";
 
-const CreateWorkspace = () => {
+const CreateWorkspace: FC = () => {
   const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const createWorkspace = useCreateWorkspace();
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+
+  const handleCreateWorkspace = (values: CreateWorkspaceType) => {
+    createWorkspace.mutate(values, {
+      onSuccess: () => {
+        toast.success(t("success"));
+        navigate(Pages.taskmanager.workspace + "dpage");
+      },
+      onError: (error: ErrorType) => {
+        toast.error(error.response?.data?.error.message[0]);
+      },
+    });
+  };
+
+  const formik = useFormik<Pick<CreateWorkspaceType, "name" | "description">>({
+    initialValues: {
+      name: "",
+      description: "",
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required(t("errors.required")),
+      description: Yup.string(),
+    }),
+    onSubmit: (values) => {
+      handleCreateWorkspace({
+        ...values,
+        color: selectedColor,
+        isActive,
+        userIds: selectedUsers.map((user) => user.id),
+      });
+    },
+  });
 
   return (
     <div className="w-full mt-4">
       <div className="flex w-full justify-between items-center">
         <div>{t("taskmanager.new_workspace")}</div>
         <div>
-          <Button className="px-5" isLoading={false}>
+          <Button
+            className="px-5"
+            isLoading={createWorkspace.isPending}
+            onClick={() => formik.handleSubmit()}
+          >
             <div className="flex gap-2">
               <TickCircle className="size-5" color="#fff" />
               <div>{t("taskmanager.submit_workspace")}</div>
@@ -26,20 +77,42 @@ const CreateWorkspace = () => {
       <div className="flex gap-6">
         <div className="flex-1">
           <div className="flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
-            <div className="text-sm font-bold">اطلاعات</div>
+            <div className="text-sm font-bold">{t("taskmanager.workspace_info")}</div>
 
-            <div className="mt-8 rowTwoInput">
-              <Input label={t("taskmanager.workspacename")} />
-
-              <Select label={t("taskmanager.workspacetype")} items={[]} />
-            </div>
             <div className="mt-8">
-              <Textarea label={t("taskmanager.workspace_description")} />
+              <Input
+                label={t("taskmanager.workspacename")}
+                {...formik.getFieldProps("name")}
+                error_text={
+                  formik.touched.name && formik.errors.name
+                    ? formik.errors.name
+                    : ""
+                }
+              />
+            </div>
+
+            <div className="mt-8">
+              <Textarea
+                label={t("taskmanager.workspace_description")}
+                {...formik.getFieldProps("description")}
+                error_text={
+                  formik.touched.description && formik.errors.description
+                    ? formik.errors.description
+                    : ""
+                }
+              />
             </div>
           </div>
         </div>
 
-        <CreateWorkspaceSidebar />
+        <CreateWorkspaceSidebar
+          isActive={isActive}
+          onIsActiveChange={setIsActive}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
+          selectedUsers={selectedUsers}
+          onSelectedUsersChange={setSelectedUsers}
+        />
       </div>
     </div>
   );

src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx

@@ -7,18 +7,30 @@ import { useGetUsers } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
 import WorkspaceColorPicker from "./WorkspaceColorPicker";
 
-type SelectedUser = {
+export type SelectedUser = {
   id: string;
   name: string;
 };
 
-const CreateWorkspaceSidebar: FC = () => {
+type Props = {
+  isActive: boolean;
+  onIsActiveChange: (value: boolean) => void;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+  selectedUsers: SelectedUser[];
+  onSelectedUsersChange: (users: SelectedUser[]) => void;
+};
+
+const CreateWorkspaceSidebar: FC<Props> = ({
+  isActive,
+  onIsActiveChange,
+  selectedColor,
+  onColorChange,
+  selectedUsers,
+  onSelectedUsersChange,
+}) => {
   const { t } = useTranslation("global");
   const getUsers = useGetUsers("");
-
-  const [isActive, setIsActive] = useState(true);
-  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
-  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
   const [userSelectValue, setUserSelectValue] = useState("");
 
   const userItems =
@@ -41,8 +53,8 @@ const CreateWorkspaceSidebar: FC = () => {
     );
 
     if (user) {
-      setSelectedUsers((prev) => [
+      onSelectedUsersChange([
-        ...prev,
+        ...selectedUsers,
         { id: user.id, name: `${user.firstName} ${user.lastName}` },
       ]);
     }
@@ -51,7 +63,7 @@ const CreateWorkspaceSidebar: FC = () => {
   };
 
   const handleRemoveUser = (id: string) => {
-    setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
+    onSelectedUsersChange(selectedUsers.filter((user) => user.id !== id));
   };
 
   return (
@@ -60,7 +72,7 @@ const CreateWorkspaceSidebar: FC = () => {
         <div>{t("taskmanager.workspace_status")}</div>
         <div className="flex gap-2 text-xs items-center text-description">
           <div>{isActive ? t("slider.active") : t("slider.inactive")}</div>
-          <SwitchComponent active={isActive} onChange={setIsActive} />
+          <SwitchComponent active={isActive} onChange={onIsActiveChange} />
         </div>
       </div>
 
@@ -69,7 +81,7 @@ const CreateWorkspaceSidebar: FC = () => {
         <div className="mt-3">
           <WorkspaceColorPicker
             selectedColor={selectedColor}
-            onChange={setSelectedColor}
+            onChange={onColorChange}
           />
         </div>
       </div>

src/pages/taskmanager/workspace/hooks/useWorkspaceData.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/WorkspaceService";
+import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+
+export const useCreateWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateWorkspaceType) => api.createWorkspace(variables),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["workspaces"],
+      });
+    },
+  });
+};

src/pages/taskmanager/workspace/service/WorkspaceService.ts

@@ -0,0 +1,7 @@
+import axios from "../../../../config/axios";
+import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+
+export const createWorkspace = async (params: CreateWorkspaceType) => {
+  const { data } = await axios.post(`/task-manager/workspaces`, params);
+  return data;
+};

src/pages/taskmanager/workspace/types/WorkspaceTypes.ts

@@ -0,0 +1,7 @@
+export type CreateWorkspaceType = {
+  name: string;
+  description: string;
+  color: string;
+  isActive: boolean;
+  userIds: string[];
+};

src/shared/SideBar.tsx

@@ -1,5 +1,6 @@
 import {
   Activity,
+  Add,
   ArrowDown2,
   BagTick,
   Building,
@@ -51,6 +52,7 @@ import LearningSubMenu from "./components/LearningSubMenu";
 import ReceiptSubMenu from "./components/ReceiptSubMenu";
 import ServicesSubMenu from "./components/ServicesSubMenu";
 import SupportSubMenu from "./components/SupportSubMenu";
+import TaskManagerSubMenu from "./components/TaskManagerSubMenu";
 import TicketSubMenu from "./components/TicketSubMenu";
 import UsersSubMenu from "./components/UsersSubMenu";
 import SideBarItem from "./SideBarItem";
@@ -69,10 +71,18 @@ const SideBar: FC = () => {
 
   useEffect(() => {
     const split = location.pathname.split("/");
+    const isTaskManagerRoute =
+      location.pathname.startsWith(Pages.taskmanager.workspace) ||
+      location.pathname === Pages.taskmanager.createWorkspace ||
+      location.pathname === Pages.taskmanager.createProject ||
+      location.pathname === Pages.taskmanager.projectList;
 
     if (SideBarItemHasSubMenu.includes(split[1])) {
       setSubMenuName(split[1]);
       setSubtMenu(true);
+    } else if (isTaskManagerRoute) {
+      setSubMenuName("taskmanager");
+      setSubtMenu(true);
     } else {
       setSubMenuName("");
       setSubtMenu(false);
@@ -459,18 +469,64 @@ const SideBar: FC = () => {
               </div>
             </div>
           }
-          <div className={clx("text-xs text-[#8C90A3]")}>
+          <div className={clx("text-xs text-[#8C90A3]", !openMenu.includes("taskmanager") && "hidden")}>
             <SideBarItem
               icon={
                 <Task
-                  variant={isActive("taskmanager") ? "Bold" : "Outline"}
+                  variant={location.pathname.startsWith(Pages.taskmanager.workspace) ? "Bold" : "Outline"}
-                  color={isActive("taskmanager") ? "black" : "#8C90A3"}
+                  color={location.pathname.startsWith(Pages.taskmanager.workspace) ? "black" : "#8C90A3"}
                   size={iconSizeSideBar}
                 />
               }
-              title={t("sidebar.taskmanager")}
+              title={t("submenu.taskmanager_workspace")}
-              isActive={isActive("taskmanager")}
+              isActive={location.pathname.startsWith(Pages.taskmanager.workspace)}
               link={Pages.taskmanager.workspace + "dpage"}
+              name="taskmanager"
+              activeName=""
+            />
+
+            <SideBarItem
+              icon={
+                <Add
+                  variant={location.pathname === Pages.taskmanager.createWorkspace ? "Bold" : "Outline"}
+                  color={location.pathname === Pages.taskmanager.createWorkspace ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("submenu.taskmanager_create_workspace")}
+              isActive={location.pathname === Pages.taskmanager.createWorkspace}
+              link={Pages.taskmanager.createWorkspace}
+              name="taskmanager"
+              activeName=""
+            />
+
+            <SideBarItem
+              icon={
+                <Category
+                  variant={location.pathname === Pages.taskmanager.projectList ? "Bold" : "Outline"}
+                  color={location.pathname === Pages.taskmanager.projectList ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("submenu.taskmanager_project_list")}
+              isActive={location.pathname === Pages.taskmanager.projectList}
+              link={Pages.taskmanager.projectList}
+              name="taskmanager"
+              activeName=""
+            />
+
+            <SideBarItem
+              icon={
+                <Add
+                  variant={location.pathname === Pages.taskmanager.createProject ? "Bold" : "Outline"}
+                  color={location.pathname === Pages.taskmanager.createProject ? "black" : "#8C90A3"}
+                  size={iconSizeSideBar}
+                />
+              }
+              title={t("submenu.taskmanager_create_project")}
+              isActive={location.pathname === Pages.taskmanager.createProject}
+              link={Pages.taskmanager.createProject}
+              name="taskmanager"
               activeName=""
             />
           </div>
@@ -948,6 +1004,8 @@ const SideBar: FC = () => {
             <SupportSubMenu />
           ) : subMenuName === "accessLogs" ? (
             <AccessLogsSubMenu />
+          ) : subMenuName === "taskmanager" ? (
+            <TaskManagerSubMenu />
           ) : null}
         </div>
       )}

src/shared/components/TaskManagerSubMenu.tsx

@@ -0,0 +1,50 @@
+import { Add, Category, Task } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import SubMenuItem from "./SubMenuItem";
+
+const TaskManagerSubMenu: FC = () => {
+  const { t } = useTranslation("global");
+  const location = useLocation();
+
+  const isWorkspaceActive = location.pathname.startsWith(Pages.taskmanager.workspace);
+  const isCreateWorkspaceActive = location.pathname === Pages.taskmanager.createWorkspace;
+  const isProjectListActive = location.pathname === Pages.taskmanager.projectList;
+  const isCreateProjectActive = location.pathname === Pages.taskmanager.createProject;
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <Task size={24} color="#000" variant="Bold" />
+        <div className="text-xs">{t("sidebar.taskmanager")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.taskmanager_workspace")}
+          isActive={isWorkspaceActive}
+          link={Pages.taskmanager.workspace + "dpage"}
+        />
+        <SubMenuItem
+          title={t("submenu.taskmanager_create_workspace")}
+          isActive={isCreateWorkspaceActive}
+          link={Pages.taskmanager.createWorkspace}
+        />
+        <SubMenuItem
+          title={t("submenu.taskmanager_project_list")}
+          isActive={isProjectListActive}
+          link={Pages.taskmanager.projectList}
+        />
+        <SubMenuItem
+          title={t("submenu.taskmanager_create_project")}
+          isActive={isCreateProjectActive}
+          link={Pages.taskmanager.createProject}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TaskManagerSubMenu;