Android_Retail/src/Pages/paymentpdfPage/CategorywiseReport.jsx

import React, { useEffect, useState } from 'react';
import logo from '../../Images/pozologoimg.png';
import { ExtractDateFormate } from '../../Services/Others';
import { useSelector } from 'react-redux';
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin';

const CategoryWiseReportPdf = ({
  OrderToDate,
  OrderFromDate,
  itemData,
  TotalAmount,
  TotalTaxAmount,
  TotalCharges,
  TotalPreOrderAmount,
  TotalDiscount,
}) => {
  const orderFromDate = ExtractDateFormate(OrderFromDate);
  const orderToDate = ExtractDateFormate(OrderToDate);
  let PrintDetailsdata = itemData?.[0]?.AddressDetails?.[0];
  console.log(PrintDetailsdata, 'hhhhhhhhhhhhhhhj');
  const [currentTime, setCurrentTime] = useState('');
  const appPreferences = useSelector(ApplicationPreferences);
    const commonModulePreference = appPreferences?.find(
      (preference) => preference?.PreferredCatName === "Common Module"
    )?.PreferenceCatDetails;
    const sportsAppPreference = commonModulePreference?.find(
      (preference) => preference?.PreferredSubCatName === "SportsApp" && preference?.PreferredStatus === 'Y'
    );

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      let hours = now.getHours();
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const ampm = hours >= 12 ? 'PM' : 'AM';
      hours = hours % 12 || 12;
      setCurrentTime(`${hours}:${minutes} ${ampm}`);
    };

    updateTime();
    const interval = setInterval(updateTime, 60000);

    return () => clearInterval(interval);
  }, []);
  return (
    <>
      <div id={'RePrint2'}>
        {/* <div className="imgDiv">
    <img src={logo} />
  </div> */}
        <div
          className="wc-header"
          style={{
            fontSize: '10px',
            display: 'flex',
            gap: '1rem',
            margin: '0.5rem 0.5rem',
          }}
        >
          {/* <div className="imagelogo">
            <img
              style={{ width: '50px', height: '60px' }}
              src={PrintDetailsdata?.CompLogo}
              alt=""
              className="imagelogo"
            />
          </div> */}
          {PrintDetailsdata?.CompLogo && (
            <div className="imagelogo">
              <img
                style={{ width: '50px', height: '60px' }}
                src={PrintDetailsdata.CompLogo}
                alt="Company Logo"
                className="imagelogo"
              />
          </div>
          )}

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
            }}
            className="infoOfMandi"
          >
            <div
              style={{
                textTransform: 'uppercase',
                padding: '4px 2px',
                fontSize: '14px',
                fontWeight: '600',
              }}
              className="mandiName"
            >
              {PrintDetailsdata?.BranchName}{' '}
              {PrintDetailsdata?.BrAppSpecificName}
            </div>
            <div style={{ borderBottom: '1px solid' }}></div>
            {PrintDetailsdata?.Address1 && (
              <div>{PrintDetailsdata?.Address1} </div>
            )}
            {PrintDetailsdata?.Address2 && (
              <div>
                {PrintDetailsdata?.Address2}
                {PrintDetailsdata?.Zip && '-' + PrintDetailsdata?.Zip}
              </div>
            )}
            {PrintDetailsdata?.BrMobile && (
              <p>
                {PrintDetailsdata?.BrMobile}
                {PrintDetailsdata?.BrMobile2 &&
                  ' , ' + PrintDetailsdata?.BrMobile2}
              </p>
            )}
          </div>
        </div>
        <p className="ItemWiseSales">Category Wise Sales Report</p>
        <div className="Dates">
          <div className="DatesStyle">
            <p className="p">From Date:</p>
            <p className="p">{orderFromDate}</p>
          </div>

          <div className="DatesStyle">
            <p className="p">To Date:</p>
            <p className="p">{orderToDate}</p>
          </div>
        </div>

        <div className="Pdf-Table-Div">
          <table className="Table">
            <thead>
              <tr>
                <th className="th" style={{ textAlign: 'center' }}>
                  S.No
                </th>
                <th className="th" style={{ textAlign: 'left' }}>
                  Category
                </th>
                <th className="th" style={{ textAlign: 'center' }}>
                  Qty
                </th>
                <th className="th" style={{ textAlign: 'right' }}>
                  Amount
                </th>
              </tr>
            </thead>
            <tbody>
              {itemData?.map((item, index) => (
                <tr key={index}>
                  <td className="td" style={{ textAlign: 'center' }}>
                    {index + 1}
                  </td>
                 {sportsAppPreference ? <td className="td" style={{ textAlign: 'left' }}>
                    {item.ProdCatName || item.name ? `${item.ProdCatName || item.name} ${item.ProdSubCatName ? ` (${item.ProdSubCatName})` : ''}` : ''}
                  </td> : <td className="td" style={{ textAlign: 'left' }}>{item.ProdCatName || item.name}</td>}
                  <td className="td" style={{ textAlign: 'center' }}>
                    {item.SalesQty}
                  </td>
                  <td className="td" style={{ textAlign: 'right' }}>
                    {item.TotalAmt}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end",  paddingRight:'70px'}}>
          <p className="totaldetails"> Bill Amount: { parseFloat(TotalAmount).toFixed(2) || 0}</p>
          {TotalTaxAmount > 0 && (
            <p className="totaldetails"> Tax: {parseFloat(TotalTaxAmount).toFixed(2)}</p>
          )}
          {TotalPreOrderAmount > 0 && (
            <p className="totaldetails"> Preorder: {parseFloat(TotalPreOrderAmount).toFixed(2)}</p>
          )}
          {TotalCharges > 0 && (
            <p className="totaldetails"> Charges: {parseFloat(TotalCharges).toFixed(2)}</p>
          )}
          {TotalDiscount > 0 && (
            <p className="totaldetails"> Discount(-): {parseFloat(TotalDiscount).toFixed(2)}</p>
          )}

          <p className="totaldetails">-------------------------</p>
          <p className="totaldetails">
            {' '}
            Net:{' '}
            {Math.round(
              TotalAmount +
              (TotalTaxAmount || 0) +
              (TotalCharges || 0) +
              (TotalPreOrderAmount || 0) -
              (TotalDiscount || 0)
            )}
          </p>
        </div>
        {/* <p className="totalAmount">TotalAmount : {TotalAmount}</p> */}
        {/* current Time  */}
        <div style={{ padding: '1rem 1rem' }}>
          <p style={{ fontSize: '10px' }}>Time : {currentTime}</p>
        </div>
      </div>
    </>
  );
};

export default CategoryWiseReportPdf;