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
@@ -3,6 +3,12 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
import { LoadingState } from "@/components/ui/States";
|
||||
|
||||
export default function ContractDetailsPage() {
|
||||
const params = useParams();
|
||||
@@ -41,166 +47,352 @@ export default function ContractDetailsPage() {
|
||||
fetchContractDetails();
|
||||
}
|
||||
}, [contractId]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
<div className="text-center">Ładowanie szczegółów umowy...</div>
|
||||
</div>
|
||||
<PageContainer>
|
||||
<LoadingState message="Loading contract details..." />
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
if (!contract) {
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
<div className="text-center text-red-600">Nie znaleziono umowy.</div>
|
||||
<div className="text-center mt-4">
|
||||
<Link href="/contracts" className="text-blue-600 hover:underline">
|
||||
← Powrót do listy umów
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<PageContainer>
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<p className="text-red-600 text-lg mb-4">Contract not found.</p>
|
||||
<Link href="/contracts">
|
||||
<Button variant="primary">Back to Contracts</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold">Umowa {contract.contract_number}</h1>
|
||||
<Link href="/contracts" className="text-blue-600 hover:underline">
|
||||
← Powrót do listy umów
|
||||
</Link>
|
||||
</div>
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title={`Contract ${contract.contract_number}`}
|
||||
description={contract.contract_name || "Contract Details"}
|
||||
action={
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/contracts">
|
||||
<Button variant="outline" size="sm">
|
||||
<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="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Back to Contracts
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||
<Button variant="primary" size="sm">
|
||||
<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>
|
||||
Add Project
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Contract Details */}
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Szczegóły umowy</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Numer umowy
|
||||
</label>
|
||||
<p className="text-lg">{contract.contract_number}</p>
|
||||
</div>
|
||||
|
||||
{contract.contract_name && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Nazwa umowy
|
||||
</label>
|
||||
<p className="text-lg">{contract.contract_name}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.customer_contract_number && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Numer umowy (Klienta)
|
||||
</label>
|
||||
<p>{contract.customer_contract_number}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.customer && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Zleceniodawca
|
||||
</label>
|
||||
<p>{contract.customer}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.investor && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Inwestor
|
||||
</label>
|
||||
<p>{contract.investor}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.date_signed && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Data zawarcia
|
||||
</label>
|
||||
<p>
|
||||
{new Date(contract.date_signed).toLocaleDateString("pl-PL")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.finish_date && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-600">
|
||||
Data zakończenia
|
||||
</label>
|
||||
<p>
|
||||
{new Date(contract.finish_date).toLocaleDateString("pl-PL")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Linked Projects */}
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-semibold">
|
||||
Projekty w ramach umowy ({projects.length})
|
||||
</h2>
|
||||
<Link
|
||||
href={`/projects/new?contract_id=${contractId}`}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
|
||||
>
|
||||
➕ Dodaj projekt
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-8">
|
||||
Brak projektów przypisanych do tej umowy.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{projects.map((project) => (
|
||||
<div
|
||||
key={project.project_id}
|
||||
className="border border-gray-100 rounded p-4 hover:bg-gray-50"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 className="font-medium">{project.project_name}</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{project.project_number}
|
||||
</p>
|
||||
{project.address && (
|
||||
<p className="text-sm text-gray-500">
|
||||
📍 {project.address}
|
||||
</p>
|
||||
)}
|
||||
{project.finish_date && (
|
||||
<p className="text-sm text-gray-500">
|
||||
⏰ Termin:{" "}
|
||||
{new Date(project.finish_date).toLocaleDateString(
|
||||
"pl-PL"
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
href={`/projects/${project.project_id}`}
|
||||
className="text-blue-600 hover:underline text-sm"
|
||||
>
|
||||
Szczegóły →
|
||||
</Link>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Contract Information
|
||||
</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Contract Number
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{contract.contract_number}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{contract.contract_name && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Contract Name
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{contract.contract_name}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.customer_contract_number && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Customer Contract Number
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{contract.customer_contract_number}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.customer && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Customer
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{contract.customer}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.investor && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Investor
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{contract.investor}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.date_signed && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Date Signed
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{new Date(contract.date_signed).toLocaleDateString(
|
||||
"en-US"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contract.finish_date && (
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||
Finish Date
|
||||
</span>
|
||||
<p className="text-gray-900 font-medium">
|
||||
{new Date(contract.finish_date).toLocaleDateString(
|
||||
"en-US"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Contract Summary Sidebar */}
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||
Projects Count
|
||||
</span>
|
||||
<Badge variant="primary" size="lg">
|
||||
{projects.length} Projects
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{contract.finish_date && (
|
||||
<div className="border-t pt-4">
|
||||
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||
Contract Status
|
||||
</span>
|
||||
<Badge
|
||||
variant={
|
||||
new Date(contract.finish_date) > new Date()
|
||||
? "success"
|
||||
: "warning"
|
||||
}
|
||||
size="md"
|
||||
>
|
||||
{new Date(contract.finish_date) > new Date()
|
||||
? "Active"
|
||||
: "Expired"}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Associated Projects */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Associated Projects ({projects.length})
|
||||
</h2>
|
||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||
<Button variant="outline" size="sm">
|
||||
<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>
|
||||
Add Project
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{projects.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
No projects yet
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Get started by creating your first project for this contract
|
||||
</p>
|
||||
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||
<Button variant="primary">Create First Project</Button>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{projects.map((project) => (
|
||||
<div
|
||||
key={project.project_id}
|
||||
className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="font-medium text-gray-900">
|
||||
{project.project_name}
|
||||
</h3>
|
||||
<Badge variant="secondary" size="sm">
|
||||
{project.project_number}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
|
||||
{project.address && (
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{project.address}
|
||||
</div>
|
||||
)}
|
||||
{project.finish_date && (
|
||||
<div className="flex items-center">
|
||||
<svg
|
||||
className="w-4 h-4 mr-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{new Date(project.finish_date).toLocaleDateString(
|
||||
"en-US"
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
<Badge
|
||||
variant={
|
||||
project.project_status === "fulfilled"
|
||||
? "success"
|
||||
: project.project_status === "registered"
|
||||
? "secondary"
|
||||
: "primary"
|
||||
}
|
||||
size="sm"
|
||||
>
|
||||
{project.project_status === "registered"
|
||||
? "Registered"
|
||||
: project.project_status === "in_progress_design"
|
||||
? "In Progress (Design)"
|
||||
: project.project_status ===
|
||||
"in_progress_construction"
|
||||
? "In Progress (Construction)"
|
||||
: project.project_status === "fulfilled"
|
||||
? "Completed"
|
||||
: "Unknown"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/projects/${project.project_id}`}>
|
||||
<Button variant="outline" size="sm">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,39 @@
|
||||
import ContractForm from "@/components/ContractForm";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NewContractPage() {
|
||||
return (
|
||||
<div className="p-4 max-w-2xl mx-auto">
|
||||
<h1 className="text-xl font-bold mb-4">Nowa umowa</h1>
|
||||
<ContractForm />
|
||||
</div>
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title="Create New Contract"
|
||||
description="Add a new contract to your portfolio"
|
||||
action={
|
||||
<Link href="/contracts">
|
||||
<Button variant="outline" size="sm">
|
||||
<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="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Back to Contracts
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<div className="max-w-2xl">
|
||||
<ContractForm />
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user