453 lines
13 KiB
JavaScript
453 lines
13 KiB
JavaScript
"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";
|
|
import FileUploadModal from "@/components/FileUploadModal";
|
|
import FileAttachmentsList from "@/components/FileAttachmentsList";
|
|
import { useTranslation } from "@/lib/i18n";
|
|
|
|
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);
|
|
const [showUploadModal, setShowUploadModal] = useState(false);
|
|
const [attachments, setAttachments] = useState([]);
|
|
const { t } = useTranslation();
|
|
|
|
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();
|
|
// Sort projects by project_id in descending order (newest first)
|
|
const sortedProjects = projectsData.sort(
|
|
(a, b) => b.project_id - a.project_id
|
|
);
|
|
setProjects(sortedProjects);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching contract details:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
if (contractId) {
|
|
fetchContractDetails();
|
|
}
|
|
}, [contractId]);
|
|
const handleFileUploaded = (newFile) => {
|
|
setAttachments(prev => [newFile, ...prev]);
|
|
};
|
|
|
|
const handleFilesChange = (files) => {
|
|
setAttachments(files);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<PageContainer>
|
|
<LoadingState message={t('contracts.loadingContractDetails')} />
|
|
</PageContainer>
|
|
);
|
|
}
|
|
|
|
if (!contract) {
|
|
return (
|
|
<PageContainer>
|
|
<Card>
|
|
<CardContent className="text-center py-12">
|
|
<p className="text-red-600 text-lg mb-4">{t('contracts.contractNotFound')}</p>
|
|
<Link href="/contracts">
|
|
<Button variant="primary">{t('contracts.backToContracts')}</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
);
|
|
}
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
title={`${t('contracts.contract')} ${contract.contract_number}`}
|
|
description={contract.contract_name || t('contracts.contractInformation')}
|
|
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>
|
|
{t('contracts.backToContracts')}
|
|
</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>
|
|
{t('contracts.addProject')}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
{/* Contract Details */}
|
|
<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">
|
|
{t('contracts.contractInformation')}
|
|
</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">
|
|
{t('contracts.contractNumber')}
|
|
</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">
|
|
{t('contracts.contractName')}
|
|
</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">
|
|
{t('contracts.customerContractNumber')}
|
|
</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">
|
|
{t('contracts.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">
|
|
{t('contracts.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">
|
|
{t('contracts.dateSigned')}
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{formatDate(contract.date_signed)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{contract.finish_date && (
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-1">
|
|
{t('contracts.finishDate')}
|
|
</span>
|
|
<p className="text-gray-900 font-medium">
|
|
{formatDate(contract.finish_date)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Contract Summary Sidebar */}
|
|
<div>
|
|
<Card>
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold text-gray-900">{t('contracts.summary')}</h2>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
|
{t('contracts.projectsCount')}
|
|
</span>
|
|
<Badge variant="primary" size="lg">
|
|
{projects.length} {t('contracts.projects')}
|
|
</Badge>
|
|
</div>
|
|
|
|
{contract.finish_date && (
|
|
<div className="border-t pt-4">
|
|
<span className="text-sm font-medium text-gray-500 block mb-2">
|
|
{t('contracts.contractStatus')}
|
|
</span>
|
|
<Badge
|
|
variant={
|
|
new Date(contract.finish_date) > new Date()
|
|
? "success"
|
|
: "warning"
|
|
}
|
|
size="md"
|
|
>
|
|
{new Date(contract.finish_date) > new Date()
|
|
? t('contracts.active')
|
|
: t('contracts.expired')}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contract Documents */}
|
|
<Card className="mb-8">
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{t('contracts.contractDocuments')} ({attachments.length})
|
|
</h2>
|
|
<Button
|
|
variant="primary"
|
|
size="sm"
|
|
onClick={() => setShowUploadModal(true)}
|
|
>
|
|
<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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
|
/>
|
|
</svg>
|
|
{t('contracts.uploadDocument')}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FileAttachmentsList
|
|
entityType="contract"
|
|
entityId={contractId}
|
|
onFilesChange={handleFilesChange}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Associated Projects */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
{t('contracts.associatedProjects')} ({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>
|
|
{t('contracts.addProject')}
|
|
</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">
|
|
{t('contracts.noProjectsYet')}
|
|
</h3>
|
|
<p className="text-gray-500 mb-6">
|
|
{t('contracts.getStartedMessage')}
|
|
</p>
|
|
<Link href={`/projects/new?contract_id=${contractId}`}>
|
|
<Button variant="primary">{t('contracts.createFirstProject')}</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>{" "}
|
|
{formatDate(project.finish_date)}
|
|
</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"
|
|
? t('projectStatus.registered')
|
|
: project.project_status === "in_progress_design"
|
|
? t('projectStatus.in_progress_design')
|
|
: project.project_status ===
|
|
"in_progress_construction"
|
|
? t('projectStatus.in_progress_construction')
|
|
: project.project_status === "fulfilled"
|
|
? t('projectStatus.fulfilled')
|
|
: t('projectStatus.unknown')}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Link href={`/projects/${project.project_id}`}>
|
|
<Button variant="outline" size="sm">
|
|
{t('contracts.viewDetails')}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* File Upload Modal */}
|
|
<FileUploadModal
|
|
isOpen={showUploadModal}
|
|
onClose={() => setShowUploadModal(false)}
|
|
entityType="contract"
|
|
entityId={contractId}
|
|
onFileUploaded={handleFileUploaded}
|
|
/>
|
|
</PageContainer>
|
|
);
|
|
}
|