"use client"; 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"; import { formatDate } from "@/lib/utils"; export default function ContractDetailsPage() { const params = useParams(); const contractId = params.id; const [contract, setContract] = useState(null); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchContractDetails() { setLoading(true); try { // Fetch contract details const contractRes = await fetch(`/api/contracts/${contractId}`); if (contractRes.ok) { const contractData = await contractRes.json(); setContract(contractData); } // Fetch projects for this contract const projectsRes = await fetch( `/api/projects?contract_id=${contractId}` ); if (projectsRes.ok) { const projectsData = await projectsRes.json(); setProjects(projectsData); } } catch (error) { console.error("Error fetching contract details:", error); } finally { setLoading(false); } } if (contractId) { fetchContractDetails(); } }, [contractId]); if (loading) { return ( ); } if (!contract) { return (

Contract not found.

); } return ( } /> {/* Contract Details */}

Contract Information

Contract Number

{contract.contract_number}

{contract.contract_name && (
Contract Name

{contract.contract_name}

)} {contract.customer_contract_number && (
Customer Contract Number

{contract.customer_contract_number}

)} {contract.customer && (
Customer

{contract.customer}

)} {contract.investor && (
Investor

{contract.investor}

)}{" "} {contract.date_signed && (
Date Signed

{formatDate(contract.date_signed)}

)} {contract.finish_date && (
Finish Date

{formatDate(contract.finish_date)}

)}
{/* Contract Summary Sidebar */}

Summary

Projects Count {projects.length} Projects
{contract.finish_date && (
Contract Status new Date() ? "success" : "warning" } size="md" > {new Date(contract.finish_date) > new Date() ? "Active" : "Expired"}
)}
{/* Associated Projects */}

Associated Projects ({projects.length})

{projects.length === 0 ? (

No projects yet

Get started by creating your first project for this contract

) : (
{projects.map((project) => (

{project.project_name}

{project.project_number}
{project.address && (
{project.address}
)} {project.finish_date && (
{" "} {formatDate(project.finish_date)}
)}
{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"}
))}
)}
); }