feat(parcel-sync): per-UAT analytics dashboard in Database tab
- New API route /api/eterra/uat-dashboard with SQL aggregates (area stats, intravilan/extravilan split, land use, top owners, fun facts) - CSS-only dashboard component: KPI cards, donut ring, bar charts - Dashboard button on each UAT card in DB tab, expands panel below
This commit is contained in:
AI Assistant
@@ -0,0 +1,555 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import {
|
||||
BarChart3,
|
||||
MapPin,
|
||||
Users,
|
||||
Building2,
|
||||
TreePine,
|
||||
Ruler,
|
||||
Sparkles,
|
||||
FileQuestion,
|
||||
Lightbulb,
|
||||
X,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import { Button } from "@/shared/components/ui/button";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import type { UatDashboardData } from "@/app/api/eterra/uat-dashboard/route";
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Bar component (CSS only) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function Bar({
|
||||
pct,
|
||||
color = "bg-emerald-500",
|
||||
className,
|
||||
}: {
|
||||
pct: number;
|
||||
color?: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-sm transition-all duration-500",
|
||||
color,
|
||||
className,
|
||||
)}
|
||||
style={{ width: `${Math.max(pct, 1)}%` }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* KPI Card */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function KpiCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
sub,
|
||||
accent = "text-foreground",
|
||||
}: {
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
label: string;
|
||||
value: string | number;
|
||||
sub?: string;
|
||||
accent?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg border bg-card">
|
||||
<div className="mt-0.5 p-1.5 rounded-md bg-muted">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-[11px] text-muted-foreground leading-tight">
|
||||
{label}
|
||||
</p>
|
||||
<p
|
||||
className={cn("text-xl font-bold tabular-nums leading-tight", accent)}
|
||||
>
|
||||
{typeof value === "number" ? value.toLocaleString("ro-RO") : value}
|
||||
</p>
|
||||
{sub && (
|
||||
<p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">
|
||||
{sub}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Horizontal bar chart */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function HBarChart({
|
||||
data,
|
||||
labelKey,
|
||||
valueKey,
|
||||
pctKey,
|
||||
color = "bg-emerald-500",
|
||||
maxBars = 10,
|
||||
formatValue,
|
||||
}: {
|
||||
data: Record<string, unknown>[];
|
||||
labelKey: string;
|
||||
valueKey: string;
|
||||
pctKey: string;
|
||||
color?: string;
|
||||
maxBars?: number;
|
||||
formatValue?: (v: number) => string;
|
||||
}) {
|
||||
const items = data.slice(0, maxBars);
|
||||
if (items.length === 0)
|
||||
return <p className="text-xs text-muted-foreground italic">Fără date</p>;
|
||||
const maxPct = Math.max(...items.map((d) => Number(d[pctKey] ?? 0)), 1);
|
||||
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
{items.map((d, i) => {
|
||||
const pct = Number(d[pctKey] ?? 0);
|
||||
const val = Number(d[valueKey] ?? 0);
|
||||
const label = String(d[labelKey] ?? "");
|
||||
return (
|
||||
<div key={`${label}-${i}`} className="flex items-center gap-2">
|
||||
<span className="text-[11px] text-muted-foreground w-[110px] truncate text-right flex-shrink-0">
|
||||
{label}
|
||||
</span>
|
||||
<div className="flex-1 h-5 bg-muted/50 rounded-sm overflow-hidden relative">
|
||||
<Bar
|
||||
pct={(pct / maxPct) * 100}
|
||||
color={color}
|
||||
className="absolute inset-y-0 left-0"
|
||||
/>
|
||||
<span className="absolute inset-y-0 left-1.5 flex items-center text-[10px] font-medium tabular-nums mix-blend-difference text-white">
|
||||
{formatValue ? formatValue(val) : val.toLocaleString("ro-RO")}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] tabular-nums text-muted-foreground w-[32px] text-right flex-shrink-0">
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Donut-ish ring (CSS conic-gradient) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
function DonutRing({
|
||||
segments,
|
||||
size = 80,
|
||||
}: {
|
||||
segments: { pct: number; color: string; label: string }[];
|
||||
size?: number;
|
||||
}) {
|
||||
let cumulative = 0;
|
||||
const stops: string[] = [];
|
||||
for (const seg of segments) {
|
||||
const start = cumulative;
|
||||
cumulative += seg.pct;
|
||||
stops.push(`${seg.color} ${start}% ${cumulative}%`);
|
||||
}
|
||||
if (cumulative < 100) {
|
||||
stops.push(`hsl(var(--muted)) ${cumulative}% 100%`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="rounded-full flex-shrink-0"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
background: `conic-gradient(${stops.join(", ")})`,
|
||||
mask: `radial-gradient(circle at center, transparent 55%, black 56%)`,
|
||||
WebkitMask: `radial-gradient(circle at center, transparent 55%, black 56%)`,
|
||||
}}
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
{segments.map((seg) => (
|
||||
<div
|
||||
key={seg.label}
|
||||
className="flex items-center gap-1.5 text-[11px]"
|
||||
>
|
||||
<span
|
||||
className="w-2.5 h-2.5 rounded-sm flex-shrink-0"
|
||||
style={{ backgroundColor: seg.color }}
|
||||
/>
|
||||
<span className="text-muted-foreground">{seg.label}</span>
|
||||
<span className="font-medium tabular-nums">{seg.pct}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Main dashboard component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function UatDashboard({
|
||||
siruta,
|
||||
uatName,
|
||||
onClose,
|
||||
}: {
|
||||
siruta: string;
|
||||
uatName: string;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [data, setData] = useState<UatDashboardData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const toggle = (key: string) =>
|
||||
setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
|
||||
const fetchDashboard = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/eterra/uat-dashboard?siruta=${encodeURIComponent(siruta)}`,
|
||||
);
|
||||
const json = await res.json();
|
||||
if (json.error) {
|
||||
setError(json.error);
|
||||
} else {
|
||||
setData(json as UatDashboardData);
|
||||
}
|
||||
} catch {
|
||||
setError("Eroare de rețea.");
|
||||
}
|
||||
setLoading(false);
|
||||
setLoaded(true);
|
||||
}, [siruta]);
|
||||
|
||||
// Auto-fetch on first render
|
||||
if (!loaded && !loading) {
|
||||
void fetchDashboard();
|
||||
}
|
||||
|
||||
if (loading && !data) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 mx-auto mb-3 animate-spin opacity-40" />
|
||||
<p className="text-sm">
|
||||
Se calculează dashboard-ul pentru {uatName}…
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center">
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
<Button variant="ghost" size="sm" className="mt-2" onClick={onClose}>
|
||||
Închide
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
|
||||
{/* ── Header ─────────────────────────────────── */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<BarChart3 className="h-5 w-5 text-indigo-500" />
|
||||
<h2 className="text-base font-semibold">
|
||||
Dashboard — {data.uatName}
|
||||
</h2>
|
||||
{data.county && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({data.county})
|
||||
</span>
|
||||
)}
|
||||
<Badge variant="outline" className="text-[10px] font-mono">
|
||||
{data.siruta}
|
||||
</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={onClose}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ── KPI Grid ───────────────────────────────── */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2">
|
||||
<KpiCard
|
||||
icon={MapPin}
|
||||
label="Terenuri active"
|
||||
value={data.totalTerenuri}
|
||||
sub={`+ ${data.totalCladiri.toLocaleString("ro-RO")} clădiri`}
|
||||
accent="text-emerald-600 dark:text-emerald-400"
|
||||
/>
|
||||
<KpiCard
|
||||
icon={Ruler}
|
||||
label="Suprafață totală"
|
||||
value={`${data.totalAreaHa.toLocaleString("ro-RO")} ha`}
|
||||
sub={`Medie: ${data.avgAreaMp.toLocaleString("ro-RO")} mp · Med: ${data.medianAreaMp.toLocaleString("ro-RO")} mp`}
|
||||
/>
|
||||
<KpiCard
|
||||
icon={Building2}
|
||||
label="Cu clădire"
|
||||
value={`${data.withBuildingPct}%`}
|
||||
sub={`${data.withBuildingCount.toLocaleString("ro-RO")} parcele (${data.buildingLegalCount} legale)`}
|
||||
accent="text-amber-600 dark:text-amber-400"
|
||||
/>
|
||||
<KpiCard
|
||||
icon={Users}
|
||||
label="Proprietari unici"
|
||||
value={data.uniqueOwnerCount}
|
||||
sub={
|
||||
data.topOwners[0]
|
||||
? `Top: ${data.topOwners[0].name.slice(0, 25)}`
|
||||
: "—"
|
||||
}
|
||||
accent="text-blue-600 dark:text-blue-400"
|
||||
/>
|
||||
<KpiCard
|
||||
icon={Sparkles}
|
||||
label="Date îmbogățite"
|
||||
value={`${data.enrichmentPct}%`}
|
||||
sub={`${data.totalEnriched.toLocaleString("ro-RO")} din ${data.totalTerenuri.toLocaleString("ro-RO")}`}
|
||||
accent="text-teal-600 dark:text-teal-400"
|
||||
/>
|
||||
<KpiCard
|
||||
icon={FileQuestion}
|
||||
label="Fără CF"
|
||||
value={`${data.parcelsWithoutCFPct}%`}
|
||||
sub={`${data.parcelsWithoutCF.toLocaleString("ro-RO")} parcele`}
|
||||
accent={
|
||||
data.parcelsWithoutCFPct > 30
|
||||
? "text-red-500"
|
||||
: "text-muted-foreground"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Row 2: Donut + Area distribution ───────── */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{/* Intravilan/Extravilan donut */}
|
||||
<Card>
|
||||
<CardContent className="py-3 px-4">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground mb-3 flex items-center gap-1.5">
|
||||
<TreePine className="h-3.5 w-3.5" />
|
||||
Intravilan / Extravilan
|
||||
</h3>
|
||||
<DonutRing
|
||||
segments={[
|
||||
{
|
||||
pct: data.intravilanPct,
|
||||
color: "hsl(142, 76%, 36%)",
|
||||
label: `Intravilan (${data.intravilanCount.toLocaleString("ro-RO")})`,
|
||||
},
|
||||
{
|
||||
pct:
|
||||
100 -
|
||||
data.intravilanPct -
|
||||
(data.mixtCount > 0
|
||||
? Math.round(
|
||||
(data.mixtCount /
|
||||
(data.intravilanCount +
|
||||
data.extravilanCount +
|
||||
data.mixtCount || 1)) *
|
||||
100,
|
||||
)
|
||||
: 0),
|
||||
color: "hsl(30, 70%, 50%)",
|
||||
label: `Extravilan (${data.extravilanCount.toLocaleString("ro-RO")})`,
|
||||
},
|
||||
...(data.mixtCount > 0
|
||||
? [
|
||||
{
|
||||
pct: Math.round(
|
||||
(data.mixtCount /
|
||||
(data.intravilanCount +
|
||||
data.extravilanCount +
|
||||
data.mixtCount || 1)) *
|
||||
100,
|
||||
),
|
||||
color: "hsl(200, 50%, 55%)",
|
||||
label: `Mixt (${data.mixtCount.toLocaleString("ro-RO")})`,
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Area distribution */}
|
||||
<Card>
|
||||
<CardContent className="py-3 px-4">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground mb-3 flex items-center gap-1.5">
|
||||
<Ruler className="h-3.5 w-3.5" />
|
||||
Distribuție suprafețe (mp)
|
||||
</h3>
|
||||
<HBarChart
|
||||
data={
|
||||
data.areaDistribution as unknown as Record<string, unknown>[]
|
||||
}
|
||||
labelKey="bucket"
|
||||
valueKey="count"
|
||||
pctKey="pct"
|
||||
color="bg-indigo-500"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* ── Row 3: Land use + Top owners ──────────── */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{/* Land use */}
|
||||
<Card>
|
||||
<CardContent className="py-3 px-4">
|
||||
<button
|
||||
onClick={() => toggle("landuse")}
|
||||
className="w-full flex items-center justify-between"
|
||||
>
|
||||
<h3 className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
|
||||
<TreePine className="h-3.5 w-3.5" />
|
||||
Categorii folosință
|
||||
</h3>
|
||||
{expanded.landuse ? (
|
||||
<ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
{(expanded.landuse ?? true) && (
|
||||
<div className="mt-3">
|
||||
<HBarChart
|
||||
data={
|
||||
data.landUseDistribution as unknown as Record<
|
||||
string,
|
||||
unknown
|
||||
>[]
|
||||
}
|
||||
labelKey="category"
|
||||
valueKey="count"
|
||||
pctKey="pct"
|
||||
color="bg-green-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Top owners */}
|
||||
<Card>
|
||||
<CardContent className="py-3 px-4">
|
||||
<button
|
||||
onClick={() => toggle("owners")}
|
||||
className="w-full flex items-center justify-between"
|
||||
>
|
||||
<h3 className="text-xs font-semibold text-muted-foreground flex items-center gap-1.5">
|
||||
<Users className="h-3.5 w-3.5" />
|
||||
Top 10 proprietari
|
||||
</h3>
|
||||
{expanded.owners ? (
|
||||
<ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
{(expanded.owners ?? true) && (
|
||||
<div className="mt-3 space-y-1">
|
||||
{data.topOwners.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
Fără date proprietari (necesită îmbogățire Magic)
|
||||
</p>
|
||||
) : (
|
||||
data.topOwners.map((o, i) => (
|
||||
<div
|
||||
key={`${o.name}-${i}`}
|
||||
className="flex items-center gap-2 text-[11px]"
|
||||
>
|
||||
<span className="w-5 text-right text-muted-foreground font-mono tabular-nums">
|
||||
{i + 1}.
|
||||
</span>
|
||||
<span className="flex-1 truncate">{o.name}</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-[10px] h-4 tabular-nums"
|
||||
>
|
||||
{o.count} parcele
|
||||
</Badge>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* ── Fun facts ────────────────────────────── */}
|
||||
{data.funFacts.length > 0 && (
|
||||
<Card className="border-amber-200 dark:border-amber-800 bg-amber-50/50 dark:bg-amber-950/20">
|
||||
<CardContent className="py-3 px-4">
|
||||
<h3 className="text-xs font-semibold text-amber-700 dark:text-amber-400 mb-2 flex items-center gap-1.5">
|
||||
<Lightbulb className="h-3.5 w-3.5" />
|
||||
Observații
|
||||
</h3>
|
||||
<ul className="space-y-1">
|
||||
{data.funFacts.map((fact, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="text-xs text-amber-800/80 dark:text-amber-300/80 flex items-start gap-1.5"
|
||||
>
|
||||
<span className="text-amber-500 mt-0.5">•</span>
|
||||
{fact}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* ── Footer meta ──────────────────────────── */}
|
||||
<div className="flex items-center justify-between text-[10px] text-muted-foreground px-1">
|
||||
<span>
|
||||
Ultimul sync:{" "}
|
||||
{data.lastSyncDate
|
||||
? new Date(data.lastSyncDate).toLocaleString("ro-RO")
|
||||
: "—"}
|
||||
{data.syncRunCount > 0 && ` · ${data.syncRunCount} sync-uri totale`}
|
||||
</span>
|
||||
<span>
|
||||
{data.totalNoGeom > 0 &&
|
||||
`${data.totalNoGeom.toLocaleString("ro-RO")} fără geometrie · `}
|
||||
Date la {new Date().toLocaleDateString("ro-RO")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user