[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.11 0.01 240); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0.01 240); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.13 0.01 240); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.18 145); --primary-foreground: oklch(0.12 0 0); --secondary: oklch(0.22 0.01 240); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.20 0.01 240); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.65 0.18 145); --accent-foreground: oklch(0.12 0 0); --destructive: oklch(0.60 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.25 0.01 240); --input: oklch(0.20 0.01 240); --ring: oklch(0.65 0.18 145); --chart-1: oklch(0.65 0.18 145); --chart-2: oklch(0.60 0.15 200); --chart-3: oklch(0.70 0.20 60); --chart-4: oklch(0.55 0.18 280); --chart-5: oklch(0.60 0.22 25); --radius: 0.5rem; --sidebar: oklch(0.09 0.01 240); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.18 145); --sidebar-primary-foreground: oklch(0.12 0 0); --sidebar-accent: oklch(0.18 0.01 240); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0.01 240); --sidebar-ring: oklch(0.65 0.18 145); --warning: oklch(0.75 0.18 60); --warning-foreground: oklch(0.15 0 0); --success: oklch(0.65 0.18 145); --success-foreground: oklch(0.12 0 0); } .dark { --background: oklch(0.11 0.01 240); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0.01 240); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.13 0.01 240); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.65 0.18 145); --primary-foreground: oklch(0.12 0 0); --secondary: oklch(0.22 0.01 240); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.20 0.01 240); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.65 0.18 145); --accent-foreground: oklch(0.12 0 0); --destructive: oklch(0.60 0.22 25); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.25 0.01 240); --input: oklch(0.20 0.01 240); --ring: oklch(0.65 0.18 145); --chart-1: oklch(0.65 0.18 145); --chart-2: oklch(0.60 0.15 200); --chart-3: oklch(0.70 0.20 60); --chart-4: oklch(0.55 0.18 280); --chart-5: oklch(0.60 0.22 25); --sidebar: oklch(0.09 0.01 240); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.65 0.18 145); --sidebar-primary-foreground: oklch(0.12 0 0); --sidebar-accent: oklch(0.18 0.01 240); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.22 0.01 240); --sidebar-ring: oklch(0.65 0.18 145); --warning: oklch(0.75 0.18 60); --warning-foreground: oklch(0.15 0 0); --success: oklch(0.65 0.18 145); --success-foreground: oklch(0.12 0 0); } @theme inline { --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* PWA Mobile Optimizations */ html, body { overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Prevent pull-to-refresh on mobile */ body { overflow-x: hidden; } /* Active states for touch feedback */ .touch-active { @apply transition-all duration-100; } .touch-active:active { @apply scale-95 opacity-80; } /* Bottom nav specific */ .bottom-nav-item { @apply transition-all duration-150 ease-out; } .bottom-nav-item:active { @apply scale-90; } /* Scrollable areas with contained overscroll */ .scroll-container { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* High z-index for navigation elements */ .nav-overlay { z-index: 9999; } /* Safe area padding for mobile devices */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 1rem); } } /* Camera view styling */ .camera-container { position: relative; z-index: 1; } /* Ensure modals appear above camera */ [data-radix-dialog-overlay], [data-radix-dialog-content] { z-index: 9998 !important; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata, Viewport } from 'next' import { Inter } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }); export const metadata: Metadata = { title: 'FireDetect Pro - Gestión de Sistemas de Detección de Incendios', description: 'PWA profesional para gestión y mantenimiento de sistemas de detección de incendios. Soporte para INIM, NOTIFIER, APOLLO, ESSER, ZETTLER y MORLEY.', generator: 'v0.app', manifest: '/manifest.json', appleWebApp: { capable: true, statusBarStyle: 'black-translucent', title: 'FireDetect Pro', }, 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 const viewport: Viewport = { themeColor: '#1a1a2e', width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [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": "16.0.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", "swr": "2.3.8" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/types.ts" isMerged="true" // Tipos globales para la aplicación FireDetect Pro import type { DeviceTypeKey } from './manufacturers-data'; export interface Equipment { id: string; projectId: string; brand: string; // ID del fabricante model: string; // ID del modelo deviceType: DeviceTypeKey; location: string; loop: number; address: number; fullAddress: string; // Dirección formateada según el fabricante serialNumber: string; status: 'pending' | 'inspected' | 'fault' | 'replaced'; notes?: string; lastInspection?: string; createdAt: string; updatedAt: string; } export interface Project { id: string; name: string; client: string; location: string; brand: string; // ID del fabricante principal description?: string; createdAt: string; updatedAt: string; equipmentCount: number; inspectedCount: number; } export interface InspectionReport { id: string; projectId: string; projectName: string; client: string; date: string; technician: string; equipmentList: Equipment[]; summary: { total: number; inspected: number; faults: number; replaced: number; pending: number; }; notes?: string; } export type ViewMode = 'dashboard' | 'projects' | 'equipment' | 'scanner' | 'pdf-reader' | 'reports'; [V0_FILE]typescript:file="lib/manufacturers-data.ts" isMerged="true" // Base de datos de fabricantes de sistemas de detección de incendios export interface TechnicalSpecs { voltage?: string; current?: string; currentStandby?: string; currentAlarm?: string; temperature?: string; humidity?: string; ip?: string; dimensions?: string; weight?: string; certifications?: string[]; } export interface ConnectionDiagram { description: string; terminals: { name: string; label: string; type: 'input' | 'output' | 'power' | 'ground'; position: 'left' | 'right' | 'top' | 'bottom'; }[]; notes?: string; addressingMethod?: string; } export interface ManufacturerModel { id: string; name: string; type: 'detector' | 'pulsador' | 'sirena' | 'modulo' | 'central'; specs?: TechnicalSpecs; pdfUrl?: string; diagram?: ConnectionDiagram; } // Biblioteca completa de dispositivos con especificaciones técnicas reales export const DEVICE_LIBRARY: Record = { bosch: { brand: 'BOSCH', models: [ { id: 'fad-425-o-r', name: 'FAD-425-O-R Detector Óptico', type: 'detector', specs: { voltage: '12-33 VDC', currentStandby: '200µA', currentAlarm: '6mA', temperature: '-20°C a +60°C', humidity: '10-93% RH', ip: 'IP40', dimensions: 'Ø113 x 55mm', certifications: ['EN54-7', 'VdS', 'CPD'] }, diagram: { description: 'Bornes L1/L2 entrada, b1/b2 salida', terminals: [ { name: 'L1', label: 'Lazo Entrada (+)', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo Entrada (-)', type: 'input', position: 'left' }, { name: 'b1', label: 'Lazo Salida (+)', type: 'output', position: 'right' }, { name: 'b2', label: 'Lazo Salida (-)', type: 'output', position: 'right' }, ], addressingMethod: 'Direccionamiento por software (FSP-5000)', notes: 'Compatible con centrales FPA-5000 y FPA-1200' }, pdfUrl: 'https://commerce.boschsecurity.com/es/es/FAD-425-O-R/p/13775/' }, { id: 'fpd-7024', name: 'FPD-7024 Central de Incendios', type: 'central', specs: { voltage: '230 VAC / 24 VDC', temperature: '0°C a +49°C', humidity: '5-93% RH', dimensions: '437 x 318 x 108mm', certifications: ['EN54-2', 'EN54-4', 'UL864'] }, diagram: { description: 'Panel de control con lazos SLC', terminals: [ { name: 'SLC+', label: 'Lazo SLC (+)', type: 'output', position: 'right' }, { name: 'SLC-', label: 'Lazo SLC (-)', type: 'output', position: 'right' }, { name: 'AC', label: 'Alimentación AC', type: 'power', position: 'left' }, { name: 'BAT', label: 'Baterías 24V', type: 'power', position: 'left' }, ], addressingMethod: 'Hasta 318 dispositivos por lazo', notes: 'Soporta hasta 2 lazos' }, pdfUrl: 'https://commerce.boschsecurity.com/es/es/FPD-7024/p/15876/' } ] }, notifier: { brand: 'NOTIFIER', models: [ { id: 'fsp-951', name: 'FSP-951 Detector Fotoeléctrico', type: 'detector', specs: { voltage: '15-32 VDC', currentStandby: '45µA', currentAlarm: '6mA', temperature: '-20°C a +70°C', humidity: '10-93% RH', ip: 'IP40', dimensions: 'Ø102 x 51mm', certifications: ['EN54-7', 'UL268', 'FM'] }, diagram: { description: 'Bornes 1(-), 2(+) entrada/salida', terminals: [ { name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }, ], addressingMethod: 'Direccionamiento por selectores rotativos 01-159', notes: 'Dos selectores de 0-9 para configurar dirección. Compatible con FlashScan y CLIP.' }, pdfUrl: 'https://www.notifier.com/en-us/products/fsp-951' }, { id: 'fst-951', name: 'FST-951 Detector Térmico', type: 'detector', specs: { voltage: '15-32 VDC', currentStandby: '45µA', currentAlarm: '6mA', temperature: '-20°C a +70°C', humidity: '10-93% RH', ip: 'IP40', dimensions: 'Ø102 x 51mm', certifications: ['EN54-5', 'UL521', 'FM'] }, diagram: { description: 'Bornes 1(-), 2(+) entrada/salida', terminals: [ { name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }, ], addressingMethod: 'Direccionamiento por selectores rotativos 01-159', notes: 'Detector termovelocimétrico ROR + fijo 57°C' }, pdfUrl: 'https://www.notifier.com/en-us/products/fst-951' } ] }, apollo: { brand: 'APOLLO', models: [ { id: 'discovery-optical', name: 'Discovery Óptico 58000-600', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '220µA', currentAlarm: '3.5mA', temperature: '-20°C a +60°C', humidity: '10-93% RH', ip: 'IP23D', dimensions: 'Ø100 x 42mm', certifications: ['EN54-7', 'CPR', 'LPCB'] }, diagram: { description: 'Bornes L1/L2 (entrada y salida en serie)', terminals: [ { name: 'L1', label: 'Lazo L1', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo L2', type: 'input', position: 'left' }, ], addressingMethod: 'Direccionamiento por XPERT Card (programador portátil)', notes: 'También puede programarse desde la central compatible' }, pdfUrl: 'https://www.apollo-fire.co.uk/products/discovery/optical-smoke-detector' }, { id: 'xp95-optical', name: 'XP95 Óptico 55000-600', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '300µA', currentAlarm: '4mA', temperature: '-20°C a +60°C', humidity: '0-95% RH', ip: 'IP23D', dimensions: 'Ø100 x 42mm', certifications: ['EN54-7', 'LPCB'] }, diagram: { description: 'Bornes L1/L2 (entrada y salida en serie)', terminals: [ { name: 'L1', label: 'Lazo L1', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo L2', type: 'input', position: 'left' }, ], addressingMethod: 'Direccionamiento por XPERT Card', notes: 'Protocolo analógico XP95 - dirección 1-126' }, pdfUrl: 'https://www.apollo-fire.co.uk/products/xp95/optical-smoke-detector' } ] }, hochiki: { brand: 'HOCHIKI', models: [ { id: 'aln-en', name: 'ALN-EN Detector Óptico Analógico', type: 'detector', specs: { voltage: '17-41 VDC', currentStandby: '200µA', currentAlarm: '4mA', temperature: '-10°C a +50°C', humidity: '10-93% RH', ip: 'IP43', dimensions: 'Ø102 x 48mm', certifications: ['EN54-7', 'VdS', 'CPR'] }, diagram: { description: 'Bornes 1(+) y 6(-) entrada', terminals: [ { name: '1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '6', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: '3', label: 'Remote LED (+)', type: 'output', position: 'right' }, { name: '4', label: 'Remote LED (-)', type: 'output', position: 'right' }, ], addressingMethod: 'Direccionamiento por dip-switches (1-127) o programador', notes: 'Compatible con protocolo ESP (Enhanced System Protocol)' }, pdfUrl: 'https://www.hochikieurope.com/products/aln-en' }, { id: 'atj-en', name: 'ATJ-EN Detector Térmico Analógico', type: 'detector', specs: { voltage: '17-41 VDC', currentStandby: '200µA', currentAlarm: '4mA', temperature: '-10°C a +50°C (fijo) / -10°C a +70°C (ROR)', humidity: '10-93% RH', ip: 'IP43', dimensions: 'Ø102 x 48mm', certifications: ['EN54-5', 'VdS', 'CPR'] }, diagram: { description: 'Bornes 1(+) y 6(-) entrada', terminals: [ { name: '1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '6', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: '3', label: 'Remote LED (+)', type: 'output', position: 'right' }, { name: '4', label: 'Remote LED (-)', type: 'output', position: 'right' }, ], addressingMethod: 'Direccionamiento por dip-switches (1-127)', notes: 'Clase A1R (termovelocimétrico y fijo 60°C)' }, pdfUrl: 'https://www.hochikieurope.com/products/atj-en' } ] } }; export interface AddressFormat { pattern: RegExp; example: string; description: string; maxLoop: number; maxAddress: number; } export interface Manufacturer { id: string; name: string; logo?: string; color: string; models: ManufacturerModel[]; addressFormat: AddressFormat; keywords: string[]; // Palabras clave para detección automática en PDFs } export const DEVICE_TYPES = { detector_humo: { id: 'detector_humo', label: 'Detector de Humo', icon: 'smoke', color: 'bg-slate-400 text-slate-900', }, detector_termico: { id: 'detector_termico', label: 'Detector Térmico', icon: 'thermometer', color: 'bg-amber-500 text-amber-950', }, pulsador: { id: 'pulsador', label: 'Pulsador Manual', icon: 'hand', color: 'bg-red-600 text-white', }, sirena: { id: 'sirena', label: 'Sirena', icon: 'bell', color: 'bg-orange-500 text-orange-950', }, modulo_entrada: { id: 'modulo_entrada', label: 'Módulo de Entrada', icon: 'input', color: 'bg-blue-500 text-white', }, modulo_salida: { id: 'modulo_salida', label: 'Módulo de Salida', icon: 'output', color: 'bg-emerald-500 text-emerald-950', }, } as const; export type DeviceTypeKey = keyof typeof DEVICE_TYPES; export const MANUFACTURERS: Manufacturer[] = [ { id: 'bosch', name: 'BOSCH', color: '#E20015', keywords: ['bosch', 'fad', 'fpd', 'fpa', 'fsp-5000'], addressFormat: { pattern: /^(\d{1,2})\.(\d{1,3})$/, example: '1.001', description: 'Lazo (1-2) y Dirección (1-318)', maxLoop: 2, maxAddress: 318, }, models: [ // Detectores { id: 'fad-425-o', name: 'FAD-425-O Detector Óptico', type: 'detector', specs: { voltage: '12-33 VDC', currentStandby: '200µA', currentAlarm: '6mA', temperature: '-20°C a +60°C', ip: 'IP40', certifications: ['EN54-7', 'VdS'] }, diagram: DEVICE_LIBRARY.bosch.models[0].diagram, pdfUrl: 'https://commerce.boschsecurity.com/es/es/FAD-425-O/p/13775/' }, { id: 'fad-425-ot', name: 'FAD-425-OT Óptico/Térmico', type: 'detector', specs: { voltage: '12-33 VDC', currentStandby: '200µA', currentAlarm: '6mA', temperature: '-20°C a +60°C', ip: 'IP40', certifications: ['EN54-7', 'EN54-5', 'VdS'] }, diagram: DEVICE_LIBRARY.bosch.models[0].diagram }, // Pulsadores { id: 'fmc-420rw', name: 'FMC-420RW Pulsador', type: 'pulsador', specs: { voltage: '12-33 VDC', currentStandby: '150µA', temperature: '-25°C a +70°C', ip: 'IP54', certifications: ['EN54-11'] }, diagram: { description: 'Bornes L1/L2 entrada/salida', terminals: [{ name: 'L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'FSP-5000' } }, // Módulos { id: 'flm-420-nai', name: 'FLM-420-NAI Módulo 2 Entradas', type: 'modulo', specs: { voltage: '12-33 VDC', currentStandby: '300µA', temperature: '-20°C a +60°C' }, diagram: { description: 'Bornes L1/L2 + 2 entradas supervisadas', terminals: [{ name: 'L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'IN1', label: 'Entrada 1', type: 'input', position: 'right' }, { name: 'IN2', label: 'Entrada 2', type: 'input', position: 'right' }], addressingMethod: 'FSP-5000', notes: '2 entradas para contactos NA/NC' } }, { id: 'flm-420-rhi', name: 'FLM-420-RHI Módulo Relé', type: 'modulo', specs: { voltage: '12-33 VDC', currentStandby: '350µA', temperature: '-20°C a +60°C' }, diagram: { description: 'Bornes L1/L2 + salida relé', terminals: [{ name: 'L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'NO', label: 'Relé NO', type: 'output', position: 'right' }, { name: 'NC', label: 'Relé NC', type: 'output', position: 'right' }, { name: 'COM', label: 'Común', type: 'output', position: 'right' }], addressingMethod: 'FSP-5000', notes: 'Relé de alta potencia' } }, { id: 'flm-420-o1i', name: 'FLM-420-O1I Módulo 1 Salida', type: 'modulo', specs: { voltage: '12-33 VDC', currentStandby: '280µA', temperature: '-20°C a +60°C' }, diagram: { description: 'Bornes L1/L2 + 1 salida supervisada', terminals: [{ name: 'L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: 'L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'OUT', label: 'Salida', type: 'output', position: 'right' }], addressingMethod: 'FSP-5000' } }, // Centrales { id: 'fpd-7024', name: 'FPD-7024 Central', type: 'central', specs: { voltage: '230 VAC / 24 VDC', temperature: '0°C a +49°C', certifications: ['EN54-2', 'EN54-4'] }, diagram: DEVICE_LIBRARY.bosch.models[1].diagram }, ], }, { id: 'hochiki', name: 'HOCHIKI', color: '#003366', keywords: ['hochiki', 'aln', 'atj', 'esp', 'ekho'], addressFormat: { pattern: /^(\d{1,2})-(\d{1,3})$/, example: '1-001', description: 'Lazo (1-4) y Dirección (1-127)', maxLoop: 4, maxAddress: 127, }, models: [ { id: 'aln-en', name: 'ALN-EN Detector Óptico', type: 'detector', specs: { voltage: '17-41 VDC', currentStandby: '200µA', currentAlarm: '4mA', temperature: '-10°C a +50°C', ip: 'IP43', certifications: ['EN54-7', 'VdS', 'CPR'] }, diagram: DEVICE_LIBRARY.hochiki.models[0].diagram, pdfUrl: 'https://www.hochikieurope.com/products/aln-en' }, { id: 'atj-en', name: 'ATJ-EN Detector Térmico', type: 'detector', specs: { voltage: '17-41 VDC', currentStandby: '200µA', currentAlarm: '4mA', temperature: '-10°C a +70°C', ip: 'IP43', certifications: ['EN54-5', 'VdS', 'CPR'] }, diagram: DEVICE_LIBRARY.hochiki.models[1].diagram, pdfUrl: 'https://www.hochikieurope.com/products/atj-en' }, { id: 'hrp-en', name: 'HRP-EN Pulsador', type: 'pulsador', specs: { voltage: '17-41 VDC', currentStandby: '200µA', temperature: '-25°C a +70°C', ip: 'IP67', certifications: ['EN54-11'] } }, { id: 'chq-mrc2', name: 'CHQ-MRC2 Módulo Relé', type: 'modulo', specs: { voltage: '17-41 VDC', currentStandby: '300µA', temperature: '-10°C a +50°C' } }, ], }, { id: 'inim', name: 'INIM', color: '#00A651', keywords: ['inim', 'enea', 'iris', 'smartline', 'previdia', 'smartloop', 'ed100', 'ed200', 'ed300'], addressFormat: { pattern: /^L(\d{1,2})-D(\d{1,3})$/, example: 'L1-D001', description: 'Lazo (1-8) y Dirección (1-240)', maxLoop: 8, maxAddress: 240, }, models: [ // Detectores { id: 'ed100', name: 'ED100 Detector Óptico (Humo)', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '85µA', currentAlarm: '5mA', temperature: '-10°C a +55°C', ip: 'IP43', dimensions: 'Ø100 x 42mm', certifications: ['EN54-7', 'CPR'] }, diagram: { description: 'Bornes +L1/-L2 entrada/salida en serie (OpenLoop)', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'Direccionamiento por software SmartLetUSee', notes: 'Protocolo OpenLoop - Compatible con centrales Previdia y SmartLoop' }, pdfUrl: 'https://www.inim.biz/products/ed100' }, { id: 'ed200', name: 'ED200 Detector Multicriterio', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '85µA', currentAlarm: '5mA', temperature: '-10°C a +70°C', ip: 'IP43', dimensions: 'Ø100 x 42mm', certifications: ['EN54-5', 'EN54-7', 'CPR'] }, diagram: { description: 'Bornes +L1/-L2 entrada/salida en serie (OpenLoop)', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'Direccionamiento por software SmartLetUSee', notes: 'Detector óptico/térmico combinado' }, pdfUrl: 'https://www.inim.biz/products/ed200' }, { id: 'ed300', name: 'ED300 Detector Térmico', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '85µA', currentAlarm: '5mA', temperature: '-10°C a +70°C', ip: 'IP43', dimensions: 'Ø100 x 42mm', certifications: ['EN54-5', 'CPR'] }, diagram: { description: 'Bornes +L1/-L2 entrada/salida en serie (OpenLoop)', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'Direccionamiento por software SmartLetUSee', notes: 'Detector termovelocimétrico clase A1R' }, pdfUrl: 'https://www.inim.biz/products/ed300' }, { id: 'enea', name: 'Enea Detector Óptico', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '100µA', temperature: '-10°C a +55°C', ip: 'IP43', certifications: ['EN54-7'] }, diagram: { description: 'Bornes +L1/-L2 (OpenLoop)', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'SmartLetUSee' }, pdfUrl: 'https://www.inim.biz/products/enea' }, // Pulsadores { id: 'ec0010', name: 'EC0010 Pulsador Manual', type: 'pulsador', specs: { voltage: '17-28 VDC', currentStandby: '100µA', temperature: '-25°C a +70°C', ip: 'IP24D', certifications: ['EN54-11'] }, diagram: { description: 'Bornes +L1/-L2 entrada/salida en serie', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'SmartLetUSee', notes: 'Pulsador de alarma rearmable' } }, { id: 'ec100', name: 'EC100 Pulsador', type: 'pulsador', specs: { voltage: '17-28 VDC', currentStandby: '100µA', temperature: '-25°C a +70°C', ip: 'IP24D', certifications: ['EN54-11'] }, diagram: { description: 'Bornes +L1/-L2', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'SmartLetUSee' } }, // Sirenas { id: 'es100', name: 'ES100 Sirena de Lazo', type: 'sirena', specs: { voltage: '17-28 VDC', currentStandby: '200µA', currentAlarm: '10mA', temperature: '-10°C a +55°C', ip: 'IP21C', certifications: ['EN54-3'] }, diagram: { description: 'Bornes +L1/-L2 entrada', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }], addressingMethod: 'SmartLetUSee', notes: 'Sirena acústica alimentada por lazo' } }, { id: 'es200', name: 'ES200 Sirena con Aislador', type: 'sirena', specs: { voltage: '17-28 VDC', currentStandby: '250µA', currentAlarm: '12mA', temperature: '-10°C a +55°C', ip: 'IP21C', certifications: ['EN54-3', 'EN54-17'] }, diagram: { description: 'Bornes +L1/-L2 con aislador integrado', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'ISO', label: 'Aislador', type: 'output', position: 'right' }], addressingMethod: 'SmartLetUSee', notes: 'Incluye aislador de cortocircuito' } }, // Módulos { id: 'em312sr', name: 'EM312SR Módulo E/S (2 in / 1 out)', type: 'modulo', specs: { voltage: '17-28 VDC', currentStandby: '3mA', temperature: '-10°C a +55°C' }, diagram: { description: 'Bornes L1/L2 + 2 entradas + 1 salida relé', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'IN1', label: 'Entrada 1', type: 'input', position: 'right' }, { name: 'IN2', label: 'Entrada 2', type: 'input', position: 'right' }, { name: 'REL', label: 'Relé Salida', type: 'output', position: 'right' }], addressingMethod: 'SmartLetUSee', notes: '2 entradas supervisadas + 1 salida relé' } }, { id: 'em110', name: 'EM110 Módulo de Entrada', type: 'modulo', specs: { voltage: '17-28 VDC', currentStandby: '2mA', temperature: '-10°C a +55°C' }, diagram: { description: 'Bornes L1/L2 + 1 entrada supervisada', terminals: [{ name: '+L1', label: 'Lazo (+)', type: 'input', position: 'left' }, { name: '-L2', label: 'Lazo (-)', type: 'input', position: 'left' }, { name: 'IN', label: 'Entrada', type: 'input', position: 'right' }], addressingMethod: 'SmartLetUSee', notes: 'Módulo de entrada para contactos secos' } }, // Centrales { id: 'smartline', name: 'SmartLine Central 2 Lazos', type: 'central', specs: { voltage: '230 VAC', temperature: '-5°C a +40°C' } }, { id: 'previdia', name: 'Previdia Central Compacta', type: 'central', specs: { voltage: '230 VAC', temperature: '-5°C a +40°C' } }, { id: 'smartloop', name: 'SmartLoop Central Modular', type: 'central', specs: { voltage: '230 VAC', temperature: '-5°C a +40°C' } }, ], }, { id: 'notifier', name: 'NOTIFIER', color: '#E31937', keywords: ['notifier', 'opal', 'id50', 'id60', 'id3000', 'nfs', 'fsp', 'fst'], addressFormat: { pattern: /^SLC(\d)-(\d{1,3})$/, example: 'SLC1-001', description: 'SLC (1-4) y Dirección (1-159)', maxLoop: 4, maxAddress: 159, }, models: [ // Detectores { id: 'fsp-951', name: 'FSP-951 Fotoeléctrico', type: 'detector', specs: { voltage: '15-32 VDC', currentStandby: '45µA', currentAlarm: '6mA', temperature: '-20°C a +70°C', ip: 'IP40', dimensions: 'Ø102 x 51mm', certifications: ['EN54-7', 'UL268', 'FM'] }, diagram: DEVICE_LIBRARY.notifier.models[0].diagram, pdfUrl: 'https://www.notifier.com/en-us/products/fsp-951' }, { id: 'fst-951', name: 'FST-951 Térmico', type: 'detector', specs: { voltage: '15-32 VDC', currentStandby: '45µA', currentAlarm: '6mA', temperature: '-20°C a +70°C', ip: 'IP40', dimensions: 'Ø102 x 51mm', certifications: ['EN54-5', 'UL521', 'FM'] }, diagram: DEVICE_LIBRARY.notifier.models[1].diagram, pdfUrl: 'https://www.notifier.com/en-us/products/fst-951' }, { id: 'opal', name: 'Serie Opal', type: 'detector', specs: { voltage: '15-32 VDC', currentStandby: '300µA', temperature: '-20°C a +60°C', ip: 'IP40', certifications: ['EN54-7', 'UL'] }, pdfUrl: 'https://www.notifier.com/products/opal' }, // Pulsadores { id: 'nbg12lx', name: 'NBG-12LX Pulsador', type: 'pulsador', specs: { voltage: '15-32 VDC', currentStandby: '250µA', temperature: '-20°C a +60°C', ip: 'IP24', certifications: ['EN54-11'] }, diagram: { description: 'Bornes 1(-), 2(+) SLC', terminals: [{ name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }], addressingMethod: 'Selectores rotativos 01-159' } }, // Módulos { id: 'mmf-300', name: 'MMF-300 Módulo Monitor FlashScan', type: 'modulo', specs: { voltage: '15-32 VDC', currentStandby: '250µA', temperature: '-20°C a +70°C' }, diagram: { description: 'Bornes 1(-)/2(+) SLC + entrada supervisada', terminals: [{ name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }, { name: 'IN+', label: 'Entrada (+)', type: 'input', position: 'right' }, { name: 'IN-', label: 'Entrada (-)', type: 'input', position: 'right' }], addressingMethod: 'Selectores rotativos 01-159', notes: 'Módulo monitor de 1 entrada' } }, { id: 'mon-100', name: 'MON-100 Módulo Monitor', type: 'modulo', specs: { voltage: '15-32 VDC', currentStandby: '200µA', temperature: '-20°C a +70°C' }, diagram: { description: 'Bornes 1(-)/2(+) SLC + entrada', terminals: [{ name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }, { name: 'MON', label: 'Monitor', type: 'input', position: 'right' }], addressingMethod: 'Selectores rotativos 01-159', notes: 'Para detección convencional' } }, { id: 'fcm-1', name: 'FCM-1 Módulo Control', type: 'modulo', specs: { voltage: '15-32 VDC', currentStandby: '350µA', temperature: '-20°C a +60°C' }, diagram: { description: 'Bornes 1(-)/2(+) SLC + salida relé', terminals: [{ name: '1', label: 'SLC (-)', type: 'input', position: 'left' }, { name: '2', label: 'SLC (+)', type: 'input', position: 'left' }, { name: 'NO', label: 'Relé NO', type: 'output', position: 'right' }, { name: 'COM', label: 'Común', type: 'output', position: 'right' }], addressingMethod: 'Selectores rotativos 01-159', notes: 'Módulo de control con relé' } }, // Centrales { id: 'id50', name: 'ID50 Central 2 Lazos', type: 'central', specs: { voltage: '230 VAC', temperature: '0°C a +40°C' } }, { id: 'id60', name: 'ID60 Central 4 Lazos', type: 'central', specs: { voltage: '230 VAC', temperature: '0°C a +40°C' } }, { id: 'id3000', name: 'ID3000 Central Modular', type: 'central', specs: { voltage: '230 VAC', temperature: '0°C a +40°C' } }, { id: 'nfs320', name: 'NFS-320 Central', type: 'central', specs: { voltage: '120/230 VAC', temperature: '0°C a +49°C' } }, ], }, { id: 'apollo', name: 'APOLLO', color: '#0055A4', keywords: ['apollo', 'discovery', 'xp95', 'orbis', 'soteria', 'xpander'], addressFormat: { pattern: /^(\d{1,2}):(\d{1,3})$/, example: '1:001', description: 'Lazo (1-8) y Dirección (1-126)', maxLoop: 8, maxAddress: 126, }, models: [ { id: 'discovery-optical', name: 'Discovery Óptico 58000-600', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '220µA', currentAlarm: '3.5mA', temperature: '-20°C a +60°C', ip: 'IP23D', dimensions: 'Ø100 x 42mm', certifications: ['EN54-7', 'CPR', 'LPCB'] }, diagram: DEVICE_LIBRARY.apollo.models[0].diagram, pdfUrl: 'https://www.apollo-fire.co.uk/products/discovery/optical-smoke-detector' }, { id: 'xp95-optical', name: 'XP95 Óptico 55000-600', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '300µA', currentAlarm: '4mA', temperature: '-20°C a +60°C', ip: 'IP23D', dimensions: 'Ø100 x 42mm', certifications: ['EN54-7', 'LPCB'] }, diagram: DEVICE_LIBRARY.apollo.models[1].diagram, pdfUrl: 'https://www.apollo-fire.co.uk/products/xp95/optical-smoke-detector' }, { id: 'discovery-heat', name: 'Discovery Térmico 58000-400', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '220µA', currentAlarm: '3.5mA', temperature: '-20°C a +60°C', ip: 'IP23D', dimensions: 'Ø100 x 42mm', certifications: ['EN54-5', 'CPR'] }, diagram: DEVICE_LIBRARY.apollo.models[0].diagram }, { id: 'orbis', name: 'Orbis', type: 'detector', specs: { voltage: '9-33 VDC', currentStandby: '45µA', temperature: '-10°C a +50°C', ip: 'IP21C' } }, { id: 'soteria', name: 'Soteria', type: 'detector', specs: { voltage: '17-28 VDC', currentStandby: '200µA', temperature: '-20°C a +60°C', ip: 'IP44', certifications: ['EN54-7', 'EN54-5'] } }, { id: 'xpander', name: 'XPander Wireless', type: 'detector', specs: { voltage: '3V Lithium', currentStandby: '15µA', temperature: '-10°C a +40°C', ip: 'IP65' } }, { id: '55100-908', name: '55100-908 Pulsador MCP', type: 'pulsador', specs: { voltage: '17-28 VDC', currentStandby: '300µA', temperature: '-20°C a +60°C', ip: 'IP24D', certifications: ['EN54-11'] } }, { id: '55000-847', name: '55000-847 Módulo E/S', type: 'modulo', specs: { voltage: '17-28 VDC', currentStandby: '400µA', temperature: '-20°C a +60°C' } }, ], }, { id: 'esser', name: 'ESSER', color: '#FF6B00', keywords: ['esser', 'iq8', 'flexes', 'esserbus', '8000', 'transponder'], addressFormat: { pattern: /^(\d{1,2})\.(\d{1,3})$/, example: '1.001', description: 'Línea (1-32) y Dirección (1-127)', maxLoop: 32, maxAddress: 127, }, models: [ { id: 'iq8quad', name: 'IQ8Quad', type: 'detector' }, { id: 'iq8', name: 'IQ8', type: 'detector' }, { id: 'flexes', name: 'FlexES', type: 'central' }, { id: 'esserbus', name: 'ESSER by Honeywell 8000', type: 'central' }, { id: '802371', name: '802371 Detector Óptico', type: 'detector' }, { id: '802374', name: '802374 Detector Térmico', type: 'detector' }, { id: '804905', name: '804905 Pulsador', type: 'pulsador' }, { id: '808623', name: '808623 Módulo E/S', type: 'modulo' }, ], }, { id: 'zettler', name: 'ZETTLER', color: '#00539B', keywords: ['zettler', 'profile', 'zx', 'vigilon', 'addressable'], addressFormat: { pattern: /^Z(\d)-(\d{1,3})$/, example: 'Z1-001', description: 'Zona (1-16) y Dirección (1-125)', maxLoop: 16, maxAddress: 125, }, models: [ { id: 'profile', name: 'Profile Flexible', type: 'detector' }, { id: 'zx5e', name: 'ZX5e', type: 'central' }, { id: 'vigilon', name: 'Vigilon', type: 'central' }, { id: 'zp755-2', name: 'ZP755-2 Detector Óptico', type: 'detector' }, { id: 'zp730-2', name: 'ZP730-2 Detector Térmico', type: 'detector' }, { id: 'zp786-2', name: 'ZP786-2 Pulsador', type: 'pulsador' }, { id: 'zp740-2', name: 'ZP740-2 Módulo', type: 'modulo' }, ], }, { id: 'morley', name: 'MORLEY', color: '#8B0000', keywords: ['morley', 'horizon', 'dxc', 'ias', 'mi-'], addressFormat: { pattern: /^L(\d)-(\d{1,3})$/, example: 'L1-001', description: 'Lazo (1-4) y Dirección (1-159)', maxLoop: 4, maxAddress: 159, }, models: [ { id: 'horizon', name: 'Horizon', type: 'central' }, { id: 'dxc', name: 'DXc', type: 'central' }, { id: 'ias', name: 'IAS', type: 'central' }, { id: 'mi-ptse-s2', name: 'MI-PTSE-S2 Detector Óptico', type: 'detector' }, { id: 'mi-rhse-s2', name: 'MI-RHSE-S2 Detector Térmico', type: 'detector' }, { id: 'mi-mcp', name: 'MI-MCP Pulsador', type: 'pulsador' }, { id: 'mi-d2cmo', name: 'MI-D2CMO Módulo', type: 'modulo' }, ], }, ]; export function getManufacturerById(id: string): Manufacturer | undefined { return MANUFACTURERS.find((m) => m.id === id); } export function detectManufacturerFromText(text: string): Manufacturer | null { const lowerText = text.toLowerCase(); for (const manufacturer of MANUFACTURERS) { for (const keyword of manufacturer.keywords) { if (lowerText.includes(keyword.toLowerCase())) { return manufacturer; } } } return null; } export function validateAddress(manufacturerId: string, address: string): boolean { const manufacturer = getManufacturerById(manufacturerId); if (!manufacturer) return false; return manufacturer.addressFormat.pattern.test(address); } export function formatAddress(manufacturerId: string, loop: number, address: number): string { const manufacturer = getManufacturerById(manufacturerId); if (!manufacturer) return ''; const paddedAddress = address.toString().padStart(3, '0'); switch (manufacturerId) { case 'inim': return `L${loop}-D${paddedAddress}`; case 'notifier': return `SLC${loop}-${paddedAddress}`; case 'apollo': return `${loop}:${paddedAddress}`; case 'esser': return `${loop}.${paddedAddress}`; case 'zettler': return `Z${loop}-${paddedAddress}`; case 'morley': return `L${loop}-${paddedAddress}`; default: return `${loop}-${address}`; } } [V0_FILE]typescriptreact:file="components/device-icons.tsx" isMerged="true" "use client"; import type { DeviceTypeKey } from "@/lib/manufacturers-data"; import { DEVICE_TYPES } from "@/lib/manufacturers-data"; import { cn } from "@/lib/utils"; interface DeviceIconProps { type: DeviceTypeKey; size?: "sm" | "md" | "lg"; className?: string; } export function DeviceIcon({ type, size = "md", className }: DeviceIconProps) { const deviceInfo = DEVICE_TYPES[type]; const sizeClasses = { sm: "w-6 h-6 text-xs", md: "w-8 h-8 text-sm", lg: "w-12 h-12 text-base", }; const iconSizes = { sm: 14, md: 18, lg: 24, }; const IconSvg = () => { const iconSize = iconSizes[size]; switch (type) { case "detector_humo": return ( ); case "detector_termico": return ( ); case "pulsador": return ( ); case "sirena": return ( ); case "modulo_entrada": return ( ); case "modulo_salida": return ( ); default: return ( ); } }; return (

); } export function DeviceTypeBadge({ type, className }: { type: DeviceTypeKey; className?: string }) { const deviceInfo = DEVICE_TYPES[type]; return ( {deviceInfo.label} ); } [V0_FILE]typescript:file="lib/store.ts" isMerged="true" // Store global con SWR para la gestión de estado import useSWR, { mutate } from 'swr'; import type { Project, Equipment, ViewMode } from './types'; const PROJECTS_KEY = 'firedetect-projects'; const EQUIPMENT_KEY = 'firedetect-equipment'; const CURRENT_PROJECT_KEY = 'firedetect-current-project'; const VIEW_MODE_KEY = 'firedetect-view-mode'; // Funciones de almacenamiento local function getStoredData(key: string, defaultValue: T): T { if (typeof window === 'undefined') return defaultValue; try { const stored = localStorage.getItem(key); return stored ? JSON.parse(stored) : defaultValue; } catch { return defaultValue; } } function setStoredData(key: string, data: T): void { if (typeof window === 'undefined') return; try { localStorage.setItem(key, JSON.stringify(data)); } catch (e) { console.error('Error storing data:', e); } } // Fetchers para SWR const projectsFetcher = () => getStoredData(PROJECTS_KEY, []); const equipmentFetcher = () => getStoredData(EQUIPMENT_KEY, []); const currentProjectFetcher = () => getStoredData(CURRENT_PROJECT_KEY, null); // Hook para proyectos export function useProjects() { const { data: projects = [], isLoading } = useSWR( 'projects', projectsFetcher, { fallbackData: [] } ); const addProject = (project: Omit) => { const newProject: Project = { ...project, id: crypto.randomUUID(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), equipmentCount: 0, inspectedCount: 0, }; const updated = [...projects, newProject]; setStoredData(PROJECTS_KEY, updated); mutate('projects', updated, false); return newProject; }; const updateProject = (id: string, updates: Partial) => { const updated = projects.map((p) => p.id === id ? { ...p, ...updates, updatedAt: new Date().toISOString() } : p ); setStoredData(PROJECTS_KEY, updated); mutate('projects', updated, false); }; const deleteProject = (id: string) => { const updated = projects.filter((p) => p.id !== id); setStoredData(PROJECTS_KEY, updated); mutate('projects', updated, false); // También eliminar equipos del proyecto const allEquipment = getStoredData(EQUIPMENT_KEY, []); const filteredEquipment = allEquipment.filter((e) => e.projectId !== id); setStoredData(EQUIPMENT_KEY, filteredEquipment); mutate('equipment', filteredEquipment, false); }; const getProjectById = (id: string) => projects.find((p) => p.id === id); return { projects, isLoading, addProject, updateProject, deleteProject, getProjectById, }; } // Hook para proyecto actual export function useCurrentProject() { const { data: currentProjectId } = useSWR( 'currentProject', currentProjectFetcher, { fallbackData: null } ); const { projects } = useProjects(); const setCurrentProject = (projectId: string | null) => { setStoredData(CURRENT_PROJECT_KEY, projectId); mutate('currentProject', projectId, false); // Limpiar el estado cuando se cambia de proyecto mutate('equipment'); }; const currentProject = currentProjectId ? projects.find((p) => p.id === currentProjectId) ?? null : null; return { currentProjectId, currentProject, setCurrentProject, }; } // Hook para equipos export function useEquipment(projectId?: string) { const { data: allEquipment = [], isLoading } = useSWR( 'equipment', equipmentFetcher, { fallbackData: [] } ); // Filtrar por proyecto si se especifica const equipment = projectId ? allEquipment.filter((e) => e.projectId === projectId) : allEquipment; const addEquipment = (equip: Omit) => { const newEquipment: Equipment = { ...equip, id: crypto.randomUUID(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), }; const updated = [...allEquipment, newEquipment]; setStoredData(EQUIPMENT_KEY, updated); mutate('equipment', updated, false); // Actualizar contador del proyecto updateProjectEquipmentCount(equip.projectId); return newEquipment; }; const addMultipleEquipment = (equipList: Omit[]) => { const newEquipments = equipList.map((equip) => ({ ...equip, id: crypto.randomUUID(), createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), })); const updated = [...allEquipment, ...newEquipments]; setStoredData(EQUIPMENT_KEY, updated); mutate('equipment', updated, false); // Actualizar contadores const projectIds = [...new Set(equipList.map((e) => e.projectId))]; for (const pid of projectIds) { updateProjectEquipmentCount(pid); } return newEquipments; }; const updateEquipment = (id: string, updates: Partial) => { const updated = allEquipment.map((e) => e.id === id ? { ...e, ...updates, updatedAt: new Date().toISOString() } : e ); setStoredData(EQUIPMENT_KEY, updated); mutate('equipment', updated, false); const equip = allEquipment.find((e) => e.id === id); if (equip) { updateProjectEquipmentCount(equip.projectId); } }; const deleteEquipment = (id: string) => { const equip = allEquipment.find((e) => e.id === id); const updated = allEquipment.filter((e) => e.id !== id); setStoredData(EQUIPMENT_KEY, updated); mutate('equipment', updated, false); if (equip) { updateProjectEquipmentCount(equip.projectId); } }; const clearProjectEquipment = (projectId: string) => { const updated = allEquipment.filter((e) => e.projectId !== projectId); setStoredData(EQUIPMENT_KEY, updated); mutate('equipment', updated, false); updateProjectEquipmentCount(projectId); }; const getEquipmentStats = (projectId: string) => { const projectEquipment = allEquipment.filter((e) => e.projectId === projectId); return { total: projectEquipment.length, inspected: projectEquipment.filter((e) => e.status === 'inspected').length, pending: projectEquipment.filter((e) => e.status === 'pending').length, fault: projectEquipment.filter((e) => e.status === 'fault').length, replaced: projectEquipment.filter((e) => e.status === 'replaced').length, }; }; return { equipment, allEquipment, isLoading, addEquipment, addMultipleEquipment, updateEquipment, deleteEquipment, clearProjectEquipment, getEquipmentStats, }; } // Función auxiliar para actualizar contadores de proyecto function updateProjectEquipmentCount(projectId: string) { const projects = getStoredData(PROJECTS_KEY, []); const equipment = getStoredData(EQUIPMENT_KEY, []); const projectEquipment = equipment.filter((e) => e.projectId === projectId); const equipmentCount = projectEquipment.length; const inspectedCount = projectEquipment.filter((e) => e.status === 'inspected').length; const updated = projects.map((p) => p.id === projectId ? { ...p, equipmentCount, inspectedCount, updatedAt: new Date().toISOString() } : p ); setStoredData(PROJECTS_KEY, updated); mutate('projects', updated, false); } // Fetcher para viewMode const viewModeFetcher = () => { const stored = getStoredData(VIEW_MODE_KEY, 'dashboard'); // Validate that it's a valid view mode const validModes: ViewMode[] = ['dashboard', 'projects', 'equipment', 'scanner', 'pdf-reader', 'reports']; return validModes.includes(stored) ? stored : 'dashboard'; }; // Hook para la vista actual - persiste entre recargas export function useViewMode() { const { data: viewMode = 'dashboard' } = useSWR( 'viewMode', viewModeFetcher, { fallbackData: 'dashboard' } ); const setViewMode = (mode: ViewMode) => { setStoredData(VIEW_MODE_KEY, mode); mutate('viewMode', mode, false); }; return { viewMode, setViewMode }; } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true" "use client"; import React from "react" import { cn } from "@/lib/utils"; import { useViewMode, useCurrentProject, useProjects } from "@/lib/store"; import { MANUFACTURERS } from "@/lib/manufacturers-data"; import type { ViewMode } from "@/lib/types"; import { LayoutDashboard, FolderKanban, ListChecks, ScanLine, FileText, FileSpreadsheet, ChevronRight, Flame, } from "lucide-react"; interface NavItem { id: ViewMode; label: string; icon: React.ReactNode; requiresProject?: boolean; } const navItems: NavItem[] = [ { id: "dashboard", label: "Dashboard", icon: , }, { id: "projects", label: "Proyectos", icon: , }, { id: "equipment", label: "Equipos", icon: , requiresProject: true, }, { id: "scanner", label: "Escáner OCR", icon: , requiresProject: true, }, { id: "pdf-reader", label: "Lector PDF", icon: , requiresProject: true, }, { id: "reports", label: "Informes", icon: , requiresProject: true, }, ]; export function AppSidebar() { const { viewMode, setViewMode } = useViewMode(); const { currentProject } = useCurrentProject(); const { projects } = useProjects(); const manufacturer = currentProject ? MANUFACTURERS.find((m) => m.id === currentProject.brand) : null; return (

{/* Logo */}

FireDetect

Pro Edition

{/* Current Project */} {currentProject && (

{manufacturer && (

)} Proyecto Activo

{currentProject.name}

{manufacturer?.name ?? "Sin marca"}

)} {/* Navigation */}

{navItems.map((item) => { const isDisabled = item.requiresProject && !currentProject; const isActive = viewMode === item.id; return ( ); })}

{/* Stats */}

{projects.length}

Proyectos

{currentProject?.equipmentCount ?? 0}

Equipos

); } [V0_FILE]typescriptreact:file="components/app-header.tsx" isMerged="true" "use client"; import React from "react" import { useCurrentProject, useProjects } from "@/lib/store"; import { MANUFACTURERS } from "@/lib/manufacturers-data"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ChevronDown, FolderOpen, Plus, Settings } from "lucide-react"; interface AppHeaderProps { title: string; subtitle?: string; actions?: React.ReactNode; } export function AppHeader({ title, subtitle, actions }: AppHeaderProps) { const { currentProject, setCurrentProject } = useCurrentProject(); const { projects } = useProjects(); const manufacturer = currentProject ? MANUFACTURERS.find((m) => m.id === currentProject.brand) : null; return (

{/* Mobile: Show project indicator + title */}

{/* Mobile project indicator */} {currentProject && manufacturer && (

)}

{title}

{subtitle && (

{subtitle}

)}

{actions} {/* Project Selector - Hidden on mobile, shown on desktop */} Proyectos {projects.length === 0 ? (

No hay proyectos creados

) : ( projects.map((project) => { const mfr = MANUFACTURERS.find((m) => m.id === project.brand); return ( setCurrentProject(project.id)} className="flex items-center gap-2 touch-active" > {mfr && ( )} {project.name} {currentProject?.id === project.id && ( Activo )} ); }) )} setCurrentProject(null)} className="text-muted-foreground touch-active" > Ninguno (ver todos)

); } [V0_FILE]typescriptreact:file="components/dashboard-view.tsx" isMerged="true" "use client"; import { useProjects, useEquipment, useCurrentProject, useViewMode } from "@/lib/store"; import { MANUFACTURERS, DEVICE_TYPES } from "@/lib/manufacturers-data"; import type { DeviceTypeKey } from "@/lib/manufacturers-data"; import { AppHeader } from "./app-header"; import { DeviceIcon } from "./device-icons"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { FolderKanban, ListChecks, CheckCircle2, AlertTriangle, Clock, RefreshCw, TrendingUp, Activity, ArrowRight, } from "lucide-react"; export function DashboardView() { const { projects } = useProjects(); const { allEquipment, getEquipmentStats } = useEquipment(); const { currentProject, setCurrentProject } = useCurrentProject(); const { setViewMode } = useViewMode(); // Calculate global stats const totalEquipment = allEquipment.length; const totalInspected = allEquipment.filter((e) => e.status === "inspected").length; const totalPending = allEquipment.filter((e) => e.status === "pending").length; const totalFaults = allEquipment.filter((e) => e.status === "fault").length; const totalReplaced = allEquipment.filter((e) => e.status === "replaced").length; const globalProgress = totalEquipment > 0 ? Math.round((totalInspected / totalEquipment) * 100) : 0; // Count by device type const deviceTypeCounts = Object.keys(DEVICE_TYPES).reduce((acc, type) => { acc[type as DeviceTypeKey] = allEquipment.filter((e) => e.deviceType === type).length; return acc; }, {} as Record); // Count by manufacturer const manufacturerCounts = MANUFACTURERS.reduce((acc, mfr) => { acc[mfr.id] = allEquipment.filter((e) => e.brand === mfr.id).length; return acc; }, {} as Record); const stats = [ { title: "Total Equipos", value: totalEquipment, icon: ListChecks, color: "text-primary", bgColor: "bg-primary/10", }, { title: "Inspeccionados", value: totalInspected, icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500/10", }, { title: "Pendientes", value: totalPending, icon: Clock, color: "text-yellow-500", bgColor: "bg-yellow-500/10", }, { title: "Con Fallos", value: totalFaults, icon: AlertTriangle, color: "text-red-500", bgColor: "bg-red-500/10", }, ]; return (

{/* Stats Grid */}

{stats.map((stat) => (

{stat.title}

{stat.value}

))}

{/* Progress & Activity */}

{/* Global Progress */} Progreso Global Estado general de todas las inspecciones

Completado {globalProgress}%

{totalInspected}

Inspeccionados

{totalPending}

Pendientes

{totalReplaced}

Reemplazados

{/* Device Types Distribution */} Distribución por Tipo Cantidad de equipos por tipo de dispositivo

{Object.entries(DEVICE_TYPES).map(([key, device]) => { const count = deviceTypeCounts[key as DeviceTypeKey]; const percentage = totalEquipment > 0 ? (count / totalEquipment) * 100 : 0; return (

{device.label} {count}

); })}

{/* Projects Overview */}

Proyectos Recientes {projects.length} proyectos registrados

{projects.length === 0 ? (

No hay proyectos creados

) : (

{projects.slice(0, 6).map((project) => { const manufacturer = MANUFACTURERS.find((m) => m.id === project.brand); const stats = getEquipmentStats(project.id); const progress = stats.total > 0 ? Math.round((stats.inspected / stats.total) * 100) : 0; const isActive = currentProject?.id === project.id; return (

{ setCurrentProject(project.id); setViewMode("equipment"); }} className={`p-4 rounded-lg border cursor-pointer transition-all hover:border-primary/50 ${ isActive ? "border-primary bg-primary/5" : "bg-muted/30" }`} >

{manufacturer && ( )} {project.name}

{stats.total} equipos {progress}%

); })}

)} {/* Manufacturers Distribution */} Equipos por Fabricante Distribución de equipos según el fabricante del sistema

{MANUFACTURERS.map((mfr) => { const count = manufacturerCounts[mfr.id]; return (

{mfr.name.substring(0, 2)}

{mfr.name}

{count} equipos

); })}

); } [V0_FILE]typescriptreact:file="components/reports-view.tsx" isMerged="true" "use client"; import { useState } from "react"; import { useCurrentProject, useEquipment, useViewMode } from "@/lib/store"; import { MANUFACTURERS, DEVICE_TYPES } from "@/lib/manufacturers-data"; import { AppHeader } from "./app-header"; import { DeviceIcon, DeviceTypeBadge } from "./device-icons"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { FileText, Download, FileSpreadsheet, Printer, Calendar, User, Building2, MapPin, CheckCircle2, AlertTriangle, Clock, RefreshCw, } from "lucide-react"; const STATUS_CONFIG = { pending: { label: "Pendiente", color: "bg-yellow-500/20 text-yellow-500", icon: Clock, }, inspected: { label: "Inspeccionado", color: "bg-green-500/20 text-green-500", icon: CheckCircle2, }, fault: { label: "Con Fallo", color: "bg-red-500/20 text-red-500", icon: AlertTriangle, }, replaced: { label: "Reemplazado", color: "bg-blue-500/20 text-blue-500", icon: RefreshCw, }, }; export function ReportsView() { const { currentProject } = useCurrentProject(); const { equipment, getEquipmentStats } = useEquipment(currentProject?.id); const { setViewMode } = useViewMode(); const [reportData, setReportData] = useState({ technician: "", date: new Date().toISOString().split("T")[0], notes: "", format: "pdf" as "pdf" | "html", }); const manufacturer = currentProject ? MANUFACTURERS.find((m) => m.id === currentProject.brand) : null; const stats = currentProject ? getEquipmentStats(currentProject.id) : null; if (!currentProject) { return (

No hay proyecto seleccionado

Selecciona un proyecto para generar informes.

); } const handleExport = (format: "pdf" | "html") => { // Generate report content const reportContent = generateReportHTML(); if (format === "html") { // Download as HTML const blob = new Blob([reportContent], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `informe-${currentProject.name.replace(/\s+/g, "-")}-${reportData.date}.html`; a.click(); URL.revokeObjectURL(url); } else { // Open print dialog for PDF const printWindow = window.open("", "_blank"); if (printWindow) { printWindow.document.write(reportContent); printWindow.document.close(); printWindow.print(); } } }; const generateReportHTML = () => { const inspectedEquipment = equipment.filter((e) => e.status === "inspected"); const faultEquipment = equipment.filter((e) => e.status === "fault"); const pendingEquipment = equipment.filter((e) => e.status === "pending"); const replacedEquipment = equipment.filter((e) => e.status === "replaced"); return ` Informe de Inspección - ${currentProject.name}

Cliente

${currentProject.client || "No especificado"}

Ubicación

${currentProject.location || "No especificada"}

Técnico

${reportData.technician || "No especificado"}

Sistema

${manufacturer?.name || "No especificado"}

Resumen de Inspección

${stats?.inspected || 0}

Inspeccionados

${stats?.pending || 0}

Pendientes

${stats?.fault || 0}

Con Fallos

${stats?.replaced || 0}

Reemplazados

${faultEquipment.length > 0 ? `

Equipos con Fallos (${faultEquipment.length})

${faultEquipment.map(eq => ` `).join("")}

Dirección	Tipo	N° Serie	Ubicación	Estado
${eq.fullAddress}	${DEVICE_TYPES[eq.deviceType].label}	${eq.serialNumber \|\| "-"}	${eq.location \|\| "-"}	Con Fallo

` : ""}

Listado Completo de Equipos (${equipment.length})

${equipment.map(eq => ` `).join("")}

Dirección	Tipo	N° Serie	Ubicación	Estado
${eq.fullAddress}	${DEVICE_TYPES[eq.deviceType].label}	${eq.serialNumber \|\| "-"}	${eq.location \|\| "-"}	${STATUS_CONFIG[eq.status].label}

${reportData.notes ? `

Notas adicionales:

${reportData.notes}

` : ""} `; }; return (

{/* Report Configuration */} Configuración Datos del informe de inspección

Técnico Responsable setReportData({ ...reportData, technician: e.target.value }) } />

Fecha de Inspección setReportData({ ...reportData, date: e.target.value }) } />

Notas Adicionales

setReportData({ ...reportData, notes: e.target.value })
                  }
                  rows={4}
                />
              </div>

<div className="space-y-3">
                <Button
                  className="w-full"
                  onClick={() => handleExport("pdf")}
                >
                  <Printer className="w-4 h-4 mr-2" />
                  Imprimir / Guardar PDF
                </Button>
                <Button
                  variant="outline"
                  className="w-full bg-transparent"
                  onClick={() => handleExport("html")}
                >
                  <Download className="w-4 h-4 mr-2" />
                  Descargar HTML
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Report Preview */}
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle>Vista Previa del Informe</CardTitle>
              <CardDescription>
                Proyecto: {currentProject.name}
              </CardDescription>
            </CardHeader>
            <CardContent>
              {/* Project Info */}
              <div className="p-4 rounded-lg bg-muted/30 mb-6">
                <div className="flex items-center gap-2 mb-4">
                  {manufacturer && (
                    <span
                      className="px-2 py-1 rounded text-xs font-medium text-white"
                      style={{ backgroundColor: manufacturer.color }}
                    >
                      {manufacturer.name}
                    </span>
                  )}
                  <span className="text-sm text-muted-foreground">
                    {new Date(reportData.date).toLocaleDateString("es-ES", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </span>
                </div>

<div className="grid gap-3 sm:grid-cols-2">
                  {currentProject.client && (
                    <div className="flex items-center gap-2 text-sm">
                      <Building2 className="w-4 h-4 text-muted-foreground" />
                      <span>{currentProject.client}</span>
                    </div>
                  )}
                  {currentProject.location && (
                    <div className="flex items-center gap-2 text-sm">
                      <MapPin className="w-4 h-4 text-muted-foreground" />
                      <span>{currentProject.location}</span>
                    </div>
                  )}
                  {reportData.technician && (
                    <div className="flex items-center gap-2 text-sm">
                      <User className="w-4 h-4 text-muted-foreground" />
                      <span>{reportData.technician}</span>
                    </div>
                  )}
                  <div className="flex items-center gap-2 text-sm">
                    <Calendar className="w-4 h-4 text-muted-foreground" />
                    <span>
                      {new Date(reportData.date).toLocaleDateString("es-ES")}
                    </span>
                  </div>
                </div>
              </div>

{/* Stats */}
              <div className="grid grid-cols-4 gap-3 mb-6">
                {stats && Object.entries(STATUS_CONFIG).map(([key, config]) => {
                  const count = stats[key as keyof typeof stats] || 0;
                  const Icon = config.icon;

return (
                    <div
                      key={key}
                      className={`p-3 rounded-lg text-center ${config.color}`}
                    >
                      <Icon className="w-5 h-5 mx-auto mb-1" />
                      <p className="text-2xl font-bold">{count}</p>
                      <p className="text-xs">{config.label}</p>
                    </div>
                  );
                })}
              </div>

{/* Equipment List Preview */}
              <div>
                <h4 className="font-medium mb-3">
                  Equipos ({equipment.length})
                </h4>
                <div className="space-y-2 max-h-[300px] overflow-y-auto pr-2">
                  {equipment.slice(0, 10).map((eq) => {
                    const status = STATUS_CONFIG[eq.status];

return (
                      <div
                        key={eq.id}
                        className="flex items-center gap-3 p-2 rounded-lg bg-muted/30"
                      >
                        <DeviceIcon type={eq.deviceType} size="sm" />
                        <span className="font-mono text-sm">{eq.fullAddress}</span>
                        <span className="text-sm text-muted-foreground flex-1 truncate">
                          {eq.location || "-"}
                        </span>
                        <Badge variant="outline" className={status.color}>
                          {status.label}
                        </Badge>
                      </div>
                    );
                  })}
                  {equipment.length > 10 && (
                    <p className="text-sm text-muted-foreground text-center py-2">
                      ... y {equipment.length - 10} equipos más
                    </p>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client";

import { SWRConfig } from "swr";
import { useEffect, useCallback } from "react";
import { AppSidebar } from "@/components/app-sidebar";
import { BottomNav } from "@/components/bottom-nav";
import { DashboardView } from "@/components/dashboard-view";
import { ProjectsView } from "@/components/projects-view";
import { EquipmentView } from "@/components/equipment-view";
import { ScannerView } from "@/components/scanner-view";
import { PDFReaderView } from "@/components/pdf-reader-view";
import { ReportsView } from "@/components/reports-view";
import { useViewMode } from "@/lib/store";
import type { ViewMode } from "@/lib/types";

function AppContent() {
  const { viewMode, setViewMode } = useViewMode();

// Handle back button to close modals/menus first
  const handleBackButton = useCallback(
    (event: PopStateEvent) => {
      // Check if any modal or dropdown is open
      const openModals = document.querySelectorAll('[data-state="open"]');
      const openDialogs = document.querySelectorAll('[role="dialog"]');
      
      if (openModals.length > 0 || openDialogs.length > 0) {
        // Close modals by pressing Escape
        event.preventDefault();
        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
        window.history.pushState(null, "", window.location.href);
        return;
      }

// Navigate back in app if not at dashboard
      if (viewMode !== "dashboard") {
        event.preventDefault();
        const viewOrder: ViewMode[] = [
          "dashboard",
          "projects",
          "equipment",
          "scanner",
          "pdf-reader",
          "reports",
        ];
        const currentIndex = viewOrder.indexOf(viewMode);
        if (currentIndex > 0) {
          setViewMode(viewOrder[currentIndex - 1]);
        } else {
          setViewMode("dashboard");
        }
        window.history.pushState(null, "", window.location.href);
      }
    },
    [viewMode, setViewMode]
  );

useEffect(() => {
    // Push initial state
    window.history.pushState(null, "", window.location.href);
    
    window.addEventListener("popstate", handleBackButton);
    return () => {
      window.removeEventListener("popstate", handleBackButton);
    };
  }, [handleBackButton]);

const renderView = () => {
    switch (viewMode) {
      case "dashboard":
        return <DashboardView />;
      case "projects":
        return <ProjectsView />;
      case "equipment":
        return <EquipmentView />;
      case "scanner":
        return <ScannerView />;
      case "pdf-reader":
        return <PDFReaderView />;
      case "reports":
        return <ReportsView />;
      default:
        return <DashboardView />;
    }
  };

return (
    <div className="min-h-screen bg-background">
      {/* Desktop Sidebar */}
      <div className="hidden md:block">
        <AppSidebar />
      </div>
      
      {/* Main Content - responsive padding */}
      <main className="md:pl-64 pb-20 md:pb-0 scroll-container">
        {renderView()}
      </main>
      
      {/* Mobile Bottom Navigation */}
      <BottomNav />
    </div>
  );
}

export default function Page() {
  return (
    <SWRConfig
      value={{
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
      }}
    >
      <AppContent />
    </SWRConfig>
  );
}
[V0_FILE]json:file="public/manifest.json" isMerged="true"
{
  "name": "FireDetect Pro",
  "short_name": "FireDetect",
  "description": "PWA profesional para gestión y mantenimiento de sistemas de detección de incendios",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#1a1a2e",
  "theme_color": "#1a1a2e",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["business", "productivity", "utilities"],
  "lang": "es-ES"
}
[V0_FILE]typescriptreact:file="components/bottom-nav.tsx" isMerged="true"
"use client";

import React from "react"

import { useCallback, useEffect } from "react";
import { cn } from "@/lib/utils";
import { useViewMode, useCurrentProject } from "@/lib/store";
import type { ViewMode } from "@/lib/types";
import {
  LayoutDashboard,
  FolderKanban,
  ListChecks,
  ScanLine,
  FileText,
  FileSpreadsheet,
} from "lucide-react";

interface NavItem {
  id: ViewMode;
  label: string;
  icon: React.ReactNode;
  requiresProject?: boolean;
}

const navItems: NavItem[] = [
  {
    id: "dashboard",
    label: "Inicio",
    icon: <LayoutDashboard className="w-5 h-5" />,
  },
  {
    id: "projects",
    label: "Proyectos",
    icon: <FolderKanban className="w-5 h-5" />,
  },
  {
    id: "equipment",
    label: "Equipos",
    icon: <ListChecks className="w-5 h-5" />,
    requiresProject: true,
  },
  {
    id: "scanner",
    label: "Escáner",
    icon: <ScanLine className="w-5 h-5" />,
    requiresProject: true,
  },
  {
    id: "pdf-reader",
    label: "PDF",
    icon: <FileText className="w-5 h-5" />,
    requiresProject: true,
  },
  {
    id: "reports",
    label: "Informes",
    icon: <FileSpreadsheet className="w-5 h-5" />,
    requiresProject: true,
  },
];

export function BottomNav() {
  const { viewMode, setViewMode } = useViewMode();
  const { currentProject } = useCurrentProject();

// Handle browser back button
  const handlePopState = useCallback(
    (event: PopStateEvent) => {
      event.preventDefault();
      
      // Navigate to previous view in the app instead of leaving
      const viewOrder: ViewMode[] = [
        "dashboard",
        "projects",
        "equipment",
        "scanner",
        "pdf-reader",
        "reports",
      ];
      const currentIndex = viewOrder.indexOf(viewMode);
      
      if (currentIndex > 0) {
        setViewMode(viewOrder[currentIndex - 1]);
        // Push a new state to prevent actually going back
        window.history.pushState({ view: viewOrder[currentIndex - 1] }, "");
      } else {
        // At dashboard, push state to stay in app
        window.history.pushState({ view: "dashboard" }, "");
      }
    },
    [viewMode, setViewMode]
  );

useEffect(() => {
    // Initialize history state
    window.history.pushState({ view: viewMode }, "");
    
    window.addEventListener("popstate", handlePopState);
    return () => {
      window.removeEventListener("popstate", handlePopState);
    };
  }, [handlePopState, viewMode]);

// Haptic feedback on supported devices
  const triggerHaptic = () => {
    if (navigator.vibrate) {
      navigator.vibrate(10);
    }
  };

const handleNavClick = (itemId: ViewMode, isDisabled: boolean) => {
    if (isDisabled) return;
    
    triggerHaptic();
    setViewMode(itemId);
    
    // Update history state
    window.history.pushState({ view: itemId }, "");
  };

return (
    <nav className="fixed bottom-0 left-0 right-0 z-[9999] bg-sidebar border-t border-sidebar-border md:hidden safe-bottom">
      <div className="flex items-center justify-around h-16 px-2">
        {navItems.map((item) => {
          const isDisabled = item.requiresProject && !currentProject;
          const isActive = viewMode === item.id;

return (
            <button
              key={item.id}
              onClick={() => handleNavClick(item.id, isDisabled)}
              disabled={isDisabled}
              className={cn(
                "bottom-nav-item flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-lg min-w-[60px]",
                isActive
                  ? "text-primary bg-primary/10"
                  : "text-muted-foreground",
                isDisabled && "opacity-30 pointer-events-none"
              )}
            >
              <span
                className={cn(
                  "transition-transform duration-150",
                  isActive && "scale-110"
                )}
              >
                {item.icon}
              </span>
              <span className="text-[10px] font-medium leading-none">
                {item.label}
              </span>
            </button>
          );
        })}
      </div>
    </nav>
  );
}
[V0_FILE]typescriptreact:file="components/scanner-view.tsx" isMerged="true"
"use client";

import { useState, useRef, useCallback, useEffect } from "react";
import { useCurrentProject, useEquipment, useViewMode } from "@/lib/store";
import {
  MANUFACTURERS,
  DEVICE_TYPES,
  formatAddress,
} from "@/lib/manufacturers-data";
import type { DeviceTypeKey } from "@/lib/manufacturers-data";
import { AppHeader } from "./app-header";
import { DeviceIcon } from "./device-icons";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Camera,
  ScanLine,
  Flashlight,
  RotateCcw,
  Check,
  X,
  ZoomIn,
  ImageIcon,
  Loader2,
} from "lucide-react";

// Store form data in session to persist between navigation
const SCANNER_FORM_KEY = 'firedetect-scanner-form';

function setStoredFormData(data: Record<string, unknown>) {
  if (typeof window === 'undefined') return;
  try {
    sessionStorage.setItem(SCANNER_FORM_KEY, JSON.stringify(data));
  } catch {
    // Ignore storage errors
  }
}

function clearStoredFormData() {
  if (typeof window === 'undefined') return;
  try {
    sessionStorage.removeItem(SCANNER_FORM_KEY);
  } catch {
    // Ignore storage errors
  }
}

export function ScannerView() {
  const { currentProject } = useCurrentProject();
  const { equipment, addEquipment, updateEquipment } = useEquipment(currentProject?.id);
  const { viewMode, setViewMode } = useViewMode();

const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [isScanning, setIsScanning] = useState(false);
  const [hasCamera, setHasCamera] = useState(false);
  const [flashOn, setFlashOn] = useState(false);
  const [scannedText, setScannedText] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);
  const [showDialog, setShowDialog] = useState(false);
  const [capturedImage, setCapturedImage] = useState<string | null>(null);

// Initialize form data from session storage
  const [newEquipment, setNewEquipment] = useState(() => {
    const stored = getStoredFormData();
    return stored ?? {
      deviceType: "detector_humo" as DeviceTypeKey,
      model: "",
      location: "",
      loop: 1,
      address: 1,
      serialNumber: "",
    };
  });

// Persist form data when it changes
  useEffect(() => {
    if (newEquipment.serialNumber || newEquipment.location || newEquipment.model) {
      setStoredFormData(newEquipment);
    }
  }, [newEquipment]);

const manufacturer = currentProject
    ? MANUFACTURERS.find((m) => m.id === currentProject.brand)
    : null;

// Start camera
  const startCamera = useCallback(async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: "environment",
          width: { ideal: 1920 },
          height: { ideal: 1080 },
        },
      });

if (videoRef.current) {
        videoRef.current.srcObject = stream;
        setHasCamera(true);
        setIsScanning(true);
      }
    } catch (err) {
      console.error("Error accessing camera:", err);
      setHasCamera(false);
    }
  }, []);

// Stop camera - completely release all resources
  const stopCamera = useCallback(() => {
    // Turn off flash first if it's on
    if (flashOn && videoRef.current?.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream;
      const track = stream.getVideoTracks()[0];
      if (track && "torch" in track.getCapabilities()) {
        track.applyConstraints({
          // @ts-ignore - torch is a valid constraint
          advanced: [{ torch: false }],
        }).catch(() => {});
      }
    }
    
    if (videoRef.current?.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream;
      // Stop all tracks immediately
      stream.getTracks().forEach((track) => {
        track.stop();
        stream.removeTrack(track);
      });
      videoRef.current.srcObject = null;
    }
    setIsScanning(false);
    setFlashOn(false);
    setHasCamera(false);
  }, [flashOn]);

// Toggle flash
  const toggleFlash = useCallback(async () => {
    if (videoRef.current?.srcObject) {
      const stream = videoRef.current.srcObject as MediaStream;
      const track = stream.getVideoTracks()[0];
      
      if ("torch" in track.getCapabilities()) {
        await track.applyConstraints({
          // @ts-ignore - torch is a valid constraint
          advanced: [{ torch: !flashOn }],
        });
        setFlashOn(!flashOn);
      }
    }
  }, [flashOn]);

// Capture image and process OCR
  const captureAndProcess = useCallback(async () => {
    if (!videoRef.current || !canvasRef.current) return;

setIsProcessing(true);

const video = videoRef.current;
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

if (!context) return;

// Set canvas dimensions
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

// Draw video frame to canvas
    context.drawImage(video, 0, 0);

// Get image data
    const imageData = canvas.toDataURL("image/png");
    setCapturedImage(imageData);

// Simulate OCR processing (in production, use Tesseract.js or similar)
    setTimeout(() => {
      // Generate mock serial number
      const mockSerials = [
        "SN-2024-A12B34C",
        "INIM-ED100-78945",
        "NOT-FSP851-56123",
        "APO-55000-89012",
        "ESS-IQ8-34567",
      ];
      
      const detected = mockSerials[Math.floor(Math.random() * mockSerials.length)];
      setScannedText(detected);
      setNewEquipment((prev) => ({ ...prev, serialNumber: detected }));
      setIsProcessing(false);
      setShowDialog(true);
    }, 1500);
  }, []);

// Handle manual serial number entry
  const handleManualEntry = () => {
    setShowDialog(true);
    setCapturedImage(null);
  };

// Save equipment
  const handleSaveEquipment = () => {
    if (!currentProject || !newEquipment.serialNumber) return;

const fullAddress = formatAddress(
      currentProject.brand,
      newEquipment.loop,
      newEquipment.address
    );

addEquipment({
      projectId: currentProject.id,
      brand: currentProject.brand,
      model: newEquipment.model,
      deviceType: newEquipment.deviceType,
      location: newEquipment.location,
      loop: newEquipment.loop,
      address: newEquipment.address,
      fullAddress,
      serialNumber: newEquipment.serialNumber,
      status: "inspected",
    });

// Reset form and clear stored data
  clearStoredFormData();
  setShowDialog(false);
  setScannedText("");
  setCapturedImage(null);
  setNewEquipment({
  deviceType: "detector_humo",
  model: "",
  location: "",
  loop: 1,
  address: newEquipment.address + 1,
  serialNumber: "",
    });
  };

// Update existing equipment with scanned serial
  const handleUpdateSerial = (equipmentId: string, serialNumber: string) => {
    updateEquipment(equipmentId, {
      serialNumber,
      status: "inspected",
      lastInspection: new Date().toISOString(),
    });
  };

// Cleanup camera when component unmounts or view changes
  useEffect(() => {
    return () => {
      // Force stop all camera resources on unmount
      if (videoRef.current?.srcObject) {
        const stream = videoRef.current.srcObject as MediaStream;
        stream.getTracks().forEach((track) => {
          track.stop();
        });
        videoRef.current.srcObject = null;
      }
    };
  }, []);

// Stop camera when page visibility changes
  useEffect(() => {
  const handleVisibilityChange = () => {
  if (document.hidden && isScanning) {
  stopCamera();
  }
  };
  
  document.addEventListener("visibilitychange", handleVisibilityChange);
  return () => {
  document.removeEventListener("visibilitychange", handleVisibilityChange);
  };
  }, [isScanning, stopCamera]);

// Stop camera immediately when navigating away from scanner view
  useEffect(() => {
    if (viewMode !== "scanner" && isScanning) {
      stopCamera();
    }
  }, [viewMode, isScanning, stopCamera]);

if (!currentProject) {
    return (
      <div className="flex-1 flex flex-col min-h-screen">
        <AppHeader title="Escáner OCR" />
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <h3 className="text-lg font-medium mb-2">No hay proyecto seleccionado</h3>
            <p className="text-muted-foreground mb-4">
              Selecciona un proyecto para escanear números de serie.
            </p>
            <Button onClick={() => setViewMode("projects")}>
              Ir a Proyectos
            </Button>
          </div>
        </div>
      </div>
    );
  }

return (
    <div className="flex-1 flex flex-col min-h-screen">
      <AppHeader
        title="Escáner OCR"
        subtitle="Captura números de serie con la cámara"
      />

<main className="flex-1 p-6">
        <div className="grid gap-6 lg:grid-cols-2">
          {/* Camera Section */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Camera className="w-5 h-5" />
                Cámara
              </CardTitle>
              <CardDescription>
                Enfoca el número de serie del equipo y pulsa capturar
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                <video
                  ref={videoRef}
                  autoPlay
                  playsInline
                  muted
                  className="w-full h-full object-cover"
                />
                <canvas ref={canvasRef} className="hidden" />

{!isScanning && (
                  <div className="absolute inset-0 flex items-center justify-center bg-muted/80">
                    <div className="text-center">
                      <Camera className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
                      <p className="text-muted-foreground mb-4">
                        Activa la cámara para escanear
                      </p>
                      <Button onClick={startCamera}>
                        <Camera className="w-4 h-4 mr-2" />
                        Activar Cámara
                      </Button>
                    </div>
                  </div>
                )}

{isScanning && (
                  <>
                    {/* Scanning overlay */}
                    <div className="absolute inset-0 pointer-events-none">
                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-24 border-2 border-primary rounded-lg">
                        <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-primary -translate-x-1 -translate-y-1" />
                        <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-primary translate-x-1 -translate-y-1" />
                        <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-primary -translate-x-1 translate-y-1" />
                        <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-primary translate-x-1 translate-y-1" />
                        
                        {/* Scanning line animation */}
                        <div className="absolute inset-x-0 h-0.5 bg-primary/50 animate-pulse" style={{ top: "50%" }} />
                      </div>
                    </div>

{/* Processing overlay */}
                    {isProcessing && (
                      <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                        <div className="text-center text-white">
                          <Loader2 className="w-8 h-8 mx-auto animate-spin mb-2" />
                          <p>Procesando OCR...</p>
                        </div>
                      </div>
                    )}
                  </>
                )}
              </div>

{/* Camera Controls */}
              <div className="flex items-center justify-center gap-4 mt-4">
                {isScanning ? (
                  <>
                    <Button
                      variant="outline"
                      size="icon"
                      onClick={toggleFlash}
                      className={flashOn ? "bg-yellow-500/20" : ""}
                    >
                      <Flashlight className="w-5 h-5" />
                    </Button>
                    <Button
                      size="lg"
                      className="w-32 h-12"
                      onClick={captureAndProcess}
                      disabled={isProcessing}
                    >
                      <ScanLine className="w-5 h-5 mr-2" />
                      Capturar
                    </Button>
                    <Button variant="outline" size="icon" onClick={stopCamera}>
                      <X className="w-5 h-5" />
                    </Button>
                  </>
                ) : (
                  <Button onClick={startCamera}>
                    <Camera className="w-4 h-4 mr-2" />
                    Iniciar Escáner
                  </Button>
                )}
              </div>

<div className="mt-4 text-center">
                <Button variant="link" onClick={handleManualEntry}>
                  Introducir número de serie manualmente
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Recent Scans & Equipment List */}
          <Card>
            <CardHeader>
              <CardTitle>Equipos del Proyecto</CardTitle>
              <CardDescription>
                Equipos pendientes de escanear número de serie
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 max-h-[500px] overflow-y-auto pr-2">
                {equipment.length === 0 ? (
                  <div className="text-center py-8 text-muted-foreground">
                    <ScanLine className="w-12 h-12 mx-auto mb-4 opacity-50" />
                    <p>No hay equipos en este proyecto</p>
                    <p className="text-sm">Añade equipos o importa desde PDF</p>
                  </div>
                ) : (
                  equipment.map((eq) => (
                    <div
                      key={eq.id}
                      className={`flex items-center gap-3 p-3 rounded-lg border ${
                        eq.serialNumber
                          ? "bg-green-500/5 border-green-500/20"
                          : "bg-muted/30"
                      }`}
                    >
                      <DeviceIcon type={eq.deviceType} size="sm" />
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-sm font-medium">
                            {eq.fullAddress}
                          </span>
                          {eq.serialNumber ? (
                            <Badge variant="outline" className="text-green-500 border-green-500/30">
                              <Check className="w-3 h-3 mr-1" />
                              Escaneado
                            </Badge>
                          ) : (
                            <Badge variant="outline" className="text-yellow-500 border-yellow-500/30">
                              Pendiente
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground truncate">
                          {eq.serialNumber || eq.location || "Sin número de serie"}
                        </p>
                      </div>
                      {!eq.serialNumber && (
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => {
                            setNewEquipment({
                              deviceType: eq.deviceType,
                              model: eq.model,
                              location: eq.location,
                              loop: eq.loop,
                              address: eq.address,
                              serialNumber: "",
                            });
                            setShowDialog(true);
                          }}
                        >
                          <ScanLine className="w-4 h-4" />
                        </Button>
                      )}
                    </div>
                  ))
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

{/* Equipment Dialog */}
      <Dialog open={showDialog} onOpenChange={setShowDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>
              {scannedText ? "Número de Serie Detectado" : "Añadir Equipo"}
            </DialogTitle>
            <DialogDescription>
              {scannedText
                ? "Verifica los datos y completa la información del equipo"
                : "Introduce los datos del equipo manualmente"}
            </DialogDescription>
          </DialogHeader>

{capturedImage && (
            <div className="relative aspect-video bg-black rounded-lg overflow-hidden mb-4">
              <ImageIcon
                src={capturedImage || "/placeholder.svg"}
                alt="Captura"
                className="w-full h-full object-contain"
              />
            </div>
          )}

<div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label>Número de Serie Detectado</Label>
              <Input
                value={newEquipment.serialNumber}
                onChange={(e) =>
                  setNewEquipment({ ...newEquipment, serialNumber: e.target.value })
                }
                placeholder="SN-XXXX-XXXX"
                className="font-mono"
              />
            </div>

<div className="grid gap-2">
              <Label>Tipo de Dispositivo</Label>
              <Select
                value={newEquipment.deviceType}
                onValueChange={(value) =>
                  setNewEquipment({
                    ...newEquipment,
                    deviceType: value as DeviceTypeKey,
                  })
                }
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(DEVICE_TYPES).map(([key, device]) => (
                    <SelectItem key={key} value={key}>
                      <div className="flex items-center gap-2">
                        <DeviceIcon type={key as DeviceTypeKey} size="sm" />
                        {device.label}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label>Lazo</Label>
                <Input
                  type="number"
                  min={1}
                  max={manufacturer?.addressFormat.maxLoop}
                  value={newEquipment.loop}
                  onChange={(e) =>
                    setNewEquipment({
                      ...newEquipment,
                      loop: parseInt(e.target.value) || 1,
                    })
                  }
                />
              </div>
              <div className="grid gap-2">
                <Label>Dirección</Label>
                <Input
                  type="number"
                  min={1}
                  max={manufacturer?.addressFormat.maxAddress}
                  value={newEquipment.address}
                  onChange={(e) =>
                    setNewEquipment({
                      ...newEquipment,
                      address: parseInt(e.target.value) || 1,
                    })
                  }
                />
              </div>
            </div>

<div className="grid gap-2">
              <Label>Ubicación</Label>
              <Input
                value={newEquipment.location}
                onChange={(e) =>
                  setNewEquipment({ ...newEquipment, location: e.target.value })
                }
                placeholder="Ej: Pasillo 2, Planta 3"
              />
            </div>
          </div>

<DialogFooter>
            <Button variant="outline" onClick={() => setShowDialog(false)}>
              Cancelar
            </Button>
            <Button
              onClick={handleSaveEquipment}
              disabled={!newEquipment.serialNumber}
            >
              <Check className="w-4 h-4 mr-2" />
              Guardar Equipo
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/equipment-manual-dialog.tsx" isMerged="true"
"use client";

import React from "react";

import type {
  ManufacturerModel,
  Manufacturer,
} from "@/lib/manufacturers-data";
import { ConnectionDiagram } from "./connection-diagram";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import {
  Zap,
  Thermometer,
  Droplets,
  Shield,
  Ruler,
  Scale,
  ExternalLink,
  Cable,
  Award,
  Activity,
  Gauge,
} from "lucide-react";

interface EquipmentManualDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  model: ManufacturerModel | undefined;
  manufacturer: Manufacturer | undefined;
}

export function EquipmentManualDialog({
  open,
  onOpenChange,
  model,
  manufacturer,
}: EquipmentManualDialogProps) {
  if (!model) return null;

const specs = model.specs;
  const diagram = model.diagram;

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
        <DialogHeader className="pb-2">
          <div className="flex items-center gap-3">
            {manufacturer && (
              <div
                className="w-10 h-10 rounded-lg flex items-center justify-center text-xs font-bold"
                style={{
                  backgroundColor: `${manufacturer.color}20`,
                  color: manufacturer.color,
                }}
              >
                {manufacturer.name.slice(0, 2)}
              </div>
            )}
            <div>
              <DialogTitle className="text-lg">{model.name}</DialogTitle>
              <p className="text-sm text-muted-foreground capitalize">
                {model.type === "detector" ? "Detector" : model.type}
              </p>
            </div>
          </div>
        </DialogHeader>

<div className="space-y-4">
          {/* Características Eléctricas - Nueva Sección Principal */}
          {specs && (specs.voltage || specs.currentStandby || specs.currentAlarm || specs.current) && (
            <Card className="border-primary/30 bg-primary/5">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2 text-primary">
                  <Activity className="w-4 h-4" />
                  Características Eléctricas
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 gap-4">
                  {/* Voltaje de Operación */}
                  {specs.voltage && (
                    <div className="flex items-center justify-between p-3 rounded-lg bg-background border">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center">
                          <Zap className="w-5 h-5 text-amber-500" />
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Voltaje de Operación
                          </p>
                          <p className="text-sm font-semibold">{specs.voltage}</p>
                        </div>
                      </div>
                    </div>
                  )}

{/* Consumo en Reposo */}
                  {(specs.currentStandby || specs.current) && (
                    <div className="flex items-center justify-between p-3 rounded-lg bg-background border">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                          <Gauge className="w-5 h-5 text-emerald-500" />
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Consumo en Reposo
                          </p>
                          <p className="text-sm font-semibold">
                            {specs.currentStandby || specs.current}
                          </p>
                        </div>
                      </div>
                    </div>
                  )}

{/* Consumo en Alarma */}
                  {specs.currentAlarm && (
                    <div className="flex items-center justify-between p-3 rounded-lg bg-background border">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-red-500/10 flex items-center justify-center">
                          <Activity className="w-5 h-5 text-red-500" />
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Consumo en Alarma
                          </p>
                          <p className="text-sm font-semibold">{specs.currentAlarm}</p>
                        </div>
                      </div>
                    </div>
                  )}

{/* Temperatura de Trabajo */}
                  {specs.temperature && (
                    <div className="flex items-center justify-between p-3 rounded-lg bg-background border">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                          <Thermometer className="w-5 h-5 text-blue-500" />
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground">
                            Temperatura de Trabajo
                          </p>
                          <p className="text-sm font-semibold">{specs.temperature}</p>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          )}

{/* Diagrama de Conexión con SVG Real */}
          {diagram && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Cable className="w-4 h-4 text-primary" />
                  Diagrama de Conexión
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ConnectionDiagram
                  diagram={diagram}
                  brandColor={manufacturer?.color}
                />
              </CardContent>
            </Card>
          )}

{/* Placeholder si no hay diagrama */}
          {!diagram && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Cable className="w-4 h-4 text-primary" />
                  Diagrama de Conexión
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="bg-muted/50 rounded-lg p-6 flex flex-col items-center justify-center min-h-[150px] border-2 border-dashed border-muted-foreground/20">
                  <Cable className="w-10 h-10 text-muted-foreground/40 mb-2" />
                  <p className="text-xs text-muted-foreground text-center">
                    Diagrama de conexión para {model.name}
                  </p>
                  <p className="text-[10px] text-muted-foreground/60 text-center mt-1">
                    Consulte el manual oficial para esquemas detallados
                  </p>
                </div>
              </CardContent>
            </Card>
          )}

{/* Ficha Técnica Completa (otros datos) */}
          {specs && (specs.ip || specs.humidity || specs.dimensions || specs.weight) && (
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm flex items-center gap-2">
                  <Shield className="w-4 h-4 text-primary" />
                  Especificaciones Físicas
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="grid grid-cols-2 gap-3">
                  {specs.ip && (
                    <SpecItem icon={Shield} label="Protección IP" value={specs.ip} />
                  )}
                  {specs.humidity && (
                    <SpecItem icon={Droplets} label="Humedad" value={specs.humidity} />
                  )}
                  {specs.dimensions && (
                    <SpecItem icon={Ruler} label="Dimensiones" value={specs.dimensions} />
                  )}
                  {specs.weight && (
                    <SpecItem icon={Scale} label="Peso" value={specs.weight} />
                  )}
                </div>

{specs.certifications && specs.certifications.length > 0 && (
                  <>
                    <Separator />
                    <div>
                      <p className="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                        <Award className="w-3 h-3" />
                        Certificaciones
                      </p>
                      <div className="flex flex-wrap gap-1.5">
                        {specs.certifications.map((cert) => (
                          <Badge key={cert} variant="secondary" className="text-xs">
                            {cert}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          )}

{/* Link al PDF */}
          {model.pdfUrl && (
            <Button
              variant="outline"
              className="w-full gap-2 touch-active bg-transparent"
              onClick={() => window.open(model.pdfUrl, "_blank")}
            >
              <ExternalLink className="w-4 h-4" />
              Ver Manual Oficial (PDF)
            </Button>
          )}

{!model.pdfUrl && manufacturer && (
            <Button
              variant="outline"
              className="w-full gap-2 touch-active bg-transparent"
              onClick={() =>
                window.open(
                  `https://www.google.com/search?q=${encodeURIComponent(
                    `${manufacturer.name} ${model.name} datasheet PDF`
                  )}`,
                  "_blank"
                )
              }
            >
              <ExternalLink className="w-4 h-4" />
              Buscar Documentación
            </Button>
          )}

{/* Sin especificaciones */}
          {!specs && !diagram && (
            <div className="text-center py-4 text-sm text-muted-foreground">
              <p>No hay especificaciones técnicas disponibles.</p>
              <p className="text-xs mt-1">Consulte el sitio web del fabricante.</p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

import React, { useState, useCallback, useRef } from "react";
import { useCurrentProject, useEquipment, useViewMode } from "@/lib/store";
import {
  MANUFACTURERS,
  DEVICE_TYPES,
  detectManufacturerFromText,
  formatAddress,
} from "@/lib/manufacturers-data";
import type { DeviceTypeKey } from "@/lib/manufacturers-data";
import { AppHeader } from "./app-header";
import { DeviceIcon } from "./device-icons";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  FileText,
  Upload,
  FileUp,
  Sparkles,
  Check,
  AlertCircle,
  Loader2,
  Trash2,
  RotateCcw,
  FileWarning,
  Table,
  Tag,
  ChevronDown,
  Save,
  Plus,
} from "lucide-react";

// Tipos de documento reconocidos
type DocumentType = "installation_report" | "plan_labels" | "unknown";

interface ParsedEquipment {
  id: string;
  selected: boolean;
  deviceType: DeviceTypeKey;
  model: string;
  loop: number;
  address: number;
  location: string;
  serialNumber: string;
  confidence: number;
  sourceType: DocumentType;
  rawLine?: string;
}

interface ParseResult {
  success: boolean;
  documentType: DocumentType;
  equipment: ParsedEquipment[];
  errors: string[];
  detectedBrand: string | null;
}

// Función para limpiar texto del PDF (eliminar comillas, normalizar espacios)
function cleanText(text: string): string {
  return text
    .replace(/["'""'']/g, "") // Eliminar comillas de todo tipo
    .replace(/\r\n/g, "\n") // Normalizar saltos de línea
    .replace(/\r/g, "\n")
    .replace(/\n{3,}/g, "\n\n") // Máximo 2 saltos seguidos
    .replace(/\t+/g, "\t") // Normalizar tabs
    .replace(/[ ]{2,}/g, "  ") // Normalizar espacios múltiples a 2
    .trim();
}

// Detectar columnas por palabras clave en la primera fila
interface ColumnMapping {
  serial: number;
  model: number;
  location: number;
  address: number;
  type: number;
}

// Parser para estructura tipo "Informe de Instalación"
// Formatos reconocidos:
// - Serial DET-SMAQ-01, PUL-REC-01, SIR-HALL-01, AVS-ZONA1
// - Dirección 08.01, 08.02 (Lazo.Dirección)
// - Columnas: Serial, Modelo, Ubicación, Lazo/Dirección
function parseInstallationReport(text: string, brandId: string): ParsedEquipment[] {
  const cleanedText = cleanText(text);
  const lines = cleanedText.split("\n").filter((line) => line.trim());
  const equipment: ParsedEquipment[] = [];
  
  // Intentar detectar encabezados en la primera línea
  let columnMapping: ColumnMapping | null = null;
  let startIndex = 0;
  
  if (lines.length > 0) {
    columnMapping = detectColumnMapping(lines[0]);
    if (columnMapping) {
      startIndex = 1; // Saltar la fila de encabezados
    }
  }

// Patrones para detectar seriales específicos (DET-, PUL-, SIR-, AVS-)
  const serialPatterns = [
    /\b(DET-[A-Z0-9\-]+)/i,
    /\b(PUL-[A-Z0-9\-]+)/i,
    /\b(SIR-[A-Z0-9\-]+)/i,
    /\b(AVS-[A-Z0-9\-]+)/i,
    /\b(MOD-[A-Z0-9\-]+)/i,
    /\b([A-Z]{2,4}-[A-Z0-9\-]{2,})/i, // Formato genérico XX-XXXX
  ];
  
  // Patrón para direcciones tipo Lazo.Dirección (08.01, 1.15, etc.)
  const addressPattern = /\b(\d{1,2})[.\-:](\d{1,3})\b/;

for (let i = startIndex; i < lines.length; i++) {
    const line = lines[i];
    const trimmedLine = line.trim();
    
    // Ignorar líneas vacías, comentarios, o encabezados obvios
    if (!trimmedLine || 
        trimmedLine.startsWith("#") || 
        trimmedLine.startsWith("//") ||
        trimmedLine.toLowerCase().includes("total") ||
        trimmedLine.toLowerCase().includes("página") ||
        trimmedLine.toLowerCase().includes("fecha")) {
      continue;
    }

try {
      let serialNumber = "";
      let model = "";
      let location = "";
      let loop = 1;
      let address = 0;
      let confidence = 60;

// Si tenemos mapeo de columnas, usar eso
      if (columnMapping) {
        const parts = trimmedLine.split(/[;,\t|]+/).map(p => p.trim());
        
        if (columnMapping.serial >= 0 && parts[columnMapping.serial]) {
          serialNumber = parts[columnMapping.serial];
        }
        if (columnMapping.model >= 0 && parts[columnMapping.model]) {
          model = parts[columnMapping.model];
        }
        if (columnMapping.location >= 0 && parts[columnMapping.location]) {
          location = parts[columnMapping.location];
        }
        if (columnMapping.address >= 0 && parts[columnMapping.address]) {
          const addrMatch = parts[columnMapping.address].match(addressPattern);
          if (addrMatch) {
            loop = parseInt(addrMatch[1], 10);
            address = parseInt(addrMatch[2], 10);
          } else {
            // Solo número de dirección
            address = parseInt(parts[columnMapping.address], 10) || 0;
          }
        }
        confidence = 90;
      } else {
        // Buscar serial con patrones específicos
        for (const pattern of serialPatterns) {
          const serialMatch = trimmedLine.match(pattern);
          if (serialMatch) {
            serialNumber = serialMatch[1];
            confidence += 15;
            break;
          }
        }

// Buscar dirección tipo Lazo.Dirección
        const addrMatch = trimmedLine.match(addressPattern);
        if (addrMatch) {
          loop = parseInt(addrMatch[1], 10);
          address = parseInt(addrMatch[2], 10);
          confidence += 15;
        }

// Extraer ubicación y modelo del resto de la línea
        // Intentar separar por delimitadores comunes
        const parts = trimmedLine.split(/[;,\t|]+/).map(p => p.trim()).filter(p => p);
        
        for (const part of parts) {
          // Si parece un modelo (contiene números y letras, corto)
          if (!model && /^[A-Z]{1,4}[\d]{2,4}[A-Z]?$/i.test(part)) {
            model = part;
          }
          // Si es texto largo sin ser serial ni modelo, probablemente es ubicación
          else if (!location && part.length > 3 && 
                   !serialPatterns.some(p => p.test(part)) && 
                   !addressPattern.test(part) &&
                   !/^[A-Z]{1,4}[\d]{2,4}[A-Z]?$/i.test(part)) {
            location = part;
          }
        }
      }

// Solo agregar si tenemos al menos dirección o serial
      if (address > 0 || serialNumber) {
        const deviceType = inferDeviceType(serialNumber, model);
        
        equipment.push({
          id: crypto.randomUUID(),
          selected: true,
          deviceType,
          model,
          loop: loop || 1,
          address: address || equipment.length + 1,
          location: location || `Punto ${equipment.length + 1}`,
          serialNumber,
          confidence: Math.min(confidence, 100),
          sourceType: "installation_report",
          rawLine: trimmedLine,
        });
      }
    } catch {
      // Si una línea falla, ignorarla y seguir con el resto
      continue;
    }
  }

return equipment;
}

// Parser para estructura tipo "Etiquetas de Plano"
// Formato esperado: Dígito | Identificación | Tipo
// Ejemplo: 01 | Detector Térmico | Sala Máquina
function parsePlanLabels(text: string): ParsedEquipment[] {
  const cleanedText = cleanText(text);
  const lines = cleanedText.split("\n").filter((line) => line.trim());
  const equipment: ParsedEquipment[] = [];

// Detectar si hay columnas "Dígito", "Identificación", "Tipo"
  let hasHeaders = false;
  let digitCol = -1;
  let identCol = -1;
  let typeCol = -1;
  let startIndex = 0;

if (lines.length > 0) {
    const firstLine = lines[0].toLowerCase();
    const cols = firstLine.split(/[|\t;,]+/).map(c => c.trim());
    
    for (let i = 0; i < cols.length; i++) {
      if (cols[i].includes("dígito") || cols[i].includes("digito") || cols[i] === "num" || cols[i] === "no.") {
        digitCol = i;
        hasHeaders = true;
      } else if (cols[i].includes("identificación") || cols[i].includes("identificacion") || cols[i].includes("nombre") || cols[i].includes("descripción")) {
        identCol = i;
        hasHeaders = true;
      } else if (cols[i] === "tipo" || cols[i] === "type" || cols[i].includes("dispositivo")) {
        typeCol = i;
        hasHeaders = true;
      }
    }
    
    if (hasHeaders) startIndex = 1;
  }

// Patrones para etiquetas de plano
  const patterns = [
    // Formato: Dígito | Identificación | Tipo
    /^(\d+)[|\t;,\s]+([^|\t;,]+)[|\t;,\s]+(Detector|Pulsador|Sirena|Módulo|Module|Smoke|Heat|Manual|Térmico|Termico|Óptico|Optico|Humo)/i,
    // Formato: ID (número) - Tipo
    /^(\d+)\s*[-–]\s*(Detector|Pulsador|Sirena|Módulo|Module|Smoke|Heat|Manual|Térmico|Termico)/i,
    // Formato con ubicación: Número - Tipo - Ubicación
    /^(\d+)\s*[-–]\s*(Detector|Pulsador|Sirena|Módulo|Térmico|Óptico|Humo)\s*[-–]\s*(.+)$/i,
    // Formato simple: solo número y tipo pegados o con espacio
    /^(\d{1,3})\s+(Detector|Pulsador|Sirena|Módulo)/i,
  ];

for (let i = startIndex; i < lines.length; i++) {
    const line = lines[i];
    const trimmedLine = line.trim();
    if (!trimmedLine || trimmedLine.startsWith("#")) continue;

try {
      let digit = 0;
      let typeStr = "";
      let identification = "";

// Si tenemos mapeo de columnas con headers
      if (hasHeaders && (digitCol >= 0 || typeCol >= 0)) {
        const parts = trimmedLine.split(/[|\t;,]+/).map(p => p.trim());
        
        if (digitCol >= 0 && parts[digitCol]) {
          digit = parseInt(parts[digitCol], 10) || 0;
        }
        if (typeCol >= 0 && parts[typeCol]) {
          typeStr = parts[typeCol].toLowerCase();
        }
        if (identCol >= 0 && parts[identCol]) {
          identification = parts[identCol];
        }
        
        // Si no hay typeCol pero hay identificación, inferir tipo de ella
        if (!typeStr && identification) {
          typeStr = identification.toLowerCase();
        }
      } else {
        // Usar patrones de regex
        for (const pattern of patterns) {
          const match = trimmedLine.match(pattern);
          if (match) {
            digit = parseInt(match[1], 10);
            typeStr = match[2]?.toLowerCase() || "";
            identification = match[3]?.trim() || "";
            break;
          }
        }
      }

if (digit > 0 || typeStr) {
        // Mapear tipo a DeviceTypeKey
        let deviceType: DeviceTypeKey = "detector_humo";
        if (typeStr.includes("pulsador") || typeStr.includes("manual") || typeStr.includes("mcp")) {
          deviceType = "pulsador";
        } else if (typeStr.includes("sirena") || typeStr.includes("sounder") || typeStr.includes("horn")) {
          deviceType = "sirena";
        } else if (typeStr.includes("módulo") || typeStr.includes("modulo") || typeStr.includes("module") || typeStr.includes("i/o")) {
          deviceType = "modulo_entrada";
        } else if (typeStr.includes("térm") || typeStr.includes("term") || typeStr.includes("heat") || typeStr.includes("rh")) {
          deviceType = "detector_termico";
        } else if (typeStr.includes("óptico") || typeStr.includes("optico") || typeStr.includes("optical") || typeStr.includes("humo") || typeStr.includes("smoke")) {
          deviceType = "detector_humo";
        }

equipment.push({
          id: crypto.randomUUID(),
          selected: true,
          deviceType,
          model: "",
          loop: 1,
          address: digit || equipment.length + 1,
          location: identification || `Punto ${digit || equipment.length + 1}`,
          serialNumber: `PLN-${(digit || equipment.length + 1).toString().padStart(3, "0")}`,
          confidence: hasHeaders ? 85 : 70,
          sourceType: "plan_labels",
          rawLine: trimmedLine,
        });
      }
    } catch {
      // Si una línea falla, ignorarla y seguir
      continue;
    }
  }

return equipment;
}

// Inferir tipo de dispositivo basado en el serial o modelo
function inferDeviceType(serial: string, model: string): DeviceTypeKey {
  const combined = `${serial} ${model}`.toLowerCase();
  
  if (combined.includes("pul") || combined.includes("mcp") || combined.includes("manual")) {
    return "pulsador";
  }
  if (combined.includes("sir") || combined.includes("sounder") || combined.includes("horn")) {
    return "sirena";
  }
  if (combined.includes("term") || combined.includes("heat") || combined.includes("rh")) {
    return "detector_termico";
  }
  if (combined.includes("mod") || combined.includes("i/o") || combined.includes("entrada") || combined.includes("salida")) {
    return Math.random() > 0.5 ? "modulo_entrada" : "modulo_salida";
  }
  
  return "detector_humo";
}

// Función principal de parsing que detecta el tipo de documento
function parseDocument(content: string, filename: string, brandId: string): ParseResult {
  const detectedBrand = detectManufacturerFromText(content) || detectManufacturerFromText(filename);
  
  // Intentar detectar el tipo de documento
  const lowerContent = content.toLowerCase();
  
  // Indicadores de Informe de Instalación
  const installationIndicators = [
    "serial", "modelo", "ubicación", "dirección", "lazo",
    "loop", "address", "location", "model", "ed200", "ed100",
    ";", "\t", "l1-d", "slc", "instalación"
  ];
  
  // Indicadores de Etiquetas de Plano
  const planIndicators = [
    "detector", "pulsador", "sirena", "plano", "etiqueta",
    "dígito", "identificación", "tipo", "punto"
  ];
  
  const installationScore = installationIndicators.filter(
    (ind) => lowerContent.includes(ind)
  ).length;
  
  const planScore = planIndicators.filter(
    (ind) => lowerContent.includes(ind)
  ).length;
  
  let equipment: ParsedEquipment[] = [];
  let documentType: DocumentType = "unknown";
  const errors: string[] = [];
  
  if (installationScore > planScore && installationScore >= 2) {
    documentType = "installation_report";
    equipment = parseInstallationReport(content, brandId);
  } else if (planScore >= 2) {
    documentType = "plan_labels";
    equipment = parsePlanLabels(content);
  } else {
    // Intentar ambos parsers
    const installationResult = parseInstallationReport(content, brandId);
    const planResult = parsePlanLabels(content);
    
    if (installationResult.length > planResult.length) {
      equipment = installationResult;
      documentType = "installation_report";
    } else if (planResult.length > 0) {
      equipment = planResult;
      documentType = "plan_labels";
    } else {
      errors.push("Formato no reconocido, por favor verifique el documento");
      documentType = "unknown";
    }
  }
  
  if (equipment.length === 0 && documentType !== "unknown") {
    errors.push("No se encontraron equipos válidos en el documento");
  }
  
  return {
    success: equipment.length > 0,
    documentType,
    equipment,
    errors,
    detectedBrand: detectedBrand?.name || null,
  };
}

export function PDFReaderView() {
  const { currentProject } = useCurrentProject();
  const { addMultipleEquipment } = useEquipment(currentProject?.id);
  const { setViewMode } = useViewMode();
  
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  const [isDragging, setIsDragging] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [parsedData, setParsedData] = useState<ParsedEquipment[]>([]);
  const [parseErrors, setParseErrors] = useState<string[]>([]);
  const [detectedBrand, setDetectedBrand] = useState<string | null>(null);
  const [documentType, setDocumentType] = useState<DocumentType | null>(null);
  const [importCount, setImportCount] = useState(0);
  const [fileName, setFileName] = useState<string>("");

const manufacturer = currentProject
    ? MANUFACTURERS.find((m) => m.id === currentProject.brand)
    : null;

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  }, []);

const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      processFile(files[0]);
    }
  }, []);

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      processFile(files[0]);
    }
  };

const processFile = async (file: File) => {
    setIsProcessing(true);
    setParsedData([]);
    setParseErrors([]);
    setDetectedBrand(null);
    setDocumentType(null);
    setImportCount(0);
    setFileName(file.name);

try {
      // Para archivos de texto/CSV
      if (file.type === "text/plain" || file.type === "text/csv" || file.name.endsWith(".csv") || file.name.endsWith(".txt")) {
        const text = await file.text();
        const result = parseDocument(text, file.name, currentProject?.brand || "");
        
        setDetectedBrand(result.detectedBrand);
        setDocumentType(result.documentType);
        setParsedData(result.equipment);
        setParseErrors(result.errors);
      } 
      // Para PDFs - simular extracción (en producción usar pdf.js)
      else if (file.type === "application/pdf") {
        // Simular procesamiento de PDF
        await new Promise((resolve) => setTimeout(resolve, 1500));
        
        // Generar datos de demo basados en el proyecto
        const mockResult = generateMockPDFData();
        setDetectedBrand(mockResult.detectedBrand);
        setDocumentType(mockResult.documentType);
        setParsedData(mockResult.equipment);
        setParseErrors(mockResult.errors);
      } else {
        setParseErrors(["Formato de archivo no soportado. Use PDF, CSV o TXT."]);
      }
    } catch (error) {
      setParseErrors(["Error al procesar el archivo. Verifique que el formato sea correcto."]);
    } finally {
      setIsProcessing(false);
    }
  };

const generateMockPDFData = (): ParseResult => {
    if (!manufacturer) {
      return {
        success: false,
        documentType: "unknown",
        equipment: [],
        errors: ["No hay proyecto seleccionado"],
        detectedBrand: null,
      };
    }

const deviceTypes: DeviceTypeKey[] = [
      "detector_humo",
      "detector_termico",
      "pulsador",
      "sirena",
      "modulo_entrada",
      "modulo_salida",
    ];

const locations = [
      "Sala Máquina",
      "Pasillo Principal P1",
      "Oficina 101",
      "Recepción",
      "Escalera A",
      "Almacén Norte",
      "Sala Técnica",
      "Cafetería",
      "Planta 1 - Zona A",
      "Planta 2 - Zona B",
      "Cuarto Eléctrico",
      "Archivo",
    ];

const models = manufacturer.models.filter((m) => m.type !== "central");
    const data: ParsedEquipment[] = [];

for (let i = 0; i < 15; i++) {
      const loop = Math.floor(Math.random() * manufacturer.addressFormat.maxLoop) + 1;
      const address = Math.floor(Math.random() * 50) + 1;
      const model = models[Math.floor(Math.random() * models.length)];
      
      data.push({
        id: crypto.randomUUID(),
        selected: true,
        deviceType: deviceTypes[Math.floor(Math.random() * deviceTypes.length)],
        model: model?.name || "",
        loop,
        address,
        location: locations[Math.floor(Math.random() * locations.length)],
        serialNumber: `DET-${loop.toString().padStart(2, "0")}${address.toString().padStart(2, "0")}-${(i + 1).toString().padStart(2, "0")}`,
        confidence: Math.floor(Math.random() * 25) + 75,
        sourceType: "installation_report",
      });
    }

return {
      success: true,
      documentType: "installation_report",
      equipment: data.sort((a, b) => a.loop - b.loop || a.address - b.address),
      errors: [],
      detectedBrand: manufacturer.name,
    };
  };

const toggleEquipment = (id: string) => {
    setParsedData((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, selected: !item.selected } : item
      )
    );
  };

const toggleAll = (selected: boolean) => {
    setParsedData((prev) => prev.map((item) => ({ ...item, selected })));
  };

const deleteEquipment = (id: string) => {
    setParsedData((prev) => prev.filter((item) => item.id !== id));
  };

const clearAllEquipment = () => {
    setParsedData([]);
    setParseErrors([]);
    setDetectedBrand(null);
    setDocumentType(null);
    setFileName("");
    setImportCount(0);
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

const handleImport = () => {
    if (!currentProject) return;

const selectedItems = parsedData.filter((item) => item.selected);
    
    const equipmentToAdd = selectedItems.map((item) => ({
      projectId: currentProject.id,
      brand: currentProject.brand,
      model: item.model,
      deviceType: item.deviceType,
      location: item.location,
      loop: item.loop,
      address: item.address,
      fullAddress: formatAddress(currentProject.brand, item.loop, item.address),
      serialNumber: item.serialNumber,
      status: "pending" as const,
    }));

addMultipleEquipment(equipmentToAdd);
    setImportCount(selectedItems.length);
    setParsedData([]);
  };

if (!currentProject) {
    return (
      <div className="flex-1 flex flex-col min-h-screen">
        <AppHeader title="Lector de Documentos" />
        <div className="flex-1 flex items-center justify-center p-4">
          <Card className="max-w-md w-full">
            <CardContent className="pt-6 text-center">
              <FileWarning className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-medium mb-2">No hay proyecto seleccionado</h3>
              <p className="text-muted-foreground mb-4">
                Selecciona un proyecto para importar equipos desde documentos.
              </p>
              <Button onClick={() => setViewMode("projects")} className="touch-active">
                Ir a Proyectos
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    );
  }

const selectedCount = parsedData.filter((item) => item.selected).length;

return (
    <div className="flex-1 flex flex-col min-h-screen">
      <AppHeader
        title="Lector de Documentos"
        subtitle={fileName ? `Archivo: ${fileName}` : "Importa equipos desde PDF, CSV o TXT"}
      />

<main className="flex-1 p-4 md:p-6 pb-24 md:pb-6">
        <div className="grid gap-4 md:gap-6 lg:grid-cols-2">
          {/* Upload Section */}
          <Card>
            <CardHeader className="pb-4">
              <CardTitle className="flex items-center gap-2 text-base md:text-lg">
                <FileText className="w-5 h-5" />
                Importar Documento
              </CardTitle>
              <CardDescription className="text-xs md:text-sm">
                Arrastra un archivo o haz clic para seleccionar. Formatos: PDF, CSV, TXT.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Drop Zone */}
              <div
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                className={`relative border-2 border-dashed rounded-lg p-6 md:p-8 text-center transition-colors ${
                  isDragging
                    ? "border-primary bg-primary/5"
                    : "border-muted-foreground/25 hover:border-primary/50"
                }`}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".pdf,.csv,.txt,application/pdf,text/plain,text/csv"
                  onChange={handleFileChange}
                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                  disabled={isProcessing}
                />
                
                {isProcessing ? (
                  <div className="space-y-4">
                    <Loader2 className="w-10 h-10 md:w-12 md:h-12 mx-auto text-primary animate-spin" />
                    <div>
                      <p className="font-medium text-sm md:text-base">Procesando documento...</p>
                      <p className="text-xs md:text-sm text-muted-foreground">
                        Detectando formato y extrayendo equipos
                      </p>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-3">
                    <div className="w-14 h-14 md:w-16 md:h-16 rounded-full bg-muted mx-auto flex items-center justify-center">
                      <FileUp className="w-7 h-7 md:w-8 md:h-8 text-muted-foreground" />
                    </div>
                    <div>
                      <p className="font-medium text-sm md:text-base">Arrastra un archivo aquí</p>
                      <p className="text-xs md:text-sm text-muted-foreground">
                        o toca para seleccionar
                      </p>
                    </div>
                  </div>
                )}
              </div>

{/* Document Type Indicators */}
              <div className="grid grid-cols-2 gap-3">
                <div className={`p-3 rounded-lg border transition-colors ${
                  documentType === "installation_report" 
                    ? "bg-primary/10 border-primary/30" 
                    : "bg-muted/30 border-transparent"
                }`}>
                  <div className="flex items-center gap-2 mb-1">
                    <Table className="w-4 h-4 text-primary" />
                    <span className="text-xs font-medium">Informe Instalación</span>
                  </div>
                  <p className="text-[10px] text-muted-foreground">
                    Serial, Modelo, Ubicación, Dirección
                  </p>
                </div>
                <div className={`p-3 rounded-lg border transition-colors ${
                  documentType === "plan_labels" 
                    ? "bg-primary/10 border-primary/30" 
                    : "bg-muted/30 border-transparent"
                }`}>
                  <div className="flex items-center gap-2 mb-1">
                    <Tag className="w-4 h-4 text-primary" />
                    <span className="text-xs font-medium">Etiquetas Plano</span>
                  </div>
                  <p className="text-[10px] text-muted-foreground">
                    Dígito, Identificación, Tipo
                  </p>
                </div>
              </div>

{/* Status Messages */}
              {detectedBrand && (
                <div className="p-3 rounded-lg bg-primary/10 border border-primary/20">
                  <div className="flex items-center gap-2">
                    <Sparkles className="w-4 h-4 text-primary flex-shrink-0" />
                    <span className="text-xs md:text-sm font-medium">
                      Marca detectada: <strong>{detectedBrand}</strong>
                    </span>
                  </div>
                </div>
              )}

{parseErrors.length > 0 && (
                <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
                  <div className="flex items-start gap-2">
                    <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" />
                    <div className="flex-1 space-y-2">
                      {parseErrors.map((error, idx) => (
                        <p key={idx} className="text-xs md:text-sm text-destructive">
                          {error}
                        </p>
                      ))}
                      <Button
                        variant="outline"
                        size="sm"
                        className="w-full mt-2 gap-2 touch-active bg-transparent"
                        onClick={() => setViewMode("equipment")}
                      >
                        <Plus className="w-4 h-4" />
                        Añadir equipo manualmente
                      </Button>
                    </div>
                  </div>
                </div>
              )}

{importCount > 0 && (
                <div className="p-3 rounded-lg bg-green-500/10 border border-green-500/20">
                  <div className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-green-500" />
                    <span className="text-xs md:text-sm font-medium text-green-500">
                      {importCount} equipos importados correctamente
                    </span>
                  </div>
                </div>
              )}

{/* Keywords Info */}
              <div className="p-3 rounded-lg bg-muted/50">
                <h4 className="font-medium text-xs md:text-sm mb-2 flex items-center gap-2">
                  <Sparkles className="w-4 h-4 text-primary" />
                  Detección Automática
                </h4>
                <p className="text-[10px] md:text-xs text-muted-foreground mb-2">
                  Se buscarán estas palabras clave:
                </p>
                <div className="flex flex-wrap gap-1.5">
                  {manufacturer?.keywords.slice(0, 6).map((keyword) => (
                    <Badge key={keyword} variant="secondary" className="text-[10px]">
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

{/* Results Section */}
          <Card className="flex flex-col">
            <CardHeader className="pb-3 flex-shrink-0">
              <div className="flex items-start justify-between gap-2">
                <div className="min-w-0">
                  <CardTitle className="text-base md:text-lg">Equipos Detectados</CardTitle>
                  <CardDescription className="text-xs md:text-sm">
                    {parsedData.length > 0
                      ? `${selectedCount} de ${parsedData.length} seleccionados`
                      : "Importa un documento para ver los equipos"}
                  </CardDescription>
                </div>
                {parsedData.length > 0 && (
                  <div className="flex items-center gap-2 flex-shrink-0">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => toggleAll(selectedCount !== parsedData.length)}
                      className="text-xs touch-active hidden md:flex"
                    >
                      {selectedCount === parsedData.length ? "Deseleccionar" : "Seleccionar"}
                    </Button>
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-destructive hover:text-destructive touch-active bg-transparent"
                        >
                          <RotateCcw className="w-4 h-4 md:mr-1" />
                          <span className="hidden md:inline">Reset</span>
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent className="max-w-[90vw] md:max-w-md">
                        <AlertDialogHeader>
                          <AlertDialogTitle>Limpiar Lista</AlertDialogTitle>
                          <AlertDialogDescription>
                            Se eliminarán todos los equipos detectados. Esta acción no se puede deshacer.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel className="touch-active">Cancelar</AlertDialogCancel>
                          <AlertDialogAction onClick={clearAllEquipment} className="touch-active">
                            Limpiar
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                )}
              </div>
            </CardHeader>
            <CardContent className="flex-1 flex flex-col min-h-0 pb-4">
              {parsedData.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-[200px] md:h-[300px] text-center px-4">
                  <FileText className="w-10 h-10 md:w-12 md:h-12 text-muted-foreground mb-4" />
                  <p className="text-sm text-muted-foreground mb-4">
                    Los equipos extraídos aparecerán aquí
                  </p>
                  <Button
                    variant="outline"
                    size="sm"
                    className="gap-2 touch-active bg-transparent"
                    onClick={() => setViewMode("equipment")}
                  >
                    <Plus className="w-4 h-4" />
                    Añadir equipo manualmente
                  </Button>
                </div>
              ) : (
                <div className="flex flex-col min-h-0 flex-1">
                  {/* Scrollable Equipment List with Sticky Header */}
                  <div 
                    className="border rounded-lg overflow-hidden flex-1 min-h-0"
                    style={{ maxHeight: "min(70vh, 450px)" }}
                  >
                    {/* Sticky Header */}
                    <div className="sticky top-0 z-10 bg-muted/80 backdrop-blur-sm border-b px-3 py-2 grid grid-cols-[auto_1fr_auto] md:grid-cols-[auto_80px_1fr_80px_auto] gap-2 items-center text-xs font-medium text-muted-foreground">
                      <div className="w-5"></div>
                      <div className="hidden md:block">Tipo</div>
                      <div>Dirección / Ubicación</div>
                      <div className="hidden md:block text-center">Conf.</div>
                      <div className="w-8"></div>
                    </div>
                    
                    {/* Equipment List */}
                    <div 
                      className="overflow-y-auto overscroll-contain"
                      style={{ maxHeight: "calc(min(70vh, 450px) - 40px)" }}
                    >
                      {parsedData.map((item) => (
                        <div
                          key={item.id}
                          className={`grid grid-cols-[auto_1fr_auto] md:grid-cols-[auto_80px_1fr_80px_auto] gap-2 items-center px-3 py-2.5 border-b last:border-b-0 transition-colors ${
                            item.selected
                              ? "bg-primary/5"
                              : "bg-background hover:bg-muted/30"
                          }`}
                        >
                          <Checkbox
                            checked={item.selected}
                            onCheckedChange={() => toggleEquipment(item.id)}
                            className="touch-active"
                          />
                          
                          <div className="hidden md:flex items-center">
                            <DeviceIcon type={item.deviceType} size="sm" />
                          </div>
                          
                          <div className="min-w-0">
                            <div className="flex items-center gap-2">
                              <div className="md:hidden">
                                <DeviceIcon type={item.deviceType} size="sm" />
                              </div>
                              <span className="font-mono text-xs md:text-sm font-medium">
                                {formatAddress(
                                  currentProject.brand,
                                  item.loop,
                                  item.address
                                )}
                              </span>
                              <Badge
                                variant="outline"
                                className={`text-[10px] md:hidden ${
                                  item.confidence >= 90
                                    ? "text-green-500 border-green-500/30"
                                    : item.confidence >= 70
                                    ? "text-yellow-500 border-yellow-500/30"
                                    : "text-red-500 border-red-500/30"
                                }`}
                              >
                                {item.confidence}%
                              </Badge>
                            </div>
                            <p className="text-[10px] md:text-xs text-muted-foreground truncate">
                              {item.location} {item.serialNumber && `• ${item.serialNumber}`}
                            </p>
                          </div>
                          
                          <div className="hidden md:flex justify-center">
                            <Badge
                              variant="outline"
                              className={`text-[10px] ${
                                item.confidence >= 90
                                  ? "text-green-500 border-green-500/30"
                                  : item.confidence >= 70
                                  ? "text-yellow-500 border-yellow-500/30"
                                  : "text-red-500 border-red-500/30"
                              }`}
                            >
                              {item.confidence}%
                            </Badge>
                          </div>
                          
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-muted-foreground hover:text-destructive touch-active"
                            onClick={() => deleteEquipment(item.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                  
                  {/* Desktop Import Button */}
                  <div className="mt-4 pt-4 border-t hidden md:block">
                    <Button
                      className="w-full touch-active"
                      disabled={selectedCount === 0}
                      onClick={handleImport}
                    >
                      <Upload className="w-4 h-4 mr-2" />
                      Importar {selectedCount} equipos
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </main>

{/* Mobile Bottom Action Bar */}
      {parsedData.length > 0 && (
        <div className="fixed bottom-16 md:hidden left-0 right-0 p-4 bg-background/95 backdrop-blur-sm border-t border-border safe-bottom z-40">
          <div className="flex items-center gap-3">
            <Button
              variant="outline"
              size="sm"
              onClick={() => toggleAll(selectedCount !== parsedData.length)}
              className="touch-active"
            >
              {selectedCount === parsedData.length ? "Ninguno" : "Todos"}
            </Button>
            <Button
              className="flex-1 touch-active"
              disabled={selectedCount === 0}
              onClick={handleImport}
            >
              <Save className="w-4 h-4 mr-2" />
              Guardar {selectedCount} equipos
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/connection-diagram.tsx" isMerged="true"
"use client";

import type { ConnectionDiagram as DiagramType } from "@/lib/manufacturers-data";

interface ConnectionDiagramProps {
  diagram: DiagramType;
  brandColor?: string;
  className?: string;
}

export function ConnectionDiagram({ diagram, brandColor = "#22c55e", className = "" }: ConnectionDiagramProps) {
  const inputTerminals = diagram.terminals.filter(t => t.type === 'input' || t.position === 'left');
  const outputTerminals = diagram.terminals.filter(t => t.type === 'output' || t.position === 'right');
  
  // Calculate SVG dimensions based on terminal count
  const maxTerminals = Math.max(inputTerminals.length, outputTerminals.length, 2);
  const svgHeight = 120 + maxTerminals * 30;

return (
    <div className={`space-y-3 ${className}`}>
      {/* SVG Diagram */}
      <div className="bg-muted/30 rounded-lg p-4 border border-border">
        <svg
          viewBox={`0 0 320 ${svgHeight}`}
          className="w-full h-auto max-h-[200px]"
          style={{ minHeight: 150 }}
        >
          {/* Background Grid (subtle) */}
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.1" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)" />

{/* Device Body */}
          <rect
            x="100"
            y="20"
            width="120"
            height={svgHeight - 40}
            rx="8"
            fill="var(--card)"
            stroke={brandColor}
            strokeWidth="2"
          />
          
          {/* Device Label */}
          <text
            x="160"
            y="45"
            textAnchor="middle"
            className="fill-foreground text-xs font-medium"
            style={{ fontSize: 11 }}
          >
            DISPOSITIVO
          </text>
          
          {/* Separator line */}
          <line
            x1="110"
            y1="55"
            x2="210"
            y2="55"
            stroke="currentColor"
            strokeWidth="1"
            opacity="0.2"
          />

{/* Input Terminals (Left Side) */}
          {inputTerminals.map((terminal, index) => {
            const yPos = 80 + index * 35;
            const isPositive = terminal.label.includes('+') || terminal.name.includes('1') || terminal.name === 'L1';
            const terminalColor = isPositive ? '#ef4444' : '#3b82f6';
            
            return (
              <g key={`input-${terminal.name}`}>
                {/* Wire from left */}
                <line
                  x1="10"
                  y1={yPos}
                  x2="100"
                  y2={yPos}
                  stroke={terminalColor}
                  strokeWidth="2"
                  strokeDasharray={terminal.type === 'input' ? "none" : "4,2"}
                />
                
                {/* Terminal Circle */}
                <circle
                  cx="100"
                  cy={yPos}
                  r="6"
                  fill="var(--background)"
                  stroke={terminalColor}
                  strokeWidth="2"
                />
                
                {/* Terminal Name Inside Device */}
                <text
                  x="115"
                  y={yPos + 4}
                  className="fill-foreground font-mono"
                  style={{ fontSize: 10 }}
                >
                  {terminal.name}
                </text>
                
                {/* Label Outside */}
                <text
                  x="5"
                  y={yPos - 8}
                  className="fill-muted-foreground"
                  style={{ fontSize: 8 }}
                >
                  {terminal.label}
                </text>
                
                {/* Arrow indicating input */}
                <polygon
                  points={`85,${yPos - 4} 95,${yPos} 85,${yPos + 4}`}
                  fill={terminalColor}
                />
              </g>
            );
          })}

{/* Output Terminals (Right Side) */}
          {outputTerminals.map((terminal, index) => {
            const yPos = 80 + index * 35;
            const isPositive = terminal.label.includes('+') || terminal.name.includes('b1') || terminal.name === '3';
            const terminalColor = isPositive ? '#ef4444' : '#3b82f6';
            
            return (
              <g key={`output-${terminal.name}`}>
                {/* Terminal Circle */}
                <circle
                  cx="220"
                  cy={yPos}
                  r="6"
                  fill="var(--background)"
                  stroke={terminalColor}
                  strokeWidth="2"
                />
                
                {/* Wire to right */}
                <line
                  x1="220"
                  y1={yPos}
                  x2="310"
                  y2={yPos}
                  stroke={terminalColor}
                  strokeWidth="2"
                  strokeDasharray={terminal.type === 'output' ? "none" : "4,2"}
                />
                
                {/* Terminal Name Inside Device */}
                <text
                  x="200"
                  y={yPos + 4}
                  textAnchor="end"
                  className="fill-foreground font-mono"
                  style={{ fontSize: 10 }}
                >
                  {terminal.name}
                </text>
                
                {/* Label Outside */}
                <text
                  x="315"
                  y={yPos - 8}
                  textAnchor="end"
                  className="fill-muted-foreground"
                  style={{ fontSize: 8 }}
                >
                  {terminal.label}
                </text>
                
                {/* Arrow indicating output */}
                <polygon
                  points={`225,${yPos - 4} 235,${yPos} 225,${yPos + 4}`}
                  fill={terminalColor}
                />
              </g>
            );
          })}

{/* Loop Direction Labels */}
          <text
            x="55"
            y={svgHeight - 15}
            textAnchor="middle"
            className="fill-muted-foreground font-medium"
            style={{ fontSize: 9 }}
          >
            DESDE CENTRAL
          </text>
          
          {outputTerminals.length > 0 && (
            <text
              x="265"
              y={svgHeight - 15}
              textAnchor="middle"
              className="fill-muted-foreground font-medium"
              style={{ fontSize: 9 }}
            >
              SIGUIENTE
            </text>
          )}

{/* Legend */}
          <g transform={`translate(10, ${svgHeight - 35})`}>
            <circle cx="5" cy="0" r="3" fill="#ef4444" />
            <text x="12" y="3" className="fill-muted-foreground" style={{ fontSize: 8 }}>Positivo (+)</text>
            <circle cx="65" cy="0" r="3" fill="#3b82f6" />
            <text x="72" y="3" className="fill-muted-foreground" style={{ fontSize: 8 }}>Negativo (-)</text>
          </g>
        </svg>
      </div>

{/* Description */}
      <div className="space-y-2">
        <p className="text-sm text-foreground font-medium">{diagram.description}</p>
        
        {diagram.addressingMethod && (
          <div className="flex items-start gap-2 text-xs">
            <span className="text-muted-foreground flex-shrink-0">Direccionamiento:</span>
            <span className="text-foreground">{diagram.addressingMethod}</span>
          </div>
        )}
        
        {diagram.notes && (
          <p className="text-xs text-muted-foreground italic">{diagram.notes}</p>
        )}
      </div>
    </div>
  );
}

// Simple version for inline display
export function ConnectionDiagramMini({ diagram, brandColor = "#22c55e" }: { diagram: DiagramType; brandColor?: string }) {
  const terminals = diagram.terminals.slice(0, 4);
  
  return (
    <div className="flex items-center gap-3 p-2 rounded bg-muted/30 border border-border/50">
      <svg viewBox="0 0 60 40" className="w-12 h-8 flex-shrink-0">
        {/* Mini device */}
        <rect x="15" y="5" width="30" height="30" rx="3" fill="var(--card)" stroke={brandColor} strokeWidth="1.5" />
        
        {/* Input terminals */}
        <circle cx="15" cy="15" r="3" fill="#ef4444" />
        <circle cx="15" cy="25" r="3" fill="#3b82f6" />
        
        {/* Output terminals (if any) */}
        {terminals.some(t => t.position === 'right' || t.type === 'output') && (
          <>
            <circle cx="45" cy="15" r="3" fill="#ef4444" />
            <circle cx="45" cy="25" r="3" fill="#3b82f6" />
          </>
        )}
        
        {/* Wires */}
        <line x1="0" y1="15" x2="12" y2="15" stroke="#ef4444" strokeWidth="1" />
        <line x1="0" y1="25" x2="12" y2="25" stroke="#3b82f6" strokeWidth="1" />
        {terminals.some(t => t.position === 'right' || t.type === 'output') && (
          <>
            <line x1="48" y1="15" x2="60" y2="15" stroke="#ef4444" strokeWidth="1" />
            <line x1="48" y1="25" x2="60" y2="25" stroke="#3b82f6" strokeWidth="1" />
          </>
        )}
      </svg>
      <span className="text-xs text-muted-foreground line-clamp-2">{diagram.description}</span>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/model-combobox.tsx" isMerged="true"
"use client";

import * as React from "react";
import { Check, ChevronsUpDown, Search, Info } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import type { ManufacturerModel, ConnectionDiagram } from "@/lib/manufacturers-data";
import { ConnectionDiagramMini } from "./connection-diagram";

interface ModelComboboxProps {
  models: ManufacturerModel[];
  value: string;
  onValueChange: (value: string) => void;
  disabled?: boolean;
  placeholder?: string;
  brandId?: string;
  onModelSelect?: (model: ManufacturerModel | undefined) => void;
}

export function ModelCombobox({
  models,
  value,
  onValueChange,
  disabled = false,
  placeholder = "Buscar modelo...",
  brandId,
  onModelSelect,
}: ModelComboboxProps) {
  const [open, setOpen] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");

const selectedModel = models.find((model) => model.id === value);

// Filter models based on search query
  const filteredModels = React.useMemo(() => {
    if (!searchQuery) return models;
    const query = searchQuery.toLowerCase();
    return models.filter(
      (model) =>
        model.name.toLowerCase().includes(query) ||
        model.id.toLowerCase().includes(query)
    );
  }, [models, searchQuery]);

// Group models by type
  const groupedModels = React.useMemo(() => {
    const groups: Record<string, ManufacturerModel[]> = {
      detector: [],
      pulsador: [],
      sirena: [],
      modulo: [],
      central: [],
    };
    filteredModels.forEach((model) => {
      if (groups[model.type]) {
        groups[model.type].push(model);
      }
    });
    return groups;
  }, [filteredModels]);

const typeLabels: Record<string, string> = {
    detector: "Detectores",
    pulsador: "Pulsadores",
    sirena: "Sirenas",
    modulo: "Módulos",
    central: "Centrales",
  };

const handleSelect = (modelId: string) => {
    const model = models.find((m) => m.id === modelId);
    onValueChange(modelId);
    onModelSelect?.(model);
    setOpen(false);
    setSearchQuery("");
  };

// Check if brand is INIM for protocol notice
  const isINIM = brandId === "inim";

return (
    <div className="space-y-2">
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            disabled={disabled}
            className={cn(
              "w-full h-12 justify-between text-left font-normal",
              !value && "text-muted-foreground",
              disabled && "opacity-50 cursor-not-allowed"
            )}
          >
            <span className="truncate">
              {selectedModel ? selectedModel.name : placeholder}
            </span>
            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
          <Command shouldFilter={false}>
            <div className="flex items-center border-b px-3">
              <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
              <input
                placeholder="Escriba para buscar..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
              />
            </div>
            <CommandList className="max-h-[300px] overflow-y-auto">
              {filteredModels.length === 0 ? (
                <CommandEmpty>No se encontraron modelos.</CommandEmpty>
              ) : (
                Object.entries(groupedModels).map(([type, typeModels]) =>
                  typeModels.length > 0 ? (
                    <CommandGroup key={type} heading={typeLabels[type] || type}>
                      {typeModels.map((model) => (
                        <CommandItem
                          key={model.id}
                          value={model.id}
                          onSelect={() => handleSelect(model.id)}
                          className="py-3 cursor-pointer"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              value === model.id ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col flex-1 min-w-0">
                            <span className="truncate font-medium">{model.name}</span>
                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
                              {model.specs?.currentStandby && (
                                <span>{model.specs.currentStandby} standby</span>
                              )}
                              {model.specs?.voltage && (
                                <span className="opacity-70">{model.specs.voltage}</span>
                              )}
                            </div>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  ) : null
                )
              )}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

{/* INIM Protocol Notice */}
      {isINIM && value && (
        <div className="flex items-start gap-2 p-2 rounded-lg bg-primary/10 border border-primary/20">
          <Info className="w-4 h-4 text-primary flex-shrink-0 mt-0.5" />
          <div className="text-xs text-primary">
            <span className="font-medium">Protocolo OpenLoop</span>
            <span className="block text-primary/80">Ver borneras +L1/-L2</span>
          </div>
        </div>
      )}

{/* Mini diagram preview when model is selected */}
      {selectedModel?.diagram && (
        <div className="p-3 rounded-lg bg-muted/50 border">
          <div className="text-xs font-medium text-muted-foreground mb-2">
            Diagrama de Conexión
          </div>
          <ConnectionDiagramMini diagram={selectedModel.diagram} />
          <div className="mt-2 text-xs text-muted-foreground">
            {selectedModel.diagram.description}
          </div>
        </div>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/equipment-view.tsx" isMerged="true"
"use client";

import { useState, useMemo } from "react";
import {
  useEquipment,
  useCurrentProject,
  useViewMode,
} from "@/lib/store";
import {
  MANUFACTURERS,
  DEVICE_TYPES,
  formatAddress,
} from "@/lib/manufacturers-data";
import type { DeviceTypeKey, ManufacturerModel, Manufacturer } from "@/lib/manufacturers-data";
import type { Equipment } from "@/lib/types";
import { AppHeader } from "./app-header";
import { DeviceIcon } from "./device-icons";
import { EquipmentManualDialog } from "./equipment-manual-dialog";
import { ModelCombobox } from "./model-combobox";
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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Card,
  CardContent,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Plus,
  Search,
  MoreVertical,
  CheckCircle2,
  AlertTriangle,
  RefreshCw,
  Clock,
  Filter,
  LayoutGrid,
  List,
  Trash2,
  BookOpen,
  MapPin,
  Hash,
  AlertCircle,
} from "lucide-react";

const STATUS_CONFIG = {
  pending: {
    label: "Pendiente",
    color: "bg-warning/20 text-warning border-warning/30",
    dotColor: "bg-warning",
    icon: Clock,
  },
  inspected: {
    label: "Inspeccionado",
    color: "bg-success/20 text-success border-success/30",
    dotColor: "bg-success",
    icon: CheckCircle2,
  },
  fault: {
    label: "Con Fallo",
    color: "bg-destructive/20 text-destructive border-destructive/30",
    dotColor: "bg-destructive",
    icon: AlertTriangle,
  },
  replaced: {
    label: "Reemplazado",
    color: "bg-primary/20 text-primary border-primary/30",
    dotColor: "bg-primary",
    icon: RefreshCw,
  },
};

// Check if equipment has complete data
function isDataComplete(eq: Equipment): boolean {
  return !!(eq.serialNumber && eq.location && eq.address > 0);
}

function getMissingFields(eq: Equipment): string[] {
  const missing: string[] = [];
  if (!eq.serialNumber) missing.push("N° Serie");
  if (!eq.location) missing.push("Ubicación");
  if (!eq.address || eq.address <= 0) missing.push("Dirección");
  return missing;
}

export function EquipmentView() {
  const { currentProject } = useCurrentProject();
  const { setViewMode } = useViewMode();
  const { equipment, addEquipment, updateEquipment, deleteEquipment } = useEquipment(
    currentProject?.id
  );

const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [viewType, setViewType] = useState<"grid" | "list">("grid");
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [typeFilter, setTypeFilter] = useState<string>("all");

// Manual dialog state
  const [manualDialogOpen, setManualDialogOpen] = useState(false);
  const [selectedModel, setSelectedModel] = useState<ManufacturerModel | undefined>(undefined);

const [newEquipment, setNewEquipment] = useState({
    deviceType: "" as DeviceTypeKey | "",
    model: "",
    location: "",
    loop: 1,
    address: 1,
    serialNumber: "",
    notes: "",
  });

const manufacturer = currentProject
    ? MANUFACTURERS.find((m) => m.id === currentProject.brand)
    : null;

// Calculate next available address
  const nextAddress = useMemo(() => {
    if (equipment.length === 0) return 1;
    const maxAddress = Math.max(...equipment.map(e => e.address));
    return maxAddress + 1;
  }, [equipment]);

// Auto-set next address when dialog opens
  const handleOpenDialog = (open: boolean) => {
    if (open) {
      setNewEquipment(prev => ({ ...prev, address: nextAddress }));
    }
    setIsDialogOpen(open);
  };

if (!currentProject) {
    return (
      <div className="flex-1 flex flex-col min-h-screen">
        <AppHeader title="Equipos" />
        <div className="flex-1 flex items-center justify-center p-6">
          <div className="text-center">
            <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
              <AlertCircle className="w-8 h-8 text-muted-foreground" />
            </div>
            <h3 className="text-lg font-medium mb-2">No hay proyecto seleccionado</h3>
            <p className="text-muted-foreground mb-4 text-sm">
              Selecciona o crea un proyecto para ver los equipos.
            </p>
            <Button onClick={() => setViewMode("projects")} className="touch-active">
              Ir a Proyectos
            </Button>
          </div>
        </div>
      </div>
    );
  }

const handleCreateEquipment = () => {
    if (!newEquipment.deviceType || !currentProject) return;

const fullAddress = formatAddress(
      currentProject.brand,
      newEquipment.loop,
      newEquipment.address
    );

setIsDialogOpen(false);
    setNewEquipment({
      deviceType: "",
      model: "",
      location: "",
      loop: 1,
      address: nextAddress + 1,
      serialNumber: "",
      notes: "",
    });
  };

const handleViewManual = (modelId: string) => {
    const model = manufacturer?.models.find(m => m.id === modelId);
    setSelectedModel(model);
    setManualDialogOpen(true);
  };

const filteredEquipment = equipment.filter((eq) => {
    const matchesSearch =
      eq.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
      eq.serialNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
      eq.fullAddress.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === "all" || eq.status === statusFilter;
    const matchesType = typeFilter === "all" || eq.deviceType === typeFilter;
    return matchesSearch && matchesStatus && matchesType;
  });

// Stats
  const completeCount = equipment.filter(isDataComplete).length;
  const incompleteCount = equipment.length - completeCount;

return (
    <div className="flex-1 flex flex-col min-h-screen">
      <AppHeader
        title="Equipos"
        subtitle={`${equipment.length} equipos en ${currentProject.name}`}
        actions={
          <Dialog open={isDialogOpen} onOpenChange={handleOpenDialog}>
            <DialogTrigger asChild>
              <Button className="gap-2 touch-active">
                <Plus className="w-4 h-4" />
                <span className="hidden sm:inline">Añadir</span>
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Añadir Nuevo Equipo</DialogTitle>
                <DialogDescription>
                  Formato: {manufacturer?.addressFormat.example} ({manufacturer?.addressFormat.description})
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-5 py-4">
                {/* Tipo - Full width, large touch target */}
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Tipo de Dispositivo *</Label>
                  <Select
                    value={newEquipment.deviceType}
                    onValueChange={(value) =>
                      setNewEquipment({
                        ...newEquipment,
                        deviceType: value as DeviceTypeKey,
                        model: "", // Clear model when device type changes
                      })
                    }
                  >
                    <SelectTrigger className="h-12 text-base">
                      <SelectValue placeholder="Selecciona el tipo" />
                    </SelectTrigger>
                    <SelectContent>
                      {Object.entries(DEVICE_TYPES).map(([key, device]) => (
                        <SelectItem key={key} value={key} className="py-3">
                          <div className="flex items-center gap-3">
                            <DeviceIcon type={key as DeviceTypeKey} size="sm" />
                            <span>{device.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

{/* Modelo - Combobox con búsqueda, filtrado por tipo */}
                <div className="space-y-2">
                  <Label className="text-sm font-medium">
                    Modelo
                    {!manufacturer && (
                      <span className="text-xs text-muted-foreground ml-2">
                        (Selecciona proyecto con marca)
                      </span>
                    )}
                  </Label>
                  <ModelCombobox
                    models={
                      manufacturer?.models.filter((model) => {
                        if (!newEquipment.deviceType) return true;
                        const deviceType = newEquipment.deviceType;
                        if (deviceType === 'detector_humo' || deviceType === 'detector_termico') {
                          return model.type === 'detector';
                        }
                        if (deviceType === 'pulsador') return model.type === 'pulsador';
                        if (deviceType === 'sirena') return model.type === 'sirena';
                        if (deviceType === 'modulo_entrada' || deviceType === 'modulo_salida') {
                          return model.type === 'modulo';
                        }
                        return true;
                      }) ?? []
                    }
                    value={newEquipment.model}
                    onValueChange={(value) =>
                      setNewEquipment({ ...newEquipment, model: value })
                    }
                    disabled={!manufacturer}
                    placeholder={
                      manufacturer
                        ? `Buscar modelo ${manufacturer.name}...`
                        : "Selecciona un proyecto primero"
                    }
                    brandId={manufacturer?.id}
                  />
                </div>

{/* Lazo y Dirección - Side by side */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">Lazo</Label>
                    <Input
                      type="number"
                      min={1}
                      max={manufacturer?.addressFormat.maxLoop}
                      value={newEquipment.loop}
                      onChange={(e) =>
                        setNewEquipment({
                          ...newEquipment,
                          loop: parseInt(e.target.value) || 1,
                        })
                      }
                      className="h-12 text-base text-center font-mono"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label className="text-sm font-medium">Dirección</Label>
                    <Input
                      type="number"
                      min={1}
                      max={manufacturer?.addressFormat.maxAddress}
                      value={newEquipment.address}
                      onChange={(e) =>
                        setNewEquipment({
                          ...newEquipment,
                          address: parseInt(e.target.value) || 1,
                        })
                      }
                      className="h-12 text-base text-center font-mono"
                    />
                  </div>
                </div>

{/* Serial */}
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Número de Serie</Label>
                  <Input
                    placeholder="Ej: SN-2024-001234"
                    value={newEquipment.serialNumber}
                    onChange={(e) =>
                      setNewEquipment({
                        ...newEquipment,
                        serialNumber: e.target.value,
                      })
                    }
                    className="h-12 text-base"
                  />
                </div>

{/* Ubicación */}
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Ubicación</Label>
                  <Input
                    placeholder="Ej: Pasillo 2, Planta 3"
                    value={newEquipment.location}
                    onChange={(e) =>
                      setNewEquipment({
                        ...newEquipment,
                        location: e.target.value,
                      })
                    }
                    className="h-12 text-base"
                  />
                </div>

{/* Fotografía de Instalación */}
                <div className="space-y-2">
                  <Label className="text-sm font-medium">Fotografía de Instalación</Label>
                  <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-4 text-center hover:border-primary/50 transition-colors cursor-pointer">
                    <input
                      type="file"
                      accept="image/*"
                      capture="environment"
                      className="hidden"
                      id="photo-upload"
                      onChange={(e) => {
                        // Photo handling - in production this would upload to storage
                        const file = e.target.files?.[0];
                        if (file) {
                          // TODO: Implement photo upload to Vercel Blob or similar
                          // For now, just acknowledge the selection
                        }
                      }}
                    />
                    <label htmlFor="photo-upload" className="cursor-pointer block">
                      <div className="flex flex-col items-center gap-2 py-2">
                        <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center">
                          <svg className="w-6 h-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                        </div>
                        <span className="text-sm text-muted-foreground">
                          Toca para tomar foto
                        </span>
                        <span className="text-xs text-muted-foreground/70">
                          Registro visual de la instalación
                        </span>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
              <DialogFooter className="gap-2 sm:gap-0">
                <Button variant="outline" onClick={() => setIsDialogOpen(false)} className="touch-active">
                  Cancelar
                </Button>
                <Button
                  onClick={handleCreateEquipment}
                  disabled={!newEquipment.deviceType}
                  className="touch-active"
                >
                  Añadir Equipo
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        }
      />

<main className="flex-1 p-4 md:p-6 pb-24 md:pb-6">
        {/* Stats Banner */}
        {equipment.length > 0 && (
          <div className="flex gap-3 mb-4 overflow-x-auto pb-2">
            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 flex-shrink-0">
              <span className="text-xs text-muted-foreground">Total:</span>
              <span className="text-sm font-semibold">{equipment.length}</span>
            </div>
            <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-success/10 flex-shrink-0">
              <div className="w-2 h-2 rounded-full bg-success" />
              <span className="text-xs text-muted-foreground">Completos:</span>
              <span className="text-sm font-semibold text-success">{completeCount}</span>
            </div>
            {incompleteCount > 0 && (
              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-destructive/10 flex-shrink-0">
                <div className="w-2 h-2 rounded-full bg-destructive" />
                <span className="text-xs text-muted-foreground">Incompletos:</span>
                <span className="text-sm font-semibold text-destructive">{incompleteCount}</span>
              </div>
            )}
          </div>
        )}

{/* Filters */}
        <div className="flex flex-col gap-3 mb-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              placeholder="Buscar por ubicación, serie o dirección..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 h-11"
            />
          </div>
          <div className="flex gap-2 overflow-x-auto pb-1">
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[130px] h-10 flex-shrink-0">
                <Filter className="w-4 h-4 mr-2" />
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                {Object.entries(STATUS_CONFIG).map(([key, config]) => (
                  <SelectItem key={key} value={key}>
                    {config.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

<Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-[140px] h-10 flex-shrink-0">
                <SelectValue placeholder="Tipo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                {Object.entries(DEVICE_TYPES).map(([key, device]) => (
                  <SelectItem key={key} value={key}>
                    {device.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

<div className="flex border rounded-lg overflow-hidden flex-shrink-0 ml-auto">
              <Button
                variant={viewType === "grid" ? "secondary" : "ghost"}
                size="icon"
                className="h-10 w-10 rounded-none"
                onClick={() => setViewType("grid")}
              >
                <LayoutGrid className="w-4 h-4" />
              </Button>
              <Button
                variant={viewType === "list" ? "secondary" : "ghost"}
                size="icon"
                className="h-10 w-10 rounded-none"
                onClick={() => setViewType("list")}
              >
                <List className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </div>

{/* Content */}
        {filteredEquipment.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-[40vh] text-center">
            <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
              <Search className="w-8 h-8 text-muted-foreground" />
            </div>
            <h3 className="text-lg font-medium mb-2">
              {equipment.length === 0
                ? "No hay equipos registrados"
                : "No se encontraron resultados"}
            </h3>
            <p className="text-muted-foreground text-sm">
              {equipment.length === 0
                ? "Añade equipos manualmente o importa desde un PDF."
                : "Intenta cambiar los filtros de búsqueda."}
            </p>
          </div>
        ) : viewType === "grid" ? (
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {filteredEquipment.map((eq) => (
              <EquipmentCard
                key={eq.id}
                equipment={eq}
                manufacturer={manufacturer}
                onUpdate={updateEquipment}
                onDelete={deleteEquipment}
                onViewManual={handleViewManual}
              />
            ))}
          </div>
        ) : (
          <div className="space-y-2">
            {filteredEquipment.map((eq) => (
              <EquipmentListItem
                key={eq.id}
                equipment={eq}
                manufacturer={manufacturer}
                onUpdate={updateEquipment}
                onDelete={deleteEquipment}
                onViewManual={handleViewManual}
              />
            ))}
          </div>
        )}
      </main>

{/* Manual Dialog */}
      <EquipmentManualDialog
        open={manualDialogOpen}
        onOpenChange={setManualDialogOpen}
        model={selectedModel}
        manufacturer={manufacturer ?? undefined}
      />
    </div>
  );
}

function EquipmentCard({
  equipment,
  manufacturer,
  onUpdate,
  onDelete,
  onViewManual,
}: {
  equipment: Equipment;
  manufacturer: Manufacturer | null;
  onUpdate: (id: string, updates: Partial<Equipment>) => void;
  onDelete: (id: string) => void;
  onViewManual: (modelId: string) => void;
}) {
  const status = STATUS_CONFIG[equipment.status];
  const StatusIcon = status.icon;
  const model = manufacturer?.models.find((m) => m.id === equipment.model);
  const deviceType = DEVICE_TYPES[equipment.deviceType];
  const complete = isDataComplete(equipment);
  const missingFields = getMissingFields(equipment);

return (
    <Card className={`relative overflow-hidden transition-all ${!complete ? 'border-destructive/40' : ''}`}>
      {/* Completion indicator strip */}
      <div 
        className={`absolute top-0 left-0 right-0 h-1 ${complete ? 'bg-success' : 'bg-destructive'}`}
      />
      
      <CardContent className="p-4 pt-5">
        <div className="flex items-start justify-between mb-3">
          <div className="flex items-center gap-3">
            <DeviceIcon type={equipment.deviceType} size="lg" />
            <div className="min-w-0">
              <p className="font-mono text-base font-semibold">{equipment.fullAddress}</p>
              <p className="text-xs text-muted-foreground truncate">{deviceType.label}</p>
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8 touch-active">
                <MoreVertical className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="z-[9999]">
              {model && (
                <>
                  <DropdownMenuItem onClick={() => onViewManual(equipment.model)}>
                    <BookOpen className="w-4 h-4 mr-2" />
                    Ver Manual
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                </>
              )}
              <DropdownMenuLabel>Cambiar Estado</DropdownMenuLabel>
              <DropdownMenuSeparator />
              {Object.entries(STATUS_CONFIG).map(([key, config]) => (
                <DropdownMenuItem
                  key={key}
                  onClick={() => onUpdate(equipment.id, { status: key as Equipment["status"] })}
                  className="touch-active"
                >
                  <config.icon className="w-4 h-4 mr-2" />
                  {config.label}
                </DropdownMenuItem>
              ))}
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="text-destructive touch-active"
                onClick={() => onDelete(equipment.id)}
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Eliminar
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>

<div className="space-y-2">
          {/* Serial */}
          <div className="flex items-center gap-2 text-sm">
            <Hash className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
            <span className={!equipment.serialNumber ? 'text-muted-foreground/50 italic' : ''}>
              {equipment.serialNumber || "Sin número de serie"}
            </span>
          </div>

{/* Location */}
          <div className="flex items-center gap-2 text-sm">
            <MapPin className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />
            <span className={`truncate ${!equipment.location ? 'text-muted-foreground/50 italic' : ''}`}>
              {equipment.location || "Sin ubicación"}
            </span>
          </div>

{/* Model */}
          {model && (
            <button
              onClick={() => onViewManual(equipment.model)}
              className="flex items-center gap-2 text-sm text-primary hover:underline touch-active"
            >
              <BookOpen className="w-3.5 h-3.5 flex-shrink-0" />
              <span className="truncate">{model.name}</span>
            </button>
          )}
        </div>

{/* Footer */}
        <div className="flex items-center justify-between mt-4 pt-3 border-t">
          <Badge variant="outline" className={`${status.color} text-xs`}>
            <StatusIcon className="w-3 h-3 mr-1" />
            {status.label}
          </Badge>
          
          {!complete && (
            <div className="flex items-center gap-1 text-destructive">
              <AlertCircle className="w-3.5 h-3.5" />
              <span className="text-[10px]">Faltan datos</span>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

function EquipmentListItem({
  equipment,
  manufacturer,
  onUpdate,
  onDelete,
  onViewManual,
}: {
  equipment: Equipment;
  manufacturer: Manufacturer | null;
  onUpdate: (id: string, updates: Partial<Equipment>) => void;
  onDelete: (id: string) => void;
  onViewManual: (modelId: string) => void;
}) {
  const status = STATUS_CONFIG[equipment.status];
  const StatusIcon = status.icon;
  const model = manufacturer?.models.find((m) => m.id === equipment.model);
  const complete = isDataComplete(equipment);

return (
    <div className={`flex items-center gap-3 p-3 rounded-lg border bg-card transition-all ${!complete ? 'border-destructive/40' : ''}`}>
      {/* Completion dot */}
      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${complete ? 'bg-success' : 'bg-destructive'}`} />
      
      <DeviceIcon type={equipment.deviceType} size="sm" />
      
      <div className="flex-1 min-w-0 grid grid-cols-2 sm:grid-cols-4 gap-1 text-sm">
        <span className="font-mono font-medium">{equipment.fullAddress}</span>
        <span className="truncate text-muted-foreground">{equipment.serialNumber || "-"}</span>
        <span className="truncate hidden sm:block">{equipment.location || "-"}</span>
        <Badge variant="outline" className={`${status.color} text-[10px] w-fit hidden sm:flex`}>
          <StatusIcon className="w-2.5 h-2.5 mr-1" />
          {status.label}
        </Badge>
      </div>
      
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon" className="h-8 w-8 flex-shrink-0 touch-active">
            <MoreVertical className="w-4 h-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="z-[9999]">
          {model && (
            <>
              <DropdownMenuItem onClick={() => onViewManual(equipment.model)}>
                <BookOpen className="w-4 h-4 mr-2" />
                Ver Manual
              </DropdownMenuItem>
              <DropdownMenuSeparator />
            </>
          )}
          <DropdownMenuLabel>Cambiar Estado</DropdownMenuLabel>
          <DropdownMenuSeparator />
          {Object.entries(STATUS_CONFIG).map(([key, config]) => (
            <DropdownMenuItem
              key={key}
              onClick={() => onUpdate(equipment.id, { status: key as Equipment["status"] })}
            >
              <config.icon className="w-4 h-4 mr-2" />
              {config.label}
            </DropdownMenuItem>
          ))}
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="text-destructive"
            onClick={() => onDelete(equipment.id)}
          >
            <Trash2 className="w-4 h-4 mr-2" />
            Eliminar
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/inim-pdf-importer.tsx" isMerged="true"
"use client";

import React, { useState, useRef } from "react";
import { useEquipment } from "@/lib/store";
import type { DeviceTypeKey } from "@/lib/manufacturers-data";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  FileUp,
  Loader2,
  Check,
  AlertCircle,
  Download,
  X,
} from "lucide-react";

// Estructura específica para el formato INIM
interface INIMEquipmentRow {
  id: string;
  selected: boolean;
  direccion: string;      // 18E2EF1, 17BD18B...
  loop: number;           // Número de lazo (1, 2, 3...)
  numero: string;         // 002, 003, 004...
  etiqueta: string;       // DET RECEP BAR HALL, Sirena Recepcion...
  tipo: string;           // Det. Óptico, Sirena, Módulo Zona Convencional...
  zona: string;           // RECEPCION, SOTANO...
  fechaInstalacion?: string;
  rawLine: string;
}

// Parser específico para el formato INIM SmartLetUSee/Previdia
function parseINIMFormat(text: string): { rows: INIMEquipmentRow[]; errors: string[] } {
  const lines = text.split("\n").filter((line) => line.trim());
  const rows: INIMEquipmentRow[] = [];
  const errors: string[] = [];

// Detectar si la primera línea es un encabezado
  let startIndex = 0;
  if (lines.length > 0) {
    const firstLine = lines[0].toLowerCase();
    if (
      firstLine.includes("dirección") ||
      firstLine.includes("direccion") ||
      firstLine.includes("loop") ||
      firstLine.includes("lazo") ||
      firstLine.includes("número de serie") ||
      firstLine.includes("etiqueta")
    ) {
      startIndex = 1;
    }
  }

for (let i = startIndex; i < lines.length; i++) {
    const line = lines[i].trim();
    if (!line) continue;

try {
      // Separar por tabs o múltiples espacios
      let parts = line.split(/\t+/).map((p) => p.trim()).filter((p) => p);
      
      // Si no hay tabs, intentar con espacios múltiples
      if (parts.length < 3) {
        parts = line.split(/\s{2,}/).map((p) => p.trim()).filter((p) => p);
      }

// Si aún no hay suficientes partes, intentar con espacios simples pero detectando patrones
      if (parts.length < 3) {
        // Buscar dirección hexadecimal al inicio
        const hexMatch = line.match(/^([0-9A-Fa-f]{6,8})\s+/);
        if (hexMatch) {
          const rest = line.substring(hexMatch[0].length);
          parts = [hexMatch[1], ...rest.split(/\s{2,}/).map((p) => p.trim()).filter((p) => p)];
        }
      }

if (parts.length < 3) {
        continue; // Línea no válida, saltar
      }

// Extraer datos
      let direccion = "";
      let loop = 1;
      let numero = "";
      let etiqueta = "";
      let tipo = "";
      let zona = "";
      let fechaInstalacion = "";

// Buscar dirección hexadecimal (7 caracteres típicos: 18E2EF1)
      const hexPattern = /^[0-9A-Fa-f]{6,8}$/;
      
      // Buscar patrón "Lazo X" o número de lazo
      const loopPattern = /Lazo\s*(\d+)/i;
      
      // Buscar número de serie (3 dígitos)
      const numeroPattern = /^\d{3}$/;
      
      // Buscar fecha
      const fechaPattern = /\d{2}\/\d{2}\/\d{4}/;

for (let j = 0; j < parts.length; j++) {
        const part = parts[j];
        
        if (hexPattern.test(part) && !direccion) {
          direccion = part.toUpperCase();
        } else if (loopPattern.test(part)) {
          const match = part.match(loopPattern);
          if (match) loop = parseInt(match[1], 10);
        } else if (numeroPattern.test(part) && !numero) {
          numero = part;
        } else if (fechaPattern.test(part)) {
          fechaInstalacion = part;
        } else if (
          (part.toLowerCase().includes("det") ||
           part.toLowerCase().includes("sirena") ||
           part.toLowerCase().includes("pulsador") ||
           part.toLowerCase().includes("módulo") ||
           part.toLowerCase().includes("modulo")) &&
          !tipo
        ) {
          tipo = part;
        } else if (
          part.toUpperCase() === part &&
          part.length > 2 &&
          !part.match(/^\d+$/) &&
          !hexPattern.test(part)
        ) {
          // Palabras en mayúsculas podrían ser zona
          if (!zona) {
            zona = part;
          } else if (!etiqueta) {
            etiqueta = part;
          }
        } else if (!etiqueta && part.length > 3) {
          etiqueta = part;
        }
      }

// Si encontramos al menos dirección o número, crear el registro
      if (direccion || numero) {
        // Si no tenemos tipo, intentar inferirlo de la etiqueta
        if (!tipo && etiqueta) {
          const etiquetaLower = etiqueta.toLowerCase();
          if (etiquetaLower.includes("det") || etiquetaLower.includes("óptico") || etiquetaLower.includes("optico")) {
            tipo = "Det. Óptico";
          } else if (etiquetaLower.includes("sirena") || etiquetaLower.includes("horn")) {
            tipo = "Sirena";
          } else if (etiquetaLower.includes("pulsador") || etiquetaLower.includes("mcp")) {
            tipo = "Pulsador";
          } else if (etiquetaLower.includes("módulo") || etiquetaLower.includes("modulo")) {
            tipo = "Módulo";
          }
        }

rows.push({
          id: crypto.randomUUID(),
          selected: true,
          direccion,
          loop,
          numero: numero || String(rows.length + 1).padStart(3, "0"),
          etiqueta: etiqueta || `Equipo ${rows.length + 1}`,
          tipo: tipo || "Detector",
          zona: zona || "SIN ZONA",
          fechaInstalacion,
          rawLine: line,
        });
      }
    } catch {
      errors.push(`Error en línea ${i + 1}: ${line.substring(0, 50)}...`);
    }
  }

if (rows.length === 0 && lines.length > 0) {
    errors.push("No se encontraron equipos válidos. Verifique que el formato sea correcto.");
  }

return { rows, errors };
}

// Mapear tipo INIM a DeviceTypeKey
function mapINIMTypeToDeviceType(tipo: string): DeviceTypeKey {
  const tipoLower = tipo.toLowerCase();
  
  if (tipoLower.includes("óptico") || tipoLower.includes("optico") || tipoLower.includes("humo")) {
    return "detector_humo";
  }
  if (tipoLower.includes("térm") || tipoLower.includes("term") || tipoLower.includes("calor")) {
    return "detector_termico";
  }
  if (tipoLower.includes("sirena") || tipoLower.includes("sounder")) {
    return "sirena";
  }
  if (tipoLower.includes("pulsador") || tipoLower.includes("manual")) {
    return "pulsador";
  }
  if (tipoLower.includes("módulo") || tipoLower.includes("modulo") || tipoLower.includes("zona")) {
    return "modulo_entrada";
  }
  
  return "detector_humo";
}

interface INIMPDFImporterProps {
  projectId: string;
  onImportComplete?: (count: number) => void;
}

export function INIMPDFImporter({ projectId, onImportComplete }: INIMPDFImporterProps) {
  const { addMultipleEquipment } = useEquipment(projectId);
  const fileInputRef = useRef<HTMLInputElement>(null);

const [isOpen, setIsOpen] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [parsedRows, setParsedRows] = useState<INIMEquipmentRow[]>([]);
  const [parseErrors, setParseErrors] = useState<string[]>([]);
  const [fileName, setFileName] = useState("");

const handleFileSelect = () => {
    fileInputRef.current?.click();
  };

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

setIsProcessing(true);
    setFileName(file.name);
    setParsedRows([]);
    setParseErrors([]);

try {
      let text = "";

if (file.type === "text/plain" || file.type === "text/csv" || file.name.endsWith(".txt") || file.name.endsWith(".csv")) {
        text = await file.text();
      } else if (file.type === "application/pdf") {
        // Para PDFs, usar la API de pdf.js si está disponible
        // Por ahora, mostrar un mensaje indicando cómo copiar el texto
        setParseErrors([
          "Para importar desde PDF: Abra el PDF, seleccione todo el texto (Ctrl+A), cópielo (Ctrl+C) y péguelo en un archivo .txt",
          "Luego seleccione ese archivo .txt para importar.",
        ]);
        setIsProcessing(false);
        setIsOpen(true);
        return;
      } else {
        setParseErrors(["Formato de archivo no soportado. Use TXT, CSV o PDF."]);
        setIsProcessing(false);
        setIsOpen(true);
        return;
      }

const toggleRow = (id: string) => {
    setParsedRows((rows) =>
      rows.map((row) =>
        row.id === id ? { ...row, selected: !row.selected } : row
      )
    );
  };

const toggleAll = (selected: boolean) => {
    setParsedRows((rows) => rows.map((row) => ({ ...row, selected })));
  };

const handleImport = () => {
    const selectedRows = parsedRows.filter((row) => row.selected);
    if (selectedRows.length === 0) return;

const equipmentToAdd = selectedRows.map((row) => ({
      projectId,
      deviceType: mapINIMTypeToDeviceType(row.tipo),
      model: "",
      loop: row.loop,
      address: parseInt(row.numero, 10) || 0,
      location: row.zona,
      serialNumber: row.direccion,
      status: "pending" as const,
      notes: row.etiqueta,
      inspectionDate: row.fechaInstalacion || undefined,
    }));

addMultipleEquipment(equipmentToAdd);
    
    if (onImportComplete) {
      onImportComplete(selectedRows.length);
    }

setIsOpen(false);
    setParsedRows([]);
    setParseErrors([]);
    setFileName("");
  };

const handleClose = () => {
    setIsOpen(false);
    setParsedRows([]);
    setParseErrors([]);
    setFileName("");
  };

const selectedCount = parsedRows.filter((r) => r.selected).length;

return (
    <>
      <input
        ref={fileInputRef}
        type="file"
        accept=".pdf,.txt,.csv"
        className="hidden"
        onChange={handleFileChange}
      />

<Button
        variant="outline"
        className="gap-2 touch-active"
        onClick={handleFileSelect}
        disabled={isProcessing}
      >
        {isProcessing ? (
          <Loader2 className="w-4 h-4 animate-spin" />
        ) : (
          <FileUp className="w-4 h-4" />
        )}
        Importar desde PDF INIM
      </Button>

<Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Download className="w-5 h-5 text-primary" />
              Importar Equipos INIM
            </DialogTitle>
            <DialogDescription>
              {fileName && <span className="font-medium">{fileName}</span>}
              {parsedRows.length > 0 && (
                <span className="ml-2">
                  - {parsedRows.length} equipos encontrados
                </span>
              )}
            </DialogDescription>
          </DialogHeader>

{/* Errores */}
          {parseErrors.length > 0 && (
            <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20 mb-4">
              <div className="flex items-start gap-2">
                <AlertCircle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" />
                <div className="space-y-1">
                  {parseErrors.map((error, idx) => (
                    <p key={idx} className="text-sm text-destructive">
                      {error}
                    </p>
                  ))}
                </div>
              </div>
            </div>
          )}

{/* Tabla de resultados */}
          {parsedRows.length > 0 && (
            <div className="flex-1 min-h-0 overflow-hidden border rounded-lg">
              <div className="max-h-[50vh] overflow-y-auto">
                <Table>
                  <TableHeader className="sticky top-0 bg-muted z-10">
                    <TableRow>
                      <TableHead className="w-10">
                        <Checkbox
                          checked={selectedCount === parsedRows.length}
                          onCheckedChange={(checked) => toggleAll(!!checked)}
                        />
                      </TableHead>
                      <TableHead className="w-20">Loop</TableHead>
                      <TableHead className="w-16">Num</TableHead>
                      <TableHead className="w-24">Dirección</TableHead>
                      <TableHead>Tipo</TableHead>
                      <TableHead>Etiqueta</TableHead>
                      <TableHead>Zona</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {parsedRows.map((row) => (
                      <TableRow
                        key={row.id}
                        className={!row.selected ? "opacity-50" : ""}
                      >
                        <TableCell>
                          <Checkbox
                            checked={row.selected}
                            onCheckedChange={() => toggleRow(row.id)}
                          />
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">L{row.loop}</Badge>
                        </TableCell>
                        <TableCell className="font-mono text-sm">
                          {row.numero}
                        </TableCell>
                        <TableCell className="font-mono text-xs">
                          {row.direccion}
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant="secondary"
                            className="text-xs whitespace-nowrap"
                          >
                            {row.tipo}
                          </Badge>
                        </TableCell>
                        <TableCell className="max-w-[200px] truncate">
                          {row.etiqueta}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {row.zona}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          )}

{/* Acciones */}
          <DialogFooter className="flex-shrink-0 gap-2 sm:gap-0 mt-4">
            <div className="flex-1 text-sm text-muted-foreground">
              {selectedCount > 0 && (
                <span>{selectedCount} equipos seleccionados</span>
              )}
            </div>
            <Button variant="outline" onClick={handleClose}>
              <X className="w-4 h-4 mr-2" />
              Cancelar
            </Button>
            <Button
              onClick={handleImport}
              disabled={selectedCount === 0}
              className="gap-2"
            >
              <Check className="w-4 h-4" />
              Importar {selectedCount > 0 && `(${selectedCount})`}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}
[V0_FILE]typescriptreact:file="components/projects-view.tsx"
"use client";

import { useState } from "react";
import { useProjects, useCurrentProject, useEquipment } from "@/lib/store";
import { MANUFACTURERS } from "@/lib/manufacturers-data";
import { AppHeader } from "./app-header";
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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Progress } from "@/components/ui/progress";
import {
  Plus,
  FolderOpen,
  Trash2,
  MapPin,
  Building2,
  Calendar,
  ListChecks,
  CheckCircle2,
} from "lucide-react";
import { INIMPDFImporter } from "./inim-pdf-importer";
import { useToast } from "@/hooks/use-toast";

export function ProjectsView() {
  const { projects, addProject, deleteProject } = useProjects();
  const { setCurrentProject, currentProjectId, currentProject } = useCurrentProject();
  const { getEquipmentStats } = useEquipment();
  const { toast } = useToast();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [importSuccessCount, setImportSuccessCount] = useState<number | null>(null);
  const [newProject, setNewProject] = useState({
    name: "",
    client: "",
    location: "",
    brand: "",
    description: "",
  });

const handleCreateProject = () => {
    if (!newProject.name || !newProject.brand) return;
    
    const project = addProject(newProject);
    setCurrentProject(project.id);
    setIsDialogOpen(false);
    setNewProject({
      name: "",
      client: "",
      location: "",
      brand: "",
      description: "",
    });
  };

const handleSelectProject = (projectId: string) => {
    setCurrentProject(projectId);
  };

// Verificar si el proyecto actual es INIM
  const isINIMProject = currentProject?.brand === "inim";

return (
    <div className="flex-1 flex flex-col min-h-screen">
      <AppHeader
        title="Proyectos"
        subtitle={`${projects.length} proyectos registrados`}
        actions={
          <div className="flex items-center gap-2">
            {/* Botón de importación INIM - solo visible si hay proyecto INIM seleccionado */}
            {isINIMProject && currentProject && (
              <INIMPDFImporter
                projectId={currentProject.id}
                onImportComplete={handleImportComplete}
              />
            )}
            
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button className="gap-2">
                  <Plus className="w-4 h-4" />
                  Nuevo Proyecto
                </Button>
              </DialogTrigger>
            <DialogContent className="sm:max-w-[500px]">
              <DialogHeader>
                <DialogTitle>Crear Nuevo Proyecto</DialogTitle>
                <DialogDescription>
                  Configure los datos del proyecto y seleccione la marca del sistema de detección.
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Label htmlFor="name">Nombre del Proyecto *</Label>
                  <Input
                    id="name"
                    placeholder="Ej: Edificio Central - Planta 1"
                    value={newProject.name}
                    onChange={(e) =>
                      setNewProject({ ...newProject, name: e.target.value })
                    }
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="client">Cliente</Label>
                  <Input
                    id="client"
                    placeholder="Nombre del cliente"
                    value={newProject.client}
                    onChange={(e) =>
                      setNewProject({ ...newProject, client: e.target.value })
                    }
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="location">Ubicación</Label>
                  <Input
                    id="location"
                    placeholder="Dirección del proyecto"
                    value={newProject.location}
                    onChange={(e) =>
                      setNewProject({ ...newProject, location: e.target.value })
                    }
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="brand">Marca del Sistema *</Label>
                  <Select
                    value={newProject.brand}
                    onValueChange={(value) =>
                      setNewProject({ ...newProject, brand: value })
                    }
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Selecciona la marca" />
                    </SelectTrigger>
                    <SelectContent>
                      {MANUFACTURERS.map((mfr) => (
                        <SelectItem key={mfr.id} value={mfr.id}>
                          <div className="flex items-center gap-2">
                            <span
                              className="w-3 h-3 rounded-full"
                              style={{ backgroundColor: mfr.color }}
                            />
                            {mfr.name}
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button
                  onClick={handleCreateProject}
                  disabled={!newProject.name || !newProject.brand}
                >
                  Crear Proyecto
                </Button>
              </DialogFooter>
            </DialogContent>
            </Dialog>
          </div>
        }
      />

<main className="flex-1 p-4 md:p-6">
        {/* Mensaje de éxito de importación */}
        {importSuccessCount !== null && (
          <div className="mb-4 p-3 rounded-lg bg-primary/10 border border-primary/20 flex items-center gap-3">
            <CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" />
            <span className="text-sm text-foreground">
              Se importaron <strong>{importSuccessCount}</strong> equipos correctamente al proyecto.
            </span>
          </div>
        )}

{projects.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-[60vh] text-center">
            <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-4">
              <FolderOpen className="w-10 h-10 text-muted-foreground" />
            </div>
            <h3 className="text-lg font-medium text-foreground mb-2">
              No hay proyectos
            </h3>
            <p className="text-muted-foreground max-w-sm mb-6">
              Crea tu primer proyecto para comenzar a gestionar equipos de detección de incendios.
            </p>
            <Button onClick={() => setIsDialogOpen(true)} className="gap-2">
              <Plus className="w-4 h-4" />
              Crear Proyecto
            </Button>
          </div>
        ) : (
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {projects.map((project) => {
              const manufacturer = MANUFACTURERS.find(
                (m) => m.id === project.brand
              );
              const stats = getEquipmentStats(project.id);
              const progress =
                stats.total > 0
                  ? Math.round((stats.inspected / stats.total) * 100)
                  : 0;
              const isActive = currentProjectId === project.id;

return (
                <Card
                  key={project.id}
                  className={`cursor-pointer transition-all hover:border-primary/50 ${
                    isActive ? "border-primary ring-1 ring-primary" : ""
                  }`}
                  onClick={() => handleSelectProject(project.id)}
                >
                  <CardHeader className="pb-3">
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-2">
                        {manufacturer && (
                          <span
                            className="w-3 h-3 rounded-full"
                            style={{ backgroundColor: manufacturer.color }}
                          />
                        )}
                        <CardTitle className="text-base">
                          {project.name}
                        </CardTitle>
                      </div>
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-muted-foreground hover:text-destructive"
                            onClick={(e) => e.stopPropagation()}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>
                              Eliminar Proyecto
                            </AlertDialogTitle>
                            <AlertDialogDescription>
                              Esta acción eliminará el proyecto y todos sus equipos asociados. Esta acción no se puede deshacer.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancelar</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={(e) => {
                                e.stopPropagation();
                                deleteProject(project.id);
                              }}
                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            >
                              Eliminar
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                    <CardDescription className="flex items-center gap-1 mt-1">
                      <span
                        className="px-1.5 py-0.5 rounded text-xs font-medium"
                        style={{
                          backgroundColor: manufacturer?.color + "20",
                          color: manufacturer?.color,
                        }}
                      >
                        {manufacturer?.name}
                      </span>
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 gap-3 text-sm">
                      {project.client && (
                        <div className="flex items-center gap-2 text-muted-foreground">
                          <Building2 className="w-4 h-4" />
                          <span className="truncate">{project.client}</span>
                        </div>
                      )}
                      {project.location && (
                        <div className="flex items-center gap-2 text-muted-foreground">
                          <MapPin className="w-4 h-4" />
                          <span className="truncate">{project.location}</span>
                        </div>
                      )}
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <ListChecks className="w-4 h-4" />
                        <span>{stats.total} equipos</span>
                      </div>
                      <div className="flex items-center gap-2 text-muted-foreground">
                        <Calendar className="w-4 h-4" />
                        <span>
                          {new Date(project.createdAt).toLocaleDateString("es")}
                        </span>
                      </div>
                    </div>

<div className="space-y-2">
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-muted-foreground">Progreso</span>
                        <span className="font-medium">{progress}%</span>
                      </div>
                      <Progress value={progress} className="h-2" />
                      <div className="flex justify-between text-xs text-muted-foreground">
                        <span>{stats.inspected} inspeccionados</span>
                        {stats.fault > 0 && (
                          <span className="text-destructive">
                            {stats.fault} con fallos
                          </span>
                        )}
                      </div>
                    </div>

{/* Botón de importación INIM en la tarjeta */}
                    {project.brand === "inim" && (
                      <div className="pt-3 border-t border-border" onClick={(e) => e.stopPropagation()}>
                        <INIMPDFImporter
                          projectId={project.id}
                          onImportComplete={handleImportComplete}
                        />
                      </div>
                    )}
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}</article></body></html>