292 lines
9.3 KiB
TypeScript
292 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import * as Icons from "lucide-react";
|
|
import { getAllModules } from "@/core/module-registry";
|
|
import { useFeatureFlag } from "@/core/feature-flags";
|
|
import { useI18n } from "@/core/i18n";
|
|
import { EXTERNAL_TOOLS } from "@/config/external-tools";
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardTitle,
|
|
CardDescription,
|
|
CardContent,
|
|
} from "@/shared/components/ui/card";
|
|
import { Badge } from "@/shared/components/ui/badge";
|
|
import { useDashboardData } from "@/modules/dashboard/hooks/use-dashboard-data";
|
|
|
|
function DynamicIcon({
|
|
name,
|
|
className,
|
|
}: {
|
|
name: string;
|
|
className?: string;
|
|
}) {
|
|
const pascalName = name.replace(/(^|-)([a-z])/g, (_, _p, c: string) =>
|
|
c.toUpperCase(),
|
|
);
|
|
const IconComponent = (
|
|
Icons as unknown as Record<
|
|
string,
|
|
React.ComponentType<{ className?: string }>
|
|
>
|
|
)[pascalName];
|
|
if (!IconComponent) return <Icons.Circle className={className} />;
|
|
return <IconComponent className={className} />;
|
|
}
|
|
|
|
function ModuleCard({
|
|
module,
|
|
}: {
|
|
module: {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
icon: string;
|
|
route: string;
|
|
featureFlag: string;
|
|
};
|
|
}) {
|
|
const enabled = useFeatureFlag(module.featureFlag);
|
|
if (!enabled) return null;
|
|
|
|
return (
|
|
<Link href={module.route}>
|
|
<Card className="h-full transition-colors hover:border-primary/50 hover:bg-accent/30">
|
|
<CardHeader className="flex flex-row items-center gap-4 space-y-0">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10">
|
|
<DynamicIcon name={module.icon} className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base">{module.name}</CardTitle>
|
|
<CardDescription className="text-sm">
|
|
{module.description}
|
|
</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
const RELATIVE_LABELS: Intl.RelativeTimeFormatUnit[] = [
|
|
"year",
|
|
"month",
|
|
"week",
|
|
"day",
|
|
"hour",
|
|
"minute",
|
|
"second",
|
|
];
|
|
const RELATIVE_MS = [
|
|
31536000000, 2592000000, 604800000, 86400000, 3600000, 60000, 1000,
|
|
];
|
|
|
|
function relativeTime(isoString: string): string {
|
|
const diff = new Date(isoString).getTime() - Date.now();
|
|
const rtf = new Intl.RelativeTimeFormat("ro", { numeric: "auto" });
|
|
for (let i = 0; i < RELATIVE_MS.length; i++) {
|
|
const ms = RELATIVE_MS[i];
|
|
if (ms === undefined) continue;
|
|
const absMs = RELATIVE_LABELS[i];
|
|
if (absMs === undefined) continue;
|
|
if (Math.abs(diff) >= ms || i === RELATIVE_MS.length - 1) {
|
|
return rtf.format(Math.round(diff / ms), absMs);
|
|
}
|
|
}
|
|
return "acum";
|
|
}
|
|
|
|
const MODULE_ICONS: Record<string, string> = {
|
|
registratura: "BookOpen",
|
|
"address-book": "Users",
|
|
"it-inventory": "Monitor",
|
|
"password-vault": "KeyRound",
|
|
"digital-signatures": "PenLine",
|
|
"word-templates": "FileText",
|
|
"tag-manager": "Tag",
|
|
"prompt-generator": "Wand2",
|
|
};
|
|
|
|
const CATEGORY_LABELS: Record<string, string> = {
|
|
dev: "Dezvoltare",
|
|
tools: "Instrumente",
|
|
monitoring: "Monitorizare",
|
|
security: "Securitate",
|
|
};
|
|
|
|
export default function DashboardPage() {
|
|
const { t } = useI18n();
|
|
const modules = getAllModules();
|
|
const { activity, kpis } = useDashboardData();
|
|
|
|
const toolCategories = Object.keys(CATEGORY_LABELS).filter((cat) =>
|
|
EXTERNAL_TOOLS.some((tool) => tool.category === cat),
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl space-y-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">
|
|
{t("dashboard.welcome")}
|
|
</h1>
|
|
<p className="mt-1 text-muted-foreground">{t("dashboard.subtitle")}</p>
|
|
</div>
|
|
|
|
{/* KPI panels */}
|
|
<div>
|
|
<h2 className="mb-3 text-lg font-semibold">Indicatori cheie</h2>
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">
|
|
Registratură — intrări săptămâna aceasta
|
|
</p>
|
|
<p className="text-2xl font-bold">{kpis.registraturaThisWeek}</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">Dosare deschise</p>
|
|
<p className="text-2xl font-bold">{kpis.registraturaOpen}</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">
|
|
Termene legale săptămâna aceasta
|
|
</p>
|
|
<p className="text-2xl font-bold">{kpis.deadlinesThisWeek}</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">Termene depășite</p>
|
|
<p
|
|
className={`text-2xl font-bold ${kpis.overdueDeadlines > 0 ? "text-destructive" : ""}`}
|
|
>
|
|
{kpis.overdueDeadlines}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">
|
|
Contacte noi luna aceasta
|
|
</p>
|
|
<p className="text-2xl font-bold">{kpis.contactsThisMonth}</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<p className="text-xs text-muted-foreground">
|
|
Echipamente IT active
|
|
</p>
|
|
<p className="text-2xl font-bold">{kpis.inventoryActive}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Activity feed */}
|
|
{activity.length > 0 && (
|
|
<div>
|
|
<h2 className="mb-3 text-lg font-semibold">Activitate recentă</h2>
|
|
<Card>
|
|
<CardContent className="divide-y p-0">
|
|
{activity.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="flex items-center gap-3 px-4 py-2.5"
|
|
>
|
|
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">
|
|
<DynamicIcon
|
|
name={MODULE_ICONS[item.namespace] ?? "Circle"}
|
|
className="h-3.5 w-3.5 text-muted-foreground"
|
|
/>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm">
|
|
<span className="font-medium">{item.label}</span>
|
|
<span className="ml-1 text-muted-foreground text-xs">
|
|
{item.action}
|
|
</span>
|
|
</p>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
{item.moduleLabel}
|
|
</p>
|
|
</div>
|
|
<span className="shrink-0 text-[11px] text-muted-foreground">
|
|
{relativeTime(item.timestamp)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modules grid */}
|
|
<div>
|
|
<h2 className="mb-4 text-lg font-semibold">{t("dashboard.modules")}</h2>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{modules.map((m) => (
|
|
<ModuleCard key={m.id} module={m} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* External tools */}
|
|
<div>
|
|
<h2 className="mb-4 text-lg font-semibold">Instrumente externe</h2>
|
|
<div className="space-y-4">
|
|
{toolCategories.map((cat) => (
|
|
<div key={cat}>
|
|
<Badge variant="outline" className="mb-2">
|
|
{CATEGORY_LABELS[cat]}
|
|
</Badge>
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{EXTERNAL_TOOLS.filter((tool) => tool.category === cat).map(
|
|
(tool) => {
|
|
const cardContent = (
|
|
<Card
|
|
key={tool.id}
|
|
className="transition-colors hover:bg-accent/30"
|
|
>
|
|
<CardHeader className="flex flex-row items-center gap-3 space-y-0 p-4">
|
|
<DynamicIcon
|
|
name={tool.icon}
|
|
className="h-4 w-4 text-muted-foreground"
|
|
/>
|
|
<div>
|
|
<p className="text-sm font-medium">{tool.name}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{tool.description}
|
|
</p>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
if (!tool.url) return cardContent;
|
|
return (
|
|
<a
|
|
key={tool.id}
|
|
href={tool.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{cardContent}
|
|
</a>
|
|
);
|
|
},
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|