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
2025-06-19 18:59:03 +02:00
parent 85f18825ad
commit 0acb203ef8
8 changed files with 1465 additions and 523 deletions

View File

@@ -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>
);
}

View File

@@ -2,6 +2,9 @@
import { useState, useEffect } 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 ProjectForm({ initialData = null }) {
const [form, setForm] = useState({
@@ -15,7 +18,8 @@ export default function ProjectForm({ initialData = null }) {
investment_number: "",
finish_date: "",
wp: "",
contact: "", notes: "",
contact: "",
notes: "",
coordinates: "",
project_type: initialData?.project_type || "design",
// project_status is not included in the form for creation or editing
@@ -23,6 +27,7 @@ export default function ProjectForm({ initialData = null }) {
});
const [contracts, setContracts] = useState([]);
const [loading, setLoading] = useState(false);
const router = useRouter();
const isEdit = !!initialData;
@@ -38,94 +43,340 @@ export default function ProjectForm({ initialData = null }) {
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
const res = await fetch(
isEdit ? `/api/projects/${initialData.project_id}` : "/api/projects",
{
method: isEdit ? "PUT" : "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(form),
try {
const res = await fetch(
isEdit ? `/api/projects/${initialData.project_id}` : "/api/projects",
{
method: isEdit ? "PUT" : "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(form),
}
);
if (res.ok) {
const project = await res.json();
if (isEdit) {
router.push(`/projects/${project.project_id}`);
} else {
router.push("/projects");
}
} else {
alert("Failed to save project.");
}
);
if (res.ok) {
router.push("/projects");
} else {
} catch (error) {
console.error("Error saving project:", error);
alert("Failed to save project.");
} finally {
setLoading(false);
}
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
{/* Contract Dropdown */}
<div>
<label className="block font-medium">Umowa</label>
<select
name="contract_id"
value={form.contract_id || ""}
onChange={handleChange}
className="border p-2 w-full"
required
>
<option value="">Wybierz umowę</option>
{contracts.map((contract) => (
<option key={contract.contract_id} value={contract.contract_id}>
{contract.contract_number} {contract.contract_name}
</option>
))}
</select>
</div>
<Card>
<CardHeader>
<h2 className="text-xl font-semibold text-gray-900">
{isEdit ? "Edit Project Details" : "Project Details"}
</h2>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Contract and Project Type 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 <span className="text-red-500">*</span>
</label>
<select
name="contract_id"
value={form.contract_id || ""}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
required
>
<option value="">Select Contract</option>
{contracts.map((contract) => (
<option
key={contract.contract_id}
value={contract.contract_id}
>
{contract.contract_number} {contract.contract_name}
</option>
))}
</select>
</div>
{/* Project Type Dropdown */}
<div>
<label className="block font-medium">Typ projektu</label>
<select
name="project_type"
value={form.project_type}
onChange={handleChange}
className="border p-2 w-full"
required
>
<option value="design">Projektowanie</option>
<option value="construction">Realizacja</option>
<option value="design+construction">
Projektowanie + Realizacja
</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Project Type <span className="text-red-500">*</span>
</label>
<select
name="project_type"
value={form.project_type}
onChange={handleChange}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
required
>
<option value="design">Design (Projektowanie)</option>
<option value="construction">Construction (Realizacja)</option>
<option value="design+construction">
Design + Construction (Projektowanie + Realizacja)
</option>
</select>
</div>
</div>
{/* Other fields */} {[
["project_name", "Nazwa projektu"],
["address", "Lokalizacja"],
["plot", "Działka"],
["district", "Obręb ewidencyjny"],
["unit", "Jednostka ewidencyjna"],
["city", "Miejscowość"],
["investment_number", "Numer inwestycjny"],
["finish_date", "Termin realizacji"],
["wp", "WP"], ["contact", "Dane kontaktowe"],
["coordinates", "Coordinates"],
["notes", "Notatki"],
].map(([name, label]) => (
<div key={name}>
<label className="block font-medium">{label}</label>
<input
type={name === "finish_date" ? "date" : "text"}
name={name}
value={form[name] || ""}
onChange={handleChange}
className="border p-2 w-full"
placeholder={name === "coordinates" ? "e.g., 49.622958,20.629562" : ""}
/>
</div>
))}
{/* Basic Information Section */}
<div className="border-t pt-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">
Basic Information
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-2">
Project Name <span className="text-red-500">*</span>
</label>
<Input
type="text"
name="project_name"
value={form.project_name || ""}
onChange={handleChange}
placeholder="Enter project name"
required
/>
</div>
<button
type="submit"
className="bg-blue-600 text-white px-4 py-2 rounded"
>
{isEdit ? "Update" : "Create"} Project
</button>
</form>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
City
</label>
<Input
type="text"
name="city"
value={form.city || ""}
onChange={handleChange}
placeholder="Enter city"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Address
</label>
<Input
type="text"
name="address"
value={form.address || ""}
onChange={handleChange}
placeholder="Enter address"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Plot
</label>
<Input
type="text"
name="plot"
value={form.plot || ""}
onChange={handleChange}
placeholder="Enter plot number"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
District
</label>
<Input
type="text"
name="district"
value={form.district || ""}
onChange={handleChange}
placeholder="Enter district"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Unit
</label>
<Input
type="text"
name="unit"
value={form.unit || ""}
onChange={handleChange}
placeholder="Enter unit"
/>
</div>
<div>
<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>
</div>
{/* Additional Information Section */}
<div className="border-t pt-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">
Additional Information
</h3>
<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">
Investment Number
</label>
<Input
type="text"
name="investment_number"
value={form.investment_number || ""}
onChange={handleChange}
placeholder="Enter investment number"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
WP
</label>
<Input
type="text"
name="wp"
value={form.wp || ""}
onChange={handleChange}
placeholder="Enter WP"
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-2">
Contact Information
</label>
<Input
type="text"
name="contact"
value={form.contact || ""}
onChange={handleChange}
placeholder="Enter contact details"
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-2">
Coordinates
</label>
<Input
type="text"
name="coordinates"
value={form.coordinates || ""}
onChange={handleChange}
placeholder="e.g., 49.622958,20.629562"
/>
</div>
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-2">
Notes
</label>
<textarea
name="notes"
value={form.notes || ""}
onChange={handleChange}
rows={4}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
placeholder="Enter any additional notes"
/>
</div>
</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>
{isEdit ? "Updating..." : "Creating..."}
</>
) : (
<>
{isEdit ? (
<>
<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="M5 13l4 4L19 7"
/>
</svg>
Update Project
</>
) : (
<>
<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 Project
</>
)}
</>
)}
</Button>
</div>
</form>
</CardContent>
</Card>
);
}