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

import {
  ColorBadge,
  DataTable,
  DataTableSkeleton,
  ErrorOverlay,
  SimpleEmptyState,
} from "@/components";
import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
import { useDataTable, useDataTableContext } from "@/lib/hooks";
import {
  Button,
  Card,
  CardContent,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/ui";
import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
import { ColumnDef, Row } from "@tanstack/react-table";
import { t } from "i18next";
import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useQuotes } from "../hooks";
import { QuotePDFPreview } from "./QuotePDFPreview";

export const QuotesDataTable = ({
  status = "all",
  preview = false,
}: {
  status?: string;
  preview?: boolean;
}) => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();

  const [activeRow, setActiveRow] = useState<Row<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 (
            <div className='text-right text-ellipsis'>
              {quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-"}
            </div>
          );
        },
        enableResizing: false,
      },
      {
        id: "customer_information" as const,
        accessorKey: "customer_information",
        header: () => <>{t("quotes.list.columns.customer_information")}</>,
        cell: ({ row: { original } }) => (
          <div className='text-left 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: 640,
      },
      {
        id: "reference" as const,
        accessorKey: "reference",
        header: () => <>{t("quotes.list.columns.reference")}</>,
        cell: ({ renderValue }) => <div className='text-left text-ellipsis'>{renderValue()}</div>,
        enableResizing: false,
      },
      {
        id: "status" as const,
        accessorKey: "status",
        header: () => <>{t("quotes.list.columns.status")}</>,
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        cell: ({ row: { original } }) => <ColorBadge label={original.status} />,
        enableResizing: false,
      },
      {
        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,
      },
      {
        id: "row-actions",
        header: () => null,
        cell: ({ row }: { row: Row<IListQuotes_Response_DTO> }) => (
          <div className='flex items-center gap-1 ml-auto'>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  size='sm'
                  variant='outline'
                  className='h-8 gap-1'
                  onClick={(e) => {
                    e.preventDefault();
                    navigate(`/quotes/edit/${row.original.id}`, { relative: "path" });
                  }}
                >
                  <FilePenLineIcon className='h-3.5 w-3.5' />
                  <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
                    {t("quotes.list.columns.actions.edit")}
                  </span>
                </Button>
              </TooltipTrigger>
              <TooltipContent>
                <p>{t("quotes.list.columns.actions.edit")}</p>
              </TooltipContent>
            </Tooltip>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button size='icon' variant='outline' className='w-8 h-8'>
                  <MoreVerticalIcon className='h-3.5 w-3.5' />
                  <span className='sr-only'>More</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align='end'>
                <DropdownMenuItem>Edit</DropdownMenuItem>
                <DropdownMenuItem>Export</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Trash</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        ),
        enableResizing: false,
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  );

  const handleOnPaginationChange = () => {
    //setActiveRow(undefined);
  };

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

  const handleOnRowClick = (row: Row<IListQuotes_Response_DTO>) => {
    setActiveRow(row);
  };

  useEffect(() => {
    if (table && data && data?.total_pages > 0) {
      setActiveRow(table.getRowModel().rows[0]);
    }
  }, [data, table]);

  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 (
    <ResizablePanelGroup direction='horizontal' className='flex items-stretch flex-1 gap-4'>
      <ResizablePanel defaultSize={preview ? 75 : 100} className='flex items-stretch flex-1'>
        <DataTable
          table={table}
          paginationOptions={{ visible: true }}
          className='grid items-start flex-1 gap-4 auto-rows-max md:gap-8 lg:col-span-2'
          onRowClick={handleOnRowClick}
          activeRowIndex={activeRow?.index}
        >
          <DataTableToolbar table={table} />
        </DataTable>
      </ResizablePanel>
      {preview && <ResizableHandle withHandle />}
      {preview && (
        <ResizablePanel defaultSize={25} className='flex items-stretch flex-1'>
          <QuotePDFPreview quote={activeRow?.original} className='flex-1' />
        </ResizablePanel>
      )}
    </ResizablePanelGroup>
  );
};