From 62dadfba8a0d8ba8cf3104ada2cbd305d7e41871 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 25 Mar 2026 09:31:50 +0530 Subject: [PATCH] Comment Header title --- .../EmployeeSettlement/EmployeeSettlement.jsx | 365 +++++++++--------- 1 file changed, 186 insertions(+), 179 deletions(-) diff --git a/src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx b/src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx index 6e21e02..c699748 100644 --- a/src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx +++ b/src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx @@ -22,7 +22,7 @@ import { getTipAmountSettlementList, postTipSettle, } from '../../../Features/TipAmountSettlementList/TipAmountSettlementList'; -import { getSession } from '../../../Services/Others'; +import { ExtractDateFormate, getSession } from '../../../Services/Others'; import { WaiterNames } from '../../../Features/Reports/Reports'; import { Messages } from '../../../Components/Notifications/Messages'; import { @@ -32,9 +32,11 @@ import { } from '../../../Features/EmployeeSettlement/EmployeeSettlement'; import FormHeader from '../../PageComponents/FormHeader'; import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage'; +import "../../../Styles/OverAllStyle/OverAllStyle.scss" const { Option } = Select; const subDirectory = import.meta.env.BASE_URL; + const EmployeeSettlement = () => { const [form] = Form.useForm(); const dispatch = useDispatch(); @@ -51,51 +53,70 @@ const EmployeeSettlement = () => { const AppId = getSession('AppId'); const UserId = getSession('UserId'); const [TableData, setTableData] = useState([]); - const [employeeList, setEmployee] = useState([]); // Add this state for employee dropdown + const [employeeList, setEmployee] = useState([]); + const [statusValue, setStatusValue] = useState('toBe'); + const checkedTotal = checkedRows.reduce( (sum, row) => sum + (Number(row?.IncentiveDetails?.[0]?.IncentiveAmount) || 0), 0 ); - const Paymentstatus = form.getFieldValue('status'); - - console.log(checkedRowKeys, 'checkedRowKeys'); - // const employeeOptions = [ - // ...new Set(TableData.map(item => item.Employee)) - // ]; const [filteredData, setFilteredData] = useState(TableData); + const items = [ { name: 'Home', link: `${subDirectory}app-page/home`, }, - { - name: 'Incentive Settlement', - link: `${subDirectory}report/EmployeeSettlement`, - }, ]; + const modalColumns = [ { - title: 'Tip Date', - dataIndex: 'SalesDate', - key: 'SalesDate', - width: 100, - render: (date) => (date ? dayjs(date).format('DD/MM/YYYY') : ''), + title: 'Sales Start Date', + dataIndex: 'SalesStartDate', + key: 'SalesStartDate', + width: 130, + render: (date) => (date ? ExtractDateFormate(date) : ''), }, { - title: 'Tip Date', - dataIndex: 'TipsAmount', - key: 'TipsAmount', - width: 100, - render: (item) => {item}, + title: 'Sales End Date', + dataIndex: 'SalesEndDate', + key: 'SalesEndDate', + width: 130, + render: (date) => (date ? ExtractDateFormate(date) : ''), + }, + { + title: 'Total Sales Amount', + dataIndex: 'TotalSalesAmount', + key: 'TotalSalesAmount', + width: 150, + align: 'right', + render: (item) => {item ?? 0}, + }, + { + title: 'Incentive Amount', + dataIndex: 'IncentiveAmount', + key: 'IncentiveAmount', + width: 130, + align: 'right', + render: (item) => {item ?? 0}, + }, + { + title: 'Status', + dataIndex: 'SettledStatus', + key: 'SettledStatus', + width: 100, + align: 'center', + render: (item) => ( + + {item === 'Y' ? 'Settled' : 'Pending'} + + ), }, - - // Add more columns as needed based on your TipsDetails structure ]; const handleEyeClick = (record) => { - // Assuming TipsDetails is an array inside WaiterDetails[0] setModalData(record); setModalOpen(true); }; @@ -111,13 +132,12 @@ const EmployeeSettlement = () => { {index + 1} ), }, - { title: 'Employee', dataIndex: 'EmployeeName', key: 'EmployeeName', render: (item, record) => ( - {item ? item : record?.MobileNo} + {item ? item : record?.MobileNo} ), }, { @@ -127,7 +147,7 @@ const EmployeeSettlement = () => { key: 'TotalSalesAmount', render: (_, record) => { const statusMap = { toBe: 'N', already: 'Y' }; - const value = statusMap[form.getFieldValue('status')]; + const value = statusMap[statusValue]; const group = record?.StatusGroups?.find( (e) => e?.SettledStatus === value ); @@ -135,73 +155,116 @@ const EmployeeSettlement = () => { }, }, { - title: 'IncentiveAmount', + title: 'Incentive Amount', align: 'right', dataIndex: 'IncentiveAmount', key: 'IncentiveAmount', render: (_, record) => { const statusMap = { toBe: 'N', already: 'Y' }; - const value = statusMap[form.getFieldValue('status')]; + const value = statusMap[statusValue]; const group = record?.StatusGroups?.find( (e) => e?.SettledStatus === value ); return {group?.IncentiveAmount ?? 0}; }, }, - ...(Paymentstatus !== 'already' + { + title: 'Details', + dataIndex: 'TipsDetails', + key: 'TipsDetails', + width: 80, + align: 'center', + render: (_, record) => { + const statusMap = { toBe: 'N', already: 'Y' }; + const value = statusMap[statusValue]; + const group = record?.StatusGroups?.find( + (e) => e?.SettledStatus === value + ); + return ( + handleEyeClick(group?.items ?? [])} + > + + + + + ); + }, + }, + ...(statusValue !== 'already' ? [ - { - title: 'Settle', - key: 'settle', - width: 80, - align: 'center', - render: (_, record) => { - const waiterId = record?.EmployeeId; - const isDisabled = record?.IncentiveAmount === 12; + { + title: 'Settle', + key: 'settle', + width: 80, + align: 'center', + render: (_, record) => { + const waiterId = record?.EmployeeId; + const statusMap = { toBe: 'N', already: 'Y' }; + const value = statusMap[statusValue]; + const group = record?.StatusGroups?.find( + (g) => g?.SettledStatus === value + ); + const isDisabled = !group || group?.IncentiveAmount === 0; - return ( - { - if (e.target.checked) { - setCheckedRowKeys((prev) => - prev.includes(waiterId) ? prev : [...prev, waiterId] - ); - setCheckedRows((prev) => - prev.find((row) => row?.EmployeeId === waiterId) - ? prev - : [...prev, record] - ); - } else { - setCheckedRowKeys((prev) => - prev.filter((key) => key !== waiterId) - ); - setCheckedRows((prev) => - prev.filter((row) => row?.EmployeeId !== waiterId) - ); - } - }} - /> - ); - }, + return ( + { + if (e.target.checked) { + setCheckedRowKeys((prev) => + prev.includes(waiterId) ? prev : [...prev, waiterId] + ); + setCheckedRows((prev) => + prev.find((row) => row?.EmployeeId === waiterId) + ? prev + : [...prev, record] + ); + } else { + setCheckedRowKeys((prev) => + prev.filter((key) => key !== waiterId) + ); + setCheckedRows((prev) => + prev.filter((row) => row?.EmployeeId !== waiterId) + ); + } + }} + /> + ); }, - ] + }, + ] : [{}]), ]; // Handle select all checkboxes const handleSelectAll = (e) => { if (e.target.checked) { - const allWaiterIds = groupByEmployeeAndStatus(TableData) + const allEmployees = groupByEmployeeAndStatus(TableData) .map((emp) => ({ ...emp, StatusGroups: emp.StatusGroups.filter((g) => g.SettledStatus === 'N'), })) - .filter((emp) => emp.StatusGroups.length > 0) - ?.map((row) => row?.EmployeeId); - setCheckedRowKeys(allWaiterIds); - setCheckedRows(TableData.slice()); + .filter((emp) => emp.StatusGroups.length > 0); + + const allIds = allEmployees.map((row) => row?.EmployeeId); + setCheckedRowKeys(allIds); + setCheckedRows(allEmployees); } else { setCheckedRowKeys([]); setCheckedRows([]); @@ -209,7 +272,6 @@ const EmployeeSettlement = () => { }; useEffect(() => { - // Set today's date for fromDate and toDate in the form const today = dayjs(); form.setFieldsValue({ fromDate: today, @@ -230,8 +292,8 @@ const EmployeeSettlement = () => { if (response?.data?.statusCode === 1) { setTableData(response?.data?.data?.EmployeeDetails); } - // handle response as needed }; + const fetchData = async () => { let data = { activeStatus: 'A', @@ -250,6 +312,9 @@ const EmployeeSettlement = () => { setSelectedRowKeys([]); setFilteredData(TableData); setTableData([]); + setCheckedRows([]); + setCheckedRowKeys([]); + setStatusValue('toBe'); }; const onFinish = async (values) => { @@ -266,21 +331,21 @@ const EmployeeSettlement = () => { let response; Employee !== 'all' ? (response = await dispatch( - getEmployeeSettlementListindIvidually(data) - ).unwrap()) + getEmployeeSettlementListindIvidually(data) + ).unwrap()) : (response = await dispatch(getEmployeeSettlementList(data)).unwrap()); + if (response?.data?.statusCode === 1) { setTableData(response?.data?.data?.EmployeeDetails); const StatusValue = form.getFieldValue('status') === 'toBe' ? 'N' : 'Y'; - const employees = response?.data?.data?.EmployeeDetails ?? []; - const data = employees.some((e) => + const hasData = employees.some((e) => e?.IncentiveDetails?.some( (a) => a?.SettledStatus === StatusValue && a?.IncentiveAmount > 0 ) ); - if (data) { + if (hasData) { setMessageType('success'); setMessageData(response?.data?.response); } @@ -294,7 +359,7 @@ const EmployeeSettlement = () => { const handleCheckedSubmit = async () => { const today = dayjs(); const statusMap = { toBe: 'N', already: 'Y' }; - const value = statusMap[form.getFieldValue('status')]; // "N" or "Y" + const value = statusMap[statusValue]; const postData = { CompId, @@ -305,7 +370,6 @@ const EmployeeSettlement = () => { const group = item?.StatusGroups?.find( (g) => g?.SettledStatus === value ); - return { SettlementAmount: group?.IncentiveAmount ?? 0, EmployeeId: item?.EmployeeId, @@ -315,27 +379,23 @@ const EmployeeSettlement = () => { }), }; - console.log(postData); - let response = await dispatch(postEmployeeSettle(postData))?.unwrap(); if (response?.data?.statusCode === 1) { setMessageType('success'); setMessageData(response?.data?.response); handleReset(); - setCheckedRows([]); } else { setMessageType('error'); setMessageData(response?.data?.response); handleReset(); } }; + function formatToYYYYMMDD(dateString) { const date = new Date(dateString); - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based + const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); - return `${year}/${month}/${day}`; } @@ -344,24 +404,11 @@ const EmployeeSettlement = () => { setMessageType(null); }, []); - // const getFilteredTableData = useCallback(() => { - // const statusMap = { toBe: "N", already: "Y" }; - // const value = statusMap[form.getFieldValue('status')]; - - // return value - // ? TableData.flatMap(item => - // item?.IncentiveDetails?.filter(detail => detail?.SettledStatus === value) || [] - // ) - // : TableData.flatMap(item => item?.IncentiveDetails || []); - // }, [form, TableData]); + // ✅ FIXED: No longer skips records with IncentiveAmount === 0 function groupByEmployeeAndStatus(tableData) { return tableData .map((emp) => { const grouped = emp.IncentiveDetails.reduce((acc, curr) => { - if ((curr.IncentiveAmount || 0) === 0) { - return acc; // skip this detail entirely - } - const status = curr.SettledStatus; if (!acc[status]) { acc[status] = { @@ -380,20 +427,33 @@ const EmployeeSettlement = () => { return { EmployeeId: emp?.EmployeeId, EmployeeName: emp.EmployeeName, + MobileNo: emp.MobileNo, StatusGroups: Object.values(grouped), }; }) - .filter((emp) => emp.StatusGroups.length > 0); // remove employees with no valid items + .filter((emp) => emp.StatusGroups.length > 0); } - let dataaaa = groupByEmployeeAndStatus(TableData); - console.log(dataaaa, 'dataaaa'); + const getTableDataSource = () => { + const grouped = groupByEmployeeAndStatus(TableData); + const statusFilter = statusValue === 'toBe' ? 'N' : 'Y'; + return grouped + ?.map((emp) => ({ + ...emp, + StatusGroups: emp.StatusGroups.filter( + (g) => g.SettledStatus === statusFilter + ), + })) + ?.filter((emp) => emp.StatusGroups.length > 0); + }; + useEffect(() => { setCheckedRowKeys([]); setCheckedRows([]); - }, [form.getFieldValue('status'), TableData]); + }, [statusValue, TableData]); - const handleStatusChange = () => { + const handleStatusChange = (e) => { + setStatusValue(e.target.value); setCheckedRowKeys([]); setCheckedRows([]); setFilteredData([]); @@ -408,9 +468,6 @@ const EmployeeSettlement = () => { overflow: 'scroll', }} > -
- -
{ Employee: 'all', status: 'toBe', }} + style={{ + padding: '10px', + border: '1px solid #d7d7d7', + borderRadius: '10px', + }} > - + { ))} @@ -452,35 +510,6 @@ const EmployeeSettlement = () => { - {/* - - current && current > dayjs().endOf('day')} - /> - - - - - current && current > dayjs().endOf('day')} - /> - - */} - { - {/* Data Table */} - {Paymentstatus !== 'already' && ( + {/* Select All checkbox */} + {statusValue !== 'already' && (
0 && - checkedRowKeys?.length < TableData?.length + checkedRowKeys?.length < getTableDataSource()?.length } checked={ - TableData?.length > 0 && - checkedRowKeys?.length === TableData?.length + getTableDataSource()?.length > 0 && + checkedRowKeys?.length === getTableDataSource()?.length } onChange={handleSelectAll} > @@ -530,28 +559,13 @@ const EmployeeSettlement = () => {
)} + + {/* Data Table */}
({ - ...emp, - StatusGroups: emp.StatusGroups.filter( - (g) => g.SettledStatus === 'N' - ), - })) - .filter((emp) => emp.StatusGroups.length > 0) - : groupByEmployeeAndStatus(TableData) - .map((emp) => ({ - ...emp, - StatusGroups: emp.StatusGroups.filter( - (g) => g.SettledStatus === 'Y' - ), - })) - .filter((emp) => emp.StatusGroups.length > 0) - } + dataSource={getTableDataSource()} + rowKey={(record) => record?.EmployeeId} loading={loading} scroll={{ x: 'max-content' }} size="middle" @@ -559,20 +573,12 @@ const EmployeeSettlement = () => { /> - {/* Button to submit checked rows */} - + {/* Pay Button */}
- {/* {checkedRowKeys.length !== 0 && ( - - )} */}
+ {/* Detail Modal */} setModalOpen(false)} footer={null} - title="Tip Details" - width={600} + title="Incentive Details" + width={700} >
{ ); }; -export default EmployeeSettlement; +export default EmployeeSettlement; \ No newline at end of file