Presupuestador_web/client/src/app/quotes/components/QuotesDataTable.tsx

import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
import { useDataTable, useDataTableContext } from "@/lib/hooks";
import { Badge, Button, Card, CardContent } from "@/ui";
import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
import { ColumnDef, Row } from "@tanstack/react-table";
import { t } from "i18next";
import { useMemo, useState } from "react";
import { Trans } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks";
import { QuotePDFPreview } from "./QuotePDFPreview";

export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();
  const [focusedQuote, setFocusedQuote] = useState<IListQuotes_Response_DTO | undefined>(undefined);
  const { useList } = useQuotes();

  const { data, isPending, isError, error } = useList({
    pagination: {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
    },
    status,
    quickSearchTerm: globalFilter,
  });

  const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
    () => [
      {
        id: "date" as const,
        accessor: "date",
        header: () => <>{t("quotes.list.columns.date")}</>,
        cell: ({ row: { original } }) => {
          const quoteDate = UTCDateValue.create(original.date);
          return quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-";
        },
        enableResizing: false,
        size: 10,
      },
      {
        id: "customer_information" as const,
        accessorKey: "customer_information",
        header: () => <>{t("quotes.list.columns.customer_information")}</>,
        cell: ({ row: { original } }) => (
          <div className='text-ellipsis'>
            {original.customer_information.split("\n").map((item, index) => {
              return (
                <span
                  key={index}
                  className={
                    index === 0 ? "font-medium" : "hidden text-sm text-muted-foreground md:inline"
                  }
                >
                  {item}
                  <br />
                </span>
              );
            })}
          </div>
        ),
        enableResizing: false,
        size: 10,
      },
      {
        id: "reference" as const,
        accessorKey: "reference",
        header: () => <>{t("quotes.list.columns.reference")}</>,
        enableResizing: false,
        size: 10,
      },
      {
        id: "status" as const,
        accessorKey: "status",
        header: () => <>{t("quotes.list.columns.status")}</>,
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        cell: ({ renderValue }: { renderValue: () => any }) => <Badge>{renderValue()}</Badge>,
        enableResizing: false,
        size: 10,
      },
      {
        id: "total_price" as const,
        accessor: "total_price",
        header: () => <div className='text-right'>{t("quotes.list.columns.total_price")}</div>,
        cell: ({ row: { original } }) => {
          const price = MoneyValue.create(original.total_price);
          return (
            <div className='text-right'>{price.isSuccess ? price.object.toFormat() : "-"}</div>
          );
        },
        enableResizing: false,
        size: 20,
      },
      {
        id: "edit-acion",
        header: () => null,
        cell: ({ row }: { row: Row<IListQuotes_Response_DTO> }) => (
          <Button
            variant='secondary'
            onClick={(e) => {
              e.preventDefault();
              navigate(`/quotes/edit/${row.original.id}`, { relative: "path" });
            }}
          >
            <Trans i18nKey={"common.edit"} />
            <span className='sr-only'>, {row.original.id}</span>
          </Button>
        ),
        enableResizing: false,
        size: 20,
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  const { table } = useDataTable({
    data: data?.items ?? [],
    columns: columns,
    pageCount: data?.total_pages ?? -1,
  });

  const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
    setFocusedQuote(row.original);
  };

  if (isError) {
    return <ErrorOverlay subtitle={(error as Error).message} />;
  }

  if (isPending) {
    return (
      <div className='grid items-start flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
        <Card className='grid items-start gap-4 auto-rows-max md:gap-8 lg:col-span-2'>
          <CardContent>
            <DataTableSkeleton
              columnCount={6}
              searchableColumnCount={1}
              filterableColumnCount={2}
              //cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem"]}
              shrinkZero
            />
          </CardContent>
        </Card>
        <div></div>
      </div>
    );
  }

  if (data?.total_items === 0 && !isFiltered) {
    return (
      <SimpleEmptyState
        subtitle='Empieza creando alguna cotización'
        buttonText=''
        onButtonClick={() => navigate("add", { relative: "path" })}
      />
    );
  }

  return (
    <div className='grid items-stretch flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
      <DataTable
        table={table}
        paginationOptions={{ visible: true }}
        className='grid items-start gap-4 auto-rows-max md:gap-8 lg:col-span-2'
        onRowClick={handleOnRowClick}
      >
        <DataTableToolbar table={table} />
      </DataTable>

      <QuotePDFPreview quote={focusedQuote} className='flex-1 ' />
    </div>
  );
};