Fix Corporate Index

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

@@ -23,10 +23,19 @@ class CorporateController extends Controller
      * Display a listing of the resource.
      * @return Renderable
      */
-    public function index()
+    public function index(Request $request)
     {
         $corporates = Corporate::query()
-                                ->paginate(0);
+                                ->when($request->search, function ($query, $search) {
+                                    return $query->where('name', 'LIKE', '%'.$search.'%');
+                                })
+                                ->with('currentPolicy')
+                                ->withCount([
+                                    'employees',
+                                    'corporatePlans',
+                                    'corporateBenefits'
+                                ])
+                                ->paginate(2);
 
         return $corporates;
     }

frontend/client-portal/src/pages/Members/List.tsx

@@ -1,5 +1,5 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination, Grid } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -174,7 +174,7 @@ export default function List() {
   // Generate the every row of the table
   function Row(props: { row: ReturnType<typeof createData> }) {
     const { row } = props;
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = React.useState(true);
 
     return (
       <React.Fragment>
@@ -203,7 +203,7 @@ export default function List() {
             <Collapse in={open} timeout="auto" unmountOnExit>
               <Box sx={{ borderBottom: 1 }}>
                 <Typography variant="body2" gutterBottom component="div">
-                  Description : {row.description}
+                  <Grid ></Grid>
                 </Typography>
               </Box>
             </Collapse>

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -53,7 +53,7 @@ const navConfig = [
         openWhen: ['/corporates', '/formularium', '/diagnosis', '/hospitals'],
         children: [
           { title: 'Corporate', path: '/corporates' },
-          { title: 'Corporate Create', path: '/corporates/create' },
+          // { title: 'Corporate Create', path: '/corporates/create' },
           { title: 'Formularium', path: '/master/formularium' },
           { title: 'Obat', path: '/master/drugs' },
           { title: 'Diagnosis Library (ICD-X)', path: '/master/diagnosis' },

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -10,15 +10,18 @@ import useSettings from '../../hooks/useSettings';
 import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
-import { Link , NavLink as RouterLink } from 'react-router-dom';
+import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
-import React, { useEffect, useRef } from 'react';
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
 import { LaravelPaginatedData } from '../../@types/paginated-data';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
+import BasePagination from '../../components/BasePagination';
+import { fCurrency } from '../../utils/formatNumber';
 
 export default function Corporates() {
   const { themeStretch } = useSettings();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   // Called on every row to map the data to the columns
   function createData( corporate: Corporate ): Corporate {
@@ -27,79 +30,6 @@ export default function Corporates() {
     }
   }
 
-  // Generate the every row of the table
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
-    const [open, setOpen] = React.useState(false);
-
-    return (
-      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right">
-            <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
-              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
-            </Stack>
-          </TableCell>
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  History
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {row.history ? row.history.map((historyRow) => (
-                      <TableRow key={historyRow?.date}>
-                        <TableCell component="th" scope="row">
-                          {historyRow?.date}
-                        </TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
-                        <TableCell align="right">{historyRow?.amount}</TableCell>
-                        <TableCell align="right">
-                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
-                        </TableCell>
-                      </TableRow>
-                    ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    }
-                  </TableBody>
-                </Table>
-              </Box>
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      </React.Fragment>
-    );
-  }
-
   // Dummy Default Data
   const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
@@ -117,19 +47,34 @@ export default function Corporates() {
     total: 0
   });
 
-  const loadDataTableData = async () => {
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
     setDataTableLoading(true);
-    const response = await axios.get('/corporates');
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
   }
 
+  
+  const applyFilter = async (searchFilter: any) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+
   useEffect(() => {
     loadDataTableData();
   }, [])
 
+
   const headStyle = {
     fontWeight: 'bold',
   };
@@ -187,31 +132,33 @@ export default function Corporates() {
   };
   // END FILTER SELECT
   
-  // IMPORT
+  // Component Search Input
-  const importMember = React.useRef(null);
+  function SearchInput(props: any) {
-  const handleImportButton = (event: any) => {
+     // SEARCH
-    if (importMember?.current)
+    const searchInput = useRef<HTMLInputElement>(null);
-      importMember.current ? importMember.current.click() : console.log('fuck');
+    const [searchText, setSearchText] = useState("");
-    else
-      alert('No file selected')
-  }
 
-  return (
+    const handleSearchChange = (event: any) => {
-    <Page title="Membership : Corporate List">
+      const newSearchText = event.target.value ?? ''
-      <Container maxWidth={themeStretch ? false : 'xl'}>
+      setSearchText(newSearchText);
-        <HeaderBreadcrumbs
+    }
-          heading={'Coporate List'}
-          links={[
-            { name: 'Dashboard', href: '/dashboard' },
-            {
-              name: 'Corporates',
-              href: '/corporates',
-            },
-          ]}
-        />
 
-        <Grid container spacing={3} sx={{ mb: 2 }} justifyContent="flex-end">
+    const handleSubmit = (event: any) => {
-          <Grid item>
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      // console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
+          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          
+          {/* <Grid item>
             <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
           </Grid>
 
@@ -263,9 +210,9 @@ export default function Corporates() {
                 ))}
               </Select>
             </FormControl>
-          </Grid>
+          </Grid> */}
 
-          <Grid item>
+          {/* <Grid item> */}
             {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
             <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
               Import
@@ -273,8 +220,147 @@ export default function Corporates() {
             <Link to={"/corporates/create"}>
               <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
             </Link>
-          </Grid>
+          {/* </Grid> */}
-        </Grid>
+        </Stack>
+
+        <Button type='hidden' sx={{ display: 'none' }}>Search</Button>
+      </form>
+    );
+  }
+
+  // Component Row
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+          <TableCell align="right">
+            <Stack direction="row" justifyContent="flex-end" spacing={1}>
+              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
+              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+            </Stack>
+          </TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={9999}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1, borderBottom: 1, pb: 2 }}>
+                <Typography sx={{ fontWeight: '600', mb: 1 }}>Current Policy Detail</Typography>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Policy Code
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.current_policy?.code}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Number of Plan
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.corporate_plans_count}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Number of Benefit
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.corporate_benefits_count}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+
+                  <Grid item xs={6}>
+                    <Grid Grid container>
+                      <Grid item xs={6}>
+                        Period
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.current_policy?.start} - {row.current_policy?.end}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Total Premi
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.current_policy ? fCurrency(row.current_policy?.total_premi) : '-'}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Minimal Deposit
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+
+                <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Member Detail</Typography>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Total Member
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.employees_count}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+
+                  <Grid item xs={6}>
+                    <Grid Grid container>
+                      <Grid item xs={6}>
+                        Total Claim This Month
+                      </Grid>
+                      <Grid item xs={6}>
+                        : 0
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Page title="Membership : Corporate List">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={'Coporate List'}
+          links={[
+            { name: 'Dashboard', href: '/dashboard' },
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+          ]}
+        />
+
+        <SearchInput onSearch={applyFilter}/>
         
         <Card>
         {/* The Main Table */}
@@ -285,8 +371,8 @@ export default function Corporates() {
                 <TableCell style={headStyle} align="left">#</TableCell>
                 <TableCell style={headStyle} align="left">Code</TableCell>
                 <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="left">Status</TableCell>
+                <TableCell style={headStyle} align="left" width={100}>Status</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="right" width={100}>Action</TableCell>
               </TableRow>
             </TableBody>
             {dataTableIsLoading ? 
@@ -314,6 +400,7 @@ export default function Corporates() {
             )}
           </Table>
         </TableContainer>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
         </Card>
       </Container>
     </Page>