815 lines
30 KiB
TypeScript
815 lines
30 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import Link from "next/link";
|
|
import { motion } from "motion/react";
|
|
import {
|
|
Activity,
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
BarChart3,
|
|
Brain,
|
|
CheckCircle2,
|
|
Clock3,
|
|
Database,
|
|
FileText,
|
|
RefreshCw,
|
|
Sparkles,
|
|
TrendingUp,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { getStatsAction } from "@/lib/actions/stats.action";
|
|
import { checkDeadlineNotifications } from "@/lib/actions/notification.action";
|
|
import {
|
|
ContractStatusChart,
|
|
ContractTypeChart,
|
|
TrendChart,
|
|
} from "@/components/views/dashboard/charts";
|
|
|
|
interface DashboardStats {
|
|
totalContracts: number;
|
|
analyzedContracts: number;
|
|
processingContracts: number;
|
|
uploadedContracts: number;
|
|
failedContracts: number;
|
|
analysisRate: number;
|
|
}
|
|
|
|
interface ChartData {
|
|
byType: Array<{ type: string; count: number }>;
|
|
byStatus: Array<{ status: string; count: number }>;
|
|
trends: Array<{ date: string; count: number }>;
|
|
}
|
|
|
|
interface PremiumInfo {
|
|
averagePremium: number;
|
|
totalPremium: number;
|
|
count: number;
|
|
}
|
|
|
|
interface RecentContract {
|
|
id: string;
|
|
title: string | null;
|
|
type: string | null;
|
|
createdAt: string;
|
|
premium: number | null;
|
|
}
|
|
|
|
interface AILearningTelemetry {
|
|
completedSamples: number;
|
|
completedLast7Days: number;
|
|
avgSummaryLength: number;
|
|
avgExtractedTextLength: number;
|
|
avgKeyPointsPerContract: number;
|
|
learningScore: number;
|
|
improvementHint: string;
|
|
}
|
|
|
|
interface StatsActionResult {
|
|
success: boolean;
|
|
stats?: DashboardStats;
|
|
chartData?: ChartData;
|
|
premiumInfo?: PremiumInfo;
|
|
aiLearningTelemetry?: AILearningTelemetry;
|
|
recentContracts?: RecentContract[];
|
|
error?: string;
|
|
}
|
|
|
|
const numberFormatter = new Intl.NumberFormat("en-US");
|
|
|
|
const currencyFormatter = new Intl.NumberFormat("en-US", {
|
|
style: "currency",
|
|
currency: "USD",
|
|
maximumFractionDigits: 2,
|
|
});
|
|
|
|
const defaultStats: DashboardStats = {
|
|
totalContracts: 0,
|
|
analyzedContracts: 0,
|
|
processingContracts: 0,
|
|
uploadedContracts: 0,
|
|
failedContracts: 0,
|
|
analysisRate: 0,
|
|
};
|
|
|
|
const formatLastUpdated = (date: Date | null): string => {
|
|
if (!date) {
|
|
return "Just now";
|
|
}
|
|
|
|
const seconds = Math.max(1, Math.floor((Date.now() - date.getTime()) / 1000));
|
|
if (seconds < 60) return `${seconds}s ago`;
|
|
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
|
|
const hours = Math.floor(minutes / 60);
|
|
return `${hours}h ago`;
|
|
};
|
|
|
|
const clampPercent = (value: number): number =>
|
|
Math.max(0, Math.min(100, value));
|
|
|
|
export default function DashboardPage() {
|
|
const [stats, setStats] = useState<DashboardStats>(defaultStats);
|
|
const [chartData, setChartData] = useState<ChartData | null>(null);
|
|
const [premiumInfo, setPremiumInfo] = useState<PremiumInfo>({
|
|
averagePremium: 0,
|
|
totalPremium: 0,
|
|
count: 0,
|
|
});
|
|
const [recentContracts, setRecentContracts] = useState<RecentContract[]>([]);
|
|
const [aiLearningTelemetry, setAiLearningTelemetry] =
|
|
useState<AILearningTelemetry>({
|
|
completedSamples: 0,
|
|
completedLast7Days: 0,
|
|
avgSummaryLength: 0,
|
|
avgExtractedTextLength: 0,
|
|
avgKeyPointsPerContract: 0,
|
|
learningScore: 0,
|
|
improvementHint: "Analyze contracts to build your AI quality profile.",
|
|
});
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
|
|
|
const loadStats = useCallback(async (options?: { silent?: boolean }) => {
|
|
const isSilentRefresh = options?.silent ?? false;
|
|
|
|
if (isSilentRefresh) {
|
|
setIsRefreshing(true);
|
|
} else {
|
|
setIsLoading(true);
|
|
}
|
|
|
|
try {
|
|
const result = (await getStatsAction()) as StatsActionResult;
|
|
|
|
if (!result.success) {
|
|
return;
|
|
}
|
|
|
|
if (result.stats) setStats(result.stats);
|
|
if (result.chartData) setChartData(result.chartData);
|
|
if (result.premiumInfo) setPremiumInfo(result.premiumInfo);
|
|
if (result.aiLearningTelemetry) {
|
|
setAiLearningTelemetry(result.aiLearningTelemetry);
|
|
}
|
|
if (result.recentContracts) setRecentContracts(result.recentContracts);
|
|
|
|
setLastUpdated(new Date());
|
|
} finally {
|
|
if (isSilentRefresh) {
|
|
setIsRefreshing(false);
|
|
} else {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void loadStats();
|
|
// Check for upcoming contract deadlines and create notifications
|
|
void checkDeadlineNotifications();
|
|
}, [loadStats]);
|
|
|
|
useEffect(() => {
|
|
if (stats.processingContracts === 0 && stats.uploadedContracts === 0) {
|
|
return;
|
|
}
|
|
|
|
const intervalId = window.setInterval(() => {
|
|
void loadStats({ silent: true });
|
|
}, 10000);
|
|
|
|
return () => window.clearInterval(intervalId);
|
|
}, [loadStats, stats.processingContracts, stats.uploadedContracts]);
|
|
|
|
const hasChartData = useMemo(() => {
|
|
if (!chartData) return false;
|
|
|
|
const trendsCount = chartData.trends.reduce(
|
|
(total, entry) => total + entry.count,
|
|
0,
|
|
);
|
|
const byStatusCount = chartData.byStatus.reduce(
|
|
(total, entry) => total + entry.count,
|
|
0,
|
|
);
|
|
const byTypeCount = chartData.byType.reduce(
|
|
(total, entry) => total + entry.count,
|
|
0,
|
|
);
|
|
|
|
return trendsCount + byStatusCount + byTypeCount > 0;
|
|
}, [chartData]);
|
|
|
|
const pendingContracts = stats.processingContracts + stats.uploadedContracts;
|
|
|
|
const analyzedPercent =
|
|
stats.totalContracts > 0
|
|
? clampPercent((stats.analyzedContracts / stats.totalContracts) * 100)
|
|
: 0;
|
|
|
|
const pendingPercent =
|
|
stats.totalContracts > 0
|
|
? clampPercent((pendingContracts / stats.totalContracts) * 100)
|
|
: 0;
|
|
|
|
const failedPercent =
|
|
stats.totalContracts > 0
|
|
? clampPercent((stats.failedContracts / stats.totalContracts) * 100)
|
|
: 0;
|
|
|
|
const statusRows = [
|
|
{
|
|
label: "Uploaded",
|
|
value: stats.uploadedContracts,
|
|
colorClass: "bg-amber-500",
|
|
},
|
|
{
|
|
label: "Processing",
|
|
value: stats.processingContracts,
|
|
colorClass: "bg-primary",
|
|
},
|
|
{
|
|
label: "Analyzed",
|
|
value: stats.analyzedContracts,
|
|
colorClass: "bg-emerald-500",
|
|
},
|
|
{
|
|
label: "Failed",
|
|
value: stats.failedContracts,
|
|
colorClass: "bg-destructive",
|
|
},
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div className="mx-auto max-w-7xl px-6 py-16">
|
|
<Card className="rounded-3xl border-border/60 p-10">
|
|
<div className="flex items-center gap-3 text-muted-foreground">
|
|
<RefreshCw className="h-5 w-5 animate-spin" />
|
|
Building your analytics workspace...
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<div className="relative overflow-hidden border-b border-border/50">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary)/0.22),transparent_45%),radial-gradient(circle_at_bottom_left,hsl(var(--secondary)/0.16),transparent_40%),linear-gradient(180deg,hsl(var(--background)),hsl(var(--background)/0.95))]" />
|
|
<svg
|
|
viewBox="0 0 640 320"
|
|
fill="none"
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute right-[-140px] top-[-50px] h-[340px] w-[540px] opacity-50"
|
|
>
|
|
<path
|
|
d="M12 290C96 240 128 112 228 110C300 108 336 206 412 206C492 206 524 138 628 132"
|
|
stroke="hsl(var(--primary))"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M4 250C86 200 150 74 238 74C322 74 350 170 430 170C502 170 560 108 636 104"
|
|
stroke="hsl(var(--secondary))"
|
|
strokeWidth="2"
|
|
strokeDasharray="6 8"
|
|
strokeLinecap="round"
|
|
/>
|
|
<circle cx="228" cy="110" r="8" fill="hsl(var(--primary))" />
|
|
<circle cx="412" cy="206" r="7" fill="hsl(var(--secondary))" />
|
|
<circle cx="430" cy="170" r="7" fill="hsl(var(--accent))" />
|
|
</svg>
|
|
<div className="relative mx-auto max-w-7xl px-6 py-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="grid gap-8 xl:grid-cols-[1.45fr,0.95fr] xl:items-end"
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="inline-flex items-center gap-2 rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
Performance Overview
|
|
</p>
|
|
<h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
|
|
Financial Contracts Analytics
|
|
</h1>
|
|
<p className="max-w-2xl text-muted-foreground md:text-base">
|
|
A reliable command center for uploaded documents, AI analysis
|
|
throughput, and portfolio quality across your BFSI workflow.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-2 pt-1 text-xs">
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-muted/50 px-3 py-1 text-muted-foreground">
|
|
<Activity className="h-3.5 w-3.5 text-primary" />
|
|
Live metrics
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-muted/50 px-3 py-1 text-muted-foreground">
|
|
<Clock3 className="h-3.5 w-3.5 text-secondary" />
|
|
{isRefreshing
|
|
? "Syncing..."
|
|
: `Updated ${formatLastUpdated(lastUpdated)}`}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="rounded-2xl border-border/60 bg-card/80 p-5 backdrop-blur-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
|
Pipeline Snapshot
|
|
</p>
|
|
<p className="mt-1 text-2xl font-semibold">
|
|
{numberFormatter.format(stats.totalContracts)} files
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-primary/20 bg-primary/10 p-2.5">
|
|
<Database className="h-5 w-5 text-primary" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 rounded-xl border border-border/60 bg-muted/25 p-3">
|
|
<svg
|
|
viewBox="0 0 260 90"
|
|
fill="none"
|
|
aria-hidden="true"
|
|
className="h-[92px] w-full"
|
|
>
|
|
<path
|
|
d="M4 72H256"
|
|
stroke="hsl(var(--border))"
|
|
strokeWidth="1"
|
|
/>
|
|
<rect
|
|
x="24"
|
|
y="32"
|
|
width="28"
|
|
height="40"
|
|
rx="8"
|
|
fill="hsl(var(--primary) / 0.85)"
|
|
/>
|
|
<rect
|
|
x="76"
|
|
y="22"
|
|
width="28"
|
|
height="50"
|
|
rx="8"
|
|
fill="hsl(var(--secondary) / 0.8)"
|
|
/>
|
|
<rect
|
|
x="128"
|
|
y="14"
|
|
width="28"
|
|
height="58"
|
|
rx="8"
|
|
fill="hsl(var(--accent) / 0.78)"
|
|
/>
|
|
<rect
|
|
x="180"
|
|
y="44"
|
|
width="28"
|
|
height="28"
|
|
rx="8"
|
|
fill="hsl(var(--destructive) / 0.8)"
|
|
/>
|
|
<path
|
|
d="M24 30C64 8 98 10 142 18C176 24 214 34 240 22"
|
|
stroke="hsl(var(--foreground) / 0.35)"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-3 text-xs">
|
|
<div className="rounded-lg border border-border/60 bg-muted/30 px-3 py-2">
|
|
<p className="text-muted-foreground">Analyzed</p>
|
|
<p className="mt-1 text-sm font-semibold text-foreground">
|
|
{numberFormatter.format(stats.analyzedContracts)}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border border-border/60 bg-muted/30 px-3 py-2">
|
|
<p className="text-muted-foreground">Pending</p>
|
|
<p className="mt-1 text-sm font-semibold text-foreground">
|
|
{numberFormatter.format(pendingContracts)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => void loadStats()}
|
|
className="w-full rounded-xl"
|
|
>
|
|
<RefreshCw
|
|
className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
|
|
/>
|
|
Refresh
|
|
</Button>
|
|
<Button asChild className="w-full rounded-xl">
|
|
<Link href="/contacts">
|
|
Manage
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-7xl px-6 py-10">
|
|
<div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
|
|
<Card className="rounded-2xl border-border/60 bg-card/70 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">Total Files</p>
|
|
<FileText className="h-4 w-4 text-primary" />
|
|
</div>
|
|
<p className="mt-2 text-4xl font-semibold">
|
|
{numberFormatter.format(stats.totalContracts)}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Uploaded into your workspace
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="rounded-2xl border-border/60 bg-card/70 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">Analyzed</p>
|
|
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
|
</div>
|
|
<p className="mt-2 text-4xl font-semibold">
|
|
{numberFormatter.format(stats.analyzedContracts)}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Completed by AI pipeline
|
|
</p>
|
|
<div className="mt-3 h-1.5 w-full rounded-full bg-muted/70">
|
|
<div
|
|
className="h-1.5 rounded-full bg-emerald-500"
|
|
style={{ width: `${analyzedPercent}%` }}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="rounded-2xl border-border/60 bg-card/70 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">Pending Queue</p>
|
|
<Clock3 className="h-4 w-4 text-amber-500" />
|
|
</div>
|
|
<p className="mt-2 text-4xl font-semibold">
|
|
{numberFormatter.format(pendingContracts)}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Uploaded and processing files
|
|
</p>
|
|
<div className="mt-3 h-1.5 w-full rounded-full bg-muted/70">
|
|
<div
|
|
className="h-1.5 rounded-full bg-amber-500"
|
|
style={{ width: `${pendingPercent}%` }}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="rounded-2xl border-border/60 bg-card/70 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-sm text-muted-foreground">Failed</p>
|
|
<AlertTriangle className="h-4 w-4 text-destructive" />
|
|
</div>
|
|
<p className="mt-2 text-4xl font-semibold">
|
|
{numberFormatter.format(stats.failedContracts)}
|
|
</p>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Items needing re-analysis
|
|
</p>
|
|
<div className="mt-3 h-1.5 w-full rounded-full bg-muted/70">
|
|
<div
|
|
className="h-1.5 rounded-full bg-destructive"
|
|
style={{ width: `${failedPercent}%` }}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="mt-5 rounded-2xl border-border/60 p-5">
|
|
<div className="grid gap-6 lg:grid-cols-[1.2fr,0.8fr]">
|
|
<div>
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<BarChart3 className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-semibold">Pipeline Pulse</h2>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{statusRows.map((row) => {
|
|
const rowPercent =
|
|
stats.totalContracts > 0
|
|
? clampPercent((row.value / stats.totalContracts) * 100)
|
|
: 0;
|
|
|
|
return (
|
|
<div
|
|
key={row.label}
|
|
className="rounded-xl border border-border/50 bg-muted/25 p-3"
|
|
>
|
|
<div className="mb-2 flex items-center justify-between text-xs">
|
|
<p className="text-muted-foreground">{row.label}</p>
|
|
<p className="font-medium text-foreground">
|
|
{numberFormatter.format(row.value)}
|
|
</p>
|
|
</div>
|
|
<div className="h-1.5 w-full rounded-full bg-muted/70">
|
|
<div
|
|
className={`h-1.5 rounded-full ${row.colorClass}`}
|
|
style={{ width: `${rowPercent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">Success Rate</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{stats.analysisRate}%
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Completed vs total files
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">Avg Premium</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{currencyFormatter.format(premiumInfo.averagePremium)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Across {numberFormatter.format(premiumInfo.count)} analyzed
|
|
files
|
|
</p>
|
|
</div>
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">Total Premium</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{currencyFormatter.format(premiumInfo.totalPremium)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Portfolio value captured by AI
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card className="mt-5 rounded-2xl border-border/60 p-5">
|
|
<div className="mb-4 flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<Brain className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-semibold">AI Learning Telemetry</h2>
|
|
</div>
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-xs text-primary">
|
|
<TrendingUp className="h-3.5 w-3.5" />
|
|
Score {aiLearningTelemetry.learningScore}/100
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">Completed Samples</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{numberFormatter.format(aiLearningTelemetry.completedSamples)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
{numberFormatter.format(aiLearningTelemetry.completedLast7Days)}{" "}
|
|
in last 7 days
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">
|
|
Avg Summary Length
|
|
</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{numberFormatter.format(aiLearningTelemetry.avgSummaryLength)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">characters</p>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">
|
|
Avg Extracted Text
|
|
</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{numberFormatter.format(
|
|
aiLearningTelemetry.avgExtractedTextLength,
|
|
)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">characters</p>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-border/50 bg-muted/25 px-4 py-3">
|
|
<p className="text-xs text-muted-foreground">Avg Key Points</p>
|
|
<p className="mt-1 text-2xl font-semibold text-foreground">
|
|
{aiLearningTelemetry.avgKeyPointsPerContract.toFixed(1)}
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
items per analysis
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 rounded-xl border border-border/50 bg-muted/20 p-3">
|
|
<div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
|
|
<span>Learning quality index</span>
|
|
<span>{aiLearningTelemetry.learningScore}%</span>
|
|
</div>
|
|
<div className="h-1.5 w-full rounded-full bg-muted">
|
|
<div
|
|
className="h-1.5 rounded-full bg-gradient-to-r from-primary to-accent"
|
|
style={{
|
|
width: `${Math.max(0, Math.min(100, aiLearningTelemetry.learningScore))}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
{aiLearningTelemetry.improvementHint}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{hasChartData ? (
|
|
<div className="mt-6 grid grid-cols-1 gap-5 xl:grid-cols-12">
|
|
{chartData && chartData.trends.length > 0 && (
|
|
<Card className="rounded-2xl border-border/60 p-5 xl:col-span-8">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<BarChart3 className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-medium">
|
|
Upload Trend (30 days)
|
|
</h2>
|
|
</div>
|
|
<div className="h-[320px]">
|
|
<TrendChart data={chartData.trends} />
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{chartData && chartData.byStatus.length > 0 && (
|
|
<Card className="rounded-2xl border-border/60 p-5 xl:col-span-4">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<CheckCircle2 className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-medium">Processing Status</h2>
|
|
</div>
|
|
<div className="h-[320px]">
|
|
<ContractStatusChart
|
|
data={chartData.byStatus.map((s) => ({
|
|
...s,
|
|
name: s.status,
|
|
}))}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{chartData && chartData.byType.length > 0 && (
|
|
<Card className="rounded-2xl border-border/60 p-5 xl:col-span-7">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<FileText className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-medium">
|
|
Contract Type Distribution
|
|
</h2>
|
|
</div>
|
|
<div className="h-[300px]">
|
|
<ContractTypeChart data={chartData.byType} />
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<Card className="rounded-2xl border-border/60 p-5 xl:col-span-5">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<Sparkles className="h-4 w-4 text-primary" />
|
|
<h2 className="text-sm font-medium">Recent Analyses</h2>
|
|
</div>
|
|
|
|
{recentContracts.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{recentContracts.map((contract) => (
|
|
<div
|
|
key={contract.id}
|
|
className="rounded-xl border border-border/50 bg-muted/25 p-3"
|
|
>
|
|
<p className="text-sm font-medium text-foreground line-clamp-1">
|
|
{contract.title || "Untitled contract"}
|
|
</p>
|
|
<div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
|
|
<span>{contract.type || "Unknown type"}</span>
|
|
<span>
|
|
{new Date(contract.createdAt).toLocaleDateString(
|
|
"en-US",
|
|
{
|
|
month: "short",
|
|
day: "numeric",
|
|
},
|
|
)}
|
|
</span>
|
|
</div>
|
|
<p className="mt-2 text-xs font-medium text-foreground">
|
|
Premium:{" "}
|
|
{contract.premium !== null
|
|
? currencyFormatter.format(contract.premium)
|
|
: "Not detected"}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex h-[300px] items-center justify-center rounded-xl border border-dashed border-border/70 bg-muted/20 text-center">
|
|
<div>
|
|
<p className="text-sm font-medium">
|
|
No recent analyses yet
|
|
</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
Analyze a contract to populate this activity feed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
) : (
|
|
<Card className="mt-6 rounded-2xl border-border/60 p-8">
|
|
<div className="mx-auto flex max-w-2xl flex-col items-center text-center">
|
|
<svg
|
|
width="220"
|
|
height="120"
|
|
viewBox="0 0 220 120"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mb-5 opacity-80"
|
|
>
|
|
<rect
|
|
x="14"
|
|
y="26"
|
|
width="192"
|
|
height="78"
|
|
rx="14"
|
|
stroke="currentColor"
|
|
className="text-muted-foreground"
|
|
/>
|
|
<path
|
|
d="M30 82L62 60L88 74L124 44L162 58L192 36"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
className="text-primary"
|
|
/>
|
|
<circle
|
|
cx="62"
|
|
cy="60"
|
|
r="5"
|
|
fill="currentColor"
|
|
className="text-primary"
|
|
/>
|
|
<circle
|
|
cx="124"
|
|
cy="44"
|
|
r="5"
|
|
fill="currentColor"
|
|
className="text-primary"
|
|
/>
|
|
<circle
|
|
cx="192"
|
|
cy="36"
|
|
r="5"
|
|
fill="currentColor"
|
|
className="text-secondary"
|
|
/>
|
|
</svg>
|
|
<h3 className="text-xl font-semibold">
|
|
Your analytics will appear here
|
|
</h3>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Upload and analyze contracts to unlock trend and distribution
|
|
charts.
|
|
</p>
|
|
<Button asChild className="mt-5 rounded-xl">
|
|
<Link href="/contacts">
|
|
Upload first contract
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|