Refactor project and contract forms for improved UI and functionality
- Updated NewProjectPage to use PageContainer and PageHeader for better layout. - Enhanced ProjectListPage to display project data in a responsive table format. - Refactored ContractForm to use Card components and improved loading state handling. - Refactored ProjectForm to use Card components, added loading state, and improved form structure and styling.
This commit is contained in:
Chop
@@ -2,6 +2,9 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { Input } from "@/components/ui/Input";
|
||||
|
||||
export default function ContractForm() {
|
||||
const [form, setForm] = useState({
|
||||
@@ -14,6 +17,7 @@ export default function ContractForm() {
|
||||
finish_date: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
function handleChange(e) {
|
||||
@@ -22,53 +26,192 @@ export default function ContractForm() {
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
console.log("Submitting form:", form);
|
||||
try {
|
||||
console.log("Submitting form:", form);
|
||||
|
||||
const res = await fetch("/api/contracts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
const res = await fetch("/api/contracts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(form),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
router.push("/projects"); // or /contracts if you plan a listing
|
||||
} else {
|
||||
alert(
|
||||
"Wystąpił błąd podczas dodawania umowy. Sprawdź dane i spróbuj ponownie."
|
||||
);
|
||||
if (res.ok) {
|
||||
const contract = await res.json();
|
||||
router.push(`/contracts/${contract.contract_id}`);
|
||||
} else {
|
||||
alert(
|
||||
"Failed to create contract. Please check the data and try again."
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating contract:", error);
|
||||
alert("Failed to create contract. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{[
|
||||
["contract_number", "Numer Umowy"],
|
||||
["contract_name", "Nazwa Umowy"],
|
||||
["customer_contract_number", "Numer Umowy (Klienta)"],
|
||||
["customer", "Zleceniodawca"],
|
||||
["investor", "Inwestor"],
|
||||
["date_signed", "Data zawarcia"],
|
||||
["finish_date", "Data zakończenia"],
|
||||
].map(([name, label]) => (
|
||||
<div key={name}>
|
||||
<label className="block font-medium">{label}</label>
|
||||
<input
|
||||
type={name.includes("date") ? "date" : "text"}
|
||||
name={name}
|
||||
value={form[name] || ""}
|
||||
onChange={handleChange}
|
||||
className="border p-2 w-full"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Contract Details
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Basic Information Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Contract Number <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="contract_number"
|
||||
value={form.contract_number || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter contract number"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
Dodaj umowę
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Contract Name
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="contract_name"
|
||||
value={form.contract_name || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter contract name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Customer Contract Number
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="customer_contract_number"
|
||||
value={form.customer_contract_number || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter customer contract number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Customer
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="customer"
|
||||
value={form.customer || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter customer name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Investor
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
name="investor"
|
||||
value={form.investor || ""}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter investor name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Date Signed
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
name="date_signed"
|
||||
value={form.date_signed || ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Finish Date
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
name="finish_date"
|
||||
value={form.finish_date || ""}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="border-t pt-6 flex items-center justify-end gap-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" disabled={loading}>
|
||||
{loading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Creating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
className="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Create Contract
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user