feat: Implement file upload and management system with database integration

src/app/contracts/[id]/page.js

@@ -10,6 +10,8 @@ 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";
 
 export default function ContractDetailsPage() {
 	const params = useParams();
@@ -17,6 +19,8 @@ export default function ContractDetailsPage() {
 	const [contract, setContract] = useState(null);
 	const [projects, setProjects] = useState([]);
 	const [loading, setLoading] = useState(true);
+	const [showUploadModal, setShowUploadModal] = useState(false);
+	const [attachments, setAttachments] = useState([]);
 
 	useEffect(() => {
 		async function fetchContractDetails() {
@@ -52,6 +56,14 @@ export default function ContractDetailsPage() {
 			fetchContractDetails();
 		}
 	}, [contractId]);
+	const handleFileUploaded = (newFile) => {
+		setAttachments(prev => [newFile, ...prev]);
+	};
+
+	const handleFilesChange = (files) => {
+		setAttachments(files);
+	};
+
 	if (loading) {
 		return (
 			<PageContainer>
@@ -245,6 +257,44 @@ export default function ContractDetailsPage() {
 				</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">
+							Contract Documents ({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>
+							Upload Document
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent>
+					<FileAttachmentsList
+						entityType="contract"
+						entityId={contractId}
+						onFilesChange={handleFilesChange}
+					/>
+				</CardContent>
+			</Card>
+
 			{/* Associated Projects */}
 			<Card>
 				<CardHeader>
@@ -386,6 +436,15 @@ export default function ContractDetailsPage() {
 					)}
 				</CardContent>
 			</Card>
+
+			{/* File Upload Modal */}
+			<FileUploadModal
+				isOpen={showUploadModal}
+				onClose={() => setShowUploadModal(false)}
+				entityType="contract"
+				entityId={contractId}
+				onFileUploaded={handleFileUploaded}
+			/>
 		</PageContainer>
 	);
 }