77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { DataTableProvider } from "@/lib/hooks";
|
|
import { Trans } from "react-i18next";
|
|
import { QuotesDataTable } from "./components";
|
|
|
|
import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from "@/ui";
|
|
import { useToggle } from "@wojtekmaj/react-hooks";
|
|
import { t } from "i18next";
|
|
import { InfoIcon } from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export const QuotesList = () => {
|
|
const navigate = useNavigate();
|
|
const [enabledPreview, toggleEnabledPreview] = useToggle(false);
|
|
|
|
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'>
|
|
<span className='mr-4 font-medium'>Status</span>
|
|
<TabsList>
|
|
<TabsTrigger value='all'>
|
|
<Trans i18nKey='quotes.list.tabs.all' />
|
|
</TabsTrigger>
|
|
<TabsTrigger value='draft'>
|
|
<Trans i18nKey='quotes.list.tabs.draft' />
|
|
</TabsTrigger>
|
|
<TabsTrigger value='emitted'>
|
|
<Trans i18nKey='quotes.list.tabs.emitted' />
|
|
</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'>
|
|
<Toggle
|
|
aria-label='Show quote preview'
|
|
variant={"outline"}
|
|
defaultPressed={false}
|
|
pressed={enabledPreview}
|
|
onPressedChange={toggleEnabledPreview}
|
|
>
|
|
<InfoIcon className='w-4 h-4 mr-2' />
|
|
Quote preview
|
|
</Toggle>
|
|
</div>
|
|
</div>
|
|
<TabsContent value='all'>
|
|
<QuotesDataTable status='all' preview={enabledPreview} />
|
|
</TabsContent>
|
|
<TabsContent value='draft'>
|
|
<QuotesDataTable status='draft' preview={enabledPreview} />
|
|
</TabsContent>
|
|
<TabsContent value='archived'>
|
|
<QuotesDataTable status='archived' preview={enabledPreview} />
|
|
</TabsContent>
|
|
<TabsContent value='emitted'>
|
|
<QuotesDataTable status='emitted' preview={enabledPreview} />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</DataTableProvider>
|
|
);
|
|
};
|