openmonetis/components/relatorios/category-report-table.tsx

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { CategoryReportData } from "@/lib/relatorios/types";
import { formatCurrency, formatPeriodLabel } from "@/lib/relatorios/utils";
import { getIconComponent } from "@/lib/utils/icons";
import DotIcon from "../dot-icon";
import { Card } from "../ui/card";
import { CategoryCell } from "./category-cell";

interface CategoryReportTableProps {
  data: CategoryReportData;
}

export function CategoryReportTable({ data }: CategoryReportTableProps) {
  const { categories, periods, totals, grandTotal } = data;

  return (
    <Card className="px-6 py-4">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[280px] min-w-[280px] font-bold">
              Categoria
            </TableHead>
            {periods.map((period) => (
              <TableHead
                key={period}
                className="text-right min-w-[120px] font-bold"
              >
                {formatPeriodLabel(period)}
              </TableHead>
            ))}
            <TableHead className="text-right min-w-[120px] font-bold">
              Total
            </TableHead>
          </TableRow>
        </TableHeader>

        <TableBody>
          {categories.map((category) => {
            const Icon = category.icon ? getIconComponent(category.icon) : null;
            const isReceita = category.type.toLowerCase() === "receita";
            const dotColor = isReceita
              ? "bg-green-600 dark:bg-green-400"
              : "bg-red-600 dark:bg-red-400";

            return (
              <TableRow key={category.categoryId}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <DotIcon bg_dot={dotColor} />
                    {Icon && <Icon className="h-4 w-4 shrink-0" />}
                    <span className="font-bold truncate">{category.name}</span>
                  </div>
                </TableCell>
                {periods.map((period, periodIndex) => {
                  const monthData = category.monthlyData.get(period);
                  const isFirstMonth = periodIndex === 0;

                  return (
                    <TableCell key={period} className="text-right">
                      <CategoryCell
                        value={monthData?.amount ?? 0}
                        previousValue={monthData?.previousAmount ?? 0}
                        categoryType={category.type}
                        isFirstMonth={isFirstMonth}
                      />
                    </TableCell>
                  );
                })}
                <TableCell className="text-right font-semibold">
                  {formatCurrency(category.total)}
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>

        <TableFooter>
          <TableRow>
            <TableCell className="min-h-[2.5rem]">Total Geral</TableCell>
            {periods.map((period) => {
              const periodTotal = totals.get(period) ?? 0;
              return (
                <TableCell
                  key={period}
                  className="text-right font-semibold min-h-8"
                >
                  {formatCurrency(periodTotal)}
                </TableCell>
              );
            })}
            <TableCell className="text-right font-semibold min-h-8">
              {formatCurrency(grandTotal)}
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </Card>
  );
}