From 0cf7dede8bbdcb7287c908e7a7dfed8ee8f14ae6 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 1 Mar 2025 16:41:20 +0330
Subject: [PATCH] category ticket and group user and ...

---
 src/components/Textarea.tsx               |   2 +-
 src/config/Pages.ts                       |   2 +
 src/langs/fa.json                         |  14 +-
 src/pages/ticket/Category.tsx             | 154 ++++++++++++++--------
 src/pages/ticket/hooks/useTicketData.ts   |  16 ++-
 src/pages/ticket/service/TicketServiec.ts |  12 +-
 src/pages/ticket/types/TicketTypes.ts     |  16 +++
 src/pages/users/GroupCreate.tsx           | 136 +++++++++++++++++++
 src/pages/users/GroupList.tsx             |  72 ++++++++++
 src/pages/users/hooks/useUserData.ts      |  19 ++-
 src/pages/users/service/UserService.ts    |  16 ++-
 src/pages/users/types/UserTypes.ts        |  15 +++
 src/router/Main.tsx                       |   4 +
 src/shared/components/UsersSubMenu.tsx    |  10 ++
 14 files changed, 430 insertions(+), 58 deletions(-)
 create mode 100644 src/pages/users/GroupCreate.tsx
 create mode 100644 src/pages/users/GroupList.tsx

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index d454719..60999e8 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -11,7 +11,7 @@ const Textarea: FC<Props> = (props: Props) => {
         <div className='w-full relative'>
             {
                 props.label &&
-                <div className='text-xs text-gray-500 absolute top-2 right-2' >
+                <div className='text-sm' >
                     {props.label}
                 </div>
             }
diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index 63f688e..3cbafee 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -65,6 +65,8 @@ export const Pages = {
     create: "/users/create",
     roleList: "/users/roles-all",
     roleCreate: "/users/roles-add",
+    groupAdd: "/users/group-add",
+    groupList: "/users/groups",
   },
   ads: {
     list: "/ads/list",
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 423d65c..be9368b 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -251,6 +251,8 @@
     "high": "بالا",
     "service": "سرویس"
   },
+  "active": "فعال",
+  "inactive": "غیرفعال",
   "attach": "پیوست",
   "date": "تاریخ",
   "status": "وضعیت",
@@ -555,8 +557,18 @@
     "permissions": "دسترسی ها",
     "status_role": "وضعیت نقش",
     "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
-    "is_admin": "آیا ادمین است؟"
+    "is_admin": "آیا ادمین است؟",
+    "user_group": "گروه کاربری",
+    "add_user_group": "ساخت گروه کاربری",
+    "users": "کاربران",
+    "group_add": "ساخت گروه",
+    "submit_group": "ثبت گروه",
+    "error_count_users": "حداقل یک کاربر باید انتخاب شود",
+    "list_user_group": "لیست گروه های کاربری",
+    "groups": "گروه ها",
+    "group_name": "نام گروه"
   },
+  "submit": "ثبت",
   "yes": "بله",
   "no": "خیر",
   "profile": {
diff --git a/src/pages/ticket/Category.tsx b/src/pages/ticket/Category.tsx
index 7e0ad9c..0f5ca49 100644
--- a/src/pages/ticket/Category.tsx
+++ b/src/pages/ticket/Category.tsx
@@ -4,11 +4,47 @@ import Select from '../../components/Select'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
 import SwitchComponent from '../../components/Switch'
-import { CloseCircle } from 'iconsax-react'
+import { useGetGroups } from '../users/hooks/useUserData'
+import { useFormik } from 'formik'
+import { CategoriesItemType, CreateCategoryType } from './types/TicketTypes'
+import * as Yup from 'yup'
+import { GroupItemType } from '../users/types/UserTypes'
+import Button from '../../components/Button'
+import { useCreateCategory, useGetCategories } from './hooks/useTicketData'
+import Textarea from '../../components/Textarea'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
 
 const TicketCategory: FC = () => {
 
     const { t } = useTranslation('global')
+    const getGroups = useGetGroups()
+    const createCategory = useCreateCategory()
+    const getCategories = useGetCategories()
+
+    const formik = useFormik<CreateCategoryType>({
+        initialValues: {
+            title: '',
+            description: '',
+            userGroupId: '',
+            isActive: true
+        },
+        validationSchema: Yup.object({
+            title: Yup.string().required(t('errors.required')),
+            userGroupId: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: values => {
+            createCategory.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        }
+    })
 
     return (
         <div className='mt-4'>
@@ -46,22 +82,18 @@ const TicketCategory: FC = () => {
                                 <thead className='thead'>
                                     <tr>
                                         <Td text={t('title')} />
-                                        <Td text={t('ticket.users_count')} />
                                         <Td text={t('status')} />
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr className='tr'>
-                                        <Td text='بخش فنی' />
-                                        <Td text={'2'} />
-                                        <Td text={''}>
-                                            <SwitchComponent
-                                                active
-                                                onChange={() => null}
-                                            />
-                                        </Td>
-
-                                    </tr>
+                                    {
+                                        getCategories.data?.data?.ticketCategories?.map((item: CategoriesItemType) => (
+                                            <tr className='tr'>
+                                                <Td text={item.title} />
+                                                <Td text={item.isActive ? t('active') : t('inactive')} />
+                                            </tr>
+                                        ))
+                                    }
                                 </tbody>
                             </table>
                         </div>
@@ -79,63 +111,81 @@ const TicketCategory: FC = () => {
                         </div>
 
                         <SwitchComponent
-                            active
-                            onChange={() => null}
+                            active={formik.values.isActive}
+                            onChange={(value) => formik.setFieldValue('isActive', value)}
                         />
                     </div>
 
                     <div className='mt-6'>
                         <Input
                             label={t('ticket.title_category')}
+                            {...formik.getFieldProps('title')}
+                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                        />
+                    </div>
+
+                    <div className='mt-6'>
+                        <Textarea
+                            label={t('description')}
+                            {...formik.getFieldProps('description')}
+                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                         />
                     </div>
 
                     <div className='mt-6'>
                         <Select
                             label={t('ticket.users')}
-                            items={[
-                                {
-                                    label: '',
-                                    value: ''
-                                }
-                            ]}
+                            items={getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => ({
+                                label: item.name,
+                                value: item.id
+                            }))}
+                            {...formik.getFieldProps('userGroupId')}
+                            error_text={formik.touched.userGroupId && formik.errors.userGroupId ? formik.errors.userGroupId : ''}
                             placeholder={t('select')}
                             className='border'
                         />
                     </div>
 
-                    <div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
-                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
-                            <div className='  '>
-                                سیما فرهادی
-                            </div>
-                            <CloseCircle
-                                variant='Bold'
-                                className='size-4'
-                                color='red'
-                            />
-                        </div>
-                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
-                            <div className='  '>
-                                سیما فرهادی
-                            </div>
-                            <CloseCircle
-                                variant='Bold'
-                                className='size-4'
-                                color='red'
-                            />
-                        </div>
-                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
-                            <div className='  '>
-                                سیما فرهادی
-                            </div>
-                            <CloseCircle
-                                variant='Bold'
-                                className='size-4'
-                                color='red'
-                            />
-                        </div>
+                    <div className='mt-6'>
+                        <Button
+                            label={t('submit')}
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createCategory.isPending}
+                        />
                     </div>
+
+                    {/* <div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                        <div className='bg-[#EBEEF5] flex gap-2  text-xs items-center px-2 py-2 rounded-lg'>
+                            <div className='  '>
+                                سیما فرهادی
+                            </div>
+                            <CloseCircle
+                                variant='Bold'
+                                className='size-4'
+                                color='red'
+                            />
+                        </div>
+                    </div> */}
                 </div>
             </div>
         </div>
diff --git a/src/pages/ticket/hooks/useTicketData.ts b/src/pages/ticket/hooks/useTicketData.ts
index 8de0d42..d38db0d 100644
--- a/src/pages/ticket/hooks/useTicketData.ts
+++ b/src/pages/ticket/hooks/useTicketData.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/TicketServiec";
-import { AddMessageTicketType } from "../types/TicketTypes";
+import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
 
 export const useGetTickets = (status: string) => {
   return useQuery({
@@ -36,3 +36,17 @@ export const useCloseTicket = () => {
     mutationFn: (id: string) => api.closeTicket(id),
   });
 };
+
+export const useCreateCategory = () => {
+  return useMutation({
+    mutationFn: (variables: CreateCategoryType) =>
+      api.createCategory(variables),
+  });
+};
+
+export const useGetCategories = () => {
+  return useQuery({
+    queryKey: ["categories"],
+    queryFn: () => api.getCategories(),
+  });
+};
diff --git a/src/pages/ticket/service/TicketServiec.ts b/src/pages/ticket/service/TicketServiec.ts
index e163232..09f45b4 100644
--- a/src/pages/ticket/service/TicketServiec.ts
+++ b/src/pages/ticket/service/TicketServiec.ts
@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { AddMessageTicketType } from "../types/TicketTypes";
+import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
 
 export const getTickets = async (status: string) => {
   const { data } = await axios.get(`/tickets/admin?status=${status}`);
@@ -23,3 +23,13 @@ export const closeTicket = async (id: string) => {
   const { data } = await axios.post(`/tickets/${id}/close`);
   return data;
 };
+
+export const createCategory = async (params: CreateCategoryType) => {
+  const { data } = await axios.post(`/tickets/category`, params);
+  return data;
+};
+
+export const getCategories = async () => {
+  const { data } = await axios.get(`/tickets/categories`);
+  return data;
+};
diff --git a/src/pages/ticket/types/TicketTypes.ts b/src/pages/ticket/types/TicketTypes.ts
index a7a93db..726d5fd 100644
--- a/src/pages/ticket/types/TicketTypes.ts
+++ b/src/pages/ticket/types/TicketTypes.ts
@@ -53,3 +53,19 @@ export type TicketMessageType = {
     id: string;
   }[];
 };
+
+export type CreateCategoryType = {
+  title: string;
+  description: string;
+  userGroupId: string;
+  isActive: boolean;
+};
+
+export type CategoriesItemType = {
+  id: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
diff --git a/src/pages/users/GroupCreate.tsx b/src/pages/users/GroupCreate.tsx
new file mode 100644
index 0000000..1437f76
--- /dev/null
+++ b/src/pages/users/GroupCreate.tsx
@@ -0,0 +1,136 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { useCreateGroup, useGetUsers } from './hooks/useUserData'
+import { useFormik } from 'formik'
+import { TickCircle } from 'iconsax-react'
+import { CreateGroupType, UserItemType } from './types/UserTypes'
+import * as Yup from 'yup'
+import PageLoading from '../../components/PageLoading'
+import Input from '../../components/Input'
+import CheckBoxComponent from '../../components/CheckBoxComponent'
+import Textarea from '../../components/Textarea'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+
+const GroupCreate: FC = () => {
+
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const [users, setUsers] = useState<string[]>([])
+    const createGroup = useCreateGroup()
+    const getUsers = useGetUsers('')
+
+    const formik = useFormik<CreateGroupType>({
+        initialValues: {
+            name: '',
+            description: '',
+            userIds: []
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+            if (users.length > 0) {
+                values.userIds = users
+                createGroup.mutate(values, {
+                    onSuccess: () => {
+                        formik.resetForm()
+                        navigate(Pages.users.groupList)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('user.error_count_users'))
+            }
+        }
+    })
+
+    const handleAdd = (id: string) => {
+        if (users.includes(id)) {
+            setUsers(users.filter(user => user !== id))
+        } else {
+            setUsers([...users, id])
+        }
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('user.group_add')}
+                </div>
+                <Button
+                    className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createGroup.isPending}
+                >
+                    <div className='flex gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div className='text-sm'>
+                            {t('user.submit_group')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            {
+                getUsers.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex gap-6 mt-9'>
+                        <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+
+                            <Input
+                                label={t('user.name')}
+                                {...formik.getFieldProps('name')}
+                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                            />
+
+                            <div className='mt-8'>
+                                <Textarea
+                                    label={t('description')}
+                                    {...formik.getFieldProps('description')}
+                                    error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+                                />
+                            </div>
+
+                            <div className='mt-8'>
+                                <div className='text-sm'>
+                                    {t('user.users')}
+                                </div>
+
+                                <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                                    {
+                                        getUsers.data?.data?.users?.map((item: UserItemType) => {
+                                            return (
+                                                <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                                    <CheckBoxComponent
+                                                        checked={users.includes(item.id)}
+                                                        onChange={() => handleAdd(item.id)}
+                                                    />
+                                                    <div className='mt-0.5'>{item.firstName + ' ' + item.lastName}</div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default GroupCreate
\ No newline at end of file
diff --git a/src/pages/users/GroupList.tsx b/src/pages/users/GroupList.tsx
new file mode 100644
index 0000000..8fd2c91
--- /dev/null
+++ b/src/pages/users/GroupList.tsx
@@ -0,0 +1,72 @@
+import { FC } from 'react'
+import { useGetGroups } from './hooks/useUserData'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { Add } from 'iconsax-react'
+import Td from '../../components/Td'
+import { GroupItemType } from './types/UserTypes'
+
+const GroupList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const getGroups = useGetGroups()
+
+    return (
+        <div className='mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('user.groups')}
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => navigate(Pages.users.groupList)}
+                    >
+                        <div className='flex gap-2'>
+                            <Add
+                                className='size-5'
+                                color='#fff'
+                            />
+                            <div>{t('user.group_add')}</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                <table className='w-full text-sm '>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={t('user.group_name')} />
+                            <Td text={t('user.user')} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => {
+                                return (
+                                    <tr key={item.id} className='tr'>
+                                        <Td text={item.name} />
+                                        <Td text={''}>
+                                            {item.users.map((user) => user.firstName + ' ' + user.lastName).join(', ')}
+                                        </Td>
+                                        {/* <Td text={''}>
+                                            <Link to={Pages.ticket.detail + '1'}>
+                                                <Eye size={20} color='#8C90A3' />
+                                            </Link>
+                                        </Td> */}
+                                    </tr>
+                                )
+                            })
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default GroupList
\ No newline at end of file
diff --git a/src/pages/users/hooks/useUserData.ts b/src/pages/users/hooks/useUserData.ts
index e47b058..d87390c 100644
--- a/src/pages/users/hooks/useUserData.ts
+++ b/src/pages/users/hooks/useUserData.ts
@@ -1,6 +1,10 @@
 import * as api from "../service/UserService";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { CreateRoleType, CreateUserType } from "../types/UserTypes";
+import {
+  CreateGroupType,
+  CreateRoleType,
+  CreateUserType,
+} from "../types/UserTypes";
 
 export const useGetPermissions = () => {
   return useQuery({
@@ -34,3 +38,16 @@ export const useGetUsers = (search: string) => {
     queryFn: () => api.getUsers(search),
   });
 };
+
+export const useCreateGroup = () => {
+  return useMutation({
+    mutationFn: (variables: CreateGroupType) => api.createGroup(variables),
+  });
+};
+
+export const useGetGroups = () => {
+  return useQuery({
+    queryKey: ["users-group"],
+    queryFn: () => api.getGroups(),
+  });
+};
diff --git a/src/pages/users/service/UserService.ts b/src/pages/users/service/UserService.ts
index a20030b..fb90f83 100644
--- a/src/pages/users/service/UserService.ts
+++ b/src/pages/users/service/UserService.ts
@@ -1,5 +1,9 @@
 import axios from "../../../config/axios";
-import { CreateRoleType, CreateUserType } from "../types/UserTypes";
+import {
+  CreateGroupType,
+  CreateRoleType,
+  CreateUserType,
+} from "../types/UserTypes";
 
 export const getPermissions = async () => {
   const { data } = await axios.get(`/users/permissions`);
@@ -25,3 +29,13 @@ export const getUsers = async (search: string) => {
   const { data } = await axios.get(`/users/admins?q=${search}`);
   return data;
 };
+
+export const createGroup = async (params: CreateGroupType) => {
+  const { data } = await axios.post(`/users/user-group`, params);
+  return data;
+};
+
+export const getGroups = async () => {
+  const { data } = await axios.get(`/users/user-group`);
+  return data;
+};
diff --git a/src/pages/users/types/UserTypes.ts b/src/pages/users/types/UserTypes.ts
index f35ac78..87e6f4c 100644
--- a/src/pages/users/types/UserTypes.ts
+++ b/src/pages/users/types/UserTypes.ts
@@ -38,3 +38,18 @@ export type UserItemType = {
   updatedAt: string;
   roles: RoleItemType[];
 };
+
+export type CreateGroupType = {
+  name: string;
+  description: string;
+  userIds: string[];
+};
+
+export type GroupItemType = {
+  id: string;
+  name: string;
+  description: string;
+  createdAt: string;
+  updatedAt: string;
+  users: UserItemType[];
+};
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 852ea66..7626e77 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -52,6 +52,8 @@ import PaymentList from '../pages/payment/List'
 import LearningCategory from '../pages/learning/Category'
 import CreateLearning from '../pages/learning/Create'
 import Plans from '../pages/service/Plans'
+import GroupCreate from '../pages/users/GroupCreate'
+import GroupList from '../pages/users/GroupList'
 
 const MainRouter: FC = () => {
 
@@ -112,6 +114,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.users.create} element={<CreateUser />} />
                             <Route path={Pages.users.roleList} element={<RolesList />} />
                             <Route path={Pages.users.roleCreate} element={<RoleCreate />} />
+                            <Route path={Pages.users.groupAdd} element={<GroupCreate />} />
+                            <Route path={Pages.users.groupList} element={<GroupList />} />
                             <Route path={Pages.cardBank.create} element={<CreateBankCard />} />
                             <Route path={Pages.cardBank.list} element={<CardBankList />} />
                             <Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
diff --git a/src/shared/components/UsersSubMenu.tsx b/src/shared/components/UsersSubMenu.tsx
index 33395f2..54d1367 100644
--- a/src/shared/components/UsersSubMenu.tsx
+++ b/src/shared/components/UsersSubMenu.tsx
@@ -46,6 +46,16 @@ const UsersSubMenu: FC = () => {
                     isActive={isActive('roles-add')}
                     link={Pages.users.roleCreate}
                 />
+                <SubMenuItem
+                    title={t('user.add_user_group')}
+                    isActive={isActive('group-add')}
+                    link={Pages.users.groupAdd}
+                />
+                <SubMenuItem
+                    title={t('user.list_user_group')}
+                    isActive={isActive('groups')}
+                    link={Pages.users.groupList}
+                />
             </div>
         </div>
     )