marco.pms.web/src/components/Dashboard/ExpenseAnalysis.jsx

import React, { useEffect, useMemo } from "react";
import Chart from "react-apexcharts";
import { useExpenseAnalysis } from "../../hooks/useDashboard_Data";
import { useSelectedProject } from "../../slices/apiDataManager";
import { DateRangePicker1 } from "../common/DateRangePicker";
import { FormProvider, useForm } from "react-hook-form";
import { formatCurrency, localToUtc } from "../../utils/appUtils";
import { SpinnerLoader } from "../common/Loader";

const ExpenseAnalysis = () => {
  const projectId = useSelectedProject();

  const methods = useForm({
    defaultValues: { startDate: "", endDate: "" },
  });

  const { watch } = methods;
  const [startDate, endDate] = watch(["startDate", "endDate"]);

  const { data, isLoading, isError, error, isFetching } = useExpenseAnalysis(
    projectId,
    startDate ? localToUtc(startDate) : null,
    endDate ? localToUtc(endDate) : null
  );

  if (isError) return <div>{error.message}</div>;

  const report = data?.report ?? [];
  const { labels, series, total } = useMemo(() => {
    const labels = report.map((item) => item.projectName);
    const series = report.map((item) => item.totalApprovedAmount || 0);
    const total = formatCurrency(data?.totalAmount || 0);
    return { labels, series, total };
  }, [report, data?.totalAmount]);

  const donutOptions = {
    chart: { type: "donut" },
    labels,
    legend: { show: false },
    dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
    colors: ["#7367F0", "#28C76F", "#FF9F43", "#EA5455", "#00CFE8", "#FF78B8"],
    plotOptions: {
      pie: {
        donut: {
          size: "70%",
          labels: {
            show: true,
            total: {
              show: true,
              label: "Total",
              fontSize: "16px",
              formatter: () => `${total}`,
            },
          },
        },
      },
    },
    responsive: [
      {
        breakpoint: 1200,
        options: {
          chart: { width: "100%", height: 350 },
          legend: { position: "bottom" },
        },
      },
      {
        breakpoint: 992,
        options: {
          chart: { width: "100%", height: 300 },
          dataLabels: { style: { fontSize: "11px" } },
        },
      },
      {
        breakpoint: 576,
        options: {
          chart: { width: "100%", height: 250 },
          legend: { fontSize: "10px" },
          plotOptions: {
            pie: { donut: { size: "65%" } },
          },
        },
      },
    ],
  };

  return (
    <>
      {/* Header */}
      <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
        <div className="text-start w-100">
          <p className="mb-1 fw-medium fs-6 fs-md-5">Expense Breakdown</p>
          <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p>
        </div>

        <div className="d-flex justify-content-start justify-content-md-end te w-75">
          <FormProvider {...methods}>
            <DateRangePicker1 />
          </FormProvider>
        </div>
      </div>


      <div className="card-body position-relative">
        {isLoading && (
          <div
            className="d-flex justify-content-center align-items-center"
            style={{ minHeight: "50vh" }}
          >
            <SpinnerLoader />
          </div>
        )}

        {!isLoading && report.length === 0 && (
          <div
            className="d-flex justify-content-center align-items-center text-muted"
            style={{ height: "300px" }}
          >
            No data found
          </div>
        )}

        {!isLoading && report.length > 0 && (
          <>
            {isFetching && (
              <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
                <span>Loading...</span>
              </div>
            )}

            <div className="d-flex justify-content-center mb-3">
              <Chart
                options={donutOptions}
                series={series}
                type="donut"
                width="100%"
                height={320}
              />
            </div>

            <div className="mb-2 w-100">
              <div className="row g-2">
                {report.map((item, idx) => (
                  <div
                    className="col-12 col-sm-6 d-flex align-items-start"
                    key={idx}
                  >
                    <div className="avatar me-2">
                      <span
                        className="avatar-initial rounded-2"
                        style={{
                          backgroundColor:
                            donutOptions.colors[idx % donutOptions.colors.length],
                        }}
                      >
                        <i className="bx bx-receipt fs-4"></i>
                      </span>
                    </div>
                    <div className="d-flex flex-column gap-1 text-start">
                      <small className="fw-semibold">{item.projectName}</small>
                      <span className="fw-semibold text-muted ms-1">
                        {formatCurrency(item.totalApprovedAmount)}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
};

export default ExpenseAnalysis;