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 { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useParams } from "next/navigation";
|
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() {
|
export default function ContractDetailsPage() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
@@ -41,166 +47,352 @@ export default function ContractDetailsPage() {
|
|||||||
fetchContractDetails();
|
fetchContractDetails();
|
||||||
}
|
}
|
||||||
}, [contractId]);
|
}, [contractId]);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-4xl mx-auto">
|
<PageContainer>
|
||||||
<div className="text-center">Ładowanie szczegółów umowy...</div>
|
<LoadingState message="Loading contract details..." />
|
||||||
</div>
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!contract) {
|
if (!contract) {
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-4xl mx-auto">
|
<PageContainer>
|
||||||
<div className="text-center text-red-600">Nie znaleziono umowy.</div>
|
<Card>
|
||||||
<div className="text-center mt-4">
|
<CardContent className="text-center py-12">
|
||||||
<Link href="/contracts" className="text-blue-600 hover:underline">
|
<p className="text-red-600 text-lg mb-4">Contract not found.</p>
|
||||||
← Powrót do listy umów
|
<Link href="/contracts">
|
||||||
|
<Button variant="primary">Back to Contracts</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-4xl mx-auto">
|
<PageContainer>
|
||||||
{/* Header */}
|
<PageHeader
|
||||||
<div className="flex justify-between items-center mb-6">
|
title={`Contract ${contract.contract_number}`}
|
||||||
<h1 className="text-2xl font-bold">Umowa {contract.contract_number}</h1>
|
description={contract.contract_name || "Contract Details"}
|
||||||
<Link href="/contracts" className="text-blue-600 hover:underline">
|
action={
|
||||||
← Powrót do listy umów
|
<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>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Contract Details */}
|
{/* Contract Details */}
|
||||||
<div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||||
<h2 className="text-xl font-semibold mb-4">Szczegóły umowy</h2>
|
<div className="lg:col-span-2">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<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>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Numer umowy
|
Contract Number
|
||||||
</label>
|
</span>
|
||||||
<p className="text-lg">{contract.contract_number}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{contract.contract_number}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{contract.contract_name && (
|
{contract.contract_name && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Nazwa umowy
|
Contract Name
|
||||||
</label>
|
</span>
|
||||||
<p className="text-lg">{contract.contract_name}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{contract.contract_name}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{contract.customer_contract_number && (
|
{contract.customer_contract_number && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Numer umowy (Klienta)
|
Customer Contract Number
|
||||||
</label>
|
</span>
|
||||||
<p>{contract.customer_contract_number}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{contract.customer_contract_number}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{contract.customer && (
|
{contract.customer && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Zleceniodawca
|
Customer
|
||||||
</label>
|
</span>
|
||||||
<p>{contract.customer}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{contract.customer}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{contract.investor && (
|
{contract.investor && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Inwestor
|
Investor
|
||||||
</label>
|
</span>
|
||||||
<p>{contract.investor}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{contract.investor}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{contract.date_signed && (
|
{contract.date_signed && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Data zawarcia
|
Date Signed
|
||||||
</label>
|
</span>
|
||||||
<p>
|
<p className="text-gray-900 font-medium">
|
||||||
{new Date(contract.date_signed).toLocaleDateString("pl-PL")}
|
{new Date(contract.date_signed).toLocaleDateString(
|
||||||
|
"en-US"
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{contract.finish_date && (
|
{contract.finish_date && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-gray-600">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Data zakończenia
|
Finish Date
|
||||||
</label>
|
</span>
|
||||||
<p>
|
<p className="text-gray-900 font-medium">
|
||||||
{new Date(contract.finish_date).toLocaleDateString("pl-PL")}
|
{new Date(contract.finish_date).toLocaleDateString(
|
||||||
|
"en-US"
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Linked Projects */}
|
{/* Contract Summary Sidebar */}
|
||||||
<div className="bg-white border border-gray-200 rounded-lg p-6">
|
<div>
|
||||||
<div className="flex justify-between items-center mb-4">
|
<Card>
|
||||||
<h2 className="text-xl font-semibold">
|
<CardHeader>
|
||||||
Projekty w ramach umowy ({projects.length})
|
<h2 className="text-lg font-semibold text-gray-900">Summary</h2>
|
||||||
</h2>
|
</CardHeader>
|
||||||
<Link
|
<CardContent className="space-y-4">
|
||||||
href={`/projects/new?contract_id=${contractId}`}
|
<div>
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm"
|
<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"
|
||||||
>
|
>
|
||||||
➕ Dodaj projekt
|
{new Date(contract.finish_date) > new Date()
|
||||||
|
? "Active"
|
||||||
|
: "Expired"}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</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>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
{projects.length === 0 ? (
|
{projects.length === 0 ? (
|
||||||
<p className="text-gray-500 text-center py-8">
|
<div className="text-center py-12">
|
||||||
Brak projektów przypisanych do tej umowy.
|
<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>
|
</p>
|
||||||
|
<Link href={`/projects/new?contract_id=${contractId}`}>
|
||||||
|
<Button variant="primary">Create First Project</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="grid grid-cols-1 gap-4">
|
||||||
{projects.map((project) => (
|
{projects.map((project) => (
|
||||||
<div
|
<div
|
||||||
key={project.project_id}
|
key={project.project_id}
|
||||||
className="border border-gray-100 rounded p-4 hover:bg-gray-50"
|
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 justify-between items-start">
|
||||||
<div>
|
<div className="flex-1">
|
||||||
<h3 className="font-medium">{project.project_name}</h3>
|
<div className="flex items-center gap-3 mb-2">
|
||||||
<p className="text-sm text-gray-600">
|
<h3 className="font-medium text-gray-900">
|
||||||
|
{project.project_name}
|
||||||
|
</h3>
|
||||||
|
<Badge variant="secondary" size="sm">
|
||||||
{project.project_number}
|
{project.project_number}
|
||||||
</p>
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm text-gray-600">
|
||||||
{project.address && (
|
{project.address && (
|
||||||
<p className="text-sm text-gray-500">
|
<div className="flex items-center">
|
||||||
📍 {project.address}
|
<svg
|
||||||
</p>
|
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 && (
|
{project.finish_date && (
|
||||||
<p className="text-sm text-gray-500">
|
<div className="flex items-center">
|
||||||
⏰ Termin:{" "}
|
<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(
|
{new Date(project.finish_date).toLocaleDateString(
|
||||||
"pl-PL"
|
"en-US"
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Link
|
)}
|
||||||
href={`/projects/${project.project_id}`}
|
<div className="flex items-center">
|
||||||
className="text-blue-600 hover:underline text-sm"
|
<Badge
|
||||||
|
variant={
|
||||||
|
project.project_status === "fulfilled"
|
||||||
|
? "success"
|
||||||
|
: project.project_status === "registered"
|
||||||
|
? "secondary"
|
||||||
|
: "primary"
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
>
|
>
|
||||||
Szczegóły →
|
{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>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,39 @@
|
|||||||
import ContractForm from "@/components/ContractForm";
|
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() {
|
export default function NewContractPage() {
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-2xl mx-auto">
|
<PageContainer>
|
||||||
<h1 className="text-xl font-bold mb-4">Nowa umowa</h1>
|
<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 />
|
<ContractForm />
|
||||||
</div>
|
</div>
|
||||||
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,8 @@
|
|||||||
import ProjectForm from "@/components/ProjectForm";
|
import ProjectForm from "@/components/ProjectForm";
|
||||||
|
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 async function EditProjectPage({ params }) {
|
export default async function EditProjectPage({ params }) {
|
||||||
const { id } = await params;
|
const { id } = await params;
|
||||||
@@ -7,10 +11,68 @@ export default async function EditProjectPage({ params }) {
|
|||||||
});
|
});
|
||||||
const project = await res.json();
|
const project = await res.json();
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-2xl mx-auto">
|
<PageContainer>
|
||||||
<h1 className="text-xl font-bold mb-4">Edit Project</h1>
|
<div className="text-center py-12">
|
||||||
|
<p className="text-red-600 text-lg mb-4">Project not found.</p>
|
||||||
|
<Link href="/projects">
|
||||||
|
<Button variant="primary">Back to Projects</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<PageHeader
|
||||||
|
title="Edit Project"
|
||||||
|
description={`Editing: ${project.project_name || "Untitled Project"}`}
|
||||||
|
action={
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Link href={`/projects/${id}`}>
|
||||||
|
<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="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/projects">
|
||||||
|
<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 Projects
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="max-w-2xl">
|
||||||
<ProjectForm initialData={project} />
|
<ProjectForm initialData={project} />
|
||||||
</div>
|
</div>
|
||||||
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -50,13 +50,16 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
description={`${project.city} • ${project.address}`}
|
description={`${project.city} • ${project.address}`}
|
||||||
action={
|
action={
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
{daysRemaining !== null && (
|
||||||
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
|
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
|
||||||
{daysRemaining === 0
|
{daysRemaining === 0
|
||||||
? "Due Today"
|
? "Due Today"
|
||||||
: daysRemaining > 0
|
: daysRemaining > 0
|
||||||
? `${daysRemaining} days left`
|
? `${daysRemaining} days left`
|
||||||
: `${Math.abs(daysRemaining)} days overdue`}
|
: `${Math.abs(daysRemaining)} days overdue`}
|
||||||
</Badge> <Link href="/projects">
|
</Badge>
|
||||||
|
)}
|
||||||
|
<Link href="/projects">
|
||||||
<Button variant="outline" size="sm">
|
<Button variant="outline" size="sm">
|
||||||
<svg
|
<svg
|
||||||
className="w-4 h-4 mr-2"
|
className="w-4 h-4 mr-2"
|
||||||
@@ -75,113 +78,157 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/projects/${id}/edit`}>
|
<Link href={`/projects/${id}/edit`}>
|
||||||
<Button variant="secondary">Edit Project</Button>
|
<Button variant="primary">
|
||||||
|
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Edit Project
|
||||||
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>{" "}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
{/* Main Project Information */}
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
Project Information
|
Project Information
|
||||||
</h2>
|
</h2>
|
||||||
|
<Badge
|
||||||
|
variant={
|
||||||
|
project.project_type === "design"
|
||||||
|
? "secondary"
|
||||||
|
: project.project_type === "construction"
|
||||||
|
? "primary"
|
||||||
|
: project.project_type === "design+construction"
|
||||||
|
? "success"
|
||||||
|
: "default"
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{project.project_type === "design"
|
||||||
|
? "Design (P)"
|
||||||
|
: project.project_type === "construction"
|
||||||
|
? "Construction (R)"
|
||||||
|
: project.project_type === "design+construction"
|
||||||
|
? "Design + Construction (P+R)"
|
||||||
|
: "Unknown"}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-6">
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Location
|
Location
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900">{project.city}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
</div>
|
{project.city || "N/A"}
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">
|
|
||||||
Address
|
|
||||||
</span>
|
|
||||||
<p className="text-gray-900">{project.address}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">Plot</span>
|
|
||||||
<p className="text-gray-900">{project.plot}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">
|
|
||||||
District
|
|
||||||
</span>
|
|
||||||
<p className="text-gray-900">{project.district}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">Unit</span>
|
|
||||||
<p className="text-gray-900">{project.unit}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">
|
|
||||||
Deadline
|
|
||||||
</span>
|
|
||||||
<p className="text-gray-900">{project.finish_date}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">WP</span>
|
|
||||||
<p className="text-gray-900">{project.wp}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">
|
|
||||||
Investment Number
|
|
||||||
</span>
|
|
||||||
<p className="text-gray-900">{project.investment_number}</p>
|
|
||||||
</div>
|
|
||||||
</div> <div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">Contact</span>
|
|
||||||
<p className="text-gray-900">{project.contact}</p>
|
|
||||||
</div> {project.coordinates && (
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">Coordinates</span>
|
|
||||||
<p className="text-gray-900">{project.coordinates}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{project.notes && (
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">Notes</span>
|
|
||||||
<p className="text-gray-900">{project.notes}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-500">
|
|
||||||
Typ projektu
|
|
||||||
</span>
|
|
||||||
<p className="text-gray-900">
|
|
||||||
{project.project_type === "design"
|
|
||||||
? "Projektowanie"
|
|
||||||
: project.project_type === "construction"
|
|
||||||
? "Realizacja"
|
|
||||||
: project.project_type === "design+construction"
|
|
||||||
? "Projektowanie + Realizacja"
|
|
||||||
: "-"}
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Status projektu
|
Address
|
||||||
</span>
|
</span>
|
||||||
<div className="flex items-center gap-2 mt-1">
|
<p className="text-gray-900 font-medium">
|
||||||
<span className="text-gray-900">
|
{project.address || "N/A"}
|
||||||
{project.project_status === "registered"
|
</p>
|
||||||
? "Zarejestrowany"
|
</div>
|
||||||
: project.project_status === "in_progress_design"
|
<div>
|
||||||
? "W realizacji (projektowanie)"
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
: project.project_status === "in_progress_construction"
|
Plot
|
||||||
? "W realizacji (realizacja)"
|
|
||||||
: project.project_status === "fulfilled"
|
|
||||||
? "Zakończony"
|
|
||||||
: "-"}
|
|
||||||
</span>
|
</span>
|
||||||
<ProjectStatusDropdown project={project} />
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.plot || "N/A"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
District
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.district || "N/A"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Unit
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.unit || "N/A"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Deadline
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.finish_date || "N/A"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
WP
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.wp || "N/A"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Investment Number
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.investment_number || "N/A"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{project.contact && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Contact
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium">{project.contact}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{project.coordinates && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Coordinates
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900 font-medium font-mono text-sm">
|
||||||
|
{project.coordinates}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{project.notes && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
|
Notes
|
||||||
|
</span>
|
||||||
|
<p className="text-gray-900">{project.notes}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{/* Contract Details */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
@@ -189,33 +236,165 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
</h2>
|
</h2>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Contract Number
|
Contract Number
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900">{project.contract_number}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.contract_number || "N/A"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Contract Name
|
Contract Name
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900">{project.contract_name}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.contract_name || "N/A"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Customer
|
Customer
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900">{project.customer}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.customer || "N/A"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="text-sm font-medium text-gray-500">
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
||||||
Investor
|
Investor
|
||||||
</span>
|
</span>
|
||||||
<p className="text-gray-900">{project.investor}</p>
|
<p className="text-gray-900 font-medium">
|
||||||
|
{project.investor || "N/A"}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</CardContent> </Card>{" "}
|
</div>
|
||||||
</div> {/* Project Location Map */}
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Sidebar */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
Project Status
|
||||||
|
</h2>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||||
|
Current Status
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant={
|
||||||
|
project.project_status === "fulfilled"
|
||||||
|
? "success"
|
||||||
|
: project.project_status === "registered"
|
||||||
|
? "secondary"
|
||||||
|
: "primary"
|
||||||
|
}
|
||||||
|
size="md"
|
||||||
|
>
|
||||||
|
{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 className="mt-3">
|
||||||
|
<ProjectStatusDropdown project={project} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{daysRemaining !== null && (
|
||||||
|
<div className="border-t pt-4">
|
||||||
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
||||||
|
Timeline
|
||||||
|
</span>
|
||||||
|
<div className="text-center">
|
||||||
|
<Badge
|
||||||
|
variant={getDeadlineVariant(daysRemaining)}
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
{daysRemaining === 0
|
||||||
|
? "Due Today"
|
||||||
|
: daysRemaining > 0
|
||||||
|
? `${daysRemaining} days remaining`
|
||||||
|
: `${Math.abs(daysRemaining)} days overdue`}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
Quick Actions
|
||||||
|
</h2>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<Link href={`/projects/${id}/edit`} className="block">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start"
|
||||||
|
>
|
||||||
|
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Edit Project
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/projects" className="block">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start"
|
||||||
|
>
|
||||||
|
<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 Projects
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>{" "}
|
||||||
|
{/* Project Location Map */}
|
||||||
{project.coordinates && (
|
{project.coordinates && (
|
||||||
|
<div className="mb-8">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-xl font-semibold text-gray-900">
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
@@ -232,10 +411,13 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
/>
|
/>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{/* Project Tasks Section */}
|
||||||
|
<div className="mb-8">
|
||||||
<ProjectTasksSection projectId={id} />
|
<ProjectTasksSection projectId={id} />
|
||||||
|
</div>
|
||||||
|
{/* Notes Section */}
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
||||||
@@ -245,8 +427,8 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
<NoteForm projectId={id} />
|
<NoteForm projectId={id} />
|
||||||
</div>
|
</div>
|
||||||
{notes.length === 0 ? (
|
{notes.length === 0 ? (
|
||||||
<div className="text-center py-8">
|
<div className="text-center py-12">
|
||||||
<div className="text-gray-400 mb-2">
|
<div className="text-gray-400 mb-4">
|
||||||
<svg
|
<svg
|
||||||
className="w-12 h-12 mx-auto"
|
className="w-12 h-12 mx-auto"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
@@ -258,17 +440,26 @@ export default async function ProjectViewPage({ params }) {
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-500">No notes yet.</p>
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||||
|
No notes yet
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
Add your first note using the form above.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="space-y-4">
|
||||||
{notes.map((n) => (
|
{notes.map((n) => (
|
||||||
<div
|
<div
|
||||||
key={n.note_id}
|
key={n.note_id}
|
||||||
className="border border-gray-200 p-4 rounded-lg bg-gray-50"
|
className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
|
||||||
>
|
>
|
||||||
<p className="text-sm text-gray-500 mb-2">{n.note_date}</p>
|
<div className="flex items-center justify-between mb-2">
|
||||||
<p className="text-gray-900">{n.note}</p>
|
<span className="text-sm font-medium text-gray-500">
|
||||||
|
{n.note_date}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-900 leading-relaxed">{n.note}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,10 +1,39 @@
|
|||||||
import ProjectForm from "@/components/ProjectForm";
|
import ProjectForm from "@/components/ProjectForm";
|
||||||
|
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 NewProjectPage() {
|
export default function NewProjectPage() {
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-2xl mx-auto">
|
<PageContainer>
|
||||||
<h1 className="text-xl font-bold mb-4">New Project</h1>
|
<PageHeader
|
||||||
|
title="Create New Project"
|
||||||
|
description="Add a new project to your portfolio"
|
||||||
|
action={
|
||||||
|
<Link href="/projects">
|
||||||
|
<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 Projects
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="max-w-2xl">
|
||||||
<ProjectForm />
|
<ProjectForm />
|
||||||
</div>
|
</div>
|
||||||
|
</PageContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -145,83 +145,128 @@ export default function ProjectListPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
) : (
|
) : (
|
||||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||||
{/* Header Row */}
|
<table className="w-full table-fixed">
|
||||||
<div className="grid grid-cols-12 gap-4 p-4 bg-gray-100 border-b font-semibold text-sm text-gray-700">
|
<thead>
|
||||||
{" "}
|
<tr className="bg-gray-100 border-b">
|
||||||
<div className="col-span-1">Number</div>
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-16">
|
||||||
<div className="col-span-3">Project Name</div>
|
No.
|
||||||
<div className="col-span-2">WP</div>
|
</th>
|
||||||
<div className="col-span-1">City</div>
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700">
|
||||||
<div className="col-span-2">Address</div>
|
Project Name
|
||||||
<div className="col-span-1">Plot</div>{" "}
|
</th>
|
||||||
<div className="col-span-1">Finish Date</div>
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||||
<div className="col-span-1">Actions</div>
|
WP
|
||||||
</div>{" "}
|
</th>
|
||||||
{/* Data Rows */}
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||||
|
City
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-32">
|
||||||
|
Address
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||||
|
Plot
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
|
||||||
|
Finish
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-12">
|
||||||
|
Type
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-24">
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th className="text-left px-2 py-3 font-semibold text-xs text-gray-700 w-20">
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>{" "}
|
||||||
|
<tbody>
|
||||||
{filteredProjects.map((project, index) => (
|
{filteredProjects.map((project, index) => (
|
||||||
<div
|
<tr
|
||||||
key={project.project_id}
|
key={project.project_id}
|
||||||
className={`grid grid-cols-12 gap-4 p-4 border-b hover:bg-gray-50 transition-colors items-center ${
|
className={`border-b hover:bg-gray-50 transition-colors ${
|
||||||
index % 2 === 0 ? "bg-white" : "bg-gray-25"
|
index % 2 === 0 ? "bg-white" : "bg-gray-25"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="col-span-1">
|
<td className="px-2 py-3">
|
||||||
<Badge variant="primary" size="sm">
|
<Badge variant="primary" size="sm" className="text-xs">
|
||||||
{project.project_number}
|
{project.project_number}
|
||||||
</Badge>
|
</Badge>
|
||||||
</div>{" "}
|
</td>
|
||||||
<div className="col-span-3">
|
<td className="px-2 py-3">
|
||||||
<Link
|
<Link
|
||||||
href={`/projects/${project.project_id}`}
|
href={`/projects/${project.project_id}`}
|
||||||
className="font-medium text-blue-600 hover:text-blue-800 transition-colors truncate block"
|
className="font-medium text-blue-600 hover:text-blue-800 transition-colors text-sm truncate block"
|
||||||
|
title={project.project_name}
|
||||||
>
|
>
|
||||||
{project.project_name}
|
{project.project_name}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-2 text-sm text-gray-600 truncate">
|
<td
|
||||||
|
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||||
|
title={project.wp}
|
||||||
|
>
|
||||||
{project.wp || "N/A"}
|
{project.wp || "N/A"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
<td
|
||||||
|
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||||
|
title={project.city}
|
||||||
|
>
|
||||||
{project.city || "N/A"}
|
{project.city || "N/A"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-2 text-sm text-gray-600 truncate">
|
<td
|
||||||
|
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||||
|
title={project.address}
|
||||||
|
>
|
||||||
{project.address || "N/A"}
|
{project.address || "N/A"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
<td
|
||||||
|
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||||
|
title={project.plot}
|
||||||
|
>
|
||||||
{project.plot || "N/A"}
|
{project.plot || "N/A"}
|
||||||
</div>{" "}
|
</td>
|
||||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
<td
|
||||||
|
className="px-2 py-3 text-xs text-gray-600 truncate"
|
||||||
|
title={project.finish_date}
|
||||||
|
>
|
||||||
{project.finish_date || "N/A"}
|
{project.finish_date || "N/A"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
<td className="px-2 py-3 text-xs text-gray-600 text-center font-semibold">
|
||||||
{project.project_type === "design"
|
{project.project_type === "design"
|
||||||
? "Projektowanie"
|
? "P"
|
||||||
: project.project_type === "construction"
|
: project.project_type === "construction"
|
||||||
? "Realizacja"
|
? "R"
|
||||||
: project.project_type === "design+construction"
|
: project.project_type === "design+construction"
|
||||||
? "Projektowanie + Realizacja"
|
? "P+R"
|
||||||
: "-"}
|
: "-"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-1 text-sm text-gray-600 truncate">
|
<td className="px-2 py-3 text-xs text-gray-600 truncate">
|
||||||
{project.project_status === "registered"
|
{project.project_status === "registered"
|
||||||
? "Zarejestrowany"
|
? "Zarejestr."
|
||||||
: project.project_status === "in_progress_design"
|
: project.project_status === "in_progress_design"
|
||||||
? "W realizacji (projektowanie)"
|
? "W real. (P)"
|
||||||
: project.project_status === "in_progress_construction"
|
: project.project_status === "in_progress_construction"
|
||||||
? "W realizacji (realizacja)"
|
? "W real. (R)"
|
||||||
: project.project_status === "fulfilled"
|
: project.project_status === "fulfilled"
|
||||||
? "Zakończony"
|
? "Zakończony"
|
||||||
: "-"}
|
: "-"}
|
||||||
</div>
|
</td>
|
||||||
<div className="col-span-1">
|
<td className="px-2 py-3">
|
||||||
<Link href={`/projects/${project.project_id}`}>
|
<Link href={`/projects/${project.project_id}`}>
|
||||||
<Button variant="outline" size="sm">
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-xs px-2 py-1"
|
||||||
|
>
|
||||||
View
|
View
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>{" "}
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</PageContainer>
|
</PageContainer>
|
||||||
|
|||||||
@@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
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() {
|
export default function ContractForm() {
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
@@ -14,6 +17,7 @@ export default function ContractForm() {
|
|||||||
finish_date: "",
|
finish_date: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
function handleChange(e) {
|
function handleChange(e) {
|
||||||
@@ -22,7 +26,9 @@ export default function ContractForm() {
|
|||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
console.log("Submitting form:", form);
|
console.log("Submitting form:", form);
|
||||||
|
|
||||||
const res = await fetch("/api/contracts", {
|
const res = await fetch("/api/contracts", {
|
||||||
@@ -32,43 +38,180 @@ export default function ContractForm() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
router.push("/projects"); // or /contracts if you plan a listing
|
const contract = await res.json();
|
||||||
|
router.push(`/contracts/${contract.contract_id}`);
|
||||||
} else {
|
} else {
|
||||||
alert(
|
alert(
|
||||||
"Wystąpił błąd podczas dodawania umowy. Sprawdź dane i spróbuj ponownie."
|
"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 (
|
return (
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<Card>
|
||||||
{[
|
<CardHeader>
|
||||||
["contract_number", "Numer Umowy"],
|
<h2 className="text-xl font-semibold text-gray-900">
|
||||||
["contract_name", "Nazwa Umowy"],
|
Contract Details
|
||||||
["customer_contract_number", "Numer Umowy (Klienta)"],
|
</h2>
|
||||||
["customer", "Zleceniodawca"],
|
</CardHeader>
|
||||||
["investor", "Inwestor"],
|
<CardContent>
|
||||||
["date_signed", "Data zawarcia"],
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
["finish_date", "Data zakończenia"],
|
{/* Basic Information Section */}
|
||||||
].map(([name, label]) => (
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<div key={name}>
|
<div>
|
||||||
<label className="block font-medium">{label}</label>
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
<input
|
Contract Number <span className="text-red-500">*</span>
|
||||||
type={name.includes("date") ? "date" : "text"}
|
</label>
|
||||||
name={name}
|
<Input
|
||||||
value={form[name] || ""}
|
type="text"
|
||||||
|
name="contract_number"
|
||||||
|
value={form.contract_number || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="border p-2 w-full"
|
placeholder="Enter contract number"
|
||||||
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
|
|
||||||
<button
|
<div>
|
||||||
type="submit"
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
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}
|
||||||
>
|
>
|
||||||
Dodaj umowę
|
Cancel
|
||||||
</button>
|
</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>
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
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 }) {
|
export default function ProjectForm({ initialData = null }) {
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
@@ -15,7 +18,8 @@ export default function ProjectForm({ initialData = null }) {
|
|||||||
investment_number: "",
|
investment_number: "",
|
||||||
finish_date: "",
|
finish_date: "",
|
||||||
wp: "",
|
wp: "",
|
||||||
contact: "", notes: "",
|
contact: "",
|
||||||
|
notes: "",
|
||||||
coordinates: "",
|
coordinates: "",
|
||||||
project_type: initialData?.project_type || "design",
|
project_type: initialData?.project_type || "design",
|
||||||
// project_status is not included in the form for creation or editing
|
// 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 [contracts, setContracts] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const isEdit = !!initialData;
|
const isEdit = !!initialData;
|
||||||
|
|
||||||
@@ -38,7 +43,9 @@ export default function ProjectForm({ initialData = null }) {
|
|||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
isEdit ? `/api/projects/${initialData.project_id}` : "/api/projects",
|
isEdit ? `/api/projects/${initialData.project_id}` : "/api/projects",
|
||||||
{
|
{
|
||||||
@@ -49,83 +56,327 @@ export default function ProjectForm({ initialData = null }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
|
const project = await res.json();
|
||||||
|
if (isEdit) {
|
||||||
|
router.push(`/projects/${project.project_id}`);
|
||||||
|
} else {
|
||||||
router.push("/projects");
|
router.push("/projects");
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
alert("Failed to save project.");
|
alert("Failed to save project.");
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error saving project:", error);
|
||||||
|
alert("Failed to save project.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<Card>
|
||||||
{/* Contract Dropdown */}
|
<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>
|
<div>
|
||||||
<label className="block font-medium">Umowa</label>
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Contract <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
<select
|
<select
|
||||||
name="contract_id"
|
name="contract_id"
|
||||||
value={form.contract_id || ""}
|
value={form.contract_id || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="border p-2 w-full"
|
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
|
required
|
||||||
>
|
>
|
||||||
<option value="">Wybierz umowę</option>
|
<option value="">Select Contract</option>
|
||||||
{contracts.map((contract) => (
|
{contracts.map((contract) => (
|
||||||
<option key={contract.contract_id} value={contract.contract_id}>
|
<option
|
||||||
|
key={contract.contract_id}
|
||||||
|
value={contract.contract_id}
|
||||||
|
>
|
||||||
{contract.contract_number} – {contract.contract_name}
|
{contract.contract_number} – {contract.contract_name}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Project Type Dropdown */}
|
|
||||||
<div>
|
<div>
|
||||||
<label className="block font-medium">Typ projektu</label>
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Project Type <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
<select
|
<select
|
||||||
name="project_type"
|
name="project_type"
|
||||||
value={form.project_type}
|
value={form.project_type}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="border p-2 w-full"
|
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
|
required
|
||||||
>
|
>
|
||||||
<option value="design">Projektowanie</option>
|
<option value="design">Design (Projektowanie)</option>
|
||||||
<option value="construction">Realizacja</option>
|
<option value="construction">Construction (Realizacja)</option>
|
||||||
<option value="design+construction">
|
<option value="design+construction">
|
||||||
Projektowanie + Realizacja
|
Design + Construction (Projektowanie + Realizacja)
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Other fields */} {[
|
{/* Basic Information Section */}
|
||||||
["project_name", "Nazwa projektu"],
|
<div className="border-t pt-6">
|
||||||
["address", "Lokalizacja"],
|
<h3 className="text-lg font-medium text-gray-900 mb-4">
|
||||||
["plot", "Działka"],
|
Basic Information
|
||||||
["district", "Obręb ewidencyjny"],
|
</h3>
|
||||||
["unit", "Jednostka ewidencyjna"],
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
["city", "Miejscowość"],
|
<div className="md:col-span-2">
|
||||||
["investment_number", "Numer inwestycjny"],
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
["finish_date", "Termin realizacji"],
|
Project Name <span className="text-red-500">*</span>
|
||||||
["wp", "WP"], ["contact", "Dane kontaktowe"],
|
</label>
|
||||||
["coordinates", "Coordinates"],
|
<Input
|
||||||
["notes", "Notatki"],
|
type="text"
|
||||||
].map(([name, label]) => (
|
name="project_name"
|
||||||
<div key={name}>
|
value={form.project_name || ""}
|
||||||
<label className="block font-medium">{label}</label>
|
|
||||||
<input
|
|
||||||
type={name === "finish_date" ? "date" : "text"}
|
|
||||||
name={name}
|
|
||||||
value={form[name] || ""}
|
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
className="border p-2 w-full"
|
placeholder="Enter project name"
|
||||||
placeholder={name === "coordinates" ? "e.g., 49.622958,20.629562" : ""}
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
|
|
||||||
<button
|
<div>
|
||||||
type="submit"
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
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}
|
||||||
>
|
>
|
||||||
{isEdit ? "Update" : "Create"} Project
|
Cancel
|
||||||
</button>
|
</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>
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user