82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
import { AppBreadcrumb, AppContent, ButtonGroup } from "@repo/rdx-ui/components";
|
|
import { Button } from "@repo/shadcn-ui/components";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { useCreateCustomerMutation } from "../../hooks/use-create-customer-mutation";
|
|
import { useTranslation } from "../../i18n";
|
|
import { CustomerEditForm } from "./customer-edit-form";
|
|
|
|
export const CustomerCreate = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const { mutate, isPending, isError, error } = useCreateCustomerMutation();
|
|
|
|
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("/customers/list");
|
|
};
|
|
|
|
if (isError) {
|
|
console.error("Error creating customer:", 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 = useCreateCustomerMutation().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-4'>
|
|
<div className='space-y-2'>
|
|
<h2 className='text-2xl font-bold tracking-tight text-balance scroll-m-2'>
|
|
{t("pages.create.title")}
|
|
</h2>
|
|
<p className='text-muted-foreground scroll-m-20 tracking-tight text-balance'>
|
|
{t("pages.create.description")}
|
|
</p>
|
|
</div>
|
|
<ButtonGroup>
|
|
<Button className='cursor-pointer' onClick={handleCancel}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
|
|
<Button type='submit' className='cursor-pointer'>
|
|
{t("common.save")}
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
<div className='flex flex-1 flex-col gap-4 p-4'>
|
|
<CustomerEditForm onSubmit={handleSubmit} isPending={isPending} />
|
|
</div>
|
|
</AppContent>
|
|
</>
|
|
);
|
|
};
|