tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Update Master Formularium dan Corporate formularium

Browse Source
This commit is contained in:
Tb Fajri
2023-09-25 16:21:38 +07:00
parent 72958019f1
commit 738392c143
33 changed files with 2807 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
frontend/dashboard/src/components/history/History.tsx Normal file
View File

@@ -0,0 +1,209 @@
// @mui
import {
Box,
Button,
Card,
Collapse,
Container,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Badge,
Stack,
} from '@mui/material';
import * as React from 'react';
import { useParams } from 'react-router-dom';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import { useContext, useEffect, useState } from 'react';
import MuiAccordionSummary, {
AccordionSummaryProps,
} from '@mui/material/AccordionSummary';
import useSettings from '../../hooks/useSettings';
import axios from '../../utils/axios';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import { Corporate } from '@/@types/corporates';
import { fDate, fDateTime } from '@/utils/formatTime';
const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
}));
const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props}
/>
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .05)'
: 'rgba(0, 0, 0, .03)',
flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)',
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1),
},
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)',
}));
export default function CustomizedAccordions() {
const [expanded, setExpanded] = React.useState<string | false>('panel1');
const handleChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false);
};
const pageTitle = 'Audittrail Corporate';
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
const model = 'App\\Models\\Corporate';
const url = `/audittrail/${corporate_id}?model=${model}`;
axios.get(url)
.then((res) => {
setCurrentCorporate(res.data);
})
.catch((error) => {
console.error('Terjadi kesalahan:', error);
});
}, [configuredCorporateContext]);
return (
<div>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Corporates',
href: '/corporates',
},
{
name: corporate?.name ?? '-',
href: '/corporate/' + corporate_id,
},
{
name: 'Audittrail Corporate',
href: '/corporate/' + corporate_id + '/plans',
},
]}
/>
{currentCorporate?.data.map((item, index) => (
<Accordion
key={index}
expanded={expanded === `panel${index}`}
onChange={handleChange(`panel${index}`)}
>
<AccordionSummary
aria-controls={`panel${index}d-content`}
id={`panel${index}d-header`}
>
<Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
</AccordionSummary>
<AccordionDetails>
<TableHead>
<TableRow>
<TableCell align="center">Field</TableCell>
<TableCell align="center">Old Value</TableCell>
<TableCell align="center">New Values</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.entries(item.old_values).map(([key, value]) => {
let renderedValue;
if (key === 'deleted_by' || key === 'created_by' || key === 'updated_by') {
return null; // Melewati iterasi saat key adalah 'deleted_by'
}
switch (key) {
case 'welcome_message':
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
value = value.replace(/<[^>]*>/g, '');
break;
case 'help_text':
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
value = value.replace(/<[^>]*>/g, '');
break;
case 'active':
renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
value = value == 1 ? 'Active' : 'Inactive';
break;
case 'created_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'updated_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'updated_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'delete_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
default:
renderedValue = item.new_values[key];
break;
}
const field = key.charAt(0).toUpperCase() + key.slice(1);
return (
<TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell>{`${field}`}</TableCell>
<TableCell align="center">{`${value}`}</TableCell>
<TableCell align="center">{renderedValue}</TableCell>
</TableRow>
);
})}
</TableBody>
</AccordionDetails>
</Accordion>
))}
</div>
);
}

2
frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -52,7 +52,7 @@ const navConfig = [
children: [
{ title: 'Corporate', path: '/corporates' },
// { title: 'Corporate Create', path: '/corporates/create' },
{ title: 'Formularium', path: '/master/formularium' },
{ title: 'Formularium', path: '/master/formularium-template' },
{ title: 'Obat', path: '/master/drugs' },
{ title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' },
{ title: 'Hospitals', path: '/hospitals' },

355
frontend/dashboard/src/pages/Corporates/Formularium/List-old.tsx Normal file
View File

@@ -0,0 +1,355 @@
// @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, Input, 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 { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { CorporatePlan } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
import { enqueueSnackbar } from 'notistack';
export default function PlanList() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
// 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
});
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
// const filterForm = useRef();
const [searchText, setSearchText] = useState("");
const [searchStatus, setSearchStatus] = useState("active");
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
setSearchText(newSearchText);
}
const handleStatusChange = (event: any) => {
const newSearchStatus = event.target.value ?? ''
console.log('changing to', newSearchStatus)
setSearchStatus(newSearchStatus)
// console.log(searchStatus);
const searchFilter = {
"search" : searchText,
"status" : newSearchStatus
};
props.onSearch(searchFilter);
}
const handleSubmit = (event?: any) => {
event?.preventDefault();
const searchFilter = {
"search" : searchText,
"status" : searchStatus
};
props.onSearch(searchFilter); // Trigger to Parent
}
useEffect(() => {
setSearchText(searchParams.get('search') ?? '');
setSearchStatus(searchParams.get('status') ?? searchStatus ?? 'active');
}, [searchParams])
return (
<form id="search-form" onSubmit={handleSubmit} style={{ width: '100%' }}>
<Grid container spacing={2}>
<Grid item xs={9}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
</Grid>
<Grid item xs={3}>
<Select
label="Status"
value={searchStatus}
onChange={handleStatusChange}
sx={{ width: '100%' }}
>
<MenuItem value="active">Active</MenuItem>
<MenuItem value="inactive">Inactive</MenuItem>
<MenuItem value="all">All</MenuItem>
</Select>
</Grid>
{/* ITS FUCKING MAGIC, SUBMIT BY ENTER WORKING IF THIS BUTTON IS AVAILABLE */}
<Button type='submit' variant="outlined" sx={{ p: 1.8, display: 'none' }}>Search</Button>
</Grid>
</form>
);
}
// Called on every row to map the data to the columns
function createData( plan: CorporatePlan ): CorporatePlan {
return {
...plan,
}
}
const handleInactiveAction = (formularium : any) => {
enqueueSnackbar('Fuck yuo'), { variant: 'error' };
axios
.put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/activate')
.then(() => {
setDataTableData(
{
...dataTableData,
data: dataTableData.data.map((item: any) => {
if (item.id === formularium.id) {
return {
...item,
status: 'active'
}
}
return item;
})
})
})
.catch((error) => {
console.log(error)
enqueueSnackbar(error.data?.message ?? (error.message ?? 'Failed Processing Request'), { variant: 'error' });
})
}
const handleActiveAction = (formularium : any) => {
axios
.put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/deactivate')
.then(() => {
setDataTableData(
{
...dataTableData,
data: dataTableData.data.map((item: any) => {
if (item.id === formularium.id) {
return {
...item,
status: 'inactive'
}
}
return item;
})
})
})
.catch((error) => {
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
})
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
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.code}</TableCell>
<TableCell align="left">{row.atc_code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.category_name}</TableCell>
<TableCell align="left">{row.uom}</TableCell>
{/* <TableCell align="left">{row.items_count}</TableCell> */}
<TableCell align="right">{( row.status == 'active' ?
<Button variant="outlined" onClick={() => { handleActiveAction(row) }} color="success" size="small">Active</Button> :
<Button variant="outlined" onClick={() => { handleInactiveAction(row) }} color="error" size="small">Tidak Digunakan</Button>
)}</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell />
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
<Grid item xs={6}>
<Grid container>
<Grid item xs={4}>
Description
</Grid>
<Grid item xs={8}>
: {row.description ?? '-'}
</Grid>
<Grid item xs={4}>
General Indication
</Grid>
<Grid item xs={8}>
: {row.general_indication ?? '-'}
</Grid>
<Grid item xs={4}>
Composition
</Grid>
<Grid item xs={8}>
: {row.composition ?? '-'}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container>
<Grid item xs={4}>
Kategori Obat
</Grid>
<Grid item xs={8}>
: {row.kategori_obat ?? '-'}
</Grid>
<Grid item xs={4}>
BPOM Registration
</Grid>
<Grid item xs={8}>
: {row.bpom_registration ?? '-'}
</Grid>
<Grid item xs={4}>
Classifications
</Grid>
<Grid item xs={8}>
: {row.classifications ?? '-'}
</Grid>
<Grid item xs={4}>
Cat For
</Grid>
<Grid item xs={8}>
: {row.cat_for ?? '-'}
</Grid>
<Grid item xs={4}>
Class
</Grid>
<Grid item xs={8}>
: {row.class ?? '-'}
</Grid>
<Grid item xs={4}>
Manufacturer
</Grid>
<Grid item xs={8}>
: {row.manufacturer ?? '-'}
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
const loadDataTableData = async (appliedFilter : any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates/'+corporate_id+'/formulariums', { params: filter });
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
const headStyle = {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData(searchFilter);
setSearchParams(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={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter}/>
</Stack>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">ATC Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Category Name</TableCell>
<TableCell style={headStyle} align="left">UOM</TableCell>
<TableCell style={headStyle} align="center">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.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);
}

482
frontend/dashboard/src/pages/Corporates/Formularium/List.tsx
View File

@@ -1,5 +1,5 @@
// @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, Input, Grid } from '@mui/material';
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
@@ -8,23 +8,307 @@ import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { CorporatePlan } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
import { enqueueSnackbar } from 'notistack';
export default function PlanList() {
export default function List() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
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 handleGetTemplate = (type :string) => {
axios.get('corporates/import-document-example/' + type)
.then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
})
}
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
} else {
setCurrentImportFileName(null);
}
}
const handleFormulariumList = async (appliedFilter = null) => {
axios.get(`corporates/${corporate_id}/formulariums/list`).then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
enqueueSnackbar('Download Success', { variant: 'succes' })
})
.catch(response => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
;
}
const handleUpload = () => {
if (importForm.current?.files.length) {
const formData = new FormData();
formData.append("file", importForm.current?.files[0])
axios.post(`corporates/${corporate_id}/formulariums/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 => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
} else {
enqueueSnackbar('No File Selected', { variant: 'warning' })
}
}
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}/>
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
<Button
id="import-button"
variant='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
onClick={handleClick}
>
Import
</Button>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
{/* <MenuItem onClick={() => {navigate(`/master/formularium/create/${formularium_template_id}`)} }>Create</MenuItem> */}
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={() => {handleGetTemplate('master-formularium-corporate')}}>Download Template</MenuItem>
<MenuItem onClick={handleFormulariumList}>Download Formularium</MenuItem>
</Menu>
</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( icd: Icd ): Icd {
return {
...icd,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
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.code}</TableCell>
<TableCell align="left">{row.atc_code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.category_name}</TableCell>
<TableCell align="left">{row.uom}</TableCell>
<TableCell align="left">{row.active}</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 />
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Description
</Grid>
<Grid item xs={6}>
: {row.description ?? '-'}
</Grid>
<Grid item xs={6}>
General Indication
</Grid>
<Grid item xs={6}>
: {row.general_indication ?? '-'}
</Grid>
<Grid item xs={6}>
Composition
</Grid>
<Grid item xs={6}>
: {row.composition ?? '-'}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Kategori Obat
</Grid>
<Grid item xs={6}>
: {row.kategori_obat ?? '-'}
</Grid>
<Grid item xs={6}>
BPOM Registration
</Grid>
<Grid item xs={6}>
: {row.bpom_registration ?? '-'}
</Grid>
<Grid item xs={6}>
Classifications
</Grid>
<Grid item xs={6}>
: {row.classifications ?? '-'}
</Grid>
<Grid item xs={6}>
Cat For
</Grid>
<Grid item xs={6}>
: {row.cat_for ?? '-'}
</Grid>
<Grid item xs={6}>
Class
</Grid>
<Grid item xs={6}>
: {row.class ?? '-'}
</Grid>
<Grid item xs={6}>
Manufacturer
</Grid>
<Grid item xs={6}>
: {row.manufacturer ?? '-'}
</Grid>
</Grid>
</Grid>
</Grid>
</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: [],
@@ -39,169 +323,12 @@ export default function PlanList() {
to: 0,
total: 0
});
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
// const filterForm = useRef();
const [searchText, setSearchText] = useState("");
const [searchStatus, setSearchStatus] = useState("active");
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
setSearchText(newSearchText);
}
const handleStatusChange = (event: any) => {
const newSearchStatus = event.target.value ?? ''
console.log('changing to', newSearchStatus)
setSearchStatus(newSearchStatus)
// console.log(searchStatus);
const searchFilter = {
"search" : searchText,
"status" : newSearchStatus
};
props.onSearch(searchFilter);
}
const handleSubmit = (event?: any) => {
event?.preventDefault();
const searchFilter = {
"search" : searchText,
"status" : searchStatus
};
props.onSearch(searchFilter); // Trigger to Parent
}
useEffect(() => {
setSearchText(searchParams.get('search') ?? '');
setSearchStatus(searchParams.get('status') ?? searchStatus ?? 'active');
}, [searchParams])
return (
<form id="search-form" onSubmit={handleSubmit} style={{ width: '100%' }}>
<Grid container spacing={2}>
<Grid item xs={9}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
</Grid>
<Grid item xs={3}>
<Select
label="Status"
value={searchStatus}
onChange={handleStatusChange}
sx={{ width: '100%' }}
>
<MenuItem value="active">Active</MenuItem>
<MenuItem value="inactive">Inactive</MenuItem>
<MenuItem value="all">All</MenuItem>
</Select>
</Grid>
{/* ITS FUCKING MAGIC, SUBMIT BY ENTER WORKING IF THIS BUTTON IS AVAILABLE */}
<Button type='submit' variant="outlined" sx={{ p: 1.8, display: 'none' }}>Search</Button>
</Grid>
</form>
);
}
// Called on every row to map the data to the columns
function createData( plan: CorporatePlan ): CorporatePlan {
return {
...plan,
}
}
const handleInactiveAction = (formularium : any) => {
enqueueSnackbar('Fuck yuo'), { variant: 'error' };
axios
.put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/activate')
.then(() => {
setDataTableData(
{
...dataTableData,
data: dataTableData.data.map((item: any) => {
if (item.id === formularium.id) {
return {
...item,
status: 'active'
}
}
return item;
})
})
})
.catch((error) => {
console.log(error)
enqueueSnackbar(error.data?.message ?? (error.message ?? 'Failed Processing Request'), { variant: 'error' });
})
}
const handleActiveAction = (formularium : any) => {
axios
.put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/deactivate')
.then(() => {
setDataTableData(
{
...dataTableData,
data: dataTableData.data.map((item: any) => {
if (item.id === formularium.id) {
return {
...item,
status: 'inactive'
}
}
return item;
})
})
})
.catch((error) => {
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
})
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.items_count}</TableCell>
<TableCell align="right">{( row.status == 'active' ?
<Button variant="outlined" onClick={() => { handleActiveAction(row) }} color="success" size="small">Active</Button> :
<Button variant="outlined" onClick={() => { handleInactiveAction(row) }} color="error" size="small">Tidak Digunakan</Button>
)}</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
No Extra Data
</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
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('/corporates/'+corporate_id+'/formulariums', { params: filter });
const response = await axios.get(`corporates/${corporate_id}/formulariums`, { params: filter });
// console.log(response.data);
setDataTableLoading(false);
@@ -212,9 +339,9 @@ export default function PlanList() {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData(searchFilter);
setSearchParams(searchFilter);
const applyFilter = async (searchFilter: string) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
@@ -223,28 +350,26 @@ export default function PlanList() {
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
return (
<Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter}/>
</Stack>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" width={50}>#</TableCell>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">ATC Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Total Item</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="left">Category Name</TableCell>
<TableCell style={headStyle} align="left">UOM</TableCell>
<TableCell style={headStyle} align="left">Status</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
@@ -265,13 +390,14 @@ export default function PlanList() {
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
<Row key={row.id} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>

2
frontend/dashboard/src/pages/Master/Diagnosis/List.tsx
View File

@@ -89,7 +89,7 @@ export default function List() {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
;
}
}
const handleCancelImportButton = () => {
importForm.current.value = "";

8
frontend/dashboard/src/pages/Master/Formularium/Index.tsx
View File

@@ -21,11 +21,15 @@ export default function Drugs() {
links={[
{
name: 'Master',
href: '/master',
href: '/master/formularium-template',
},
{
name: 'Formularium Template',
href: '/master/formularium-template',
},
{
name: 'Formularium',
href: '/master/formulariums',
href: '/master/formularium-template',
},
]}
/>

129
frontend/dashboard/src/pages/Master/Formularium/List.tsx
View File

@@ -1,5 +1,5 @@
// @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 } from '@mui/material';
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
@@ -18,7 +18,7 @@ import BasePagination from '../../../components/BasePagination';
export default function List() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const { formularium_template_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
@@ -78,6 +78,18 @@ export default function List() {
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
}
const handleGetTemplate = (type :string) => {
axios.get('corporates/import-document-example/' + type)
.then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
})
}
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
@@ -86,11 +98,27 @@ export default function List() {
}
}
const handleFormulariumList = async (appliedFilter = null) => {
axios.get(`master/formulariums/${formularium_template_id}/list`).then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
enqueueSnackbar('Download Success', { variant: 'succes' })
})
.catch(response => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
;
}
const handleUpload = () => {
if (importForm.current?.files.length) {
const formData = new FormData();
formData.append("file", importForm.current?.files[0])
axios.post(`master/formularium/import`, formData )
axios.post(`master/formulariums/${formularium_template_id}/import`, formData )
.then(response => {
handleCancelImportButton();
loadDataTableData();
@@ -131,9 +159,10 @@ export default function List() {
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={() => {navigate('/master/formularium/create')} }>Create</MenuItem>
{/* <MenuItem onClick={() => {navigate(`/master/formularium/create/${formularium_template_id}`)} }>Create</MenuItem> */}
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={handleClose}>Download Template</MenuItem>
<MenuItem onClick={() => {handleGetTemplate('master-formularium')}}>Download Template</MenuItem>
<MenuItem onClick={handleFormulariumList}>Download Formularium</MenuItem>
</Menu>
</Stack>
)}
@@ -188,20 +217,85 @@ export default function List() {
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.atc_code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.items_count}</TableCell>
<TableCell align="left">{row.category_name}</TableCell>
<TableCell align="left">{row.uom}</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>
{/* <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}>
<TableCell />
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
Description : {row.description}
</Typography>
<Box sx={{ pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Description
</Grid>
<Grid item xs={6}>
: {row.description ?? '-'}
</Grid>
<Grid item xs={6}>
General Indication
</Grid>
<Grid item xs={6}>
: {row.general_indication ?? '-'}
</Grid>
<Grid item xs={6}>
Composition
</Grid>
<Grid item xs={6}>
: {row.composition ?? '-'}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Kategori Obat
</Grid>
<Grid item xs={6}>
: {row.kategori_obat ?? '-'}
</Grid>
<Grid item xs={6}>
BPOM Registration
</Grid>
<Grid item xs={6}>
: {row.bpom_registration ?? '-'}
</Grid>
<Grid item xs={6}>
Classifications
</Grid>
<Grid item xs={6}>
: {row.classifications ?? '-'}
</Grid>
<Grid item xs={6}>
Cat For
</Grid>
<Grid item xs={6}>
: {row.cat_for ?? '-'}
</Grid>
<Grid item xs={6}>
Class
</Grid>
<Grid item xs={6}>
: {row.class ?? '-'}
</Grid>
<Grid item xs={6}>
Manufacturer
</Grid>
<Grid item xs={6}>
: {row.manufacturer ?? '-'}
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
@@ -233,7 +327,7 @@ export default function List() {
const loadDataTableData = async (appliedFilter : any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/master/formulariums', { params: filter });
const response = await axios.get('/master/formulariums/'+formularium_template_id, { params: filter });
// console.log(response.data);
setDataTableLoading(false);
@@ -262,7 +356,6 @@ export default function List() {
return (
<Stack>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
@@ -271,10 +364,10 @@ export default function List() {
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">ATC Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Total Item</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
<TableCell style={headStyle} align="left">Category Name</TableCell>
<TableCell style={headStyle} align="left">UOM</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?

71
frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { useNavigate, useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../../components/HeaderBreadcrumbs";
import Page from "../../../../components/Page";
import useSettings from "../../../../hooks/useSettings";
import {useContext, useEffect, useMemo, useState } from 'react';
import axios from '../../../../utils/axios';
import { useSnackbar } from 'notistack';
import CorporatePlanForm from './Form';
import { CorporatePlan } from '../../../../@types/corporates';
import { Corporate } from "@/@types/corporates";
import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
export default function PlanCreate() {
const { themeStretch } = useSettings();
const { corporate_id, id } = useParams();
const [corporate, setCorporate] = useState<Corporate|null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext])
const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
const navigate = useNavigate();
const isEdit = !!id;
useEffect(() => {
if (isEdit) {
axios.get('/master/formularium-template/'+id+'/edit')
.then((res) => {
setCurrentCorporatePlan(res.data);
})
.catch((err) => {
if (err.response.status === 404) {
navigate('/404');
}
})
}
}, [corporate_id, id]);
return (
<Page title= "Master Formularium">
<HeaderBreadcrumbs
heading={'Master Formularium'}
links={[
{
name: 'Master',
href: '/master/formularium-template',
},
{
name: 'Formularium Template',
href: '/master/formularium-template',
},
{
name: !isEdit ? 'Create' : 'Edit',
href: '/corporate/'+corporate_id+'/divisions/'+id,
},
]}
/>
<CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
</Page>
);
}

128
frontend/dashboard/src/pages/Master/Formularium/Master/Form.tsx Normal file
View File

@@ -0,0 +1,128 @@
import * as Yup from 'yup';
import { LoadingButton } from "@mui/lab";
import { Card, Grid, Stack, Typography } from "@mui/material";
import { CorporatePlan } from "../../../../@types/corporates";
import { FormProvider, RHFSwitch, RHFTextField } from "../../../../components/hook-form";
import { useEffect, useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useSnackbar } from 'notistack';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../../../utils/axios';
type Props = {
isEdit: boolean;
currentCorporatePlan?: CorporatePlan;
};
export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();
const { corporate_id } = useParams();
const NewCorporatePlanSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
});
const defaultValues = useMemo(
() => ({
name: currentCorporatePlan?.name || '',
description: currentCorporatePlan?.description || '',
active: currentCorporatePlan?.active === 1 ? true : false,
}),
[currentCorporatePlan]
);
useEffect(() => {
if (isEdit && currentCorporatePlan) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
}, [isEdit, currentCorporatePlan]);
const methods = useForm({
resolver: yupResolver(NewCorporatePlanSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
if (!isEdit) {
await axios
.post('/master/formularium-template/store', data)
.then((res) => {
enqueueSnackbar('Formularium created successfully', { variant: 'success' });
})
.then((res) => {
navigate('/master/formularium-template', { replace: true });
})
.catch(({ response }) => {
if (response.status === 422) {
for (const [key, value] of Object.entries(response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
}
}
else {
enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
}
});
} else {
await axios
.put('/master/formularium-template/' + currentCorporatePlan?.id + '/update', data)
.then((res) => {
enqueueSnackbar('Formularium updated successfully', { variant: 'success' });
})
.then((res) => {
navigate('/master/formularium-template' , { replace: true });
})
.catch(({ response }) => {
enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
});
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Card sx={{ p: 2 }}>
<Stack spacing={3}>
<Typography variant="h6">Detail</Typography>
<RHFTextField name="name" label="Name" />
<RHFTextField name="description" label="Description" />
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
{ isEdit? 'Update' : 'Create' }
</LoadingButton>
</Stack>
</Card>
</Grid>
{/* <Grid item xs={4}>
<Card sx={{ p:2 }}>
<RHFSwitch name="active" label="Active" />
</Card>
</Grid> */}
</Grid>
</FormProvider>
);
}

218
frontend/dashboard/src/pages/Master/Formularium/Master/History.tsx Normal file
View File

@@ -0,0 +1,218 @@
// @mui
import {
Box,
Button,
Card,
Collapse,
Container,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Badge,
Stack,
} from '@mui/material';
import * as React from 'react';
import { useParams } from 'react-router-dom';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import { useContext, useEffect, useState } from 'react';
import MuiAccordionSummary, {
AccordionSummaryProps,
} from '@mui/material/AccordionSummary';
import useSettings from '../../../../hooks/useSettings';
import axios from '../../../../utils/axios';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
import { Corporate } from '@/@types/corporates';
import { fDate, fDateTime } from '@/utils/formatTime';
const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
}));
const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props}
/>
))(({ theme }) => ({
backgroundColor:
theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .05)'
: 'rgba(0, 0, 0, .03)',
flexDirection: 'row-reverse',
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
transform: 'rotate(90deg)',
},
'& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1),
},
}));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)',
}));
export default function CustomizedAccordions() {
const [expanded, setExpanded] = React.useState<string | false>('panel1');
const handleChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false);
};
const pageTitle = 'Formularium Template History';
const { themeStretch } = useSettings();
const { id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
const model = 'App\\Models\\FormulariumTemplate';
const url = `/audittrail/${id}?model=${model}`;
axios.get(url)
.then((res) => {
setCurrentCorporate(res.data);
})
.catch((error) => {
console.error('Terjadi kesalahan:', error);
});
}, [configuredCorporateContext]);
return (
<div>
<HeaderBreadcrumbs
heading={pageTitle}
links={[
{
name: 'Master',
href: '/master/formularium-template',
},
{
name: 'Formularium Template',
href: '/master/formularium-template',
},
// {
// name: 'Audittrail ICD',
// href: '/corporate/' + id + '/plans',
// },
]}
/>
{currentCorporate?.data.map((item, index) => (
<Accordion
key={index}
expanded={expanded === `panel${index}`}
onChange={handleChange(`panel${index}`)}
>
<AccordionSummary
aria-controls={`panel${index}d-content`}
id={`panel${index}d-header`}
>
<Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
</AccordionSummary>
<AccordionDetails>
<TableHead>
<TableRow>
<TableCell align="center">Field</TableCell>
<TableCell align="center">Old Value</TableCell>
<TableCell align="center">New Values</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Object.entries(item.old_values).map(([key, value]) => {
let renderedValue;
if (key === 'deleted_by' ||
key === 'deleted_at' ||
key === 'created_by' ||
key === 'created_at' ||
key === 'updated_by' ||
key === 'description'
) {
return null; // Melewati iterasi saat key adalah 'deleted_by'
}
switch (key) {
case 'welcome_message':
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
value = value.replace(/<[^>]*>/g, '');
break;
case 'help_text':
renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
value = value.replace(/<[^>]*>/g, '');
break;
case 'active':
renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
value = value == 1 ? 'Active' : 'Inactive';
break;
case 'created_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'updated_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'updated_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
case 'delete_at':
renderedValue = fDateTime(item.new_values[key]);
value = fDateTime(value);
break;
default:
renderedValue = item.new_values[key];
break;
}
const field = key.charAt(0).toUpperCase() + key.slice(1);
if (value == renderedValue) {
return null
} else {
return (
<TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell>{`${field}`}</TableCell>
<TableCell align="center">{`${value}`}</TableCell>
<TableCell align="center">{renderedValue}</TableCell>
</TableRow>
);
}
})}
</TableBody>
</AccordionDetails>
</Accordion>
))}
</div>
);
}

38
frontend/dashboard/src/pages/Master/Formularium/Master/Index.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { Card, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../../components/HeaderBreadcrumbs";
import Page from "../../../../components/Page";
import useSettings from "../../../../hooks/useSettings";
import List from "./List";
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const pageTitle = 'Formularium Template';
return (
<Page title={ pageTitle }>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{
name: 'Master',
href: '/master/formularium-template',
},
{
name: 'Formularium Template',
href: '/master/formularium-template',
},
]}
/>
<Card>
<List />
</Card>
</Page>
);
}

334
frontend/dashboard/src/pages/Master/Formularium/Master/List.tsx Normal file
View File

@@ -0,0 +1,334 @@
// @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 } 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';
import HistoryIcon from '@mui/icons-material/History';
// hooks
import { Link, NavLink as RouterLink } from 'react-router-dom';
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../../hooks/useSettings';
import { 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 { enqueueSnackbar } from 'notistack';
export default function List() {
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 handleICDList = async (appliedFilter = null) => {
axios.get('master/diagnosis/list').then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
});
}
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/diagnosis/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 => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
} else {
enqueueSnackbar('No File Selected', { variant: 'warning' })
}
}
const handleGetTemplate = (type :string) => {
axios.get('corporates/import-document-example/' + type)
.then((response) => {
const link = document.createElement('a');
link.href = response.data.data.file_url;
link.setAttribute('download', response.data.data.file_name);
document.body.appendChild(link);
link.click();
handleClose();
})
}
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}/>
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
<Button
id="import-button"
variant='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
>
<Link to={`/master/formularium-template/create`} style={{ textDecoration: 'none', color: 'blue'}}>
Create
</Link>
</Button>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem>
</MenuItem>
</Menu>
</Stack>
)}
</div>
);
}
// Called on every row to map the data to the columns
function createData( icd: Icd ): Icd {
return {
...icd,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const handleActivate = (model: any, status: string) => {
axios
.put(`/master/formularium-template/${row.id}/activation`, {
// service_code: service.service_code,
active: status == 'active',
})
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((model) => {
let updatedModel = model;
if (row.id == model.id) {
updatedModel.active = res.data.icd.active;
}
return updatedModel;
}),
});
})
.catch((error) => {
// console.log('asdasd', error.response.data.message)
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.description ?? '-'}</TableCell>
<TableCell align="center">
{/* <Button variant="outlined" color="error" size="small">Disable</Button> */}
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={`/master/formularium/${row.id}`}>
<Button variant="outlined" color="primary" size="small">
Detail
</Button>
</Link>
<Link to={`/master/formularium-template/${row.id}/edit`}>
<Button variant="outlined" color="primary" size="small">
Edit
</Button>
</Link>
<Link to={`/master/formularium-template/${row.id}/formularium-template-history`}>
<HistoryIcon />
</Link>
</Stack>
</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('/master/formularium-template', { params: filter });
console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
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>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Description</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={3} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={3} 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>
);
}

25
frontend/dashboard/src/routes/index.tsx
View File

@@ -272,14 +272,31 @@ export default function Router() {
},
{
path: 'master/formularium',
path: 'master/formularium/:formularium_template_id',
element: <MasterFormularium />,
},
{
path: 'master/formularium/create',
path: 'master/formularium/create/:formularium_template_id',
element: <MasterFormulariumCreate />,
},
{
path: 'master/formularium-template',
element: <MasterFormulariumTemplate />,
},
{
path: 'master/formularium-template/create',
element: <MasterFormulariumTemplateCreate />,
},
{
path: 'master/formularium-template/:id/formularium-template-history',
element: <MasterFormulariumTemplateHistories />,
},
{
path: 'master/formularium-template/:id/edit',
element: <MasterFormulariumTemplateCreate />,
},
{
path: 'report/appointments',
element: <Appointment />,
@@ -472,6 +489,10 @@ const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));
const MasterFormulariumCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Create')));
const MasterFormulariumTemplate = Loadable(lazy(() => import('../pages/Master/Formularium/Master/Index')));
const MasterFormulariumTemplateCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Master/CreateUpdate')));
const MasterFormulariumTemplateHistories = Loadable(lazy(() => import('../pages/Master/Formularium/Master/History')));
const CorporateServices = Loadable(lazy(() => import('../pages/Corporates/Services/Index')));
const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/Services/Create')));
const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));