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>
           ))}

src/modules/dashboard/hooks/use-dashboard-data.ts

@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export interface ActivityItem {
+  id: string;
+  namespace: string;
+  moduleLabel: string;
+  label: string;
+  action: "creat" | "actualizat";
+  timestamp: string; // ISO
+}
+
+export interface DashboardKpis {
+  registraturaThisWeek: number;
+  registraturaOpen: number;
+  deadlinesThisWeek: number;
+  overdueDeadlines: number;
+  contactsThisMonth: number;
+  inventoryActive: number;
+}
+
+const MODULE_LABELS: Record<string, string> = {
+  registratura: "Registratură",
+  "address-book": "Agendă",
+  "it-inventory": "IT Inventory",
+  "password-vault": "Parole",
+  "digital-signatures": "Semnături",
+  "word-templates": "Șabloane Word",
+  "tag-manager": "Tag Manager",
+  "prompt-generator": "Prompt Generator",
+};
+
+/** Extract a human-readable label from a stored entity */
+function pickLabel(obj: Record<string, unknown>): string {
+  const candidates = ["subject", "name", "label", "title", "number"];
+  for (const key of candidates) {
+    const val = obj[key];
+    if (typeof val === "string" && val.trim()) return val.trim();
+  }
+  return "(fără titlu)";
+}
+
+function startOfWeek(): Date {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  d.setDate(d.getDate() - d.getDay() + 1); // Monday
+  return d;
+}
+
+function startOfMonth(): Date {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  d.setDate(1);
+  return d;
+}
+
+function readAllNamespaceItems(): Record<string, Record<string, unknown>[]> {
+  if (typeof window === "undefined") return {};
+  const PREFIX = "architools:";
+  const result: Record<string, Record<string, unknown>[]> = {};
+
+  for (let i = 0; i < window.localStorage.length; i++) {
+    const fullKey = window.localStorage.key(i);
+    if (!fullKey?.startsWith(PREFIX)) continue;
+    const rest = fullKey.slice(PREFIX.length);
+    const colonIdx = rest.indexOf(":");
+    if (colonIdx === -1) continue;
+    const ns = rest.slice(0, colonIdx);
+    try {
+      const raw = window.localStorage.getItem(fullKey);
+      if (!raw) continue;
+      const parsed = JSON.parse(raw) as unknown;
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        if (!result[ns]) result[ns] = [];
+        result[ns].push(parsed as Record<string, unknown>);
+      }
+    } catch {
+      // ignore malformed entries
+    }
+  }
+  return result;
+}
+
+export function useDashboardData() {
+  const [activity, setActivity] = useState<ActivityItem[]>([]);
+  const [kpis, setKpis] = useState<DashboardKpis>({
+    registraturaThisWeek: 0,
+    registraturaOpen: 0,
+    deadlinesThisWeek: 0,
+    overdueDeadlines: 0,
+    contactsThisMonth: 0,
+    inventoryActive: 0,
+  });
+
+  useEffect(() => {
+    const allItems = readAllNamespaceItems();
+    const weekStart = startOfWeek();
+    const monthStart = startOfMonth();
+    const now = new Date();
+
+    // --- Activity feed ---
+    const activityItems: ActivityItem[] = [];
+
+    for (const [ns, items] of Object.entries(allItems)) {
+      const moduleLabel = MODULE_LABELS[ns] ?? ns;
+      for (const item of items) {
+        const updatedAt =
+          typeof item.updatedAt === "string" ? item.updatedAt : null;
+        const createdAt =
+          typeof item.createdAt === "string" ? item.createdAt : null;
+        const id =
+          typeof item.id === "string" ? item.id : String(Math.random());
+        if (!updatedAt && !createdAt) continue;
+        const timestamp = updatedAt ?? createdAt ?? "";
+        const created = createdAt ? new Date(createdAt) : null;
+        const updated = updatedAt ? new Date(updatedAt) : null;
+        const action: "creat" | "actualizat" =
+          created &&
+          updated &&
+          Math.abs(updated.getTime() - created.getTime()) < 2000
+            ? "creat"
+            : "actualizat";
+
+        activityItems.push({
+          id: `${ns}:${id}`,
+          namespace: ns,
+          moduleLabel,
+          label: pickLabel(item),
+          action,
+          timestamp,
+        });
+      }
+    }
+
+    activityItems.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    setActivity(activityItems.slice(0, 20));
+
+    // --- KPIs ---
+    const registraturaItems = allItems["registratura"] ?? [];
+    const registraturaThisWeek = registraturaItems.filter((e) => {
+      const d = typeof e.date === "string" ? new Date(e.date) : null;
+      return d && d >= weekStart;
+    }).length;
+
+    const registraturaOpen = registraturaItems.filter(
+      (e) => e.status === "deschis",
+    ).length;
+
+    // Deadlines
+    let deadlinesThisWeek = 0;
+    let overdueDeadlines = 0;
+    for (const entry of registraturaItems) {
+      const deadlines = Array.isArray(entry.trackedDeadlines)
+        ? (entry.trackedDeadlines as Record<string, unknown>[])
+        : [];
+      for (const dl of deadlines) {
+        if (dl.resolution !== "pending") continue;
+        const dueDate =
+          typeof dl.dueDate === "string" ? new Date(dl.dueDate) : null;
+        if (!dueDate) continue;
+        if (dueDate < now) overdueDeadlines++;
+        if (
+          dueDate >= weekStart &&
+          dueDate <= new Date(weekStart.getTime() + 7 * 86400000)
+        )
+          deadlinesThisWeek++;
+      }
+    }
+
+    const contactItems = allItems["address-book"] ?? [];
+    const contactsThisMonth = contactItems.filter((c) => {
+      const d = typeof c.createdAt === "string" ? new Date(c.createdAt) : null;
+      return d && d >= monthStart;
+    }).length;
+
+    const inventoryItems = allItems["it-inventory"] ?? [];
+    const inventoryActive = inventoryItems.filter(
+      (i) => i.status === "active",
+    ).length;
+
+    setKpis({
+      registraturaThisWeek,
+      registraturaOpen,
+      deadlinesThisWeek,
+      overdueDeadlines,
+      contactsThisMonth,
+      inventoryActive,
+    });
+  }, []);
+
+  return { activity, kpis };
+}