92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
|
import { Trans } from "react-i18next";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Label,
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
Tabs,
|
||
|
|
TabsContent,
|
||
|
|
TabsList,
|
||
|
|
TabsTrigger,
|
||
|
|
} from "@repo/shadcn-ui/components";
|
||
|
|
|
||
|
|
import { t } from "i18next";
|
||
|
|
import { PlusIcon } from "lucide-react";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
import { InvoicesGrid } from "../components/invoices-grid";
|
||
|
|
|
||
|
|
export const InvoicesList = () => {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [status, setStatus] = useState("all");
|
||
|
|
|
||
|
|
const InvoiceStatuses = [
|
||
|
|
{ value: "all", label: t("Invoices.list.tabs.all") },
|
||
|
|
{ value: "draft", label: t("Invoices.list.tabs.draft") },
|
||
|
|
{ value: "ready", label: t("Invoices.list.tabs.ready") },
|
||
|
|
{ value: "delivered", label: t("Invoices.list.tabs.delivered") },
|
||
|
|
{ value: "accepted", label: t("Invoices.list.tabs.accepted") },
|
||
|
|
{ value: "rejected", label: t("Invoices.list.tabs.rejected") },
|
||
|
|
{ value: "archived", label: t("Invoices.list.tabs.archived") },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className='flex items-center justify-between space-y-2'>
|
||
|
|
<div>
|
||
|
|
<h2 className='text-2xl font-bold tracking-tight'>
|
||
|
|
<Trans i18nKey='Invoices.list.title' />
|
||
|
|
</h2>
|
||
|
|
<p className='text-muted-foreground'>
|
||
|
|
<Trans i18nKey='Invoices.list.subtitle' />
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className='flex items-center space-x-2'>
|
||
|
|
<Button onClick={() => navigate("/Invoices/add")}>
|
||
|
|
<PlusIcon className='w-4 h-4 mr-2' />
|
||
|
|
{t("Invoices.create.title")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Tabs value={status} onValueChange={setStatus}>
|
||
|
|
<div className='flex flex-col items-start justify-between mb-4 sm:flex-row sm:items-center'>
|
||
|
|
<div className='w-full mb-4 sm:w-auto sm:mb-0'>
|
||
|
|
<TabsList className='hidden sm:flex'>
|
||
|
|
{InvoiceStatuses.map((s) => (
|
||
|
|
<TabsTrigger key={s.value} value={s.value}>
|
||
|
|
{s.label}
|
||
|
|
</TabsTrigger>
|
||
|
|
))}
|
||
|
|
</TabsList>
|
||
|
|
<div className='flex items-center w-full space-x-2 sm:hidden'>
|
||
|
|
<Label>{t("Invoices.list.tabs_title")}</Label>
|
||
|
|
<Select value={status} onValueChange={setStatus}>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder='Seleccionar estado' />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{InvoiceStatuses.map((s) => (
|
||
|
|
<SelectItem key={s.value} value={s.value}>
|
||
|
|
{s.label}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{InvoiceStatuses.map((s) => (
|
||
|
|
<TabsContent key={s.value} value={s.value}>
|
||
|
|
<InvoicesGrid />
|
||
|
|
</TabsContent>
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|