Certifications:{" "}
[truncated — 918 more characters]
```
### app/dashboard/page.tsx
```typescript
"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import SkillRadar from "@/components/SkillRadar";
import ComplianceTrend from "@/components/ComplianceTrend";
import {
Shield,
TrendingUp,
TrendingDown,
Minus,
CheckCircle,
AlertTriangle,
ArrowRight,
BarChart3,
} from "lucide-react";
import {
getProfile,
getAnalyses,
getSkillScores,
isDemoLoaded,
loadDemoDataFromSeed,
} from "@/lib/storage";
import type { Analysis, SkillScore, UserProfile } from "@/lib/storage";
import {
DEMO_PROFILE,
DEMO_ANALYSES,
DEMO_SKILL_SCORES,
} from "@/data/demo-data";
export default function DashboardPage() {
const [profile, setProfile] = useState
(null);
const [analyses, setAnalyses] = useState([]);
const [skillScores, setSkillScores] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!isDemoLoaded()) {
loadDemoDataFromSeed(DEMO_PROFILE, DEMO_ANALYSES, DEMO_SKILL_SCORES);
}
let analysesList = getAnalyses();
// If any demo analysis still has a photo (old seed with images), re-seed to use current seed (no demo images)
const hasOldDemoWithImages = analysesList.some(
(a) => a.id.startsWith("demo-") && a.photoUrl?.trim()
);
if (hasOldDemoWithImages) {
loadDemoDataFromSeed(DEMO_PROFILE, DEMO_ANALYSES, DEMO_SKILL_SCORES);
analysesList = getAnalyses();
}
setProfile(getProfile());
setAnalyses(analysesList);
setSkillScores(getSkillScores());
setLoading(false);
}, []);
if (loading) {
return (
);
}
const totalAnalyses = analyses.length;
const avgScore =
totalAnalyses > 0
? Math.round(
analyses.reduce((sum, a) => sum + a.complianceScore, 0) /
totalAnalyses
)
: 0;
// Calculate trend from last 5 vs first 5
let trend: "up" | "stable" | "down" = "stable";
if (analyses.length >= 4) {
const recentAvg =
analyses
.slice(0, Math.min(3, analyses.length))
.reduce((sum, a) => sum + a.complianceScore, 0) /
Math.min(3, analyses.length);
const oldAvg =
analyses
.slice(-Math.min(3, analyses.length))
.reduce((sum, a) => sum + a.complianceScore, 0) /
Math.min(3, analyses.length);
if (recentAvg - oldAvg > 5) trend = "up";
else if (oldAvg - recentAvg > 5) trend = "down";
}
const trendIcon =
trend === "up"
? TrendingUp
: trend === "down"
? TrendingDown
: Minus;
const TrendIcon = trendIcon;
const trendColor =
trend === "up"
? "text-green-600"
: trend === "down"
? "text-red-600"
: "text-slate-400";
const trendLabel =
trend === "up" ? "Improving" : trend === "down" ? "Declining" : "Stable";
// Map skill scores for SkillRadar component format
const mappedSkills = skillScores.map((s) => ({
skillName: s.skillName,
score: s.score,
totalInstances: s.totalInstances,
trend: (s.trend === "improving"
? "up"
: s.trend === "declining"
? "down"
: "stable") as "up" | "stable" | "down",
}));
// Map analyses for ComplianceTrend
const trendData = [...analyses]
.sort(
(a, b) =>
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
)
.map((a) => ({
date: a.createdAt,
score: a.complianceScore,
}));
// Recent analyses (last 5)
const recentAnalyses = analyses.slice(0, 5);
return (
{/* Header */}
Your Portfolio
{profile && (
{profile.fullName}
)}
TradeProof
{/* Stats Row */}
{totalAnalyses}
Analyses
= 80
? "text-green-600"
: avgScore >= 60
? "text-yellow-600"
: "text-red-600"
}`}
>
{avgScore}%
Avg Score
{trendLabel}
{/* Skill Radar */}
{/* Compliance Trend */}
{/* Recen
[truncated — 3621 more characters]
```
[684 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]