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

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

import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
import { t } from "i18next";
import { useNavigate } from "react-router-dom";

export const QuotesList = () => {
  const navigate = useNavigate();

  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")}>{t("quotes.create.title")}</Button>
        </div>
      </div>

      <Tabs defaultValue='all'>
        <div className='flex items-center'>
          <TabsList>
            <TabsTrigger value='all'>
              <Trans i18nKey='quotes.list.tabs.all' />
            </TabsTrigger>
            <TabsTrigger value='emitted'>
              <Trans i18nKey='quotes.list.tabs.emitted' />
            </TabsTrigger>
            <TabsTrigger value='draft'>
              <Trans i18nKey='quotes.list.tabs.draft' />
            </TabsTrigger>
            <TabsTrigger value='archived' className='hidden sm:flex'>
              <Trans i18nKey='quotes.list.tabs.archived' />
            </TabsTrigger>
          </TabsList>
          <div className='flex items-center gap-2 ml-auto'></div>
        </div>
        <TabsContent value='all'>
          <QuotesDataTable status='all' />
        </TabsContent>
        <TabsContent value='draft'>
          <QuotesDataTable status='draft' />
        </TabsContent>
        <TabsContent value='archived'>
          <QuotesDataTable status='archived' />
        </TabsContent>
        <TabsContent value='emitted'>
          <QuotesDataTable status='emitted' />
        </TabsContent>
      </Tabs>
    </DataTableProvider>
  );
};