add switch corporate & fix table & fix policy

2022-12-08 08:51:25 +07:00
parent df34c3919d
commit 0c9362334c
17 changed files with 227 additions and 174 deletions
--- a/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx
+++ b/frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx
@@ -17,8 +17,6 @@ import useAuth from '../../../hooks/useAuth';

 type VerifyCodeFormProps = {
  emailOrPhone: string;
-  setEmailOrPhoneForm: Function;
-  setLoginOrVerifyCode: Function;
 };

 type FormValuesProps = {
@@ -39,11 +37,7 @@ type responseProps = {

 /* -------------------------------------------------------------------------- */

-export default function VerifyCodeForm({
-  emailOrPhone,
-  setEmailOrPhoneForm,
-  setLoginOrVerifyCode,
-}: VerifyCodeFormProps) {
+export default function VerifyCodeForm({ emailOrPhone }: VerifyCodeFormProps) {
  const navigate = useNavigate();
  const { validateOtp } = useAuth();
  const { enqueueSnackbar } = useSnackbar();
--- a/frontend/client-portal/src/sections/dashboard/CardBalance.tsx
+++ b/frontend/client-portal/src/sections/dashboard/CardBalance.tsx
@@ -13,7 +13,7 @@ import Iconify from '../../components/Iconify';
 // React
 import { useState } from 'react';
 // utils
-import { fCurrency } from '../../utils/formatNumber';
+import { fCurrency, fSplit } from '../../utils/formatNumber';
 /* -------------------------------- sections -------------------------------- */
 import DialogTopUpLimit from './DialogTopUpLimit';
 import DialogClaimSubmitMember from './DialogClaimSubmitMember';
@@ -97,7 +97,7 @@ export default function CardBalance(props: CardBalanceProps) {
              {fCurrency(myLimit ? myLimit.balance : 0)}
            </Typography>
            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
-              / {myLimit ? myLimit.total : 0}
+              / {fSplit(myLimit ? myLimit.total : 0)}
            </Typography>
          </div>

@@ -127,7 +127,7 @@ export default function CardBalance(props: CardBalanceProps) {
            </Typography>
          </Typography>
          <Typography sx={{ typography: 'caption', color: '#637381' }}>
-            {lockLimit ? lockLimit.balance : 0} / {myLimit ? myLimit.total : 0}
+            {fSplit(lockLimit ? lockLimit.balance : 0)} / {fSplit(myLimit ? myLimit.total : 0)}
          </Typography>
        </Stack>

--- a/frontend/client-portal/src/sections/dashboard/TableList.tsx
+++ b/frontend/client-portal/src/sections/dashboard/TableList.tsx
@@ -1,4 +1,5 @@
 /* ---------------------------------- @mui ---------------------------------- */
+import { styled } from '@mui/material/styles';
 import {
  Paper,
  Table,
@@ -19,19 +20,25 @@ import {
  Select,
  MenuItem,
  SelectChangeEvent,
+  Stack,
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 import { Add as AddIcon } from '@mui/icons-material';
 /* ---------------------------------- axios --------------------------------- */
 import axios from '../../utils/axios';
 /* ---------------------------------- react --------------------------------- */
-import { useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
 import BaseTablePagination from '../../components/BaseTablePagination';
 /* ---------------------------------- theme --------------------------------- */
 import palette from '../../theme/palette';
 import { useSearchParams } from 'react-router-dom';
+import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
+import { fSplit } from '../../utils/formatNumber';

 /* ---------------------------------- types --------------------------------- */
 type PaginationTableProps = {
@@ -46,11 +53,15 @@ type PaginationTableProps = {
 };

 type DataTableProps = {
-  name: string;
-  member_id: string;
+  fullName: string;
+  memberId: string;
  division: string;
-  limit: string;
-  status: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  status: number;
 };

 type Order = 'asc' | 'desc';
@@ -74,6 +85,20 @@ type DivisionDataProps = {
 };
 /* -------------------------------------------------------------------------- */

+/* --------------------------------- styled --------------------------------- */
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: '#D1F1F1',
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+/* -------------------------------------------------------------------------- */
+
 /* -------------------------- enchanced table head -------------------------- */
 const headCells: readonly HeadCell[] = [
  {
@@ -92,16 +117,16 @@ const headCells: readonly HeadCell[] = [
    id: 'division',
    align: 'center',
    label: 'Divisi',
-    isSort: true,
+    isSort: false,
  },
  {
    id: 'limit',
    align: 'center',
    label: 'Limit',
-    isSort: true,
+    isSort: false,
  },
  {
-    id: 'status',
+    id: 'active',
    align: 'center',
    label: 'Status',
    isSort: true,
@@ -150,14 +175,9 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
 /* -------------------------------------------------------------------------- */

 export default function TableList(props: any) {
-  const [order, setOrder] = useState<Order>('asc');
-  const [orderBy, setOrderBy] = useState('name');
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [isLoading, setIsLoading] = useState(true);
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+
  const [dataTable, setDataTable] = useState([]);
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-  const [appliedParams, setAppliedParams] = useState({});
  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
    current_page: 0,
    from: 0,
@@ -169,6 +189,15 @@ export default function TableList(props: any) {
    total: 0,
  });

+  const [isLoading, setIsLoading] = useState(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
  /* ------------------------------- handle sort ------------------------------ */
  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
    const isAsc = orderBy === property && order === 'asc';
@@ -211,9 +240,15 @@ export default function TableList(props: any) {
  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);
-    const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
    await new Promise((resolve) => setTimeout(resolve, 500));
-    setAppliedParams(params);
    setIsLoading(false);
  };
  /* -------------------------------------------------------------------------- */
@@ -275,7 +310,7 @@ export default function TableList(props: any) {
    (async () => {
      setIsLoading(true);

-      const division = await axios.get('/division');
+      const division = await axios.get(`${corporateValue}/division`);
      setDivisionData(division.data);

      const params =
@@ -283,19 +318,17 @@ export default function TableList(props: any) {
          ? appliedParams
          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);

-      const response = await axios.get('/dashboard', {
-        params: params,
+      const corporateMembers = await axios.get(`${corporateValue}/members`, {
+        params,
      });

-      console.log(response);
-
      setSearchParams(params);
-      // setDataTable(response.data.data);
+      setDataTable(corporateMembers.data.data);
      // setPaginationTable(response.data.meta);
      // setRowsPerPage(response.data.meta.per_page);
      setIsLoading(false);
    })();
-  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);

  return (
    <Card>
@@ -388,12 +421,23 @@ export default function TableList(props: any) {
                ) : dataTable.length >= 1 ? (
                  dataTable.map((row: DataTableProps, index) => (
                    <TableRow key={index}>
-                      <TableCell align="left">{row.member_id}</TableCell>
-                      <TableCell align="center">{row.name}</TableCell>
+                      <TableCell align="left">{row.memberId}</TableCell>
+                      <TableCell align="center">{row.fullName}</TableCell>
                      <TableCell align="center">{row.division}</TableCell>
-                      <TableCell align="center">{row.limit}</TableCell>
+                      <TableCell align="center" width={170}>
+                        <Stack>
+                          <BorderLinearProgress
+                            variant="determinate"
+                            value={row.limit.percentage}
+                            sx={{ mb: 1 }}
+                          />
+                          <Typography sx={{ typography: 'caption', color: '#637381' }}>
+                            {fSplit(row.limit.current)} / {fSplit(row.limit.total)}
+                          </Typography>
+                        </Stack>
+                      </TableCell>
                      <TableCell align="center">
-                        {row.status.toLowerCase() === 'active' ? (
+                        {row.status === 1 ? (
                          <Button
                            sx={{
                              backgroundColor: 'rgba(84, 214, 44, 0.16)',
@@ -405,7 +449,7 @@ export default function TableList(props: any) {
                              },
                            }}
                          >
-                            {row.status}
+                            Active
                          </Button>
                        ) : (
                          <Button
@@ -419,7 +463,7 @@ export default function TableList(props: any) {
                              },
                            }}
                          >
-                            {row.status}
+                            Inactive
                          </Button>
                        )}
                      </TableCell>