From 1cd65a9077edfb189d8b5acf9e453f64054c5f5c Mon Sep 17 00:00:00 2001
From: Tb Fajri <tubagus@sismedika.com>
Date: Tue, 30 Jan 2024 14:52:15 +0700
Subject: [PATCH] update

---
 frontend/dashboard/src/@types/table.ts        | 131 ++++++
 .../src/components/BaseTablePagination.tsx    |  25 ++
 frontend/dashboard/src/components/Table.tsx   | 395 ++++++++++++++++++
 3 files changed, 551 insertions(+)
 create mode 100644 frontend/dashboard/src/@types/table.ts
 create mode 100644 frontend/dashboard/src/components/BaseTablePagination.tsx
 create mode 100644 frontend/dashboard/src/components/Table.tsx

diff --git a/frontend/dashboard/src/@types/table.ts b/frontend/dashboard/src/@types/table.ts
new file mode 100644
index 00000000..f01ed4ea
--- /dev/null
+++ b/frontend/dashboard/src/@types/table.ts
@@ -0,0 +1,131 @@
+import { SelectChangeEvent } from '@mui/material';
+import { Dispatch, FormEvent, SetStateAction } from 'react';
+
+/* ------------------------------- pagination ------------------------------- */
+export type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+/* -------------------------------------------------------------------------- */
+
+/* ---------------------------------- order --------------------------------- */
+export type Order = 'asc' | 'desc';
+/* -------------------------------------------------------------------------- */
+
+/* --------------------------------- filter --------------------------------- */
+export type DivisionDataProps = {
+  id: number;
+  name: string;
+};
+
+export type StatusDataProps = {
+  id: number;
+  name: string;
+};
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------------- headcell -------------------------------- */
+export type HeadCell<DataType> = {
+  id: Extract<keyof DataType, string>;
+  align: string;
+  label: string;
+  isSort: boolean;
+  width?: number;
+};
+/* -------------------------------------------------------------------------- */
+
+/* ----------------------------- division filter ---------------------------- */
+export type DivisionData = {
+  id: number;
+  name: string;
+};
+/* -------------------------------------------------------------------------- */
+
+/* ----------------------------- status filter ---------------------------- */
+export type Status = {
+  id: number;
+  name: string;
+};
+/* -------------------------------------------------------------------------- */
+
+/* ----------------------------------- row ---------------------------------- */
+export type TableListProps<DataType> = {
+  headCells?: HeadCell<DataType>[];
+  rows?: Array<DataType>;
+  paginations?: {
+    page: number;
+    setPage: Dispatch<SetStateAction<number>>;
+    rowsPerPage: number;
+    setRowsPerPage: Dispatch<SetStateAction<number>>;
+    paginationTable: PaginationTableProps;
+    setPaginationTable: Dispatch<SetStateAction<PaginationTableProps>>;
+  };
+  orders?: {
+    order: Order;
+    setOrder: Dispatch<SetStateAction<Order>>;
+    orderBy: string;
+    setOrderBy: Dispatch<SetStateAction<string>>;
+  };
+  loadings: {
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+  };
+  params?: {
+    searchParams: URLSearchParams;
+    setSearchParams: any;
+    appliedParams: {};
+    setAppliedParams: Dispatch<SetStateAction<{}>>;
+  };
+  searchs?: {
+    useSearchs: boolean;
+    fullWidth?: boolean;
+    searchText: string;
+    setSearchText: Dispatch<SetStateAction<string>>;
+    handleSearchSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  };
+  filters?: {
+    useFilter: boolean;
+    config: {
+      label: string;
+      divisionValue: string;
+      divisionData: DivisionData[];
+      handleDivisionChange: (event: SelectChangeEvent) => void;
+    };
+  };
+  filterStatus?: {
+    useFilter: boolean;
+    config: {
+      label: string;
+      statusValue: string;
+      statusData: Status[];
+      handleStatusChange: (event: SelectChangeEvent) => void;
+    };
+  };
+  filterStartDate?: {
+    useFilter: boolean;
+    startDate: string;
+    setStartDate: Dispatch<SetStateAction<string>>;
+    handleStartDateChange: (event: FormEvent<HTMLFormElement>) => void;
+  };
+  filterEndDate?: {
+    useFilter: boolean;
+    endDate: string;
+    setEndDate: Dispatch<SetStateAction<string>>;
+    handleEndDateChange: (event: FormEvent<HTMLFormElement>) => void;
+  };
+  exportReport?: {
+    useExport: boolean;
+    startDate: string;
+    endDate: string;
+    status: string;
+    handleExportReport: (event: FormEvent<HTMLFormElement>) => void;
+  };
+  exportLoading?: boolean;
+};
+/* -------------------------------------------------------------------------- */
diff --git a/frontend/dashboard/src/components/BaseTablePagination.tsx b/frontend/dashboard/src/components/BaseTablePagination.tsx
new file mode 100644
index 00000000..3af750e6
--- /dev/null
+++ b/frontend/dashboard/src/components/BaseTablePagination.tsx
@@ -0,0 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { TablePagination, TablePaginationProps } from '@mui/material';
+import { Box } from '@mui/system';
+
+export default function BaseTablePagination({
+  count,
+  onPageChange,
+  page,
+  rowsPerPage,
+  onRowsPerPageChange,
+}: TablePaginationProps) {
+  return (
+    <Box>
+      <TablePagination
+        component="div"
+        rowsPerPageOptions={[10, 25]}
+        count={count}
+        page={page}
+        onPageChange={onPageChange}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChange}
+      />
+    </Box>
+  );
+}
diff --git a/frontend/dashboard/src/components/Table.tsx b/frontend/dashboard/src/components/Table.tsx
new file mode 100644
index 00000000..ebe4498d
--- /dev/null
+++ b/frontend/dashboard/src/components/Table.tsx
@@ -0,0 +1,395 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import {
+  Paper,
+  Table as TableContent,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  TableSortLabel,
+  Box,
+  Grid,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  InputAdornment,
+  Typography,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- react --------------------------------- */
+import { Fragment } from 'react';
+/* -------------------------------- component ------------------------------- */
+import BaseTablePagination from './BaseTablePagination';
+/* ---------------------------------- utils --------------------------------- */
+import { Download, Search as SearchIcon } from '@mui/icons-material';
+/* ---------------------------------- types --------------------------------- */
+import { DivisionDataProps, StatusDataProps, TableListProps } from '../@types/table';
+import { LoadingButton } from '@mui/lab';
+
+export default function Table<T>({
+  headCells,
+  rows,
+  paginations,
+  orders,
+  loadings,
+  params,
+  filters,
+  filterStatus,
+  filterStartDate,
+  filterEndDate,
+  searchs,
+  exportReport,
+  exportLoading,
+}: TableListProps<T>) {
+  /* ------------------------------- 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],
+    ]);
+    params?.setAppliedParams(parameters);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* -------------------------- enchanced table head -------------------------- */
+  const EnhancedTableHead = () => {
+    const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+      handleRequestSort(event, property);
+    };
+
+    return (
+      <TableHead>
+        <TableRow>
+          {headCells &&
+            headCells.map((headCell, index) => (
+              <TableCell
+                key={index}
+                sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                // @ts-ignore
+                align={headCell.align}
+                sx={{ padding: 2 }}
+                width={headCell.width ? headCell.width : 'auto'}
+              >
+                {headCell.isSort ? (
+                  <TableSortLabel
+                    active={orders?.orderBy === headCell.id}
+                    direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                    onClick={createSortHandler(headCell.id)}
+                  >
+                    {headCell.label}
+                    {orders?.orderBy === headCell.id ? (
+                      <Box component="span" sx={visuallyHidden}>
+                        {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                      </Box>
+                    ) : null}
+                  </TableSortLabel>
+                ) : (
+                  headCell.label
+                )}
+              </TableCell>
+            ))}
+        </TableRow>
+      </TableHead>
+    );
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    const parameters = Object.fromEntries([
+      ...(params?.searchParams.entries() as IterableIterator<[string, string]>),
+      ['page', newPage + 1],
+      ['per_page', paginations?.rowsPerPage],
+    ]);
+    paginations?.setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    params?.setAppliedParams(parameters);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    params?.searchParams.delete('page');
+    const parameters = Object.fromEntries([
+      ...(params?.searchParams.entries() as IterableIterator<[string, string]>),
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+
+    paginations?.setPage(0);
+    paginations?.setRowsPerPage(parseInt(event.target.value, 10));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    params?.setAppliedParams(parameters);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  return (
+    // <Card>
+    <Grid container>
+      {/* Field 1 */}
+      <Grid item xs={12} paddingX="24px" paddingY="20px">
+        <Grid container spacing={2}>
+          {filters && filters.useFilter ? (
+            <Fragment>
+              <Grid item xs={12} lg={3} xl={2}>
+                <FormControl fullWidth>
+                  <InputLabel id="simple-division-select-lable">Division</InputLabel>
+                  <Select
+                    labelId="simple-division-select-lable"
+                    id="division-select-lable"
+                    value={filters.config.divisionValue}
+                    label="Division"
+                    onChange={filters.config.handleDivisionChange}
+                  >
+                    <MenuItem value="all">All</MenuItem>
+                    {filters.config.divisionData.map((row: DivisionDataProps, index) => (
+                      <MenuItem key={index} value={row.id}>
+                        {row.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Grid>
+              <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>
+              </Grid>
+            </Fragment>
+          ) : null}
+
+          {searchs && searchs.useSearchs ? (
+            <Fragment>
+              {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>
+              ) : exportReport && exportReport.useExport && filterStatus === undefined ? (
+                <Grid item xs={12} lg={10} xl={10}>
+                  <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={searchs.fullWidth ? 12 : 6} xl={searchs.fullWidth ? 12 : 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.statusData.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>
+                <LoadingButton
+                  id="upload-button"
+                  variant="contained"
+                  startIcon={<Download />}
+                  sx={{ p: 1.8 }}
+                  onClick={() => exportReport.handleExportReport()}
+                  loading={exportLoading}
+                >
+                  <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                    Export
+                  </Typography>
+                </LoadingButton>
+              </FormControl>
+            </Grid>
+          ) : null}
+        </Grid>
+      </Grid>
+      {/* End Field 1 */}
+      {/* Field 2 */}
+      <Grid item xs={12}>
+        {/* Table */}
+        <TableContainer component={Paper}>
+          <TableContent aria-label="collapsible table" size="small">
+            {/* Table Header */}
+            <EnhancedTableHead />
+            {/* End Table Header */}
+            {/* Table Body */}
+            <TableBody>
+              {loadings.isLoading && rows && rows.length >= 1 ? (
+                <TableRow>
+                  <TableCell colSpan={headCells?.length} align="center">
+                    Loading . . .
+                  </TableCell>
+                </TableRow>
+              ) : rows && rows.length >= 1 ? (
+                rows.map((row, rowIndex) => (
+                  <TableRow key={rowIndex}>
+                    {headCells &&
+                      //@ts-ignore
+                      headCells.map((head, headIndex) => (
+                        //@ts-ignore
+                        <TableCell align={head.align} key={headIndex}>
+                          {row[head.id]}
+                        </TableCell>
+                      ))}
+                  </TableRow>
+                ))
+              ) : loadings.isLoading === false && rows && rows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    No Data Found
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    Loading . . .
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+            {/* End Table Body */}
+          </TableContent>
+        </TableContainer>
+        {/* End Table */}
+
+        {/* Pagination */}
+        {paginations && (
+          <BaseTablePagination
+            count={paginations.paginationTable.total}
+            onPageChange={onPageChangeHandle}
+            page={paginations.page}
+            rowsPerPage={paginations.rowsPerPage}
+            onRowsPerPageChange={onRowsPerPageChangeHandle}
+          />
+        )}
+        {/* End Pagination */}
+      </Grid>
+      {/* End Field 2 */}
+    </Grid>
+    // </Card>
+  );
+}