Presupuestador_web/client/src/app/quotes/list.tsx

import { DataTableProvider } from "@/lib/hooks";
import { Trans } from "react-i18next";
import { QuotesDataTable } from "./components";

import {
  Button,
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Toggle,
} from "@/ui";
import { useToggle } from "@wojtekmaj/react-hooks";
import { t } from "i18next";
import { EyeIcon, EyeOffIcon, HelpCircleIcon, PlusIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";

export const QuotesList = () => {
  const navigate = useNavigate();
  const [enabledPreview, toggleEnabledPreview] = useToggle(true);

  return (
    <DataTableProvider>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            <Trans i18nKey='quotes.list.title' />
          </h2>
          <p className='text-muted-foreground'>
            <Trans i18nKey='quotes.list.subtitle' />
          </p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/quotes/add")}>
            <PlusIcon className='w-4 h-4 mr-2' />
            {t("quotes.create.title")}
          </Button>
        </div>
      </div>

      <Tabs defaultValue='all'>
        <div className='flex items-baseline'>
          <TabsList>
            <TabsTrigger value='all'>
              <Trans i18nKey='quotes.list.tabs.all' />
            </TabsTrigger>
            <TabsTrigger value='draft'>
              <Trans i18nKey='quotes.list.tabs.draft' />
            </TabsTrigger>
            <TabsTrigger value='ready'>
              <Trans i18nKey='quotes.list.tabs.ready' />
            </TabsTrigger>
            <TabsTrigger value='delivered'>
              <Trans i18nKey='quotes.list.tabs.delivered' />
            </TabsTrigger>
            <TabsTrigger value='accepted'>
              <Trans i18nKey='quotes.list.tabs.accepted' />
            </TabsTrigger>
            <TabsTrigger value='rejected'>
              <Trans i18nKey='quotes.list.tabs.rejected' />
            </TabsTrigger>
            <TabsTrigger value='archived' className='hidden sm:flex'>
              <Trans i18nKey='quotes.list.tabs.archived' />
            </TabsTrigger>
          </TabsList>
          <div className='flex items-baseline justify-center mr-4 font-medium'>
            <Dialog>
              <DialogTrigger asChild>
                <Button variant='link' className='inline-flex items-center font-medium group'>
                  <Trans
                    i18nKey='quotes.list.tabs_title'
                    className='underline-offset-4 group-hover:underline'
                  />
                  <HelpCircleIcon className='w-4 h-4 ml-1 text-muted-foreground' />
                </Button>
              </DialogTrigger>
              <DialogContent className='sm:max-w-[425px]'>
                <DialogHeader>
                  <DialogTitle>Ayuda sobre el Estado de Cotizaciones</DialogTitle>
                </DialogHeader>
                <div className='grid gap-4 py-4'>
                  <p>
                    El estado de una cotización indica su posición actual en el proceso de negocio.
                  </p>
                  <p>Los estados posibles son:</p>
                  <ul className='pl-6 space-y-2 list-disc'>
                    <li>
                      <strong>Borrador:</strong> La cotización está en proceso de creación o
                      edición.
                    </li>
                    <li>
                      <strong>Preparado:</strong> La cotización está lista para ser enviada al
                      cliente.
                    </li>
                    <li>
                      <strong>Entregado:</strong> La cotización ha sido enviada al cliente.
                    </li>
                    <li>
                      <strong>Aceptado:</strong> El cliente ha aprobado la cotización.
                    </li>
                    <li>
                      <strong>Rechazado:</strong> El cliente no ha aceptado la cotización.
                    </li>
                    <li>
                      <strong>Arcivado:</strong> La cotización ha sido guardada para referencia
                      futura y ya no está activa.
                    </li>
                  </ul>
                  <p>
                    Utiliza estos estados para hacer un seguimiento eficiente de tus cotizaciones y
                    optimizar tu proceso de ventas. El estado <strong>Archivado</strong> es útil
                    para mantener un historial de cotizaciones pasadas sin que interfieran con las
                    cotizaciones activas.
                  </p>
                </div>
              </DialogContent>
            </Dialog>
          </div>
          <div className='flex items-center gap-2 ml-auto'>
            <Toggle
              aria-label='Show quote preview'
              variant={"outline"}
              defaultPressed={false}
              pressed={enabledPreview}
              onPressedChange={toggleEnabledPreview}
            >
              {enabledPreview ? (
                <>
                  <EyeOffIcon className='w-4 h-4 mr-2' />
                  {t("common.disable_preview")}
                </>
              ) : (
                <>
                  <EyeIcon className='w-4 h-4 mr-2' />
                  {t("common.enable_preview")}
                </>
              )}
            </Toggle>
          </div>
        </div>
        <TabsContent value='all'>
          <QuotesDataTable status='all' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='draft'>
          <QuotesDataTable status='draft' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='ready'>
          <QuotesDataTable status='ready' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='delivered'>
          <QuotesDataTable status='delivered' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='accepted'>
          <QuotesDataTable status='accepted' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='rejected'>
          <QuotesDataTable status='rejected' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='archived'>
          <QuotesDataTable status='archived' preview={enabledPreview} />
        </TabsContent>
      </Tabs>
    </DataTableProvider>
  );
};