chnaged

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

@@ -1,339 +1,481 @@
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
-import { changeOrderCardDetails, CustomerOrderList, getProductsearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import {
-import { useEffect, useState } from "react";
+  changeOrderCardDetails,
-import { ExtractDateFormate, getSession } from "../../../../Services/Others";
+  CustomerOrderList,
-import { Tables } from "../../../../Components/Tables/Table";
+  getProductsearch,
-import { IoEye } from "react-icons/io5";
+  getStockDetailsByVariantName,
-import { DatePicker, Modal } from "antd";
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
-import dayjs from "dayjs";
+import { useEffect, useState } from 'react';
+import { ExtractDateFormate, getSession } from '../../../../Services/Others';
+import { Tables } from '../../../../Components/Tables/Table';
+import { IoEye } from 'react-icons/io5';
+import { DatePicker, Modal } from 'antd';
+import dayjs from 'dayjs';
 import { v4 as uuidv4 } from 'uuid';
-
+import { Buttons, DefaultModal } from '../../../../../ownLib/my-ui-lib';
+import { ArrowRightOutlined } from '@ant-design/icons';
 const CustomerOrders = ({ CustomerDetails, close }) => {
+  const CompId = getSession('CompId');
+  const BranchId = getSession('BranchId');
+  const AppId = getSession('AppId');
+  const { RangePicker } = DatePicker;
+  const dispatch = useDispatch();
+  const [custpmerOrderData, setCustpmerOrderData] = useState();
+  console.log(CustomerDetails, 'CustomerDetails');
 
-    const CompId = getSession('CompId');
+  const [page, setpage] = useState(1);
-    const BranchId = getSession('BranchId');
+  const [selectedProducts, setSelectedProducts] = useState();
-    const AppId = getSession('AppId');
+  const [productModal, setProductModal] = useState(false);
-    const { RangePicker } = DatePicker;
+  const [selectedRange, setSelectedRange] = useState([dayjs(), dayjs()]);
-    const dispatch = useDispatch();
+  const [stockDetailModel, setStockDetailModel] = useState(false);
-    const [custpmerOrderData, setCustpmerOrderData] = useState();
+  const [StockDetails, setStockDetails] = useState([]);
-    console.log(CustomerDetails, 'CustomerDetails');
+  console.log(StockDetails, 'StockDetails');
+  useEffect(() => {
+    if (selectedRange && selectedRange[0] && selectedRange[1]) {
+      customerFetch();
+    }
+  }, [selectedRange]);
 
-    const [page, setpage] = useState(1);
+  const getApiRange = () => {
-    const [selectedProducts, setSelectedProducts] = useState();
+    if (!selectedRange || !selectedRange[0] || !selectedRange[1])
-    const [productModal, setProductModal] = useState(false);
+      return { fromDate: '', toDate: '' };
-    const [selectedRange, setSelectedRange] = useState([dayjs(), dayjs()]);
 
-    useEffect(() => {
+    return {
-        setSelectedRange([dayjs(), dayjs()]);
+      fromDate: selectedRange[0].format('YYYY-MM-DD'),
-        customerFetch();
+      toDate: selectedRange[1].format('YYYY-MM-DD'),
-    }, []);
-
-    useEffect(() => {
-        if (selectedRange && selectedRange[0] && selectedRange[1]) {
-            customerFetch();
-        }
-    }, [selectedRange]);
-
-    const getApiRange = () => {
-        if (!selectedRange || !selectedRange[0] || !selectedRange[1]) return { fromDate: '', toDate: '' };
-
-        return {
-            fromDate: selectedRange[0].format('YYYY-MM-DD'),
-            toDate: selectedRange[1].format('YYYY-MM-DD'),
-        };
     };
+  };
 
-    const customerFetch = async () => {
+  const customerFetch = async () => {
-        const { fromDate, toDate } = getApiRange();
+    const { fromDate, toDate } = getApiRange();
-        const data = {
+    const data = {
-            AppId: AppId,
+      AppId: AppId,
-            BranchId: BranchId,
+      BranchId: BranchId,
-            CompId: CompId,
+      CompId: CompId,
-            MobileNo: CustomerDetails?.value,
+      MobileNo: CustomerDetails?.value,
-            FromDate: fromDate,
+      FromDate: fromDate,
-            ToDate: toDate,
+      ToDate: toDate,
-        }
+    };
-        const response = await dispatch(CustomerOrderList(data)).unwrap();
+    const response = await dispatch(CustomerOrderList(data)).unwrap();
-        if (response?.data?.statusCode === 1) {
+    if (response?.data?.statusCode === 1) {
-            setCustpmerOrderData(response?.data?.data)
+      setCustpmerOrderData(response?.data?.data);
-        }
+    } else {
-        else {
+      setCustpmerOrderData();
-            setCustpmerOrderData()
+    }
-        }
+  };
 
+  const ViewProductdetails = (products) => {
+    setSelectedProducts(products);
+    setProductModal(true);
+  };
+  const handlePageChange = (current) => {
+    setpage(current);
+  };
+  // const handleRowDataClick = (record) => {
+  //     dispatch(changeOrderCardDetails(record?.productDetails));
+  //     close();
+  // };
+
+  // const getProductsearchData = async (prodName) => {
+  //     const data = {
+  //         CompId,
+  //         BranchId,
+  //         AppId,
+  //         ProdName: prodName
+  //     }
+  //     const response = await dispatch(getProductsearch(data)).unwrap();
+  //     console.log(response, 'response23232323');
+
+  // }
+  const getLastBuyQty = (index, variant, prodId) => {
+    const productDetails = custpmerOrderData?.[index]?.productDetails;
+    if (!productDetails) return 0;
+
+    let SalesQty = 0;
+    for (let i = 0; i < productDetails.length; i++) {
+      const product = productDetails[i];
+      if (product?.ProdId === prodId && product?.ProdVariantName === variant) {
+        SalesQty += product?.SalesQty;
+      }
     }
 
+    return SalesQty;
+  };
 
-    const ViewProductdetails = (products) => {
+  const getStockAllocation = (StockDtls, Qty) => {
-        setSelectedProducts(products);
+    let AllocatedData = [];
-        setProductModal(true);
+    let RemainngQty = Qty;
-    };
+    for (let i = 0; i < StockDtls?.length; i++) {
-    const handlePageChange = (current) => {
+      const stock = StockDtls[i];
-        setpage(current);
+      if (RemainngQty <= 0) break;
-    };
+      if (stock?.BalanceQty > 0) {
-    // const handleRowDataClick = (record) => {
+        const allocQty = Math.min(stock.BalanceQty, RemainngQty);
-    //     dispatch(changeOrderCardDetails(record?.productDetails));
+        AllocatedData.push({
-    //     close();
+          InwardDtlId: stock.InwardDtlId,
-    // };
+          AllocatedQty: allocQty,
-
+          MRP: stock?.MRP,
-
+          SellPrice: stock?.SellPrice,
-
+          InwardId: stock?.InwardId,
-    const getProductsearchData = async (prodName) => {
+          BatchRef: stock?.BatchRef,
-        const data = {
+          SuppId: stock?.SuppName,
-            CompId,
+          SuppName: stock?.SuppName,
-            BranchId,
+          InwardDate: stock?.InwardDate,
-            AppId,
+        });
-            ProdName: prodName
+        RemainngQty -= allocQty;
-        }
+      }
-        const response = await dispatch(getProductsearch(data)).unwrap();
-        console.log(response, 'response23232323');
-
     }
 
-    const handleRowDataClick = (record) => {
+    return AllocatedData;
-        if (!record?.productDetails?.length) return;
+  };
-        const prodName = record.productDetails[0]?.ProdName;
+  const handleRowDataClick = async (record, index) => {
-        getProductsearchData(prodName);
+    if (!record?.productDetails?.length) return;
-
+    let products = record?.productDetails?.map((e) => ({
-        console.log(record.productDetails[0]?.ProdName, 'record?.productDetails');
+      prodId: e?.ProdId,
-
+      ProdVariantName: e?.ProdVariantName,
-        const formattedData = record.productDetails.map((prod) => ({
+    }));
-            ProdCat: prod.ProdCat,
+    let Data = {
-            Type: prod.Type,
+      products: products,
-
-            OverallQuantity: prod.OverallQuantity ?? 0,
-            ActiveStatus: record.ActiveStatus,
-
-            AvailableFrom: prod.AvailableFrom,
-            AvailableTo: prod.AvailableTo,
-
-            Cess: prod.Cess ?? 0,
-            HSNCode: prod.HSN ?? null,
-
-            BrandName: prod.BrandName ?? null,
-            OpeningQty: prod.OpeningQty ?? 0,
-            PartNumber: prod.PartNumber ?? null,
-
-            ProdId: prod.ProdId,
-            ProdLogo: prod.ProdLogo ?? null,
-            ProdName: prod.ProdName,
-
-            QRCode: prod.QRCode ?? null,
-            QtyBasedPrice: prod.QtyBasedPrice ?? null,
-            Rack: prod.Rack ?? null,
-            Size: prod.Size,
-
-            StockAvailable: prod.StockAvailable ?? null,
-            TokenAvailable: prod.TokenAvailable ?? null,
-
-            TaxId: prod.ProdTaxId ?? null,
-            TaxPercentage: prod.ProdTaxPercentage ?? 0,
-            TaxName: prod.TaxName ?? null,
-
-            UniqueId: prod.UniqueId ?? null,
-            UomName: prod.UomName,
-
-            SinglePc: prod.SinglePc ?? null,
-            NoOfPcs: prod.NoOfPcs ?? 0,
-
-            ProdVariantName: prod.ProdVariantName ?? null,
-            VariantAvailableFrom: prod.VariantAvailableFrom ?? null,
-            VariantAvailableTo: prod.VariantAvailableTo ?? null,
-
-            BalanceQty: prod.BalanceQty ?? 0,
-            BatchRef: prod.BatchRef ?? null,
-
-            FullProductIdentifierDtls: prod.ProductIdentifierDtls ?? [],
-
-            InwardDate: prod.BookingDate ?? null,
-            InwardDtlId: prod.InwardDtlId ?? null,
-            InwardId: prod.InwardId ?? null,
-
-            MRP: prod.MRP ?? 0,
-            OrderRate: prod.Rate ?? 0,
-            SellingPrice: prod.Rate ?? 0,
-
-            SuppId: prod.SuppId ?? null,
-            SuppName: prod.SuppName ?? null,
-
-            OverAllPcs: prod.OverAllPcs ?? 0,
-            Offer: prod.OfferAmt ?? 0,
-
-            BookingTypeName: prod.BookingTypeName ?? null,
-            CounterName: prod.CounterName ?? null,
-
-            DiscountLimitType: prod.DiscountLimitType ?? null,
-            DiscountLimit: prod.DiscountLimit ?? 0,
-
-            BookedDate: prod.BookedDate ?? [],
-            BalanceBookedQty: prod.BalanceBookedQty ?? null,
-
-            ScaleType: prod.ScaleType ?? "",
-
-            localId: prod.localId ?? uuidv4(),
-
-            OrderQty: prod.SalesQty ?? 0,
-            TotalAmt: prod.TotalAmt ?? 0,
-            TaxAmt: prod.TaxAmt ?? 0,
-            WithoutTaxRate: prod.WithoutTaxRate ?? 0,
-        }));
-
-        dispatch(changeOrderCardDetails(formattedData));
-        close();
     };
+    let Response = await dispatch(getStockDetailsByVariantName(Data)).unwrap();
+    if (Response?.data?.statusCode == 1) {
+      const result =
+        Response?.data?.data?.flatMap((product) =>
+          product?.ProductDetail?.flatMap((detail) =>
+            detail?.ProdVariantDetails?.flatMap((variant) => {
+              const prevQty = getLastBuyQty(
+                index,
+                variant.ProdVariantName,
+                variant.ProdId
+              );
 
+              const allocations = getStockAllocation(
+                variant?.StockDetails,
+                prevQty
+              );
 
-    const columns = [
+              const safeAllocations =
-        {
+                allocations?.length > 0
-            title: 'Sl.No',
+                  ? allocations
-            key: 'sno',
+                  : [
-            align: 'center',
+                      {
-            render: (_, __, index) => (page - 1) * 10 + index + 1,
+                        InwardDtlId: variant?.StockDetails?.[0]?.InwardDtlId,
-            onCell: (record) => ({
+                        InwardId: variant?.StockDetails?.[0]?.InwardId,
-                onClick: () => handleRowDataClick(record),
+                        InwardDate: variant?.StockDetails?.[0]?.InwardDate,
-                style: { cursor: 'pointer' },
+                        AllocatedQty: prevQty,
-            }),
+                        SellPrice: variant?.StockDetails?.[0]?.SellPrice ?? 0,
-        },
+                        MRP: variant?.StockDetails?.[0]?.MRP ?? 0,
-        {
+                        OrderRate: variant?.StockDetails?.[0]?.SellPrice ?? 0,
-            title: 'Sales Date',
+                        TotalAmt:
-            dataIndex: 'SalesDate',
+                          (prevQty ?? 0) *
-            key: 'SalesDate',
+                          (variant?.StockDetails?.[0]?.SellPrice ?? 0),
-            align: 'center',
+                        BatchRef: null,
-            render: (text) => ExtractDateFormate(text),
+                        SuppId: null,
-            onCell: (record) => ({
+                        SuppName: null,
-                onClick: () => handleRowDataClick(record),
+                      },
-                style: { cursor: 'pointer' },
+                    ];
-            }),
-        },
-        {
-            title: 'Amount',
-            dataIndex: 'NetAmount',
-            key: 'NetAmount',
-            align: 'center',
-            onCell: (record) => ({
-                onClick: () => handleRowDataClick(record),
-                style: { cursor: 'pointer' },
-            }),
-        },
 
-        {
+              return safeAllocations.map((allocation) => ({
-            title: 'No of Products',
+                ...variant,
-            key: 'productCount',
-            align: 'center',
-            render: (_, record) => (
-                <span
-                    style={{ color: '#1292EE', fontSize: '16px', cursor: 'pointer' }}
-                    onClick={(e) => {
-                        e.stopPropagation(); // 👈 IMPORTANT
-                        ViewProductdetails(record.productDetails);
-                    }}
-                >
-                    {record?.productDetails?.length || 0}
-                </span>
-            ),
-        },
-    ];
 
-    const productColumns = [
+                // ===== PRODUCT LEVEL =====
-        {
+                ProdId: detail.ProdId,
-            title: 'Sl.No',
+                ProdName: detail.ProdName,
-            key: 'sno',
+                ProdCat: product.ProdCat,
-            align: 'center',
+                BrandName: detail.BrandName ?? null,
-            render: (_, __, index) => index + 1,
-        },
-        {
-            title: 'Product Name',
-            dataIndex: 'ProdName',
-            key: 'ProdName',
-            align: 'center',
-            render: (_, record) =>
-                `${record?.ProdName || '-'}${record?.UomName ? ` ${record.Size + record.UomName}` : ''}`,
-        },
-        {
-            title: 'Qty',
-            dataIndex: 'SalesQty',
-            key: 'SalesQty',
-            align: 'center',
-            render: (_, record) =>
-                record?.SalesQty || '-',
-        },
-        {
-            title: 'Variant',
-            key: 'ProdVariantName',
-            align: 'ProdVariantName',
-            render: (_, record) =>
-                record?.ProdVariantName || '-',
-        },
-        {
-            title: 'Rate',
-            key: 'Rate',
-            align: 'right',
-            render: (_, record) =>
-                record?.Rate || 0,
-        },
-        {
-            title: 'MRP',
-            key: 'MRP',
-            align: 'right',
-            render: (_, record) =>
-                record?.MRP || 0,
-        },
-    ];
 
-    const disableFutureDates = (current) => {
+                // ===== VARIANT / STOCK =====
-        return current && current > dayjs().endOf('day');
+                PreviousPurchasedQty: prevQty,
-    };
+                available:
-    const onRangeChange = (dates) => {
+                  detail?.StockAvailable === 'N'
-        setSelectedRange(dates);
+                    ? true
-    };
+                    : (variant.OverAllQty ?? 0) >= prevQty,
-    const getRangePickerValue = () => selectedRange || [dayjs(), dayjs()];
+                InwardDtlId: allocation.InwardDtlId,
+                InwardId: allocation.InwardId,
+                OrderQty: allocation.AllocatedQty,
+                InwardDate: allocation.InwardDate,
 
+                TotalAmt:
+                  (allocation.AllocatedQty ?? 0) * (allocation.SellPrice ?? 0),
 
-    return (
+                BalanceQty: detail.BalanceQty ?? 0,
-        <>
+                BatchRef: allocation.BatchRef,
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+
-                <div>
+                // ===== PRICE =====
-                    <p>Customer Name : {CustomerDetails?.CustName}</p>
+                MRP: allocation.MRP ?? 0,
-                    <p>Customer Name : {CustomerDetails?.value}</p>
+                OrderRate: allocation.SellPrice ?? 0,
-                </div>
+                SellingPrice: allocation.SellPrice ?? 0,
-                <div className='fromlabelDate'>
+
-                    <label>Select Date</label>
+                // ===== TAX =====
-                    <RangePicker
+                TaxId: detail.TaxId ?? null,
-                        onChange={onRangeChange}
+                TaxPercentage: detail.TaxPercentage ?? 0,
-                        format="DD-MMM-YYYY" // display format
+                TaxAmt: detail.TaxAmt ?? 0,
-                        disabledDate={disableFutureDates}
+                TaxName: detail.TaxName,
-                        inputReadOnly={true}
+                WithoutTaxRate: detail.WithoutTaxRate ?? 0,
-                        value={getRangePickerValue()}
+
-                    />
+                // ===== OTHERS =====
-                </div>
+                SinglePc: 'N',
+                Size: detail.Size,
+                StockAvailable: detail.StockAvailable,
+                PartNumber: detail.PartNumber,
+                SuppId: allocation.SuppId,
+                SuppName: allocation.SuppName,
+                QRCode: detail.QRCode,
+                QtyBasedPrice: detail.QtyBasedPrice,
+                HSNCode: detail.HSNCode ?? null,
+                Rack: detail.Rack ?? null,
+
+                BookingTypeName: 'TakeAway',
+                ActiveStatus: 'A',
+                ModelNumber: null,
+                NoOfPcs: 0,
+                Offer: 0,
+                OpeningQty: 0,
+                FullProductIdentifierDtls: [],
+                CounterName: product.CounterName,
+                Type: 'P',
+
+                // ===== META =====
+                UniqueId: detail.UniqueId,
+                UomName: detail.UomName,
+                ScaleType: detail.ScaleType ?? '',
+                TokenAvailable: detail.TokenAvailable,
+                localId: uuidv4(),
+              }));
+            })
+          )
+        ) ?? [];
+
+      setStockDetails(result);
+      setpage(1);
+      setStockDetailModel(true);
+    }
+
+    // close();
+  };
+
+  const handleSave = () => {
+    let Data = StockDetails?.filter((e) => e?.available == true)?.map(
+      ({ stockDetails, available, PreviousPurchasedQty, ...rest }) => rest
+    );
+    dispatch(changeOrderCardDetails(Data));
+    close();
+  };
+  const columns = [
+    {
+      title: 'Sl.No',
+      key: 'sno',
+      align: 'center',
+      render: (_, __, index) => (page - 1) * 10 + index + 1,
+      onCell: (record, index) => ({
+        onClick: () => handleRowDataClick(record, index),
+        style: { cursor: 'pointer' },
+      }),
+    },
+    {
+      title: 'Sales Date',
+      dataIndex: 'SalesDate',
+      key: 'SalesDate',
+      align: 'center',
+      render: (text) => ExtractDateFormate(text),
+      onCell: (record, index) => ({
+        onClick: () => handleRowDataClick(record, index),
+        style: { cursor: 'pointer' },
+      }),
+    },
+    {
+      title: 'Amount',
+      dataIndex: 'NetAmount',
+      key: 'NetAmount',
+      align: 'center',
+      onCell: (record, index) => ({
+        onClick: () => handleRowDataClick(record, index),
+        style: { cursor: 'pointer' },
+      }),
+    },
+
+    {
+      title: 'No of Products',
+      key: 'productCount',
+      align: 'center',
+      render: (_, record) => (
+        <span
+          style={{ color: '#1292EE', fontSize: '16px', cursor: 'pointer' }}
+          onClick={(e) => {
+            e.stopPropagation(); // 👈 IMPORTANT
+            ViewProductdetails(record.productDetails);
+          }}
+        >
+          {record?.productDetails?.length || 0}
+        </span>
+      ),
+    },
+  ];
+  const stockcolumns = [
+    {
+      title: 'Sl.No',
+      key: 'sno',
+      align: 'center',
+      render: (_, __, index) => (page - 1) * 10 + index + 1,
+    },
+    {
+      title: 'Product',
+      key: 'ProdName',
+      dataIndex: 'ProdName',
+      align: 'center',
+    },
+    {
+      title: 'Variant',
+      key: 'ProdVariantName',
+      dataIndex: 'ProdVariantName',
+      align: 'center',
+    },
+
+    {
+      title: 'Purchased Qty',
+      key: 'PreviousPurchasedQty',
+      dataIndex: 'PreviousPurchasedQty',
+      align: 'center',
+    },
+    {
+      title: 'Total Qty',
+      key: 'OverAllQty',
+      dataIndex: 'OverAllQty',
+      align: 'center',
+      render: (value, record) =>
+        record?.StockAvailable == 'N' ? '-' : record?.OverAllQty,
+    },
+
+    {
+      title: 'available',
+      key: 'available',
+      dataIndex: 'available',
+      align: 'center',
+      render: (value) => (value ? 'Yes' : 'No'),
+    },
+  ];
+
+  const productColumns = [
+    {
+      title: 'Sl.No',
+      key: 'sno',
+      align: 'center',
+      render: (_, __, index) => index + 1,
+    },
+    {
+      title: 'Product Name',
+      dataIndex: 'ProdName',
+      key: 'ProdName',
+      align: 'center',
+      render: (_, record) =>
+        `${record?.ProdName || '-'}${record?.UomName ? ` ${record.Size + record.UomName}` : ''}`,
+    },
+    {
+      title: 'Qty',
+      dataIndex: 'SalesQty',
+      key: 'SalesQty',
+      align: 'center',
+      render: (_, record) => record?.SalesQty || '-',
+    },
+    {
+      title: 'Variant',
+      key: 'ProdVariantName',
+      align: 'ProdVariantName',
+      render: (_, record) => record?.ProdVariantName || '-',
+    },
+    {
+      title: 'Rate',
+      key: 'Rate',
+      align: 'right',
+      render: (_, record) => record?.Rate || 0,
+    },
+    {
+      title: 'MRP',
+      key: 'MRP',
+      align: 'right',
+      render: (_, record) => record?.MRP || 0,
+    },
+  ];
+
+  const disableFutureDates = (current) => {
+    return current && current > dayjs().endOf('day');
+  };
+  const onRangeChange = (dates) => {
+    setSelectedRange(dates);
+  };
+  const getRangePickerValue = () => selectedRange || [dayjs(), dayjs()];
+
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div>
+          <p>Customer Name : {CustomerDetails?.CustName}</p>
+          <p>Customer Name : {CustomerDetails?.value}</p>
+        </div>
+        <div className="fromlabelDate">
+          <label>Select Date</label>
+          <RangePicker
+            onChange={onRangeChange}
+            format="DD-MMM-YYYY" // display format
+            disabledDate={disableFutureDates}
+            inputReadOnly={true}
+            value={getRangePickerValue()}
+          />
+        </div>
+      </div>
+
+      <div className="reportTable">
+        <Tables
+          columns={columns}
+          data={custpmerOrderData}
+          dataSource={custpmerOrderData}
+          pagination={handlePageChange}
+        />{' '}
+        <Modal
+          open={productModal}
+          title="Product Details"
+          width={700}
+          footer={null}
+          onCancel={() => setProductModal(false)}
+        >
+          <Tables
+            columns={productColumns}
+            data={selectedProducts}
+            pagination={false}
+          />
+        </Modal>
+      </div>
+
+      <DefaultModal
+        open={stockDetailModel}
+        title="Stock Details"
+        handleCancel={() => {
+          setStockDetailModel(false);
+          setStockDetails([]);
+        }}
+        footer={false}
+        width={700}
+        children={
+          <div>
+            <Tables
+              columns={stockcolumns}
+              data={StockDetails}
+              pagination={handlePageChange}
+            />{' '}
+            <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+              <Buttons
+                buttonText="SUBMIT"
+                color="901D77"
+                icon={<ArrowRightOutlined />}
+                handleSubmit={() => {
+                  handleSave();
+                }}
+              />
             </div>
+          </div>
+        }
+      />
+    </>
+  );
+};
 
-            <div className="reportTable">
+export default CustomerOrders;
-                <Tables
-                    columns={columns}
-                    data={custpmerOrderData}
-                    dataSource={custpmerOrderData}
-                    pagination={handlePageChange}
-                />{' '}
-
-
-                <Modal
-                    open={productModal}
-                    title="Product Details"
-                    width={700}
-                    footer={null}
-                    onCancel={() => setProductModal(false)}
-                >
-                    <Tables
-                        columns={productColumns}
-                        data={selectedProducts}
-                        pagination={false}
-                    />
-                </Modal>
-
-            </div>
-        </>
-    )
-}
-
-export default CustomerOrders;