aso client-portal dashboard

frontend/client-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx

@@ -79,8 +79,8 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
               <Typography ml={3}>PRIME CENTER</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
-          </Stack>) 
-        : (
+          </Stack>
+        ) : (
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Logo />
           </Stack>

frontend/client-portal/src/pages/Dashboard.tsx

@@ -1,51 +1,37 @@
 // @mui
-import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+import { Container, Grid, Typography } from '@mui/material';
 // hooks
 import useSettings from '../hooks/useSettings';
 // components
 import Page from '../components/Page';
-import axios from '../utils/axios';
-import useAuth from '../hooks/useAuth';
-import SomethingUsage from '../sections/dashboard/SomethingUsage';
-import { fCurrency } from '../utils/formatNumber';
-import { useEffect, useState } from 'react';
+// import axios from '../utils/axios';
+// import { useEffect, useState } from 'react';
+import BalanceCard from '../sections/dashboard/BalanceCard';
+import NotificationCard from '../sections/dashboard/NotificationCard';
+import DashboardTable from '../sections/dashboard/DashboardTable';
 
 // ----------------------------------------------------------------------
 
 export default function Dashboard() {
   const { themeStretch } = useSettings();
 
-  const { logout } = useAuth();
-  const [ corporate, setCorporate ] = useState({});
-  
-  const loadSomething = () => {
-    // axios.get('/user')
-    axios.get('dashboard')
-      .then((res) => {
-        setCorporate(res.data.corporate)
-      })
-      .catch((err) => {
-        alert('Opps, Something Went Wrong when collecting dashboard data')
-      })
-  };
+  // const { logout } = useAuth();
+  // const [corporate, setCorporate] = useState({});
 
-  useEffect(() => {
-    loadSomething()
-  }, [])
+  // const loadSomething = () => {
+  //   axios
+  //     .get('dashboard')
+  //     .then((res) => {
+  //       setCorporate(res.data.corporate);
+  //     })
+  //     .catch((err) => {
+  //       alert('Opps, Something Went Wrong when collecting dashboard data');
+  //     });
+  // };
 
-  const DangerCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.error.main,
-    backgroundColor: theme.palette.error.lighter,
-  }));
-
-  const SuccessCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.success.darker,
-    backgroundColor: theme.palette.success.lighter,
-  }));
+  // useEffect(() => {
+  //   loadSomething();
+  // }, []);
 
   return (
     <Page title="Dashboard">
@@ -55,23 +41,14 @@ export default function Dashboard() {
         </Typography>
 
         <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <SomethingUsage />
+          <Grid item xs={6} lg={6} md={12}>
+            <NotificationCard />
           </Grid>
-          <Grid item xs={6}>
-            <DangerCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
-                <Typography>{fCurrency(15000000)} (57)</Typography>
-              </Stack>
-            </DangerCard>
-            <br />
-            <SuccessCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
-                <Typography>November 2022</Typography>
-              </Stack>
-            </SuccessCard>
+          <Grid item xs={6} lg={6} md={12}>
+            <BalanceCard />
+          </Grid>
+          <Grid item xs={12} lg={12} md={12}>
+            <DashboardTable />
           </Grid>
         </Grid>
       </Container>

frontend/client-portal/src/sections/dashboard/BalanceCard.tsx

@@ -0,0 +1,88 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Button,
+  Card,
+  Typography,
+  Stack,
+  LinearProgress,
+  linearProgressClasses,
+} from '@mui/material';
+// utils
+import { fCurrency } from '../../utils/formatNumber';
+// components
+import Iconify from '../../components/Iconify';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(3),
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '240px',
+}));
+
+// ----------------------------------------------------------------------
+
+const INITIAL = 500000000;
+const TOTAL = 250000000;
+const PERCENT = 50;
+
+export default function BalanceCard() {
+  const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 6,
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+      backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+      borderRadius: 6,
+      backgroundColor: theme.palette.primary.main,
+    },
+  }));
+
+  return (
+    <RootStyle>
+      <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
+        <div>
+          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
+            Total Limit
+          </Typography>
+          <Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
+          <Typography sx={{ typography: 'caption' }}>/ {INITIAL}</Typography>
+        </div>
+
+        <Stack direction="row" alignItems="center" justifyContent="center">
+          <Typography variant="h5" sx={{ ml: 0.5 }}>
+            {PERCENT}%
+          </Typography>
+        </Stack>
+      </Stack>
+
+      <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
+
+      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
+        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
+        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={2}>
+        <Button
+          variant="outlined"
+          startIcon={<Iconify icon="bi:clipboard-check-fill" />}
+          fullWidth={true}
+        >
+          Submit Claim
+        </Button>
+        <Button
+          variant="contained"
+          startIcon={<Iconify icon="heroicons-solid:cash" />}
+          fullWidth={true}
+        >
+          Top Up
+        </Button>
+      </Stack>
+    </RootStyle>
+  );
+}

frontend/client-portal/src/sections/dashboard/DashboardTable.tsx

@@ -0,0 +1,315 @@
+// @mui
+import {
+  Autocomplete,
+  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,
+  TablePagination,
+  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';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../hooks/useSettings';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../utils/axios';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+import { Member } from '../../@types/member';
+import Iconify from '../../components/Iconify';
+
+export default function DashboardTable() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+
+  function SearchInput(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    };
+
+    // useEffect(() => {
+    //   // Trigger First Search
+    //   setSearchText(searchParams.get('search') ?? '');
+    // }, [searchParams]);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ flex: '1' }}>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const options = ['All', 'Option 2'];
+    const [value, setValue] = React.useState<string | null>(options[0]);
+    const [inputValue, setInputValue] = React.useState('');
+
+    return (
+      <div>
+        <Stack direction={'row'} justifyContent="space-between" spacing={2} sx={{ p: 2 }}>
+          {/* Filter Division */}
+          <Autocomplete
+            value={value}
+            onChange={(event: any, newValue: string | null) => {
+              setValue(newValue);
+            }}
+            inputValue={inputValue}
+            onInputChange={(event, newInputValue) => {
+              setInputValue(newInputValue);
+            }}
+            id="controllable-states-demo"
+            options={options}
+            sx={{ minWidth: 240 }}
+            renderInput={(params) => <TextField {...params} label="Division" />}
+          />
+          {/* Search */}
+          <SearchInput onSearch={applyFilter} />
+
+          {/* Button Import */}
+          <Button
+            id="import-button"
+            variant="outlined"
+            startIcon={<Iconify icon="eva:download-fill" />}
+            sx={{ p: 1.8, minWidth: '104px' }}
+            // onClick={() => {}}
+          >
+            Import
+          </Button>
+          {/* <input
+            type="file"
+            id="file"
+            ref={importForm}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          /> */}
+          {/* Button Add Task */}
+          <Button startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
+            Add Data
+          </Button>
+        </Stack>
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData(member: Member): Member {
+    return {
+      ...member,
+    };
+  }
+
+  // Generate the every row of the table
+  // function Row(props: { row: ReturnType<typeof createData> }) {
+  //   const { row } = props;
+  //   const [open, setOpen] = React.useState(true);
+
+  //   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.member_id}</TableCell>
+  //         <TableCell align="left">{row.payor_id}</TableCell>
+  //         <TableCell align="left">{row.name}</TableCell>
+  //         <TableCell align="left">{row.nik}</TableCell>
+  //         <TableCell align="left">{row.nric}</TableCell>
+
+  //         <TableCell align="right">
+  //           <Button variant="outlined" color="success" size="small">
+  //             Active
+  //           </Button>
+  //         </TableCell>
+  //         {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
+  //       </TableRow>
+  //       {/* COLLAPSIBLE ROW */}
+  //       <TableRow>
+  //         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+  //           <Collapse in={open} timeout="auto" unmountOnExit>
+  //             <Box sx={{ borderBottom: 1 }}>
+  //               <Typography variant="body2" gutterBottom component="div">
+  //                 <Grid></Grid>
+  //               </Typography>
+  //             </Box>
+  //           </Collapse>
+  //         </TableCell>
+  //       </TableRow>
+  //     </React.Fragment>
+  //   );
+  // }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/members', { params: filter });
+
+    setDataTableData(response.data.members);
+    setDataTableLoading(false);
+  };
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Card>
+      <ImportForm />
+      <Stack>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  MemberID
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Divisi
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Limit
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={100}>
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={100}>
+                  Action
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data Found
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length === 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {/* {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))} */}
+                Testing
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        {/* <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        /> */}
+      </Stack>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/dashboard/NotificationCard.tsx

@@ -0,0 +1,109 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Divider, Link, Typography, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '../../components/Iconify';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '240px',
+}));
+
+const ItemStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+  maxHeight: '170px',
+}));
+
+const itemList = [
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
+];
+
+// ----------------------------------------------------------------------
+
+export default function NotificationCard() {
+  return (
+    <RootStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <div
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
+          View All
+        </Button>
+      </Stack>
+
+      <Stack sx={{ marginTop: 2 }}>
+        <ItemStyle>
+          {itemList.map(({ info, date, time }, key) => (
+            <div key={key}>
+              {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+              <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                  <Link
+                    component="button"
+                    variant="caption"
+                    underline="always"
+                    onClick={() => {
+                      alert('Info Detail');
+                    }}
+                  >
+                    Info Detail
+                  </Link>
+                </Stack>
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                </Stack>
+              </Stack>
+            </div>
+          ))}
+        </ItemStyle>
+      </Stack>
+
+      {/* <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
+
+      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
+        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
+        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={2}>
+        <Button variant="outlined" fullWidth={true}>
+          Submit Claim
+        </Button>
+        <Button variant="contained" startIcon={<Payments />} fullWidth={true}>
+          Top Up
+        </Button>
+      </Stack> */}
+    </RootStyle>
+  );
+}

frontend/client-portal/src/theme/palette.ts

@@ -62,11 +62,11 @@ declare module '@mui/material' {
 
 // SETUP COLORS
 const PRIMARY = {
-  lighter: '#C8FACD',
-  light: '#5BE584',
-  main: '#00AB55',
-  dark: '#007B55',
-  darker: '#005249',
+  lighter: '#D1F1F1',
+  light: '#B2E8E8',
+  main: '#19BBBB',
+  dark: '#159C9C',
+  darker: '#117D7D',
 };
 const SECONDARY = {
   lighter: '#D6E4FF',

frontend/client-portal/src/utils/getColorPresets.ts

@@ -34,11 +34,11 @@ export const colorPresets = [
   // BLUE
   {
     name: 'blue',
-    lighter: '#D1E9FC',
-    light: '#76B0F1',
-    main: '#2065D1',
-    dark: '#103996',
-    darker: '#061B64',
+    lighter: '#D1F1F1',
+    light: '#B2E8E8',
+    main: '#19BBBB',
+    dark: '#159C9C',
+    darker: '#117D7D',
     contrastText: '#fff',
   },
   // ORANGE