marco.pms.web/src/components/AdvancePayment/AdvancePaymentList.jsx

import React from "react";
import { useExpenseTransactions } from "../../hooks/useExpense";
import Error from "../common/Error";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Loader, { SpinnerLoader } from "../common/Loader";

const AdvancePaymentList = ({ employeeId }) => {
  const { data, isError, isLoading, error, isFetching } =
    useExpenseTransactions(employeeId, { enabled: !!employeeId });
  console.log(data)
  // Handle no employee selected
  if (!employeeId) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "200px" }}
      >
        <p className="text-muted m-0">Please select an employee</p>
      </div>
    );
  }

  // Handle loading state
  if (isLoading || isFetching) {
    return (
      <div
        className="d-flex justify-content-center align-items-center"
        style={{ height: "200px" }}
      >
        <SpinnerLoader />
      </div>
    );
  }

  // Handle error state
  if (isError) {
    return (
      <div className="text-center  py-3">
        {error?.status === 404 ? (
          "No advance payment transactions found."
        ) : (
          <Error error={error} />
        )}
      </div>
    );
  }

  const records = Array.isArray(data) ? data : [];

  let currentBalance = 0;
  const rowsWithBalance = records.map((r) => {
    const isCredit = r.amount > 0;
    const credit = isCredit ? r.amount : 0;
    const debit = !isCredit ? Math.abs(r.amount) : 0;
    currentBalance += credit - debit;

    return {
      id: r.id,
      description: r.title || "-",
      projectName: r.project?.name || "-",
      createdAt: r.createdAt,
      credit,
      debit,
      balance: currentBalance,
    };
  });

  const columns = [
    { key: "description", label: "Description", align: "text-start" },
    {
      key: "credit",
      label: (
        <>
          Credit <i className="bx bx-rupee text-success"></i>
        </>
      ),
      align: "text-end",
    },
    {
      key: "debit",
      label: (
        <>
          Debit <i className="bx bx-rupee text-danger"></i>
        </>
      ),
      align: "text-end",
    },
    {
      key: "balance",
      label: (
        <>
          Balance <i className="bi bi-currency-rupee text-primary"></i>
        </>
      ),
      align: "text-end fw-bold",
    },
  ];

  // Handle empty records
  if (rowsWithBalance.length === 0) {
    return (
      <div className="text-center text-muted py-3">
        No advance payment records found.
      </div>
    );
  }
  console.log("Kartik", rowsWithBalance)
  return (
    <div className="table-responsive">
      <table className="table align-middle">
        <thead className="table_header_border">
          <tr>
            {columns.map((col) => (
              <th key={col.key} className={col.align}>
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.isArray(data) && data.length > 0 ? (
            data.map((row) => (
              <tr key={row.id}>
                {columns.map((col) => (
                  <td key={col.key} className={`${col.align} p-2`}>
                    {col.key === "credit" ? (
                      row.amount > 0 ? (
                        <span>{row.amount.toLocaleString("en-IN")}</span>
                      ) : (
                        "-"
                      )
                    ) : col.key === "debit" ? (
                      row.amount < 0 ? (
                        <span>{Math.abs(row.amount).toLocaleString("en-IN")}</span>
                      ) : (
                        "-"
                      )
                    ) : col.key === "balance" ? (
                      <span>{row.currentBalance?.toLocaleString("en-IN")}</span>
                    ) : (
                      <div className="d-flex flex-column text-start">
                        <small className="text-muted">
                          {formatUTCToLocalTime(row.paidAt)}
                        </small>
                        <small className="fw-semibold text-dark">
                          {row.project?.name || "-"}
                        </small>
                        <small>{row.title || "-"}</small>
                      </div>
                    )}
                  </td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={columns.length} className="text-center text-muted py-3">
                No advance payment records found.
              </td>
            </tr>
          )}
        </tbody>

        <tfoot className="table-secondary fw-bold">
          <tr>
            <td className="text-start p-3">Final Balance</td>
            <td className="text-end" colSpan="3">
              {currentBalance.toLocaleString("en-IN", {
                style: "currency",
                currency: "INR",
              })}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
};

export default AdvancePaymentList;