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

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

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

import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
import { useDataTable, useDataTableContext } from "@/lib/hooks";
import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
import { ColumnDef, Row, Table } 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";

export const QuotesDataTable = ({
  status = "all",
  className,
}: {
  status?: string;
  className?: string;
}) => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();
  const [focusedRow, setFocusedRow] = useState<Row<IListQuotes_Response_DTO>>();
  const { useList, useReport } = useQuotes();

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

  const {
    data: reportData,
    isPending: reportIsPending,
    isError: reportIsError,
    error: errorReport,
  } = useReport(focusedRow ? focusedRow.original.id : undefined);

  const columns = useMemo<ColumnDef<IListQuotes_Response_DTO, any>[]>(
    () => [
      {
        id: "date" as const,
        accessor: "date",
        header: () => <>{t("quotes.list.columns.date")}</>,
        cell: ({ table, row: { index, original }, column, getValue }) => {
          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")}</>,
        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, table }: { row: Row<TData>; table: Table<TData> }) => (
          <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,
      },
    ],
    []
  );

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

  const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
    console.log("setFocusedRow", row.id);
    setFocusedRow(row);
  };

  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" })}
      />
    );
  }

  console.log(reportData);

  return (
    <div className='grid items-start 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>
      <div>
        <Card className='overflow-hidden' x-chunk='dashboard-05-chunk-4'>
          <CardHeader className='flex flex-row items-start bg-muted/50'></CardHeader>
          <CardContent>
            <PDFViewer
              file={reportData}
              className='aspect-[3/4] object-contain overflow-hidden border-2 border-dashed rounded-lg'
            />
          </CardContent>
        </Card>
      </div>
    </div>
  );
};