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

import { useDispatch } from 'react-redux';
import {
  changeOrderCardDetails,
  CustomerOrderList,
  getProductsearch,
  getStockDetailsByVariantName,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
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 [page, setpage] = useState(1);
  const [selectedProducts, setSelectedProducts] = useState();
  const [productModal, setProductModal] = useState(false);
  const [selectedRange, setSelectedRange] = useState([dayjs(), dayjs()]);
  const [stockDetailModel, setStockDetailModel] = useState(false);
  const [StockDetails, setStockDetails] = useState([]);
  console.log(StockDetails, 'StockDetails');
  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 { fromDate, toDate } = getApiRange();
    const data = {
      AppId: AppId,
      BranchId: BranchId,
      CompId: CompId,
      MobileNo: CustomerDetails?.value,
      FromDate: fromDate,
      ToDate: toDate,
    };
    const response = await dispatch(CustomerOrderList(data)).unwrap();
    if (response?.data?.statusCode === 1) {
      setCustpmerOrderData(response?.data?.data);
    } else {
      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 getStockAllocation = (StockDtls, Qty) => {
    let AllocatedData = [];
    let RemainngQty = Qty;
    for (let i = 0; i < StockDtls?.length; i++) {
      const stock = StockDtls[i];
      if (RemainngQty <= 0) break;
      if (stock?.BalanceQty > 0) {
        const allocQty = Math.min(stock.BalanceQty, RemainngQty);
        AllocatedData.push({
          InwardDtlId: stock.InwardDtlId,
          AllocatedQty: allocQty,
          MRP: stock?.MRP,
          SellPrice: stock?.SellPrice,
          InwardId: stock?.InwardId,
          BatchRef: stock?.BatchRef,
          SuppId: stock?.SuppName,
          SuppName: stock?.SuppName,
          InwardDate: stock?.InwardDate,
        });
        RemainngQty -= allocQty;
      }
    }

    return AllocatedData;
  };
  const handleRowDataClick = async (record, index) => {
    if (!record?.productDetails?.length) return;
    let products = record?.productDetails?.map((e) => ({
      prodId: e?.ProdId,
      ProdVariantName: e?.ProdVariantName,
    }));
    let Data = {
      products: products,
    };
    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 safeAllocations =
                allocations?.length > 0
                  ? allocations
                  : [
                      {
                        InwardDtlId: variant?.StockDetails?.[0]?.InwardDtlId,
                        InwardId: variant?.StockDetails?.[0]?.InwardId,
                        InwardDate: variant?.StockDetails?.[0]?.InwardDate,
                        AllocatedQty: prevQty,
                        SellPrice: variant?.StockDetails?.[0]?.SellPrice ?? 0,
                        MRP: variant?.StockDetails?.[0]?.MRP ?? 0,
                        OrderRate: variant?.StockDetails?.[0]?.SellPrice ?? 0,
                        TotalAmt:
                          (prevQty ?? 0) *
                          (variant?.StockDetails?.[0]?.SellPrice ?? 0),
                        BatchRef: null,
                        SuppId: null,
                        SuppName: null,
                      },
                    ];

              return safeAllocations.map((allocation) => ({
                ...variant,

                // ===== PRODUCT LEVEL =====
                ProdId: detail.ProdId,
                ProdName: detail.ProdName,
                ProdCat: product.ProdCat,
                BrandName: detail.BrandName ?? null,

                // ===== VARIANT / STOCK =====
                PreviousPurchasedQty: prevQty,
                available:
                  detail?.StockAvailable === 'N'
                    ? true
                    : (variant.OverAllQty ?? 0) >= prevQty,
                InwardDtlId: allocation.InwardDtlId,
                InwardId: allocation.InwardId,
                OrderQty: allocation.AllocatedQty,
                InwardDate: allocation.InwardDate,

                TotalAmt:
                  (allocation.AllocatedQty ?? 0) * (allocation.SellPrice ?? 0),

                BalanceQty: detail.BalanceQty ?? 0,
                BatchRef: allocation.BatchRef,

                // ===== PRICE =====
                MRP: allocation.MRP ?? 0,
                OrderRate: allocation.SellPrice ?? 0,
                SellingPrice: allocation.SellPrice ?? 0,

                // ===== TAX =====
                TaxId: detail.TaxId ?? null,
                TaxPercentage: detail.TaxPercentage ?? 0,
                TaxAmt: detail.TaxAmt ?? 0,
                TaxName: detail.TaxName,
                WithoutTaxRate: detail.WithoutTaxRate ?? 0,

                // ===== OTHERS =====
                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>
        }
      />
    </>
  );
};

export default CustomerOrders;