Files
LexiChain/app/(dashboard)/contacts/page.tsx
2026-04-12 19:24:24 +01:00

111 lines
4.2 KiB
TypeScript

"use client";
import { ContractUploadForm } from "@/features/contracts/components/forms/contract-upload-form";
import { EmptyContractsState } from "@/features/contracts/components/list/empty-contracts-state";
import { ContractsList } from "@/features/contracts/components/list/contracts-list";
import { ContractsHeader } from "@/components/layout/contacts-header";
import { useState, useEffect } from "react";
import { getContracts } from "@/features/contracts/api/contract.action";
import { Card } from "@/components/ui/card";
export default function ContactsPage() {
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [showContracts, setShowContracts] = useState(false);
const [isChecking, setIsChecking] = useState(true);
// Check if there are any existing contracts on mount
useEffect(() => {
const checkContracts = async () => {
try {
const result = await getContracts();
if (
result.success &&
Array.isArray(result.contracts) &&
result.contracts.length > 0
) {
setShowContracts(true);
}
} catch (error) {
console.error("Failed to check contracts:", error);
} finally {
setIsChecking(false);
}
};
checkContracts();
}, []);
const handleUploadSuccess = () => {
setRefreshTrigger((prev) => prev + 1);
setShowContracts(true);
};
if (isChecking) {
return (
<>
<div className="min-h-screen bg-background text-foreground overflow-hidden">
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-blob"></div>
<div className="absolute top-1/2 right-1/4 w-96 h-96 bg-accent/20 rounded-full blur-3xl animate-blob animation-delay-2000"></div>
<div className="absolute -bottom-8 right-1/3 w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-blob animation-delay-4000"></div>
</div>
<main className="relative z-10 flex flex-col h-screen overflow-auto items-center justify-center">
<div className="text-center">
<div className="mb-4 inline-block p-4 bg-background dark:bg-card rounded-full border border-border/50">
<div className="w-8 h-8 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
</div>
<p className="text-muted-foreground">Loading...</p>
</div>
</main>
</div>
</>
);
}
return (
<>
<div className="min-h-screen bg-background text-foreground">
<main className="flex flex-col min-h-screen">
<ContractsHeader />
<div className="flex-1 overflow-auto">
<div className="max-w-7xl mx-auto px-6 py-8 space-y-8">
<Card className="rounded-2xl border-border/60 p-6 md:p-8">
<div className="mb-6">
<h2 className="text-2xl md:text-3xl font-semibold tracking-tight">
Upload Contract
</h2>
<p className="mt-2 text-sm md:text-base text-muted-foreground">
Add PDF contracts and let the AI pipeline extract summary,
key points, and legal-business insights.
</p>
</div>
<ContractUploadForm onUploadSuccess={handleUploadSuccess} />
</Card>
<Card className="rounded-2xl border-border/60 p-6 md:p-8">
<div className="mb-6">
<h2 className="text-2xl md:text-3xl font-semibold tracking-tight">
Your Contracts
</h2>
<p className="mt-2 text-sm md:text-base text-muted-foreground">
Review contract lifecycle, trigger analysis, and ask AI
questions per file.
</p>
</div>
{showContracts ? (
<ContractsList refreshTrigger={refreshTrigger} />
) : (
<EmptyContractsState />
)}
</Card>
</div>
</div>
</main>
</div>
</>
);
}