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

add reason in corporate, plan, service

Browse Source
This commit is contained in:
Tb Fajri
2023-06-05 09:01:43 +07:00
parent 4fb2bab64e
commit 4cc2ae24b8
34 changed files with 2037 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dashboard/src/@types/corporates.ts
View File

@@ -178,6 +178,7 @@ export type CorporateService = {
description?: string;
name?: string;
service_code: string;
reason: string;
status: string;
configurations: any;
}

8
frontend/dashboard/src/pages/Corporates/Benefit/List.tsx
View File

@@ -358,7 +358,7 @@ export default function PlanList() {
</Button>
)}
</TableCell>
{/* <TableCell align="center">
<TableCell align="center">
<Button
variant="outlined"
color="success"
@@ -372,7 +372,7 @@ export default function PlanList() {
>
{openEdit ? 'Save' : 'Edit'}
</Button>
</TableCell> */}
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
@@ -799,9 +799,9 @@ export default function PlanList() {
<TableCell style={headStyle} align="center">
Status
</TableCell>
{/* <TableCell style={headStyle} align="center">
<TableCell style={headStyle} align="center">
Action
</TableCell> */}
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (

213
frontend/dashboard/src/pages/Corporates/Benefit/sections/DialogLog.tsx Executable file
View File

@@ -0,0 +1,213 @@
import * as Yup from 'yup';
import { enqueueSnackbar, useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
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, Grid, Stack, Typography, Chip, Autocomplete } from '@mui/material';
import { CorporateService } from '../../../../@types/corporates';
// components
import { FormProvider, RHFTextField, RHFSwitch } from '../../../../components/hook-form';
import axios from '../../../../utils/axios';
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
// import { Contact } from '../../../../@types/contact';
import { Link, useParams, useSearchParams } from 'react-router-dom';
// @mui
// components
import MuiDialog from '../../../../components/MuiDialog';
// React
import { ReactElement } from 'react';
// ----------------------------------------------------------------------
const HeaderStyle = styled('header')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(2),
justifyContent: 'space-between',
}));
type DataContent = {
info: string;
date: string;
time: string;
};
type MuiDialogProps = {
title?: {
name?: string;
icon?: string;
};
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
data?: DataContent[];
};
type FormValuesProps = {
value: string;
active: boolean;
};
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
const navigate = useNavigate();
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 { id, service_code, status } = data;
const isEdit = id ? true : false;
const NewCorporateSchema = Yup.object().shape({
reason: Yup.string().required('Corporate Status is required'),
});
const methods = useForm<FormValuesProps>({
resolver: yupResolver(NewCorporateSchema),
});
const {
reset,
watch,
handleSubmit,
formState: { isSubmitting },
} = methods;
const values = watch();
useEffect(() => {
if (openDialog === false) {
reset();
}
}, [openDialog, reset]);
// const { plan_id } = useParams();
const handleActivate = (model: any, status: string) => {
axios
.put(`/plans/${id}/activation`, {
// service_code: service.service_code,
active: status == 'active',
reason: model.reason
})
.then((res) => {
// Memuat ulang halaman saat ini
setOpenDialog(false)
window.location.reload();
// setDataTableData({
// ...dataTableData,
// data: dataTableData.data.map((service) => {
// let updatedService = service;
// if (id == service.id) {
// updatedService.status = res.data.status;
// }
// return updatedService;
// }),
// });
})
.catch((error) => {
console.log(error);
});
};
const onSubmit = async (row : ReturnType<typeof createData>) => {
try {
const data = {
service_code : service_code,
reason : row.reason,
id : id,
}
console.log(data)
handleActivate(data, status)
} catch (error: any) {
console.log('data gagal', data);
}
const ascent = document?.querySelector('ascent');
if (ascent != null) {
ascent.innerHTML = '';
}
};
function createData(corporateService: CorporateService): CorporateService {
return {
...corporateService,
};
}
const getContent = (props: { row: ReturnType<typeof createData> }) => (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
<Grid item xs={12}>
<RHFTextField name="reason" label="Reason for update" />
</Grid>
<Box sx={{ pt: 5 }}>
<Stack
alignItems="center"
justifyContent="flex-end"
direction={{ xs: 'column', md: 'row' }}
// sx={{ textAlign: { xs: 'center', md: 'left' } }}
spacing={2}
>
<Stack direction="row" spacing={1}>
<Button
sx={{
boxShadow: 'none',
}}
variant="outlined"
size="medium"
fullWidth={true}
onClick={() => setOpenDialog(false)}
>
Cancel
</Button>
<LoadingButton
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
type="submit"
variant="contained"
size="medium"
fullWidth={true}
loading={isSubmitting}
>
Save
</LoadingButton>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</FormProvider>
);
return (
<MuiDialog
title={title}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="sm"
/>
);
};
export default DialogTopUpLimit;

177
frontend/dashboard/src/pages/Corporates/Benefit/sections/History.tsx Normal file
View File

@@ -0,0 +1,177 @@
// @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, plan_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\\CorporatePlan';
const url = `/audittrail/${plan_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 + '/plans',
},
{
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 !== 'reason') {
return null; // Melewati iterasi saat key adalah 'deleted_by'
}
renderedValue = item.new_values[key];
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>
);
}

174
frontend/dashboard/src/pages/Corporates/Form.tsx
View File

@@ -62,59 +62,115 @@ type Props = {
};
export default function CorporateForm({ isEdit, currentCorporate }: Props) {
const navigate = useNavigate();
const [corporate_groups, setCorporateGroups] = useState([]);
// 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').test(
'unique-code',
'Code must be unique',
async function (value) {
const existingCodes = await getExistingCodes();
return !existingCodes.includes(value);
}
),
active: Yup.boolean().required('Corporate Status is required'),
type: Yup.string().required('Type is required'),
welcome_message: Yup.string().required('Welcome Message is required'),
help_text: Yup.string().required('Help Text is required'),
// policy_code: Yup.string().required('Policy Code is required'),
policy_start: Yup.date().required('Start Date is required'),
policy_end: Yup.date().required('End Date is required').min(Yup.ref('policy_start'), "end date can't be before start date"),
policy_total_premi: Yup.number().required('Deposit Initial Fund is required').min(0),
// linking_rules: Yup.string().required('Link Rules is required'),
policy_minimal_deposit_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Deposit is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_minimal_alert_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Alert is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_stop_service_percentage:
Yup.number()
.typeError("Please enter a valid number")
.min(0, "Minimum atleast 0")
.required('Percentage Stop is required')
.test("max", "Total should not exceed 100 %", function(value) {
const { policy_minimal_alert_percentage } = this.parent;
const { policy_minimal_deposit_percentage } = this.parent;
return value == 100 - policy_minimal_alert_percentage- policy_minimal_deposit_percentage;
}),
parent_id: Yup.string().when('type', {
is: 'subcorporate',
then: Yup.string().required('Corporate is required because type is Sub Corporate'),
}),
});
let NewCorporateSchema = null;
if (isEdit){
NewCorporateSchema = Yup.object().shape({
isEdited: Yup.boolean(),
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required').test(
'unique-code',
'Code must be unique',
async function (value) {
const existingCodes = await getExistingCodes();
return !existingCodes.includes(value);
}
),
active: Yup.boolean().required('Corporate Status is required'),
type: Yup.string().required('Type is required'),
welcome_message: Yup.string().required('Welcome Message is required'),
help_text: Yup.string().required('Help Text is required'),
// policy_code: Yup.string().required('Policy Code is required'),
policy_start: Yup.date().required('Start Date is required'),
policy_end: Yup.date().required('End Date is required').min(Yup.ref('policy_start'), "end date can't be before start date"),
policy_total_premi: Yup.number().required('Deposit Initial Fund is required').min(0),
// linking_rules: Yup.string().required('Link Rules is required'),
policy_minimal_deposit_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Deposit is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_minimal_alert_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Alert is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_stop_service_percentage:
Yup.number()
.typeError("Please enter a valid number")
.min(0, "Minimum atleast 0")
.required('Percentage Stop is required')
.test("max", "Total should not exceed 100 %", function(value) {
const { policy_minimal_alert_percentage } = this.parent;
const { policy_minimal_deposit_percentage } = this.parent;
return value == 100 - policy_minimal_alert_percentage- policy_minimal_deposit_percentage;
}),
parent_id: Yup.string().when('type', {
is: 'subcorporate',
then: Yup.string().required('Corporate is required because type is Sub Corporate'),
}),
reason: Yup.string().required('Reason for update is required when editing data'),
});
} else {
// console.log('test')
NewCorporateSchema = Yup.object().shape({
isEdited: Yup.boolean(),
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required').test(
'unique-code',
'Code must be unique',
async function (value) {
const existingCodes = await getExistingCodes();
return !existingCodes.includes(value);
}
),
active: Yup.boolean().required('Corporate Status is required'),
type: Yup.string().required('Type is required'),
welcome_message: Yup.string().required('Welcome Message is required'),
help_text: Yup.string().required('Help Text is required'),
// policy_code: Yup.string().required('Policy Code is required'),
policy_start: Yup.date().required('Start Date is required'),
policy_end: Yup.date().required('End Date is required').min(Yup.ref('policy_start'), "end date can't be before start date"),
policy_total_premi: Yup.number().required('Deposit Initial Fund is required').min(0),
// linking_rules: Yup.string().required('Link Rules is required'),
policy_minimal_deposit_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Deposit is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_minimal_alert_percentage:
Yup.number()
.typeError("Please enter a valid number")
.required('Percentage Alert is required')
.min(0, "Minimum atleast 0")
.max(100, "Allowed maximum is 100"),
policy_stop_service_percentage:
Yup.number()
.typeError("Please enter a valid number")
.min(0, "Minimum atleast 0")
.required('Percentage Stop is required')
.test("max", "Total should not exceed 100 %", function(value) {
const { policy_minimal_alert_percentage } = this.parent;
const { policy_minimal_deposit_percentage } = this.parent;
return value == 100 - policy_minimal_alert_percentage- policy_minimal_deposit_percentage;
}),
parent_id: Yup.string().when('type', {
is: 'subcorporate',
then: Yup.string().required('Corporate is required because type is Sub Corporate'),
}),
});
}
async function getExistingCodes() {
// axios
@@ -127,15 +183,16 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
// });
try {
let response = await axios.get('/corporates'); // get data all corporate
let response = await axios.get('/corporates/1/code'); // get data all corporate
let codeCurrent = ""
if (isEdit){
let responseCodeCurrent = await axios.get(`/corporates/${currentCorporate?.id}/edit`); // get data current corporate
codeCurrent = responseCodeCurrent.data.code; // get data code corporate current
}
let existingCodes = response.data.data.map(item => item.code); // get data code corporate all
// console.log(response.data);
let existingCodes = response.data.map(item => item); // get data code corporate all
var filteredArray = existingCodes.filter(e => e != codeCurrent)
let filteredArray = existingCodes.filter(e => e != codeCurrent)
return filteredArray;
} catch (error) {
console.error(error);
@@ -147,6 +204,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
() => ({
code: currentCorporate?.code || '',
name: currentCorporate?.name || '',
reason: currentCorporate?.reason || '',
welcome_message: currentCorporate?.welcome_message || '',
help_text: currentCorporate?.help_text || '',
active: currentCorporate?.id ? currentCorporate?.active === 1 : true,
@@ -224,6 +282,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
formData.append('active', data.active ? '1' : '0');
formData.append('type', data.type);
formData.append('welcome_message', data.welcome_message);
formData.append('reason', data.reason);
formData.append('help_text', data.help_text);
formData.append('policy_id', data.policy_id);
formData.append('policy_code', data.policy_code);
@@ -390,7 +449,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
id: 'Lilili',
},
];
const [isDisabled, setIsDisabled] = useState(isEdit);
const handleTypeChange = (event: SelectChangeEvent) => {
setValue('type', event.target.value);
};
@@ -431,12 +490,15 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
</option>
))}
</RHFSelect>
)}
<RHFTextField name="code" label="Corporate Code" disabled={isDisabled} />
<RHFTextField name="name" label="Corporate Name" disabled={isDisabled} />
{isEdit && (
<RHFTextField name="reason" label="Reason for update" />
)}
<RHFTextField name="code" label="Corporate Code" />
<RHFTextField name="name" label="Corporate Name" />
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
Welcome Message
@@ -512,7 +574,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
<input type="hidden" name="policy_id" />
<Stack spacing={1}>
<RHFTextField name="policy_code" label="Policy Number" />
<RHFTextField name="policy_code" label="Policy Number"/>
{!currentCorporate?.id && (
<Typography variant="caption">Will be generated if empty</Typography>
)}

209
frontend/dashboard/src/pages/Corporates/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>
);
}

11
frontend/dashboard/src/pages/Corporates/Index.tsx
View File

@@ -29,6 +29,8 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
import HistoryIcon from '@mui/icons-material/History';
// hooks
import useSettings from '../../hooks/useSettings';
// components
@@ -328,16 +330,21 @@ export default function Corporates() {
</TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={'/corporates/' + row.id + '/edit'}>
<Link to={`/corporates/${row.id}/edit`}>
<Button variant="outlined" color="primary" size="small">
Edit
</Button>
</Link>
<Link to={'/corporate/' + row.id + ''}>
<Link to={`/corporate/${row.id}`}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>
</Link>
<Link to={`/corporate/${row.id}/corporate-history`}>
<Button variant="outlined" color="primary" size="small" startIcon={<HistoryIcon />}>
History
</Button>
</Link>
</Stack>
</TableCell>
</TableRow>

52
frontend/dashboard/src/pages/Corporates/Plan/List.tsx
View File

@@ -33,10 +33,11 @@ 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 React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
import { Link, useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { Plan } from '../../../@types/corporates';
@@ -44,6 +45,7 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
import BasePagination from '../../../components/BasePagination';
import { enqueueSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';
import DialogLog from './sections/DialogLog';
export default function CorporatePlanList() {
const { themeStretch } = useSettings();
@@ -51,6 +53,21 @@ export default function CorporatePlanList() {
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
const [openDialog, setOpenDialog] = useState(false);
const [dialogTitle, setDialogTitle] = useState('');
const [isDialog, setIsDialog] = useState('');
const [edit, setEdit] = useState({});
const clickHandler = (isDialog: string) => {
switch (isDialog) {
case 'edit':
setIsDialog(isDialog);
setOpenDialog(true);
break;
default:
break;
}
};
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
@@ -322,7 +339,9 @@ export default function CorporatePlanList() {
color="success"
size="small"
onClick={() => {
handleActivate(row, 'inactive');
// handleActivate(row, 'inactive');
clickHandler('edit');
setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
}}
>
Active
@@ -334,18 +353,22 @@ export default function CorporatePlanList() {
color="error"
size="small"
onClick={() => {
handleActivate(row, 'active');
// handleActivate(row, 'active');
clickHandler('edit');
setEdit({id: row.id, service_code: row.service_code, status: 'active'});
}}
>
Inactive
</Button>
)}
</TableCell>
{/* <TableCell align="center">
<Button variant="outlined" color="success" size="small">
Edit
</Button>
</TableCell> */}
<TableCell align="center">
<Link to={`/corporate/${corporate_id}/plans/${row.id}/history`}>
<Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
History
</Button>
</Link>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
@@ -709,9 +732,9 @@ export default function CorporatePlanList() {
<TableCell style={headStyle} align="center">
Status
</TableCell>
{/* <TableCell style={headStyle} align="center">
<TableCell style={headStyle} align="center">
Action
</TableCell> */}
</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ? (
@@ -742,6 +765,15 @@ export default function CorporatePlanList() {
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
{isDialog === 'edit' && (
<DialogLog
data={edit}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
title={{ name: 'Reason For Update' }}
/>
)}
</Stack>
);
}

213
frontend/dashboard/src/pages/Corporates/Plan/sections/DialogLog.tsx Executable file
View File

@@ -0,0 +1,213 @@
import * as Yup from 'yup';
import { enqueueSnackbar, useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
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, Grid, Stack, Typography, Chip, Autocomplete } from '@mui/material';
import { CorporateService } from '../../../../@types/corporates';
// components
import { FormProvider, RHFTextField, RHFSwitch } from '../../../../components/hook-form';
import axios from '../../../../utils/axios';
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
// import { Contact } from '../../../../@types/contact';
import { Link, useParams, useSearchParams } from 'react-router-dom';
// @mui
// components
import MuiDialog from '../../../../components/MuiDialog';
// React
import { ReactElement } from 'react';
// ----------------------------------------------------------------------
const HeaderStyle = styled('header')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(2),
justifyContent: 'space-between',
}));
type DataContent = {
info: string;
date: string;
time: string;
};
type MuiDialogProps = {
title?: {
name?: string;
icon?: string;
};
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
data?: DataContent[];
};
type FormValuesProps = {
value: string;
active: boolean;
};
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
const navigate = useNavigate();
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 { id, service_code, status } = data;
const isEdit = id ? true : false;
const NewCorporateSchema = Yup.object().shape({
reason: Yup.string().required('Corporate Status is required'),
});
const methods = useForm<FormValuesProps>({
resolver: yupResolver(NewCorporateSchema),
});
const {
reset,
watch,
handleSubmit,
formState: { isSubmitting },
} = methods;
const values = watch();
useEffect(() => {
if (openDialog === false) {
reset();
}
}, [openDialog, reset]);
// const { plan_id } = useParams();
const handleActivate = (model: any, status: string) => {
axios
.put(`/plans/${id}/activation`, {
// service_code: service.service_code,
active: status == 'active',
reason: model.reason
})
.then((res) => {
// Memuat ulang halaman saat ini
setOpenDialog(false)
window.location.reload();
// setDataTableData({
// ...dataTableData,
// data: dataTableData.data.map((service) => {
// let updatedService = service;
// if (id == service.id) {
// updatedService.status = res.data.status;
// }
// return updatedService;
// }),
// });
})
.catch((error) => {
console.log(error);
});
};
const onSubmit = async (row : ReturnType<typeof createData>) => {
try {
const data = {
service_code : service_code,
reason : row.reason,
id : id,
}
console.log(data)
handleActivate(data, status)
} catch (error: any) {
console.log('data gagal', data);
}
const ascent = document?.querySelector('ascent');
if (ascent != null) {
ascent.innerHTML = '';
}
};
function createData(corporateService: CorporateService): CorporateService {
return {
...corporateService,
};
}
const getContent = (props: { row: ReturnType<typeof createData> }) => (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
<Grid item xs={12}>
<RHFTextField name="reason" label="Reason for update" />
</Grid>
<Box sx={{ pt: 5 }}>
<Stack
alignItems="center"
justifyContent="flex-end"
direction={{ xs: 'column', md: 'row' }}
// sx={{ textAlign: { xs: 'center', md: 'left' } }}
spacing={2}
>
<Stack direction="row" spacing={1}>
<Button
sx={{
boxShadow: 'none',
}}
variant="outlined"
size="medium"
fullWidth={true}
onClick={() => setOpenDialog(false)}
>
Cancel
</Button>
<LoadingButton
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
type="submit"
variant="contained"
size="medium"
fullWidth={true}
loading={isSubmitting}
>
Save
</LoadingButton>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</FormProvider>
);
return (
<MuiDialog
title={title}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="sm"
/>
);
};
export default DialogTopUpLimit;

177
frontend/dashboard/src/pages/Corporates/Plan/sections/History.tsx Normal file
View File

@@ -0,0 +1,177 @@
// @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, plan_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\\CorporatePlan';
const url = `/audittrail/${plan_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 + '/plans',
},
{
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 !== 'reason') {
return null; // Melewati iterasi saat key adalah 'deleted_by'
}
renderedValue = item.new_values[key];
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>
);
}

46
frontend/dashboard/src/pages/Corporates/Services/List.tsx
View File

@@ -35,6 +35,7 @@ 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 React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
@@ -49,6 +50,8 @@ import { yupResolver } from '@hookform/resolvers/yup';
import { RHFCheckbox } from '../../../components/hook-form';
import { CheckBox } from '@mui/icons-material';
import { CorporateService } from '../../../@types/corporates';
import { number } from 'yup/lib/locale';
import DialogLog from './sections/DialogLog';
export default function List() {
const { themeStretch } = useSettings();
@@ -56,6 +59,23 @@ export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
const [openDialog, setOpenDialog] = useState(false);
const [dialogTitle, setDialogTitle] = useState('');
const [isDialog, setIsDialog] = useState('');
const [edit, setEdit] = useState({});
const clickHandler = (isDialog: string) => {
switch (isDialog) {
case 'edit':
setIsDialog(isDialog);
setOpenDialog(true);
break;
default:
break;
}
};
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
@@ -151,7 +171,8 @@ export default function List() {
axios
.put(`/corporates/${corporate_id}/services/${service.service_code}`, {
service_code: service.service_code,
status,
status,
reason:service.reason
})
.then((res) => {
setDataTableData({
@@ -189,7 +210,9 @@ export default function List() {
color="success"
size="small"
onClick={() => {
handleActivate(row, 'inactive');
// handleActivate(row, 'inactive', 'test');
clickHandler('edit');
setEdit({id: row.id, service_code: row.service_code, status: 'inactive'});
}}
>
Active
@@ -201,19 +224,25 @@ export default function List() {
color="error"
size="small"
onClick={() => {
handleActivate(row, 'active');
clickHandler('edit');
setEdit({id: row.id, service_code: row.service_code, status: 'active'});
}}
>
Inactive
</Button>
)}
</TableCell>
<TableCell align="right">
<TableCell align="right" width='25%'>
<Link to={`/corporate/${corporate_id}/services/${row.service_code}`}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>
</Link>
<Link to={`/corporate/${corporate_id}/services/${row.id}/history`}>
<Button variant="outlined" color="primary" size="small" style={{marginLeft: "10px"}} startIcon={<HistoryIcon />}>
History
</Button>
</Link>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
@@ -719,6 +748,15 @@ export default function List() {
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
{isDialog === 'edit' && (
<DialogLog
data={edit}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
title={{ name: 'Reason For Update' }}
/>
)}
</Stack>
);
}

213
frontend/dashboard/src/pages/Corporates/Services/sections/DialogLog.tsx Executable file
View File

@@ -0,0 +1,213 @@
import * as Yup from 'yup';
import { enqueueSnackbar, useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
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, Grid, Stack, Typography, Chip, Autocomplete } from '@mui/material';
import { CorporateService } from '../../../../@types/corporates';
// components
import { FormProvider, RHFTextField, RHFSwitch } from '../../../../components/hook-form';
import axios from '../../../../utils/axios';
import { LaravelPaginatedData } from '../../../../@types/paginated-data';
// import { Contact } from '../../../../@types/contact';
import { Link, useParams, useSearchParams } from 'react-router-dom';
// @mui
// components
import MuiDialog from '../../../../components/MuiDialog';
// React
import { ReactElement } from 'react';
// ----------------------------------------------------------------------
const HeaderStyle = styled('header')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
padding: theme.spacing(2),
justifyContent: 'space-between',
}));
type DataContent = {
info: string;
date: string;
time: string;
};
type MuiDialogProps = {
title?: {
name?: string;
icon?: string;
};
openDialog: boolean;
setOpenDialog: Function;
content?: ReactElement;
data?: DataContent[];
};
type FormValuesProps = {
value: string;
active: boolean;
};
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
const navigate = useNavigate();
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 { id, service_code, status } = data;
const isEdit = id ? true : false;
const NewCorporateSchema = Yup.object().shape({
reason: Yup.string().required('Corporate Status is required'),
});
const methods = useForm<FormValuesProps>({
resolver: yupResolver(NewCorporateSchema),
});
const {
reset,
watch,
handleSubmit,
formState: { isSubmitting },
} = methods;
const values = watch();
useEffect(() => {
if (openDialog === false) {
reset();
}
}, [openDialog, reset]);
const { corporate_id } = useParams();
const handleActivate = (service: any, status: string) => {
axios
.put(`/corporates/${corporate_id}/services/${service.service_code}`, {
service_code: service.service_code,
status,
reason: service.reason
})
.then((res) => {
// Memuat ulang halaman saat ini
setOpenDialog(false)
window.location.reload();
// setDataTableData({
// ...dataTableData,
// data: dataTableData.data.map((service) => {
// let updatedService = service;
// if (id == service.id) {
// updatedService.status = res.data.status;
// }
// return updatedService;
// }),
// });
})
.catch((error) => {
console.log(error);
});
};
const onSubmit = async (row : ReturnType<typeof createData>) => {
try {
const data = {
service_code : service_code,
reason : row.reason,
id : id,
}
console.log(data)
handleActivate(data, status)
} catch (error: any) {
console.log('data gagal', data);
}
const ascent = document?.querySelector('ascent');
if (ascent != null) {
ascent.innerHTML = '';
}
};
function createData(corporateService: CorporateService): CorporateService {
return {
...corporateService,
};
}
const getContent = (props: { row: ReturnType<typeof createData> }) => (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Box sx={{ width: '100%', typography: 'body1', p: 2, mt: 1 }}>
<Grid item xs={12}>
<RHFTextField name="reason" label="Reason for update" />
</Grid>
<Box sx={{ pt: 5 }}>
<Stack
alignItems="center"
justifyContent="flex-end"
direction={{ xs: 'column', md: 'row' }}
// sx={{ textAlign: { xs: 'center', md: 'left' } }}
spacing={2}
>
<Stack direction="row" spacing={1}>
<Button
sx={{
boxShadow: 'none',
}}
variant="outlined"
size="medium"
fullWidth={true}
onClick={() => setOpenDialog(false)}
>
Cancel
</Button>
<LoadingButton
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
type="submit"
variant="contained"
size="medium"
fullWidth={true}
loading={isSubmitting}
>
Save
</LoadingButton>
</Stack>
</Stack>
</Box>
</Box>
</Stack>
</FormProvider>
);
return (
<MuiDialog
title={title}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="sm"
/>
);
};
export default DialogTopUpLimit;

177
frontend/dashboard/src/pages/Corporates/Services/sections/History.tsx Normal file
View File

@@ -0,0 +1,177 @@
// @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, service_code } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const [currentCorporate, setCurrentCorporate ] = useState<Corporate>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
const model = 'App\\Models\\CorporateService';
const url = `/audittrail/${service_code}?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 + '/services',
},
{
name: 'Audittrail Corporate',
href: '/corporate/' + corporate_id + '/benefits',
},
]}
/>
{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 width="100%">
<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 !== 'reason') {
return null; // Melewati iterasi saat key adalah 'deleted_by'
}
renderedValue = item.new_values[key];
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>
);
}

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

@@ -11,6 +11,7 @@ import Register from '../pages/auth/Register';
import VerifyCode from '../pages/auth/VerifyCode';
import { AuthProvider } from '../contexts/LaravelAuthContext';
import AuthGuard from '../guards/AuthGuard';
import { Link, useParams, useSearchParams } from 'react-router-dom';
// ----------------------------------------------------------------------
@@ -104,10 +105,18 @@ export default function Router() {
path: ':corporate_id/services/:service_code',
element: <CorporateServicesCreate />,
},
{
path: ':corporate_id/services/:service_code/history',
element: <CorporateServicesHistory />,
},
{
path: ':corporate_id/plans/create',
element: <PlanCreate />,
},
{
path: ':corporate_id/plans/:plan_id/history',
element: <CorporatePlansHistory />,
},
{
path: ':corporate_id/plans',
element: <Plans />,
@@ -157,6 +166,10 @@ export default function Router() {
path: ':corporate_id/claim-history',
element: <CorporateClaimHistories />,
},
{
path: ':corporate_id/corporate-history',
element: <CorporateHistories />,
},
],
},
{
@@ -368,6 +381,7 @@ const CorporatePlans = Loadable(lazy(() => import('../pages/Corporates/Corporate
const PlanCreate = Loadable(lazy(() => import('../pages/Corporates/Plan/Create')));
const Plans = Loadable(lazy(() => import('../pages/Corporates/Plan/Index')));
const CorporatePlansHistory = Loadable(lazy(() => import('../pages/Corporates/Plan/sections/History')));
const DiagnosisExclusions = Loadable(
lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index'))
@@ -398,12 +412,17 @@ const MasterFormulariumCreate = Loadable(lazy(() => import('../pages/Master/Form
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')));
const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
const CorporateClaimHistories = Loadable(
lazy(() => import('../pages/Corporates/ClaimHistory/Index'))
);
const CorporateHistories = Loadable(
lazy(() => import('../pages/Corporates/History'))
);
const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));