camera feature added for upload

src/Components/Forms/CropUpload.jsx

@@ -9,6 +9,8 @@ import { FiPenTool } from 'react-icons/fi';
 import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
 import '../../Styles/Product/Product.scss';
 import { Messages } from '../Notifications/Messages.jsx';
+import { isMobile } from 'react-device-detect';
+import Camera from '../MobileComponent/Camera.jsx';
 const allowedTypes = [
   'image/jpeg',
   'image/png',
@@ -405,6 +407,29 @@ const CropUpload = ({
       <Modal visible={previewVisible} onCancel={handleCancel} footer={null}>
         <img alt="Preview" style={{ width: '100%' }} src={previewImage} />
       </Modal>
+      {isMobile && fileList?.length == 0 && <>
+        <div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
+        <Camera
+          handleCapture={async (e) => {
+            const file = e.target.files?.[0];
+            if (!file) return;
+
+            try {
+              await handleUpload({
+                file,
+                onSuccess: () => {
+                  setEditImageOpen(true);
+                },
+                onError: () => {
+                  console.error("Upload failed");
+                }
+              });
+            } catch (error) {
+              console.error(error);
+            }
+          }}
+        />
+      </>}
       <DefaultModal
         title="Edit Image"
         width={800}

src/Components/Forms/Upload.jsx

@@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux';
 import { Modal, Upload } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { uploadImage } from '../../Features/upload/upload';
+import Camera from '../MobileComponent/Camera';
+import { isMobile } from 'react-device-detect';
 const allowedTypes = [
   'image/jpeg',
   'image/png',
@@ -25,6 +27,7 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
   const [previewImage, setPreviewImage] = useState('');
   const [previewTitle, setPreviewTitle] = useState('');
   const [fileList, setFileList] = useState([]);
+  console.log(fileList, "fileList")
 
   useEffect(() => {
     // Inside Imageupload.jsx
@@ -94,6 +97,19 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
     </div>
   );
 
+  const handleCameraCapture = async (e) => {
+    const file = e.target.files[0];
+
+    if (!file) return;
+
+    let data = await dispatch(uploadImage(file)).unwrap();
+
+    if (data?.data?.status) {
+      updateImageUrl(data?.data?.image);
+      setFileList([{ url: data?.data?.image }]);
+    }
+  };
+
   return (
     <>
       <Upload
@@ -125,6 +141,20 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
           src={previewImage}
         />
       </Modal>
+      {isMobile && fileList?.length == 0 && <>
+        <div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
+        <Camera
+          handleCapture={(e) => {
+            const files = Array.from(e.target.files);
+
+            const formattedFileList = files.map((file) => ({
+              originFileObj: file,
+            }));
+
+            handleChange({ fileList: formattedFileList });
+          }}
+        />
+      </>}
     </>
   );
 };

src/Components/MobileComponent/Camera.jsx

@@ -0,0 +1,43 @@
+import { useRef } from 'react'
+import { TbCapture } from "react-icons/tb";
+
+const Camera = ({ handleCapture = () => { } }) => {
+
+    const cameraRef = useRef(null);
+
+    return (
+        <div>
+            <input
+                ref={cameraRef}
+                type="file"
+                accept="image/*"
+                capture="environment"
+                multiple
+                hidden
+                onChange={handleCapture}
+                style={{ display: "none" }}
+            />
+            <div style={{
+                backgroundColor: "#1292ee",
+                color: "#fff",
+                padding: "4px 8px",
+                fontSize: "12px",
+                fontWeight: "500",
+                fontFamily: "Poppins",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                borderRadius: "4px",
+                cursor: "pointer",
+                marginTop: "5px",
+                flexWrap: 'nowrap',
+                whiteSpace: "nowrap"
+            }} onClick={() => cameraRef.current.click()}>
+                <TbCapture size={16} />
+                Take Photo
+            </div>
+        </div>
+    )
+}
+
+export default Camera

src/Pages/BookingScreen/Components/BSBillingTables/BSBillingTable3/BSBillingTable3pay.jsx

@@ -355,7 +355,7 @@ const BSBillingTable3Pay = () => {
   const OrderCardDetail = useSelector(GlobalOrderCardDetails);
   const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
 
-  console.log(paybtns, 'paybtnspaybtnspaybtnspaybtns', currentOrderNetAmount, previousNetAmount);
+  console.log(OrderCardDetail, 'OrderCardDetail');
   //Total calculation
   const TotalItems = OrderCardDetail?.length;
   const [formattedDate, setFormattedDate] = useState('');

src/Pages/BookingScreen/Components/BookingFunctionality/FeaturesFunctionalities.jsx

@@ -1193,6 +1193,11 @@ const FeaturesFunctionalities = (props) => {
       ),
     },
   ];
+
+  console.log(ReorderHoldDetails,
+    BookingType,
+    GlobalExtraCharge, "GlobalExtraCharge");
+
   const defaultColumns1 = [
     {
       title: 'ExtraCharge Type',

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

@@ -1292,6 +1292,7 @@ function BSReprint({ setOpenModel = () => { } }) {
       OrderQty: item?.SalesQty,
       OrderRate: item?.Rate,
       SellingPrice: item?.Rate,
+      TaxPercentage: (item?.ProdTaxPercentage || 0)
       // TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
     }));
 

src/Pages/BookingScreen/Forms/QuickAdd/QuickAdd.jsx

@@ -756,12 +756,14 @@ const ProductForm = ({
                       <div className="upload_btn">
                         <p>Upload Icon</p>
                         <br></br>
+                        <div style={{ width: 'max-content' }}>
                           <Imageupload
                             singleImage={true}
                             updateImageUrl={updateBrandImageUrl}
                             ImageLink={imageBrandUrl ? imageBrandUrl : ''}
                           />
                         </div>
+                      </div>
                     )}
 
                     {true && (

src/Pages/CommonMaster/CommonMaster.jsx

@@ -1158,12 +1158,14 @@ const CommonMaster = () => {
                 <div className="upload_btn">
                   <p>Upload Icon</p>
                   <br />
+                  <div style={{ width: 'max-content' }}>
                     <Imageupload
                       singleImage={true}
                       updateImageUrl={updateImageUrl}
                       ImageLink={imageUrl ? imageUrl : ''}
                     />
                   </div>
+                </div>
               </Form>
             </div>
             {radioValue === 'multiple' && !EditState && (

src/Pages/EmpMaster/EmpMasterForm.jsx

@@ -33,6 +33,8 @@ import { getCommonAppPreference } from '../../Features/BrachLogin/BranchLogin.js
 import { AiOutlineDownCircle, AiOutlineUpCircle } from 'react-icons/ai';
 // import TextArea from 'antd/es/input/TextArea.js';
 import CropUpload from '../../Components/Forms/CropUpload.jsx';
+import { isMobile } from 'react-device-detect';
+import Camera from '../../Components/MobileComponent/Camera.jsx';
 const { Panel } = Collapse;
 const { TextArea } = Input;
 const subDirectory = import.meta.env.BASE_URL;
@@ -1630,6 +1632,9 @@ const EmployeeForm = ({ formType }) => {
                             length: Math.max(1, imageUrls.length),
                           }).map((_, idx) => (
                             <div key={idx} style={{ marginBottom: 12 }}>
+
+
+                              <div style={{ width: 'max-content' }}>
                                 <CropUpload
                                   onlineImage={''}
                                   ImageLink={imageUrls[idx]?.image}
@@ -1637,7 +1642,7 @@ const EmployeeForm = ({ formType }) => {
                                     updateImageUrls(url, idx)
                                   }
                                 />
-
+                              </div>
                               <Input
                                 placeholder={`Image name (optional)`}
                                 value={imageUrls[idx]?.name || ''}

src/Pages/Product/ProductForm.jsx

@@ -84,6 +84,7 @@ import {
   getCommonAppPreference,
 } from '../../Features/BrachLogin/BranchLogin.js';
 import RackForm from '../Rack/RackForm.jsx';
+import { isMobile } from 'react-device-detect';
 const subDirectory = import.meta.env.ENV_BASE_URL;
 
 const ProductForm = ({ formType }) => {
@@ -2594,7 +2595,7 @@ const ProductForm = ({ formType }) => {
                             ImageLink={imageUrl}
                             updateImageUrl={updateImageUrl}
                           />
-                          <div className="onlineimgplus">
+                          <div className="onlineimgplus" style={{ paddingBottom: "1rem" }}>
                             <button
                               type="button"
                               className="onlinebtnProduct"
@@ -2619,8 +2620,7 @@ const ProductForm = ({ formType }) => {
                         <div className="productonlineImg">
                           {imagedata?.map((item, index) => (
                             <div
-                              className={`singleimg ${
+                              className={`singleimg ${selectedImage === item ? 'selected' : ''
-                                selectedImage === item ? 'selected' : ''
                                 }`}
                               key={index}
                               onClick={() => setSelectedImage(item)}
@@ -2640,7 +2640,7 @@ const ProductForm = ({ formType }) => {
                   ></DefaultModal>
                 </div>
                 {qrAndTokenDtlsFields?.length > 0 && (
-                  <div className="productcollapse">
+                  <div className="productcollapse" style={{ marginTop: isMobile ? "2rem" : "0.5rem" }}>
                     <Collapse defaultActiveKey={expandCollapseActive}>
                       <Panel header="Qrcode and Token" key="1">
                         <div className="Qrcodediv">
@@ -4084,6 +4084,7 @@ const ProductForm = ({ formType }) => {
                       <div className="upload_btn">
                         <p>Upload Icon</p>
                         <br></br>
+                        <div style={{ width: 'max-content' }}>
                           <Imageupload
                             singleImage={true}
                             updateImageUrl={updateCategoryImageUrl}
@@ -4092,6 +4093,7 @@ const ProductForm = ({ formType }) => {
                         </div>
                       </div>
                     </div>
+                  </div>
                 </Form>
               }
               handleSubmit={submitCategory}
@@ -4253,6 +4255,7 @@ const ProductForm = ({ formType }) => {
                         <div className="upload_btn">
                           <p>Upload Icon</p>
                           <br></br>
+                          <div style={{ width: 'max-content' }}>
                             <Imageupload
                               singleImage={true}
                               updateImageUrl={updateBrandImageUrl}
@@ -4261,6 +4264,7 @@ const ProductForm = ({ formType }) => {
                           </div>
                         </div>
                       </div>
+                    </div>
 
                     <div className="subColumnFlex">
                       <div>

src/Pages/Ticket/TicketForm.jsx

@@ -699,6 +699,7 @@ const TicketForm = () => {
                         <div className="upload_btn">
                           <p>Upload Attachment</p>
                           <br></br>
+                          <div style={{ width: 'max-content' }}>
                             <Imageupload
                               singleImage={true}
                               updateImageUrl={updateImageUrl}
@@ -708,6 +709,7 @@ const TicketForm = () => {
                         </div>
                       </div>
                     </div>
+                  </div>
 
                   <div className="submitButton">
                     <Buttons