Files
GSB-Construction/Modules/ProjectManagement/resources/js/Pages/Projects/Create.tsx

72 lines
2.5 KiB
TypeScript

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { ArrowLeft, Save } from 'lucide-react';
import { PageProps } from '@/types';
import { FormEvent } from 'react';
import { ProjectForm, ProjectFormData } from '../../Components/ProjectForm';
interface Employee { id: number; ulid: string; name: string }
interface Props extends PageProps {
employees: Employee[];
}
export default function Create({ employees }: Props) {
const { data, setData, post, processing, errors } = useForm<ProjectFormData>({
name: '',
client_name: '',
location: '',
start_date: '',
target_end_date: '',
contract_duration: '',
description: '',
pm_id: '',
contract_value: '',
});
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
post(route('projects.store'));
};
return (
<AuthenticatedLayout
header={
<div className="flex items-center gap-4">
<Link href={route('projects.index')}>
<Button variant="ghost" size="icon-sm"><ArrowLeft className="h-4 w-4" /></Button>
</Link>
<h2 className="text-xl font-semibold leading-tight text-gray-800">
Create Project
</h2>
</div>
}
>
<Head title="Create Project" />
<div className="py-6">
<div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
<form onSubmit={handleSubmit}>
<ProjectForm
data={data}
setData={setData}
errors={errors}
employees={employees}
/>
<div className="mt-6 flex justify-end gap-3">
<Link href={route('projects.index')}>
<Button variant="outline" type="button">Cancel</Button>
</Link>
<Button type="submit" disabled={processing}>
<Save className="mr-2 h-4 w-4" /> Create Project
</Button>
</div>
</form>
</div>
</div>
</AuthenticatedLayout>
);
}