danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workspace create

Browse Source
This commit is contained in:
hamid zarghami
2026-07-09 10:09:47 +03:30
parent 9043cd4cb2
commit 43dc693061
11 changed files with 450 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/skills/danak-admin/SKILL.md
+109
View File
@@ -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
+83
View File
@@ -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
+1
View File
@@ -8,4 +8,5 @@ export const SideBarItemHasSubMenu = [
"blog",
"support",
"accessLogs",
"taskmanager",
];
src/langs/fa.json
+6 -1
View File
@@ -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
+85 -12
View File
@@ -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
+23 -11
View File
@@ -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) => [
...prev,
onSelectedUsersChange([
...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
+16
View File
@@ -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
+7
View File
@@ -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
+7
View File
@@ -0,0 +1,7 @@
export type CreateWorkspaceType = {
name: string;
description: string;
color: string;
isActive: boolean;
userIds: string[];
};
src/shared/SideBar.tsx
+63 -5
View File
@@ -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"}
color={isActive("taskmanager") ? "black" : "#8C90A3"}
variant={location.pathname.startsWith(Pages.taskmanager.workspace) ? "Bold" : "Outline"}
color={location.pathname.startsWith(Pages.taskmanager.workspace) ? "black" : "#8C90A3"}
size={iconSizeSideBar}
/>
}
title={t("sidebar.taskmanager")}
isActive={isActive("taskmanager")}
title={t("submenu.taskmanager_workspace")}
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
+50
View File
@@ -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;