Initial commit: SKEEN Derma Experts - Sistema Integral de Gestión Clínica

- Frontend React (SKEEN Brand) con Vite, TypeScript, Tailwind
- Frontend Homenest (versión alternativa)
- Módulos Odoo 17 custom (citas, pacientes, monedero, pagos, ventas, inventario, whatsapp)
- WACRM fork (Next.js 16 + Supabase)
- Hermes + Bridge + Skills (Qwen3.6 via Nan Builders)
- Scripts de migración y operación
- Documentación extensiva en docs/

wacrm/src/components/flows/validation-panel.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+/**
+ * Validation panel — surfaces every error and warning from
+ * `validateFlowForActivation`. Lives once at the bottom of the
+ * editor shell so it's visible in both views (canvas + list).
+ *
+ * Node-scoped issues are clickable: tapping one calls
+ * `requestFlash(node_key)` on the editor context. List view's
+ * useEffect on `flashKey` expands + scrolls + flashes the row;
+ * canvas view's useEffect pans the viewport + flashes the card.
+ * Both views read the same flashKey so the panel doesn't need
+ * per-view plumbing.
+ *
+ * Trigger-scoped issues are NOT clickable from canvas — trigger
+ * config is a list-only panel (it's a flat form, not a graph
+ * concept). User can switch to List to address them.
+ */
+
+import { CircleAlert, CircleCheck } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ValidationIssue } from "@/lib/flows/validate";
+import { useFlowEditor } from "./flow-editor-state";
+
+export function ValidationPanel() {
+  const { issues, requestFlash } = useFlowEditor();
+
+  if (issues.length === 0) {
+    // Slate-950 base + emerald accents so the panel stays readable when
+    // sticky-positioned over scrolled-behind node cards (a translucent
+    // bg-emerald-500/10 would bleed through ugly).
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-emerald-600/50 bg-background p-3 text-sm font-medium text-emerald-300">
+        <CircleCheck className="h-4 w-4 shrink-0" />
+        No issues. Ready to activate.
+      </div>
+    );
+  }
+  const errors = issues.filter((i) => i.severity === "error");
+  const warnings = issues.filter((i) => i.severity === "warning");
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-background p-3",
+        errors.length > 0 ? "border-red-500/40" : "border-amber-500/40",
+      )}
+    >
+      <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+        {errors.length > 0 ? (
+          <CircleAlert className="h-4 w-4 text-red-400" />
+        ) : (
+          <CircleAlert className="h-4 w-4 text-amber-400" />
+        )}
+        {errors.length} error{errors.length === 1 ? "" : "s"},{" "}
+        {warnings.length} warning{warnings.length === 1 ? "" : "s"}
+      </div>
+      <div className="flex flex-col gap-1">
+        {issues.map((i, ix) => (
+          <IssueLine key={ix} issue={i} onJump={requestFlash} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Exported so the per-node card (list view) and the trigger panel
+ * can render the same "icon + node key chip + message" formatting
+ * for their own per-row issue lists without re-implementing the
+ * tone / icon / accessibility logic.
+ */
+export function IssueLine({
+  issue,
+  onJump,
+}: {
+  issue: ValidationIssue;
+  onJump?: (key: string) => void;
+}) {
+  const tone =
+    issue.severity === "error" ? "text-red-300" : "text-amber-300";
+  const iconTone =
+    issue.severity === "error" ? "text-red-400" : "text-amber-400";
+  const body = (
+    <>
+      <CircleAlert className={cn("mt-0.5 h-3 w-3 shrink-0", iconTone)} />
+      <span className="min-w-0 flex-1">
+        {issue.node_key && (
+          <code className="mr-1 rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
+            {issue.node_key}
+          </code>
+        )}
+        {issue.message}
+      </span>
+    </>
+  );
+
+  // Only node-scoped issues can jump; trigger-scoped issues have no
+  // destination (the trigger panel is list-only and already at the
+  // top of that view).
+  if (issue.node_key && onJump) {
+    return (
+      <button
+        type="button"
+        onClick={() => onJump(issue.node_key!)}
+        className={cn(
+          "flex w-full items-start gap-2 rounded-md px-2 py-1 text-left text-xs transition-colors hover:bg-muted/60",
+          tone,
+        )}
+        aria-label={`Jump to node ${issue.node_key}`}
+      >
+        {body}
+      </button>
+    );
+  }
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-2 rounded-md px-2 py-1 text-xs",
+        tone,
+      )}
+    >
+      {body}
+    </div>
+  );
+}