Android_Retail/src/Pages/paymentpdfPage/DateWiseReportPdf.jsx

import React, { useEffect, useState } from 'react';
import logo from '../../Images/pozologoimg.png';
import { ExtractDateFormate } from '../../Services/Others';

const DateWiseReportPdf = ({
  OrderFromDate,
  OrderToDate,
  dataSource,
  TotalBill,
  TotalOrders,
  TotalBillAmount,
  TaxAmount,
  TotalNetAmount,
  datewiseData,
  TotalPreOrderAmount,
  TotalCharges,
  TotalDiscount,
}) => {

  let PrintDetailsdata = datewiseData?.[0]?.AddressDetails?.[0];
  console.log(PrintDetailsdata, 'hhhhhhhhhhhhhhhj');
  const [currentTime, setCurrentTime] = useState('');

  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={'RePrint'}>
      {/* <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',
              textAlign: 'left',
            }}
            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="DateWiseSales">Datewise Sales </p>
      <div className="Dates">
        <div className="DatesStyle">
          <p className="p">From Date : </p>
          <p className="p">{ExtractDateFormate(OrderFromDate)}</p>
        </div>

        <div className="DatesStyle">
          <p className="p">To Date : </p>
          <p className="p">{ExtractDateFormate(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' }}>
                Payment Type{' '}
              </th>
              <th className="th" style={{ textAlign: 'center' }}>
                Date{' '}
              </th>
              <th className="th" style={{ textAlign: 'center' }}>
                Count{' '}
              </th>
              <th className="th" style={{ textAlign: 'right' }}>
                Amount{' '}
              </th>
            </tr>
          </thead>
          <tbody>
            {dataSource?.map((item, index) => (
              <tr key={item.id}>
                <td className="td" style={{ textAlign: 'center' }}>
                  {' '}
                  {index + 1}
                </td>
                <td className="td" style={{ textAlign: 'left' }}>
                  {' '}
                  {item.PaymentMethod}
                </td>
                <td className="td" style={{ textAlign: 'center' }}>
                  {' '}
                  {changeDateFormat(item.Date)}
                </td>
                <td className="td" style={{ textAlign: 'center' }}>
                  {' '}
                  {item.CountOfPaymentType}
                </td>
                <td className="td" style={{ textAlign: 'right' }}>
                  {' '}
                  {item.NetAmount}
                </td>
              </tr>
            ))}
          </tbody>
        </table> */}


 <style>{`
    .table {
      width: 95%;
      border-collapse: collapse;
      font-family: Arial, sans-serif;
    }

    .table th,
    .table td {
      border: 1px solid #ccc;
      padding: 3px;
      text-align: center;
    }

    .table thead {
      background-color: #f2f2f2;
    }

    .table td:last-child,
    .table th:last-child {
      text-align: right;
    }
       .total-details p {
      font-size: 14px;
      margin: 4px 0;
    }

    .total-details .footer-time {
      font-size: 10px;
      padding: 1rem 1rem;
    }
  `}</style>

      <table className="table">
    <thead>
      <tr>
        <th rowSpan="2">S.No</th>
        {dataSource?.[0]?.Date && <th rowSpan="2">Date</th>}
        <th colSpan="2">Cash</th>
        <th colSpan="2">UPI</th>
        <th colSpan="2">Card</th>
        <th colSpan="2">Credit</th>
        <th rowSpan="2">Total</th>
      </tr>
      <tr>
        <th>Count</th>
        <th >Amt</th>
        <th>Count</th>
        <th>Amt</th>
        <th>Count</th>
        <th>Amt</th>
        <th>Count</th>
        <th>Amt</th>
      </tr>
    </thead>
    <tbody>
  {dataSource?.map((row, index) => {
    const {
      Date,
      CashCount = 0,
      CashAmount = 0,
      UpiCount = 0,
      UpiAmount = 0,
      CardCount = 0,
      CardAmount = 0,
      CreditCount = 0,
      CreditAmount = 0,
    } = row;

    const formattedDate = Date ? ExtractDateFormate(Date) : '';
    const totalAmount =
      Number(CashAmount || 0) +
      Number(UpiAmount || 0) +
      Number(CardAmount || 0) +
      Number(CreditAmount || 0);

    return (
      <tr key={Date + index}>
        <td>{index + 1}</td>
        {dataSource?.[0]?.Date && <td>{formattedDate }</td>}
        <td>{CashCount ?? 0}</td>
        <td style={{ textAlign: 'right'}}>{CashAmount ?? 0}</td>
        <td>{UpiCount ?? 0}</td>
        <td style={{ textAlign: 'right'}}>{UpiAmount ?? 0}</td>
        <td>{CardCount ?? 0}</td>
        <td style={{ textAlign: 'right'}}>{CardAmount ?? 0}</td>
        <td>{CreditCount ?? 0}</td>
        <td style={{ textAlign: 'right'}}>{CreditAmount ?? 0}</td>
        <td style={{ textAlign: 'right'}}>{totalAmount}</td>
      </tr>
    );
  })}
</tbody>

        </table>
      </div>

      {/* <div className="totalAmount"> Total Amount : {TotalBill}</div> */}
      <div>
        <p className="totaldetails"> Orders : {TotalOrders}</p>
        <p className="totaldetails">
          {' '}
          Bill Amount:{' '}
          {(TotalBillAmount || 0) - (TotalCharges || 0) + (TotalDiscount || 0)}
        </p>
        {TaxAmount > 0 && <p className="totaldetails"> Tax: {TaxAmount}</p>}
        {TotalPreOrderAmount > 0 && (
          <p className="totaldetails"> Preorder: {TotalPreOrderAmount}</p>
        )}
        {TotalCharges > 0 && (
          <p className="totaldetails"> Charges: {TotalCharges}</p>
        )}
        {TotalDiscount > 0 && (
          <p className="totaldetails"> Discount(-): {TotalDiscount}</p>
        )}

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

export default DateWiseReportPdf;