sort di final log dan menampilkan admission

Modules/Internal/Transformers/RequestLogResource.php

@@ -24,7 +24,8 @@ class RequestLogResource extends JsonResource
         $data = [
             'id' => $this->id,
             'code' => $this->code,
-            'submission_date' => $this->submission_date,
+            'submission_date' => $this->created_at, // submsion_date diambil dari kolom created_at
+            'admission_date' => $this->submission_date, // admission_date diambil dari kolom submission
             'submission_date_fgl' => $this->approved_final_log_at,
             'member_name' => $this->member->name,
             'status' => $this->status ?? 'unknown',

Modules/Internal/Transformers/RequestLogShowResource.php

@@ -106,7 +106,8 @@ class RequestLogShowResource extends JsonResource
             'principal_id' => $requestLog['member']['principal_id'] ? $requestLog['member']['principal_id'] : '-',
             'principal_name' => $requestLog['member']['principal_id'] ? Helper::principalName($requestLog['member']['principal_id']) : '-',
             'relation_with_principal' => Helper::relationWithPrincipal($requestLog['member']['relation_with_principal']),
-            'submission_date' => $requestLog['submission_date'],
+            'submission_date' => $requestLog['created_at'],
+            'admission_date' => $requestLog['submission_date'],
             'approved_final_log_at' => $requestLog['approved_final_log_at'], // submission final log
             'discharge_date' => $requestLog['discharge_date'],
             'service_type' => Helper::serviceName($requestLog['service_code']),

frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx

@@ -202,6 +202,10 @@ export default function Detail() {
                             <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
                             <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
                         </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.admission_date ? fDateTimesecond(requestLog?.admission_date) : '-'}</Typography>
+                        </Stack>
 
                         <Stack direction='row' spacing={2} sx={marginBottom1}>
                             <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>

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

@@ -8,6 +8,7 @@ import {
   MenuItem,
   Table,
   TableBody,
+  TableSortLabel,
   TableCell,
   TableRow,
   TextField,
@@ -48,10 +49,12 @@ import { capitalizeFirstLetter } from '@/utils/formatString';
 import Label from '@/components/Label';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
 import { Import } from '@/@types/claims';
+import { visuallyHidden } from '@mui/utils';
 
 import { FinalLogType } from '../FinalLog/Model/Types';
 import DialogDeleteFinalLOG from './Components/DialogDeleteFinalLOG';
 import { Delete } from '@mui/icons-material';
+import { HeadCell, Order } from '@/@types/table';
 // import LoadingButton from '@/theme/overrides/LoadingButton';
 
 export default function List() {
@@ -284,8 +287,14 @@ 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?final_log=1&service_code=OP', { 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?final_log=1&service_code=OP', {
+      params: { ...parameters },
+    });
     // console.log(response.data);
     setDataTableLoading(false);
 
@@ -472,38 +481,139 @@ 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: 'Admission 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],
+    ]);
+    console.log(parameters)
+    params?.setAppliedParams(parameters);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+
+
+
   function TableContent() {
     return (
       <Table aria-label="collapsible table">
         {/* ------------------ TABLE HEADER ------------------ */}
         <TableHead>
           <TableRow>
-            {/* <TableCell style={headStyle} align="left" /> */}
-            {/* <TableCell style={headStyle} align="left">
-              ID Request LOG
-            </TableCell> */}
-            <TableCell style={headStyle} align="left">
-              Code
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Provider
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Name
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Date of Submission
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Service Type
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Claim Method
-            </TableCell>
-            <TableCell style={headStyle} align="left">
-              Status
-            </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 ------------------ */}

frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx

@@ -36,6 +36,7 @@ export type DetailFinalLogType = {
     gender              : string,
     marital_status      : string,
     submission_date     : string,
+    admission_date      : string,
     approved_final_log_at : string,
     service_type        : string,
     claim_method        : string,

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

@@ -334,7 +334,7 @@ export default function List() {
   };
 
   // Called on every row to map the data to the columns
-  function createData(data: RequestLogType): any {
+  function createData(data: RequestLogType) {
     return {
       ...data,
     };
@@ -368,7 +368,7 @@ export default function List() {
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.provider}</TableCell>
           <TableCell align="left">{row.member_name}</TableCell>
-          <TableCell align="left"><Label>{fDateTimesecond(row.submission_date)}</Label></TableCell>
+          <TableCell align="left"><Label>{fDateTimesecond(row.admission_date)}</Label></TableCell>
           <TableCell align="left">{row.service_name}</TableCell>
           <TableCell align="left">{row.payment_type_name}</TableCell>
           <TableCell align="left">
@@ -514,7 +514,7 @@ export default function List() {
     {
       id: 'submission_date',
       align: 'left',
-      label: 'Submision Date',
+      label: 'Admission Date',
       isSort: true,
     },
     {

frontend/dashboard/src/pages/CustomerService/Request/Model/Types.tsx

@@ -15,7 +15,10 @@ export type RequestLogType = {
     code                : string,
     member              : Member,
     submission_date     : string,
+    admission_date      : string,
     service_name        : string,
+    provider            : string,
+    member_name         : string,
     payment_type_name   : string,
     status_final_log    : string,
     status              : string,