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

Invoice Payment

Browse Source
This commit is contained in:
ivan-sim
2025-02-27 16:55:25 +07:00
parent dc02745c5a
commit 6deaf27bca
11 changed files with 3790 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1573
frontend/dashboard/src/pages/InvoicePayment/CreateInvoice.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

323
frontend/dashboard/src/pages/InvoicePayment/Detail.tsx Normal file
View File

@@ -0,0 +1,323 @@
import {
Container,
Grid,
Stack,
Typography,
Card,
TableRow,
Tab,
TableCell,
Collapse,
AccordionSummary,
AccordionDetails,
IconButton,
TextField
} from '@mui/material';
import { fCurrency } from '../../utils/formatNumber';
import { Table, TableBody, TableContainer, TableHead, Paper } from '@mui/material';
// components
import Page from '@/components/Page';
// utils
import useSettings from '@/hooks/useSettings';
// react
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef, useMemo } from 'react';
import axios from '@/utils/axios';
// pages
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { fDate, fDateTimesecond, fDateTime } from '@/utils/formatTime';
import { Button } from '@mui/material';
import Label from '@/components/Label';
import { Box } from '@mui/system';
import { Accordion } from '@mui/material';
import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
import AddIcon from '@mui/icons-material/Add';
import MoreMenu from '@/components/MoreMenu';
import { MenuItem } from '@mui/material';
import { fNumber } from '@/utils/formatNumber';
import palette from '@/theme/palette';
import CloseIcon from '@mui/icons-material/Close';
import { enqueueSnackbar } from 'notistack';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import { List, ListItem, Link, Divider } from '@mui/material';
// ----------------------------------------------------------------------
export default function Detail() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [invoicePayment, setInvoicePayment] = useState([]);
const [invoicePaymentDetail, setInvoicePaymentDetail] = useState([]);
const [invoicePaymentFile, setInvoicePaymentFile] = useState([]);
const [statusClaim, setStatusClaim] = useState('');
const [dataMember, setDataMember] = useState('');
const { id } = useParams();
useEffect(() => {
axios
.get('invoice-payment/detail/'+id)
.then((response) => {
setInvoicePayment(response.data.invoice_payments);
setInvoicePaymentDetail(response.data.invoice_payment_details);
setInvoicePaymentFile(response.data.files);
})
.catch((error) => {
console.error(error);
});
}, [id]);
console.log(invoicePayment);
console.log(invoicePaymentDetail);
console.log(invoicePaymentFile);
const style1 = {
color: '#919EAB',
width: '30%'
}
const style3 = {
color: '#919EAB',
width: '35%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialogSubmit = () => {
setOpenDialogSubmit(false);
}
const [decline, setDeclaine] = useState('');
// const handleSubmitData = () => {
// //approve or decline
// if(!reasonDecline && approve == 'decline')
// {
// enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
// return false;
// }
// axios
// .post('claims/'+id_claim+'/'+approve, {reasonDecline:reasonDecline})
// .then((response) => {
// enqueueSnackbar('Success '+toTitleCase(approve)+' Claim Request', { variant: 'success' });
// setOpenDialogSubmit(false);
// // window.location.reload();
// })
// .catch(({ response }) => {
// enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
// });
// setTimeout(() =>
// {
// window.location.reload();
// }, 5000);
// };
function toTitleCase(str: string | null) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
const [reasonDecline, setReasonDecline] = useState('');
const handleReasonDeclineChange = (event) => {
setReasonDecline(event.target.value);
// Tambahkan logika yang diperlukan di sini
};
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
const [openDialogEditDetail, setDialogDEditDetail] = useState(false);
const [openDialogBenefit, setDialogBenefit] = useState(false);
const [openDialogMedicine, setDialogMedicine] = useState(false);
// Handel Delete Detail Benefit
const [idBenefitData, setIdBenefitData] = useState<number>();
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
const [idMedicineData, setIdMedicineData] = useState<number>();
const [openDialogDeleteMedicine, setDialogDeleteMedicine] = useState(false)
const [approve, setApprove] = useState('')
// Handle Edit Detail Benefit
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
// Buat total data
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
// Handle Upload File LOG
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
const totalAmount = invoicePaymentFile.reduce((sum, payment) => {
const num = parseFloat(payment.amount_paid) || 0;
return parseFloat(sum) + parseFloat(num);
}, 0);
const grandTotal = invoicePaymentDetail.reduce((sum, item) => sum + parseFloat(item.tot_bill ? item.tot_bill : 0), 0);
return (
<Page title='Detail'>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{ marginLeft: 2 }}>
{/* {invoicePayment.length > 0 ? invoicePayment[0].invoice_number : 'Detail'} */}
Detail Invoice
</Typography>
</Stack>
<Grid container spacing={2}>
{/* Detail */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
Detail
</Typography>
</Grid>
</Grid>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Tanggal Invoice</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].invoice_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Nomor Invoice </Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? invoicePayment[0].invoice_number : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Periode Pembayaran</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{invoicePayment.length > 0 ? fDate(invoicePayment[0].start_date) : '-'}-{invoicePayment.length > 0 ? fDate(invoicePayment[0].end_date) : '-'}</Typography>
</Stack>
</Card>
</Grid>
{/* Benefit */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Claim</Typography>
</Stack>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Code Claim/Code Log</TableCell>
<TableCell>Invoice No</TableCell>
<TableCell>Name</TableCell>
<TableCell>Member ID</TableCell>
<TableCell>Policy Number</TableCell>
<TableCell>Provider</TableCell>
<TableCell>Total Bill</TableCell>
</TableRow>
</TableHead>
<TableBody>
{invoicePaymentDetail.map((detail) => (
<TableRow key={detail.id}>
<TableCell>{detail.code} / {detail.code_log}</TableCell>
<TableCell>{detail.invoice_no || '-'}</TableCell>
<TableCell>{detail.name}</TableCell>
<TableCell>{detail.member_id}</TableCell>
<TableCell>{detail.corporate_policies}</TableCell>
<TableCell>{detail.provider}</TableCell>
<TableCell>{fCurrency(detail.tot_bill)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Card>
</Grid>
{/* Catatan Pembayaran */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Catatan Pembayaran</Typography>
</Stack>
{invoicePaymentFile.map((file, index) => (
<Stack key={index.id} spacing={2} width="100%" sx={{ border: "1px solid #ddd", p: 2, borderRadius: 2, mt: 2, pt: 2 }}>
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography variant="subtitle1">Pembayaran {file.payment_number}</Typography>
</Stack>
{/* Input Jumlah Bayar */}
<Stack direction="row" spacing={2} width="100%">
<Stack spacing={2} sx={{ width: "50%" }}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Nominal Pembayaran</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{fCurrency(parseFloat(file.amount_paid))}</Typography>
</Stack>
{/* Input File Bukti */}
<Stack spacing={2} sx={{ width: "50%" }}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Bukti Pembayaran</Typography>
<Stack>
<Stack divider={<Divider orientation="horizontal" flexItem />} spacing={1}>
{file.files.map((file1, fileIndex) => (
<Stack direction="row" justifyContent="space-between" key={fileIndex}>
<a
href={file1.path}
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{file1.original_name ? file1.original_name : '-'}</Typography>
</a>
</Stack>
))}
</Stack>
</Stack>
</Stack>
</Stack>
</Stack>
))}
<Stack direction="row" justifyContent="space-between" alignContent="center" sx={{ mt: 2, pt: 2}}>
<Typography variant='subtitle1' fontWeight="bold">Jumlah Tagihan</Typography>
<Typography variant='subtitle1' fontWeight="bold">
{fCurrency(grandTotal)}
</Typography>
</Stack>
{/* Total Jumlah Bayar */}
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 2, borderTop: "2px solid #ddd", pt: 2 }}>
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>Total Dibayar</Typography>
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#19BBBB" }}>
{fCurrency(totalAmount.toString())}
</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 1, pt: 1 }}>
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>Sisa Pembayaran</Typography>
<Typography variant="subtitle2" fontWeight="bold" sx={{ color: "#FF4842" }}>
{fCurrency((grandTotal - totalAmount))}
</Typography>
</Stack>
</Card>
</Grid>
</Grid>
</Container>
</Page>
);
}

30
frontend/dashboard/src/pages/InvoicePayment/Index.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Card, Stack } from "@mui/material";
import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
import Page from "../../components/Page";
import List from "./List";
export default function Invoice() {
const pageTitle = 'Invoice Management';
return (
<Page title={ pageTitle } sx={{ mx: 2}}>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Invoice Payment',
href: '/invoice-payment',
},
]}
/>
{/* <Stack> */}
<List />
{/* </Stack> */}
</Page>
);
}

1063
frontend/dashboard/src/pages/InvoicePayment/List.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -480,6 +480,22 @@ export default function Router() {
path: 'report/rujukan',
element: <RujukanPasien/>,
},
{
path: 'invoice-payment',
element: <InvoicePayments />,
},
{
path: 'invoice-payment/create',
element: <CreateInvoicePayments />,
},
{
path: 'invoice-payment/detail/:id',
element: <InvoicePaymentsDetail />,
},
{
path: 'invoice-payment/edit/:invoiceID',
element: <InvoicePaymentsEdit />,
},
{
path: 'claims',
element: <Claims />,
@@ -780,6 +796,13 @@ const CorporateHistories = Loadable(
const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
//Invoice_Payments
const InvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/Index')));
const CreateInvoicePayments = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
const InvoicePaymentsDetail = Loadable(lazy(() => import('../pages/InvoicePayment/Detail')));
const InvoicePaymentsEdit = Loadable(lazy(() => import('../pages/InvoicePayment/CreateInvoice')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));