108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
|
|
import { Button } from "@repo/shadcn-ui/components";
|
|
import { PlusIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { CustomerInvoicesListGrid } from "../components";
|
|
import { useTranslation } from "../i18n";
|
|
|
|
export const CustomerInvoicesList = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [status, setStatus] = useState("all");
|
|
|
|
/*const CustomerInvoiceStatuses = [
|
|
{ value: "all", label: t("customerInvoices.list.tabs.all") },
|
|
{ value: "draft", label: t("customerInvoices.list.tabs.draft") },
|
|
{ value: "ready", label: t("customerInvoices.list.tabs.ready") },
|
|
{ value: "delivered", label: t("customerInvoices.list.tabs.delivered") },
|
|
{ value: "accepted", label: t("customerInvoices.list.tabs.accepted") },
|
|
{ value: "rejected", label: t("customerInvoices.list.tabs.rejected") },
|
|
{ value: "archived", label: t("customerInvoices.list.tabs.archived") },
|
|
];*/
|
|
|
|
return (
|
|
<>
|
|
<AppBreadcrumb />
|
|
<AppContent>
|
|
<div className='flex items-center justify-between space-y-2'>
|
|
<div>
|
|
<h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
|
|
<p className='text-muted-foreground'>{t("pages.list.description")}</p>
|
|
</div>
|
|
<div className='flex items-center space-x-2'>
|
|
<Button
|
|
onClick={() => navigate("/customer-invoices/create")}
|
|
className='cursor-pointer'
|
|
>
|
|
<PlusIcon className='w-4 h-4 mr-2' />
|
|
{t("pages.create.title")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-col w-full h-full py-4'>
|
|
<CustomerInvoicesListGrid />
|
|
</div>
|
|
</AppContent>
|
|
</>
|
|
);
|
|
};
|
|
|
|
/*
|
|
return (
|
|
<>
|
|
<div className='flex items-center justify-between space-y-2'>
|
|
<div>
|
|
<h2 className='text-2xl font-bold tracking-tight'>
|
|
{t('customerInvoices.list.title' />
|
|
</h2>
|
|
<p className='text-muted-foreground'>
|
|
{t('CustomerInvoices.list.subtitle' />
|
|
</p>
|
|
</div>
|
|
<div className='flex items-center space-x-2'>
|
|
<Button onClick={() => navigate("/CustomerInvoices/add")}>
|
|
<PlusIcon className='w-4 h-4 mr-2' />
|
|
{t("customerInvoices.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'>
|
|
{CustomerInvoiceStatuses.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("customerInvoices.list.tabs_title")}</Label>
|
|
<Select value={status} onValueChange={setStatus}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder='Seleccionar estado' />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{CustomerInvoiceStatuses.map((s) => (
|
|
<SelectItem key={s.value} value={s.value}>
|
|
{s.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{CustomerInvoiceStatuses.map((s) => (
|
|
<TabsContent key={s.value} value={s.value}>
|
|
<CustomerInvoicesGrid />
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</>
|
|
);
|
|
};
|
|
*/
|