Responsive masters

2026-02-10 16:32:53 +05:30 · 2026-02-10 16:32:53 +05:30 · 7536be8bb9
parent d0ac0e56fe
commit 7536be8bb9
8 changed files with 1785 additions and 1722 deletions
--- a/src/Pages/Preference/PreferenceList.jsx
+++ b/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
--- a/src/Pages/Preference/PreferenceList.scss
+++ b/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;
  }
 }

--- a/src/Pages/Product/ProductForm.jsx
+++ b/src/Pages/Product/ProductForm.jsx
@ -537,9 +537,12 @@ const ProductForm = ({ formType }) => {

  useEffect(() => {
    if (
-      AppId !== undefined && AppId !== null &&
-      CompId !== undefined && CompId !== null &&
-      BranchId !== undefined && BranchId !== null
+      AppId !== undefined &&
+      AppId !== 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}
--- a/src/Pages/Reports/EmployeeSettlement/EmployeeSettlement.jsx
+++ b/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) => (
-                <span style={{}}>{item}</span>
-            ),
+      render: (item) => <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]);
-                                setCheckedRows(prev => prev.find(row => row?.EmployeeId === waiterId) ? prev : [...prev, record]);
+                      setCheckedRowKeys((prev) =>
+                        prev.includes(waiterId) ? prev : [...prev, waiterId]
+                      );
+                      setCheckedRows((prev) =>
+                        prev.find((row) => row?.EmployeeId === waiterId)
+                          ? prev
+                          : [...prev, record]
+                      );
                    } else {
-                                setCheckedRowKeys(prev => prev.filter(key => key !== waiterId));
-                                setCheckedRows(prev => prev.filter(row => row?.EmployeeId !== waiterId));
+                      setCheckedRowKeys((prev) =>
+                        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
-        Employee !== "all" ? response = await dispatch(getEmployeeSettlementListindIvidually(data)).unwrap() : response = await dispatch(getEmployeeSettlementList(data)).unwrap()
+    let response;
+    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 =>
-                e?.IncentiveDetails?.some(a => a?.SettledStatus === StatusValue && a?.IncentiveAmount > 0)
+      const data = employees.some((e) =>
+        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()
-            setCheckedRows([])
+      handleReset();
+      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"
-        }}>
-            <div style={{ marginBottom: "10px" }}>
-                <FormHeader title={"Incentive"} />
+        width: '99%',
+        height: '90%',
+        overflow: 'scroll',
+      }}
+    >
+      <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}>
-                                            Cancel
-                                        </Button>
+                <Button onClick={handleReset}>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}
-                        checked={TableData?.length > 0 && checkedRowKeys?.length === TableData?.length}
+            indeterminate={
+              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)
-                        .map(emp => ({
+          dataSource={
+            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 style={{ display: "flex", gap: "1rem" }}>
+      <div
+        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>
  );
 };
--- a/src/Pages/StockMaster/StockList.jsx
+++ b/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"
-            style={{ justifyContent: 'flex-start' }}
-          ><Tooltip title="Search using Invoice No,Supp Name">
+            className="StocklistsearchAddDiv"
+            style={{ justifyContent: 'flex-start', flexWrap: 'wrap' }}
+          >
+            <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}
--- a/src/Styles/Dining/DiningForm.scss
+++ b/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;
 }
--- a/src/Styles/Employee/EmpMaster.scss
+++ b/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;
+}
--- a/src/Styles/Product/Product.scss
+++ b/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;
+  }
+}