Merge pull request 'Responsive masters' (#123) from Feb10Res into main

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

src/Pages/Preference/PreferenceList.jsx

@@ -65,7 +65,7 @@ const PreferenceList = () => {
 
   const buildInitialValues = () => ({
     dashboard: allSettingsMap['dashboard'] === 'Y',
-    shortcutkeys:allSettingsMap['shortcutkeys']==="Y",
+    shortcutkeys: allSettingsMap['shortcutkeys'] === 'Y',
     autoreceivestock: allSettingsMap['autoreceivestock'] === 'Y',
     decimal: allSettingsMap['decimal'] === 'Y',
     enabledModules: [
@@ -749,7 +749,6 @@ const PreferenceList = () => {
                 'estimateprintheader',
                 'Do you want to include a header when printing Estimate bills?'
               )}
-
             </div>
             <div className="PreferencesBTN">
               <Buttons

src/Pages/Preference/PreferenceList.scss

@@ -99,6 +99,14 @@
     &:hover {
       background-color: #c0cbf8;
     }
+    @media (max-width: 500px) {
+      border: none !important;
+      text-decoration: none !important;
+      font-style: unset !important;
+    }
+  }
+  @media (max-width: 500px) {
+    overflow: auto;
   }
 }
 

src/Pages/Product/ProductForm.jsx

@@ -537,9 +537,12 @@ const ProductForm = ({ formType }) => {
 
   useEffect(() => {
     if (
-      AppId !== undefined && AppId !== null &&
+      AppId !== undefined &&
-      CompId !== undefined && CompId !== null &&
+      AppId !== null &&
-      BranchId !== undefined && BranchId !== null
+      CompId !== undefined &&
+      CompId !== null &&
+      BranchId !== undefined &&
+      BranchId !== null
     ) {
       productFetchData();
       fetchRackData();
@@ -2136,6 +2139,7 @@ const ProductForm = ({ formType }) => {
               initialValues={
                 editstate || { LowStockCount: 0, ExpiryNotificationDays: 0 }
               }
+              style={{ marginTop: '0' }}
             >
               <div className="formDivS">
                 <div className="productinputForm">
@@ -2174,26 +2178,12 @@ const ProductForm = ({ formType }) => {
                       />
                     </Form.Item>
                   </div>
-                  {/* </Form> */}
  
-                  {/* </div> */}
-                  {/* <div className="formDiv">
-
-            <Form
-              ref={formRef}
-              className="formDivAnt"
-              onFinish={onFinish}
-              initialValues={
-                editstate || { LowStockCount: 0, ExpiryNotificationDays: 0 }
-              }
-            >
-              <div className="formDivS">
-                <div className="productinputForm"> */}
 
                   {/* dhana */}
-                  <div style={{ display: 'flex' }}>
+                  <div className="ProductMainRowFlex">
                     {/* <div> */}
-                    <div className="subRowFlex">
+                    <div className="ProSubRowFlex">
                       <Form.Item
                         name="ProdName"
                         rules={[
@@ -2629,7 +2619,8 @@ const ProductForm = ({ formType }) => {
                         <div className="productonlineImg">
                           {imagedata?.map((item, index) => (
                             <div
-                              className={`singleimg ${selectedImage === item ? 'selected' : ''
+                              className={`singleimg ${
+                                selectedImage === item ? 'selected' : ''
                               }`}
                               key={index}
                               onClick={() => setSelectedImage(item)}
@@ -2977,7 +2968,7 @@ const ProductForm = ({ formType }) => {
                     <Collapse defaultActiveKey={expandCollapseActive}>
                       <Panel header="Price" key="1">
                         <div className="subColumnFlex">
-                            <div className="subRowFlex">
+                          <div className="ProSubRowFlex">
                             <Form.Item
                               name="ProdType"
                               rules={[
@@ -3767,7 +3758,7 @@ const ProductForm = ({ formType }) => {
                             {openVariant && (
                               <Form ref={formVariantRef}>
                                 <div className="subColumnFlex">
-                                    <div className="subRowFlex">
+                                  <div className="ProSubRowFlex">
                                     <Form.Item
                                       name="ProdVariantName"
                                       rules={[
@@ -4053,7 +4044,7 @@ const ProductForm = ({ formType }) => {
               buttonText="Submit"
               children={
                 <Form ref={formCategoryRef} className="formDivAnt">
-                  <div className="subRowFlex">
+                  <div className="ProSubRowFlex">
                     <div className="subColumnFlex">
                       <div>
                         <Form.Item
@@ -4116,7 +4107,7 @@ const ProductForm = ({ formType }) => {
               handleCancel={handleSubCategory}
               children={
                 <Form ref={formSubCategoryRef} className="formDivAnt">
-                  <div className="subRowFlex">
+                  <div className="ProSubRowFlex">
                     <div className="subColumnFlex">
                       <div className="subProdCatData">
                         <Form.Item
@@ -4235,7 +4226,7 @@ const ProductForm = ({ formType }) => {
               handleCancel={handleBrand}
               children={
                 <Form ref={formBrandRef} className="formDivAnt">
-                  <div className="subRowFlex">
+                  <div className="ProSubRowFlex">
                     <div className="subColumnFlex">
                       <div className="subProdCatData">
                         <Form.Item
@@ -4315,7 +4306,7 @@ const ProductForm = ({ formType }) => {
               buttonText="Submit"
               children={
                 <Form ref={formTaxRef} className="formDivAnt">
-                  <div className="subRowFlex">
+                  <div className="ProSubRowFlex">
                     <Form.Item name="TaxName">
                       <DropDowns
                         options={ProdTaxData?.map((option) => ({
@@ -4419,7 +4410,7 @@ const ProductForm = ({ formType }) => {
               onOk={handleExistsData}
               onCancel={handleExistsDataCancel}
             >
-              <div className="subRowFlex">
+              <div className="ProSubRowFlex">
                 <div className="qrExistsData">
                   <img
                     src={QrcodeExistsData?.[0]?.ProdLogo}

src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx

@@ -12,25 +12,32 @@ import {
   Row,
   Col,
   Form,
-    Modal
+  Modal,
 } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { useDispatch } from 'react-redux';
-import { getAllTipAmountSettlementList, getTipAmountSettlementList, postTipSettle } from '../../../Features/TipAmountSettlementList/TipAmountSettlementList';
+import {
+  getAllTipAmountSettlementList,
+  getTipAmountSettlementList,
+  postTipSettle,
+} from '../../../Features/TipAmountSettlementList/TipAmountSettlementList';
 import { getSession } from '../../../Services/Others';
 import { WaiterNames } from '../../../Features/Reports/Reports';
 import { Messages } from '../../../Components/Notifications/Messages';
-import { getEmployeeSettlementList, getEmployeeSettlementListindIvidually, postEmployeeSettle } from '../../../Features/EmployeeSettlement/EmployeeSettlement';
+import {
+  getEmployeeSettlementList,
+  getEmployeeSettlementListindIvidually,
+  postEmployeeSettle,
+} from '../../../Features/EmployeeSettlement/EmployeeSettlement';
 import FormHeader from '../../PageComponents/FormHeader';
 import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage';
 
-
 const { Option } = Select;
 const subDirectory = import.meta.env.BASE_URL;
 const EmployeeSettlement = () => {
   const [form] = Form.useForm();
-    const dispatch = useDispatch()
+  const dispatch = useDispatch();
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [loading, setLoading] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
@@ -45,21 +52,25 @@ const EmployeeSettlement = () => {
   const UserId = getSession('UserId');
   const [TableData, setTableData] = useState([]);
   const [employeeList, setEmployee] = useState([]); // Add this state for employee dropdown
-    const checkedTotal = checkedRows.reduce((sum, row) => sum + (Number(row?.IncentiveDetails?.[0]?.IncentiveAmount) || 0), 0);
+  const checkedTotal = checkedRows.reduce(
+    (sum, row) =>
+      sum + (Number(row?.IncentiveDetails?.[0]?.IncentiveAmount) || 0),
+    0
+  );
   const Paymentstatus = form.getFieldValue('status');
 
-    console.log(checkedRowKeys, "checkedRowKeys")
+  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`,
     },
@@ -70,23 +81,20 @@ const EmployeeSettlement = () => {
       dataIndex: 'SalesDate',
       key: 'SalesDate',
       width: 100,
-            render: (date) => date ? dayjs(date).format('DD/MM/YYYY') : '',
+      render: (date) => (date ? dayjs(date).format('DD/MM/YYYY') : ''),
     },
     {
       title: 'Tip Date',
       dataIndex: 'TipsAmount',
       key: 'TipsAmount',
       width: 100,
-            render: (item) => (
+      render: (item) => <span style={{}}>{item}</span>,
-                <span style={{}}>{item}</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);
@@ -118,26 +126,31 @@ const EmployeeSettlement = () => {
       dataIndex: 'TotalSalesAmount',
       key: 'TotalSalesAmount',
       render: (_, record) => {
-                const statusMap = { toBe: "N", already: "Y" };
+        const statusMap = { toBe: 'N', already: 'Y' };
         const value = statusMap[form.getFieldValue('status')];
-                const group = record?.StatusGroups?.find(e => e?.SettledStatus === value);
+        const group = record?.StatusGroups?.find(
+          (e) => e?.SettledStatus === value
+        );
         return <span>{group?.TotalSalesAmount ?? 0}</span>;
-            }
+      },
-        }
+    },
-        ,
     {
       title: 'IncentiveAmount',
       align: 'right',
       dataIndex: 'IncentiveAmount',
       key: 'IncentiveAmount',
       render: (_, record) => {
-                const statusMap = { toBe: "N", already: "Y" };
+        const statusMap = { toBe: 'N', already: 'Y' };
         const value = statusMap[form.getFieldValue('status')];
-                const group = record?.StatusGroups?.find(e => e?.SettledStatus === value);
+        const group = record?.StatusGroups?.find(
+          (e) => e?.SettledStatus === value
+        );
         return <span>{group?.IncentiveAmount ?? 0}</span>;
-            }
       },
-        ... (Paymentstatus !== "already") ? [{
+    },
+    ...(Paymentstatus !== 'already'
+      ? [
+          {
             title: 'Settle',
             key: 'settle',
             width: 80,
@@ -150,30 +163,43 @@ const EmployeeSettlement = () => {
                 <Checkbox
                   checked={checkedRowKeys.includes(waiterId)}
                   disabled={isDisabled}
-                        onChange={e => {
+                  onChange={(e) => {
                     if (e.target.checked) {
-                                setCheckedRowKeys(prev => prev.includes(waiterId) ? prev : [...prev, waiterId]);
+                      setCheckedRowKeys((prev) =>
-                                setCheckedRows(prev => prev.find(row => row?.EmployeeId === waiterId) ? prev : [...prev, record]);
+                        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));
+                      setCheckedRowKeys((prev) =>
-                                setCheckedRows(prev => prev.filter(row => row?.EmployeeId !== waiterId));
+                        prev.filter((key) => key !== waiterId)
+                      );
+                      setCheckedRows((prev) =>
+                        prev.filter((row) => row?.EmployeeId !== waiterId)
+                      );
                     }
                   }}
                 />
               );
             },
-        }] : [{}]
+          },
+        ]
+      : [{}]),
   ];
 
   // Handle select all checkboxes
-    const handleSelectAll = e => {
+  const handleSelectAll = (e) => {
     if (e.target.checked) {
       const allWaiterIds = groupByEmployeeAndStatus(TableData)
-                .map(emp => ({
+        .map((emp) => ({
           ...emp,
-                    StatusGroups: emp.StatusGroups.filter(g => g.SettledStatus === "N")
+          StatusGroups: emp.StatusGroups.filter((g) => g.SettledStatus === 'N'),
         }))
-                .filter(emp => emp.StatusGroups.length > 0)?.map(row => row?.EmployeeId);
+        .filter((emp) => emp.StatusGroups.length > 0)
+        ?.map((row) => row?.EmployeeId);
       setCheckedRowKeys(allWaiterIds);
       setCheckedRows(TableData.slice());
     } else {
@@ -202,10 +228,10 @@ const EmployeeSettlement = () => {
     };
     let response = await dispatch(getEmployeeSettlementList(data)).unwrap();
     if (response?.data?.statusCode === 1) {
-            setTableData(response?.data?.data?.EmployeeDetails)
+      setTableData(response?.data?.data?.EmployeeDetails);
     }
     // handle response as needed
-    }
+  };
   const fetchData = async () => {
     let data = {
       activeStatus: 'A',
@@ -217,18 +243,13 @@ const EmployeeSettlement = () => {
     if (response?.data?.statusCode === 1) {
       setEmployee(response?.data?.data);
     }
-    }
+  };
-
-
-
-
 
   const handleReset = () => {
     form.resetFields();
     setSelectedRowKeys([]);
     setFilteredData(TableData);
-        setTableData([])
+    setTableData([]);
-
   };
 
   const onFinish = async (values) => {
@@ -238,37 +259,41 @@ const EmployeeSettlement = () => {
       BranchId,
       AppId,
       ...restValues,
-            ...(Employee && Employee !== "all" && Employee !== "undefined" ? { employeeId: Employee } : {}),
+      ...(Employee && Employee !== 'all' && Employee !== 'undefined'
+        ? { employeeId: Employee }
+        : {}),
     };
-        let response
+    let response;
-        Employee !== "all" ? response = await dispatch(getEmployeeSettlementListindIvidually(data)).unwrap() : response = await dispatch(getEmployeeSettlementList(data)).unwrap()
+    Employee !== 'all'
+      ? (response = await dispatch(
+          getEmployeeSettlementListindIvidually(data)
+        ).unwrap())
+      : (response = await dispatch(getEmployeeSettlementList(data)).unwrap());
     if (response?.data?.statusCode === 1) {
-            setTableData(response?.data?.data?.EmployeeDetails)
+      setTableData(response?.data?.data?.EmployeeDetails);
 
-            const StatusValue = form.getFieldValue('status') === 'toBe' ? "N" : "Y";
+      const StatusValue = form.getFieldValue('status') === 'toBe' ? 'N' : 'Y';
 
       const employees = response?.data?.data?.EmployeeDetails ?? [];
-            const data = employees.some(e =>
+      const data = employees.some((e) =>
-                e?.IncentiveDetails?.some(a => a?.SettledStatus === StatusValue && a?.IncentiveAmount > 0)
+        e?.IncentiveDetails?.some(
+          (a) => a?.SettledStatus === StatusValue && a?.IncentiveAmount > 0
+        )
       );
       if (data) {
         setMessageType('success');
         setMessageData(response?.data?.response);
       }
-
-
-
     } else {
       setMessageType('error');
       setMessageData(response?.data?.response);
-            setTableData([])
+      setTableData([]);
     }
-
   };
 
   const handleCheckedSubmit = async () => {
     const today = dayjs();
-        const statusMap = { toBe: "N", already: "Y" };
+    const statusMap = { toBe: 'N', already: 'Y' };
     const value = statusMap[form.getFieldValue('status')]; // "N" or "Y"
 
     const postData = {
@@ -277,31 +302,31 @@ const EmployeeSettlement = () => {
       AppId,
       CreatedBy: UserId,
       EmployeeDetails: checkedRows.map((item) => {
-                const group = item?.StatusGroups?.find(g => g?.SettledStatus === value);
+        const group = item?.StatusGroups?.find(
+          (g) => g?.SettledStatus === value
+        );
 
         return {
           SettlementAmount: group?.IncentiveAmount ?? 0,
           EmployeeId: item?.EmployeeId,
           SettledPeriodDate: formatToYYYYMMDD(today),
-                    IncentiveDetails: group?.items ?? []
+          IncentiveDetails: group?.items ?? [],
         };
-            })
+      }),
     };
 
-
+    console.log(postData);
-
-        console.log(postData)
 
     let response = await dispatch(postEmployeeSettle(postData))?.unwrap();
     if (response?.data?.statusCode === 1) {
       setMessageType('success');
       setMessageData(response?.data?.response);
-            handleReset()
+      handleReset();
-            setCheckedRows([])
+      setCheckedRows([]);
     } else {
       setMessageType('error');
       setMessageData(response?.data?.response);
-            handleReset()
+      handleReset();
     }
   };
   function formatToYYYYMMDD(dateString) {
@@ -331,7 +356,7 @@ const EmployeeSettlement = () => {
   // }, [form, TableData]);
   function groupByEmployeeAndStatus(tableData) {
     return tableData
-            .map(emp => {
+      .map((emp) => {
         const grouped = emp.IncentiveDetails.reduce((acc, curr) => {
           if ((curr.IncentiveAmount || 0) === 0) {
             return acc; // skip this detail entirely
@@ -343,7 +368,7 @@ const EmployeeSettlement = () => {
               SettledStatus: status,
               TotalSalesAmount: 0,
               IncentiveAmount: 0,
-                            items: []
+              items: [],
             };
           }
           acc[status].TotalSalesAmount += curr.TotalSalesAmount || 0;
@@ -355,16 +380,14 @@ const EmployeeSettlement = () => {
         return {
           EmployeeId: emp?.EmployeeId,
           EmployeeName: emp.EmployeeName,
-                    StatusGroups: Object.values(grouped)
+          StatusGroups: Object.values(grouped),
         };
       })
-            .filter(emp => emp.StatusGroups.length > 0); // remove employees with no valid items
+      .filter((emp) => emp.StatusGroups.length > 0); // remove employees with no valid items
   }
 
-
+  let dataaaa = groupByEmployeeAndStatus(TableData);
-
+  console.log(dataaaa, 'dataaaa');
-    let dataaaa = groupByEmployeeAndStatus(TableData)
-    console.log(dataaaa, "dataaaa")
   useEffect(() => {
     setCheckedRowKeys([]);
     setCheckedRows([]);
@@ -376,51 +399,38 @@ const EmployeeSettlement = () => {
     setFilteredData([]);
   };
 
-
-
-
-
   return (
-        <div style={{
+    <div
+      style={{
         padding: '0',
-            width: "100%", height: "90%", overflow: "scroll"
+        width: '99%',
-        }}>
+        height: '90%',
-            <div style={{ marginBottom: "10px" }}>
+        overflow: 'scroll',
-                <FormHeader title={"Incentive"} />
+      }}
+    >
+      <div style={{ marginBottom: '10px' }}>
+        <FormHeader title={'Incentive'} />
       </div>
       <Messages
         messageType={messageType}
         messageData={messageData}
         onComplete={onComplete}
       />
-            <Card
-                // title="Incentive"
-                style={{
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                    borderRadius: '8px',
-                    height: "100%"
-                }}
-            >
-                <Card
-                    size="small"
-                    style={{
-                        marginBottom: '20px',
-                        backgroundColor: '#fafafa',
-                        border: '1px solid #d9d9d9',
-                        width: "72vw",
 
-                    }}
-                >
       <Form
         form={form}
         layout="inline"
         onFinish={onFinish}
         initialValues={{
           Employee: 'all',
-                            status: 'toBe'
+          status: 'toBe',
         }}
       >
-                        <Row style={{ rowGap: "1rem", flexWrap: "wrap" }} wrap={true} gutter={16} >
+        <Row
+          style={{ rowGap: '1rem', flexWrap: 'wrap' }}
+          wrap={true}
+          gutter={16}
+        >
           <Col>
             <Form.Item
               name="Employee"
@@ -430,9 +440,12 @@ const EmployeeSettlement = () => {
             >
               <Select style={{ width: 180 }}>
                 <Option value="all">All</Option>
-                                        {employeeList.map(emp => (
+                {employeeList.map((emp) => (
                   <Option key={emp.UniqueId} value={emp.UniqueId}>
-                                                {emp.EmpFirstName ? emp.EmpFirstName + (emp.EmpLastName ? ' ' + emp.EmpLastName : '') : emp.MobileNo}
+                    {emp.EmpFirstName
+                      ? emp.EmpFirstName +
+                        (emp.EmpLastName ? ' ' + emp.EmpLastName : '')
+                      : emp.MobileNo}
                   </Option>
                 ))}
               </Select>
@@ -492,50 +505,67 @@ const EmployeeSettlement = () => {
                 >
                   Search
                 </Button>
-                                        <Button onClick={handleReset}>
+                <Button onClick={handleReset}>Cancel</Button>
-                                            Cancel
-                                        </Button>
               </Space>
             </Form.Item>
           </Col>
         </Row>
       </Form>
-                </Card>
 
       {/* Data Table */}
-                {Paymentstatus !== "already" && <div style={{ marginBottom: 8, float: "right" }}>
+      {Paymentstatus !== 'already' && (
+        <div style={{ marginBottom: 8, float: 'right' }}>
           <Checkbox
-                        indeterminate={checkedRowKeys?.length > 0 && checkedRowKeys?.length < TableData?.length}
+            indeterminate={
-                        checked={TableData?.length > 0 && checkedRowKeys?.length === TableData?.length}
+              checkedRowKeys?.length > 0 &&
+              checkedRowKeys?.length < TableData?.length
+            }
+            checked={
+              TableData?.length > 0 &&
+              checkedRowKeys?.length === TableData?.length
+            }
             onChange={handleSelectAll}
           >
             Select All
           </Checkbox>
-                </div>}
+        </div>
+      )}
+      <div className="reportTable">
         <Table
           columns={columns}
-                    dataSource={form.getFieldValue('status') == "toBe" ? groupByEmployeeAndStatus(TableData)
+          dataSource={
-                        .map(emp => ({
+            form.getFieldValue('status') == 'toBe'
+              ? groupByEmployeeAndStatus(TableData)
+                  .map((emp) => ({
                     ...emp,
-                            StatusGroups: emp.StatusGroups.filter(g => g.SettledStatus === "N")
+                    StatusGroups: emp.StatusGroups.filter(
+                      (g) => g.SettledStatus === 'N'
+                    ),
                   }))
-                        .filter(emp => emp.StatusGroups.length > 0) : groupByEmployeeAndStatus(TableData).map(emp => ({
+                  .filter((emp) => emp.StatusGroups.length > 0)
+              : groupByEmployeeAndStatus(TableData)
+                  .map((emp) => ({
                     ...emp,
-                            StatusGroups: emp.StatusGroups.filter(g => g.SettledStatus === "Y")
+                    StatusGroups: emp.StatusGroups.filter(
+                      (g) => g.SettledStatus === 'Y'
+                    ),
                   }))
-                            .filter(emp => emp.StatusGroups.length > 0)
+                  .filter((emp) => emp.StatusGroups.length > 0)
           }
           loading={loading}
           scroll={{ x: 'max-content' }}
           size="middle"
           style={{ backgroundColor: 'white' }}
         />
-
+      </div>
 
       {/* Button to submit checked rows */}
 
-                <div className='incenbtivepayBTN' style={{ marginTop: 16, float: "right" }}>
+      <div
-                    <div style={{ display: "flex", gap: "1rem" }}>
+        className="incenbtivepayBTN"
+        style={{ marginTop: 16, float: 'right' }}
+      >
+        <div style={{ display: 'flex', gap: '1rem' }}>
           {/* {checkedRowKeys.length !== 0 && (
                             <input
                                 disabled
@@ -571,19 +601,20 @@ const EmployeeSettlement = () => {
 
       {/* Selected Rows Info */}
       {selectedRowKeys.length > 0 && (
-                    <div style={{
+        <div
+          style={{
             marginTop: '16px',
             padding: '8px 16px',
             backgroundColor: '#e6f7ff',
             border: '1px solid #91d5ff',
-                        borderRadius: '4px'
+            borderRadius: '4px',
-                    }}>
+          }}
+        >
           <span style={{ color: '#1890ff' }}>
             Selected {selectedRowKeys.length} items
           </span>
         </div>
       )}
-            </Card>
     </div>
   );
 };

src/Pages/StockMaster/StockList.jsx

@@ -241,7 +241,6 @@ const StockList = () => {
     if (Response?.data?.statusCode === 1) {
       return Response?.data?.data;
     } else {
-
       return [];
     }
   };
@@ -295,7 +294,6 @@ const StockList = () => {
       setpage(1);
       return Response?.data?.data;
     } else {
-
       return [];
     }
   }
@@ -991,7 +989,6 @@ const StockList = () => {
     (e) => `${e.ProdName} (${e.Size} ${e.UomName})`
   );
 
-
   const SupplierNames = SupplierData?.map((e) => e.SuppName);
 
   const TaxDatas = TaxData.map((e) => e.TaxIdName);
@@ -1006,9 +1003,6 @@ const StockList = () => {
   const InwardDtlIds = Varientdata?.map((e) => e.InwardDtlId);
   const StockProductId = Varientdata?.map((e) => e.ProdId);
 
-
-
-
   const onFinish = async () => {
     const template = barcodeTemplateDetails?.find(
       (find) => find.SessionName === dropdownValue
@@ -1164,7 +1158,7 @@ const StockList = () => {
       ? countData?.length
       : 0
     : data?.[0]?.TotalCount;
-  console.log(debouncedSearchText, countData, data, "kkkk", countOfProduct)
+  console.log(debouncedSearchText, countData, data, 'kkkk', countOfProduct);
   return (
     <div className="userPageTable">
       <div className="userPageContent">
@@ -1178,9 +1172,10 @@ const StockList = () => {
             <FormHeader title={'Product Receipt'} />
           </div>
           <div
-            className="searchAddDiv"
+            className="StocklistsearchAddDiv"
-            style={{ justifyContent: 'flex-start' }}
+            style={{ justifyContent: 'flex-start', flexWrap: 'wrap' }}
-          ><Tooltip title="Search using Invoice No,Supp Name">
+          >
+            <Tooltip title="Search using Invoice No,Supp Name">
               <div className="formSearch" style={{ Width: '200px' }}>
                 <Search
                   placeholder="Search by Invoice No"
@@ -1393,7 +1388,9 @@ const StockList = () => {
           generateQRCodeCopy={(code) =>
             generateQRCodeCopy(QrandbarcodeDatas, code)
           }
-          generateCodeImage={(code, codeType = 'Q') => generateCodeImage(code, codeType, QrandbarcodeDatas)}
+          generateCodeImage={(code, codeType = 'Q') =>
+            generateCodeImage(code, codeType, QrandbarcodeDatas)
+          }
           imageTagBarcodeAndQR={imageTagBarcodeAndQR}
           dropdownValue={dropdownValue}
           barcodeTemplateDetails={barcodeTemplateDetails}

src/Styles/Dining/DiningForm.scss

@@ -13,7 +13,6 @@ input::-webkit-inner-spin-button {
 .Dinein-Form-Structure {
   width: 80vw;
   background-color: #fff; 
-  padding: 0rem 2rem;
   border-radius: 15px;
 }
 .Dinein-Form {
@@ -21,7 +20,8 @@ input::-webkit-inner-spin-button {
   display: flex;
   flex-direction: row;
   padding-top: 2rem;
-  gap: 1rem;
+  gap: 0;
+  column-gap: 1rem;
   border-radius: 10px;
   flex-wrap: wrap;
 }

src/Styles/Employee/EmpMaster.scss

@@ -3,7 +3,7 @@
 }
 
 .required:after {
-  content: ' *';
+  content: " *";
   color: #ff4d4f;
 }
 
@@ -96,7 +96,6 @@
   }
 }
 
-
 .image-preview__content {
   background-color: #f5f5f5;
   margin: 1rem;
@@ -144,8 +143,6 @@
   &:active {
     background-color: #5e5e5e;
   }
-
-
 }
 
 .padding-less-modal {
@@ -153,3 +150,11 @@
     padding: 34px !important;
   }
 }
+
+.StocklistsearchAddDiv {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}

src/Styles/Product/Product.scss

@@ -28,6 +28,7 @@
 .productinputForm {
   display: flex;
   flex-wrap: wrap;
+  gap: 6px;
 
   & .field-DropDown {
     width: 200px !important;
@@ -124,6 +125,24 @@
     left: 2px;
   }
 }
+.ProSubRowFlex {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 1.5rem;
+  width: 100%;
+
+  .ant-form-item,
+  .float-label {
+    margin-bottom: 0;
+  }
+
+  .ant-form-item-explain-error {
+    position: relative;
+    top: 16px;
+    left: 2px;
+  }
+}
 
 .scannerdiv {
   display: flex;
@@ -469,10 +488,12 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   padding-bottom: 0;
+  flex-direction: row !important;
 
   @media (max-width: 768px) {
     gap: 10px;
     align-items: flex-start;
+    justify-content: space-between;
   }
 }
 
@@ -488,7 +509,8 @@
 }
 
 .productFormproductImg {
-  width: 350px;
+  width: 250px;
+  height: 190px;
   align-items: center;
 }
 
@@ -510,3 +532,13 @@
     bottom: 8px;
   }
 }
+
+.ProductMainRowFlex {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 100%;
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}