Comment Header title

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',
+      title: 'Sales Start Date',
-      dataIndex: 'SalesDate',
+      dataIndex: 'SalesStartDate',
-      key: 'SalesDate',
+      key: 'SalesStartDate',
-      width: 100,
+      width: 130,
-      render: (date) => (date ? dayjs(date).format('DD/MM/YYYY') : ''),
+      render: (date) => (date ? ExtractDateFormate(date) : ''),
     },
     {
-      title: 'Tip Date',
+      title: 'Sales End Date',
-      dataIndex: 'TipsAmount',
+      dataIndex: 'SalesEndDate',
-      key: 'TipsAmount',
+      key: 'SalesEndDate',
-      width: 100,
+      width: 130,
-      render: (item) => <span style={{}}>{item}</span>,
+      render: (date) => (date ? ExtractDateFormate(date) : ''),
+    },
+    {
+      title: 'Total Sales Amount',
+      dataIndex: 'TotalSalesAmount',
+      key: 'TotalSalesAmount',
+      width: 150,
+      align: 'right',
+      render: (item) => <span>{item ?? 0}</span>,
+    },
+    {
+      title: 'Incentive Amount',
+      dataIndex: 'IncentiveAmount',
+      key: 'IncentiveAmount',
+      width: 130,
+      align: 'right',
+      render: (item) => <span>{item ?? 0}</span>,
+    },
+    {
+      title: 'Status',
+      dataIndex: 'SettledStatus',
+      key: 'SettledStatus',
+      width: 100,
+      align: 'center',
+      render: (item) => (
+        <span style={{ color: item === 'Y' ? 'green' : 'orange' }}>
+          {item === 'Y' ? 'Settled' : 'Pending'}
+        </span>
+      ),
     },
-
-    // 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 = () => {
         <a style={{ color: 'black' }}>{index + 1}</a>
       ),
     },
-
     {
       title: 'Employee',
       dataIndex: 'EmployeeName',
       key: 'EmployeeName',
       render: (item, record) => (
-        <span style={{}}>{item ? item : record?.MobileNo}</span>
+        <span>{item ? item : record?.MobileNo}</span>
       ),
     },
     {
@@ -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 <span>{group?.IncentiveAmount ?? 0}</span>;
       },
     },
-    ...(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 (
+          <span
+            style={{ cursor: 'pointer' }}
+            onClick={() => handleEyeClick(group?.items ?? [])}
+          >
+            <i
+              className="anticon anticon-eye"
+              style={{ fontSize: 18, color: '#1890ff' }}
+            >
+              <svg
+                viewBox="64 64 896 896"
+                focusable="false"
+                data-icon="eye"
+                width="1em"
+                height="1em"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M942.2 486.6C885.6 367.2 765.8 288 624 288c-141.8 0-261.6 79.2-318.2 198.6-7.9 16.6-7.9 35.2 0 51.8C362.4 656.8 482.2 736 624 736c141.8 0 261.6-79.2 318.2-198.6 7.9-16.6 7.9-35.2 0-51.8zM624 672c-79.5 0-144-64.5-144-144s64.5-144 144-144 144 64.5 144 144-64.5 144-144 144zm0-240c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z" />
+              </svg>
+            </i>
+          </span>
+        );
+      },
+    },
+    ...(statusValue !== 'already'
       ? [
-          {
+        {
-            title: 'Settle',
+          title: 'Settle',
-            key: 'settle',
+          key: 'settle',
-            width: 80,
+          width: 80,
-            align: 'center',
+          align: 'center',
-            render: (_, record) => {
+          render: (_, record) => {
-              const waiterId = record?.EmployeeId;
+            const waiterId = record?.EmployeeId;
-              const isDisabled = record?.IncentiveAmount === 12;
+            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 (
+            return (
-                <Checkbox
+              <Checkbox
-                  checked={checkedRowKeys.includes(waiterId)}
+                checked={checkedRowKeys.includes(waiterId)}
-                  disabled={isDisabled}
+                disabled={isDisabled}
-                  onChange={(e) => {
+                onChange={(e) => {
-                    if (e.target.checked) {
+                  if (e.target.checked) {
-                      setCheckedRowKeys((prev) =>
+                    setCheckedRowKeys((prev) =>
-                        prev.includes(waiterId) ? prev : [...prev, waiterId]
+                      prev.includes(waiterId) ? prev : [...prev, waiterId]
-                      );
+                    );
-                      setCheckedRows((prev) =>
+                    setCheckedRows((prev) =>
-                        prev.find((row) => row?.EmployeeId === waiterId)
+                      prev.find((row) => row?.EmployeeId === waiterId)
-                          ? prev
+                        ? prev
-                          : [...prev, record]
+                        : [...prev, record]
-                      );
+                    );
-                    } else {
+                  } else {
-                      setCheckedRowKeys((prev) =>
+                    setCheckedRowKeys((prev) =>
-                        prev.filter((key) => key !== waiterId)
+                      prev.filter((key) => key !== waiterId)
-                      );
+                    );
-                      setCheckedRows((prev) =>
+                    setCheckedRows((prev) =>
-                        prev.filter((row) => row?.EmployeeId !== waiterId)
+                      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)
+        .filter((emp) => emp.StatusGroups.length > 0);
-        ?.map((row) => row?.EmployeeId);
+
-      setCheckedRowKeys(allWaiterIds);
+      const allIds = allEmployees.map((row) => row?.EmployeeId);
-      setCheckedRows(TableData.slice());
+      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)
+        getEmployeeSettlementListindIvidually(data)
-        ).unwrap())
+      ).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(() => {
+  // ✅ FIXED: No longer skips records with IncentiveAmount === 0
-  //   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]);
   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);
+  const getTableDataSource = () => {
-  console.log(dataaaa, 'dataaaa');
+    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',
       }}
     >
-      <div style={{ marginBottom: '10px' }}>
-        <FormHeader title={'Incentive'} />
-      </div>
       <Messages
         messageType={messageType}
         messageData={messageData}
@@ -425,12 +482,13 @@ const EmployeeSettlement = () => {
           Employee: 'all',
           status: 'toBe',
         }}
+        style={{
+          padding: '10px',
+          border: '1px solid #d7d7d7',
+          borderRadius: '10px',
+        }}
       >
-        <Row
+        <Row style={{ rowGap: '1rem', flexWrap: 'wrap' }} wrap={true} gutter={16}>
-          style={{ rowGap: '1rem', flexWrap: 'wrap' }}
-          wrap={true}
-          gutter={16}
-        >
           <Col>
             <Form.Item
               name="Employee"
@@ -444,7 +502,7 @@ const EmployeeSettlement = () => {
                   <Option key={emp.UniqueId} value={emp.UniqueId}>
                     {emp.EmpFirstName
                       ? emp.EmpFirstName +
-                        (emp.EmpLastName ? ' ' + emp.EmpLastName : '')
+                      (emp.EmpLastName ? ' ' + emp.EmpLastName : '')
                       : emp.MobileNo}
                   </Option>
                 ))}
@@ -452,35 +510,6 @@ const EmployeeSettlement = () => {
             </Form.Item>
           </Col>
 
-          {/* <Col>
-                                <Form.Item
-                                    name="fromDate"
-                                    label="From Date"
-                                    style={{ marginBottom: '8px' }}
-                                    rules={[{ required: true, message: 'Please select from date' }]}
-                                >
-                                    <DatePicker
-                                        format="DD/MM/YYYY"
-                                        style={{ width: 140 }}
-                                        disabledDate={current => current && current > dayjs().endOf('day')}
-                                    />
-                                </Form.Item>
-                            </Col>
-                            <Col>
-                                <Form.Item
-                                    name="toDate"
-                                    label="To Date"
-                                    style={{ marginBottom: '8px' }}
-                                    rules={[{ required: true, message: 'Please select to date' }]}
-                                >
-                                    <DatePicker
-                                        format="DD/MM/YYYY"
-                                        style={{ width: 140 }}
-                                        disabledDate={current => current && current > dayjs().endOf('day')}
-                                    />
-                                </Form.Item>
-                            </Col> */}
-
           <Col>
             <Form.Item
               name="status"
@@ -512,17 +541,17 @@ const EmployeeSettlement = () => {
         </Row>
       </Form>
 
-      {/* Data Table */}
+      {/* Select All checkbox */}
-      {Paymentstatus !== 'already' && (
+      {statusValue !== 'already' && (
         <div style={{ marginBottom: 8, float: 'right' }}>
           <Checkbox
             indeterminate={
               checkedRowKeys?.length > 0 &&
-              checkedRowKeys?.length < TableData?.length
+              checkedRowKeys?.length < getTableDataSource()?.length
             }
             checked={
-              TableData?.length > 0 &&
+              getTableDataSource()?.length > 0 &&
-              checkedRowKeys?.length === TableData?.length
+              checkedRowKeys?.length === getTableDataSource()?.length
             }
             onChange={handleSelectAll}
           >
@@ -530,28 +559,13 @@ const EmployeeSettlement = () => {
           </Checkbox>
         </div>
       )}
+
+      {/* Data Table */}
       <div className="reportTable">
         <Table
           columns={columns}
-          dataSource={
+          dataSource={getTableDataSource()}
-            form.getFieldValue('status') == 'toBe'
+          rowKey={(record) => record?.EmployeeId}
-              ? groupByEmployeeAndStatus(TableData)
-                  .map((emp) => ({
-                    ...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)
-          }
           loading={loading}
           scroll={{ x: 'max-content' }}
           size="middle"
@@ -559,20 +573,12 @@ const EmployeeSettlement = () => {
         />
       </div>
 
-      {/* Button to submit checked rows */}
+      {/* Pay Button */}
-
       <div
         className="incenbtivepayBTN"
         style={{ marginTop: 16, float: 'right' }}
       >
         <div style={{ display: 'flex', gap: '1rem' }}>
-          {/* {checkedRowKeys.length !== 0 && (
-                            <input
-                                disabled
-                                style={{ width: "100px", borderRadius: "10px", height: "38px", textAlign: "right", paddingRight: 8 }}
-                                value={checkedTotal.toFixed(2)}
-                            />
-                        )} */}
           <Button
             type="primary"
             disabled={checkedRowKeys.length === 0}
@@ -583,12 +589,13 @@ const EmployeeSettlement = () => {
         </div>
       </div>
 
+      {/* Detail Modal */}
       <Modal
         open={modalOpen}
         onCancel={() => setModalOpen(false)}
         footer={null}
-        title="Tip Details"
+        title="Incentive Details"
-        width={600}
+        width={700}
       >
         <Table
           columns={modalColumns}