tambah pagination dan search daily monitoring

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;
+    }
+}

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>
-                            <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 */}
+        const response = await axios.get('/case_management/claimlist/'+member_id, {params: filter})
-                    {props.claim_list == null ?
+        setDataTableLoading(false);
+        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();
+    }, [])
+
+    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>
-                        <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 */}
+        const handleSearchChange = (event: any) => {
-                    {dataTableIsLoading ?
+          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 Member Code or Member Name...'
+            />
+          </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={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/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
 }