Report Request LOG dan Final LOG

frontend/dashboard/src/pages/CustomerService/Request/List.tsx

@@ -9,6 +9,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableSortLabel,
   TableRow,
   TextField,
   Typography,
@@ -26,6 +27,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
+import { visuallyHidden } from '@mui/utils';
 
 import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import ApprovalIcon from '../../../../build/icons/ic_approval.svg';
@@ -57,6 +59,7 @@ import { RequestLogType } from '../Request/Model/Types';
 import SvgIconStyle from '../../../components/SvgIconStyle';
 import { Delete } from '@mui/icons-material';
 import DialogDeleteRequestLOG from '../Request/Components/DialogDeleteRequestLOG';
+import { HeadCell, Order } from '@/@types/table';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
@@ -298,8 +301,15 @@ export default function List() {
 
   const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/customer-service/request', { params: filter });
+    const parameters =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+
+      const response = await axios.get('/customer-service/request', {
+        params: { ...parameters },
+      });
+      
     setDataTableLoading(false);
     setDataTableData(response.data);
   };
@@ -319,10 +329,6 @@ export default function List() {
   const [idRequestLog, setidRequestLog] = useState<number>();
   const [openDialogDeleteRequestLog, setDialogDeleteRequestLog] = useState(false)
 
-  useEffect(() => {
-    loadDataTableData();
-  }, []);
-
   const headStyle = {
     fontWeight: 'bold',
   };
@@ -484,6 +490,104 @@ export default function List() {
     /* ------------------ END TABLE ROW ------------------ */
   }
 
+  /* -------------------------------- headCell -------------------------------- */
+  const headCells: HeadCell<never>[] = [
+    {
+      id: 'code',
+      align: 'left',
+      label: 'Code',
+      isSort: true,
+    },
+    {
+      id: 'provider',
+      align: 'left',
+      label: 'Provider',
+      isSort: false,
+    },
+
+    {
+      id: 'name',
+      align: 'left',
+      label: 'Name',
+      isSort: false,
+    },
+    {
+      id: 'submission_date',
+      align: 'left',
+      label: 'Submision Date',
+      isSort: true,
+    },
+    {
+      id: 'service_code',
+      align: 'left',
+      label: 'Service Type',
+      isSort: true,
+    },
+    {
+      id: 'claim_method',
+      align: 'left',
+      label: 'Claim Method',
+      isSort: false,
+    },
+    {
+      id: 'status',
+      align: 'left',
+      label: 'Status',
+      isSort: true,
+    },
+    {
+      id: '',
+      align: 'left',
+      label: 'Action',
+      isSort: false,
+    },
+  ];
+  /* -------------------------------------------------------------------------- */
+
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    handleRequestSort(event, property);
+  };
+
+  /* ------------------------------ handle params ----------------------------- */
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const params = {
+    searchParams: searchParams,
+    setSearchParams: setSearchParams,
+    appliedParams: appliedParams,
+    setAppliedParams: setAppliedParams,
+  };
+
+  /* ------------------------------ handle order ------------------------------ */
+  const [order, setOrder] = useState<Order>('desc');
+  const [orderBy, setOrderBy] = useState('submission_date');
+
+  const orders = {
+    order: order,
+    setOrder: setOrder,
+    orderBy: orderBy,
+    setOrderBy: setOrderBy,
+  };
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orders?.orderBy === property && orders?.order === 'asc';
+
+    orders?.setOrder(isAsc ? 'desc' : 'asc');
+    orders?.setOrderBy(property);
+    const parameters = Object.fromEntries([
+      ...(params?.searchParams.entries() as IterableIterator<[string, string]>),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    params?.setAppliedParams(parameters);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+
+
   function TableContent() {
     return (
       <Table aria-label="collapsible table">
@@ -494,7 +598,7 @@ export default function List() {
             {/* <TableCell style={headStyle} align="left">
               ID Request LOG
             </TableCell> */}
-            <TableCell style={headStyle} align="left">
+            {/* <TableCell style={headStyle} align="left">
               Code
             </TableCell>
             <TableCell style={headStyle} align="left">
@@ -504,7 +608,17 @@ export default function List() {
               Name
             </TableCell>
             <TableCell style={headStyle} align="left">
-              Date of Submission
+              <TableSortLabel
+                    active={true}
+                    direction={'desc'}
+                    onClick={() => {}}
+                  >
+                    Submision Date
+                    
+                    <Box component="span" sx={visuallyHidden}>
+                     sorted ascending
+                    </Box>
+              </TableSortLabel>
             </TableCell>
             <TableCell style={headStyle} align="left">
               Service Type
@@ -515,7 +629,37 @@ export default function List() {
             <TableCell style={headStyle} align="left">
               Status
             </TableCell>
-            <TableCell style={headStyle} align="right"></TableCell>
+            <TableCell style={headStyle} align="right"></TableCell> */}
+
+          {headCells &&
+            headCells.map((headCell, index) => (
+              <TableCell
+                key={index}
+                sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                // @ts-ignore
+                align={headCell.align}
+                sx={{ padding: 2 }}
+                width={headCell.width ? headCell.width : 'auto'}
+              >
+                {headCell.isSort ? (
+                  <TableSortLabel
+                    active={orders?.orderBy === headCell.id}
+                    direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                    onClick={createSortHandler(headCell.id)}
+                  >
+                    {headCell.label}
+                    {orders?.orderBy === headCell.id ? (
+                      <Box component="span" sx={visuallyHidden}>
+                        {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                      </Box>
+                    ) : null}
+                  </TableSortLabel>
+                ) : (
+                  headCell.label
+                )}
+              </TableCell>
+            ))}
+
           </TableRow>
         </TableHead>
         {/* ------------------ END TABLE HEADER ------------------ */}