feat(dashboard): activity feed and KPI panels

src/app/page.tsx

@@ -1,22 +1,53 @@
-'use client';
+"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 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];
+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 } }) {
+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;
 
@@ -29,7 +60,9 @@ function ModuleCard({ module }: { module: { id: string; name: string; descriptio
           </div>
           <div>
             <CardTitle className="text-base">{module.name}</CardTitle>
-            <CardDescription className="text-sm">{module.description}</CardDescription>
+            <CardDescription className="text-sm">
+              {module.description}
+            </CardDescription>
           </div>
         </CardHeader>
       </Card>
@@ -37,59 +70,166 @@ function ModuleCard({ module }: { module: { id: string; name: string; descriptio
   );
 }
 
+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',
+  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)
+  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>
+        <h1 className="text-3xl font-bold tracking-tight">
+          {t("dashboard.welcome")}
+        </h1>
+        <p className="mt-1 text-muted-foreground">{t("dashboard.subtitle")}</p>
       </div>
 
-      {/* Quick stats */}
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-        <Card>
-          <CardContent className="p-4">
-            <p className="text-xs text-muted-foreground">Module active</p>
-            <p className="text-2xl font-bold">{modules.length}</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <p className="text-xs text-muted-foreground">Companii</p>
-            <p className="text-2xl font-bold">3</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <p className="text-xs text-muted-foreground">Instrumente externe</p>
-            <p className="text-2xl font-bold">{EXTERNAL_TOOLS.length}</p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <p className="text-xs text-muted-foreground">Stocare</p>
-            <p className="text-2xl font-bold">localStorage</p>
-          </CardContent>
-        </Card>
+      {/* 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>
+        <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} />
@@ -103,27 +243,44 @@ export default function DashboardPage() {
         <div className="space-y-4">
           {toolCategories.map((cat) => (
             <div key={cat}>
-              <Badge variant="outline" className="mb-2">{CATEGORY_LABELS[cat]}</Badge>
+              <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>
-                  );
-                })}
+                {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>
           ))}