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

import { Card, CardContent } from "@/ui";

import { DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";

import { DataTable } from "@/components";
import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
import { useDataTable, useDataTableContext } from "@/lib/hooks";
import { IListQuotes_Response_DTO, MoneyValue } from "@shared/contexts";
import { ColumnDef, Row } from "@tanstack/react-table";
import { t } from "i18next";
import { useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { useQuotesList } from "../hooks";

export const QuotesDataTable = () => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();

  const { data, isPending, isError, error } = useQuotesList({
    pagination: {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize,
    },
    searchTerm: globalFilter,
  });

  const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
    () => [
      {
        id: "id" as const,
        accessorKey: "id",
        enableResizing: false,
        size: 10,
      },
      {
        id: "article_id" as const,
        accessorKey: "id_article",
        enableResizing: false,
        size: 10,
      },
      {
        id: "catalog_name" as const,
        accessorKey: "catalog_name",
        enableResizing: false,
        size: 10,
      },
      {
        id: "description" as const,
        accessorKey: "description",
        header: () => <>{t("catalog.list.columns.description")}</>,
        enableResizing: false,
        size: 100,
      },
      {
        id: "points" as const,
        accessorKey: "points",
        header: () => <div className='text-right'>{t("catalog.list.columns.points")}</div>,
        cell: ({ renderValue }: { renderValue: () => any }) => (
          <div className='text-right'>{renderValue()}</div>
        ),
        enableResizing: false,
        size: 20,
      },
      {
        id: "retail_price" as const,
        accessorKey: "retail_price",
        header: () => <div className='text-right'>{t("catalog.list.columns.retail_price")}</div>,
        cell: ({ row }: { row: Row<any> }) => {
          const price = MoneyValue.create(row.original.retail_price).object;
          return <div className='text-right'>{price.toFormat()}</div>;
        },
        enableResizing: false,
        size: 20,
      },
    ],
    []
  );

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

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

  if (isPending) {
    return (
      <Card>
        <CardContent>
          <DataTableSkeleton
            columnCount={6}
            searchableColumnCount={1}
            filterableColumnCount={2}
            //cellWidths={["10rem", "40rem", "12rem", "12rem", "8rem"]}
            shrinkZero
          />
        </CardContent>
      </Card>
    );
  }

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

  return (
    <>
      <DataTable table={table} paginationOptions={{ visible: true }}>
        <DataTableToolbar table={table} />
      </DataTable>
    </>
  );
};