Build page Ticket management

BACKEND/Modules/Admin/app/Http/Controllers/TicketController.php

@@ -49,6 +49,21 @@ class TicketController extends Controller
             ]
         );
 
+        $this->searchRequest(
+            builder: $tickets,
+            value: $request->get('search'),
+            fields: [
+                'users.name',
+                "start_date",
+                "startPeriod.c_name",
+                "end_date",
+                "endPeriod.c_name",
+                "typeReason.c_name",
+                'status',
+                "reason",
+            ]
+        );
+
         $responseData = array_merge(
             $tickets
                 ->join('users', 'tickets.user_id', '=', 'users.id')
@@ -111,8 +126,58 @@ class TicketController extends Controller
             ]
         );
 
+        $this->searchRequest(
+            builder: $tickets,
+            value: $request->get('search'),
+            fields: [
+                'users.name',
+                "start_date",
+                "startPeriod.c_name",
+                "end_date",
+                "endPeriod.c_name",
+                "typeReason.c_name",
+                'status',
+                "reason",
+                "admin_note"
+            ]
+        );
+
+        if ($request->typeReason != '') {
+            $tickets = $tickets->where('tickets.type', '=', $request->typeReason);
+        }
+        if ($request->statusFilter != '') {
+            $tickets = $tickets->where('tickets.status', '=', $request->statusFilter);
+        }
+
         $responseData = array_merge(
-            $tickets->orderBy('created_at', 'desc')->paginate($request->get('per_page'))->toArray(),
+            $tickets
+                ->join('users', 'tickets.user_id', '=', 'users.id')
+                ->leftJoin("categories as startPeriod", function ($join) {
+                    $join->on('start_period', '=', 'startPeriod.c_code');
+                    $join->on('startPeriod.c_type', DB::raw("CONCAT('TIME_TYPE')"));
+                })
+                ->leftJoin("categories as endPeriod", function ($join) {
+                    $join->on('end_period', '=', 'endPeriod.c_code');
+                    $join->on('endPeriod.c_type', DB::raw("CONCAT('TIME_TYPE')"));
+                })
+                ->leftJoin("categories as typeReason", function ($join) {
+                    $join->on('type', '=', 'typeReason.c_code');
+                    $join->on('typeReason.c_type', DB::raw("CONCAT('REASON')"));
+                })
+                ->leftJoin("categories as statusTickets", function ($join) {
+                    $join->on('status', '=', 'statusTickets.c_code');
+                    $join->on('statusTickets.c_type', DB::raw("CONCAT('STATUS_TICKETS')"));
+                })
+                ->select(
+                    'users.name as user_name',
+                    'users.email',
+                    'tickets.*',
+                    'startPeriod.c_name as startPeriodName',
+                    'endPeriod.c_name as endPeriodName',
+                    'typeReason.c_name as typeReasonName',
+                    'statusTickets.c_name as statusTicketsName',
+                )
+                ->orderBy('tickets.created_at', 'desc')->paginate($request->get('per_page'))->toArray(),
             ['status' => true]
         );
 
@@ -210,7 +275,7 @@ class TicketController extends Controller
             return response()->json(['message' => "Ticket not found", 'status' => false]);
         }
         $results = $this->getAllPeriod($ticket->start_date, $ticket->start_period, $ticket->end_date, $ticket->end_period);
-        
+
         // $admin->id != user_id of ticket ---> continue
         // Confirm
         // Add records to the notes table like function Timekeeping.addNoteForUser() based on the $results array
@@ -251,6 +316,7 @@ class TicketController extends Controller
             $ticket['updated_by'] = $admin->name;
             $ticket['admin_note'] = $admin_note;
             $ticket['status'] = 'REFUSED';
+            $ticket->save();
             return response()->json(['message' => "refused", 'status' => true]);
         }
 

FRONTEND/src/api/Admin.ts

@@ -78,6 +78,8 @@ export const getLeaveManagement = API_URL + 'v1/admin/leave-management'
 export const updateNoteLeave = API_URL + 'v1/admin/leave-management/saveNoteLeave'
 
 //Tickets
+export const getTickets = API_URL + 'v1/admin/ticket/all'
 export const getTicketsOfUser = API_URL + 'v1/admin/ticket/getByUserId'
 export const deleteTicket = API_URL + 'v1/admin/ticket/delete'
-export const addTicket = API_URL + 'v1/admin/ticket/create'
+export const addTicket = API_URL + 'v1/admin/ticket/create'
+export const handleTicket = API_URL + 'v1/admin/ticket/handle-ticket'

FRONTEND/src/pages/Tickets/Tickets.tsx

@@ -64,6 +64,12 @@ interface DataTimeType {
   c_name: string
 }
 
+interface FilterInfo {
+  key: string
+  name: string
+  type: string
+}
+
 const Tickets = () => {
   const [listTickets, setListTiskets] = useState<TListTickets>({
     data: [],
@@ -127,7 +133,7 @@ const Tickets = () => {
     },
     {
       name: 'start_date',
-      size: '11%',
+      size: '8%',
       header: 'From Date',
       render: (row: any) => {
         return moment(row.start_date).format('DD/MM/YYYY')
@@ -140,7 +146,7 @@ const Tickets = () => {
     },
     {
       name: 'end_date',
-      size: '10%',
+      size: '8%',
       header: 'End Date',
       render: (row: any) => {
         return moment(row.end_date).format('DD/MM/YYYY')
@@ -153,7 +159,7 @@ const Tickets = () => {
     },
     {
       name: 'reason',
-      size: '20%',
+      size: '15%',
       header: 'Notes',
       render: (row: any) => {
         return (
@@ -178,7 +184,7 @@ const Tickets = () => {
     },
     {
       name: 'status',
-      size: '8%',
+      size: '5%',
       header: 'Status',
       render: (row: any) => {
         switch (row.status) {
@@ -193,6 +199,31 @@ const Tickets = () => {
         }
       },
     },
+    {
+      name: 'admin_note',
+      size: '15%',
+      header: 'Admin Notes',
+      render: (row: any) => {
+        return (
+          <HoverCard width={280} shadow="md">
+            <HoverCard.Target>
+              <Text fz={'sm'}>
+                {row.admin_note !== null &&
+                row.admin_note !== '' &&
+                row.admin_note.length > 25
+                  ? row.admin_note.slice(0, 25) + '...'
+                  : row.admin_note}
+              </Text>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Textarea size="sm" autosize>
+                {row.admin_note}
+              </Textarea>
+            </HoverCard.Dropdown>
+          </HoverCard>
+        )
+      },
+    },
     {
       name: '#',
       size: '5%',
@@ -215,23 +246,7 @@ const Tickets = () => {
     },
   ]
 
-  const filterInfo = [
+  const filterInfo: FilterInfo[] = []
-    {
-      key: 'reason',
-      name: 'Notes',
-      type: 'text',
-    },
-    {
-      key: 'start_date',
-      name: 'From Date',
-      type: 'date',
-    },
-    {
-      key: 'end_date',
-      name: 'End Date',
-      type: 'date',
-    },
-  ]
 
   const getAllTickets = async () => {
     try {

FRONTEND/src/pages/TicketsManagement/TicketsManagement.tsx

@@ -1,40 +1,28 @@
-import {
+import { getListMaster, getTickets, handleTicket } from '@/api/Admin'
-  addTicket,
-  deleteTicket,
-  getListMaster,
-  getTicketsOfUser,
-} from '@/api/Admin'
 import { DataTablePagination } from '@/components/DataTable/DataTable'
-import { Xdelete, create } from '@/rtk/helpers/CRUD'
+import { create } from '@/rtk/helpers/CRUD'
 import { get } from '@/rtk/helpers/apiService'
 import {
   Badge,
   Box,
   Button,
-  Dialog,
-  Group,
   HoverCard,
   Modal,
   Select,
   Text,
   Textarea,
 } from '@mantine/core'
-import { DateInput } from '@mantine/dates'
 import { useForm } from '@mantine/form'
 import { notifications } from '@mantine/notifications'
-import { IconTrash } from '@tabler/icons-react'
+import { IconCheckbox, IconSquareXFilled } from '@tabler/icons-react'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
 import classes from './TicketsManagement.module.css'
 
 type TTickets = {
-  id: number
+  ticket_id: number
-  start_period: string
+  admin_note: string
-  end_period: string
+  action: string
-  type: string
-  start_date: Date
-  end_date: Date
-  reason: string
 }
 
 type TListTickets = {
@@ -52,13 +40,13 @@ interface User {
   updated_at: string | null
 }
 
-interface DataReason {
+interface FilterInfo {
-  id: number
+  key: string
-  c_code: string
+  name: string
-  c_name: string
+  type: string
 }
 
-interface DataTimeType {
+interface DataReason {
   id: number
   c_code: string
   c_name: string
@@ -70,10 +58,11 @@ const TicketsManagement = () => {
   })
   const [action, setAction] = useState('')
   const [item, setItem] = useState({ id: 0 })
-  const [activeBtn, setActiveBtn] = useState(false)
   const [disableBtn, setDisableBtn] = useState(false)
-
+  const [filter, setFilter] = useState({
-  const [dataTimeType, setDataTimeType] = useState<DataTimeType[]>([])
+    typeReason: '',
+    statusFilter: '',
+  })
   const [dataReason, setDataReason] = useState<DataReason[]>([])
 
   const getListMasterByType = async (type: string) => {
@@ -97,11 +86,6 @@ const TicketsManagement = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const resultTimeType = await getListMasterByType('TIME_TYPE')
-      setDataTimeType(
-        resultTimeType.filter((item: DataTimeType) => item.c_code !== 'ALL'),
-      )
-
       const resultReason = await getListMasterByType('REASON')
       setDataReason(resultReason)
     }
@@ -127,7 +111,7 @@ const TicketsManagement = () => {
     },
     {
       name: 'start_date',
-      size: '11%',
+      size: '8%',
       header: 'From Date',
       render: (row: any) => {
         return moment(row.start_date).format('DD/MM/YYYY')
@@ -140,7 +124,7 @@ const TicketsManagement = () => {
     },
     {
       name: 'end_date',
-      size: '10%',
+      size: '8%',
       header: 'End Date',
       render: (row: any) => {
         return moment(row.end_date).format('DD/MM/YYYY')
@@ -153,7 +137,7 @@ const TicketsManagement = () => {
     },
     {
       name: 'reason',
-      size: '20%',
+      size: '15%',
       header: 'Notes',
       render: (row: any) => {
         return (
@@ -178,7 +162,7 @@ const TicketsManagement = () => {
     },
     {
       name: 'status',
-      size: '8%',
+      size: '5%',
       header: 'Status',
       render: (row: any) => {
         switch (row.status) {
@@ -193,6 +177,31 @@ const TicketsManagement = () => {
         }
       },
     },
+    {
+      name: 'admin_note',
+      size: '15%',
+      header: 'Admin Notes',
+      render: (row: any) => {
+        return (
+          <HoverCard width={280} shadow="md">
+            <HoverCard.Target>
+              <Text fz={'sm'}>
+                {row.admin_note !== null &&
+                row.admin_note !== '' &&
+                row.admin_note.length > 25
+                  ? row.admin_note.slice(0, 25) + '...'
+                  : row.admin_note}
+              </Text>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <Textarea size="sm" autosize>
+                {row.admin_note}
+              </Textarea>
+            </HoverCard.Dropdown>
+          </HoverCard>
+        )
+      },
+    },
     {
       name: '#',
       size: '5%',
@@ -200,11 +209,22 @@ const TicketsManagement = () => {
       render: (row: any) => {
         return row.status === 'WAITING' ? (
           <Box className={classes.optionIcon}>
-            <IconTrash
+            <IconCheckbox
+              className={classes.editIcon}
+              onClick={() => {
+                setAction('confirm')
+                setItem(row)
+                form.reset()
+              }}
+              width={20}
+              height={20}
+            />
+            <IconSquareXFilled
               className={classes.deleteIcon}
               onClick={() => {
-                setAction('delete')
+                setAction('refuse')
                 setItem(row)
+                form.reset()
               }}
               width={20}
               height={20}
@@ -215,28 +235,53 @@ const TicketsManagement = () => {
     },
   ]
 
-  const filterInfo = [
+  const filterInfo: FilterInfo[] = [
-    {
+    // {
-      key: 'reason',
+    //   key: 'users.name',
-      name: 'Notes',
+    //   name: 'User',
-      type: 'text',
+    //   type: 'text',
-    },
+    // },
-    {
+    // {
-      key: 'start_date',
+    //   key: 'start_date',
-      name: 'From Date',
+    //   name: 'From Date',
-      type: 'date',
+    //   type: 'date',
-    },
+    // },
-    {
+    // {
-      key: 'end_date',
+    //   key: 'startPeriod.c_name',
-      name: 'End Date',
+    //   name: 'Start Period',
-      type: 'date',
+    //   type: 'text',
-    },
+    // },
+    // {
+    //   key: 'end_date',
+    //   name: 'End Date',
+    //   type: 'date',
+    // },
+    // {
+    //   key: 'endPeriod.c_name',
+    //   name: 'End Period',
+    //   type: 'text',
+    // },
+    // {
+    //   key: 'typeReason.c_name',
+    //   name: 'Reason',
+    //   type: 'text',
+    // },
+    // {
+    //   key: 'status',
+    //   name: 'Status',
+    //   type: 'text',
+    // }
   ]
 
   const getAllTickets = async () => {
     try {
       const searchParams = new URLSearchParams(window.location.search)
-      const params = {}
+      console.log(searchParams, 'searchParams')
+
+      const params = {
+        typeReason: filter.typeReason,
+        statusFilter: filter.statusFilter,
+      }
 
       for (const [key, value] of searchParams.entries()) {
         if (key === 'page' && value === '') {
@@ -245,8 +290,9 @@ const TicketsManagement = () => {
           Object.assign(params, { [`${key}`]: value })
         }
       }
+      console.log(params, 'params')
 
-      const res = await get(getTicketsOfUser, params)
+      const res = await get(getTickets, params)
       if (res.status) {
         setListTiskets(res)
       }
@@ -259,18 +305,14 @@ const TicketsManagement = () => {
     }
   }
 
-  const handleCreate = async (values: TTickets) => {
+  const handleSave = async (values: TTickets) => {
     try {
       const res = await create(
-        addTicket,
+        handleTicket,
         {
-          // time_string: moment(values.time_string).format('YYYY-MM-DD HH:mm:ss'),
+          ticket_id: item.id,
-          start_date: moment(values.start_date).format('YYYY-MM-DD'),
+          action: action,
-          start_period: values.start_period,
+          admin_note: values.admin_note,
-          end_date: moment(values.end_date).format('YYYY-MM-DD'),
-          end_period: values.end_period,
-          type: values.type,
-          reason: values.reason,
         },
         getAllTickets,
       )
@@ -283,27 +325,15 @@ const TicketsManagement = () => {
     }
   }
 
-  const handleDelete = async (id: number) => {
-    try {
-      await Xdelete(deleteTicket, { ticket_id: id }, getAllTickets)
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
   useEffect(() => {
     getAllTickets()
-  }, [])
+  }, [filter])
 
   const form = useForm({
     initialValues: {
-      id: 0,
+      ticket_id: 0,
-      start_date: new Date(),
+      action: '',
-      start_period: '',
+      admin_note: '',
-      end_date: new Date(),
-      end_period: '',
-      type: '',
-      reason: '',
     },
   })
 
@@ -314,172 +344,94 @@ const TicketsManagement = () => {
           <Text>Admin/</Text>
           Tickets Management
         </h3>
-        <Button
-          m={5}
-          onClick={() => {
-            setAction('add')
-            form.reset()
-          }}
-        >
-          + Add
-        </Button>
       </div>
-      <Box p={20}>
+      <Box display={'flex'} p={15}>
+        <Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
+          <Box w="100%" display={'flex'}>
+            <Select
+              clearable
+              w="50%"
+              value={filter.typeReason}
+              size="xs"
+              label="Reason"
+              data={dataReason.map((user) => ({
+                value: user.c_code.toString(),
+                label: user.c_name,
+              }))}
+              onChange={(e) => {
+                setFilter({ ...filter, typeReason: e! })
+              }}
+            ></Select>
+            <Select
+              clearable
+              w="50%"
+              value={filter.statusFilter}
+              size="xs"
+              ml={'sm'}
+              label="Status"
+              data={[
+                { value: 'WAITING', label: 'WAITING' },
+                { value: 'CONFIRM', label: 'CONFIRM' },
+                { value: 'REFUSED', label: 'REFUSED' },
+              ]}
+              onChange={(e) => {
+                setFilter({ ...filter, statusFilter: e! })
+              }}
+            ></Select>
+          </Box>
+        </Box>
+      </Box>
+      <Box>
         {listTickets.data.length > 0 && (
           <DataTablePagination
             filterInfo={filterInfo}
             data={listTickets}
             columns={columns}
-            // searchInput
+            searchInput
             size=""
           />
         )}
       </Box>
 
-      {/* Add/Edit User modal */}
       <Modal
-        opened={action === 'add' || action === 'edit'}
+        opened={action === 'confirm' || action === 'refuse'}
         onClose={() => {
           setAction('')
           form.reset()
         }}
         title={
           <Text pl={'sm'} fw={700} fz={'lg'}>
-            {action === 'add' && 'Add Ticket'}
+            {action === 'confirm' ? 'Confirm Ticket' : 'Refuse Ticket'}
           </Text>
         }
       >
         <form
           onSubmit={form.onSubmit(async (values) => {
             setDisableBtn(true)
-            action === 'add' && (await handleCreate(values))
+            await handleSave(values)
             setDisableBtn(false)
           })}
         >
           <Box pl={'md'} pr={'md'}>
-            <Box display={'flex'}>
-              <Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
-                <DateInput
-                  required
-                  mb={'md'}
-                  label={'From Date'}
-                  value={new Date(form.values.start_date)}
-                  valueFormat="DD/MM/YYYY"
-                  onChange={(e) => form.setFieldValue('start_date', e!)}
-                ></DateInput>
-
-                <Select
-                  required
-                  mb={'md'}
-                  label={'Start Period'}
-                  data={dataTimeType.map((item) => {
-                    return { value: item.c_code.toString(), label: item.c_name }
-                  })}
-                  value={form.values.start_period}
-                  error={form.errors.start_period}
-                  onChange={(e) => form.setFieldValue('start_period', e!)}
-                />
-
-                <Select
-                  required
-                  mb={'md'}
-                  searchable
-                  label="Type"
-                  data={dataReason.map((user) => ({
-                    value: user.c_code.toString(),
-                    label: user.c_name,
-                  }))}
-                  value={form.values.type}
-                  error={form.errors.type}
-                  onChange={(e) => form.setFieldValue('type', e!)}
-                />
-              </Box>
-              <Box
-                style={{ display: 'flex', flexFlow: 'column' }}
-                w={'20%'}
-              ></Box>
-              <Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
-                <DateInput
-                  required
-                  mb={'md'}
-                  label={'End Date'}
-                  value={new Date(form.values.end_date)}
-                  valueFormat="DD/MM/YYYY"
-                  onChange={(e) => form.setFieldValue('end_date', e!)}
-                ></DateInput>
-                <Select
-                  required
-                  mb={'md'}
-                  label={'End Period'}
-                  data={dataTimeType.map((item) => {
-                    return { value: item.c_code.toString(), label: item.c_name }
-                  })}
-                  value={form.values.end_period}
-                  error={form.errors.end_period}
-                  onChange={(e) => form.setFieldValue('end_period', e!)}
-                />
-              </Box>
-            </Box>
-
             <Textarea
-              label="Reason"
+              label="Admin Notes"
               required
-              value={form.values.reason}
+              value={form.values.admin_note}
-              onChange={(e) => form.setFieldValue('reason', e.target.value)}
+              onChange={(e) => form.setFieldValue('admin_note', e.target.value)}
             />
             <Box ta={'center'}>
-              {action === 'add' && (
+              <Button
-                <Button
+                mt={'lg'}
-                  mt={'lg'}
+                bg={'green'}
-                  bg={'green'}
+                type="submit"
-                  type="submit"
+                disabled={disableBtn}
-                  disabled={disableBtn}
+              >
-                >
+                Save
-                  Create
+              </Button>
-                </Button>
-              )}
             </Box>
           </Box>
         </form>
       </Modal>
-
-      <Dialog
-        className={classes.dialog}
-        opened={action === 'delete'}
-        withCloseButton
-        onClose={() => setAction('')}
-        size="lg"
-        radius="md"
-        position={{ top: 30, right: 10 }}
-      >
-        <Text className={classes.dialogText} size="sm" mb="xs" fw={500}>
-          Do you want to delete this record?
-          <Group justify="center" m={10}>
-            <Button
-              disabled={activeBtn}
-              fw={700}
-              size="xs"
-              variant="light"
-              onClick={async () => {
-                setActiveBtn(true)
-                await handleDelete(item.id)
-                setActiveBtn(false)
-                setAction('')
-              }}
-            >
-              Yes
-            </Button>
-            <Button
-              fw={700}
-              size="xs"
-              variant="light"
-              onClick={() => setAction('')}
-            >
-              Cancel
-            </Button>
-          </Group>
-        </Text>
-      </Dialog>
     </div>
   )
 }