Fix Filter

Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php

@@ -14,10 +14,21 @@ class ClaimRequestController extends Controller
      * Display a listing of the resource.
      * @return Renderable
      */
-    public function index()
+    public function index(request $request)
     {
         $claimRequests = ClaimRequest::query()
                                 ->with(['member'])
+                                ->when($request->search, function ($q, $search) {
+                                    $q->where('code', 'LIKE', "%".$search."%");
+                                })
+                                ->when($request->orderBy, function ($q, $orderBy) use ($request) {
+                                    if (in_array($orderBy, ['submission_date', 'code'])) {
+                                        $q->orderBy($orderBy, $request->order);
+                                    }
+                                })
+                                ->when($request->status, function($q, $status) {
+                                    $q->where('status', $status);
+                                })
                                 ->paginate();
 
         return Helper::responseJson($claimRequests);

frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx

@@ -95,7 +95,7 @@ export default function CardSearchMember() {
           </Typography>
         </Stack>
         <Stack gap={2}>
-          <TextField variant="outlined" label="Nomor Polis" value={noPolis} onChange={(event) => {
+          <TextField variant="outlined" label="Member ID" value={noPolis} onChange={(event) => {
             setNoPolis(event.target.value)
           }}></TextField>
           <LocalizationProvider dateAdapter={AdapterDateFns}>

frontend/hospital-portal/src/sections/dashboard/TableList.tsx

@@ -111,7 +111,7 @@ const headCells: readonly HeadCell[] = [
     id: 'member.name',
     align: 'center',
     label: 'Member',
-    isSort: true,
+    isSort: false,
   },
   {
     id: 'submission_date',
@@ -129,7 +129,7 @@ const headCells: readonly HeadCell[] = [
     id: 'status',
     align: 'right',
     label: 'Status',
-    isSort: true,
+    isSort: false,
   },
 ];
 
@@ -210,21 +210,21 @@ export default function TableList(props: any) {
   };
   /* -------------------------------------------------------------------------- */
 
-  /* ----------------------------- division field ----------------------------- */
+  /* ----------------------------- status field ----------------------------- */
-  const [divisionValue, setDivisionValue] = useState('all');
+  const [filterStatus, setFilterStatus] = useState('All');
-  const [divisionData, setDivisionData] = useState([]);
+  const [statusOptions, setStatusOptions] = useState(['All', 'Requested', 'Approved', 'Declined']);
 
-  const handleDivisionChange = (event: SelectChangeEvent) => {
+  const handleStatusChange = (event: SelectChangeEvent) => {
-    setDivisionValue(event.target.value as string);
+    setFilterStatus(event.target.value as string);
 
-    if (event.target.value === 'all') {
+    if (event.target.value === 'All') {
-      searchParams.delete('division');
+      searchParams.delete('status');
       const params = Object.fromEntries([...searchParams.entries()]);
       setAppliedParams(params);
     } else {
       const params = Object.fromEntries([
         ...searchParams.entries(),
-        ['division', event.target.value as string],
+        ['status', event.target.value.toLowerCase() as string],
       ]);
       setAppliedParams(params);
     }
@@ -233,10 +233,13 @@ export default function TableList(props: any) {
 
   /* ------------------------------ Search field ------------------------------ */
   const [searchText, setSearchText] = useState('');
+  const [searchStatus, setSearchStatus] = useState('all');
 
   const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
+
+    // Filter by Search Text
     if (searchText === '') {
       searchParams.delete('search');
       const params = Object.fromEntries([...searchParams.entries()]);
@@ -245,6 +248,7 @@ export default function TableList(props: any) {
       const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
       setAppliedParams(params);
     }
+
     await new Promise((resolve) => setTimeout(resolve, 500));
     setIsLoading(false);
   };
@@ -292,7 +296,7 @@ export default function TableList(props: any) {
           : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
 
       const response = await axios.get(`/claim-requests`, {
-        params: { ...params, claimMember: false },
+        params: { ...params },
       });
 
       setSearchParams(params);
@@ -330,14 +334,39 @@ export default function TableList(props: any) {
             </Grid>
             <Grid item xs={12}>
               <form onSubmit={handleSearchSubmit}>
-                <TextField
+                <Grid container spacing={2}>
-                  id="search-input"
+                  <Grid item xs={9}>
-                  label="Search"
+                    <TextField
-                  variant="outlined"
+                      id="search-input"
-                  onChange={(event) => setSearchText(event.target.value)}
+                      label="Search"
-                  value={searchText}
+                      variant="outlined"
-                  fullWidth
+                      onChange={(event) => setSearchText(event.target.value)}
-                />
+                      value={searchText}
+                      fullWidth
+                    />
+                  </Grid>
+                  <Grid item xs={3}>
+                    <FormControl fullWidth>
+                      <InputLabel id="demo-simple-select-label">Status</InputLabel>
+                      <Select
+                        labelId="demo-simple-select-label"
+                        id="demo-simple-select"
+                        value={filterStatus}
+                        label="Status"
+                        onChange={handleStatusChange}
+                        sx={{ width: '100%' }}
+                      >
+                        {statusOptions &&
+                          statusOptions.map((option) => (
+                            <MenuItem value={option} sx={{ textTransform: 'capitalize' }}>
+                              {option}
+                            </MenuItem>
+                          ))}
+                      </Select>
+                    </FormControl>
+                  </Grid>
+                </Grid>
+                <input type="submit" style={{ display: 'none' }}></input>
               </form>
             </Grid>
           </Grid>