From 9710d995b8e847b80f703851df7fb34f6f1e6015 Mon Sep 17 00:00:00 2001
From: Nurfog <juan.allende@gmail.com>
Date: Wed, 16 Sep 2026 17:11:29 -0300
Subject: [PATCH] feat: colores de modulo en tablero IT y sidebar minimo en
 tablero de modulo

---
 src/app/globals.css            | 18 ++++++++++++++
 src/app/m/[name]/page.tsx      | 12 ++--------
 src/components/TableroView.tsx | 44 +++++++++++++++++++++++++++++-----
 3 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4dc690e..55973e0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -531,6 +531,24 @@ body {
   box-shadow: 0 0.6rem 1.4rem rgba(22, 36, 61, 0.1);
 }
 
+/* Tarjeta de módulo en el tablero IT: conserva franja + sombra
+   izquierda con el color de la app sobre el tema inventario. */
+.sam-shell .app-card.module-card {
+  border: 1px solid rgba(22, 36, 61, 0.09);
+  border-left: 4px solid var(--module-color, transparent);
+  box-shadow:
+    -6px 2px 14px rgba(var(--module-rgb, 0, 40, 93), 0.22),
+    0 0.35rem 1rem rgba(22, 36, 61, 0.055);
+}
+
+.sam-shell .app-card.module-card:hover {
+  transform: translateY(-2px);
+  background-color: #fff;
+  box-shadow:
+    -8px 4px 22px rgba(var(--module-rgb, 0, 40, 93), 0.38),
+    0 0.6rem 1.4rem rgba(22, 36, 61, 0.1);
+}
+
 .sam-shell .section-header {
   display: flex;
   align-items: center;
diff --git a/src/app/m/[name]/page.tsx b/src/app/m/[name]/page.tsx
index 8b33344..8262216 100644
--- a/src/app/m/[name]/page.tsx
+++ b/src/app/m/[name]/page.tsx
@@ -57,22 +57,14 @@ export default function ModuleBoard() {
   const mem = pct(stat?.memPerc);
   const title = mod ? displayName(mod.name) : displayName(name || "Módulo");
 
-  const menu = [
-    { label: "Estado", icon: "bx-grid-alt", href: "#estado" },
-    ...functions.map((f) => ({
-      label: f.label,
-      icon: f.icon,
-      href: `/m/${name}#${f.path}`,
-    })),
-    { label: "Aplicaciones", icon: "bx-layer", href: "/" },
-  ];
+  const menu = [{ label: "Aplicaciones", icon: "bx-layer", href: "/" }];
 
   return (
     <SamShell
       brand={title}
       subtitle="Tablero del módulo"
       menu={menu}
-      activeHref="#estado"
+      activeHref="/"
       topUser={me?.email || "SAM"}
       allowLogout
       topSede={mod ? `${mod.subdomain}.devops.norteamericano.cl` : undefined}
diff --git a/src/components/TableroView.tsx b/src/components/TableroView.tsx
index 9f74522..dbbf060 100644
--- a/src/components/TableroView.tsx
+++ b/src/components/TableroView.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import Link from "next/link";
+import { useMemo, type CSSProperties } from "react";
 import { useModules, useStats } from "@/lib/store";
 import {
+  assignColorsForModules,
   displayName,
   boardHref,
   envOf,
@@ -100,17 +102,36 @@ function Bar({ value, color }: { value: number; color: string }) {
   );
 }
 
-function AppCard({ m, stat }: { m: ModuleState; stat?: ContainerStat }) {
-  const meta = getModuleMeta(m.name);
+function AppCard({
+  m,
+  stat,
+  color,
+}: {
+  m: ModuleState;
+  stat?: ContainerStat;
+  color?: string | null;
+}) {
+  const meta = getModuleMeta(m.name, color ?? m.color);
   const env = envOf(m.branch);
   const cpu = pct(stat?.cpu);
   const mem = pct(stat?.memPerc);
   const board = boardHref(m);
   return (
     <div className="col-md-6 col-xl-4">
-      <div className="app-card p-3 h-100">
+      <div
+        className="app-card module-card p-3 h-100"
+        style={
+          {
+            "--module-color": meta.color,
+            "--module-rgb": meta.rgb,
+          } as CSSProperties
+        }
+      >
         <div className="d-flex align-items-center gap-2 mb-2">
-          <i className={`bx ${meta.icon} bx-border text-light ${meta.bg}`} />
+          <i
+            className={`bx ${meta.icon} bx-border module-icon`}
+            style={{ backgroundColor: meta.color, color: meta.onColor }}
+          />
           <div>
             <strong>{displayName(m.name)}</strong>
             <div>
@@ -167,7 +188,13 @@ export default function TableroView() {
   const stats = useStats();
   const loading = data === null;
 
-  const modules = visibleModules(data?.modules ?? []);
+  const modules = useMemo(
+    () => visibleModules(data?.modules ?? []),
+    [data]
+  );
+  // Mismo color que en el índice: guardado manda, al resto se le genera
+  // uno sin repetir para lo ya importado.
+  const colorMap = useMemo(() => assignColorsForModules(modules), [modules]);
   const ok = modules.filter((m) => healthOf(m) === "ok").length;
   const starting = modules.filter((m) => healthOf(m) === "starting").length;
   const down = modules.length - ok - starting;
@@ -225,7 +252,12 @@ export default function TableroView() {
             </div>
             <div className="row row-cards">
               {list.map((m) => (
-                <AppCard key={m.name} m={m} stat={statForModule(stats, m.name)} />
+                <AppCard
+                  key={m.name}
+                  m={m}
+                  stat={statForModule(stats, m.name)}
+                  color={colorMap[m.name] ?? m.color}
+                />
               ))}
             </div>
           </div>