Merge pull request #21 from Llorente29/feature/formacion-c2

Feature/formacion c2

Author: Llorente29

src/components/personal/FormacionesTab.tsx

@@ -14,7 +14,8 @@ import {
   Infinity,
   X,
 } from 'lucide-react'
-import { Card, Button, Input, Select, Label, Textarea } from '../ui'
+import { Card, Button, Badge, Input, Select, Label, Textarea } from '../ui'
+import { useApp } from '../../context/AppContext'
 import type { Employee } from '../../types'
 import type { Formation, FormationType } from '../../types/personal'
 import { FORMATION_CATALOG } from '../../types/personal'
@@ -25,6 +26,8 @@ import {
   deleteFormation,
   getFormationStatus,
 } from '../../services/formationsService'
+import * as trainingComplianceService from '../../services/trainingComplianceService'
+import type { TrainingCellState } from '../../services/trainingComplianceService'
 
 interface Props {
   employee: Employee
@@ -89,9 +92,13 @@ export default function FormacionesTab({ employee }: Props) {
         </div>
       </Card>
 
+      {/* Formación interna (C1/C2): cursos impartidos por Folvy con test y firma.
+          NO toca employee_formations ni la lista de abajo — es una sección aparte. */}
+      <InternalTrainingSection employee={employee} />
+
       <div className="flex items-center justify-between">
         <p className="text-xs text-text-secondary">
-          {formations.length} formación{formations.length !== 1 ? 'es' : ''}
+          {formations.length} formación{formations.length !== 1 ? 'es' : ''} externa{formations.length !== 1 ? 's' : ''}
         </p>
         <Button size="sm" onClick={() => { setEditing(null); setShowModal(true) }}>
           + Añadir formación
@@ -197,6 +204,81 @@ export default function FormacionesTab({ employee }: Props) {
   )
 }
 
+/* =====================================================
+   FORMACIÓN INTERNA (C1/C2) — cursos impartidos por Folvy
+   ===================================================== */
+
+const INTERNAL_STATE_LABEL: Record<TrainingCellState, string> = {
+  vigente: 'Vigente', caducado: 'Caducado', pendiente: 'Pendiente', en_curso: 'En curso (sin firmar)', no_aplica: 'No aplica',
+}
+const INTERNAL_STATE_COLOR: Record<TrainingCellState, string> = {
+  vigente: 'green', caducado: 'red', pendiente: 'gray', en_curso: 'yellow', no_aplica: 'gray',
+}
+
+function InternalTrainingSection({ employee }: { employee: Employee }) {
+  const { activeAccountId } = useApp()
+  const [courses, setCourses] = useState<{ code: string; title: string; state: TrainingCellState; scorePct: number | null; expiresAt: string | null }[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    if (!activeAccountId) { setLoading(false); return }
+    let cancel = false
+    setLoading(true)
+    setError(false)
+    Promise.all([
+      trainingComplianceService.getTrainingComplianceMatrix(activeAccountId, employee.locationId, false),
+      trainingComplianceService.getTrainingCourseSummary(activeAccountId),
+    ])
+      .then(([matrix, summary]) => {
+        if (cancel) return
+        const row = matrix.find((r) => r.employeeId === employee.id)
+        const titleByCode = new Map(summary.map((c) => [c.courseCode, c.courseTitle]))
+        const list = Object.entries(row?.courses ?? {})
+          .filter(([, cell]) => cell.state !== 'no_aplica')
+          .map(([code, cell]) => ({
+            code,
+            title: titleByCode.get(code) ?? code,
+            state: cell.state,
+            scorePct: cell.scorePct,
+            expiresAt: cell.expiresAt,
+          }))
+        setCourses(list)
+      })
+      .catch(() => { if (!cancel) setError(true) })
+      .finally(() => { if (!cancel) setLoading(false) })
+    return () => { cancel = true }
+  }, [activeAccountId, employee.id, employee.locationId])
+
+  return (
+    <Card className="p-3">
+      <p className="text-sm font-semibold text-text-primary inline-flex items-center gap-1.5 mb-2">
+        <GraduationCap size={14} /> Formación interna (Folvy)
+      </p>
+      {loading ? (
+        <p className="text-xs text-text-secondary">Cargando…</p>
+      ) : error ? (
+        <p className="text-xs text-danger">No se pudo cargar la formación interna.</p>
+      ) : courses.length === 0 ? (
+        <p className="text-xs text-text-secondary">Sin cursos internos asignados todavía.</p>
+      ) : (
+        <div className="space-y-1.5">
+          {courses.map((c) => (
+            <div key={c.code} className="flex items-center justify-between gap-2 text-xs">
+              <span className="text-text-primary">{c.title}</span>
+              <div className="flex items-center gap-2 shrink-0">
+                {c.scorePct != null && <span className="text-text-secondary">{c.scorePct}%</span>}
+                {c.expiresAt && <span className="text-text-secondary">hasta {new Date(c.expiresAt).toLocaleDateString('es-ES')}</span>}
+                <Badge color={INTERNAL_STATE_COLOR[c.state]}>{INTERNAL_STATE_LABEL[c.state]}</Badge>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  )
+}
+
 /* =====================================================
    MODAL DE EDICIÓN / ALTA
    ===================================================== */

src/modules/appcc/module.tsx

@@ -16,6 +16,7 @@
 
 import {
   BarChart3, Leaf, AlertTriangle, ClipboardCheck, FolderOpen, FileText, Settings, ShieldAlert,
+  GraduationCap,
 } from 'lucide-react'
 import type { ModuleDefinition } from '@/shell/types'
 
@@ -27,6 +28,7 @@ import OnboardingPage from '@/modules/appcc/pages/OnboardingPage'
 import ReportsPage from '@/modules/appcc/pages/ReportsPage'
 import TemplateEditorPage from '@/modules/appcc/pages/TemplateEditorPage'
 import AllergensCompliancePage from '@/modules/appcc/pages/AllergensCompliancePage'
+import TrainingCompliancePage from '@/modules/appcc/pages/TrainingCompliancePage'
 import AuditsPage from '@/modules/appcc/audits/AuditsPage'
 import AuditExecutionPage from '@/modules/appcc/audits/AuditExecutionPage'
 import AuditTemplateEditorPage from '@/modules/appcc/audits/AuditTemplateEditorPage'
@@ -57,6 +59,7 @@ export const appccModule: ModuleDefinition = {
     { path: 'plantillas',            element: <TemplateEditorPage /> },
     { path: 'onboarding',            element: <OnboardingPage /> },
     { path: 'alergenos',             element: <AllergensCompliancePage /> },
+    { path: 'formacion',             element: <TrainingCompliancePage /> },
   ],
 
   // Navegación interna del módulo (ModuleSidebar).
@@ -70,6 +73,7 @@ export const appccModule: ModuleDefinition = {
       { id: 'appcc_audits',          label: 'Auditorías',            icon: ClipboardCheck, path: 'auditorias',             requiredRole: 'admin' },
       { id: 'appcc_audit_templates', label: 'Plantillas Auditoría',  icon: FolderOpen,     path: 'auditorias/plantillas',  requiredRole: 'admin' },
       { id: 'appcc_allergens',       label: 'Alérgenos',             icon: ShieldAlert,    path: 'alergenos',              requiredRole: 'admin' },
+      { id: 'appcc_training',        label: 'Formación',             icon: GraduationCap,  path: 'formacion',              requiredRole: 'admin' },
       { id: 'appcc_reports',         label: 'Informes',              icon: FileText,       path: 'informes',               requiredRole: 'admin' },
       { id: 'appcc_templates',       label: 'Plantillas',            icon: FolderOpen,     path: 'plantillas',             requiredRole: 'admin' },
       { id: 'appcc_onboarding',      label: 'Configurar',            icon: Settings,       path: 'onboarding',             requiredRole: 'admin' },

src/modules/appcc/pages/AppccDashboardPage.tsx

@@ -21,9 +21,12 @@ import {
   LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
   PieChart, Pie, Cell, BarChart, Bar,
 } from 'recharts'
+import { useNavigate } from 'react-router-dom'
 import { useApp } from '@/context/AppContext'
 import { useLocationScope } from '@/modules/multitenancy/hooks/useLocationScope'
+import { useActiveAccount } from '@/modules/multitenancy/hooks/useActiveAccount'
 import * as analyticsService from '@/modules/appcc/services/analyticsService'
+import * as trainingComplianceService from '@/services/trainingComplianceService'
 import type {
   DateRange,
   KpiSummary,
@@ -176,6 +179,9 @@ export default function AppccDashboardPage() {
         <div className="bg-danger-bg text-danger rounded-md p-3 text-sm">{error}</div>
       )}
 
+      {/* ============ PRERREQUISITO: FORMACIÓN (Capa 2) ============ */}
+      <TrainingPrerequisiteCard />
+
       {/* ============ KPIs ============ */}
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         <KpiBox
@@ -634,3 +640,61 @@ function Heatmap({ cells }: { cells: HeatmapCell[] }) {
     </div>
   )
 }
+
+// ============ PRERREQUISITO: FORMACIÓN (Capa 2) ============
+// Tarjeta autocontenida (su propio fetch, no comparte estado con el resto
+// del dashboard) — así no se toca ninguna lógica existente del dashboard
+// para añadir esto. Semáforo = mismo cálculo que el KPI de portada del
+// informe (computeMandatoryCompliancePct), para que nunca puedan divergir.
+function TrainingPrerequisiteCard() {
+  const { activeAccountId } = useActiveAccount()
+  const navigate = useNavigate()
+  const [kpi, setKpi] = useState<{ pct: number; vigente: number; applicable: number } | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [failed, setFailed] = useState(false)
+
+  useEffect(() => {
+    if (!activeAccountId) { setLoading(false); return }
+    let cancelled = false
+    trainingComplianceService.getTrainingComplianceMatrix(activeAccountId, null, true)
+      .then((rows) => {
+        if (cancelled) return
+        setKpi(trainingComplianceService.computeMandatoryCompliancePct(rows))
+        setFailed(false)
+      })
+      .catch(() => { if (!cancelled) setFailed(true) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [activeAccountId])
+
+  const tone = failed || kpi == null
+    ? { dot: 'bg-text-tertiary', text: 'text-text-secondary' }
+    : kpi.pct === 100
+      ? { dot: 'bg-success', text: 'text-success' }
+      : kpi.pct >= 80
+        ? { dot: 'bg-warning', text: 'text-warning' }
+        : { dot: 'bg-danger', text: 'text-danger' }
+
+  return (
+    <button
+      type="button"
+      onClick={() => navigate('/appcc/formacion')}
+      className="w-full flex items-center justify-between gap-3 bg-card rounded-lg border border-border-default p-3 sm:p-4 text-left hover:bg-page transition-colors"
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        <span className={`w-2.5 h-2.5 rounded-full shrink-0 ${tone.dot}`} />
+        <div className="min-w-0">
+          <p className="text-sm font-semibold text-text-primary">Prerrequisito: Formación del personal</p>
+          <p className="text-xs text-text-secondary truncate">
+            {loading ? 'Cargando…' : failed || kpi == null
+              ? 'No se pudo calcular — abre el informe para más detalle.'
+              : `${kpi.vigente} de ${kpi.applicable} con la formación obligatoria vigente`}
+          </p>
+        </div>
+      </div>
+      <span className={`text-lg font-bold shrink-0 ${tone.text}`}>
+        {loading || failed || kpi == null ? '—' : `${kpi.pct}%`}
+      </span>
+    </button>
+  )
+}