base url

.env

@@ -2,4 +2,4 @@ VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 VITE_BASE_URL = 'https://api.danakcorp.com'
 
-#VITE_BASE_URL = 'http://192.168.1.107:3500'
+# VITE_BASE_URL = 'http://192.168.99.131:3500'

src/helpers/permissions.ts

@@ -0,0 +1,201 @@
+export enum PermissionGroupEnum {
+  SERVICES = "services",
+  CUSTOMERS = "customers",
+  USERS = "users",
+  FINANCIAL = "financial",
+  CONTENT = "content",
+  SUPPORT = "support",
+  OTHER = "other",
+  PRODUCTS = "products",
+  REPRESENTATIVES = "representatives",
+  TASK_MANAGER = "task_manager",
+}
+
+export const PERMISSION_GROUP_ORDER: PermissionGroupEnum[] = [
+  PermissionGroupEnum.SERVICES,
+  PermissionGroupEnum.CUSTOMERS,
+  PermissionGroupEnum.USERS,
+  PermissionGroupEnum.FINANCIAL,
+  PermissionGroupEnum.CONTENT,
+  PermissionGroupEnum.SUPPORT,
+  PermissionGroupEnum.OTHER,
+  PermissionGroupEnum.PRODUCTS,
+  PermissionGroupEnum.REPRESENTATIVES,
+  PermissionGroupEnum.TASK_MANAGER,
+];
+
+export enum PermissionEnum {
+  SERVICES_CREATE = "services_create",
+  SERVICES_READ = "services_read",
+  SERVICES_UPDATE = "services_update",
+  SERVICES_DELETE = "services_delete",
+
+  CUSTOMERS_CREATE = "customers_create",
+  CUSTOMERS_READ = "customers_read",
+  CUSTOMERS_UPDATE = "customers_update",
+  CUSTOMERS_DELETE = "customers_delete",
+
+  AGENTS_CREATE = "agents_create",
+  AGENTS_READ = "agents_read",
+  AGENTS_UPDATE = "agents_update",
+  AGENTS_DELETE = "agents_delete",
+
+  DEVELOPERS_CREATE = "developers_create",
+  DEVELOPERS_READ = "developers_read",
+  DEVELOPERS_UPDATE = "developers_update",
+  DEVELOPERS_DELETE = "developers_delete",
+
+  INVOICES_CREATE = "invoices_create",
+  INVOICES_READ = "invoices_read",
+  INVOICES_UPDATE = "invoices_update",
+  INVOICES_DELETE = "invoices_delete",
+
+  TRANSACTIONS_CREATE = "transactions_create",
+  TRANSACTIONS_READ = "transactions_read",
+  TRANSACTIONS_UPDATE = "transactions_update",
+  TRANSACTIONS_DELETE = "transactions_delete",
+
+  DISCOUNTS_CREATE = "discounts_create",
+  DISCOUNTS_READ = "discounts_read",
+  DISCOUNTS_UPDATE = "discounts_update",
+  DISCOUNTS_DELETE = "discounts_delete",
+
+  ADMINS_CREATE = "admins_create",
+  ADMINS_READ = "admins_read",
+  ADMINS_UPDATE = "admins_update",
+  ADMINS_DELETE = "admins_delete",
+
+  TICKETS_CREATE = "tickets_create",
+  TICKETS_READ = "tickets_read",
+  TICKETS_UPDATE = "tickets_update",
+  TICKETS_DELETE = "tickets_delete",
+
+  CRITICISMS_CREATE = "criticisms_create",
+  CRITICISMS_READ = "criticisms_read",
+  CRITICISMS_UPDATE = "criticisms_update",
+  CRITICISMS_DELETE = "criticisms_delete",
+
+  CONTACTS_US_CREATE = "contacts_us_create",
+  CONTACTS_US_READ = "contacts_us_read",
+  CONTACTS_US_UPDATE = "contacts_us_update",
+  CONTACTS_US_DELETE = "contacts_us_delete",
+
+  ADVERTISEMENTS_CREATE = "advertisements_create",
+  ADVERTISEMENTS_READ = "advertisements_read",
+  ADVERTISEMENTS_UPDATE = "advertisements_update",
+  ADVERTISEMENTS_DELETE = "advertisements_delete",
+
+  ANNOUNCEMENTS_CREATE = "announcements_create",
+  ANNOUNCEMENTS_READ = "announcements_read",
+  ANNOUNCEMENTS_UPDATE = "announcements_update",
+  ANNOUNCEMENTS_DELETE = "announcements_delete",
+
+  BLOGS_CREATE = "blogs_create",
+  BLOGS_READ = "blogs_read",
+  BLOGS_UPDATE = "blogs_update",
+  BLOGS_DELETE = "blogs_delete",
+
+  LEARNINGS_CREATE = "learnings_create",
+  LEARNINGS_READ = "learnings_read",
+  LEARNINGS_UPDATE = "learnings_update",
+  LEARNINGS_DELETE = "learnings_delete",
+
+  SETTINGS_CREATE = "settings_create",
+  SETTINGS_READ = "settings_read",
+  SETTINGS_UPDATE = "settings_update",
+  SETTINGS_DELETE = "settings_delete",
+
+  BANK_ACCOUNTS_CREATE = "bank_accounts_create",
+  BANK_ACCOUNTS_READ = "bank_accounts_read",
+  BANK_ACCOUNTS_UPDATE = "bank_accounts_update",
+  BANK_ACCOUNTS_DELETE = "bank_accounts_delete",
+
+  PAYMENTS_CREATE = "payments_create",
+  PAYMENTS_READ = "payments_read",
+  PAYMENTS_UPDATE = "payments_update",
+  PAYMENTS_DELETE = "payments_delete",
+
+  SUPPORT_PLAN_CREATE = "support_plan_create",
+  SUPPORT_PLAN_READ = "support_plan_read",
+  SUPPORT_PLAN_UPDATE = "support_plan_update",
+  SUPPORT_PLAN_DELETE = "support_plan_delete",
+
+  RESELLER_CREATE = "reseller_create",
+  RESELLER_READ = "reseller_read",
+  RESELLER_UPDATE = "reseller_update",
+  RESELLER_DELETE = "reseller_delete",
+
+  WORKSPACE_CREATE = "workspace_create",
+  WORKSPACE_READ = "workspace_read",
+  WORKSPACE_UPDATE = "workspace_update",
+  WORKSPACE_DELETE = "workspace_delete",
+
+  PROJECT_CREATE = "project_create",
+  PROJECT_READ = "project_read",
+  PROJECT_UPDATE = "project_update",
+  PROJECT_DELETE = "project_delete",
+
+  TASK_CREATE = "task_create",
+  TASK_READ = "task_read",
+  TASK_UPDATE = "task_update",
+  TASK_DELETE = "task_delete",
+
+  TASK_PHASE_CREATE = "task_phase_create",
+  TASK_PHASE_READ = "task_phase_read",
+  TASK_PHASE_UPDATE = "task_phase_update",
+  TASK_PHASE_DELETE = "task_phase_delete",
+
+  LOGS = "logs",
+  MANAGE_SSO_CLIENTS = "manage_sso_clients",
+  DMENU = "dmenu",
+  DKALA = "dkala",
+  DPAGE = "dpage",
+  DMAIL = "dmail",
+}
+
+const CRUD_ACTIONS = ["create", "read", "update", "delete"] as const;
+
+export const CONTENT_PERMISSION_RESOURCES = ["blogs", "learnings", "advertisements", "announcements"] as const;
+export const FINANCIAL_PERMISSION_RESOURCES = ["payments", "invoices", "transactions", "discounts", "bank_accounts"] as const;
+export const SUPPORT_PERMISSION_RESOURCES = ["support_plan", "tickets"] as const;
+export const TASK_MANAGER_PERMISSION_RESOURCES = ["workspace", "project", "task", "task_phase"] as const;
+export const PRODUCT_PERMISSION_RESOURCES = ["dmenu", "dkala", "dpage", "dmail"] as const;
+
+type PermissionEntry = { name: string };
+
+export const getPermissionNames = (permissions: PermissionEntry[] | undefined): string[] =>
+  permissions?.map((permission) => permission.name) ?? [];
+
+export const hasPermission = (
+  permissions: PermissionEntry[] | undefined,
+  resourceOrPermission: string,
+): boolean => {
+  const names = getPermissionNames(permissions);
+
+  if (names.includes(resourceOrPermission)) {
+    return true;
+  }
+
+  return CRUD_ACTIONS.some((action) => names.includes(`${resourceOrPermission}_${action}`));
+};
+
+export const hasAnyPermission = (
+  permissions: PermissionEntry[] | undefined,
+  resources: readonly string[],
+): boolean => resources.some((resource) => hasPermission(permissions, resource));
+
+export const canAccessMenuItem = (
+  permissions: PermissionEntry[] | undefined,
+  activeName?: string,
+  activeNames?: readonly string[],
+): boolean => {
+  if (activeNames && activeNames.length > 0) {
+    return hasAnyPermission(permissions, activeNames);
+  }
+
+  if (!activeName) {
+    return true;
+  }
+
+  return hasPermission(permissions, activeName);
+};

src/langs/fa.json

@@ -727,6 +727,18 @@
     "submit_role": "ثبت نقش",
     "title_role": "عنوان نقش",
     "permissions": "دسترسی ها",
+    "permission_groups": {
+      "services": "سرویس‌ها",
+      "customers": "مشتریان",
+      "users": "کاربران",
+      "financial": "مالی",
+      "content": "محتوا",
+      "support": "پشتیبانی",
+      "other": "سایر",
+      "products": "محصولات",
+      "representatives": "نمایندگان",
+      "task_manager": "مدیریت وظایف"
+    },
     "status_role": "وضعیت نقش",
     "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
     "is_admin": "آیا ادمین است؟",
@@ -1065,7 +1077,14 @@
       "stop_tracking": "پایان",
       "time_history": "سابقه",
       "no_time_entries": "هنوز زمانی ثبت نشده",
-      "tracking_active": "در حال اجرا"
+      "tracking_active": "در حال اجرا",
+      "comments": "کامنت‌ها",
+      "add_comment": "ثبت کامنت",
+      "comment_placeholder": "کامنت خود را بنویسید...",
+      "no_comments": "هنوز کامنتی ثبت نشده",
+      "unknown_user": "کاربر",
+      "related_ticket": "تیکت مرتبط",
+      "view_ticket": "مشاهده تیکت"
     }
   }
 }

src/pages/taskmanager/components/Task.tsx

@@ -1,5 +1,8 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
 import { useEffect, useRef, type FC } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Pages } from "../../../config/Pages";
 import type { Task as TaskType } from "../types";
 
 type Props = {
@@ -9,6 +12,7 @@ type Props = {
 };
 
 const Task: FC<Props> = ({ task, isDragging, onClick }) => {
+  const { t } = useTranslation("global");
   const suppressClickRef = useRef(false);
 
   useEffect(() => {
@@ -37,6 +41,15 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
         {task.tag}
       </div>
       <div className="font-bold text-xs mt-2">{task.title}</div>
+      {task.ticketId ? (
+        <Link
+          to={Pages.ticket.detail + task.ticketId}
+          onClick={(e) => e.stopPropagation()}
+          className="mt-2 inline-flex items-center text-[10px] text-primary hover:underline"
+        >
+          {t("taskmanager.task_detail.related_ticket")}
+        </Link>
+      ) : null}
       <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
         <div className="flex items-center gap-1 text-[10px] min-w-0">
           <Calendar size={16} color="#292D32" className="shrink-0" />

src/pages/taskmanager/components/task-detail/TaskDetailDescription.tsx

@@ -28,7 +28,7 @@ const TaskDetailDescription: FC<Props> = ({ value = "", onChange, onSave, isSavi
           onChange={(e) => onChange?.(e.target.value)}
           placeholder={t("taskmanager.task_detail.description_placeholder")}
           rows={5}
-          className="w-full bg-transparent rounded-xl px-4 pt-10 pb-3 text-xs outline-none resize-none placeholder:text-description"
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
         />
       </div>
     </div>

src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx

@@ -1,7 +1,9 @@
 import { Add } from "iconsax-react";
 import { type FC } from "react";
+import { Link } from "react-router-dom";
 import type DateObject from "react-date-object";
 import { useTranslation } from "react-i18next";
+import { Pages } from "../../../../config/Pages";
 import UserAvatar from "../UserAvatar";
 import { formatDateRange } from "./date/utils";
 import type { TaskLabel } from "./labels/types";
@@ -12,11 +14,12 @@ type Props = {
   selectedUsers: TaskUser[];
   startDate: DateObject | null;
   endDate: DateObject | null;
+  ticketId?: string | null;
   onAddLabel?: () => void;
   onAddUser?: () => void;
 };
 
-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, onAddLabel, onAddUser }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, ticketId, onAddLabel, onAddUser }) => {
   const { t } = useTranslation("global");
   const dateLabel = formatDateRange(startDate, endDate);
 
@@ -76,6 +79,18 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
           </span>
         ) : null}
       </div>
+
+      {ticketId ? (
+        <div className="col-span-2 sm:col-span-1 min-w-0">
+          <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.related_ticket")}</div>
+          <Link
+            to={Pages.ticket.detail + ticketId}
+            className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-primary hover:underline whitespace-nowrap"
+          >
+            {t("taskmanager.task_detail.view_ticket")}
+          </Link>
+        </div>
+      ) : null}
     </div>
   );
 };

src/pages/taskmanager/components/task-detail/TaskDetailModal.tsx

@@ -10,6 +10,7 @@ import type { TaskDetailType } from "../../task/types/TaskTypes";
 import type { Column, Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
+import CommentList from "./comment/List";
 import TimeList from "./time/List";
 import TaskDetailCoverColorBar from "./cover/TaskDetailCoverColorBar";
 import TaskDetailDescription from "./TaskDetailDescription";
@@ -218,6 +219,8 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
           />
 
           <TimeList times={getTaskTimes.data?.data} />
+
+          <CommentList taskId={task.id} enabled={open && !!task.id} />
         </>
       )}
     </DefaulModal>

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -397,6 +397,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
         selectedUsers={selectedUsers}
         startDate={startDate}
         endDate={endDate}
+        ticketId={taskDetail?.ticketId}
         onAddLabel={handleAddLabelClick}
         onAddUser={handleAddUserClick}
       />

src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx

@@ -0,0 +1,128 @@
+import { Edit2 } from "iconsax-react";
+import moment from "moment-jalaali";
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "../../../../../components/Toast";
+import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
+import { ErrorType } from "../../../../../helpers/types";
+import { useDeleteTaskComment, useUpdateTaskComment } from "../../../task/hooks/useTaskCommentData";
+import type { TaskCommentType } from "../../../task/types/TaskCommentTypes";
+import UserAvatar from "../../UserAvatar";
+
+type Props = {
+  comment: TaskCommentType;
+  taskId: string;
+};
+
+const CommentItem: FC<Props> = ({ comment, taskId }) => {
+  const { t } = useTranslation("global");
+  const [isEditing, setIsEditing] = useState(false);
+  const [content, setContent] = useState(comment.content);
+  const updateComment = useUpdateTaskComment();
+  const deleteComment = useDeleteTaskComment();
+
+  const authorName = comment.user
+    ? `${comment.user.firstName} ${comment.user.lastName}`.trim()
+    : t("taskmanager.task_detail.unknown_user");
+
+  const handleSave = () => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent || trimmedContent === comment.content) {
+      setIsEditing(false);
+      setContent(comment.content);
+      return;
+    }
+
+    updateComment.mutate(
+      { id: comment.id, params: { content: trimmedContent }, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setIsEditing(false);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleCancel = () => {
+    setContent(comment.content);
+    setIsEditing(false);
+  };
+
+  const handleDelete = () => {
+    deleteComment.mutate(
+      { id: comment.id, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="bg-white/25 rounded-xl p-3">
+      <div className="flex items-start gap-2">
+        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="text-xs font-medium truncate">{authorName}</div>
+            <div className="text-[10px] text-description shrink-0">
+              {moment(comment.createdAt).format("jYYYY/jMM/jDD HH:mm")}
+            </div>
+          </div>
+
+          {isEditing ? (
+            <div className="mt-2">
+              <textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                rows={3}
+                className="w-full bg-white/50 rounded-lg px-3 py-2 text-xs outline-none resize-none"
+                autoFocus
+              />
+              <div className="flex gap-2 mt-2">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={updateComment.isPending || !content.trim()}
+                  className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+                >
+                  {t("save")}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  disabled={updateComment.isPending}
+                  className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white"
+                >
+                  {t("cancel")}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="mt-1 text-xs leading-6 whitespace-pre-line break-words">{comment.content}</div>
+          )}
+        </div>
+
+        {!isEditing ? (
+          <div className="flex items-center gap-1 shrink-0">
+            <button type="button" onClick={() => setIsEditing(true)} className="cursor-pointer">
+              <Edit2 size={16} color="#0047FF" />
+            </button>
+            <TrashWithConfrim onDelete={handleDelete} isLoading={deleteComment.isPending} size={16} color="#FF0000" />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CommentItem;

src/pages/taskmanager/components/task-detail/comment/List.tsx

@@ -0,0 +1,76 @@
+import { type FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "../../../../../components/Toast";
+import { ErrorType } from "../../../../../helpers/types";
+import { useCreateTaskComment, useGetTaskComments } from "../../../task/hooks/useTaskCommentData";
+import CommentItem from "./CommentItem";
+
+type Props = {
+  taskId: string;
+  enabled?: boolean;
+};
+
+const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
+  const { t } = useTranslation("global");
+  const [content, setContent] = useState("");
+  const getComments = useGetTaskComments(taskId, enabled);
+  const createComment = useCreateTaskComment();
+
+  const comments = getComments.data?.data ?? [];
+
+  const handleSubmit = () => {
+    const trimmedContent = content.trim();
+    if (!trimmedContent) return;
+
+    createComment.mutate(
+      { content: trimmedContent, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setContent("");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="mt-6">
+      <div className="text-sm font-bold">{t("taskmanager.task_detail.comments")}</div>
+
+      <div className="mt-3 relative bg-white/25 rounded-xl">
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={createComment.isPending || !content.trim()}
+          className="absolute top-2 left-2 z-10 h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+        >
+          {t("taskmanager.task_detail.add_comment")}
+        </button>
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder={t("taskmanager.task_detail.comment_placeholder")}
+          rows={3}
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
+        />
+      </div>
+
+      {getComments.isPending ? (
+        <div className="mt-3 text-[10px] text-description text-center py-2">{t("loading")}</div>
+      ) : comments.length === 0 ? (
+        <div className="mt-3 text-[10px] text-description">{t("taskmanager.task_detail.no_comments")}</div>
+      ) : (
+        <div className="mt-3 flex flex-col gap-2">
+          {comments.map((comment) => (
+            <CommentItem key={comment.id} comment={comment} taskId={taskId} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CommentList;

src/pages/taskmanager/task/hooks/useTaskCommentData.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/TaskCommentService";
+import { CreateTaskCommentType, UpdateTaskCommentType } from "../types/TaskCommentTypes";
+
+export const useGetTaskComments = (taskId: string, enabled = true) => {
+  return useQuery({
+    queryKey: ["task-comments", taskId],
+    queryFn: () => api.getTaskComments(taskId),
+    enabled: !!taskId && enabled,
+  });
+};
+
+export const useCreateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateTaskCommentType) => api.createTaskComment(variables),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useUpdateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateTaskCommentType; taskId: string }) =>
+      api.updateTaskComment(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useDeleteTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskComment(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};

src/pages/taskmanager/task/service/TaskCommentService.ts

@@ -0,0 +1,31 @@
+import axios from "../../../../config/axios";
+import {
+  CreateTaskCommentResponse,
+  CreateTaskCommentType,
+  GetTaskCommentsResponse,
+  UpdateTaskCommentResponse,
+  UpdateTaskCommentType,
+} from "../types/TaskCommentTypes";
+
+export const getTaskComments = async (taskId: string): Promise<GetTaskCommentsResponse> => {
+  const { data } = await axios.get(`/task-manager/comments/task/${taskId}`);
+  return data;
+};
+
+export const createTaskComment = async (params: CreateTaskCommentType): Promise<CreateTaskCommentResponse> => {
+  const { data } = await axios.post(`/task-manager/comments`, params);
+  return data;
+};
+
+export const updateTaskComment = async (
+  id: string,
+  params: UpdateTaskCommentType,
+): Promise<UpdateTaskCommentResponse> => {
+  const { data } = await axios.patch(`/task-manager/comments/${id}`, params);
+  return data;
+};
+
+export const deleteTaskComment = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/comments/${id}`);
+  return data;
+};

src/pages/taskmanager/task/types/TaskCommentTypes.ts

@@ -0,0 +1,39 @@
+import { IResponse } from "../../../../types/response.types";
+
+export type TaskCommentAuthorType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  profilePic?: string | null;
+};
+
+export type TaskCommentType = {
+  id: string;
+  content: string;
+  taskId: string;
+  userId?: string;
+  user?: TaskCommentAuthorType;
+  createdAt: string;
+  updatedAt?: string;
+};
+
+export type CreateTaskCommentType = {
+  content: string;
+  taskId: string;
+};
+
+export type UpdateTaskCommentType = {
+  content: string;
+};
+
+export interface GetTaskCommentsResponse extends IResponse<TaskCommentType[]> {
+  statusCode: number;
+}
+
+export interface CreateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}
+
+export interface UpdateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}

src/pages/taskmanager/task/types/TaskTypes.ts

@@ -6,6 +6,7 @@ export type CreateTaskType = {
   order: number;
   projectId: string;
   userIds?: string[];
+  ticketId?: string;
 };
 
 export type TaskItemType = {
@@ -25,6 +26,7 @@ export type TaskItemType = {
   attachments?: number;
   checklistDone?: number;
   checklistTotal?: number;
+  ticketId?: string | null;
 };
 
 export type TaskPhaseTasksPagerType = {
@@ -127,6 +129,7 @@ export type TaskDetailType = {
   checkListItemCount?: number;
   completedCheckListItemCount?: number;
   attachments?: TaskAttachmentType[];
+  ticketId?: string | null;
 };
 
 export type ChangeTaskPhaseType = {

src/pages/taskmanager/task/utils/mapTaskItemToTask.ts

@@ -12,4 +12,5 @@ export const mapTaskItemToTask = (task: TaskItemType, taskPhaseId: string, fallb
   attachments: task.attachments ?? 0,
   checklistDone: task.checklistDone ?? 0,
   checklistTotal: task.checklistTotal ?? 0,
+  ticketId: task.ticketId ?? null,
 });

src/pages/taskmanager/types.ts

@@ -16,6 +16,7 @@ export type Task = {
   attachments: number;
   checklistDone: number;
   checklistTotal: number;
+  ticketId?: string | null;
 };
 
 export type WorkspaceData = {

src/pages/taskmanager/workspace.tsx

@@ -118,6 +118,7 @@ const Workspace: FC = () => {
           attachments: activeTask.attachments,
           checklistDone: activeTask.checklistDone,
           checklistTotal: activeTask.checklistTotal,
+          ticketId: activeTask.ticketId,
         },
         index,
       ),

src/pages/ticket/Detail.tsx

@@ -314,6 +314,7 @@ const TicketDetail: FC = () => {
                             {
                                 getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
                                 <CreateTaskFromTicket
+                                    ticketId={id ?? ''}
                                     ticketSubject={getMessages.data?.data?.ticket?.subject ?? ''}
                                 />
                             }

src/pages/ticket/components/CreateTaskFromTicket.tsx

@@ -19,10 +19,11 @@ import UserAvatar from '../../taskmanager/components/UserAvatar'
 import type { SelectedUser } from '../../taskmanager/project/components/CreateProjectSidebar'
 
 type Props = {
+    ticketId: string
     ticketSubject: string
 }
 
-const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
+const CreateTaskFromTicket: FC<Props> = ({ ticketId, ticketSubject }) => {
     const { t } = useTranslation('global')
     const [open, setOpen] = useState(false)
     const [workspaceId, setWorkspaceId] = useState('')
@@ -154,6 +155,7 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
                 taskPhaseId,
                 order: selectedPhase?.tasks?.length ?? 0,
                 projectId,
+                ticketId,
                 ...(userIds.length ? { userIds } : {}),
             })
 

src/pages/users/RoleCreate.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import Input from '../../components/Input'
-import CheckBoxComponent from '../../components/CheckBoxComponent'
+import RolePermissionsSelector from './components/RolePermissionsSelector'
 import { useCreateRole, useGetPermissions } from './hooks/useUserData'
 import PageLoading from '../../components/PageLoading'
 import { useFormik } from 'formik'
@@ -98,24 +98,11 @@ const RoleCreate: FC = () => {
                                     {t('user.permissions')}
                                 </div>
 
-                                <div className='mt-5 text-sm flex flex-wrap gap-5'>
-                                    {
-                                        getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
-                                            return (
-                                                <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
-                                                    <CheckBoxComponent
-                                                        checked={permissions.includes(item.id)}
-                                                        onChange={() => handleAdd(item.id)}
-                                                    />
-                                                    <div>{item.name}</div>
-                                                </div>
-                                            )
-                                        })
-                                    }
-                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
-                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
-                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
-                                </div>
+                                <RolePermissionsSelector
+                                    permissions={getPermissions.data?.data?.permissions ?? []}
+                                    selectedIds={permissions}
+                                    onToggle={handleAdd}
+                                />
                             </div>
 
                         </div>

src/pages/users/RoleUpdate.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import Input from '../../components/Input'
-import CheckBoxComponent from '../../components/CheckBoxComponent'
+import RolePermissionsSelector from './components/RolePermissionsSelector'
 import { useGetPermissions, useGetRoleDetail, useUpdateRole } from './hooks/useUserData'
 import PageLoading from '../../components/PageLoading'
 import { useFormik } from 'formik'
@@ -112,24 +112,11 @@ const RoleUpdate: FC = () => {
                             {t('user.permissions')}
                         </div>
 
-                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
-                            {
-                                getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
-                                    return (
-                                        <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
-                                            <CheckBoxComponent
-                                                checked={permissions.includes(item.id)}
-                                                onChange={() => handleAdd(item.id)}
-                                            />
-                                            <div>{item.name}</div>
-                                        </div>
-                                    )
-                                })
-                            }
-                            <div className='flex flex-1 min-w-[23%] items-center'></div>
-                            <div className='flex flex-1 min-w-[23%] items-center'></div>
-                            <div className='flex flex-1 min-w-[23%] items-center'></div>
-                        </div>
+                        <RolePermissionsSelector
+                            permissions={getPermissions.data?.data?.permissions ?? []}
+                            selectedIds={permissions}
+                            onToggle={handleAdd}
+                        />
                     </div>
 
                 </div>

src/pages/users/components/RolePermissionsSelector.tsx

@@ -0,0 +1,85 @@
+import { FC, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import CheckBoxComponent from '../../../components/CheckBoxComponent'
+import { PERMISSION_GROUP_ORDER } from '../../../helpers/permissions'
+import { PermissionType } from '../types/UserTypes'
+
+type Props = {
+    permissions: PermissionType[]
+    selectedIds: string[]
+    onToggle: (id: string) => void
+}
+
+const RolePermissionsSelector: FC<Props> = ({ permissions, selectedIds, onToggle }) => {
+    const { t } = useTranslation('global')
+    const [activeGroup, setActiveGroup] = useState<string>('')
+
+    const groupedPermissions = useMemo(() => {
+        const groups = new Map<string, PermissionType[]>()
+
+        PERMISSION_GROUP_ORDER.forEach((group) => {
+            groups.set(group, [])
+        })
+
+        permissions.forEach((permission) => {
+            const groupItems = groups.get(permission.group)
+            if (groupItems) {
+                groupItems.push(permission)
+            }
+        })
+
+        return PERMISSION_GROUP_ORDER
+            .map((group) => ({
+                group,
+                items: groups.get(group) ?? [],
+            }))
+            .filter(({ items }) => items.length > 0)
+    }, [permissions])
+
+    useEffect(() => {
+        if (groupedPermissions.length === 0) {
+            setActiveGroup('')
+            return
+        }
+
+        if (!groupedPermissions.some(({ group }) => group === activeGroup)) {
+            setActiveGroup(groupedPermissions[0].group)
+        }
+    }, [activeGroup, groupedPermissions])
+
+    const activeGroupPermissions = groupedPermissions.find(({ group }) => group === activeGroup)?.items ?? []
+
+    return (
+        <div className='mt-5'>
+            <div className='flex flex-wrap items-center gap-2 pb-2'>
+                {groupedPermissions.map(({ group }) => (
+                    <button
+                        key={group}
+                        type='button'
+                        className={`px-4 py-2 rounded-xl text-sm whitespace-nowrap border transition-all ${activeGroup === group
+                            ? 'bg-primary text-white border-primary'
+                            : 'bg-white text-gray-700 border-gray-200'
+                            }`}
+                        onClick={() => setActiveGroup(group)}
+                    >
+                        {t(`user.permission_groups.${group}`)}
+                    </button>
+                ))}
+            </div>
+
+            <div className='mt-6 text-sm flex flex-wrap gap-5'>
+                {activeGroupPermissions.map((item) => (
+                    <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                        <CheckBoxComponent
+                            checked={selectedIds.includes(item.id)}
+                            onChange={() => onToggle(item.id)}
+                        />
+                        <div>{item.title}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default RolePermissionsSelector

src/pages/users/types/UserTypes.ts

@@ -1,3 +1,12 @@
+import { PermissionGroupEnum } from "../../../helpers/permissions";
+
+export type PermissionType = {
+  id: string;
+  name: string;
+  title: string;
+  group: PermissionGroupEnum;
+};
+
 export type CreateRoleType = {
   name: string;
   permissions: string[];
@@ -15,6 +24,8 @@ export type RoleItemType = {
 export type RolePermissionType = {
   id: string;
   name: string;
+  title?: string;
+  group?: PermissionGroupEnum;
 };
 
 export type RoleDetailType = {

src/shared/SideBar.tsx

@@ -19,6 +19,14 @@ import LogoSmall from "../assets/images/logo-small.svg";
 import LogoImage from "../assets/images/logo.svg";
 import { Pages } from "../config/Pages";
 import { getSubMenuNameFromPath } from "../config/SideBarSubMenu";
+import {
+  CONTENT_PERMISSION_RESOURCES,
+  FINANCIAL_PERMISSION_RESOURCES,
+  hasAnyPermission,
+  hasPermission,
+  PRODUCT_PERMISSION_RESOURCES,
+  SUPPORT_PERMISSION_RESOURCES,
+} from "../helpers/permissions";
 import { clx } from "../helpers/utils";
 import { useGetProfile } from "../pages/profile/hooks/useProfileData";
 import { useGetAdminPermissions } from "../pages/users/hooks/useUserData";
@@ -44,16 +52,16 @@ const SideBar: FC = () => {
   const isGroupActive = (name: string) => subMenuName === name || getSubMenuNameFromPath(location.pathname) === name;
   const isPathActive = (name: string) => location.pathname.includes(name);
 
-  const hasProductPermission = adminPermissions?.data?.permissions?.some((permission: { name: string }) =>
-    ["dmenu", "dkala", "dpage", "dmail"].includes(permission.name),
-  );
+  const permissions = adminPermissions?.data?.permissions;
+
+  const hasProductPermission = hasAnyPermission(permissions, PRODUCT_PERMISSION_RESOURCES);
 
   const productsDefaultLink = (() => {
-    const permissions = adminPermissions?.data?.permissions?.map((p: { name: string }) => p.name) ?? [];
-    if (permissions.includes("dmenu")) return Pages.dmenu.icons.list;
-    if (permissions.includes("dkala")) return Pages.dkala.icons.list;
-    if (permissions.includes("dmail")) return Pages.dmail.list;
-    if (permissions.includes("dpage")) return Pages.dpage.stickers.list;
+    const permissionNames = permissions?.map((p: { name: string }) => p.name) ?? [];
+    if (permissionNames.includes("dmenu")) return Pages.dmenu.icons.list;
+    if (permissionNames.includes("dkala")) return Pages.dkala.icons.list;
+    if (permissionNames.includes("dmail")) return Pages.dmail.list;
+    if (permissionNames.includes("dpage")) return Pages.dpage.stickers.list;
     return Pages.dashboard;
   })();
 
@@ -148,7 +156,7 @@ const SideBar: FC = () => {
               activeName="customers"
             />
 
-            {adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === "reseller") && (
+            {hasPermission(permissions, "reseller") && (
               <SideBarItem
                 icon={
                   <UserTick
@@ -206,7 +214,7 @@ const SideBar: FC = () => {
               isActive={isGroupActive("content")}
               link={Pages.blog.list}
               name="content"
-              activeName=""
+              activeNames={CONTENT_PERMISSION_RESOURCES}
             />
 
             <SideBarItem
@@ -221,7 +229,7 @@ const SideBar: FC = () => {
               isActive={isGroupActive("financial")}
               link={Pages.payment.list}
               name="financial"
-              activeName=""
+              activeNames={FINANCIAL_PERMISSION_RESOURCES}
             />
 
             <SideBarItem
@@ -236,7 +244,7 @@ const SideBar: FC = () => {
               isActive={isGroupActive("support")}
               link={Pages.support.list}
               name="support"
-              activeName=""
+              activeNames={SUPPORT_PERMISSION_RESOURCES}
             />
 
             {profile?.data?.user?.roles?.some((role: { name: string }) => role.name === "super_admin") && (

src/shared/SideBarItem.tsx

@@ -4,6 +4,7 @@ import { clx } from '../helpers/utils'
 import { Pages } from '../config/Pages'
 import { useSharedStore } from './store/sharedStore'
 import { removeToken, removeRefreshToken } from '../config/func'
+import { canAccessMenuItem } from '../helpers/permissions'
 import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
 
 type Props = {
@@ -13,7 +14,8 @@ type Props = {
     link: string,
     isLogout?: boolean,
     name?: string,
-    activeName?: string
+    activeName?: string,
+    activeNames?: readonly string[],
 }
 
 const SideBarItem: FC<Props> = (props: Props) => {
@@ -32,7 +34,7 @@ const SideBarItem: FC<Props> = (props: Props) => {
             setSubtMenu(true)
         }
     }
-    if (props.activeName === '' || props.activeName && adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === props.activeName)) {
+    if (canAccessMenuItem(adminPermissions?.data?.permissions, props.activeName, props.activeNames)) {
         return (
             <Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
                 'flex text-xs gap-9 mt-4',

src/shared/components/SubMenuAccordion.tsx

@@ -1,16 +1,18 @@
 import { ArrowDown2 } from "iconsax-react";
 import { FC, ReactNode, useEffect, useState } from "react";
 import { clx } from "../../helpers/utils";
+import { canAccessMenuItem } from "../../helpers/permissions";
 import { useGetAdminPermissions } from "../../pages/users/hooks/useUserData";
 
 type Props = {
   title: string;
   isActive: boolean;
   activeName?: string;
+  activeNames?: readonly string[];
   children: ReactNode;
 };
 
-const SubMenuAccordion: FC<Props> = ({ title, isActive, activeName = "", children }) => {
+const SubMenuAccordion: FC<Props> = ({ title, isActive, activeName, activeNames, children }) => {
   const { data: adminPermissions } = useGetAdminPermissions();
   const [open, setOpen] = useState(isActive);
 
@@ -20,10 +22,7 @@ const SubMenuAccordion: FC<Props> = ({ title, isActive, activeName = "", childre
     }
   }, [isActive]);
 
-  if (
-    activeName !== "" &&
-    !adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === activeName)
-  ) {
+  if (!canAccessMenuItem(adminPermissions?.data?.permissions, activeName, activeNames)) {
     return null;
   }
 

src/shared/components/SubMenuItem.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
 import { clx } from "../../helpers/utils";
+import { canAccessMenuItem } from "../../helpers/permissions";
 import { useGetAdminPermissions } from "../../pages/users/hooks/useUserData";
 
 type Props = {
@@ -9,16 +10,13 @@ type Props = {
   link: string;
   isLogout?: boolean;
   activeName?: string;
+  activeNames?: readonly string[];
 };
 
 const SubMenuItem: FC<Props> = (props: Props) => {
   const { data: adminPermissions } = useGetAdminPermissions();
 
-  if (
-    props.activeName !== undefined &&
-    props.activeName !== "" &&
-    !adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === props.activeName)
-  ) {
+  if (!canAccessMenuItem(adminPermissions?.data?.permissions, props.activeName, props.activeNames)) {
     return null;
   }
 

src/shared/components/UsersSubMenu.tsx

@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { Pages } from "../../config/Pages";
+import { TASK_MANAGER_PERMISSION_RESOURCES } from "../../helpers/permissions";
 import SubMenuItem from "./SubMenuItem";
 
 const UsersSubMenu: FC = () => {
@@ -54,6 +55,7 @@ const UsersSubMenu: FC = () => {
           title={t("sidebar.taskmanager")}
           isActive={isTaskManagerActive}
           link={Pages.taskmanager.workspaceList}
+          activeNames={TASK_MANAGER_PERMISSION_RESOURCES}
         />
       </div>
     </div>