[V0_FILE]typescriptreact:file="mobile-census-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { CheckCircle, AlertCircle, User, Home, Phone, GraduationCap, Briefcase } from "lucide-react" interface FormData { [key: string]: string } interface TabInfo { id: string label: string icon: React.ReactNode fields: string[] } export default function ImprovedMobileCensusForm() { const [activeTab, setActiveTab] = useState("datos-personales") const [formData, setFormData] = useState({}) const [completedTabs, setCompletedTabs] = useState>(new Set()) const [errors, setErrors] = useState({}) const [isLoading, setIsLoading] = useState(false) const tabs: TabInfo[] = [ { id: "datos-personales", label: "Personal", icon: , fields: [ "nombre", "apellidos", "tipo-documento", "numero-documento", "genero", "fecha-nacimiento", "nacionalidad", "estado-civil", ], }, { id: "domicilio", label: "Domicilio", icon: , fields: ["calle", "numero", "piso", "departamento", "codigo-postal", "localidad", "provincia"], }, { id: "contacto", label: "Contacto", icon: , fields: ["telefono", "celular", "mail", "mail-alternativo"], }, { id: "estudios", label: "Estudios", icon: , fields: ["nivel-educativo", "institucion"], }, { id: "laboral", label: "Laboral", icon: , fields: ["ocupacion", "empresa"], }, ] // Calculate progress const totalFields = tabs.reduce((acc, tab) => acc + tab.fields.length, 0) const completedFields = Object.keys(formData).filter((key) => formData[key]?.trim()).length const progress = (completedFields / totalFields) * 100 // Check if tab is completed const isTabCompleted = (tabId: string) => { const tab = tabs.find((t) => t.id === tabId) if (!tab) return false return tab.fields.every((field) => formData[field]?.trim()) } // Update completed tabs useEffect(() => { const newCompletedTabs = new Set() tabs.forEach((tab) => { if (isTabCompleted(tab.id)) { newCompletedTabs.add(tab.id) } }) setCompletedTabs(newCompletedTabs) }, [formData]) // Handle input change const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) // Clear error when user starts typing if (errors[field]) { setErrors((prev) => ({ ...prev, [field]: "" })) } } // Validate required fields const validateTab = (tabId: string) => { const tab = tabs.find((t) => t.id === tabId) if (!tab) return true const newErrors: FormData = {} let isValid = true tab.fields.forEach((field) => { if (!formData[field]?.trim()) { newErrors[field] = "Este campo es requerido" isValid = false } }) setErrors((prev) => ({ ...prev, ...newErrors })) return isValid } // Handle next tab const handleNext = () => { if (validateTab(activeTab)) { const currentIndex = tabs.findIndex((tab) => tab.id === activeTab) if (currentIndex < tabs.length - 1) { setActiveTab(tabs[currentIndex + 1].id) } } } // Handle submit const handleSubmit = async () => { setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) setIsLoading(false) alert("Formulario enviado exitosamente!") } return (

{/* Header with Progress */}

Ficha Censal

{Math.round(progress)}% completado

{completedFields} de {totalFields} campos completados

{/* Enhanced Tab Navigation */}

{tabs.map((tab) => (

{tab.icon} {completedTabs.has(tab.id) && ( )}

{tab.label} ))}

{/* Personal Data Tab */}

Datos Personales

Nombre * handleInputChange("nombre", e.target.value)} placeholder="Ingrese su nombre" className={`w-full transition-colors ${errors.nombre ? "border-red-500 focus:border-red-500" : "focus:border-blue-500"}`} /> {errors.nombre && (

{errors.nombre}

)}

Apellidos * handleInputChange("apellidos", e.target.value)} placeholder="Ingrese sus apellidos" className={`w-full transition-colors ${errors.apellidos ? "border-red-500 focus:border-red-500" : "focus:border-blue-500"}`} /> {errors.apellidos && (

{errors.apellidos}

)}

Tipo de documento * {errors["tipo-documento"] &&

{errors["tipo-documento"]}

}

Número * handleInputChange("numero-documento", e.target.value)} placeholder="12345678" className={errors["numero-documento"] ? "border-red-500" : ""} /> {errors["numero-documento"] && (

{errors["numero-documento"]}

)}

Género *

Fecha de nacimiento * handleInputChange("fecha-nacimiento", e.target.value)} className={errors["fecha-nacimiento"] ? "border-red-500" : ""} />

Nacionalidad * handleInputChange("nacionalidad", e.target.value)} placeholder="Ej: Argentina" className={errors.nacionalidad ? "border-red-500" : ""} />

Estado civil *

{/* Address Tab */}

Información de Domicilio

Calle * handleInputChange("calle", e.target.value)} placeholder="Av. Corrientes" className={errors.calle ? "border-red-500" : ""} />

Número * handleInputChange("numero", e.target.value)} placeholder="1234" className={errors.numero ? "border-red-500" : ""} />

Piso handleInputChange("piso", e.target.value)} placeholder="5" />

Depto handleInputChange("departamento", e.target.value)} placeholder="A" />

C.P. * handleInputChange("codigo-postal", e.target.value)} placeholder="1000" className={errors["codigo-postal"] ? "border-red-500" : ""} />

Localidad *

Provincia *

{/* Contact Tab */}

Información de Contacto

Teléfono * handleInputChange("telefono", e.target.value)} placeholder="011-1234-5678" className={errors.telefono ? "border-red-500" : ""} />

Celular * handleInputChange("celular", e.target.value)} placeholder="11-1234-5678" className={errors.celular ? "border-red-500" : ""} />

Email principal * handleInputChange("mail", e.target.value)} placeholder="ejemplo@correo.com" className={errors.mail ? "border-red-500" : ""} />

Email alternativo handleInputChange("mail-alternativo", e.target.value)} placeholder="alternativo@correo.com" />

{/* Studies Tab */} Información Educativa

Nivel educativo *

Institución * handleInputChange("institucion", e.target.value)} placeholder="Nombre de la institución" />

{/* Work Tab */} Información Laboral

Ocupación * handleInputChange("ocupacion", e.target.value)} placeholder="Ej: Desarrollador, Docente, etc." />

Empresa/Institución * handleInputChange("empresa", e.target.value)} placeholder="Nombre de la empresa" />

{/* Enhanced Action Buttons */}

{activeTab !== "laboral" ? ( ) : ( )}

) } [V0_FILE]typescriptreact:file="wizard-showcase.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { ChevronLeft, ChevronRight, Check, User, CreditCard, MapPin, Star, ArrowRight, Circle } from "lucide-react" export default function WizardShowcase() { const [currentDesign, setCurrentDesign] = useState("linear") const [step, setStep] = useState(1) // Linear Progress Wizard const LinearWizard = () => (

{/* Header with linear progress */}

Configuración de cuenta

Paso {step}/4

Información personal

Completa tus datos básicos para continuar

Nombre completo

) // Card-based Wizard const CardWizard = () => (

{/* Floating progress indicator */}

{[1, 2, 3, 4].map((i) => (

))}

{step}/4

Método de pago

Selecciona cómo prefieres pagar

{["Tarjeta de crédito", "PayPal", "Transferencia bancaria"].map((method) => (

{method}

))} {/* Floating action button */}

) // Tab-based Wizard const TabWizard = () => (

Nuevo pedido

3 de 5 pasos

{/* Tab indicators */}

{["Producto", "Dirección", "Pago", "Resumen", "Confirmación"].map((tab, index) => (

{index < step ? : index + 1}

{tab}

))}

Dirección de entrega

¿Dónde quieres recibir tu pedido?

) // Swipe-based Wizard const SwipeWizard = () => (

{[1, 2, 3, 4].map((i) => (

))}

¡Bienvenido!

Descubre todas las funciones increíbles que tenemos preparadas para ti

{[1, 2, 3, 4].map((i) => (

) // Minimal Wizard const MinimalWizard = () => (

Paso 2 / 6

¿Cuál es tu objetivo?

Esto nos ayudará a personalizar tu experiencia

{["Aprender algo nuevo", "Mejorar mis habilidades", "Cambiar de carrera", "Obtener una certificación"].map( (option) => ( ), )}

) // Bottom Sheet Wizard const BottomSheetWizard = () => (

{/* Background content */}

Configurar perfil

Tu información aparecerá aquí...

{/* Bottom sheet */}

Paso 3 de 5

{[1, 2, 3, 4, 5].map((i) => (

))}

Cuéntanos sobre ti

</div>
          </div>

<div className="flex gap-3">
            <Button variant="outline" className="flex-1 bg-transparent">
              Omitir
            </Button>
            <Button className="flex-1">Continuar</Button>
          </div>
        </div>
      </div>
    </div>
  )

const designs = [
    { id: "linear", name: "Linear Progress", component: LinearWizard },
    { id: "card", name: "Card-based", component: CardWizard },
    { id: "tab", name: "Tab Navigation", component: TabWizard },
    { id: "swipe", name: "Swipe Onboarding", component: SwipeWizard },
    { id: "minimal", name: "Minimal", component: MinimalWizard },
    { id: "bottom", name: "Bottom Sheet", component: BottomSheetWizard },
  ]

const CurrentComponent = designs.find((d) => d.id === currentDesign)?.component || LinearWizard

return (
    <div className="min-h-screen bg-gray-50">
      {/* Design selector */}
      <div className="bg-white border-b p-4">
        <h1 className="text-xl font-bold mb-4">Patrones de Wizard Mobile</h1>
        <div className="flex gap-2 overflow-x-auto pb-2">
          {designs.map((design) => (
            <Button
              key={design.id}
              variant={currentDesign === design.id ? "default" : "outline"}
              size="sm"
              onClick={() => setCurrentDesign(design.id)}
              className="whitespace-nowrap"
            >
              {design.name}
            </Button>
          ))}
        </div>
      </div>

{/* Design preview */}
      <div className="max-w-sm mx-auto bg-white shadow-xl">
        <CurrentComponent />
      </div>

{/* Design description */}
      <div className="max-w-2xl mx-auto p-6 bg-white mt-6 rounded-lg shadow-sm">
        <h2 className="font-bold mb-4">Características del patrón actual:</h2>
        {currentDesign === "linear" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Progreso lineal claro:</strong> Barra de progreso prominente
            </li>
            <li>
              • <strong>Navegación secuencial:</strong> Botones anterior/siguiente
            </li>
            <li>
              • <strong>Contexto visual:</strong> Iconos y descripciones claras
            </li>
            <li>
              • <strong>Ideal para:</strong> Formularios largos, configuraciones
            </li>
          </ul>
        )}
        {currentDesign === "card" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Enfoque por tarjetas:</strong> Cada paso es una tarjeta independiente
            </li>
            <li>
              • <strong>Progreso flotante:</strong> Indicador discreto pero visible
            </li>
            <li>
              • <strong>FAB navigation:</strong> Botón de acción flotante
            </li>
            <li>
              • <strong>Ideal para:</strong> Selecciones, configuraciones rápidas
            </li>
          </ul>
        )}
        {currentDesign === "tab" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Navegación por pestañas:</strong> Vista general de todos los pasos
            </li>
            <li>
              • <strong>Estados visuales:</strong> Completado, actual, pendiente
            </li>
            <li>
              • <strong>Navegación libre:</strong> Permite saltar entre pasos
            </li>
            <li>
              • <strong>Ideal para:</strong> Procesos complejos, edición de datos
            </li>
          </ul>
        )}
        {currentDesign === "swipe" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Experiencia inmersiva:</strong> Pantalla completa con gradientes
            </li>
            <li>
              • <strong>Navegación gestual:</strong> Deslizar para avanzar
            </li>
            <li>
              • <strong>Onboarding friendly:</strong> Perfecto para primeras experiencias
            </li>
            <li>
              • <strong>Ideal para:</strong> Tutoriales, presentación de features
            </li>
          </ul>
        )}
        {currentDesign === "minimal" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Diseño limpio:</strong> Mínimos elementos visuales
            </li>
            <li>
              • <strong>Enfoque en contenido:</strong> Sin distracciones
            </li>
            <li>
              • <strong>Progreso sutil:</strong> Barra de progreso discreta
            </li>
            <li>
              • <strong>Ideal para:</strong> Cuestionarios, surveys, configuración inicial
            </li>
          </ul>
        )}
        {currentDesign === "bottom" && (
          <ul className="space-y-2 text-sm text-gray-700">
            <li>
              • <strong>Bottom sheet modal:</strong> Contenido superpuesto
            </li>
            <li>
              • <strong>Contexto preservado:</strong> Fondo visible
            </li>
            <li>
              • <strong>Interacción natural:</strong> Deslizar para cerrar
            </li>
            <li>
              • <strong>Ideal para:</strong> Configuraciones rápidas, formularios cortos
            </li>
          </ul>
        )}
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
    --background: 210 20% 98%;
    --foreground: 215 25% 12%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 12%;
    --primary: 215 65% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 15% 95%;
    --secondary-foreground: 215 25% 27%;
    --muted: 210 14% 93%;
    --muted-foreground: 215 13% 50%;
    --accent: 210 15% 95%;
    --accent-foreground: 215 25% 12%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 18% 90%;
    --input: 214 18% 90%;
    --ring: 215 65% 48%;
    --chart-1: 0 72% 51%;
    --chart-2: 38 92% 50%;
    --chart-3: 152 60% 42%;
    --chart-4: 215 65% 48%;
    --chart-5: 262 52% 55%;
    --radius: 0.625rem;
    --sidebar-background: 215 25% 15%;
    --sidebar-foreground: 210 15% 85%;
    --sidebar-primary: 215 65% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 215 20% 22%;
    --sidebar-accent-foreground: 210 15% 90%;
    --sidebar-border: 215 18% 25%;
    --sidebar-ring: 215 65% 55%;

--warning: 38 92% 50%;
    --warning-foreground: 38 92% 20%;
    --success: 152 60% 42%;
    --success-foreground: 0 0% 100%;
  }
  .dark {
    --background: 215 25% 8%;
    --foreground: 210 15% 93%;
    --card: 215 22% 11%;
    --card-foreground: 210 15% 93%;
    --popover: 215 22% 11%;
    --popover-foreground: 210 15% 93%;
    --primary: 215 65% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 215 18% 16%;
    --secondary-foreground: 210 15% 85%;
    --muted: 215 18% 16%;
    --muted-foreground: 215 13% 55%;
    --accent: 215 18% 16%;
    --accent-foreground: 210 15% 93%;
    --destructive: 0 62.8% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 215 18% 20%;
    --input: 215 18% 20%;
    --ring: 215 65% 55%;
    --chart-1: 0 72% 55%;
    --chart-2: 38 92% 55%;
    --chart-3: 152 60% 48%;
    --chart-4: 215 65% 55%;
    --chart-5: 262 52% 60%;
    --sidebar-background: 215 25% 6%;
    --sidebar-foreground: 210 15% 85%;
    --sidebar-primary: 215 65% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 215 20% 14%;
    --sidebar-accent-foreground: 210 15% 90%;
    --sidebar-border: 215 18% 15%;
    --sidebar-ring: 215 65% 55%;

--warning: 38 92% 55%;
    --warning-foreground: 38 92% 15%;
    --success: 152 60% 48%;
    --success-foreground: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type { Metadata } from 'next'
import { Inter, JetBrains_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

const _inter = Inter({ subsets: ["latin"] });
const _jetbrainsMono = JetBrains_Mono({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: 'SATAE - Sistema de Alerta Temprana',
  description: 'Dashboard de deteccion de riesgo de desercion escolar',
  generator: 'v0.app',
  icons: {
    icon: [
      {
        url: '/icon-light-32x32.png',
        media: '(prefers-color-scheme: light)',
      },
      {
        url: '/icon-dark-32x32.png',
        media: '(prefers-color-scheme: dark)',
      },
      {
        url: '/icon.svg',
        type: 'image/svg+xml',
      },
    ],
    apple: '/apple-icon.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className="font-sans antialiased">
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/satae-dashboard.tsx" isMerged="true"
"use client"

import { useState } from "react"
import {
  Search,
  Filter,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Eye,
  AlertTriangle,
  TrendingUp,
  TrendingDown,
  Users,
  BarChart3,
  Home,
  FileText,
  Settings,
  GraduationCap,
  BookOpen,
  ClipboardList,
  Monitor,
  UserCheck,
  Accessibility,
  X,
  ArrowUpRight,
  Clock,
  Minus,
} from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
  Cell,
  PieChart,
  Pie,
  Sector,
  Legend,
} from "recharts"

const sidebarItems = [
  { icon: Home, label: "Inicio", active: false },
  { icon: BarChart3, label: "Tablero", active: true },
  { icon: GraduationCap, label: "Estudiantes", active: false },
  { icon: BookOpen, label: "Cursada", active: false },
  { icon: ClipboardList, label: "Reportes", active: false },
  { icon: Monitor, label: "Dispositivos", active: false },
  { icon: FileText, label: "Documentos", active: false },
  { icon: UserCheck, label: "Docentes", active: false },
  { icon: Users, label: "Familias", active: false },
  { icon: Accessibility, label: "Accesibilidad", active: false },
]

const riskByYearData = [
  { year: "1er ano", rojo: 3, amarillo: 5, verde: 280 },
  { year: "2do ano", rojo: 1, amarillo: 4, verde: 265 },
  { year: "3er ano", rojo: 1, amarillo: 2, verde: 310 },
  { year: "4to ano", rojo: 0, amarillo: 2, verde: 248 },
  { year: "5to ano", rojo: 1, amarillo: 1, verde: 255 },
  { year: "6to ano", rojo: 0, amarillo: 0, verde: 245 },
]

const riskBySectionData = [
  { section: "1ro M. Simple 1", rojo: 1, amarillo: 2, total: 32 },
  { section: "1ro M. Simple 10", rojo: 1, amarillo: 1, total: 30 },
  { section: "1ro M. Simple 2", rojo: 1, amarillo: 0, total: 28 },
  { section: "1ro M. Simple 3", rojo: 0, amarillo: 2, total: 31 },
  { section: "3ro N. Simple 5", rojo: 1, amarillo: 1, total: 29 },
  { section: "4to N. Simple 4", rojo: 1, amarillo: 1, total: 27 },
  { section: "5to M. Simple 5", rojo: 1, amarillo: 0, total: 33 },
]

const categoryData = [
  { name: "Sin riesgo", value: 1603, fill: "hsl(152, 60%, 42%)" },
  { name: "Seguimiento", value: 14, fill: "hsl(38, 92%, 50%)" },
  { name: "Accion inmediata", value: 6, fill: "hsl(0, 72%, 51%)" },
]

const studentsData = [
  {
    id: 1,
    documento: "51360723",
    apellido: "ACEBO BARRIOS",
    nombre: "JEFFERSON FROILAN",
    ano: "1er ano",
    turno: "Manana",
    division: "3ra",
    riesgo: "verde" as const,
    sobreedad: false,
    repitente: false,
    inasistencias: 1.5,
    materiasPend: 1,
  },
  {
    id: 2,
    documento: "94865172",
    apellido: "ACEBO BARRIOS",
    nombre: "STEFANHIA MISHELL",
    ano: "3er ano",
    turno: "Manana",
    division: "13ra",
    riesgo: "verde" as const,
    sobreedad: false,
    repitente: false,
    inasistencias: 0,
    materiasPend: 1,
  },
  {
    id: 3,
    documento: "48183039",
    apellido: "ACEVEDO OBREGON",
    nombre: "BRUNO DANIEL",
    ano: "4to ano",
    turno: "Noche",
    division: "5ta",
    riesgo: "rojo" as const,
    sobreedad: true,
    repitente: true,
    inasistencias: 7.0,
    materiasPend: 1,
  },
  {
    id: 4,
    documento: "49763674",
    apellido: "ACEVEDO OBREGON",
    nombre: "ANDREA SOLEDAD",
    ano: "3er ano",
    turno: "Tarde",
    division: "5ta",
    riesgo: "amarillo" as const,
    sobreedad: false,
    repitente: false,
    inasistencias: 3.5,
    materiasPend: 3,
  },
  {
    id: 5,
    documento: "49258281",
    apellido: "ACHATA ALVAREZ",
    nombre: "JORGE ELIAS",
    ano: "4to ano",
    turno: "Tarde",
    division: "1ra",
    riesgo: "rojo" as const,
    sobreedad: true,
    repitente: false,
    inasistencias: 12.0,
    materiasPend: 4,
  },
  {
    id: 6,
    documento: "50123456",
    apellido: "BENITEZ GARCIA",
    nombre: "LUCIA MARIA",
    ano: "2do ano",
    turno: "Manana",
    division: "2da",
    riesgo: "amarillo" as const,
    sobreedad: false,
    repitente: false,
    inasistencias: 4.0,
    materiasPend: 2,
  },
  {
    id: 7,
    documento: "51987654",
    apellido: "CARDOZO LOPEZ",
    nombre: "MATIAS EZEQUIEL",
    ano: "1er ano",
    turno: "Manana",
    division: "7ma",
    riesgo: "verde" as const,
    sobreedad: false,
    repitente: false,
    inasistencias: 0.5,
    materiasPend: 0,
  },
  {
    id: 8,
    documento: "48765432",
    apellido: "DOMINGUEZ RUIZ",
    nombre: "CAMILA SOLANGE",
    ano: "5to ano",
    turno: "Manana",
    division: "3ra",
    riesgo: "rojo" as const,
    sobreedad: true,
    repitente: true,
    inasistencias: 15.0,
    materiasPend: 5,
  },
]

function RiskBadge({ level }: { level: "rojo" | "amarillo" | "verde" }) {
  const config = {
    rojo: {
      label: "Critico",
      className:
        "bg-red-50 text-red-700 border-red-200 hover:bg-red-50",
    },
    amarillo: {
      label: "Seguimiento",
      className:
        "bg-amber-50 text-amber-700 border-amber-200 hover:bg-amber-50",
    },
    verde: {
      label: "Sin riesgo",
      className:
        "bg-emerald-50 text-emerald-700 border-emerald-200 hover:bg-emerald-50",
    },
  }
  const c = config[level]
  return (
    <Badge variant="outline" className={c.className}>
      {c.label}
    </Badge>
  )
}

function KpiCard({
  title,
  value,
  change,
  changeLabel,
  variant,
  icon: Icon,
}: {
  title: string
  value: number
  change: number
  changeLabel: string
  variant: "critical" | "warning" | "success" | "neutral"
  icon: React.ElementType
}) {
  const variantStyles = {
    critical: "border-l-red-500",
    warning: "border-l-amber-500",
    success: "border-l-emerald-500",
    neutral: "border-l-primary",
  }
  const iconBg = {
    critical: "bg-red-100 text-red-600",
    warning: "bg-amber-100 text-amber-600",
    success: "bg-emerald-100 text-emerald-600",
    neutral: "bg-primary/10 text-primary",
  }

return (
    <Card
      className={`border-l-4 ${variantStyles[variant]} shadow-sm`}
    >
      <CardContent className="p-5">
        <div className="flex items-start justify-between">
          <div className="flex flex-col gap-1">
            <span className="text-sm text-muted-foreground">{title}</span>
            <span className="text-3xl font-bold tracking-tight text-card-foreground font-mono">
              {value.toLocaleString()}
            </span>
            <div className="flex items-center gap-1 mt-1">
              {change > 0 ? (
                <TrendingUp className="h-3.5 w-3.5 text-red-500" />
              ) : change < 0 ? (
                <TrendingDown className="h-3.5 w-3.5 text-emerald-500" />
              ) : (
                <Minus className="h-3.5 w-3.5 text-muted-foreground" />
              )}
              <span
                className={`text-xs font-medium ${
                  change > 0
                    ? "text-red-600"
                    : change < 0
                      ? "text-emerald-600"
                      : "text-muted-foreground"
                }`}
              >
                {change > 0 ? "+" : ""}
                {change}% {changeLabel}
              </span>
            </div>
          </div>
          <div className={`rounded-lg p-2.5 ${iconBg[variant]}`}>
            <Icon className="h-5 w-5" />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

const renderActiveShape = (props: Record<string, unknown>) => {
  const {
    cx,
    cy,
    innerRadius,
    outerRadius,
    startAngle,
    endAngle,
    fill,
    payload,
    percent,
    value,
  } = props as {
    cx: number
    cy: number
    innerRadius: number
    outerRadius: number
    startAngle: number
    endAngle: number
    fill: string
    payload: { name: string }
    percent: number
    value: number
  }

return (
    <g>
      <text x={cx} y={cy - 8} textAnchor="middle" fill="hsl(215, 25%, 12%)" className="text-sm font-semibold">
        {payload.name}
      </text>
      <text x={cx} y={cy + 14} textAnchor="middle" fill="hsl(215, 13%, 50%)" className="text-xs">
        {value} ({(percent * 100).toFixed(1)}%)
      </text>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={(outerRadius as number) + 6}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={(outerRadius as number) + 8}
        outerRadius={(outerRadius as number) + 12}
        fill={fill}
      />
    </g>
  )
}

export default function SataeDashboard() {
  const [activeTab, setActiveTab] = useState("satae")
  const [searchQuery, setSearchQuery] = useState("")
  const [riskFilter, setRiskFilter] = useState("todos")
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const [activePieIndex, setActivePieIndex] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)

const filteredStudents = studentsData.filter((student) => {
    const matchesSearch =
      searchQuery === "" ||
      student.apellido.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.nombre.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.documento.includes(searchQuery)
    const matchesRisk =
      riskFilter === "todos" || student.riesgo === riskFilter
    return matchesSearch && matchesRisk
  })

const criticalStudents = studentsData.filter((s) => s.riesgo === "rojo")

return (
    <TooltipProvider>
      <div className="flex h-screen bg-background overflow-hidden">
        {/* Sidebar */}
        <aside
          className={`${sidebarCollapsed ? "w-16" : "w-56"} bg-sidebar text-sidebar-foreground flex flex-col border-r border-sidebar-border transition-all duration-300 shrink-0`}
        >
          {/* Logo */}
          <div className="flex items-center gap-2.5 px-4 h-16 border-b border-sidebar-border">
            <div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center shrink-0">
              <GraduationCap className="h-4.5 w-4.5 text-sidebar-primary-foreground" />
            </div>
            {!sidebarCollapsed && (
              <div className="flex flex-col">
                <span className="text-sm font-bold text-sidebar-primary-foreground tracking-tight">
                  AprendeBA
                </span>
                <span className="text-[10px] text-sidebar-foreground/60">
                  SATAE
                </span>
              </div>
            )}
          </div>

{/* Nav items */}
          <nav className="flex-1 py-3 px-2 space-y-0.5 overflow-y-auto">
            {sidebarItems.map((item) => (
              <Tooltip key={item.label} delayDuration={0}>
                <TooltipTrigger asChild>
                  <button
                    className={`flex items-center gap-3 w-full rounded-lg px-3 py-2.5 text-sm transition-colors ${
                      item.active
                        ? "bg-sidebar-accent text-sidebar-primary-foreground font-medium"
                        : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
                    }`}
                  >
                    <item.icon className="h-[18px] w-[18px] shrink-0" />
                    {!sidebarCollapsed && <span>{item.label}</span>}
                  </button>
                </TooltipTrigger>
                {sidebarCollapsed && (
                  <TooltipContent side="right">{item.label}</TooltipContent>
                )}
              </Tooltip>
            ))}
          </nav>

{/* Collapse button */}
          <div className="p-2 border-t border-sidebar-border">
            <button
              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
              className="flex items-center justify-center w-full rounded-lg p-2 text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground transition-colors"
            >
              <ChevronLeft
                className={`h-4 w-4 transition-transform ${sidebarCollapsed ? "rotate-180" : ""}`}
              />
            </button>
          </div>
        </aside>

{/* Main content */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* Top bar */}
          <header className="h-16 bg-card border-b border-border flex items-center justify-between px-6 shrink-0">
            <div className="flex items-center gap-3">
              <Home className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm text-muted-foreground">/</span>
              <span className="text-sm font-medium text-foreground">
                Tablero
              </span>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-xs text-muted-foreground flex items-center gap-1.5">
                <Clock className="h-3.5 w-3.5" />
                Ingesta: 22/12/2025
              </span>
              <div className="flex items-center gap-2.5">
                <span className="text-sm font-medium text-foreground hidden lg:block">
                  Esc. Tecnica N13 DE 21
                </span>
                <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
                  <span className="text-xs font-semibold text-primary-foreground">
                    A
                  </span>
                </div>
              </div>
            </div>
          </header>

{/* Content area */}
          <main className="flex-1 overflow-y-auto">
            <div className="p-6 max-w-[1440px] mx-auto space-y-6">
              {/* Page header */}
              <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                <div>
                  <h1 className="text-2xl font-bold tracking-tight text-foreground">
                    Tablero SATAE
                  </h1>
                  <p className="text-sm text-muted-foreground mt-1">
                    Sistema de Alerta Temprana de Abandono Escolar
                  </p>
                </div>
                <Tabs
                  value={activeTab}
                  onValueChange={setActiveTab}
                  className="w-auto"
                >
                  <TabsList className="bg-muted">
                    <TabsTrigger value="general" className="text-xs">
                      General
                    </TabsTrigger>
                    <TabsTrigger value="satae" className="text-xs">
                      SATAE
                    </TabsTrigger>
                    <TabsTrigger value="dispositivos" className="text-xs">
                      Dispositivos
                    </TabsTrigger>
                  </TabsList>
                </Tabs>
              </div>

{/* Filters */}
              <Card className="shadow-sm">
                <CardContent className="p-4">
                  <div className="flex flex-wrap items-center gap-3">
                    <Filter className="h-4 w-4 text-muted-foreground" />
                    <Select>
                      <SelectTrigger className="w-[140px] h-9 text-xs">
                        <SelectValue placeholder="Seccion" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todas</SelectItem>
                        <SelectItem value="1">1ra</SelectItem>
                        <SelectItem value="2">2da</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select>
                      <SelectTrigger className="w-[140px] h-9 text-xs">
                        <SelectValue placeholder="Jornada" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todas</SelectItem>
                        <SelectItem value="simple">Simple</SelectItem>
                        <SelectItem value="completa">Completa</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select>
                      <SelectTrigger className="w-[140px] h-9 text-xs">
                        <SelectValue placeholder="Turno" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos</SelectItem>
                        <SelectItem value="manana">Manana</SelectItem>
                        <SelectItem value="tarde">Tarde</SelectItem>
                        <SelectItem value="noche">Noche</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select>
                      <SelectTrigger className="w-[140px] h-9 text-xs">
                        <SelectValue placeholder="Ano cursar" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">Todos</SelectItem>
                        <SelectItem value="1">1er ano</SelectItem>
                        <SelectItem value="2">2do ano</SelectItem>
                        <SelectItem value="3">3er ano</SelectItem>
                        <SelectItem value="4">4to ano</SelectItem>
                        <SelectItem value="5">5to ano</SelectItem>
                        <SelectItem value="6">6to ano</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-xs text-muted-foreground"
                    >
                      <X className="h-3.5 w-3.5 mr-1" />
                      Limpiar
                    </Button>
                  </div>
                </CardContent>
              </Card>

{/* Alert banner for critical students */}
              {criticalStudents.length > 0 && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-4">
                  <div className="bg-red-100 rounded-full p-2 shrink-0">
                    <AlertTriangle className="h-5 w-5 text-red-600" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-semibold text-red-800">
                      {criticalStudents.length} estudiantes requieren accion
                      inmediata
                    </p>
                    <p className="text-xs text-red-600 mt-0.5">
                      Estos estudiantes presentan alto riesgo de abandono segun
                      el modelo predictivo
                    </p>
                  </div>
                  <Button
                    size="sm"
                    className="bg-red-600 hover:bg-red-700 text-red-50 shrink-0"
                  >
                    Ver casos
                    <ArrowUpRight className="h-3.5 w-3.5 ml-1" />
                  </Button>
                </div>
              )}

{/* KPI Cards */}
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <KpiCard
                  title="Estudiantes alcanzados"
                  value={1623}
                  change={0}
                  changeLabel="vs. prediccion anterior"
                  variant="neutral"
                  icon={Users}
                />
                <KpiCard
                  title="Accion inmediata"
                  value={6}
                  change={200}
                  changeLabel="vs. prediccion anterior"
                  variant="critical"
                  icon={AlertTriangle}
                />
                <KpiCard
                  title="Necesitan seguimiento"
                  value={14}
                  change={-6.67}
                  changeLabel="vs. prediccion anterior"
                  variant="warning"
                  icon={Eye}
                />
                <KpiCard
                  title="Sin riesgo de abandono"
                  value={1603}
                  change={-0.19}
                  changeLabel="vs. prediccion anterior"
                  variant="success"
                  icon={UserCheck}
                />
              </div>

{/* Charts row */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
                {/* Distribution by category - Donut chart */}
                <Card className="shadow-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-semibold text-card-foreground">
                      Distribucion por categoria
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pb-4">
                    <div className="h-[240px]">
                      <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                          <Pie
                            activeIndex={activePieIndex}
                            activeShape={renderActiveShape}
                            data={categoryData}
                            cx="50%"
                            cy="50%"
                            innerRadius={55}
                            outerRadius={80}
                            dataKey="value"
                            onMouseEnter={(_, index) =>
                              setActivePieIndex(index)
                            }
                          >
                            {categoryData.map((entry, index) => (
                              <Cell key={`cell-${index}`} fill={entry.fill} />
                            ))}
                          </Pie>
                          <Legend
                            verticalAlign="bottom"
                            height={36}
                            formatter={(value: string) => (
                              <span className="text-xs text-muted-foreground">
                                {value}
                              </span>
                            )}
                          />
                        </PieChart>
                      </ResponsiveContainer>
                    </div>
                  </CardContent>
                </Card>

{/* Risk by year */}
                <Card className="shadow-sm lg:col-span-2">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-semibold text-card-foreground">
                      Desglose por ano
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pb-4">
                    <div className="h-[240px]">
                      <ResponsiveContainer width="100%" height="100%">
                        <BarChart
                          data={riskByYearData}
                          layout="vertical"
                          margin={{ left: 10, right: 20, top: 5, bottom: 5 }}
                          barGap={0}
                          barCategoryGap="25%"
                        >
                          <CartesianGrid
                            strokeDasharray="3 3"
                            horizontal={false}
                            stroke="hsl(214, 18%, 90%)"
                          />
                          <XAxis type="number" tick={{ fontSize: 11 }} />
                          <YAxis
                            dataKey="year"
                            type="category"
                            width={65}
                            tick={{ fontSize: 11 }}
                          />
                          <Bar
                            dataKey="rojo"
                            name="Critico"
                            fill="hsl(0, 72%, 51%)"
                            radius={[0, 3, 3, 0]}
                            barSize={8}
                          />
                          <Bar
                            dataKey="amarillo"
                            name="Seguimiento"
                            fill="hsl(38, 92%, 50%)"
                            radius={[0, 3, 3, 0]}
                            barSize={8}
                          />
                          <Bar
                            dataKey="verde"
                            name="Sin riesgo"
                            fill="hsl(152, 60%, 42%)"
                            radius={[0, 3, 3, 0]}
                            barSize={8}
                          />
                          <Legend
                            verticalAlign="top"
                            height={30}
                            formatter={(value: string) => (
                              <span className="text-xs text-muted-foreground">
                                {value}
                              </span>
                            )}
                          />
                        </BarChart>
                      </ResponsiveContainer>
                    </div>
                  </CardContent>
                </Card>
              </div>

{/* Sections with critical students */}
              <Card className="shadow-sm">
                <CardHeader className="pb-2">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-sm font-semibold text-card-foreground">
                      Secciones con estudiantes en riesgo
                    </CardTitle>
                    <span className="text-xs text-muted-foreground">
                      Solo secciones con al menos 1 estudiante en riesgo
                    </span>
                  </div>
                </CardHeader>
                <CardContent className="pb-4">
                  <div className="h-[200px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart
                        data={riskBySectionData}
                        margin={{ left: 0, right: 20, top: 5, bottom: 5 }}
                        barGap={2}
                        barCategoryGap="30%"
                      >
                        <CartesianGrid
                          strokeDasharray="3 3"
                          vertical={false}
                          stroke="hsl(214, 18%, 90%)"
                        />
                        <XAxis
                          dataKey="section"
                          tick={{ fontSize: 10 }}
                          interval={0}
                          angle={-20}
                          textAnchor="end"
                          height={55}
                        />
                        <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
                        <Bar
                          dataKey="rojo"
                          name="Critico"
                          fill="hsl(0, 72%, 51%)"
                          radius={[3, 3, 0, 0]}
                          barSize={14}
                        />
                        <Bar
                          dataKey="amarillo"
                          name="Seguimiento"
                          fill="hsl(38, 92%, 50%)"
                          radius={[3, 3, 0, 0]}
                          barSize={14}
                        />
                        <Legend
                          verticalAlign="top"
                          height={30}
                          formatter={(value: string) => (
                            <span className="text-xs text-muted-foreground">
                              {value}
                            </span>
                          )}
                        />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

{/* Student list */}
              <Card className="shadow-sm">
                <CardHeader className="pb-3">
                  <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <CardTitle className="text-sm font-semibold text-card-foreground">
                      Listado de estudiantes
                    </CardTitle>

{/* Search and filter */}
                    <div className="flex items-center gap-3">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                        <Input
                          placeholder="Buscar por nombre o DNI..."
                          className="pl-9 w-[260px] h-9 text-sm"
                          value={searchQuery}
                          onChange={(e) => setSearchQuery(e.target.value)}
                        />
                      </div>
                      <Select
                        value={riskFilter}
                        onValueChange={setRiskFilter}
                      >
                        <SelectTrigger className="w-[160px] h-9 text-xs">
                          <SelectValue placeholder="Nivel de riesgo" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="todos">
                            Todos los niveles
                          </SelectItem>
                          <SelectItem value="rojo">
                            Accion inmediata
                          </SelectItem>
                          <SelectItem value="amarillo">Seguimiento</SelectItem>
                          <SelectItem value="verde">Sin riesgo</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="p-0">
                  {/* Risk legend */}
                  <div className="flex items-center gap-6 px-6 pb-4">
                    <div className="flex items-center gap-2">
                      <div className="w-2.5 h-2.5 rounded-full bg-red-500" />
                      <span className="text-xs text-muted-foreground">
                        Accion inmediata
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-2.5 h-2.5 rounded-full bg-amber-500" />
                      <span className="text-xs text-muted-foreground">
                        Seguimiento
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                      <span className="text-xs text-muted-foreground">
                        Sin riesgo
                      </span>
                    </div>
                  </div>

<div className="overflow-x-auto">
                    <Table>
                      <TableHeader>
                        <TableRow className="bg-muted/50 hover:bg-muted/50">
                          <TableHead className="text-xs font-semibold text-muted-foreground w-[3px] p-0">
                            <span className="sr-only">Indicador de riesgo</span>
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground">
                            Estudiante
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground">
                            DNI
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground">
                            Ano / Division
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground">
                            Turno
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground text-center">
                            Riesgo
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground text-center">
                            Inasist.
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground text-center">
                            Mat. Pend.
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground text-center">
                            Flags
                          </TableHead>
                          <TableHead className="text-xs font-semibold text-muted-foreground w-[60px]">
                            <span className="sr-only">Acciones</span>
                          </TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {filteredStudents.map((student) => {
                          const rowBorderColor =
                            student.riesgo === "rojo"
                              ? "bg-red-500"
                              : student.riesgo === "amarillo"
                                ? "bg-amber-500"
                                : "bg-emerald-500"
                          const rowBg =
                            student.riesgo === "rojo"
                              ? "bg-red-50/40"
                              : student.riesgo === "amarillo"
                                ? "bg-amber-50/30"
                                : ""

return (
                            <TableRow
                              key={student.id}
                              className={`${rowBg} hover:bg-muted/30`}
                            >
                              <TableCell className="p-0 w-[3px]">
                                <div
                                  className={`w-[3px] h-full min-h-[52px] ${rowBorderColor}`}
                                />
                              </TableCell>
                              <TableCell>
                                <div className="flex flex-col">
                                  <span className="text-sm font-medium text-foreground">
                                    {student.apellido}
                                  </span>
                                  <span className="text-xs text-muted-foreground">
                                    {student.nombre}
                                  </span>
                                </div>
                              </TableCell>
                              <TableCell className="text-sm text-muted-foreground font-mono">
                                {student.documento}
                              </TableCell>
                              <TableCell className="text-sm text-foreground">
                                {student.ano}{" "}
                                <span className="text-muted-foreground">
                                  / {student.division}
                                </span>
                              </TableCell>
                              <TableCell className="text-sm text-muted-foreground">
                                {student.turno}
                              </TableCell>
                              <TableCell className="text-center">
                                <RiskBadge level={student.riesgo} />
                              </TableCell>
                              <TableCell className="text-center">
                                <span
                                  className={`text-sm font-mono font-medium ${
                                    student.inasistencias >= 7
                                      ? "text-red-600"
                                      : student.inasistencias >= 3
                                        ? "text-amber-600"
                                        : "text-foreground"
                                  }`}
                                >
                                  {student.inasistencias.toFixed(1)}
                                </span>
                              </TableCell>
                              <TableCell className="text-center">
                                <span
                                  className={`text-sm font-mono font-medium ${
                                    student.materiasPend >= 3
                                      ? "text-red-600"
                                      : student.materiasPend >= 2
                                        ? "text-amber-600"
                                        : "text-foreground"
                                  }`}
                                >
                                  {student.materiasPend}
                                </span>
                              </TableCell>
                              <TableCell className="text-center">
                                <div className="flex items-center justify-center gap-1.5">
                                  {student.sobreedad && (
                                    <Tooltip>
                                      <TooltipTrigger>
                                        <Badge
                                          variant="outline"
                                          className="text-[10px] px-1.5 py-0 border-orange-300 text-orange-600 bg-orange-50 hover:bg-orange-50"
                                        >
                                          SE
                                        </Badge>
                                      </TooltipTrigger>
                                      <TooltipContent>
                                        Sobreedad
                                      </TooltipContent>
                                    </Tooltip>
                                  )}
                                  {student.repitente && (
                                    <Tooltip>
                                      <TooltipTrigger>
                                        <Badge
                                          variant="outline"
                                          className="text-[10px] px-1.5 py-0 border-rose-300 text-rose-600 bg-rose-50 hover:bg-rose-50"
                                        >
                                          RE
                                        </Badge>
                                      </TooltipTrigger>
                                      <TooltipContent>
                                        Repitente
                                      </TooltipContent>
                                    </Tooltip>
                                  )}
                                  {!student.sobreedad && !student.repitente && (
                                    <span className="text-xs text-muted-foreground">
                                      -
                                    </span>
                                  )}
                                </div>
                              </TableCell>
                              <TableCell>
                                <Tooltip>
                                  <TooltipTrigger asChild>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      className="h-8 w-8 p-0 text-primary"
                                    >
                                      <Eye className="h-4 w-4" />
                                      <span className="sr-only">
                                        Ver detalle de {student.apellido}
                                      </span>
                                    </Button>
                                  </TooltipTrigger>
                                  <TooltipContent>Ver detalle</TooltipContent>
                                </Tooltip>
                              </TableCell>
                            </TableRow>
                          )
                        })}
                      </TableBody>
                    </Table>
                  </div>

{/* Pagination */}
                  <div className="flex items-center justify-between px-6 py-4 border-t border-border">
                    <p className="text-xs text-muted-foreground">
                      Mostrando {filteredStudents.length} de{" "}
                      {studentsData.length} estudiantes
                    </p>
                    <div className="flex items-center gap-1">
                      <Button
                        variant="outline"
                        size="sm"
                        className="h-8 w-8 p-0"
                        disabled={currentPage === 1}
                        onClick={() =>
                          setCurrentPage(Math.max(1, currentPage - 1))
                        }
                      >
                        <ChevronLeft className="h-4 w-4" />
                        <span className="sr-only">Pagina anterior</span>
                      </Button>
                      {[1, 2, 3].map((page) => (
                        <Button
                          key={page}
                          variant={currentPage === page ? "default" : "outline"}
                          size="sm"
                          className="h-8 w-8 p-0 text-xs"
                          onClick={() => setCurrentPage(page)}
                        >
                          {page}
                        </Button>
                      ))}
                      <span className="text-xs text-muted-foreground px-1">
                        ...
                      </span>
                      <Button
                        variant="outline"
                        size="sm"
                        className="h-8 px-2 text-xs"
                      >
                        325
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        className="h-8 w-8 p-0"
                        onClick={() => setCurrentPage(currentPage + 1)}
                      >
                        <ChevronRight className="h-4 w-4" />
                        <span className="sr-only">Pagina siguiente</span>
                      </Button>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="text-xs text-muted-foreground">
                        Resultados:
                      </span>
                      <Select defaultValue="8">
                        <SelectTrigger className="w-[65px] h-8 text-xs">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="5">5</SelectItem>
                          <SelectItem value="8">8</SelectItem>
                          <SelectItem value="10">10</SelectItem>
                          <SelectItem value="25">25</SelectItem>
                          <SelectItem value="50">50</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </main>
        </div>
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import SataeDashboard from "@/components/satae-dashboard"

export default function Page() {
  return <SataeDashboard />
}</article></body></html>