132 lines
4.9 KiB
TypeScript
132 lines
4.9 KiB
TypeScript
import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
|
|
import { Button } from "@repo/shadcn-ui/components";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useCreateCustomerInvoiceMutation } from "../../hooks";
|
|
import { MODULE_NAME } from "../../manifest";
|
|
import { CustomerInvoiceEditForm } from "./customer-invoice-edit-form";
|
|
|
|
export const CustomerInvoiceCreate = () => {
|
|
const { t } = useTranslation(MODULE_NAME);
|
|
const navigate = useNavigate();
|
|
|
|
const { mutate, isPending, isError, error } = useCreateCustomerInvoiceMutation();
|
|
|
|
const handleSubmit = (data: any) => {
|
|
// Handle form submission logic here
|
|
console.log("Form submitted with data:", data);
|
|
mutate(data);
|
|
|
|
// Navigate to the list page after submission
|
|
navigate("/customer-invoices/list");
|
|
};
|
|
|
|
if (isError) {
|
|
console.error("Error creating customer invoice:", error);
|
|
// Optionally, you can show an error message to the user
|
|
}
|
|
|
|
// Render the component
|
|
// You can also handle loading state if needed
|
|
// For example, you can disable the submit button while the mutation is in progress
|
|
// const isLoading = useCreateCustomerInvoiceMutation().isLoading;
|
|
|
|
// Return the JSX for the component
|
|
// You can customize the form and its fields as needed
|
|
// For example, you can use a form library like react-hook-form or Formik to handle form state and validation
|
|
// Here, we are using a simple form with a submit button
|
|
|
|
// Note: Make sure to replace the form fields with your actual invoice fields
|
|
// and handle validation as needed.
|
|
// This is just a basic example to demonstrate the structure of the component.
|
|
|
|
// If you are using a form library, you can pass the handleSubmit function to the form's onSubmit prop
|
|
// and use the form library's methods to handle form state and validation.
|
|
|
|
// Example of a simple form submission handler
|
|
// You can replace this with your actual form handling logic
|
|
// const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
// event.preventDefault();
|
|
// const formData = new FormData(event.currentTarget);
|
|
|
|
return (
|
|
<>
|
|
<AppBreadcrumb />
|
|
<AppContent>
|
|
<div className='flex items-center justify-between space-y-2'>
|
|
<div>
|
|
<h2 className='text-2xl font-bold tracking-tight'>{t("pages.create.title")}</h2>
|
|
<p className='text-muted-foreground'>{t("pages.create.description")}</p>
|
|
</div>
|
|
<div className='flex items-center justify-end mb-4'>
|
|
<Button className='cursor-pointer' onClick={() => navigate("/customer-invoices/list")}>
|
|
{t("pages.create.back_to_list")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='flex flex-col w-full h-full py-4 @container'>
|
|
<CustomerInvoiceEditForm onSubmit={handleSubmit} isPending={isPending} />
|
|
</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>
|
|
</>
|
|
);
|
|
};
|
|
*/
|