Merge branch 'mhmfajar-dev' into mhmfajar
This commit is contained in:
Muhammad Fajar
31
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
Executable file
31
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
Executable file
@@ -0,0 +1,31 @@
|
||||
// mui
|
||||
import { Container, Grid, Card } from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
// utils
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// sections
|
||||
// import ListTable from '../../sections/claimreports/ListTable';
|
||||
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
||||
|
||||
import List from './List';
|
||||
|
||||
export default function Drugs() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
// const { corporate_id } = useParams();
|
||||
|
||||
return (
|
||||
<Page title="Alarm Center">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Card>
|
||||
<List />
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
417
frontend/client-portal/src/pages/AlarmCenter/List.tsx
Executable file
417
frontend/client-portal/src/pages/AlarmCenter/List.tsx
Executable file
@@ -0,0 +1,417 @@
|
||||
// @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<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={{ width: '100%' }}>
|
||||
<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 handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
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 (
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
{!currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter} />
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{currentImportFileName && (
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>
|
||||
{currentImportFileName ?? 'No File Selected'}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelImportButton}
|
||||
size="small"
|
||||
fullWidth={false}
|
||||
sx={{ p: 1.8 }}
|
||||
>
|
||||
<CancelIcon color="error" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Button
|
||||
id="upload-button"
|
||||
variant="outlined"
|
||||
startIcon={<UploadIcon />}
|
||||
sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
{importResult && (
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: 'text.secondary' }}>
|
||||
Last Import Result Report :{' '}
|
||||
<a href={importResult.result_file?.url ?? '#'}>
|
||||
{importResult.result_file?.name ?? '-'}
|
||||
</a>
|
||||
</Box>
|
||||
</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 [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||
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 [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 (
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={5}
|
||||
sx={{ backgroundColor: '#F4F6F8', paddingX: 3, paddingY: '13px' }}
|
||||
>
|
||||
<Button variant="subtitle2" sx={{ position: 'relative' }}>
|
||||
All Data ( Count )
|
||||
<Typography
|
||||
sx={{
|
||||
borderBottom: '2px solid #19BBBB',
|
||||
borderRadius: '1px',
|
||||
position: 'absolute',
|
||||
bottom: '-13px',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
component="span"
|
||||
/>
|
||||
</Button>
|
||||
<Button variant="subtitle2" sx={{ position: 'relative' }}>
|
||||
Ongoing ( Count )
|
||||
{/* <Typography
|
||||
sx={{
|
||||
borderBottom: '2px solid #19BBBB',
|
||||
borderRadius: '1px',
|
||||
position: 'absolute',
|
||||
bottom: '-13px',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
component="span"
|
||||
/> */}
|
||||
</Button>
|
||||
<Button variant="subtitle2" sx={{ position: 'relative' }}>
|
||||
Done ( Count )
|
||||
{/* <Typography
|
||||
sx={{
|
||||
borderBottom: '2px solid #19BBBB',
|
||||
borderRadius: '1px',
|
||||
position: 'absolute',
|
||||
bottom: '-13px',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
component="span"
|
||||
/> */}
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<ImportForm />
|
||||
|
||||
<Card>
|
||||
{/* The Main Table */}
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="collapsible table">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell style={headStyle} align="left">
|
||||
No
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Name
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Member ID
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Service
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
Start Date
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="left">
|
||||
End Date
|
||||
</TableCell>
|
||||
<TableCell style={headStyle} align="right" width={100}>
|
||||
Status
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{dataTableIsLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
Loading
|
||||
</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} />
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
|
||||
</Card>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
291
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
Executable file
291
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
Executable file
@@ -0,0 +1,291 @@
|
||||
// mui
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Tabs,
|
||||
Tab,
|
||||
IconButton,
|
||||
Container,
|
||||
Grid,
|
||||
Card,
|
||||
Stack,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Favorite } from '@mui/icons-material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Iconify from '../../components/Iconify';
|
||||
// utils
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
import { useRef, useState, SyntheticEvent } from 'react';
|
||||
// sections
|
||||
// import ListTable from '../../sections/claimreports/ListTable';
|
||||
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
index: number;
|
||||
value: number;
|
||||
}
|
||||
|
||||
function TabPanel(props: TabPanelProps) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="tabpanel"
|
||||
hidden={value !== index}
|
||||
id={`simple-tabpanel-${index}`}
|
||||
aria-labelledby={`simple-tab-${index}`}
|
||||
style={{ backgroundColor: '#F9FAFB' }}
|
||||
{...other}
|
||||
>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function a11yProps(index: number) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
'aria-controls': `simple-tabpanel-${index}`,
|
||||
};
|
||||
}
|
||||
|
||||
interface StyledTabsProps {
|
||||
children?: React.ReactNode;
|
||||
value: number;
|
||||
onChange: (event: React.SyntheticEvent, newValue: number) => void;
|
||||
}
|
||||
|
||||
const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
|
||||
'& .MuiTabs-indicator': {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
'& .MuiTabs-indicatorSpan': {
|
||||
maxWidth: 40,
|
||||
width: '100%',
|
||||
backgroundColor: '#635ee7',
|
||||
},
|
||||
});
|
||||
|
||||
interface StyledTabProps {
|
||||
label: string;
|
||||
icon?: string | React.ReactElement;
|
||||
}
|
||||
|
||||
const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
|
||||
({ theme }) => ({
|
||||
textTransform: 'none',
|
||||
fontWeight: 500,
|
||||
fontSize: theme.typography.pxToRem(20),
|
||||
color: theme.palette.primary.main,
|
||||
maxWidth: '100%',
|
||||
flex: 1,
|
||||
margin: '0 !important',
|
||||
'&.Mui-selected': {
|
||||
color: '#FFF',
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
color: '#FFF',
|
||||
opacity: 1,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
export default function Drugs() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event: SyntheticEvent, newValue: number) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<Page title="Service Monitoring 123456">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
|
||||
<IconButton sx={{ marginRight: '10px', color: '#424242' }}>
|
||||
<Iconify icon="heroicons-outline:arrow-narrow-left" />
|
||||
</IconButton>
|
||||
<Typography variant="h5">Service Monitoring</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{
|
||||
backgroundColor: '#DFE3E8',
|
||||
color: '#212B36',
|
||||
paddingX: 2,
|
||||
paddingY: 1,
|
||||
marginLeft: 3,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Iconify icon="akar-icons:check" sx={{ marginRight: 1 }} />
|
||||
<Typography variant="caption">Done</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Grid container spacing={3} sx={{ marginBottom: 5 }}>
|
||||
{/* Item 1 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Card sx={{ borderRadius: '6px' }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
>
|
||||
<Iconify icon="bxs:user" width={22} height={18} sx={{ marginRight: '10px' }} />
|
||||
<Typography>Employee Profiles</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Nama perusahaan</Typography>
|
||||
<Typography variant="body2">PT. Amman Mineral</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Nama Lengkap</Typography>
|
||||
<Typography variant="body2">Stephen kuow</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanggal lahir</Typography>
|
||||
<Typography variant="body2">09 Aug 1980</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Email</Typography>
|
||||
<Typography variant="body2">Stephen.uow@gmal.com</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">No telepon</Typography>
|
||||
<Typography variant="body2">+62 821-8123-2323</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">ID Karyawan</Typography>
|
||||
<Typography variant="body2">12345678</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* Item 2 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
>
|
||||
<Iconify
|
||||
icon="heroicons-solid:clipboard-list"
|
||||
width={22}
|
||||
height={18}
|
||||
sx={{ marginRight: '10px' }}
|
||||
/>
|
||||
<Typography>Diagnose Summary</Typography>
|
||||
</Stack>
|
||||
<Stack spacing={2} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Gejala</Typography>
|
||||
<Typography variant="body2">Nyeri dada</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanda</Typography>
|
||||
<Typography variant="body2">Sesak Napas</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Main Diagnose</Typography>
|
||||
<Typography variant="body2">
|
||||
J46 Status asthmaticus, Acute severe asthma
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Diagnosis pembanding</Typography>
|
||||
<Typography variant="body2">K21 Gastro-oesophageal reflux disease</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* Item 3 */}
|
||||
<Grid item xs={4} lg={4} md={6}>
|
||||
<Card sx={{ borderRadius: '6px', height: '100%' }}>
|
||||
<Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
sx={{ backgroundColor: '#F5F5F5', paddingY: 1, paddingX: 2, color: '#19BBBB' }}
|
||||
>
|
||||
<Iconify
|
||||
icon="iconoir:healthcare"
|
||||
width={22}
|
||||
height={18}
|
||||
sx={{ marginRight: '10px' }}
|
||||
/>
|
||||
<Typography>Services</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={1} sx={{ paddingY: 1, paddingX: 2 }}>
|
||||
<Stack spacing={2}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Evakuasi medis</Typography>
|
||||
<Typography variant="body2">Land Transportation</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Rumah sakit</Typography>
|
||||
<Typography variant="body2">Primaya Hospital</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={16}>
|
||||
<Stack>
|
||||
<Typography variant="caption">Tanggal mulai</Typography>
|
||||
<Typography variant="body2">17 Aug 2022</Typography>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Selesai</Typography>
|
||||
<Typography variant="body2">18 Aug 2022</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<Typography variant="caption">Daftar layanan</Typography>
|
||||
<Typography variant="body2">
|
||||
Inpatient, Medivac (Medical Evacuation)
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||
<StyledTab icon={<Favorite />} label="Daily Monitoring" {...a11yProps(0)} />
|
||||
<StyledTab
|
||||
icon={<Iconify icon="heroicons-solid:beaker" />}
|
||||
label="Item Two"
|
||||
{...a11yProps(1)}
|
||||
/>
|
||||
</StyledTabs>
|
||||
</Box>
|
||||
<TabPanel value={value} index={0}>
|
||||
Item One
|
||||
</TabPanel>
|
||||
<TabPanel value={value} index={1}>
|
||||
Item Two
|
||||
</TabPanel>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
46
frontend/client-portal/src/pages/ClaimReport/Index.tsx
Executable file
46
frontend/client-portal/src/pages/ClaimReport/Index.tsx
Executable file
@@ -0,0 +1,46 @@
|
||||
// @mui
|
||||
import { Card, Container, Grid, TableBody, TableCell, TableRow } from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
// utils
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// theme
|
||||
import palette from '../../theme/palette';
|
||||
// section
|
||||
import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const listClaimItems = [
|
||||
{ name: 'Requested', value: 15, color: palette.dark.primary.dark },
|
||||
{ name: 'Approval', value: 20, color: palette.dark.warning.dark },
|
||||
{ name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
|
||||
{ name: 'Rejected', value: 20, color: palette.dark.error.dark },
|
||||
];
|
||||
|
||||
const testingData = [
|
||||
{ label: 'Member ID', value: 'member_id' },
|
||||
{ label: 'Name', value: 'name' },
|
||||
{ label: 'Divisi', value: 'division_id' },
|
||||
];
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Drugs() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
return (
|
||||
<Page title="Claim Reports">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<CardClaimStatus data={listClaimItems} />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Card></Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import * as Yup from 'yup';
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import { useMemo, useState } from 'react';
|
||||
import Form from "./Form";
|
||||
|
||||
|
||||
export default function Divisions() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
|
||||
const [currentFormularium, setCurrentFormularium] = useState({});
|
||||
|
||||
const NewDivisionSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
code: Yup.string().required('Corporate Code is required'),
|
||||
active: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
code: '',
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(NewDivisionSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
console.log(data)
|
||||
};
|
||||
|
||||
const pageTitle = 'Create Formularium';
|
||||
return (
|
||||
<Page title={pageTitle}>
|
||||
|
||||
<HeaderBreadcrumbs
|
||||
heading={pageTitle}
|
||||
links={[
|
||||
{
|
||||
name: 'Master',
|
||||
href: '/master',
|
||||
},
|
||||
{
|
||||
name: 'Formularium',
|
||||
href: '/master/formularium/',
|
||||
},
|
||||
{
|
||||
name: 'Create',
|
||||
href: '/master/formularium/create/',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Card sx={{ p: 2 }}>
|
||||
<Form isSubmitting={isSubmitting} isEdit={isEdit} currentFormularium={currentFormularium} />
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
import * as Yup from 'yup';
|
||||
import { useSnackbar } from 'notistack';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Card,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
// components
|
||||
import {
|
||||
FormProvider,
|
||||
RHFTextField,
|
||||
RHFRadioGroup,
|
||||
RHFUploadAvatar,
|
||||
RHFSwitch,
|
||||
RHFEditor,
|
||||
RHFDatepicker,
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
} from '../../../components/hook-form';
|
||||
import { Corporate } from '../../../@types/corporates';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Corporate> {
|
||||
taxes: boolean;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
isEdit: boolean;
|
||||
currentFormularium?: Corporate;
|
||||
};
|
||||
|
||||
export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
// code: Yup.string().required('Corporate Code is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
code: currentFormularium?.code || '',
|
||||
name: currentFormularium?.name || '',
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentFormularium]
|
||||
);
|
||||
|
||||
const methods = useForm<FormValuesProps>({
|
||||
resolver: yupResolver(NewCorporateSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const {
|
||||
reset,
|
||||
watch,
|
||||
control,
|
||||
setValue,
|
||||
getValues,
|
||||
setError,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting },
|
||||
} = methods;
|
||||
|
||||
const values = watch();
|
||||
|
||||
useEffect(() => {
|
||||
if (isEdit && currentFormularium) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
if (!isEdit) {
|
||||
reset(defaultValues);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentFormularium]);
|
||||
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
try {
|
||||
if (!isEdit) {
|
||||
const response = await axios.post('/master/formulariums', data);
|
||||
} else {
|
||||
const response = await axios.put('/master/formulariums/' + currentFormularium?.id ?? '', data);
|
||||
}
|
||||
reset();
|
||||
enqueueSnackbar(!isEdit ? 'Formularium Created Successfully!' : 'Formularium Udpated Successfully!', { variant: 'success' });
|
||||
navigate('/master/formularium');
|
||||
} catch (error: any) {
|
||||
if (error && error.response.status === 422) {
|
||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
||||
setError(key, { message: value[0] });
|
||||
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
else {
|
||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
|
||||
const ascent = document?.querySelector("ascent");
|
||||
if (ascent != null) {
|
||||
ascent.innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles) => {
|
||||
setValue(
|
||||
'logo',
|
||||
acceptedFiles.map((file: Blob | MediaSource) =>
|
||||
Object.assign(file, {
|
||||
preview: URL.createObjectURL(file),
|
||||
})
|
||||
)
|
||||
);
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
const handleRemove = (file: File | string) => {
|
||||
setValue('logo', null);
|
||||
};
|
||||
|
||||
const linking_rules_checkbox_name = "linking_rules"
|
||||
const linking_tools = [
|
||||
{
|
||||
"value" : "nrik",
|
||||
"label" : "No. KTP"
|
||||
},
|
||||
{
|
||||
"value" : "nik",
|
||||
"label" : "Nomor Induk Karyawan (NIK)"
|
||||
},
|
||||
{
|
||||
"value" : "member_id",
|
||||
"label" : "Member ID"
|
||||
},
|
||||
{
|
||||
"value" : "phone",
|
||||
"label" : "Nomor Telepon"
|
||||
},
|
||||
{
|
||||
"value" : "email",
|
||||
"label" : "E-Mail"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const importForm = useRef<HTMLInputElement>(null)
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const [currentImportFileName, setCurrentImportFileName] = useState<string|null>(null);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
|
||||
<Typography variant="h6">Formularium Detail</Typography>
|
||||
|
||||
<div>
|
||||
<RHFTextField name="code" label="Code" />
|
||||
{(!(currentFormularium?.id) && <Typography variant="caption">Will be generated if empty</Typography>)}
|
||||
</div>
|
||||
|
||||
<RHFTextField name="name" label="Name" />
|
||||
|
||||
<Typography variant="h6">Formularium Drug List Import</Typography>
|
||||
|
||||
<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" />
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
|
||||
{(currentImportFileName && <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>)}
|
||||
</ButtonGroup>
|
||||
|
||||
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
|
||||
{!isEdit ? 'Save New Corporate' : 'Save Update'}
|
||||
</LoadingButton>
|
||||
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,25 +1,29 @@
|
||||
// @mui
|
||||
import { Container, Grid, Typography } from '@mui/material';
|
||||
import { Typography, Container, Grid } from '@mui/material';
|
||||
// hooks
|
||||
import useSettings from '../hooks/useSettings';
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// components
|
||||
import Page from '../components/Page';
|
||||
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';
|
||||
import Page from '../../components/Page';
|
||||
// Table
|
||||
import List from './List';
|
||||
// theme
|
||||
import CardNotification from '../../sections/dashboard/CardNotification';
|
||||
import CardBalance from '../../sections/dashboard/CardBalance';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
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 Dashboard() {
|
||||
const { themeStretch } = useSettings();
|
||||
const [openPopup, setOpenPopup] = useState(false);
|
||||
|
||||
// const { logout } = useAuth();
|
||||
// const [corporate, setCorporate] = useState({});
|
||||
|
||||
// const loadSomething = () => {
|
||||
@@ -46,18 +50,18 @@ export default function Dashboard() {
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6} lg={6} md={12}>
|
||||
<NotificationCard />
|
||||
<CardNotification data={itemList} />
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} md={12}>
|
||||
<BalanceCard setOpenPopup={setOpenPopup} />
|
||||
<CardBalance />
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<DashboardTable />
|
||||
{/* <List /> */}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
<Popup openPopup={openPopup} setOpenPopup={setOpenPopup} />
|
||||
{/* <DialogDetailClaim /> */}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
// @mui
|
||||
import { Button, Container, 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 { Link } from 'react-router-dom';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function PageOne() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { logout } = useAuth();
|
||||
|
||||
const loadSomething = () => {
|
||||
console.log('Loading Something')
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Create Obat">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Create Obat
|
||||
</Typography>
|
||||
<Typography>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</Typography>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
import { capitalCase } from 'change-case';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { Box, Card, Divider, Grid, Link, Stack, Tooltip, Typography } from '@mui/material';
|
||||
// hooks
|
||||
import useAuth from '../../hooks/useAuth';
|
||||
import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
import Image from '../../components/Image';
|
||||
@@ -36,10 +33,8 @@ const ContentStyle = styled(Card)(({ theme }) => ({
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Login() {
|
||||
const { method } = useAuth();
|
||||
const location = useLocation();
|
||||
const { state } = useLocation();
|
||||
const [formPhone, setFormPhone] = useState(false);
|
||||
// const { setForm } = location.state;
|
||||
|
||||
const handlerChange = (event: any, setForm: boolean) => {
|
||||
event.preventDefault();
|
||||
@@ -47,9 +42,11 @@ export default function Login() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('setForm');
|
||||
// setFormPhone(setForm ? setForm : true);
|
||||
}, []);
|
||||
if (state !== null) {
|
||||
setFormPhone(state.formPhone);
|
||||
}
|
||||
console.log(state);
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<Page title="Login">
|
||||
@@ -61,10 +58,7 @@ export default function Login() {
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ padding: 3 }}>
|
||||
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
||||
<Tooltip title={capitalCase(method)} placement="left">
|
||||
<Logo sx={{ width: 90, height: 90 }} />
|
||||
</Tooltip>
|
||||
|
||||
<Logo sx={{ width: 90, height: 90 }} />
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Sign in to LinkSehat
|
||||
@@ -75,29 +69,31 @@ export default function Login() {
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{formPhone === false ? <LoginEmailForm /> : <LoginPhoneForm />}
|
||||
{formPhone ? (
|
||||
<LoginPhoneForm formPhone={formPhone} />
|
||||
) : (
|
||||
<LoginEmailForm formPhone={formPhone} />
|
||||
)}
|
||||
|
||||
<Divider sx={{ marginTop: 5 }}>Atau</Divider>
|
||||
|
||||
<Stack sx={{ marginTop: 5 }}>
|
||||
{formPhone === false ? (
|
||||
{formPhone ? (
|
||||
<Link
|
||||
href=""
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, true)}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
href=""
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, false)}
|
||||
>
|
||||
Masuk menggunakan email
|
||||
</Link>
|
||||
) : (
|
||||
<Link
|
||||
align="center"
|
||||
underline="hover"
|
||||
onClick={(event) => handlerChange(event, true)}
|
||||
>
|
||||
Masuk menggunakan nomor handphone
|
||||
</Link>
|
||||
)}
|
||||
</Stack>
|
||||
</Grid>
|
||||
|
||||
Reference in New Issue
Block a user