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) => {
console.log('Clicked index:', index);
console.log('Clicked payrollId:', id);
setSelectedIndex(index);
setPayrollId(id);
};
// 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;
From this code there is component AppSelect which is a reusable component on this it have option this option is a value which fetches the value from api and it is mapped in array value , if i select this option it shows years like 2024,2025 which is fetched from api and if i select one of the year it will display the months like jan, feb and march in a list , and shows it in listitembutton everything okay but whenever i click first month like jan it fetched data from api and display payslip pdf in box in same page in first load of the page, aftr i select feb it does not fetches the data like same for all month, i need to fetch data for all month when i click it in first load of page please give me the solution
const handleListItemClick = (index: number, id: string) => {
setSelectedIndex(index);
if (payrollId !== id) {
setPayrollId(id);
} else {
// Reset payrollId if the same month is selected again
setPayrollId('');
}
};
i tried this logic but in this logic payrollid is resetted after when i click each month for three time then only it fetches data so i don’t need this behaviour
