Merge pull request 'feature/bulk-price-change-and-qr-print-fix' (#26) from feature/bulk-price-change-and-qr-print-fix into main

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

src/Pages/Product/Printstyles.js

@@ -297,7 +297,7 @@ height: 149mm;
     padding: 4px 4px;
     border-radius: 6px;
 }
-.Qrcodeimage,
+// .Qrcodeimage,
 // .Barcodeimage {
 //     display: flex;
 //     gap: 6px;
@@ -341,61 +341,13 @@ height: 149mm;
 //       width: 100%;
 //     justify-content: space-evenly;
 // }
-#25X502cross{
+
- margin: 0 !important;
+
-  padding: 0 !important;
+
-  width: 101.6mm;
-}
-  .Cross25X50container{
-    display: grid;
-    grid-template-columns: repeat(2, 50mm);
-    column-gap: 0.5mm;
-    width: 101.6mm;
-  }
-#15X156cross{
-  margin: 0 !important;
-  padding: 0 !important;
-}
   #StickerPrints0{
   width: 90mm;
   }
 
-
-.labelGrid15 {
-  width: 92mm;
-}
-
-@media print {
-  body {
-  margin: 0 !important;
-  padding: 0 !important;
-  }
-}
-
-.label15 {
-  width: 15mm;
-  height: 15mm;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-.BarQrprint2details {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1mm;
-  font-size: 6px;
-  font-weight: 600;
-  text-align: center;
-  padding : 3px;
-  .productNameBQ,
-.MRPBQ {
-  line-height: 1;
-}
-}
-
   .Sticker1 {
   width: 35mm;
   height: 22mm;
@@ -432,14 +384,6 @@ height: 149mm;
 
 // 25x25 4 Cross Dummy
 
-.text-ellipsis {
-  width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
-}
-
 @media print {
   body {
     margin: 0 !important;
@@ -579,6 +523,7 @@ height: 149mm;
   height: auto;
   object-fit: contain;
 }
+
   .product-id2 {
   margin: 0;
   padding: 0;
@@ -657,6 +602,205 @@ height: 149mm;
 }
 
 
+// 22x35 3cross Dummy
+#StickerPrints1 {
+  width: 105mm;
+  margin: 0;
+  padding: 0;
+}
+
+.label-wrapper-22x35 {
+  width: 35mm;
+  height: 22mm;
+
+  box-sizing: border-box;
+  padding: 1mm;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap : 0;
+  background: #fff;
+}
+
+.label-wrapper-22x35 p {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.label-wrapper-22x35 p:last-child {
+  margin-top: 2px;
+  font-size: 8px;
+  font-weight: 600;
+}
+
+.label-wrapper-22x35 img {
+  width: 14mm;
+  height: 14mm;
+  object-fit: contain;
+}
+
+// 25x50 2 Cross
+
+#25X502cross {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100mm;
+}
+
+.grid25x50_2cross {
+  display: grid;
+  grid-template-columns: repeat(2, 50mm);
+  width: 100mm;
+  column-gap: 0;
+  padding: 0;
+}
+
+.label25x50-wrapper {
+  width: 50mm;
+  height: 25mm;
+
+  box-sizing: border-box;
+  padding: 1.5mm;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #fff;
+}
+
+.label25x50-name {
+  font-size: 10px;
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.label25x50-mrp {
+  font-size: 9px;
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.label25x50-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.label25x50-container img {
+  width: 16mm;
+  height: 16mm;
+  object-fit: contain;
+}
+
+// 25x50 2 Cross Dummy
+
+#StickerPrints3 {
+  width: 100mm;
+  margin: 0;
+  padding: 0;
+}
+
+.label-25x50-content {
+  width: 50mm;
+  height: 25mm;
+
+  box-sizing: border-box;
+  padding: 1.5mm;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  background: #fff;
+}
+
+.label-25x50-content > div {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1mm;
+  font-weight: 600;
+}
+
+.label-25x50-content p {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.label-25x50-content p:last-child {
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+.label-25x50-content img {
+  width: 20mm;     /* QR SAFE SIZE */
+  height: 20mm;
+  object-fit: contain;
+}
+
+// 15x15 6 Cross
+
+#label-15X156cross {
+  width: 92mm;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.label-15x15-container {
+  display: grid;
+  grid-template-columns: repeat(6, 15mm);
+  width: 100%;
+  column-gap: 0.5mm;
+  row-gap: 0;
+  align-items: flex-start;
+}
+
+.label-15x15-wrapper {
+  width: 15mm;
+  height: 15mm;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #fff;
+}
+
+.label-15x15-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  text-align: center;
+}
+
+.label-15x15-name,
+.label-15x15-mrp {
+  font-size: 6px;
+  white-space: nowrap;
+}
+
+.label-15x15-wrapper img {
+  width: 7.5mm;
+  height: 7.5mm;
+  object-fit: contain;
+}
+
+
 .text-ellipsis {
   width: 90%;
   white-space: nowrap;
@@ -664,6 +808,15 @@ height: 149mm;
   text-align: center;
   text-overflow: ellipsis;
 }
+
+.text-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.1;
+  max-height: 2.8em;
+}
 </style>`;
 
 export const getPageStyle = (width) => `

src/Pages/Product/ProductList.jsx

@@ -1951,8 +1951,8 @@ const ProductList = () => {
     switch (dropdownValue) {
       case '15X15 6cross': // COMPLETE
         await printDiv(
-          templateAvailable ? '15X156cross' : 'StickerPrints0',
+          templateAvailable ? 'label-15X156cross' : 'StickerPrints0',
-          style + getPageStyle(92)
+          (style + getPageStyle(92))
         );
         handleQRStickerPrinterModelCancel();
         break;
@@ -1973,7 +1973,7 @@ const ProductList = () => {
       case '25X50 2cross': //Need to check
         await printDiv(
           templateAvailable ? '25X502cross' : 'StickerPrints3',
-          style
+          style + getPageStyle(100)
         );
         handleQRStickerPrinterModelCancel();
         break;
@@ -4036,12 +4036,12 @@ const ProductList = () => {
                 const copyCount = generateQRCodeCopy(record?.QRCode);
                 return Array?.from({ length: copyCount })?.map((_, copyIndex) => (
                   <div
-                    className="Sticker1"
+                    className="label-wrapper-22x35"
                     key={`sticker1-${recordIndex}-${copyIndex}`}
                   >
                     <div style={{ width: '60%' }}>
                       <p
-                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
+                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-clamp-2' : ''}`}
                       >
                         {record.ProdName} ({record.Size}
                         {record.UomName})
@@ -4055,15 +4055,14 @@ const ProductList = () => {
                           templateOptions?.codeType
                         ) || base64Image
                       }
-                      style={{ width: '52px', height: '52px' }}
                     />
                   </div>
                 ))
               }
               )
               : Array?.from({ length: copies })?.map((_, index) => (
-                <div className="Sticker1" key={`sticker1-${index}`}>
+                <div className="label-wrapper-22x35" key={`sticker1-${index}`}>
-                  <div style={{ width: '60%' }}>
+                  <div style={{ width: '19mm' }}>
                     <p
                       className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                     >
@@ -4073,7 +4072,6 @@ const ProductList = () => {
                   </div>
                   <img
                     src={base64Image}
-                    style={{ width: '16mm', height: '16mm' }}
                   />
                 </div>
               ))}
@@ -4191,19 +4189,19 @@ const ProductList = () => {
           </div>
         </div>
         <div id="StickerPrints3">
-          <div className="container">
+          <div className="grid25x50_2cross">
             {selectedRecords?.length > 0
               ? selectedRecords?.map((record, recordIndex) => {
                 const copyCount = generateQRCodeCopy(record?.QRCode);
                 console.log(copyCount, 'copyCount3')
                 return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                   <div
-                    className="Sticker3"
+                    className="label-25x50-content"
                     key={`sticker3-${recordIndex}-${copyIndex}`}
                   >
                     <div>
                       <p
-                        className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
+                        className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
                       >
                         {record?.NickName || record?.ProdName} ({record?.Size}
                         {record?.UomName})
@@ -4223,10 +4221,10 @@ const ProductList = () => {
                 ))
               })
               : Array.from({ length: copies })?.map((_, index) => (
-                <div className="Sticker3" key={`sticker3-${index}`}>
+                <div className="label-25x50-content" key={`sticker3-${index}`}>
                   <div>
                     <p
-                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
+                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-clamp-2' : ''}`}
                     >
                       {proName} ({size})
                     </p>
@@ -4234,7 +4232,6 @@ const ProductList = () => {
                   </div>
                   <img
                     src={base64Image}
-                    style={{ width: '75px', height: '75px' }}
                   />
                 </div>
               ))}
@@ -4896,31 +4893,30 @@ const ProductList = () => {
         </div>
 
         <div id="25X502cross">
-          <div className="Cross25X50container">
+          <div className="grid25x50_2cross">
             {selectedRecords?.length > 0
               ? selectedRecords?.map((record, recordIndex) => {
                 const copyCount = generateQRCodeCopy(record?.QRCode);
                 return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                   <div
-                    className="BarQrprint8"
+                    className="label25x50-wrapper"
                     key={`Barcode2-${recordIndex}-${copyIndex}`}
-                    style={{ width: '100%' }}
                   >
-                    <div className="Barcodeimage" style={valueStyleColumn}>
+                    <div className="label25x50-container" style={valueStyleColumn}>
                       {imageTagBarcodeAndQR(
-                        templateOptions.codeType === 'B' ? '90%' : '35%',
+                        templateOptions.codeType === 'B' ? '45mm' : '16mm',
                         '6px',
                         record?.QRCode || record?.ProdId
                       )}
                       {templateOptions.productName && (
                         <div
-                          className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
+                          className={`label25x50-name ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                         >
                           {record?.NickName || record?.ProdName}
                         </div>
                       )}
                       {templateOptions.mrp && (
-                        <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
+                        <div className="label25x50-mrp">{'MRP : ' + record?.MRP}</div>
                       )}
                     </div>
                   </div>
@@ -4930,23 +4926,22 @@ const ProductList = () => {
               )
               : Array.from({ length: copies })?.map((_, index) => (
                 <div
-                  className="BarQrprint8"
+                  className="label25x50-wrapper"
                   key={`Barcode2-${index}`}
-                  style={{ width: '100%' }}
                 >
-                  <div className="Barcodeimage" style={valueStyleColumn}>
+                  <div className="label25x50-container" style={valueStyleColumn}>
                     {imageTagBarcodeAndQR(
-                      templateOptions.codeType === 'B' ? '90%' : '35%'
+                      templateOptions.codeType === 'B' ? '45mm' : '16mm'
                     )}
                     {templateOptions.productName && (
                       <div
-                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
+                        className={`label25x50-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                       >
                         {proName}
                       </div>
                     )}
                     {templateOptions.mrp && (
-                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
+                      <div className="label25x50-mrp">{'MRP : ' + detail?.MRP}</div>
                     )}
                   </div>
                 </div>
@@ -5433,42 +5428,25 @@ const ProductList = () => {
           </div>
         </div>
 
-        <div id="15X156cross">
+        <div id="label-15X156cross">
           <div
-            className="labelGrid15"
+            className="label-15x15-container"
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
-              width: '100%',
-            }}
           >
             {selectedRecords?.length > 0
               ? selectedRecords?.map((record, recordIndex) => {
                 const copyCount = generateQRCodeCopy(record?.QRCode);
 
                 return Array.from({ length: copyCount })?.map((_, copyIndex) => (
-                  <div
+                  <div className="label-15x15-content" key={`Barcode8-${recordIndex}-${copyIndex}`}>
-                    className="label15"
-                    key={`Barcode8-${recordIndex}-${copyIndex}`}
-                  >
-                    <div className="BarQrprint2details alignCenterFlexDirectionColumn">
                     {templateOptions.value === 'T' &&
                       imageTagBarcodeAndQR(
-                          templateOptions.codeType === 'B' ? '100%' : '50%',
+                        templateOptions.codeType === 'B' ? '100%' : '6mm',
                         '6px',
                         record?.QRCode || record?.ProdId
                       )}
                     {templateOptions.productName && (
                       <div
-                          style={{
+                        className={`label-15x15-name ${record?.NickName ? '' : (record?.ProdName)?.length > 12 ? 'text-ellipsis' : ''}`}
-                            textAlign: 'center',
-                            fontSize: '6px',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                            width: '90%',
-                          }}
-                          className="productNameBQ"
                       >
                         {record?.NickName
                           ? record?.NickName
@@ -5504,30 +5482,17 @@ const ProductList = () => {
                         '6px',
                         record?.QRCode || record?.ProdId
                       )}
-                    </div>
+                  </div>))
-                  </div>
+              })
-                ))
-              }
-
-              )
               : Array.from({ length: copies })?.map((_, index) => (
-                <div className="label15" key={`Barcode8-${index}`}>
+                <div className="label-15x15-content" key={`Barcode8-${index}`}>
-                  <div className="BarQrprint2details alignCenterFlexDirectionColumn">
                   {templateOptions.value === 'T' &&
                     imageTagBarcodeAndQR(
-                        templateOptions.codeType === 'B' ? '100%' : '50%'
+                      templateOptions.codeType === 'B' ? '100%' : '6mm'
                     )}
                   {templateOptions.productName && (
                     <div
-                        style={{
+                      className={`label-15x15-name ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
-                          textAlign: 'center',
-                          fontSize: '6px',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          width: '90%',
-                        }}
-                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                     >
                       {nickName
                         ? nickName
@@ -5538,31 +5503,25 @@ const ProductList = () => {
                   )}
                   {templateOptions.value === 'C' &&
                     imageTagBarcodeAndQR(
-                        templateOptions.codeType === 'B'
+                      (templateOptions.codeType === 'B'
                         ? '80%'
-                          : !templateOptions.productName &&
+                        : (!templateOptions.productName &&
-                            !templateOptions.mrp
+                          !templateOptions.mrp)
                           ? '80%'
-                            : '35%'
+                          : '7.5mm'), '5px'
                     )}
                   {templateOptions.mrp && (
                     <div
-                        style={{
+                      className="label-15x15-mrp"
-                          width: '100%',
-                          textAlign: 'center',
-                          fontSize: '6px',
-                        }}
-                        className="MRPBQ"
                     >
                       {'₹:' + (detail?.MRP ? detail?.MRP : 10.0)}
                     </div>
                   )}
                   {templateOptions.value === 'B' &&
                     imageTagBarcodeAndQR(
-                        templateOptions.codeType === 'B' ? '100%' : '50%'
+                      templateOptions.codeType === 'B' ? '100%' : '7.5mm'
                     )}
                 </div>
-                </div>
               ))}
           </div>
         </div>
@@ -5630,7 +5589,6 @@ const ProductList = () => {
                   </div>
                 ))
               }
-
               )
               : Array.from({ length: copies })?.map((_, index) => (
                 <div

src/Pages/StockMaster/InvoiceImageExtractor.jsx

@@ -35,6 +35,7 @@ import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
 import { Tables } from '../../Components/Tables/Table.jsx';
 import { InputField } from '../../Components/Forms/InputField.jsx';
 import TextAreaInput from '../../Components/Forms/TextArea.jsx';
+import { uploadImage } from '../../Features/upload/upload.js';
 
 const { Option } = Select;
 const { Column } = Table;
@@ -723,6 +724,7 @@ const InvoiceImageExtractorModal = ({
         const data = response.data[0];
         setExtractedText(JSON.stringify(data, null, 2));
         setParsedData(data);
+        const uploadImgData = await dispatch(uploadImage(fileToProcess)).unwrap();
 
         const supplierInfo = {
           name: form.getFieldValue('supplierName') || data?.supplier || '',
@@ -770,7 +772,7 @@ const InvoiceImageExtractorModal = ({
             mergedProducts?.map((item, index) => ({
               ...item,
               srNo: index + 1,
-              image: item?.image ? item?.image : response?.file,
+              image: item?.image ? item?.image : (uploadImgData?.data?.status ? uploadImgData?.data?.image : null),
             }))
           );
           SetTotalAmtData(

src/Pages/StockMaster/StockList.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { PlusOutlined, EyeOutlined } from '@ant-design/icons';
-import { Table } from 'antd';
+import { Image, Table } from 'antd';
 import {
   changeBreadCrumb,
   getEmpAccess,
@@ -95,6 +95,9 @@ const StockList = () => {
   const [ImeiSerialModal, setImeiSerialModal] = useState(false);
   const [allowDecimal, setAllowDecimal] = useState(false);
   const [PurcProddetail, setPrucProddetail] = useState([]);
+  const [productImageDetails, setProductImageDetails] = useState([]);
+  const [imageModal, setImageModal] = useState(false);
+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
   const [IMEISeriandata, setIMEISeriandata] = useState([]);
   useEffect(() => {
     try {
@@ -189,6 +192,21 @@ const StockList = () => {
     setPrucProddetail(proddetails);
     setProddtlModal(true);
   };
+
+  const viewImages = (imageDetails) => {
+    setProductImageDetails(imageDetails);
+    setCurrentImageIndex(0);
+    setImageModal(true);
+  };
+
+  const handlePrevImage = () => {
+    setCurrentImageIndex(prev => prev > 0 ? prev - 1 : productImageDetails.length - 1);
+  };
+
+  const handleNextImage = () => {
+    setCurrentImageIndex(prev => prev < productImageDetails.length - 1 ? prev + 1 : 0);
+  };
+
   const handleProductmodalCancel = () => {
     setPrucProddetail([]);
     setProddtlModal(false);
@@ -196,6 +214,11 @@ const StockList = () => {
   const handleIMEISerialmodalCancel = () => {
     setImeiSerialModal(false);
   };
+  const handleImageClose = () => {
+    setImageModal(false);
+    setProductImageDetails([]);
+    setCurrentImageIndex(0);
+  }
   // WRITED BY SREE
   function safeRound(amountStr) {
     if (amountStr == null) return allowDecimal ? '0.00' : '0';
@@ -293,6 +316,24 @@ const StockList = () => {
         />
       ),
     },
+    {
+      title: 'Image',
+      key: 'ImageDetails',
+      dataIndex: 'ImageDetails',
+      align: 'center',
+      render: (data, record) => {
+        if (data?.length > 0) {
+          return <IoEye
+            style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
+            onClick={() => viewImages(data)}
+          />
+        } else {
+          return <p>-</p>
+        }
+      }
+
+      ,
+    }
   ];
   const Proddetailcolumns = [
     {
@@ -856,6 +897,52 @@ const StockList = () => {
           </div>
         }
       />
+      <DefaultModal
+        open={imageModal}
+        title="Uploaded Image"
+        handleCancel={handleImageClose}
+        footer={false}
+        width={600}
+        className={'padding-less-modal'}
+        children={
+          <div >
+            {productImageDetails?.length > 0 && (
+              <div className='image-preview'>
+                {productImageDetails.length > 1 && (
+                  <>
+                    <button
+                      onClick={handlePrevImage}
+                      className='image-preview__nav-btn'
+                    >
+                      <FaAngleLeft />
+                    </button>
+                  </>
+                )}
+                <div className='image-preview__content'>
+                  <Image
+                    src={productImageDetails[currentImageIndex]?.ImageUrl}
+                    alt="Preview"
+                    style={{ maxWidth: '100%', maxHeight: '400px', objectFit: 'contain' }}
+                  />
+                </div>
+                {productImageDetails.length > 1 && (
+                  <>
+                    <button
+                      onClick={handleNextImage}
+                      className='image-preview__nav-btn'
+                    >
+                      <FaAngleRight />
+                    </button>
+                  </>
+                )}
+              </div>
+            )}
+            <div style={{ marginTop: '10px', color: '#666', textAlign: 'center', fontFamily: 'Poppins' }}>
+              {currentImageIndex + 1} of {productImageDetails.length}
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 };

src/Styles/Employee/EmpMaster.scss

@@ -87,6 +87,7 @@
     letter-spacing: -0.3px;
   }
 }
+
 .EmpDOJMain {
   .ant-picker-input {
     input::placeholder {
@@ -94,3 +95,61 @@
     }
   }
 }
+
+
+.image-preview__content {
+  background-color: #f5f5f5;
+  margin: 1rem;
+  border: 2px solid #dfdfdf;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  border-radius: 4px;
+
+  img {
+    width: 100%;
+    height: 90%;
+  }
+}
+
+.image-preview {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.image-preview__nav-btn {
+  border: none;
+  outline: none;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: center;
+  border-radius: 10pc;
+  background-color: #acacac;
+  color: #fff;
+  font-size: 18px;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #979797;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    background-color: #5e5e5e;
+  }
+
+
+}
+
+.padding-less-modal {
+  .ant-modal-content {
+    padding: 34px !important;
+  }
+}

src/Styles/OverAllStyle/OverAllStyle.scss

@@ -811,6 +811,11 @@
 }
 
 .pricechangeTable {
+  width: 83vw;
+  scrollbar-width: thin;
+  overflow-x: auto;
+  overflow-y: auto;
+
   .ant-input {
     padding: 4px 11px 4px 11px !important;
     width: 80px !important;
@@ -1337,6 +1342,12 @@ table {
   width: 100%;
 }
 
+.pricechangedata {
+  width: 100%;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
 .ProductList-pwiseQrcode {
   height: max-content !important;
   max-height: 70vh;

src/Styles/Product/excel.scss

@@ -30,51 +30,70 @@
   border-radius: 4px;
   font-family: 'Poppins';
   font-size: 16px;
+
   svg {
     margin-top: -2px;
     font-size: 20px;
     display: flex;
   }
+
+  &.is-loading {
+    cursor: not-allowed;
+    opacity: 0.7;
+    pointer-events: none;
+    background-color: #9ca3af;
+  }
 }
 
 .tableExcelUpload {
   .ant-table-cell {
     padding: 0 8px !important;
   }
+
   .ant-select-selection-placeholder {
     padding-inline-end: 16px !important;
   }
+
   .ant-table-thead {
     th {
       text-align: left;
       vertical-align: baseline;
     }
   }
+
   thead {
     height: 100px !important;
   }
+
   th {
     height: 100px !important;
   }
+
   .ant-select {
     width: 150px !important;
   }
+
   .ant-select-selection-item {
     padding-inline-end: 14px !important;
   }
+
   .ant-select-selector {
     height: 40px !important;
   }
+
   .ant-select-selection-item {
     font-size: 12px !important;
   }
+
   .ant-upload-select {
     height: 50px !important;
     width: 85px !important;
   }
+
   .uploadText {
     margin-top: 0 !important;
   }
+
   .ant-upload-picture-card-wrapper {
     border-spacing: 0 !important;
   }

vite.config.js.timestamp-1765166822050-2734cdcb62983.mjs

@@ -1,38 +0,0 @@
-// vite.config.js
-import { defineConfig } from "file:///D:/KarthigaLakshmi/A.Dec/retail%20dec%201/node_modules/vite/dist/node/index.js";
-import react from "file:///D:/KarthigaLakshmi/A.Dec/retail%20dec%201/node_modules/@vitejs/plugin-react/dist/index.js";
-import { terser } from "file:///D:/KarthigaLakshmi/A.Dec/retail%20dec%201/node_modules/rollup-plugin-terser/rollup-plugin-terser.mjs";
-var vite_config_default = defineConfig(({ command, mode }) => {
-  if (mode === "production") {
-    return {
-      plugins: [
-        react()
-        // terser({  // Add terser plugin for production
-        //   compress: {
-        //     drop_console: true,  // This removes all console.* statements
-        //   },
-        // }),
-      ],
-      base: "/apps/retail/",
-      envDir: "src",
-      envPrefix: "ENV_"
-    };
-  } else {
-    return {
-      plugins: [react()],
-      envDir: "src",
-      envPrefix: "ENV_",
-      server: {
-        host: "192.168.1.22",
-        port: process.env.PORT || 3015
-      },
-      optimizeDeps: {
-        exclude: ["console.log"]
-      }
-    };
-  }
-});
-export {
-  vite_config_default as default
-};
-//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxLYXJ0aGlnYUxha3NobWlcXFxcQS5EZWNcXFxccmV0YWlsIGRlYyAxXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJEOlxcXFxLYXJ0aGlnYUxha3NobWlcXFxcQS5EZWNcXFxccmV0YWlsIGRlYyAxXFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9EOi9LYXJ0aGlnYUxha3NobWkvQS5EZWMvcmV0YWlsJTIwZGVjJTIwMS92aXRlLmNvbmZpZy5qc1wiO2ltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gXCJ2aXRlXCI7XG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCI7XG5pbXBvcnQgeyB0ZXJzZXIgfSBmcm9tIFwicm9sbHVwLXBsdWdpbi10ZXJzZXJcIjtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKCh7IGNvbW1hbmQsIG1vZGUgfSkgPT4ge1xuICBpZiAobW9kZSA9PT0gXCJwcm9kdWN0aW9uXCIpIHtcbiAgICByZXR1cm4ge1xuICAgICAgcGx1Z2luczogW1xuICAgICAgICByZWFjdCgpLFxuICAgICAgICAvLyB0ZXJzZXIoeyAgLy8gQWRkIHRlcnNlciBwbHVnaW4gZm9yIHByb2R1Y3Rpb25cbiAgICAgICAgLy8gICBjb21wcmVzczoge1xuICAgICAgICAvLyAgICAgZHJvcF9jb25zb2xlOiB0cnVlLCAgLy8gVGhpcyByZW1vdmVzIGFsbCBjb25zb2xlLiogc3RhdGVtZW50c1xuICAgICAgICAvLyAgIH0sXG4gICAgICAgIC8vIH0pLFxuICAgICAgXSxcbiAgICAgIGJhc2U6IFwiL2FwcHMvcmV0YWlsL1wiLFxuICAgICAgZW52RGlyOiBcInNyY1wiLFxuICAgICAgZW52UHJlZml4OiBcIkVOVl9cIixcbiAgICB9O1xuICB9IGVsc2UgeyBcbiAgICByZXR1cm4ge1xuICAgICAgcGx1Z2luczogW3JlYWN0KCldLFxuICAgICAgZW52RGlyOiBcInNyY1wiLFxuICAgICAgZW52UHJlZml4OiBcIkVOVl9cIixcbiAgICAgIHNlcnZlcjoge1xuICAgICAgICBob3N0OiBcIjE5Mi4xNjguMS4yMlwiLFxuICAgICAgICBwb3J0OiBwcm9jZXNzLmVudi5QT1JUIHx8IDMwMTUsXG4gICAgICB9LFxuICAgICAgb3B0aW1pemVEZXBzOiB7XG4gICAgICAgIGV4Y2x1ZGU6IFtcImNvbnNvbGUubG9nXCJdLFxuICAgICAgfSxcbiAgICB9O1xuICB9XG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBNlMsU0FBUyxvQkFBb0I7QUFDMVUsT0FBTyxXQUFXO0FBQ2xCLFNBQVMsY0FBYztBQUV2QixJQUFPLHNCQUFRLGFBQWEsQ0FBQyxFQUFFLFNBQVMsS0FBSyxNQUFNO0FBQ2pELE1BQUksU0FBUyxjQUFjO0FBQ3pCLFdBQU87QUFBQSxNQUNMLFNBQVM7QUFBQSxRQUNQLE1BQU07QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsTUFNUjtBQUFBLE1BQ0EsTUFBTTtBQUFBLE1BQ04sUUFBUTtBQUFBLE1BQ1IsV0FBVztBQUFBLElBQ2I7QUFBQSxFQUNGLE9BQU87QUFDTCxXQUFPO0FBQUEsTUFDTCxTQUFTLENBQUMsTUFBTSxDQUFDO0FBQUEsTUFDakIsUUFBUTtBQUFBLE1BQ1IsV0FBVztBQUFBLE1BQ1gsUUFBUTtBQUFBLFFBQ04sTUFBTTtBQUFBLFFBQ04sTUFBTSxRQUFRLElBQUksUUFBUTtBQUFBLE1BQzVCO0FBQUEsTUFDQSxjQUFjO0FBQUEsUUFDWixTQUFTLENBQUMsYUFBYTtBQUFBLE1BQ3pCO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=