497 lines
14 KiB
JavaScript
497 lines
14 KiB
JavaScript
import {
|
|
getProjectWithContract,
|
|
getNotesForProject,
|
|
} from "@/lib/queries/projects";
|
|
import NoteForm from "@/components/NoteForm";
|
|
import ProjectTasksSection from "@/components/ProjectTasksSection";
|
|
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
|
import Button from "@/components/ui/Button";
|
|
import Badge from "@/components/ui/Badge";
|
|
import Link from "next/link";
|
|
import { differenceInCalendarDays, parseISO } from "date-fns";
|
|
import { formatDate } from "@/lib/utils";
|
|
import PageContainer from "@/components/ui/PageContainer";
|
|
import PageHeader from "@/components/ui/PageHeader";
|
|
import ProjectStatusDropdown from "@/components/ProjectStatusDropdown";
|
|
import ProjectMap from "@/components/ui/ProjectMap";
|
|
|
|
export default async function ProjectViewPage({ params }) {
|
|
const { id } = await params;
|
|
const project = getProjectWithContract(id);
|
|
const notes = getNotesForProject(id);
|
|
|
|
if (!project) {
|
|
return (
|
|
<PageContainer>
|
|
<Card>
|
|
<CardContent className="text-center py-8">
|
|
<p className="text-red-600 text-lg">Project not found.</p>
|
|
<Link href="/projects" className="mt-4 inline-block">
|
|
<Button variant="primary">Back to Projects</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
const daysRemaining = project.finish_date
|
|
? differenceInCalendarDays(parseISO(project.finish_date), new Date())
|
|
: null;
|
|
|
|
const getDeadlineVariant = (days) => {
|
|
if (days < 0) return "danger";
|
|
if (days <= 7) return "warning";
|
|
return "success";
|
|
};
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
title={project.project_name}
|
|
description={`${project.city} • ${project.address}`}
|
|
action={
|
|
<div className="flex items-center gap-3">
|
|
<ProjectStatusDropdown project={project} size="sm" />
|
|
{daysRemaining !== null && (
|
|
<Badge variant={getDeadlineVariant(daysRemaining)} size="md">
|
|
{daysRemaining === 0
|
|
? "Due Today"
|
|
: daysRemaining > 0
|
|
? `${daysRemaining} days left`
|
|
: `${Math.abs(daysRemaining)} days overdue`}
|
|
</Badge>
|
|
)}
|
|
<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>
|
|
<Link href={`/projects/${id}/edit`}>
|
|
<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>
|
|
</div>
|
|
}
|
|
/>{" "}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
{/* Main Project Information */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
{" "}
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
Project Information
|
|
</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>
|
|
<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">
|
|
Location
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{project.city || "N/A"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
Address
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{project.address || "N/A"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
Plot
|
|
</span>
|
|
<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
|
|
? formatDate(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>
|
|
|
|
{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>
|
|
</Card>
|
|
|
|
{/* Contract Details */}
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
Contract Details
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<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">
|
|
{project.contract_number || "N/A"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
Contract Name
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{project.contract_name || "N/A"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
Customer
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{project.customer || "N/A"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
Investor
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{project.investor || "N/A"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<ProjectStatusDropdown project={project} size="md" />
|
|
</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>
|
|
<Link href="/projects/map" 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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"
|
|
/>
|
|
</svg>
|
|
View All on Map
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>{" "}
|
|
{/* Project Location Map */}
|
|
{project.coordinates && (
|
|
<div className="mb-8">
|
|
{" "}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
Project Location
|
|
</h2>
|
|
<Link href="/projects/map">
|
|
<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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-1.447-.894L15 4m0 13V4m0 0L9 7"
|
|
/>
|
|
</svg>
|
|
View on Full Map
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ProjectMap
|
|
coordinates={project.coordinates}
|
|
projectName={project.project_name}
|
|
projectStatus={project.project_status}
|
|
showLayerControl={true}
|
|
mapHeight="h-80"
|
|
defaultLayer="Polish Geoportal Orthophoto"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
{/* Project Tasks Section */}
|
|
<div className="mb-8">
|
|
<ProjectTasksSection projectId={id} />
|
|
</div>
|
|
{/* Notes Section */}
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-xl font-semibold text-gray-900">Notes</h2>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="mb-6">
|
|
<NoteForm projectId={id} />
|
|
</div>
|
|
{notes.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 mb-4">
|
|
<svg
|
|
className="w-12 h-12 mx-auto"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-1H8v1a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v4a1 1 0 001 1h1a1 1 0 100-2v-1a2 2 0 00-2-2H7a1 1 0 000 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<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 className="space-y-4">
|
|
{notes.map((n) => (
|
|
<div
|
|
key={n.note_id}
|
|
className="border border-gray-200 p-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<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>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
}
|