import { useState } from "react"; import { Head, useForm, Link, router } from "@inertiajs/react"; import { Upload, X, CheckCircle, AlertCircle, FileSpreadsheet, ArrowLeft, Download, FileText, Wifi } from "lucide-react"; import { dashboard } from '@/routes'; interface ImportProps { flash?: { success?: string; error?: string; }; templateUrl?: string; } export default function Import({ flash, templateUrl }: ImportProps) { const { data, setData, post, processing, errors, reset } = useForm({ file: null as File | null, }); const [dragActive, setDragActive] = useState(false); const [preview, setPreview] = useState(null); const [successMessage, setSuccessMessage] = useState(flash?.success || null); const [errorMessage, setErrorMessage] = useState(flash?.error || null); const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { if (file.size > 10 * 1024 * 1024) { setErrorMessage('El archivo no debe pesar más de 10MB.'); return; } const validTypes = [ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel', 'text/csv' ]; if (!validTypes.includes(file.type) && !file.name.endsWith('.csv') && !file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) { setErrorMessage('El archivo debe ser Excel (.xlsx, .xls) o CSV (.csv).'); return; } setData('file', file); setPreview(file.name); setErrorMessage(null); } }; const handleDrag = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }; const handleDrop = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); setDragActive(false); const file = e.dataTransfer.files?.[0]; if (file) { const fakeEvent = { target: { files: [file] } } as unknown as React.ChangeEvent; handleFileChange(fakeEvent); } }; const submit = (e: React.FormEvent) => { e.preventDefault(); if (!data.file) { setErrorMessage('Debes seleccionar un archivo para importar.'); return; } post('/equipos-red/importar', { onSuccess: (page) => { const flashData = page.props.flash as { success?: string; error?: string } | undefined; if (flashData?.success) { setSuccessMessage(flashData.success); } else { setSuccessMessage('✅ Importación completada exitosamente.'); } reset(); setPreview(null); setTimeout(() => setSuccessMessage(null), 5000); setTimeout(() => { router.visit('/equipos-red', { preserveScroll: true, }); }, 1500); }, onError: (errors) => { const errorMsg = errors.file || 'Error al importar el archivo.'; setErrorMessage(errorMsg); setTimeout(() => setErrorMessage(null), 5000); } }); }; const clearFile = () => { setData('file', null); setPreview(null); }; const downloadTemplate = () => { window.location.href = '/equipos-red/plantilla'; }; return ( <>

{/* ===== HEADER ===== */}

Importar Equipos de Red

Importa routers, antenas y equipos de conectividad desde Excel o CSV

Volver

{/* ===== MENSAJES ===== */} {successMessage && (

{successMessage}

)} {errorMessage && (

{errorMessage}

)} {/* ===== FORMULARIO ===== */}

{/* ===== INSTRUCCIONES ===== */}

Instrucciones:

El archivo debe tener los encabezados en la primera fila
Campo obligatorio: codigo_local (código local de la institución)
El sistema buscará automáticamente el nombre y nivel de la IE
Si el código local no existe en el sistema, el equipo NO se importará
Campos opcionales: descripcion, marca, modelo, mac, estado
Si la MAC coincide, el equipo se actualizará
Formatos soportados: .xlsx, .xls, .csv
Tamaño máximo: 10MB

{/* ===== ÁREA DE DROP/UPLOAD ===== */}

{preview ? (

{preview}

Haz clic o arrastra para cambiar el archivo

) : (

{dragActive ? 'Suelta tu archivo aquí' : 'Arrastra o haz clic para subir tu archivo'}

Excel (.xlsx, .xls) o CSV (.csv) - max 10MB

)}

{errors.file && (

{errors.file}

)} {/* ===== BOTONES ===== */}

Cancelar

{/* ===== PASOS ===== */}

1

Descarga la plantilla

2

Completa los datos en Excel/CSV

(Solo codigo_local es obligatorio)

✓

Sube y importa

); } Import.layout = { breadcrumbs: [ { title: 'Dashboard', href: dashboard() }, { title: 'Equipos de Red', href: '/equipos-red' }, { title: 'Importar', href: '#' } ], };