Presupuestador_web/client/src/app/quotes/list.tsx
2024-07-24 18:01:31 +02:00

62 lines
2.1 KiB
TypeScript

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