import AppSelect from '@/components/form-fields/AppSelect';
import {
Box,
Button,
CircularProgress,
Divider,
List,
ListItemButton,
ListItemIcon,
ListItemText,
Stack,
Typography,
useTheme,
} from '@mui/material';
import React, { useEffect } from 'react';
import { BlobProvider, PDFDownloadLink } from '@react-pdf/renderer';
import Iconify from '@/components/iconify';
import PaySlipPDF from './paySlipPDF';
import useGet from '@/hooks/useGet';
import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import { PAYSTRUCTURE_PAYROLL_LIST_ENDPOINT } from '@/constants/my-company/employee-directory';
import useUserStore from '@/store/user.store';
type PayRoll = {
year: string;
month: string;
monthText: string;
payrollId: string;
};
const Payslips = () => {
const theme = useTheme();
const [selectedIndex, setSelectedIndex] = React.useState(1);
const [payrollId, setPayrollId] = React.useState('');
const [list, setlist] = React.useState<PayRoll[] | undefined>([]);
const { control, watch } = useForm();
const user = useUserStore((state) => state.user);
// const {id} = useParams();
const { data } = useGet<any>(
PAYSTRUCTURE_PAYROLL_LIST_ENDPOINT (user?.Employee?.id), ['getPayrunListForEmp']
);
// const options = [...new Set(data?.map((each: { year: any; }) => each.year))].map((each) => ({
// label: each,
// value: each,
// }));
// const year = watch('year');
// useEffect(() => {
// if (data) {
// setlist(data?.filter((each: { year: any; }) => each.year === year));
// }
// }, [year, data]);
const options = [...new Set(data?.map((each:any) => each.year))].map((each) => ({
label: each,
value: each,
}));
const year = watch('year');
useEffect(() => {
setlist(data?.filter((each:any) => each.year == year));
}, [year, data, payrollId]);
const handleListItemClick = (index: number, id: string) => {
setSelectedIndex(index);
if (payrollId !== id) {
setPayrollId(id);
} else {
// Reset payrollId if the same month is selected again
setPayrollId('');
}
};
// Add your custom styles for the header box
const headerStyles = {
display: 'flex',
flexDirection: 'row',
width: '70%',
justifyContent: 'space-between',
alignItems: 'center',
padding: theme.spacing(2),
backgroundColor: '#4A5363',
color: theme.palette.primary.contrastText,
};
// console.log('Data:', data);
// console.log('Options:', options);
// console.log('List:', list);
// console.log('Mapped Years:', data?.map((each: { year: any; }) => each.year));
return (
<Stack
sx={{
display: 'flex',
flexDirection: 'row',
margin: 2,
gap: 2,
flexWrap: 'wrap',
height: '100%',
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
},
}}
>
<Stack
direction='column'
sx={{
width: '250px',
[theme.breakpoints.down('sm')]: {
width: '100%',
},
}}
gap={2}
>
<AppSelect control={control} name='year' options={options} />
<Box component='span' sx={{ bgcolor: 'background.paper', flex: 1 }}>
<List component='nav' aria-label='main mailbox folders'>
{list?.map((each, idx) => (
<ListItemButton
selected={selectedIndex === idx}
onClick={(event) => handleListItemClick(idx, each.payrollId)}
>
<ListItemText primary={each.monthText} />
</ListItemButton>
))}
</List>
</Box>
</Stack>
<Box sx={{ flex: 1 }}>
{payrollId ? (
<PaySlipPDF id={payrollId} />
) : (
<Typography variant='body2'>Select Year and Month </Typography>
)}
</Box>
</Stack>
);
};
export default Payslips;
in this provided code if i select month which is in listitembutton it fetch data and gives payslipdf, but after selecting next month for three time then only it shows next payslip pdf for that month for example if i select jan it shows payslip pdf and same time if i press feb for three times then only it shows the payslip pdf
useEffect(() => {
setlist(data?.filter((each:any) => each.year == year));
}, [year, data, payrollId]);
const handleListItemClick = (index: number, id: string) => {
setSelectedIndex(index);
if (payrollId !== id) {
setPayrollId(id);
} else {
// Reset payrollId if the same month is selected again
setPayrollId('');
}
};
type here
import { PAYSTRUCTURE_PAYSLIP_ENDPOINT } from "@/constants/my-company/employee-directory"
import useGet from "@/hooks/useGet"
import { LinearProgress } from "@mui/material"
import { useEffect, useRef } from "react"
export default function PaySlipPDF({id}:{id:string}) {
const { data,isLoading } = useGet<any>(PAYSTRUCTURE_PAYSLIP_ENDPOINT + `/${id}`, ["payslip"],false,true)
const ref = useRef<any>()
useEffect(() => {
console.log(data)
const file = new Blob([data],
{ type: 'application/pdf' });
//Build a URL from the file
const fileURL = URL.createObjectURL(file);
console.log(fileURL)
ref.current.src = fileURL
//Open the URL on new Window
// window.open(fileURL);
}, [data])
return (
<div style={{ width: "100%", height: "700px" }}>
{isLoading && <LinearProgress />}
<iframe style={{display:isLoading?"none":"block"}} width="100%" height="100%" ref={ref} />
</div>
)
}
i modify the logic but it won’t works please give some solution it in react tyepscript