update fitur alarm center

frontend/client-portal/src/components/Table.tsx

@@ -37,9 +37,11 @@ import palette from '../theme/palette';
 /* ---------------------------------- utils --------------------------------- */
 import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
 import { fSplit } from '../utils/formatNumber';
+import { Download, Search as SearchIcon, Upload } from '@mui/icons-material';
 /* ---------------------------------- types --------------------------------- */
 import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
-
+import { InputAdornment } from '@mui/material';
+import GetAppIcon from '@mui/icons-material/GetApp';
 /* --------------------------------- styled --------------------------------- */
 const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
   height: 10,
@@ -62,7 +64,11 @@ export default function Table<T>({
   loadings,
   params,
   filters,
+  filterStatus,
+  filterStartDate,
+  filterEndDate,
   searchs,
+  exportReport,
 }: TableListProps<T>) {
   /* ------------------------------- handle sort ------------------------------ */
   const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
@@ -192,39 +198,132 @@ export default function Table<T>({
                   </form>
                 </Grid>
               </Fragment>
-            ) : null
-            // (
-            //   <Grid item xs={12}>
-            //     <form onSubmit={searchs.handleSearchSubmit}>
-            //       <TextField
-            //         id="search-input"
-            //         label="Search"
-            //         variant="outlined"
-            //         onChange={(event) => searchs.setSearchText(event.target.value)}
-            //         value={searchs.searchText}
-            //         fullWidth
-            //       />
-            //     </form>
-            //   </Grid>
-            // )
-            }
+            ) : null }
 
             {searchs && searchs.useSearchs ? (
               <Fragment>
-                <Grid item xs={12} lg={9} xl={10}>
-                  <form onSubmit={searchs.handleSearchSubmit}>
-                    <TextField
-                      id="search-input"
-                      label="Search"
-                      variant="outlined"
-                      onChange={(event) => searchs.setSearchText(event.target.value)}
-                      value={searchs.searchText}
-                      fullWidth
-                    />
-                  </form>
+                {filterStatus && filterStatus.useFilter ? (
+                  <Grid item xs={12} lg={4} xl={4}>
+                    <form onSubmit={searchs.handleSearchSubmit}>
+                      <TextField
+                        id="search-input"
+                        variant="outlined"
+                        onChange={(event) => searchs.setSearchText(event.target.value)}
+                        value={searchs.searchText}
+                        fullWidth
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <SearchIcon />
+                            </InputAdornment>
+                          ),
+                        }}
+                        placeholder="Search Name or Member ID... "
+                      />
+                    </form>
                 </Grid>
+                ) :
+                  <Grid item xs={12} lg={6} xl={6}>
+                    <form onSubmit={searchs.handleSearchSubmit}>
+                      <TextField
+                        id="search-input"
+                        variant="outlined"
+                        onChange={(event) => searchs.setSearchText(event.target.value)}
+                        value={searchs.searchText}
+                        fullWidth
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <SearchIcon />
+                            </InputAdornment>
+                          ),
+                        }}
+                        placeholder="Search Name or Member ID... "
+                      />
+                    </form>
+                  </Grid>
+                }
+                  
               </Fragment>
             ) : null }
+
+            {/* Start date */}
+            {filterStartDate && filterStartDate.useFilter ? (
+              <Grid item xs={12} lg={2} xl={2}>
+              <form onChange={filterStartDate.handleStartDateChange}>
+                <TextField
+                  id="date-input"
+                  type="date"
+                  variant="outlined"
+                  value={filterStartDate.startDate}
+                  onChange={(event) => filterStartDate.setStartDate(event.target.value)}
+                  fullWidth
+                  label="Start Date"
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                />
+              </form>
+            </Grid>
+            ) : null }
+
+            {/* End Date */}
+
+            {filterEndDate && filterEndDate.useFilter ? (
+              <Grid item xs={12} lg={2} xl={2}>
+              <form onChange={filterEndDate.handleEndDateChange}>
+                <TextField
+                  id="date-input"
+                  type="date"
+                  variant="outlined"
+                  value={filterEndDate.endDate}
+                  onChange={(event) => filterEndDate.setEndDate(event.target.value)}
+                  fullWidth
+                  label="End Date"
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                />
+              </form>
+            </Grid>
+            ) : null }
+
+            {/* Filter status */}
+            {filterStatus && filterStatus.useFilter ? (
+               <Grid item xs={12} lg={2} xl={2}>
+               <FormControl fullWidth>
+                 <InputLabel id="simple-status-select-lable">Status</InputLabel>
+                 <Select
+                   labelId="simple-status-select-lable"
+                   id="status-select-lable"
+                   value={filterStatus.config.statusValue}
+                   label="Status"
+                   onChange={filterStatus.config.handleStatusChange}
+                 >
+                   <MenuItem value="all">All</MenuItem>
+                    {filterStatus.config.filterData.map((row: StatusDataProps, index) => (
+                      <MenuItem key={index} value={row.id}>
+                        {row.name}
+                      </MenuItem>
+                    ))}
+                 </Select>
+               </FormControl>
+             </Grid>
+            ) : null } 
+
+            {/* Export Report */}
+
+            {exportReport && exportReport.useExport ? (
+               <Grid item xs={12} lg={2} xl={2}>
+               <FormControl fullWidth>
+                  <Button variant='contained' sx={{p:2}}>
+                    <Download />
+                    <Typography variant='inherit' sx={{marginLeft: 1}}>Export</Typography> 
+                  </Button>
+               </FormControl>
+             </Grid>
+            ) : null } 
+
           </Grid>
         </Grid>
         {/* End Field 1 */}
@@ -238,7 +337,7 @@ export default function Table<T>({
               {/* End Table Header */}
               {/* Table Body */}
               <TableBody>
-                {loadings.isLoading ? (
+                {loadings.isLoading && rows.length >= 1  ? (
                   <TableRow>
                     <TableCell colSpan={headCells?.length} align="center">
                       Loading . . .