Merge pull request 'srinath' (#309) from srinath into main

Reviewed-on: Pozomind/pozo-retail-app#309

src/Pages/AppPage/AppPage.jsx

@@ -864,10 +864,11 @@ const AppPage = () => {
           'Payment Updates',
           `${subDirectory}setting/payment-received-retail`
         ),
-        getsubItem('Settlement', `${subDirectory}setting/Settlement`, null, [
+        // getsubItem('Settlement', `${subDirectory}setting/Settlement`, null, [
-          getsubItem('Tips', `${subDirectory}report/tipamountsettlementlist`),
+        //   getsubItem('Tips', `${subDirectory}report/tipamountsettlementlist`),
-          getsubItem('Incentive', `${subDirectory}report/EmployeeSettlement`),
+        //   getsubItem('Incentive', `${subDirectory}report/EmployeeSettlement`),
-        ]),
+        // ]),
+        getsubItem('Settlement', `${subDirectory}report/Settlement`),
 
         !iswarehouse &&
           getsubItem('Others', `${subDirectory}cancelReschedule`, null, [
@@ -1112,10 +1113,11 @@ const AppPage = () => {
   ];
   const Settlement = [
     !sportsAppPreference &&
-      getsubItem('Settlement', `${subDirectory}setting/Settlement`, null, [
+      // getsubItem('Settlement', `${subDirectory}setting/Settlement`, null, [
-        getsubItem('Tips', `${subDirectory}report/tipamountsettlementlist`),
+      //   getsubItem('Tips', `${subDirectory}report/tipamountsettlementlist`),
-        getsubItem('Incentive', `${subDirectory}report/EmployeeSettlement`),
+      //   getsubItem('Incentive', `${subDirectory}report/EmployeeSettlement`),
-      ]),
+      // ]),
+      getsubItem('Settlement', `${subDirectory}report/Settlement`),
   ];
   const Others = [
     !iswarehouse &&
@@ -1817,21 +1819,22 @@ const AppPage = () => {
               `${subDirectory}setting/payment-received-retail`
             ),
 
-            getsubItem(
+            // getsubItem(
-              'Settlement',
+            //   'Settlement',
-              `${subDirectory}setting/Settlement`,
+            //   `${subDirectory}setting/Settlement`,
-              null,
+            //   null,
-              [
+            //   [
-                getsubItem(
+            //     getsubItem(
-                  'Tips',
+            //       'Tips',
-                  `${subDirectory}report/tipamountsettlementlist`
+            //       `${subDirectory}report/tipamountsettlementlist`
-                ),
+            //     ),
-                getsubItem(
+            //     getsubItem(
-                  'Incentive',
+            //       'Incentive',
-                  `${subDirectory}report/EmployeeSettlement`
+            //       `${subDirectory}report/EmployeeSettlement`
-                ),
+            //     ),
-              ]
+            //   ]
-            ),
+            // ),
+            getsubItem('Settlement', `${subDirectory}report/Settlement`),
             !iswarehouse &&
               getsubItem('Others', `${subDirectory}cancelReschedule`, null, [
                 getsubItem(
@@ -2401,21 +2404,22 @@ const AppPage = () => {
             ),
 
             !sportsAppPreference &&
-              getsubItem(
+              // getsubItem(
-                'Settlement',
+              //   'Settlement',
-                `${subDirectory}setting/Settlement`,
+              //   `${subDirectory}setting/Settlement`,
-                null,
+              //   null,
-                [
+              //   [
-                  getsubItem(
+              //     getsubItem(
-                    'Tips',
+              //       'Tips',
-                    `${subDirectory}report/tipamountsettlementlist`
+              //       `${subDirectory}report/tipamountsettlementlist`
-                  ),
+              //     ),
-                  getsubItem(
+              //     getsubItem(
-                    'Incentive',
+              //       'Incentive',
-                    `${subDirectory}report/EmployeeSettlement`
+              //       `${subDirectory}report/EmployeeSettlement`
-                  ),
+              //     ),
-                ]
+              //   ]
-              ),
+              // ),
+              getsubItem('Settlement', `${subDirectory}report/Settlement`),
             !iswarehouse &&
               getsubItem('Others', `${subDirectory}cancelReschedule`, null, [
                 getsubItem(

src/Pages/Automated Reorder/AutomatedReorder.jsx

@@ -397,10 +397,11 @@ const AutomatedReorder = ({ formType = 'add' }) => {
                   },
                 ]}
               > 
+              
                 <DropDowns
                   label={<label className="required">Product</label>}
                   options={products?.map((item) => ({
-                    label: item?.ProdName,
+                    label: `${item?.ProdName} (${item?.UOMName})`,
                     value: item?.ProdId,
                     variantDtls: item?.ProdVariantPriceDetails,
                     CheapestStatus: item?.CheapestStatus,

src/Pages/Automated Reorder/AutomatedReorderList.jsx

@@ -79,6 +79,9 @@ const AutomatedReorderList = () => {
             title: 'Product Name',
             dataIndex: 'ProdName',
             key: 'ProdName',
+             render: (_, record) => (
+             `${record.ProdName} (${record.UOMName})`
+               )
         },
         {
             title: 'Supplier',

src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx

@@ -95,6 +95,7 @@ import { Radio } from 'antd';
 import ReprintPDFDataShare from './ReprintPDFDataShare.jsx';
 import { ImShare } from 'react-icons/im';
 import EmailModel from '../../UtillComponents/EmailModel.jsx';
+import dayjs from "dayjs";
 
 const RetailApiurl = import.meta.env.ENV_API_URL;
 
@@ -1439,6 +1440,9 @@ function BSReprint({ setOpenModel = () => { } }) {
   const typeChange = (e) => {
     setType(e.target.value);
   };
+  const disabledDate = (current) => {
+    return current && current > dayjs().endOf("day");
+  };
 
   return (
     <>
@@ -1492,8 +1496,9 @@ function BSReprint({ setOpenModel = () => { } }) {
           <div>
             <RangePicker
               placeholder={['Start Date', 'End Date']}
-              format="YYYY-MM-DD"
+              format="DD-MM-YYYY"
               onChange={handleDateChange}
+              disabledDate={disabledDate}
             />
           </div>
           <div className="bsreprintmodaltable-search">

src/Pages/BookingScreen/Components/UtillComponents/SalesDetailsNetAmountModal.jsx

@@ -187,7 +187,8 @@ const SalesDetailsModal = ({ isModalOpen = false,
 const SalesNetAmountModal = ({
     isNetAmtModalOpen = false,
     setIsNetAmtModalOpen = () => { },
-    orderDetails = []
+    orderDetails = [],
+    RefundAmt
 }) => {
     return (
         <DefaultModal
@@ -244,6 +245,17 @@ const SalesNetAmountModal = ({
                             >
                                 Business UPI
                             </th>
+                            <th
+                                rowSpan="2"
+                                style={{
+                                    border: '1px solid #ddd',
+                                    padding: '10px',
+                                    backgroundColor: '#055ec0',
+                                    color: '#fff',
+                                }}
+                            >
+                                Refund Amt
+                            </th>
                             <th
                                 rowSpan="2"
                                 style={{
@@ -296,7 +308,7 @@ const SalesNetAmountModal = ({
                                 (item.CashAmount || 0) +
                                 (item.UpiAmount || 0) +
                                 (item.CardAmount || 0) +
-                                (item.CreditAmount || 0);
+                                (item.CreditAmount || 0) ;
 
                             return (
                                 <tr
@@ -403,6 +415,17 @@ const SalesNetAmountModal = ({
                                     >
                                         {item.BusinessUpiAmount}
                                     </td>
+                                    <td
+                                        style={{
+                                            border: '1px solid #ddd',
+                                            padding: '8px',
+                                            fontWeight: '700',
+                                            // backgroundColor: '#eaf6ea',
+                                            // color: '#2e7d32',
+                                        }}
+                                    >
+                                        {RefundAmt}
+                                    </td>
                                     <td
                                         style={{
                                             border: '1px solid #ddd',
@@ -412,7 +435,7 @@ const SalesNetAmountModal = ({
                                             color: '#2e7d32',
                                         }}
                                     >
-                                        {total}
+                                        {total-RefundAmt}
                                     </td>
                                 </tr>
                             );

src/Pages/BookingScreen/Template/SalesCountComponent.jsx

@@ -65,7 +65,8 @@ const SalesCountComponent = React.memo(
     // Destructure to simplify access to required values
     console.log(
       BookingNavbar,
-      'BookingNavbarBookingNavbar'
+      'BookingNavbarBookingNavbar',
+      GlobalsalesDetailData
     );
 
     const {
@@ -81,6 +82,7 @@ const SalesCountComponent = React.memo(
       SelfTakeAwayAmount,
       SelfDineInAmount,
       PreOrderAmount,
+     RefundAmt
     } = GlobalsalesDetailData.length > 0 ? GlobalsalesDetailData[0] : {};
 
     const dispatch = useDispatch();
@@ -91,7 +93,7 @@ const SalesCountComponent = React.memo(
     const templateData = useSelector(getTemplateData);
     const preferencedata = useSelector(PreferenceData);
 
-    console.log(preferencedata, 'preferencedatasalescount');
+    console.log(dailySalesData, 'preferencedatasalescount');
     const bookingTypePreference = appPreferences?.find(
       (preference) => preference?.PreferredCatName === 'Booking Type'
     )?.PreferenceCatDetails;
@@ -686,6 +688,7 @@ const SalesCountComponent = React.memo(
               isNetAmtModalOpen={isNetAmtModalOpen}
               setIsNetAmtModalOpen={setIsNetAmtModalOpen}
               orderDetails={orderDetails}
+              RefundAmt={RefundAmt}
             />
             <Tooltip title="Receive Stock">
               {TableData?.length > 0 && AutoReceiveStock && (

src/Pages/EmpMaster/EmpMasterForm.jsx

@@ -55,7 +55,7 @@ const EmployeeForm = ({ formType }) => {
   const [brId, setBrId] = useState(getSession('BranchId'));
   const [AppId, setAppId] = useState(getSession('AppId'));
   const [AdminUserId, setAdminUserId] = useState(getSession('UserId'));
-  const [ImageUrl, setImageUrl] = useState(null);
+  const [ProfileImageUrl, setProfileImageUrl] = useState(null);
   const [EmpTypeDropDownData, setEmpTypeDropDownData] = useState([]);
   const [seletedEmpTypeDrop, setseletedEmpTypeDrop] = useState(null);
   const [EmpDesgDropDownData, setEmpDesgDropDownData] = useState([]);
@@ -132,8 +132,8 @@ const EmployeeForm = ({ formType }) => {
     postData['EmpDOJ'] = moment(SelectedDate).format('YYYY-MM-DD');
     postData['BranchId'] = brId;
     postData['MobileAppAccess'] = SelectedMobApp ? SelectedMobApp : 'N';
-    postData['EmpPhotoLink'] = ImageUrl
+    postData['EmpPhotoLink'] = ProfileImageUrl
-      ? ImageUrl
+      ? ProfileImageUrl
       : 'https://api.pozo.app/pozo-common-image-api/upload?fileId=655c9e25fe20def9916edf1f.png';
     //  postData["Description"]=form?.getFieldValue("coachQualifications"),
     //  postData["Certification"]=form?.getFieldValue("coachQualifications"),
@@ -143,8 +143,8 @@ const EmployeeForm = ({ formType }) => {
     //   "Experience": form?.getFieldValue("coachExperience"),
     postData['ImageDetails'] =
       (imageUrls || [])
-        .filter((item) => item && (item.image || item.name))
+        ?.filter((item) => item && (item.image || item.name))
-        .map((item, index) => ({
+        ?.map((item, index) => ({
           ImageUrl: item.image || '',
           ImageType: item.name || '',
           // ImageType: "Coach",
@@ -202,9 +202,17 @@ const EmployeeForm = ({ formType }) => {
           setseletedEmpDeptDrop(editstate?.EmpDept);
           setseletedShiftDrop(editstate?.EmpShiftId);
           setSelectedDate(editstate?.EmpDOJ);
-          setImageUrl(editstate?.EmpPhotoLink);
+          setProfileImageUrl(editstate?.EmpPhotoLink);
           setSelectedLatitude(editstate?.Latitude);
           setSelectedLongitude(editstate?.Longitude);
+          if (editstate?.ImageDetails?.length > 0) {
+            setImageUrls(
+              editstate.ImageDetails.map((img) => ({
+                image: img.ImageUrl || '',
+                name: img.ImageType || '',
+              }))
+            );
+          }
           formRef.current?.setFieldsValue({
             EmpDOJ: moment(editstate?.EmpDOJ),
           });
@@ -245,8 +253,6 @@ const EmployeeForm = ({ formType }) => {
       };
       return copy;
     });
-
-    setImageUrl(url);
   };
 
   const updateImageName = (name, index = 0) => {
@@ -672,7 +678,7 @@ const EmployeeForm = ({ formType }) => {
   //   seletedEmpTypeDrop
 
   const updateImageUrl = (url) => {
-    setImageUrl(url);
+    setProfileImageUrl(url);
   };
 
   const selectValue = async (e) => {
@@ -1242,7 +1248,7 @@ const EmployeeForm = ({ formType }) => {
                                 formType === 'edit'
                                   ? editstate?.EmpPhotoLink
                                   : formRef.current?.getFieldsValue()
-                                      ?.UserImage || ImageUrl;
+                                      ?.UserImage || ProfileImageUrl;
                               // Always return a string
                               return typeof link === 'string' ? link : '';
                             })()}
@@ -1624,11 +1630,10 @@ const EmployeeForm = ({ formType }) => {
                             }
                           />
                         </Form.Item>
-
                         <div className="sports-masterimage">
-                          {Array.from({
+                          {Array?.from({
-                            length: Math.max(1, imageUrls.length),
+                         length: Math.max(1, (imageUrls ?? []).length),
-                          }).map((_, idx) => (
+                           })?.map((_, idx) =>  (
                             <div key={idx} style={{ marginBottom: 12 }}>
                               <div style={{ width: 'max-content' }}>
                                 <CropUpload

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}

src/Pages/Reports/Revenue/RevenueItemWiseReport.jsx

@@ -35,23 +35,17 @@ const RevenueItemWiseReport = () => {
   const formattedToday = today.toISOString()?.split('T')[0];
   const dispatch = useDispatch();
   const formRef = useRef();
-  // const [filteredInfo, setFilteredInfo] = useState({});
   const [sortedInfo, setSortedInfo] = useState({});
-  // const [sortedInfo2, setSortedInfo2] = useState({});
   const [searchedText, setSearchedText] = useState('');
-  // const [searchedText2, setSearchedText2] = useState("");
   const [OrderFromDate, setOrderFromDate] = useState(formattedToday);
   const [OrderToDate, setOrderToDate] = useState(formattedToday);
   const [RevenueData, setRevenueData] = useState();
-  // const [CateWiseData, setCateWiseData] = useState();
   const [userDropDown, setuserDropDown] = useState([]);
-  // const [chartData, setchartdata] = useState([]);
   const [apiCall, setapiCall] = useState(false);
   const [chart, setchart] = useState(false);
 
   const [selectedUserData, setSelectedUserData] = useState(null);
   const [receiptTextItemWise, setreceiptTextItemWise] = useState();
-  // const [receiptTextCatWise, setreceiptTextCatWise] = useState()
   const SettingDataSelector = useSelector(PreferenceData);
 
   const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
@@ -174,32 +168,11 @@ const RevenueItemWiseReport = () => {
     fetchInitialData();
   }, []);
 
-  // useEffect(() => {
-  //     setchart(false)
-  // }, [apiCall]);
   useEffect(() => {
     if (UserRole != 'Employee') {
       userDropData();
     }
   }, []);
-  // useEffect(() => {
-  //     if (apiCall) {
-  //         setSelectedUserData(0);
-  //         fetchCatData();
-  //     }
-  //     else {
-
-  //         setSelectedUserData(0);
-  //         fetchInitialData();
-
-  //     }
-  // }, [apiCall]);
-  // useEffect(() => {
-  //   if (UserId==0){
-  //     onFinish();
-  //   }
-  // }, []);
-
   function safeRound(amountStr) {
     if (amountStr == null) return allowDecimal ? '0.00' : '0';
 
@@ -211,28 +184,6 @@ const RevenueItemWiseReport = () => {
     return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
   }
 
-  // const fetchCatData = async () => {
-  //     let data1 = {
-  //         CompId: CompId,
-  //         BranchId: BranchId,
-  //         AppId: AppId,
-  //         OrderFromDate: OrderFromDate?.split("T")?.[0],
-  //         OrderToDate: OrderToDate?.split("T")?.[0],
-  //         UserId: 0,
-  //         type: 'PE'
-
-  //     };
-
-  //     let response = await dispatch(getEstimateCatItemWiseReport(data1)).unwrap();
-  //     if (response?.data?.statusCode == 1) {
-  //         setCateWiseData(response?.data?.data)
-
-  //     }
-  //     else {
-
-  //         setCateWiseData();
-  //     }
-  // }
   const userDropData = async () => {
     const gettinguserDropDown = await dispatch(
       UserDataBasedOnBranchId(BranchId)
@@ -268,27 +219,14 @@ const RevenueItemWiseReport = () => {
     setFilteredInfo(filters);
     setSortedInfo(sorter);
   };
-  // const handleChange2 = (pagination, filters, sorter) => {
-  //     setSortedInfo2(sorter);
-  // };
-
-  // const onComplete = useCallback(() => {
-  //   setMessageData(null);
-  //   setMessageType(null);
-  // }, [])
 
   const onSearch = (value) => {
-    setSearchedText(value);
+    setSearchedText(typeof value === "string" ? value : "");
   };
+
   const onSearchChange = (e) => {
-    setSearchedText(e?.target?.value);
+    setSearchedText(e?.target?.value || "");
   };
-  // const onSearch2 = (value) => {
-  //     setSearchedText2(value);
-  // };
-  // const onSearchChange2 = (e) => {
-  //     setSearchedText2(e?.target?.value);
-  // };
   const Print = async () => {
     if (isMobile) {
       if (MobileA4Print) {
@@ -426,45 +364,7 @@ const RevenueItemWiseReport = () => {
       },
     },
   ];
-  // const columns2 = [
-  //     {
-  //         title: "SI NO",
-  //         dataIndex: "SINO",
-  //         key: "SINO",
-  //         align: "center",
-  //         render: (text, object, index) => <a style={{ color: "black" }}>{index + 1}</a>,
-  //     },
-  //     {
-  //         title: "Category",
-  //         dataIndex: "ProdCatName",
-  //         key: "Category",
-  //         filteredValue: [searchedText2],
-  //         onFilter: (value, record) => {
-  //             return String(record.ProdCatName)
-  //                 ?.toLowerCase()
-  //                 ?.includes(value?.toLowerCase());
-  //         },
-  //         sorter: (a, b) => a?.ProdCatName?.localeCompare(b?.ProdCatName),
-  //         sortOrder: sortedInfo2.columnKey === "ItemName" ? sortedInfo2.order : null,
-  //         ellipsis: true,
-  //     },
-  //     {
-  //         title: "Qty",
-  //         dataIndex: "SalesQty",
-  //         key: "Qty",
-  //         align: "right",
-  //     },
-  //     {
-  //         title: "Amount",
-  //         dataIndex: "TotalAmt",
-  //         key: "Amount",
-  //         align: "right",
-  //          render : (text)=> (
-  //             <span style={{ color: "black" }}>{safeRound(text)}</span>
-  //         )
-  //     }
 
-  // ];
   const DateWisTableData = RevenueData?.map((item, index) => ({
     SINO: index + 1,
     ItemName:
@@ -511,40 +411,16 @@ const RevenueItemWiseReport = () => {
         UserId: UserId,
         type: 'E',
       };
-      // let data1 = {
-      //     CompId: CompId,
-      //     BranchId: BranchId,
-      //     AppId: AppId,
-      //     OrderFromDate: OrderFromDate?.split("T")?.[0],
-      //     OrderToDate: OrderToDate?.split("T")?.[0],
-      //     UserId: UserId,
-      //     type: 'E'
-      // };
       if (!apiCall) {
         let Response = await dispatch(getRevenueItemWiseReport(data)).unwrap();
         setRevenueData(Response?.data?.data);
       }
-      // else {
+
-      //     let response = await dispatch(getEstimateCatItemWiseReport(data1)).unwrap();
-      //     if (response?.data?.statusCode === 1) {
-      //         setCateWiseData(response?.data?.data)
-      //     } else {
-      //         // setMessageType("warning");
-      //         // setMessageData("No Data Found");
-      //         setCateWiseData();
-      //     }
-      // }
     } catch (error) {
       console.error('An error occurred:', error);
     }
   };
 
-  // let filterRate1 = CateWiseData?.map((item) => item.TotalAmt);
-  // const TotalAmount2 = filterRate1?.reduce(
-  //     (accumulator, currentValue) => accumulator + currentValue,
-  //     0
-  // );
-
 
   let filterPurchaseRate = RevenueData?.map((item) => item.ProductPurchaseRate);
   const PurchaseRate = filterPurchaseRate?.reduce(
@@ -562,10 +438,6 @@ const RevenueItemWiseReport = () => {
 
   const TotalSalesAmt = salesRate - PurchaseRate;
 
-  // const onChange = (checked) => {
-  //     setapiCall(checked);
-  // };
-
   const reprintDate = (date) => {
     const salesDate = new Date(date);
     const formattedDate = salesDate.toLocaleDateString('en-GB', {
@@ -582,58 +454,6 @@ const RevenueItemWiseReport = () => {
     }
   }, [itemData]);
 
-  // useEffect(() => {
-  //     if (CateWiseData?.length > 0) {
-  //         mobileCatWisePrintFun(CateWiseData)
-  //     }
-
-  // }, [CateWiseData])
-
-  // const mobileCatWisePrintFun = async (printdata) => {
-
-  //     let Tabledata = printdata?.map((data, index) => {
-
-  //         const snoSpacing = Math.max(0, 3 - String(index + 1).length);
-  //         // Calculate dynamic spacing for Rate
-  //         const QtySpacing = Math.max(0, 5 - String(data?.SalesQty).length);
-  //         const rateSpacing = Math.max(0, 7 - String(data?.TotalAmt).length);
-
-  //         // Calculate dynamic spacing for TotalAmt
-
-  //         // Generate formatted string with dynamic spacings
-  //         const formattedString =
-  //             " ".repeat(snoSpacing) +
-  //             parseInt(index + 1) +
-  //             "  " +
-  //             (data?.ProdCatName + " ".repeat(20)).substring(0, 20) +
-
-  //             " " +
-  //             " ".repeat(QtySpacing) + String(data?.SalesQty) +
-  //             "  " +
-  //             " ".repeat(rateSpacing) + String(data?.TotalAmt) +
-  //             " " + "\n";
-
-  //         return formattedString;
-  //     });
-
-  //     var receiptTextdata =
-
-  //         "[C]<b><font size='big'>" + "Category Wise Sales" + "</font></b>\n" +
-  //         "[L]<b>From Date :" + reprintDate(OrderFromDate) +
-  //         "[L]<b>" + "   " + "To Date :" + reprintDate(OrderToDate) +
-  //         "</b>\n" +
-  //         "[C]------------------------------------------------\n" +
-
-  //         "[L]<b>" + "" + "S.No" + "   " + "  Category        " + " " + "Quantity " + "  " + "Amount " + "" + "</b>" +
-  //         "[L]\n" +
-  //         "[C]------------------------------------------------\n" +
-  //         Tabledata.join("") +
-  //         "[C]<b>------------------------------------------------</b>\n" +
-  //         "[R]<b>" + "TotalAmount:" + parseFloat(TotalAmount).toFixed(2) + "</b>\n" +
-  //         "[L]<b>------------------------------------------------</b>\n"
-
-  //     setreceiptTextCatWise(receiptTextdata)
-  // }
 
   const mobileItemWisePrintFun = async (printdata) => {
     let Tabledata = printdata?.map((data, index) => {
@@ -701,7 +521,7 @@ const RevenueItemWiseReport = () => {
     return allowDecimal ? parseFloat(value || 0).toFixed(2) : Math.round(value || 0);
   };
   const getPreference = async () => {
-    const data = { AppId: AppId, CompId: CompId, BranchId: BranchId,UserId: UserId };
+    const data = { AppId: AppId, CompId: CompId, BranchId: BranchId, UserId: UserId };
     const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
     const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
     if (decimalSetting) {
@@ -721,12 +541,6 @@ const RevenueItemWiseReport = () => {
           TotalSalesAmt={TotalSalesAmt}
           RevenueData={RevenueData}
         />
-        {/* <CategoryWiseReportPdf
-                    OrderFromDate={OrderFromDate?.split("T")?.[0]}
-                    OrderToDate={OrderToDate?.split("T")?.[0]}
-                    TotalAmount={TotalAmount2}
-                    itemData={CateWiseData}
-                /> */}
       </div>
 
       <div style={{ overflow: "auto" }}>
@@ -735,57 +549,6 @@ const RevenueItemWiseReport = () => {
           <p className="ItemWiseReport-heading">Gross Margin</p>
           <div className="ItemWiseReport-dateaAnd-buttons">
             <div className="ItemWiseReport-Date-picker">
-              {/* <div className="ItemWiseReport-DateFrom">
-                <div className="ItemWiseReport-Date">
-                  <p className="ItemWiseReport-Date-from-heading required">
-                    From Date
-                  </p>
-                </div>
-                <Form.Item
-                  name="Fromdate"
-                  rules={[
-                    {
-                      required: true,
-                      pattern: /^(?!\s*$).+/,
-                      message: 'Please Enter the From Date ',
-                    },
-                  ]}
-                >
-                  <DatePicProd
-                    onChange={OrderFromDatefetch}
-                    // style={{ width: "24vw", height: "2.6rem" }}
-                    valueData={OrderFromDate}
-                    canSelectPast={true}
-                    cancelFuture={true}
-                  />
-                </Form.Item>
-              </div>
-
-              <div className="ItemWiseReport-DateTo">
-                <div className="ItemWiseReport-Date">
-                  <p className="required">To Date</p>
-                </div>
-
-                <Form.Item
-                  name="Todate"
-                  rules={[
-                    {
-                      required: true,
-                      pattern: /^(?!\s*$).+/,
-                      message: 'Please Enter the To Date ',
-                    },
-                  ]}
-                >
-                  <DatePicProd
-                    onChange={OrderToDatefetch}
-                    // style={{ width: "24vw", height: "2.6rem" }}
-                    valueData={OrderToDate}
-                    canSelectPast={true}
-                    cancelFuture={true}
-                    minDate={OrderFromDate}
-                  />
-                </Form.Item>
-              </div> */}
               <Form.Item
                 name="dateRange"
               >
@@ -863,59 +626,20 @@ const RevenueItemWiseReport = () => {
                       />
                     </Tooltip>
                   </div>
-                  {/* <div className="ItemWiseReport-PrinterIcon-Container">
+
-                                        <Tooltip title="Print">
-                                            {!apiCall ? <BiSolidPrinter
-                                                onClick={Print}
-                                                className={
-                                                    itemData?.length > 0
-                                                        ? "ItemWiseReport-printerIcon"
-                                                        : "ItemWiseReport-printerIcon-disabled"
-                                                }
-                                            /> :
-                                                <BiSolidPrinter
-                                                    onClick={Print2}
-                                                    className={
-                                                        CateWiseData?.length > 0
-                                                            ? "ItemWiseReport-printerIcon"
-                                                            : "ItemWiseReport-printerIcon-disabled"
-                                                    }
-                                                />}
-                                        </Tooltip>
-                                    </div> */}
                   <div className="ItemWiseReport-search">
-                    {!apiCall ? (
+                    <Search
-                      <Search
+                      placeholder="Search by Item Name"
-                        placeholder="Search by Item Name"
+                      onSearch={onSearch}
-                        onSearch={onSearch}
+                      onSearchChange={onSearchChange}
-                        onSearchChange={onSearchChange}
+                    />
-                      />
-                    ) : !chart ? (
-                      <Search
-                        placeholder="Search"
-                        onSearch={onSearch2}
-                        onSearchChange={onSearchChange2}
-                      />
-                    ) : (
-                      ''
-                    )}
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          {/* {apiCall && <div className="toggle">
-                        <p> PieChart</p>&nbsp; <Switch onChange={openChart} />   &nbsp;  <p> TableData</p>
-                    </div>} */}
 
           <div className="ItemWiseReport-table1">
-            {/* <Tables
-              columns={columns}
-              data={itemData}
-              dataSource={itemData}
-              onChange={handleChange}
-                        /> */}
-
             <table className="custom-table">
               <thead>
                 <tr>
@@ -929,16 +653,17 @@ const RevenueItemWiseReport = () => {
               </thead>
               <tbody>
                 {itemData &&
-                  itemData
+                  (itemData || [])
-                    .filter(
+                    .filter((row) => {
-                      (row) =>
+                      const search = (searchedText || "").toLowerCase();
-                        !searchedText ||
+
+                      return (
+                        !search ||
                         (row.ItemName &&
-                          row.ItemName?.toLowerCase()?.includes(
+                          row.ItemName.toLowerCase().includes(search))
-                            searchedText?.toLowerCase()
+                      );
-                          ))
+                    })
-                    )
+                    ?.sort((a, b) => {
-                    .sort((a, b) => {
                       if (sortedInfo.columnKey === 'ItemName') {
                         return sortedInfo.order === 'ascend'
                           ? a.ItemName?.localeCompare(b.ItemName)
@@ -946,7 +671,7 @@ const RevenueItemWiseReport = () => {
                       }
                       return 0;
                     })
-                    .map((row, idx) => (
+                    ?.map((row, idx) => (
                       <tr key={idx}>
                         <td style={{ textAlign: 'center' }}>{idx + 1}</td>
                         <td style={{ textAlign: 'left' }}>{row.ItemName}</td>
@@ -994,30 +719,10 @@ const RevenueItemWiseReport = () => {
               </tbody>
             </table>
           </div>
-          {/* <div className="ItemWiseReport-table">
-                        {!apiCall ? <Tables
-                            columns={columns}
-                            data={itemData}
-                            // dataSource={itemData}
-                            onChange={handleChange}
-                        /> : !chart ? (<Tables
-                            columns={columns2}
-                            data={chartData}
-                            // dataSource={itemData}
-                            onChange={handleChange2}
-                        />
-
-                        ) : (<DynamicPieChart chartData={chartData} />)
-                        }
-                    </div> */}
           <div
             className="ItemWiseReport-netAmount"
             style={{ margin: '2rem 1.5rem' }}
           >
-            {/* {apiCall && chart ? null : (
-                            <h3> Net Amount: {!apiCall ? TotalAmount : (!chart ? TotalAmount2 : "")}</h3>
-                        )} */}
-
             {!apiCall ? (
               <div className="ItemWiseReport-Amount-Collected-table">
                 <table className="ItemWiseReport-Amount-Collected-table-div">
@@ -1030,15 +735,6 @@ const RevenueItemWiseReport = () => {
                       <td>Sales Rate</td>
                       <td>{safeRound(salesRate)}</td>
                     </tr>
-                    {/* {RevenueData?.[0]?.OverallDisc > 0 && <tr>
-                                            <td>Discount Amount</td>
-                                            <td>{RevenueData?.[0]?.OverallDisc}</td>
-                                        </tr>}
-
-                                        {RevenueData?.[0]?.TaxAmt > 0 && <tr>
-                                            <td>Total Tax</td>
-                                            <td>{RevenueData?.[0]?.TaxAmt}</td>
-                                        </tr>} */}
                     <p className="ItemWiseReport-border-dashed"></p>
                     <tr>
                       <th className="ItemWiseReport-netAmount">
@@ -1093,11 +789,6 @@ const RevenueItemWiseReport = () => {
               )
             )}
           </div>
-          {/* <div className="ItemWiseReport-netAmount">
-                        {apiCall && chart ? null : (
-                            <h3> Net Amount: {!apiCall ? TotalAmount : (!chart ? TotalAmount2 : "")}</h3>
-                        )}
-                    </div> */}
         </Form>
       </div>
     </div>

src/Pages/Reports/TipAmountSettlement/Settlement.jsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Messages } from "../../../Components/Notifications/Messages";
+import TipAmountSettlementList from "./TipAmountSettlementList";
+import EmployeeSettlement from "../EmployeeSettlement/EmployeeSettlement";
+import "./Settlement.scss"; 
+
+const Settlement = () => {
+  const [selectedComponent, setSelectedComponent] = useState("tips");
+
+  const messageType = "";
+  const messageData = [];
+  const onComplete = () => {};
+
+  return (
+    <div className="userPageTable">
+      <div className="userPageContent">
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+
+        {/* ✅ Tabs */}
+        <div className="formAddNew">
+          <div className="settlementTabs">
+            
+            <div
+              className={`tabItem ${
+                selectedComponent === "tips" ? "active" : ""
+              }`}
+              onClick={() => setSelectedComponent("tips")}
+            >
+              Tip Settlement
+            </div>
+
+            <div
+              className={`tabItem ${
+                selectedComponent === "insentive" ? "active" : ""
+              }`}
+              onClick={() => setSelectedComponent("insentive")}
+            >
+              Incentive Settlement
+            </div>
+
+          </div>
+        </div>
+
+        {/* ✅ Content */}
+        <div className="tabContent">
+          {selectedComponent === "tips" ? (
+            <TipAmountSettlementList />
+          ) : (
+            <EmployeeSettlement />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settlement;

src/Pages/Reports/TipAmountSettlement/Settlement.scss

@@ -0,0 +1,35 @@
+/* Container for tabs */
+.settlementTabs {
+    display: inline-flex;
+    gap: 16px;
+    font-family: "Poppins";
+    margin-bottom: 12px;
+    border-bottom: 1px solid #d1d5db;
+
+}
+
+/* Default tab style */
+.tabItem {
+    font-size: 22px;
+    font-weight: 600;
+    cursor: pointer;
+    color: #6b7280;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    position: relative;
+    border: none;
+    background: transparent;
+    font-family: "Gilroy";
+    transition: color 0.2s ease;
+}
+
+.tabItem.active {
+    color: #0f172a;
+    border-bottom: 2px solid #1296db !important;
+}
+
+.tabContent {
+    margin-top: 20px;
+}
+ 

src/Pages/Reports/TipAmountSettlement/TipAmountSettlementList.jsx

@@ -444,9 +444,9 @@ const TipAmountSettlementList = () => {
     <div
       style={{ padding: '0px', width: '99%', overflow: 'auto', height: '90vh' }}
     >
-      <div style={{ marginBottom: '10px' }}>
+      {/* <div style={{ marginBottom: '10px' }}>
-        <FormHeader title={'Tip Amount Setlement'} />
+        <FormHeader title={'Tip Amount Settlement'} />
-      </div>
+      </div> */}
       <Messages
         messageType={messageType}
         messageData={messageData}
@@ -499,7 +499,6 @@ const TipAmountSettlementList = () => {
               <Col>
                 <Form.Item
                   name="dateRange"
-                  label="Date Range"
                   style={{ marginBottom: '8px' }}
                   rules={[{ type: 'array', required: true, message: 'Please select date range' }]}
                 >

src/routesConfig.jsx

@@ -552,6 +552,9 @@ const TipAmountSettlementList = lazy(
 const EmployeeSettlement = lazy(
   () => import('./Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx')
 );
+const Settlement = lazy(
+  () => import ('./Pages/Reports/TipAmountSettlement/Settlement.jsx')
+);
 const PublicQrCode = lazy(() => import('./Pages/Reports/PublicQrCode.jsx'));
 
 const TableMapping = lazy(
@@ -684,7 +687,7 @@ const initSession = () => {
 
   sessionStorage.setItem(
     'auth',
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzczNDI3NTExLCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.Elg8MMqbF4nMYwcWgzrxVaLfYhxdx3drixoV83RbuAM'
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiODA3MjMyOTE1MyIsIlBhc3N3b3JkIjoiWkB6MTIzNCIsImF1ZCI6WyJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTIiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTQiLCJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMTMiXSwiZXhwIjoxNzc0Mzc5NTY2LCJpc3MiOiJodHRwOi8vMTkyLjE2OC4xLjM3OjgwMDEifQ.uTdcz-FHE4GTux7FTtT2pQt9gEe-17_mIrwJWbHdHE8'
   );
 };
 
@@ -865,16 +868,22 @@ export const routesConfig = [
         component: MenuQRCode,
         empAccess: 'MenuQRCode',
       },
+      // {
+      //   path: 'tipamountsettlementlist',
+      //   component: TipAmountSettlementList,
+      //   empAccess: 'Tips',
+      // },
+      // {
+      //   path: 'EmployeeSettlement',
+      //   component: EmployeeSettlement,
+      //   empAccess: 'Incentive',
+      // },
       {
-        path: 'tipamountsettlementlist',
+        path: 'Settlement',
-        component: TipAmountSettlementList,
+        component: Settlement,
-        empAccess: 'Tips',
+        empAccess: 'Settlement',
-      },
-      {
-        path: 'EmployeeSettlement',
-        component: EmployeeSettlement,
-        empAccess: 'Incentive',
       },
+
       {
         path: 'datewisereport',
         component: DateWiseReport,