diff --git a/frontend/client-portal/src/pages/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard.tsx deleted file mode 100755 index bee08c9d..00000000 --- a/frontend/client-portal/src/pages/Dashboard.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// @mui -import { Button, Container, Grid, styled, Typography, Card, Stack } 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'; - -// ---------------------------------------------------------------------- - -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') - }) - }; - - useEffect(() => { - loadSomething() - }, []) - - 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, - })); - - return ( - - - - Dashboard - - - - - - - - - - This Month Usages - {fCurrency(15000000)} (57) - - -
- - - Remaining Balance Estimation - November 2022 - - - - - - - ); -} diff --git a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx new file mode 100755 index 00000000..18c42ff3 --- /dev/null +++ b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx @@ -0,0 +1,251 @@ +// @mui +import { styled } from '@mui/material/styles'; +import { + Button, + Card, + Typography, + Link, + Divider, + Stack, + LinearProgress, + linearProgressClasses, + Container, + Grid, +} from '@mui/material'; +import { ChevronRight } from '@mui/icons-material'; +// hooks +import useSettings from '../../hooks/useSettings'; +// utils +import { fCurrency } from '../../utils/formatNumber'; +// components +import Page from '../../components/Page'; +import Iconify from '../../components/Iconify'; +// import Popup from '../components/Popup'; +// import axios from '../utils/axios'; +// DashboardComponent +// import BalanceCard from '../sections/dashboard/BalanceCard'; +// import NotificationCard from '../sections/dashboard/NotificationCard'; +// import DashboardTable from '../sections/dashboard/DashboardTable'; +// React +import { useState } from 'react'; +// Table +import List from './List'; + +// ---------------------------------------------------------------------- + +const RootBalanceStyle = styled(Card)(({ theme }) => ({ + boxShadow: 'none', + padding: theme.spacing(3), + color: 'black', + backgroundColor: theme.palette.grey[200], + maxHeight: '240px', +})); + +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, + }, +})); + +const RootNotificationStyle = styled(Card)(({ theme }) => ({ + boxShadow: 'none', + padding: '1rem 0.5rem', + color: 'black', + backgroundColor: theme.palette.grey[200], + maxHeight: '240px', +})); + +const ItemNotificationStyle = 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' }, +]; + +const INITIAL = '500.000.000'; +const TOTAL = 375000000; +const PERCENT = 75; + +// ---------------------------------------------------------------------- + +export default function Dashboard() { + const { themeStretch } = useSettings(); + const [openPopup, setOpenPopup] = useState(false); + + // const { logout } = useAuth(); + // const [corporate, setCorporate] = useState({}); + + // const loadSomething = () => { + // axios + // .get('dashboard') + // .then((res) => { + // setCorporate(res.data.corporate); + // }) + // .catch((err) => { + // alert('Opps, Something Went Wrong when collecting dashboard data'); + // }); + // }; + + // useEffect(() => { + // loadSomething(); + // }, []); + + return ( + + + + Dashboard + + + + + + + + + + Notification +
+ + + + + + + + {itemList.map(({ info, date, time }, key) => ( +
+ {key >= 1 ? : ''} + + + {info} + { + alert('Info Detail'); + }} + > + Info Detail + + + + + {date} + + + {time} + + + +
+ ))} + + + + + + + +
+ + Total Limit + + {fCurrency(TOTAL)} + + / {INITIAL} + +
+ + + + {PERCENT}% + + + + + + + + + + + Lock Fund ( 25% ) + + + + 125.000.000 / 125.000.000 + + + + + + + + + + + + + + + + {/* */} + + ); +} diff --git a/frontend/client-portal/src/pages/Dashboard/List.tsx b/frontend/client-portal/src/pages/Dashboard/List.tsx new file mode 100755 index 00000000..38b825c6 --- /dev/null +++ b/frontend/client-portal/src/pages/Dashboard/List.tsx @@ -0,0 +1,314 @@ +// @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, 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 { Icd } from '../../@types/diagnosis'; +import BasePagination from '../../components/BasePagination'; +import { Member } from '../../@types/member'; + +export default function List() { + 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(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 ( +
+ + + ); + } + + function ImportForm(props: any) { + // IMPORT + // Create Button Menu + const [anchorEl, setAnchorEl] = React.useState(null); + const createMenu = Boolean(anchorEl); + const importForm = useRef(null) + const [currentImportFileName, setCurrentImportFileName] = useState(null) + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleImportButton = () => { + if (importForm?.current) { + handleClose(); + importForm.current ? importForm.current.click() : console.log('No File selected'); + } else { + alert('No file selected') + } + } + + const handleCancelImportButton = () => { + importForm.current.value = ""; + importForm.current.dispatchEvent(new Event("change", { bubbles: true })); + } + + const handleImportChange = (event: any) => { + if (event.target.files[0]) { + setCurrentImportFileName(event.target.files[0].name) + } else { + setCurrentImportFileName(null); + } + } + + const handleUpload = () => { + if (importForm.current?.files.length) { + const formData = new FormData(); + formData.append("file", importForm.current?.files[0]) + axios.post(`master/formularium/import`, formData ) + .then(response => { + handleCancelImportButton(); + loadDataTableData(); + setImportResult(response.data) + // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows'); + }) + .catch(response => { + alert('Looks like something went wrong. Please check your data and try again. ' + response.message) + }) + } else { + alert('No File Selected') + } + } + + return ( +
+ + {( !currentImportFileName && + + {/*

kjasndkjandskjasndkjansdkjansd

*/} + + + {navigate('/master/formularium/create')} }>Create + Import + Download Template + + + )} + + {( currentImportFileName && + + + + + + + + )} + {( importResult && + + Last Import Result Report : {importResult.result_file?.name ?? "-"} + + )} +
+ ); + } + + // 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 }) { + const { row } = props; + const [open, setOpen] = React.useState(true); + + return ( + + *': { borderBottom: 'unset' } }}> + + setOpen(!open)} + > + {open ? : } + + + {row.member_id} + {row.payor_id} + {row.name} + {row.nik} + {row.nric} + + + {/* */} + + {/* COLLAPSIBLE ROW */} + + + + + + + + + + + + + ); + } + + // Dummy Default Data + const [dataTableIsLoading, setDataTableLoading] = useState(true); + const [dataTableLastRequest, setDataTableLastRequest] = useState(0); + const [dataTableResponseState, setDataTableResponseState] = useState('idle'); + const [dataTableData, setDataTableData] = useState({ + 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 [dataTablePage, setDataTablePage] = useState(5); + + 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 }); + } + + const handlePageChange = (event : ChangeEvent, value: number) => { + const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]); + loadDataTableData(filter); + setSearchParams(filter); + } + + useEffect(() => { + loadDataTableData(); + }, []) + + return ( + + + + + {/* The Main Table */} + + + + + Detail + MemberID + PayorID + Name + NIK + PlanID + Status + {/* Action */} + + + {dataTableIsLoading ? + ( + + + Loading + + + ) : ( + dataTableData.data.length == 0 ? + ( + + + No Data + + + ) : ( + + {dataTableData.data.map(row => ( + + ))} + + ) + )} +
+ + + + + + ); +}