Merge remote-tracking branch 'origin/staging' into origin/production

Modules/Client/Http/Controllers/Api/CorporateMemberController.php

@@ -188,15 +188,26 @@ class CorporateMemberController extends Controller
     public function showPerMember(Request $request, $corporate_id, $member_id)
     {
         $per_page = $request->has('per_page') ? $request->input('per_page') : 10;
-
+        $member = Member::query()
-        $data = Member::query()
-            ->with(['requestLogs'])
             ->whereHas('currentCorporate', function ($query) use ($corporate_id) {
                 $query->where('corporate_id', $corporate_id);
             })
             ->find($member_id);
-
+        $data = RequestLog::where([
-        return response()->json(['full_name' => $data->full_name ?? null, 'paginations' => Helper::paginateResources(DataListClaimMemberResource::collection($data->requestLogs()->paginate($per_page)))]);
+                    'member_id' => $member->id,
+                    'deleted_at' => null
+                    ])
+                    ->when($request->has('orderBy'), function ($query) use ($request) {
+                        $orderBy = match ($request->input('orderBy')) {
+                            'admission_date' => 'request_logs.submission_date',
+                            'discharge_date' => 'request_logs.discharge_date',
+                            'code' => 'request_logs.code',
+                            default => ''
+                        };
+                        $query->getQuery()->orderBy($orderBy, $request->order);
+                    })
+                ->paginate($per_page);
+        return response()->json(['full_name' => $member->full_name?? null, 'paginations' => Helper::paginateResources(DataListClaimMemberResource::collection($data))]);
     }
 
     public function serviceMonitoring(int $corporate_id, int $request_log_id)
@@ -211,7 +222,7 @@ class CorporateMemberController extends Controller
                 'requestLogBenefits:id,request_log_id,benefit_id,amount_incurred,amount_approved,amount_not_approved,excess_paid,keterangan' => [
                     'benefit'
                 ],
-                'requestLogDailyMonitorings:id,request_log_id,created_at,subject,body_temperature,sistole,diastole,respiration_rate,analysis,lab_date,provider,examination' => [
+                'requestLogDailyMonitorings:id,request_log_id,submission_date,subject,body_temperature,sistole,diastole,respiration_rate,analysis,lab_date,provider,examination' => [
                     'requestLogMedicalPlans:request_log_daily_monitoring_id,plan,type',
                     // 'document'
                 ],

Modules/Client/Transformers/AlarmCenter/DataListClaimMemberResource.php

@@ -4,6 +4,7 @@ namespace Modules\Client\Transformers\AlarmCenter;
 
 use Illuminate\Http\Resources\Json\JsonResource;
 use App\Models\Service;
+use App\Models\Organization;
 
 class DataListClaimMemberResource extends JsonResource
 {
@@ -16,10 +17,15 @@ class DataListClaimMemberResource extends JsonResource
     public function toArray($request)
     {
         $serviceData = Service::where('code', $this->service_code)->first();
+        $organization = Organization::where('id', $this->organization_id)->first();
+        $organizationName = '-';
+        if ($organization){
+            $organizationName = $organization->name;
+        } 
         if ($serviceData) {
             $serviceName = $serviceData->name;
         } else {
-            $serviceName = $this->service_cod;
+            $serviceName = $this->service_code;
         }
 
         if ($this->status == 'approved' && $this->status_final_log ){
@@ -34,6 +40,7 @@ class DataListClaimMemberResource extends JsonResource
             'admission_date' => $this->submission_date ?? null,
             'discharge_date' => $this->discharge_date ?? null,
             'code' => $this->code ?? null,
+            'provider_name' => $organizationName ?? null,
             'service_type' => $serviceName,
             'status' => $status,
         ];

Modules/Client/Transformers/AlarmCenter/DataServiceMonitoring.php

@@ -111,7 +111,7 @@ class DataServiceMonitoring extends JsonResource
             'dischargeDate' => $this->discharge_date ?? null,
             'dailyMonitorings' => $this->when($this->service_code === 'IP', collect($this->requestLogDailyMonitorings)
                 ->groupBy(function ($requestLogDailyMonitoring) {
-                    return $requestLogDailyMonitoring->created_at->format('d M Y');
+                    return Carbon::parse($requestLogDailyMonitoring->submission_date)->format('d M Y');
                 })
                 ->map(function ($groupedItems) {
                     return collect($groupedItems)
@@ -138,7 +138,7 @@ class DataServiceMonitoring extends JsonResource
 
                             
                             return [
-                                'time' => $requestLogDailyMonitoring->created_at->format('H:i') ?? null,
+                                'time' => Carbon::parse($requestLogDailyMonitoring->submission_date)->format('H:i') ?? null,
                                 'status' => 'Done' ?? null,
                                 'subject' => $requestLogDailyMonitoring->subject ?? null,
                                 'bodyTemperature' => $requestLogDailyMonitoring->body_temperature ?? null,
@@ -168,18 +168,18 @@ class DataServiceMonitoring extends JsonResource
                     return Carbon::createFromFormat('d M Y', $date)->format('Y-m-d');
                 })
                 ->all()) ?? null,
-            'laboratoriumResults' => $this->whenLoaded('requestLogDailyMonitorings', collect($this->requestLogDailyMonitorings)
+            'laboratoriumResults' => $this->when($this->service_code === 'IP', collect($this->requestLogDailyMonitorings)
                 ->groupBy(function ($requestLogDailyMonitoring) {
                     return Carbon::parse($requestLogDailyMonitoring->lab_date)->format('d M Y');
                 })
                 ->map(function ($groupedItems) {
                     return collect($groupedItems)
-                        ->map(function ($requestLogDailyMonitoring) {
+                        ->map(function ($test) {
                             $arr_document = [];
                             $document     = DB::table('files')
                                                 ->where([
                                                     'fileable_type' => 'App\Models\LaboratoriumResult', 
-                                                    'fileable_id' => $requestLogDailyMonitoring->id,
+                                                    'fileable_id' => $test->id,
                                                     'deleted_at' => null
                                                 ])
                                                 ->whereIn('type', ['laboratorium-result'])
@@ -195,10 +195,10 @@ class DataServiceMonitoring extends JsonResource
                                 }
                             }
                             return [
-                                'code' => $requestLogDailyMonitoring->code,
+                                'code' => $test->code,
-                                'date' => Carbon::parse($requestLogDailyMonitoring->lab_date)->format('d M Y') ?? null,
+                                'date' => Carbon::parse($test->lab_date)->format('d M Y') ?? null,
-                                'examination' => $requestLogDailyMonitoring->examination ?? null,
+                                'examination' => $test->examination ?? null,
-                                'location' => $requestLogDailyMonitoring->provider ?? null,
+                                'location' => $test->provider ?? null,
                                 'files' => $arr_document
                             ];
                         })

Modules/Internal/Http/Controllers/Api/DailyMonitoringController.php

@@ -1,7 +1,7 @@
 <?php
 
 namespace Modules\Internal\Http\Controllers\Api;
-
+use App\Helpers\Helper;
 use App\Models\DailyMonitoring;
 use App\Models\RequestDailyMonitoring;
 use App\Models\MedicalPlan;
@@ -10,8 +10,10 @@ use Exception;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 use Illuminate\Support\Facades\Validator;
+use Modules\Internal\Transformers\DailyMonitoringResource;
 use App\Models\File;
 
+
 /**
  * Bagaskoro BSD 27-10-2023
  *
@@ -36,7 +38,7 @@ class DailyMonitoringController extends Controller
     /**
      * Member List
      */
-    public function GetMemberList()
+    public function GetMemberList(Request $request)
     {
         $memberList = DB::table('request_logs')
             ->leftJoin('members', 'request_logs.member_id', '=', 'members.id')
@@ -45,18 +47,18 @@ class DailyMonitoringController extends Controller
             ->select('members.member_id','members.name','members.members_effective_date AS startdate','members.members_expire_date AS enddate', 'request_logs.submission_date as addmision_date', 'organizations.name as provider' )
             ->where('request_logs.service_code', 'IP')
             ->where('request_logs.deleted_at', null)
+            ->when($request->search, function ($q, $search) {
+                $q->where('members.member_id', 'LIKE', "%".$search."%");
+                $q->orWhere('members.name','LIKE',"%".$search."%");
+            })
             // ->where('request_logs.status_final_log', 'approved')
             ->groupBy('request_logs.member_id')
             ->orderBy('request_logs.created_at', 'desc')
-            ->get();
+            // ->get()
+            ->paginate();
 
-        return response()->json([
+        
-            'error'   => false,
+        return Helper::paginateResources(DailyMonitoringResource::collection($memberList));
-            'message' => "success",
-            'data'    => [
-                'member_list'=> $memberList,
-            ]
-        ],200);
     }
 
     /**
@@ -76,8 +78,12 @@ class DailyMonitoringController extends Controller
             ->where('request_logs.service_code', 'IP')
             ->where('request_logs.status_final_log', 'approved')
             ->where("request_logs.member_id", "=", $memberDetail->id)
+            ->when($request->search, function ($q, $search) {
+                $q->where('request_logs.code', 'LIKE', "%".$search."%");
+            })
             ->orderBy("request_logs.created_at", "desc")
-            ->get();
+            // ->get()
+            ->paginate();
 
         return response()->json([
             'error'   => false,

Modules/Internal/Transformers/DailyMonitoringResource.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Modules\Internal\Transformers;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class DailyMonitoringResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request
+     * @return array
+     */
+    public function toArray($request)
+    {
+
+        $data = [
+            'member_id' => $this->member_id,
+            'name' => $this->name,
+            'start_date' => $this->startdate,
+            'end_date' => $this->enddate,
+            'addmision_date' => $this->addmision_date,
+            'provider' => $this->provider,
+        ];
+
+        return $data;
+    }
+}

Modules/Internal/Transformers/RequestLogResource.php

@@ -24,8 +24,8 @@ class RequestLogResource extends JsonResource
         $data = [
             'id' => $this->id,
             'code' => $this->code,
-            'created_at' => $this->created_at,
+            'submission_date' => $this->created_at, // submsion_date diambil dari kolom created_at
-            'submission_date' => $this->submission_date,
+            '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,8 +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']),
-            'admission_date' => $requestLog['submission_date'], // admission mengacu pada tanggal submit
+            'submission_date' => $requestLog['created_at'],
-            'submission_date' => $requestLog['created_at'], // submission mengacu pada tanggal buat
+            '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/client-portal/src/pages/AlarmCenter/ListMember.tsx

@@ -109,6 +109,12 @@ export default function List() {
       label: 'Code',
       isSort: true,
     },
+    {
+      id: 'provider_name',
+      align: 'left',
+      label: 'Provider',
+      isSort: false,
+    },
     {
       id: 'service_type',
       align: 'center',

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/ClaimList.tsx

@@ -2,7 +2,7 @@
  * Core
  * ============================================
  */
-import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Grid, Stack } from "@mui/material";
 
 /**
  * Component
@@ -15,65 +15,232 @@ import ClaimListRow from "./ClaimListRow";
  * ============================================
  */
 import { ClaimListType } from "../Model/Types";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import axios from "@/utils/axios";
+import { enqueueSnackbar } from "notistack";
+import { Button } from "@mui/material";
+import DataTable from '../../../../components/LaravelTable';
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from "@/@types/paginated-data";
+import { useParams, useSearchParams } from "react-router-dom";
+import { TextField } from "@mui/material";
+import { ButtonGroup } from "@mui/material";
 
 type Props = {
     claim_list: ClaimListType[] | null,
 }
 
 export default function ClaimList({ ...props }: Props) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { member_id } = useParams();
+    // State
+    // --------------------
+    const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
+    const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+        LaravelPaginatedDataDefault
+    );
     // Tabel Style
     // --------------------
     const TableHeadStyle = {
         fontWeight: 'bold',
     };
 
-    return (
+     // Load Data
-        <Box>
+    // -------------------
-            <TableContainer component={Paper}>
+    const loadDataTableData = async (appliedFilter: any | null = null) => {
-                <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+        setDataTableLoading(true);
-                    {/* Head Table */}
+        const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-                    <TableHead>
+       
-                        <TableRow>
+        const response = await axios.get('/case_management/claimlist/'+member_id, {params: filter})
-                            <TableCell style={TableHeadStyle} align="left" width={50} />
+        setDataTableLoading(false);
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+        setDataTableData(response.data);
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
+    }
-                            <TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
-                            <TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
-                            <TableCell align="left" width={"10"} />
-                        </TableRow>
-                    </TableHead>
 
-                    {/* Body Table */}
+    const applyFilter = async (searchFilter: { search: string }) => {
-                    {props.claim_list == null ?
+        await loadDataTableData(searchFilter);
+        setSearchParams(searchFilter);
+    };
+
+    const handlePageChange = (event: ChangeEvent, value: number): void => {
+        const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+        
+        loadDataTableData(filter);
+        setSearchParams(filter);
+    };
+
+    useEffect(() => {
+        loadDataTableData();
+    }, [])
+
+    function SearchInput(props: any) {
+        // SEARCH
+        const searchInput = useRef<HTMLInputElement>(null);
+        const [searchText, setSearchText] = useState('');
+    
+        const handleSearchChange = (event: any) => {
+          const newSearchText = event.target.value ?? '';
+          setSearchText(newSearchText);
+        };
+    
+        const handleSearchSubmit = (event: any) => {
+          event.preventDefault();
+          props.onSearch({ search: searchText }); // Trigger to Parent
+        };
+    
+        useEffect(() => {
+          // Trigger First Search
+          setSearchText(searchParams.get('search') ?? '');
+        }, []);
+    
+        return (
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Code'
+            />
+          </form>
+        );
+    }
+
+    function ImportForm(props: any) {
+        // IMPORT
+        // Create Button Menu
+        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+        const createMenu = Boolean(anchorEl);
+        const importForm = useRef<HTMLInputElement>(null);
+        const [currentImportFileName, setCurrentImportFileName] = useState(null);
+         const [importLoading, setImportLoading] = useState(false);
+    
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+        };
+        const handleClose = () => {
+          setAnchorEl(null);
+        };
+    
+        const handleImportButton = () => {
+          if (importForm?.current) {
+            handleClose();
+            importForm.current ? importForm.current.click() : console.log('No File selected');
+          } else {
+            alert('No file selected');
+          }
+        };
+    
+        const handleCancelImportButton = () => {
+
+        };
+    
+        const handleImportChange = (event: any) => {
+          if (event.target.files[0]) {
+            setCurrentImportFileName(event.target.files[0].name);
+          } else {
+            setCurrentImportFileName(null);
+          }
+        };
+    
+        const handleUpload = () => {
+          
+        };
+    
+        const handleGetTemplate = (type :string) => {
+          
+        }
+    
+        const handleGetData = (type :string) => {
+         
+        }
+
+        return (
+          <div>
+            {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+                <SearchInput onSearch={applyFilter} />
+                {/* <Button
+                  variant="contained"
+                  startIcon={<AddIcon />}
+                  sx={{ p: 1.8 }}
+                  onClick={() => {
+                    navigate('/claim-requests/create');
+                  }}
+                >
+                  Create
+                </Button> */}
+              </Stack>
+            )}
+          </div>
+        );
+    }
+   
+
+    function TableContent() {
+        return (
+            <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+                {/* Head Table */}
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={TableHeadStyle} align="left" width={50} />
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Discharge Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={200}>Code</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={'*'}>Service Type</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={200}>Status</TableCell>
+                        <TableCell align="left" width={"10"} />
+                    </TableRow>
+                </TableHead>
+
+                {/* Body Table */}
+                {dataTableData.data.claim_list == null ?
+                (
+                    <TableBody>
+                        <TableRow>
+                            <TableCell colSpan={7} align="center">Loading</TableCell>
+                        </TableRow>
+                    </TableBody>
+                )
+                :
+                (
+                    dataTableData.data.claim_list.data.length == 0 ?
                     (
                         <TableBody>
                             <TableRow>
-                                <TableCell colSpan={7} align="center">Loading</TableCell>
+                                <TableCell colSpan={7} align="center">No Data</TableCell>
                             </TableRow>
                         </TableBody>
                     )
                     :
                     (
-                        props.claim_list.length == 0 ?
+                        <TableBody>
-                        (
+                            {dataTableData.data.claim_list.data.map((row: ClaimListType, index) => (
-                            <TableBody>
+                                <ClaimListRow key={index} number={index+1} row={row} />
-                                <TableRow>
+                            ))}
-                                    <TableCell colSpan={7} align="center">No Data</TableCell>
+                        </TableBody>
-                                </TableRow>
+                    )
-                            </TableBody>
+                )}
-                        )
+            </Table>
-                        :
+        )
-                        (
+    }
-                            <TableBody>
+
-                                {props.claim_list.map((row: ClaimListType, index) => (
+    return (
-                                    <ClaimListRow key={index} number={index+1} row={row} />
+        <Grid container>
-                                ))}
+          <Grid item sm={12}>
-                            </TableBody>
+            <ImportForm />
-                        )
+          </Grid>
-                    )}
+    
-                </Table>
+          <Grid item sm={12}>
-            </TableContainer>
+            <DataTable
-        </Box>
+              isLoading={dataTableIsLoading}
-    )
+              lastRequest={0}
+              data={dataTableData}
+              handlePageChange={handlePageChange}
+              TableContent={<TableContent />}
+            />
+          </Grid>
+        </Grid>
+      );
 }

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringList.tsx

@@ -2,8 +2,8 @@
  * Core
  * ============================================
  */
-import { useEffect, useState } from "react";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Stack, TextField, Button, Menu, } from "@mui/material";
 
 /**
  * Types & Functions
@@ -12,12 +12,21 @@ import { Box, Paper, TableContainer, Table, TableHead, TableRow, TableCell, Tabl
 import { getDailyMonitoringList } from "../Model/Functions";
 import { DailyMonitoringListType } from "../Model/Types";
 import DailyMonitoringListRow from "./DailyMonitoringListRow";
+import { LaravelPaginatedData, LaravelPaginatedDataDefault } from "@/@types/paginated-data";
+import { Grid } from "@mui/material";
+import DataTable from '../../../../components/LaravelTable';
+import { MenuItem } from "@mui/material";
+import { useSearchParams } from "react-router-dom";
+import axios from "@/utils/axios";
 
 export default function DailyMonitoringList() {
+    const [searchParams, setSearchParams] = useSearchParams();
     // State
     // --------------------
     const [dataTableIsLoading, setDataTableLoading] = useState<boolean>(true);
-    const [dataTableData, setDataTableData] = useState<DailyMonitoringListType[]>([]);
+    const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+        LaravelPaginatedDataDefault
+    );
 
     // Tabel Style
     // --------------------
@@ -25,69 +34,205 @@ export default function DailyMonitoringList() {
         fontWeight: 'bold',
     };
 
+    
+
     // Load Data
     // -------------------
-    const loadDataTableData = async () => {
+    const loadDataTableData = async (appliedFilter: any | null = null) => {
         setDataTableLoading(true);
-
+        const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-        const response = await getDailyMonitoringList();
+       
-
+        const response = await axios.get('/case_management/memberlist', {params: filter})
         setDataTableLoading(false);
-        setDataTableData(response);
+        setDataTableData(response.data);
     }
 
+    const applyFilter = async (searchFilter: { search: string }) => {
+        await loadDataTableData(searchFilter);
+        setSearchParams(searchFilter);
+    };
+    
+    const handlePageChange = (event: ChangeEvent, value: number): void => {
+        const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+        loadDataTableData(filter);
+        setSearchParams(filter);
+    };
+
     useEffect(() => {
         loadDataTableData();
     }, [])
 
-    return (
+    function SearchInput(props: any) {
-        <Box>
+        // SEARCH
-            <TableContainer component={Paper}>
+        const searchInput = useRef<HTMLInputElement>(null);
-                <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+        const [searchText, setSearchText] = useState('');
-                    {/* Head Table */}
+    
-                    <TableHead>
+        const handleSearchChange = (event: any) => {
-                        <TableRow>
+          const newSearchText = event.target.value ?? '';
-                            <TableCell style={TableHeadStyle} align="left" width={50} />
+          setSearchText(newSearchText);
-                            <TableCell style={TableHeadStyle} align="left" width={150}>Member ID</TableCell>
+        };
-                            <TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
+    
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
+        const handleSearchSubmit = (event: any) => {
-                            <TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
+          event.preventDefault();
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+          props.onSearch({ search: searchText }); // Trigger to Parent
-                            <TableCell style={TableHeadStyle} align="left" width={160}>Provider</TableCell>
+        };
-                            <TableCell align="left" width={"10"} />
+    
-                        </TableRow>
+        useEffect(() => {
-                    </TableHead>
+          // Trigger First Search
+          setSearchText(searchParams.get('search') ?? '');
+        }, []);
+    
+        return (
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Member Code or Member Name...'
+            />
+          </form>
+        );
+    }
 
-                    {/* Body Table */}
+    function ImportForm(props: any) {
-                    {dataTableIsLoading ?
+        // IMPORT
+        // Create Button Menu
+        const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+        const createMenu = Boolean(anchorEl);
+        const importForm = useRef<HTMLInputElement>(null);
+        const [currentImportFileName, setCurrentImportFileName] = useState(null);
+         const [importLoading, setImportLoading] = useState(false);
+    
+        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+        };
+        const handleClose = () => {
+          setAnchorEl(null);
+        };
+    
+        const handleImportButton = () => {
+          if (importForm?.current) {
+            handleClose();
+            importForm.current ? importForm.current.click() : console.log('No File selected');
+          } else {
+            alert('No file selected');
+          }
+        };
+    
+        const handleCancelImportButton = () => {
+
+        };
+    
+        const handleImportChange = (event: any) => {
+          if (event.target.files[0]) {
+            setCurrentImportFileName(event.target.files[0].name);
+          } else {
+            setCurrentImportFileName(null);
+          }
+        };
+    
+        const handleUpload = () => {
+          
+        };
+    
+        const handleGetTemplate = (type :string) => {
+          
+        }
+    
+        const handleGetData = (type :string) => {
+         
+        }
+
+        return (
+          <div>
+            {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+                <SearchInput onSearch={applyFilter} />
+                {/* <Button
+                  variant="contained"
+                  startIcon={<AddIcon />}
+                  sx={{ p: 1.8 }}
+                  onClick={() => {
+                    navigate('/claim-requests/create');
+                  }}
+                >
+                  Create
+                </Button> */}
+              </Stack>
+            )}
+          </div>
+        );
+    }
+
+    function TableContent(){
+        return (
+            <Table sx={{ minWidth: 250 }} size='medium' aria-label="collapsible table">
+                {/* Head Table */}
+                <TableHead>
+                    <TableRow>
+                        <TableCell style={TableHeadStyle} align="left" width={50} />
+                        <TableCell style={TableHeadStyle} align="left" width={150}>Member ID</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={'*'}>Name</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Start Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>End Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Admission Date</TableCell>
+                        <TableCell style={TableHeadStyle} align="left" width={160}>Provider</TableCell>
+                        <TableCell align="left" width={"10"} />
+                    </TableRow>
+                </TableHead>
+
+                {/* Body Table */}
+                {dataTableIsLoading ?
+                (
+                    <TableBody>
+                        <TableRow>
+                            <TableCell colSpan={7} align="center">Loading</TableCell>
+                        </TableRow>
+                    </TableBody>
+                )
+                :
+                (
+                    dataTableData.data.length == 0 ?
                     (
                         <TableBody>
                             <TableRow>
-                                <TableCell colSpan={6} align="center">Loading</TableCell>
+                                <TableCell colSpan={7} align="center">No Data</TableCell>
                             </TableRow>
                         </TableBody>
                     )
                     :
                     (
-                        dataTableData.length == 0 ?
+                        <TableBody>
-                        (
+                        {dataTableData.data.map((row: DailyMonitoringListType, index) => (
-                            <TableBody>
+                            <DailyMonitoringListRow key={index} number={index+1} row={row} />
-                                <TableRow>
+                        ))}
-                                    <TableCell colSpan={6} align="center">No Data</TableCell>
+                        </TableBody>
-                                </TableRow>
+                    )
-                            </TableBody>
+                )}
-                        )
+            </Table>
-                        :
+        )
-                        (
+    }
-                          <TableBody>
+
-                            {dataTableData.map((row: DailyMonitoringListType, index) => (
+    return (
-                                <DailyMonitoringListRow key={index} number={index+1} row={row} />
+        <Grid container>
-                            ))}
+          <Grid item sm={12}>
-                          </TableBody>
+            <ImportForm />
-                        )
+          </Grid>
-                    )}
+    
-                </Table>
+          <Grid item sm={12} marginTop={2}>
-            </TableContainer>
+            <DataTable
-        </Box>
+              isLoading={dataTableIsLoading}
-    )
+              lastRequest={0}
+              data={dataTableData}
+              handlePageChange={handlePageChange}
+              TableContent={<TableContent />}
+            />
+          </Grid>
+        </Grid>
+      );
+
 }

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DailyMonitoringListRow.tsx

@@ -42,7 +42,7 @@ export default function DailyMonitoringListRow ({ ...props }: Props) {
                         variant="ghost"
                         color="default"
                     >
-                        {fDate(props.row.startdate)}
+                        {fDate(props.row.start_date)}
                     </Label>
                 </TableCell>
                 <TableCell align="left">
@@ -50,7 +50,7 @@ export default function DailyMonitoringListRow ({ ...props }: Props) {
                         variant="ghost"
                         color="default"
                     >
-                        {fDate(props.row.enddate)}
+                        {fDate(props.row.end_date)}
                     </Label>
                 </TableCell>
                 <TableCell align="left">

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx

@@ -364,7 +364,7 @@ export default function DetailMonitoringList() {
                                                             />
                                                         </Grid>
                                                         {
-                                                        index == (fields1.length-1) ?
+                                                            index === 0 ?
                                                             (
                                                                 <Grid item xs={1} sx={{ textAlign: 'center' }}>
                                                                     <IconButton size='large' color='primary' onClick={() => append1({medical_plan_str: ''})}>
@@ -374,11 +374,22 @@ export default function DetailMonitoringList() {
                                                             )
                                                             :
                                                             (
-                                                                <Grid item xs={1} sx={{ textAlign: 'center' }}>
+                                                                index === (fields1.length - 1) ?
-                                                                    <IconButton size='large' color='error' onClick={() => remove1(index)}>
+                                                                    (
-                                                                        <RemoveIcon />
+                                                                        <Grid item xs={1} sx={{ textAlign: 'center' }}>
-                                                                    </IconButton>
+                                                                            <IconButton size='large' color='error' onClick={() => remove1(index)}>
-                                                                </Grid>
+                                                                                <RemoveIcon />
+                                                                            </IconButton>
+                                                                        </Grid>
+                                                                    )
+                                                                    :
+                                                                    (
+                                                                        <Grid item xs={1} sx={{ textAlign: 'center' }}>
+                                                                            <IconButton size='large' color='primary' onClick={() => append1({medical_plan_str: ''})}>
+                                                                                <AddIcon />
+                                                                            </IconButton>
+                                                                        </Grid>
+                                                                    )
                                                             )
                                                         }
                                                     </Grid>
@@ -410,21 +421,30 @@ export default function DetailMonitoringList() {
                                                             />
                                                         </Grid>
                                                         {
-                                                        index == (fields2.length-1) ?
+                                                            index === 0 ?
                                                             (
                                                                 <Grid item xs={1} sx={{ textAlign: 'center' }}>
                                                                     <IconButton size='large' color='primary' onClick={() => append2({non_medikamentosa_plan_str: ''})}>
                                                                         <AddIcon />
                                                                     </IconButton>
-                                                                </Grid>
+                                                                </Grid> 
-                                                            )
+                                                            ) : (
-                                                            :
+                                                                index == (fields2.length-1) ?
-                                                            (
+                                                                (
-                                                                <Grid item xs={1} sx={{ textAlign: 'center' }}>
+                                                                    <Grid item xs={1} sx={{ textAlign: 'center' }}>
-                                                                    <IconButton size='large' color='error' onClick={() => remove2(index)}>
+                                                                        <IconButton size='large' color='error' onClick={() => remove2(index)}>
-                                                                        <RemoveIcon />
+                                                                            <RemoveIcon />
-                                                                    </IconButton>
+                                                                        </IconButton>
-                                                                </Grid>
+                                                                    </Grid>
+                                                                )
+                                                                :
+                                                                (
+                                                                    <Grid item xs={1} sx={{ textAlign: 'center' }}>
+                                                                        <IconButton size='large' color='primary' onClick={() => append2({non_medikamentosa_plan_str: ''})}>
+                                                                            <AddIcon />
+                                                                        </IconButton>
+                                                                    </Grid>
+                                                                )
                                                             )
                                                         }
                                                     </Grid>
@@ -558,12 +578,12 @@ export default function DetailMonitoringList() {
                                     </Grid>
                                     <Grid item xs={6}>
                                         <Typography variant="body1" component="div">
-                                            Date*
+                                            Date
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={6}>
                                         <Typography variant="body1" component="div">
-                                            Provider*
+                                            Provider
                                         </Typography>
                                     </Grid>
 
@@ -585,7 +605,7 @@ export default function DetailMonitoringList() {
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Typography variant="body1" component="div">
-                                            Examination*
+                                            Examination
                                         </Typography>
                                     </Grid>
                                     <Grid item xs={12} sx={{display: 'flex', gap: 1}}>

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Functions.ts

@@ -7,10 +7,10 @@ import { fDate, fDateOnly } from '@/utils/formatTime';
 /**
  * Listing Daily Monitoring
  */
-export const getDailyMonitoringList = async (  ): Promise<DailyMonitoringListType[]> => {
+export const getDailyMonitoringList = async ( param: any) => {
-    const response = await axios.get('/case_management/memberlist')
+    const response = await axios.get('/case_management/memberlist', {params: param})
         .then((res) =>{
-            return res.data.data.member_list;
+            return res.data;
         })
         .catch((res) => {
             enqueueSnackbar("server error !", {

frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Types.ts

@@ -4,8 +4,8 @@
 export type DailyMonitoringListType = {
     member_id   : string,
     name        : string,
-    startdate   : string,
+    start_date   : string,
-    enddate     : string,
+    end_date     : string,
     addmision_date : string,
     provider : string
 }

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 parameters =
-    const response = await axios.get('/customer-service/request?final_log=1&service_code=OP', { params: filter });
+    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" /> */}
+            {headCells &&
-            {/* <TableCell style={headStyle} align="left">
+            headCells.map((headCell, index) => (
-              ID Request LOG
+              <TableCell
-            </TableCell> */}
+                key={index}
-            <TableCell style={headStyle} align="left">
+                sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
-              Code
+                // @ts-ignore
-            </TableCell>
+                align={headCell.align}
-            <TableCell style={headStyle} align="left">
+                sx={{ padding: 2 }}
-              Provider
+                width={headCell.width ? headCell.width : 'auto'}
-            </TableCell>
+              >
-            <TableCell style={headStyle} align="left">
+                {headCell.isSort ? (
-              Name
+                  <TableSortLabel
-            </TableCell>
+                    active={orders?.orderBy === headCell.id}
-            <TableCell style={headStyle} align="left">
+                    direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
-              Date of Submission
+                    onClick={createSortHandler(headCell.id)}
-            </TableCell>
+                  >
-            <TableCell style={headStyle} align="left">
+                    {headCell.label}
-              Service Type
+                    {orders?.orderBy === headCell.id ? (
-            </TableCell>
+                      <Box component="span" sx={visuallyHidden}>
-            <TableCell style={headStyle} align="left">
+                        {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-              Claim Method
+                      </Box>
-            </TableCell>
+                    ) : null}
-            <TableCell style={headStyle} align="left">
+                  </TableSortLabel>
-              Status
+                ) : (
-            </TableCell>
+                  headCell.label
-            <TableCell style={headStyle} align="right"></TableCell>
+                )}
+              </TableCell>
+            ))}
           </TableRow>
         </TableHead>
         {/* ------------------ END TABLE HEADER ------------------ */}

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

@@ -39,6 +39,7 @@ export type DetailFinalLogType = {
     marital_status      : string,
     admission_date      : 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,