112:"ExplicitChatIdProvider" 113:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"$112"] 114:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$8d","$7c","$85","$7f","$7e","$8e","$80","$8f","$90","$91","$7d","$92","$87","$8a","$84","$83","$88","$89","$93","$94","$86","$95","$82"],"SWRDataProvider"] 116:[] 117:[["b_aaNfcoxy4cn",null],["b_8AQpHUzEdnj",null],["b_HrOY7Y0rfrH",null]] 118:[["b_aaNfcoxy4cn",{"templateVersionId":null,"templateCanonId":null}],["b_8AQpHUzEdnj",{"templateVersionId":null,"templateCanonId":null}],["b_HrOY7Y0rfrH",{"templateVersionId":null,"templateCanonId":null}]] 119:[["5guOouKgnCE","$D2025-05-27T21:08:56.971Z"],["b_EUiyTY0lSjO","$D2025-05-27T21:40:10.070Z"],["b_6iZ4VF6styW","$D2025-05-27T21:44:33.374Z"],["b_b1iSpHSMny5","$D2025-05-27T21:49:02.963Z"],["b_dYL1Hxkj151","$D2025-05-28T14:18:38.292Z"],["b_WGKHRv9Qz2N","$D2025-05-28T14:30:00.899Z"],["b_ZqsPDkZe23Z","$D2025-05-28T14:39:54.978Z"],["b_7lzgCxjwNlD","$D2025-05-28T14:43:48.835Z"],["b_R9NPz60Nbvm","$D2025-05-28T14:49:59.187Z"],["b_NNiDJ4Cp24O","$D2025-05-28T14:55:46.672Z"],["b_pG6lHpsbgFJ","$D2025-05-28T15:06:52.591Z"],["b_9RYhoWAtYvg","$D2025-05-28T15:11:56.628Z"],["b_TPvKxo4NeV2","$D2025-05-28T15:36:33.394Z"],["b_UNQPq2gxSAZ","$D2025-05-28T15:38:18.233Z"],["b_GET2I4O6pRx","$D2025-05-28T15:39:27.553Z"],["b_ryEHcEPQElH","$D2025-05-28T16:00:33.887Z"],["b_sDStk1BlSfH","$D2025-05-28T16:01:33.622Z"],["b_V0TE4E97aC8","$D2025-05-28T16:06:24.959Z"],["b_u4QEpLtRMLS","$D2025-05-28T16:11:38.292Z"],["b_1dmUfQWVvhc","$D2025-05-28T16:27:18.451Z"],["b_kG8UrDpRrot","$D2025-05-28T16:32:55.263Z"],["b_GfoURv6yIwe","$D2025-05-28T16:34:19.601Z"],["b_GwGSyndItgf","$D2025-05-28T16:41:57.112Z"],["b_9mzTtGFqrly","$D2025-05-28T16:45:06.597Z"],["b_XikpsC9fU3H","$D2025-05-28T16:46:38.869Z"],["b_TYG4nQMSE82","$D2025-05-28T16:47:58.485Z"],["b_Fy0QpZnWdGb","$D2025-05-28T16:55:35.088Z"],["b_SXO7JYFd9MW","$D2025-05-28T16:57:07.766Z"],["b_t4XHRqCNpN2","$D2025-05-28T16:58:22.733Z"],["b_eDZz7Pv8pxJ","$D2025-05-28T17:02:51.023Z"],["b_nBNeGcnIxq1","$D2025-05-28T17:05:09.862Z"],["b_iAylH0XVncI","$D2025-05-28T17:14:05.896Z"],["b_bq0FPTanu3M","$D2025-05-28T17:15:42.472Z"],["b_6x70QvCFVyd","$D2025-05-28T17:20:14.755Z"],["b_bocZWpcYkee","$D2025-05-28T17:26:18.106Z"],["b_7SzGeN39CNt","$D2025-05-28T17:29:05.231Z"],["b_nFaMlND3VVX","$D2025-05-28T17:43:02.757Z"],["b_ExpcCzY5Jsz","$D2025-05-28T17:52:28.628Z"],["b_AvPq3vKxvVE","$D2025-05-28T17:59:41.721Z"],["b_dQ4bXt0HbO0","$D2025-05-28T18:15:15.467Z"],["b_z0A8QkWjYdO","$D2025-05-28T18:16:24.692Z"],["b_NhvB8whLb5k","$D2025-05-28T18:18:34.842Z"],["b_mkk9YKjIOjx","$D2025-05-28T18:25:01.213Z"],["b_wzdMq24onhr","$D2025-05-28T18:34:54.667Z"],["b_D0Z47n85S8x","$D2025-05-28T18:40:30.430Z"],["b_yVCB3KM4OI0","$D2025-05-28T18:47:52.597Z"],["b_9l4XKCMKcX7","$D2025-05-28T18:54:01.256Z"],["b_T4HCru4tmp6","$D2025-05-28T19:00:48.486Z"],["b_5wKpAWr6DZ1","$D2025-05-28T19:06:20.741Z"],["b_F1iAUTP0J0I","$D2025-05-28T19:07:45.652Z"],["b_RVyWhYMYUij","$D2025-05-28T19:14:51.381Z"],["b_I90FMjQL6cf","$D2025-05-28T19:15:52.815Z"],["b_nIbVJmymCBr","$D2025-05-28T19:17:23.372Z"],["b_uGiOLTyOxPt","$D2025-05-28T19:21:12.526Z"],["b_ZehUweOpN2l","$D2025-05-28T19:25:12.236Z"],["b_GAySVlr7kPU","$D2025-05-28T19:28:20.291Z"],["b_UkAYZHBnAqW","$D2025-05-28T19:31:05.850Z"],["b_TcUq0xnHWPw","$D2025-05-28T19:34:23.445Z"],["b_TrvbZ6sVOGI","$D2025-05-28T19:40:27.014Z"],["b_h4k3wPLVX9V","$D2025-05-28T19:46:31.241Z"],["b_QEbUIh8Dn6r","$D2025-05-28T19:54:50.510Z"],["b_O7U6dBJIyj5","$D2025-05-28T20:02:47.120Z"],["b_hL8fhJlVNl2","$D2025-05-30T18:32:38.444Z"],["b_TG2e0M358oP","$D2025-05-30T18:41:42.745Z"],["b_IEKCyyENcRc","$D2025-05-30T19:11:09.715Z"],["b_8l1FwkyDzu0","$D2025-05-30T19:16:50.789Z"],["b_vPeRqJdI0Gp","$D2025-05-30T19:20:39.469Z"],["b_bDVLApyfSnG","$D2025-05-30T19:31:12.373Z"],["b_qYzeMfmjPp3","$D2025-05-30T19:36:22.945Z"],["b_RHa61rYMa5B","$D2025-05-30T19:49:07.971Z"],["b_6zUQijt3gb0","$D2025-05-30T19:53:59.103Z"],["b_fdIS6r5VCg1","$D2025-05-30T20:08:33.703Z"],["b_pg5rUA2qBM8","$D2025-05-30T20:11:23.177Z"],["b_MGaeodoRu1U","$D2025-05-30T20:22:47.501Z"],["b_cCf9MuuW3fq","$D2025-05-30T20:28:04.729Z"],["b_C5qwfCRPCLR","$D2025-05-30T20:35:19.329Z"],["b_BObQQ0F7QtH","$D2025-05-30T20:38:29.776Z"],["b_ppcQjbGVqzI","$D2025-05-30T20:40:50.527Z"],["b_AAy32XPosm8","$D2025-05-30T20:41:53.946Z"],["b_1cKKDWlxTJD","$D2025-05-30T20:42:55.385Z"],["b_j8cBCS9nRC6","$D2025-05-30T20:44:56.665Z"],["b_Dw3LLcNzG3f","$D2025-05-30T20:49:17.465Z"],["b_aaNfcoxy4cn","$D2025-05-30T20:52:29.253Z"],["b_8AQpHUzEdnj","$D2025-06-02T14:22:34.588Z"],["b_Saz98U0tKsS","$D2025-06-02T14:31:23.703Z"],["b_fva2IXBmKJk","$D2025-06-02T14:45:40.520Z"],["b_SeM3Id9rZ1t","$D2025-06-02T14:57:12.841Z"],["b_HrOY7Y0rfrH","$D2025-06-02T15:06:55.545Z"]] 11a:[["b_aaNfcoxy4cn",false],["b_8AQpHUzEdnj",false],["b_HrOY7Y0rfrH",false]] 11b:[["b_aaNfcoxy4cn","$undefined"],["b_8AQpHUzEdnj","$undefined"],["b_HrOY7Y0rfrH","$undefined"]] 11c:[["b_aaNfcoxy4cn",null],["b_8AQpHUzEdnj",null],["b_HrOY7Y0rfrH",null]] 11d:[["b_aaNfcoxy4cn",true],["b_8AQpHUzEdnj",true],["b_HrOY7Y0rfrH",true]] 11e:[["b_aaNfcoxy4cn",true],["b_8AQpHUzEdnj",true],["b_HrOY7Y0rfrH",true]] 11f:[] 120:T52f,El usuario quiere que: - Cada vez que se modifique un prospecto, se agregue un prospecto, o se agregue una cotización, aparezca el mensaje correspondiente en la actividad reciente del inicio. - Hacer funcional el botón "Ver todas las actividades". Para esto necesito: - Asegurarme de que todas las acciones relevantes llamen a `registerActivity` con los parámetros correctos. - Crear una nueva pestaña o modal para mostrar todas las actividades cuando se presione "Ver todas las actividades". - Revisar el código actual para ver dónde se están registrando las actividades y asegurarme de que todas las acciones importantes estén cubiertas. Mirando el código actual, veo que ya hay algunas llamadas a `registerActivity`: - En `handleProspectoCreado` - cuando se agrega un nuevo prospecto - En `updateClientData` - cuando se actualiza información del cliente - En `quote-form.tsx` - cuando se crea una nueva cotización (esto ya está implementado) Necesito: - Asegurarme de que todas estas llamadas estén funcionando correctamente - Agregar una nueva pestaña "todas-actividades" para mostrar todas las actividades - Hacer que el botón "Ver todas las actividades" navegue a esta nueva pestaña - Crear una vista completa de actividades con filtros y paginación Voy a usar QuickEdit para hacer estos cambios.121:Ta1f44,[V0_FILE]typescriptreact:file="client-profile-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { ArrowLeft, Mail, Phone, User, FileText, Plus, Check, X, Download, Trash2 } from "lucide-react" export default function ClientProfileModal() { const [activeTab, setActiveTab] = useState("ventas") const [activeManagementTab, setActiveManagementTab] = useState("todas") const [activeQuotesTab, setActiveQuotesTab] = useState("todas") return (

{/* Header */}

PERFIL DEL CLIENTE

{/* Client Info */} ANTECEDENTES CLIENTE

JOSE MANUEL ALARCON GODOY

RUT 13464027-8

ALARCON.JM@OUTLOOK.COM

TEL: 997452509

ELDA CAZORLA DE PAZ

{/* Main Content */}

VENTAS HISTÓRICAS TAREAS PENDIENTES {/* Ventas Históricas Content */}

CÓDIGO TIPO FECHA PRODUCTO 87381 OVS 07-05-2025 PLANES AT / PLAN DUAL / CINERACIÓN COBRIZA + SEPF ESTÁNDAR / CINERACIÓN COBRIZA + SEPF STANDARD

{/* Tareas Pendientes Content */}

No se encontraron tareas pendientes

{/* Cotizaciones Section */}

COTIZACIONES

N° SERVICIO DÍAS RESTANTES ESTADO ACCIONES 7126 DUAL-CCR-N 0 DÍAS FINALIZADA

{/* Gestiones Section */}

GESTIONES

ID COTIZACIÓN GESTIÓN FECHA EJECUTIVO 7125 CIERRE DE VENTA: FINALIZA LA COTIZACIÓN 07-05-2025 13:14:37 MARGARITA PEREZ SE CREA CLIENTE 07-05-2025 13:10:54 MARGARITA PEREZ 7126 SE INGRESA COTIZACIÓN 07-05-2025 13:10:01 MARGARITA PEREZ SE MODIFICÓ EL EJECUTIVO RESPONSABLE 07-05-2025 13:09:45 MARGARITA PEREZ SE INGRESA PROSPECTO 07-05-2025 13:08:28 MARGARITA PEREZ

) } [V0_FILE]png:file="public/logo_acoger.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo_acoger-QySpsjKlcERnUkEHRdzBceKzdDegVw.png" isMerged="true" [V0_FILE]typescriptreact:file="quote-detail.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { ArrowLeft, Download, FileText } from "lucide-react" import { format } from "date-fns" import { useRef } from "react" import html2canvas from "html2canvas" import jsPDF from "jspdf" import { toast } from "@/components/ui/use-toast" export default function QuoteDetail({ quote, onClose, clientData }) { // Añadir una referencia al contenido que queremos exportar const contentRef = useRef(null) // Función para exportar a PDF const handleExportToPDF = async () => { if (!contentRef.current) return try { // Mostrar un mensaje de carga toast({ title: "Generando PDF", description: "Por favor espere mientras se genera el documento...", }) // Capturar el contenido HTML como una imagen const canvas = await html2canvas(contentRef.current, { scale: 2, // Mayor escala para mejor calidad useCORS: true, // Permitir imágenes de otros dominios logging: false, backgroundColor: "#ffffff", }) // Crear un nuevo documento PDF const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a4", }) // Obtener dimensiones const imgWidth = 210 // A4 width in mm const imgHeight = (canvas.height * imgWidth) / canvas.width // Añadir la imagen al PDF const imgData = canvas.toDataURL("image/png") pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight) // Si el contenido es más largo que una página, añadir más páginas let heightLeft = imgHeight let position = 0 while (heightLeft > 297) { // A4 height in mm position = heightLeft - 297 pdf.addPage() pdf.addImage(imgData, "PNG", 0, -position, imgWidth, imgHeight) heightLeft -= 297 } // Guardar el PDF pdf.save(`Cotizacion_${quote.id}.pdf`) // Notificar éxito toast({ title: "PDF generado correctamente", description: "El documento ha sido descargado.", variant: "success", }) } catch (error) { console.error("Error al generar el PDF:", error) toast({ title: "Error al generar el PDF", description: "Hubo un problema al crear el documento. Por favor, inténtelo de nuevo.", variant: "destructive", }) } } // Obtener la descripción del tipo de venta const getSaleTypeDescription = () => { return quote.saleType?.description || "Venta de uso futuro" } return (

Detalle de Cotización

{/* Encabezado */}

COTIZACIÓN

No {quote.id}

ARZOBISPO VALDIVIESO 555, RECOLETA - SANTIAGO

FECHA:{" "} {quote.createdAt ? format(new Date(quote.createdAt), "dd-MM-yyyy HH:mm") : format(new Date(), "dd-MM-yyyy HH:mm")}

TELÉFONO: 2 2998 9400

PERÍODO / VALOR UF: {quote.period || "2025-05"} / $ {(quote.ufValue || 39134).toLocaleString()}

EMAIL: www.acoger.cl

TIPO DE VENTA: {getSaleTypeDescription()}

{/* Datos del vendedor y cliente */}

DATOS DEL VENDEDOR

VENDEDOR: CRISTIAN MENESES MENESES

TELÉFONO: 229989223

EMAIL: CRISTIAN.MENESES@ACOGER.CL

SUPERVISOR:

DATOS DEL CLIENTE

CLIENTE:{" "} {clientData?.name ? `${clientData.name} ${clientData.lastName} ${clientData.secondLastName}` : "LUCIO ALBERTO ANTONIO GUTIERREZ HERANE"}

IDENTIFICACIÓN: {clientData?.id ? `RUT / ${clientData.id}` : "RUT / 12161765-K"}

TELÉFONO: {clientData?.phone || "984187920"}

EMAIL: {clientData?.email || "LUCIO.GUTIERREZH@GMAIL.COM"}

{/* Financiamiento */}

FINANCIAMIENTO

DESCUENTO:{" "} {quote.financing?.hasDiscount ? `${quote.financing.discountPercentage || 0}%` : "0%"}

TIPO DE PAGO: {quote.financing?.paymentMethod || "Contado"}

FORMA DE PAGO:{" "} {quote.financing?.paymentTypeLabel || quote.financing?.paymentType || "Efectivo"}

CUOTAS: {quote.financing?.installments || 1}

MONTO CUOTAS: $ {(quote.financing?.installmentAmount || quote.totalAmount || 0).toLocaleString()}

{quote.financing?.receiptNumber && (

N° RECIBO DE DINERO: {quote.financing.receiptNumber}

)}

{/* Detalle de la cotización */}

DETALLE DE LA COTIZACIÓN

UNIDAD NEGOCIO NOMBRE SKU PRECIO UNITARIO CANTIDAD PRECIO NETO IVA TOTAL {quote.products && quote.products.length > 0 ? ( quote.products.map((product, index) => ( {product.unit} {product.name} {product.sku} ${product.unitPrice.toLocaleString()} {product.quantity} ${product.netPrice.toLocaleString()} ${product.iva.toLocaleString()} ${product.total.toLocaleString()} )) ) : ( Cementerio Recoleta {quote.service || "Servicios Funerarios Plan 3"} SE-9 $4,500,410 1 $3,781,857 $718,553 $4,500,410 )}

Cotización válida por {quote.daysRemaining || 30} días*

{/* Usar datos reales si están disponibles, o valores predeterminados si no */}

TOTAL NETO: $ {( (quote.products && quote.products.reduce((sum, p) => sum + p.netPrice, 0)) || 3781857 ).toLocaleString()}

IVA (19%): $ {((quote.products && quote.products.reduce((sum, p) => sum + p.iva, 0)) || 718553).toLocaleString()}

TOTAL: $ {( (quote.products && quote.products.reduce((sum, p) => sum + p.total, 0)) || 4500410 ).toLocaleString()}

DESCUENTO: ${(quote.financing?.discount || 0).toLocaleString()}

TOTAL A PAGAR: ${(quote.totalAmount || 4530428).toLocaleString()}

{/* Beneficiarios */} {quote.beneficiaries && quote.beneficiaries.length > 0 && (

BENEFICIARIOS

RUT NOMBRES Y APELLIDOS FECHA NACIMIENTO FECHA DEFUNCIÓN GÉNERO PARENTESCO {quote.beneficiaries.map((beneficiary, index) => ( {beneficiary.rut} {beneficiary.name} {beneficiary.birthDate} {beneficiary.deathDate || ""} {beneficiary.gender} {beneficiary.relationship} ))}

)}

{/* Botones de acción */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Dashboard from "@/dashboard" export default function Home() { return } [V0_FILE]json:file="package.json" isMerged="true" { "dependencies": { "xlsx": "^0.18.5" } } [V0_FILE]typescriptreact:file="components/estado-badge.tsx" isQuickEdit="true" isMerged="true" interface EstadoBadgeProps { estado: string } export function EstadoBadge({ estado }: EstadoBadgeProps) { let bgColor = "" switch (estado.toUpperCase()) { case "FINALIZADO": bgColor = "bg-red-600" break case "EN PROCESO": bgColor = "bg-yellow-500" break case "NUEVO": bgColor = "bg-green-500" break default: bgColor = "bg-gray-500" } return ( {estado.toUpperCase()} ) } [V0_FILE]typescriptreact:file="components/origen-badge.tsx" isMerged="true" interface OrigenBadgeProps { origen: string } export function OrigenBadge({ origen }: OrigenBadgeProps) { let bgColor = "" switch (origen.toUpperCase()) { case "WEB": bgColor = "bg-blue-600" break case "REFERIDO": bgColor = "bg-purple-500" break case "DIRECTO": bgColor = "bg-teal-500" break default: bgColor = "bg-gray-500" } return ( {origen.toUpperCase()} ) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function validarRut(rut: string): boolean { // Eliminar puntos y guiones const rutLimpio = rut.replace(/\./g, "").replace(/-/g, "") // Verificar que el RUT tenga al menos 2 caracteres (1 dígito + dígito verificador) if (rutLimpio.length < 2) return false // Obtener el dígito verificador (último carácter) const dv = rutLimpio.charAt(rutLimpio.length - 1).toUpperCase() // Obtener el cuerpo del RUT (todos los dígitos excepto el verificador) const rutSinDv = rutLimpio.slice(0, -1) // Verificar que el cuerpo del RUT solo contenga números if (!/^\d+$/.test(rutSinDv)) return false // Calcular el dígito verificador esperado let suma = 0 let multiplicador = 2 // Recorrer el RUT de derecha a izquierda for (let i = rutSinDv.length - 1; i >= 0; i--) { suma += Number.parseInt(rutSinDv.charAt(i)) * multiplicador multiplicador = multiplicador === 7 ? 2 : multiplicador + 1 } const resto = suma % 11 const dvEsperado = resto === 0 ? "0" : resto === 1 ? "K" : String(11 - resto) // Comparar el dígito verificador calculado con el proporcionado return dv === dvEsperado } [V0_FILE]typescriptreact:file="components/ingreso-fecha.tsx" isQuickEdit="true" isMerged="true" interface IngresoFechaProps { fechaHora: string } export function IngresoFecha({ fechaHora }: IngresoFechaProps) { // Función para formatear la fecha y hora const formatearFechaHora = (fechaHoraStr: string) => { try { // Si ya está en formato DD-MM-YYYY HH:MM:SS if (fechaHoraStr.includes("-")) { const [fecha, hora] = fechaHoraStr.split(" ") return { fecha, hora } } // Si está en formato ISO o formato de Date.toLocaleString() const fecha = new Date(fechaHoraStr) // Verificar si la fecha es válida if (isNaN(fecha.getTime())) { // Si no es una fecha válida, intentar parsear el formato de toLocaleString() const partes = fechaHoraStr.split(", ") if (partes.length === 2) { return { fecha: partes[0], hora: partes[1] } } // Si tiene formato DD/MM/YYYY, HH:MM:SS const partes2 = fechaHoraStr.split(", ") if (partes2.length === 2) { return { fecha: partes2[0], hora: partes2[1] } } // Si tiene otro formato con /, intentar extraer if (fechaHoraStr.includes("/")) { const [fecha, hora] = fechaHoraStr.split(" ") return { fecha, hora } } return { fecha: "Fecha inválida", hora: "" } } const dia = fecha.getDate().toString().padStart(2, "0") const mes = (fecha.getMonth() + 1).toString().padStart(2, "0") const anio = fecha.getFullYear() const horas = fecha.getHours().toString().padStart(2, "0") const minutos = fecha.getMinutes().toString().padStart(2, "0") const segundos = fecha.getSeconds().toString().padStart(2, "0") return { fecha: `${dia}-${mes}-${anio}`, hora: `${horas}:${minutos}:${segundos}`, } } catch (error) { console.error("Error al formatear fecha:", error, fechaHoraStr) return { fecha: "Fecha inválida", hora: "" } } } const { fecha, hora } = formatearFechaHora(fechaHora) return (

{fecha} {hora}

) } [V0_FILE]typescriptreact:file="lib/regiones-comunas.ts" isMerged="true" // Datos de regiones y comunas de Chile export const regionesComunas = { "13": { nombre: "Región Metropolitana", comunas: [ "Santiago", "Providencia", "Las Condes", "Ñuñoa", "La Florida", "Maipú", "Puente Alto", "San Bernardo", "Vitacura", "Lo Barnechea", "Huechuraba", "Recoleta", "Independencia", "Conchalí", "Quilicura", "Renca", "Cerro Navia", "Quinta Normal", "Lo Prado", "Pudahuel", "Estación Central", "Cerrillos", "Pedro Aguirre Cerda", "Lo Espejo", "San Miguel", "San Joaquín", "La Granja", "San Ramón", "La Pintana", "El Bosque", "La Cisterna", "Peñalolén", "Macul", "La Reina", "Colina", "Lampa", "Til Til", "Pirque", "San José de Maipo", "Buin", "Paine", "Calera de Tango", "Padre Hurtado", "Peñaflor", "Talagante", "El Monte", "Isla de Maipo", "Curacaví", "María Pinto", "Melipilla", "San Pedro", "Alhué", ], }, "05": { nombre: "Región de Valparaíso", comunas: [ "Valparaíso", "Viña del Mar", "Concón", "Quilpué", "Villa Alemana", "Limache", "Olmué", "Quillota", "La Calera", "La Cruz", "Nogales", "Hijuelas", "Catemu", "Llaillay", "Panquehue", "San Felipe", "Santa María", "Putaendo", "Calle Larga", "Rinconada", "Los Andes", "San Esteban", "Cabildo", "Petorca", "La Ligua", "Papudo", "Zapallar", "Puchuncaví", "Quintero", "Casablanca", "El Quisco", "El Tabo", "Cartagena", "San Antonio", "Santo Domingo", "Algarrobo", "Juan Fernández", "Isla de Pascua", ], }, "06": { nombre: "Región del Libertador General Bernardo O'Higgins", comunas: [ "Rancagua", "Machalí", "Graneros", "San Francisco de Mostazal", "Doñihue", "Coltauco", "Codegua", "Olivar", "Requínoa", "Rengo", "Malloa", "Quinta de Tilcoco", "San Vicente de Tagua Tagua", "Pichidegua", "Peumo", "Las Cabras", "San Fernando", "Chimbarongo", "Placilla", "Nancagua", "Chépica", "Santa Cruz", "Lolol", "Pumanque", "Palmilla", "Peralillo", "Pichilemu", "Navidad", "Litueche", "La Estrella", "Marchihue", "Paredones", ], }, "07": { nombre: "Región del Maule", comunas: [ "Talca", "Maule", "Pelarco", "San Clemente", "San Rafael", "Pencahue", "Río Claro", "Constitución", "Curepto", "Empedrado", "Linares", "Yerbas Buenas", "Colbún", "Longaví", "Parral", "Retiro", "Villa Alegre", "San Javier", "Cauquenes", "Pelluhue", "Chanco", "Curicó", "Teno", "Romeral", "Molina", "Sagrada Familia", "Hualañé", "Licantén", "Vichuquén", "Rauco", ], }, "08": { nombre: "Región del Biobío", comunas: [ "Concepción", "Talcahuano", "Penco", "Tomé", "Florida", "Hualpén", "Hualqui", "Santa Juana", "Lota", "Coronel", "San Pedro de la Paz", "Chiguayante", "Los Ángeles", "Cabrero", "Tucapel", "Antuco", "Quilleco", "Santa Bárbara", "Quilaco", "Mulchén", "Negrete", "Nacimiento", "Laja", "San Rosendo", "Yumbel", "Alto Biobío", ], }, "09": { nombre: "Región de La Araucanía", comunas: [ "Temuco", "Padre Las Casas", "Carahue", "Nueva Imperial", "Saavedra", "Cholchol", "Teodoro Schmidt", "Freire", "Pitrufquén", "Gorbea", "Loncoche", "Villarrica", "Pucón", "Curarrehue", "Lautaro", "Perquenco", "Galvarino", "Cunco", "Melipeuco", "Vilcún", "Lonquimay", "Angol", "Renaico", "Collipulli", "Los Sauces", "Purén", "Ercilla", "Lumaco", "Victoria", "Traiguén", "Curacautín", ], }, "10": { nombre: "Región de Los Lagos", comunas: [ "Puerto Montt", "Puerto Varas", "Cochamó", "Calbuco", "Maullín", "Los Muermos", "Fresia", "Llanquihue", "Frutillar", "Castro", "Ancud", "Quemchi", "Dalcahue", "Curaco de Vélez", "Quinchao", "Puqueldón", "Chonchi", "Queilén", "Quellón", "Chaitén", "Hualaihué", "Futaleufú", "Palena", "Osorno", "San Pablo", "Puyehue", "Puerto Octay", "Purranque", "Río Negro", "San Juan de la Costa", ], }, "11": { nombre: "Región de Aysén", comunas: [ "Coihaique", "Lago Verde", "Aysén", "Cisnes", "Guaitecas", "Chile Chico", "Río Ibáñez", "Cochrane", "O'Higgins", "Tortel", ], }, "12": { nombre: "Región de Magallanes", comunas: [ "Punta Arenas", "Río Verde", "Laguna Blanca", "San Gregorio", "Porvenir", "Primavera", "Timaukel", "Natales", "Torres del Paine", "Cabo de Hornos", "Antártica", ], }, "01": { nombre: "Región de Tarapacá", comunas: ["Iquique", "Alto Hospicio", "Pozo Almonte", "Camiña", "Colchane", "Huara", "Pica"], }, "02": { nombre: "Región de Antofagasta", comunas: [ "Antofagasta", "Mejillones", "Sierra Gorda", "Taltal", "Calama", "Ollagüe", "San Pedro de Atacama", "Tocopilla", "María Elena", ], }, "03": { nombre: "Región de Atacama", comunas: [ "Copiapó", "Caldera", "Tierra Amarilla", "Chañaral", "Diego de Almagro", "Vallenar", "Alto del Carmen", "Freirina", "Huasco", ], }, "04": { nombre: "Región de Coquimbo", comunas: [ "La Serena", "Coquimbo", "Andacollo", "La Higuera", "Paiguano", "Vicuña", "Illapel", "Canela", "Los Vilos", "Salamanca", "Ovalle", "Combarbalá", "Monte Patria", "Punitaqui", "Río Hurtado", ], }, "14": { nombre: "Región de Los Ríos", comunas: [ "Valdivia", "Corral", "Lanco", "Los Lagos", "Máfil", "Mariquina", "Paillaco", "Panguipulli", "La Unión", "Futrono", "Lago Ranco", "Río Bueno", ], }, "15": { nombre: "Región de Arica y Parinacota", comunas: ["Arica", "Camarones", "Putre", "General Lagos"], }, "16": { nombre: "Región de Ñuble", comunas: [ "Chillán", "Chillán Viejo", "Cobquecura", "Coelemu", "Coihueco", "El Carmen", "Ninhue", "Ñiquén", "Pemuco", "Pinto", "Portezuelo", "Quillón", "Quirihue", "Ránquil", "San Carlos", "San Fabián", "San Ignacio", "San Nicolás", "Treguaco", "Yungay", ], }, } [V0_FILE]typescriptreact:file="components/select-fix.css" isMerged="true" /* Añadir al archivo globals.css o crear un nuevo archivo CSS */ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.5em 1.5em; padding-right: 2.5rem; } /* Asegurarse de que no haya flechas nativas */ select::-ms-expand { display: none; } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { NotificationProvider } from "@/components/notification-system" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Sistema de Gestión", description: "Sistema de gestión de prospectos y clientes", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-inter)", "sans-serif"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "slide-in": "slide-in 0.3s ease-out forwards", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/notification-toast.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { X, CheckCircle, AlertCircle, Info, Bell } from "lucide-react" import { cva } from "class-variance-authority" interface NotificationToastProps { type: "success" | "error" | "info" | "warning" title: string message: string duration?: number onClose?: () => void } // Modificar la definición del toastVariants para corregir el tamaño y posición const toastVariants = cva( "fixed right-4 rounded-lg shadow-lg p-4 flex items-start gap-3 border-l-4 transform transition-all duration-500 ease-in-out z-50", { variants: { type: { success: "bg-green-50 border-green-500 text-green-800", error: "bg-red-50 border-red-500 text-red-800", info: "bg-blue-50 border-blue-500 text-blue-800", warning: "bg-amber-50 border-amber-500 text-amber-800", }, position: { enter: "translate-x-full opacity-0", visible: "translate-x-0 opacity-100", exit: "translate-x-full opacity-0", }, }, defaultVariants: { type: "info", position: "enter", }, }, ) const iconVariants = { success: , error: , info: , warning: , } // Modificar el componente NotificationToast para corregir el tamaño export function NotificationToast({ type, title, message, duration = 5000, onClose }: NotificationToastProps) { const [position, setPosition] = useState<"enter" | "visible" | "exit">("enter") const [isVisible, setIsVisible] = useState(true) useEffect(() => { // Animación de entrada const entryTimer = setTimeout(() => { setPosition("visible") }, 100) // Temporizador para cerrar la notificación const timer = setTimeout(() => { setPosition("exit") setTimeout(() => { setIsVisible(false) if (onClose) onClose() }, 500) }, duration) return () => { clearTimeout(timer) clearTimeout(entryTimer) } }, [duration, onClose]) if (!isVisible) return null return (

{iconVariants[type]}

{title}

{message}

) } export function useNotification() { const [notifications, setNotifications] = useState<(NotificationToastProps & { id: string })[]>([]) const addNotification = (notification: NotificationToastProps) => { const id = Math.random().toString(36).substring(2, 9) setNotifications((prev) => [...prev, { ...notification, id }]) return id } const removeNotification = (id: string) => { setNotifications((prev) => prev.filter((notification) => notification.id !== id)) } const showSuccess = (title: string, message: string, duration?: number) => { return addNotification({ type: "success", title, message, duration }) } const showError = (title: string, message: string, duration?: number) => { return addNotification({ type: "error", title, message, duration }) } const showInfo = (title: string, message: string, duration?: number) => { return addNotification({ type: "info", title, message, duration }) } const showWarning = (title: string, message: string, duration?: number) => { return addNotification({ type: "warning", title, message, duration }) } // Modificar el NotificationContainer para corregir el tamaño y posición const NotificationContainer = () => (

{notifications.map((notification) => ( removeNotification(notification.id)} /> ))}

) return { showSuccess, showError, showInfo, showWarning, NotificationContainer, } } [V0_FILE]typescriptreact:file="components/notification-system.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, useCallback } from "react" import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react" // Tipos de notificaciones type NotificationType = "success" | "error" | "info" | "warning" // Interfaz para una notificación interface Notification { id: string type: NotificationType title: string message: string duration?: number category?: string // Categoría para agrupar notificaciones similares } // Interfaz para el contexto de notificaciones interface NotificationContextType { notifications: Notification[] showNotification: (notification: Omit) => void hideNotification: (id: string) => void showSuccess: (title: string, message: string, category?: string, duration?: number) => void showError: (title: string, message: string, category?: string, duration?: number) => void showInfo: (title: string, message: string, category?: string, duration?: number) => void showWarning: (title: string, message: string, category?: string, duration?: number) => void clearNotificationsByCategory: (category: string) => void } // Crear el contexto const NotificationContext = createContext(undefined) // Proveedor de notificaciones export function NotificationProvider({ children }: { children: React.ReactNode }) { const [notifications, setNotifications] = useState([]) // Función para limpiar notificaciones por categoría const clearNotificationsByCategory = useCallback((category: string) => { setNotifications((prev) => prev.filter((notification) => notification.category !== category)) }, []) // Función para mostrar una notificación const showNotification = useCallback( (notification: Omit) => { const id = Math.random().toString(36).substring(2, 9) const newNotification = { ...notification, id } // Si hay una categoría, eliminar notificaciones anteriores de la misma categoría if (notification.category) { setNotifications((prev) => prev.filter((n) => n.category !== notification.category)) } // Verificar si ya existe una notificación con título o mensaje similar const isDuplicate = notifications.some( (n) => // Verificar si el título es similar (n.title.toLowerCase().includes("prospecto") && notification.title.toLowerCase().includes("prospecto")) || // O si el mensaje es similar (n.message.toLowerCase().includes("prospecto") && notification.message.toLowerCase().includes("prospecto")) || // O si el título es sobre modificación de cliente (n.title.toLowerCase().includes("datos") && notification.title.toLowerCase().includes("datos")), ) // Solo agregar si no es un duplicado if (!isDuplicate) { setNotifications((prev) => [...prev, newNotification]) // Auto-eliminar después de la duración especificada (por defecto 5 segundos) if (notification.duration !== 0) { setTimeout(() => { hideNotification(id) }, notification.duration || 5000) } } }, [notifications], ) // Función para ocultar una notificación const hideNotification = useCallback((id: string) => { setNotifications((prev) => prev.filter((notification) => notification.id !== id)) }, []) // Funciones de ayuda para diferentes tipos de notificaciones const showSuccess = useCallback( (title: string, message: string, category?: string, duration = 5000) => { showNotification({ type: "success", title, message, category, duration }) }, [showNotification], ) const showError = useCallback( (title: string, message: string, category?: string, duration = 5000) => { showNotification({ type: "error", title, message, category, duration }) }, [showNotification], ) const showInfo = useCallback( (title: string, message: string, category?: string, duration = 5000) => { showNotification({ type: "info", title, message, category, duration }) }, [showNotification], ) const showWarning = useCallback( (title: string, message: string, category?: string, duration = 5000) => { showNotification({ type: "warning", title, message, category, duration }) }, [showNotification], ) return ( {children} ) } // Hook para usar el contexto de notificaciones export function useNotification() { const context = useContext(NotificationContext) if (context === undefined) { throw new Error("useNotification must be used within a NotificationProvider") } return context } // Componente para mostrar una notificación individual function NotificationItem({ notification, onClose }: { notification: Notification; onClose: () => void }) { // Configurar colores y iconos según el tipo de notificación const getNotificationStyles = () => { switch (notification.type) { case "success": return { bgColor: "bg-green-50", borderColor: "border-green-500", textColor: "text-green-800", icon: , } case "error": return { bgColor: "bg-red-50", borderColor: "border-red-500", textColor: "text-red-800", icon: , } case "info": return { bgColor: "bg-blue-50", borderColor: "border-blue-500", textColor: "text-blue-800", icon: , } case "warning": return { bgColor: "bg-yellow-50", borderColor: "border-yellow-500", textColor: "text-yellow-800", icon: , } default: return { bgColor: "bg-gray-50", borderColor: "border-gray-500", textColor: "text-gray-800", icon: , } } } const styles = getNotificationStyles() return (

{styles.icon}

{notification.title}

{notification.message}

) } // Contenedor para todas las notificaciones function NotificationContainer() { const { notifications, hideNotification } = useNotification() return (

{notifications.map((notification) => ( hideNotification(notification.id)} /> ))}

) } [V0_FILE]typescriptreact:file="components/ingresar-prospecto-modal.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { AlertCircle } from "lucide-react" import FormularioProspecto from "./formulario-prospecto" import { useNotification } from "@/components/notification-system" interface IngresoProspectoModalProps { open: boolean onOpenChange: (open: boolean) => void onProspectoCreado: (prospecto: any) => void ultimoId: number } // Función de validación de RUT exportada para reutilizar export const validateRut = (rut: string) => { // Verificar que tenga máximo 10 caracteres if (rut.length > 10) { return "El RUT debe tener máximo 10 caracteres" } // Verificar que tenga un solo guion const guiones = (rut.match(/-/g) || []).length if (guiones !== 1) { return "El RUT debe contener un solo guion" } // Verificar que solo contenga números, un guion y posiblemente la letra K if (!/^[0-9]+-[0-9K]$/.test(rut)) { return "El RUT debe tener formato válido (ej: 12345678-9 o 12345678-K)" } return "" } export default function IngresoProspectoModal({ open, onOpenChange, onProspectoCreado, ultimoId, }: IngresoProspectoModalProps) { const [rut, setRut] = useState("") const [error, setError] = useState("") const [mostrarFormulario, setMostrarFormulario] = useState(false) const [tipoIdentificacion, setTipoIdentificacion] = useState("RUT") const [rutIngresado, setRutIngresado] = useState("") const [rutError, setRutError] = useState("") const { showSuccess, clearNotificationsByCategory } = useNotification() // Reemplazar el método handleRutChange con esta versión corregida const handleRutChange = (e: React.ChangeEvent) => { const value = e.target.value.toUpperCase() // Solo permitir números, guion y la letra K const sanitizedValue = value.replace(/[^0-9K-]/g, "") setRut(sanitizedValue) // Asignar el valor a la variable rut que se usa para la búsqueda setError("") // Limpiar errores previos } // Reemplazar el método handleBuscar con esta versión corregida const handleBuscar = () => { if (!rut.trim()) { setError("Debe ingresar un RUT") return } // Validar formato del RUT const rutError = validateRut(rut) if (rutError) { setError(rutError) return } // Si el RUT es válido, mostrar el formulario setTipoIdentificacion("RUT") setMostrarFormulario(true) } const handleProspectoSinRut = () => { // Generar código temporal correlativo (solo numérico) const codigoTemporal = String(ultimoId + 1).padStart(7, "0") setRut(codigoTemporal) setTipoIdentificacion("SIN RUT") // Asignar explícitamente "SIN RUT" setMostrarFormulario(true) } const handleVolver = () => { setMostrarFormulario(false) setRut("") setError("") } const formatearFechaHora = () => { const ahora = new Date() // Formato DD-MM-YYYY HH:MM:SS const dia = String(ahora.getDate()).padStart(2, "0") const mes = String(ahora.getMonth() + 1).padStart(2, "0") const anio = ahora.getFullYear() const horas = String(ahora.getHours()).padStart(2, "0") const minutos = String(ahora.getMinutes()).padStart(2, "0") const segundos = String(ahora.getSeconds()).padStart(2, "0") return `${dia}-${mes}-${anio} ${horas}:${minutos}:${segundos}` } const handleAgregarProspecto = (datosProspecto: any) => { // Limpiar cualquier notificación existente relacionada con prospectos clearNotificationsByCategory("prospecto") // Get current date and time in the required format const fechaHoraCreacion = formatearFechaHora() // Código temporal para usar en múltiples lugares const codigoTemporal = String(ultimoId + 1).padStart(7, "0") // Create the new prospect with the form data const nuevoProspecto = { id: String(ultimoId + 1), tipo: "PROSPECTO", rut: tipoIdentificacion === "RUT" ? rut : codigoTemporal, nombre: datosProspecto.nombres, paterno: datosProspecto.apellidoPaterno, materno: datosProspecto.apellidoMaterno, origenDato: datosProspecto.origenDato, ejecutivo: "SISTEMA", // Por defecto estado: "INGRESADO", ingreso: fechaHoraCreacion, clientData: { id: tipoIdentificacion === "RUT" ? rut : codigoTemporal, name: datosProspecto.nombres, lastName: datosProspecto.apellidoPaterno, secondLastName: datosProspecto.apellidoMaterno, email: datosProspecto.correoElectronico, phone: datosProspecto.telefono, contactName: "PROSPECTO", type: "PROSPECTO", executiveName: "SISTEMA", // Asegurarnos de que estas propiedades se pasen al clientData firstManagement: true, ingreso: fechaHoraCreacion, // Añadir el tipo de identificación al clientData identificationType: tipoIdentificacion, }, // También mantener estas propiedades en el objeto principal firstManagement: true, ingreso: fechaHoraCreacion, // Añadir el tipo de identificación al objeto principal identificationType: tipoIdentificacion, } console.log("Nuevo prospecto creado:", nuevoProspecto) // Notify the parent component about the new prospect onProspectoCreado(nuevoProspecto) // Close the modal onOpenChange(false) } return ( ) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --primary: #1e5180; --primary-light: #f5f7fa; --border-light: #e0e7ef; } body { margin: 0; padding: 0; overflow: hidden; font-family: "Inter", sans-serif; } .modal-backdrop { background-color: rgba(0, 0, 0, 0.3); } /* Estilos para tablas compactas */ .compact-table th, .compact-table td { padding: 0.5rem 0.75rem; font-size: 0.875rem; } .compact-table th { font-weight: 600; color: #4a5568; } .compact-table tr:nth-child(even) { background-color: #f9fafb; } .compact-table tr:hover { background-color: #f1f5f9; } /* Estilos para el estado */ .estado-badge { background-color: #e53e3e; color: white; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; display: inline-block; font-weight: 500; } /* Estilos para el campo de ingreso */ .ingreso-fecha { display: block; color: #1e5180; font-weight: 500; } .ingreso-hora { display: block; color: #718096; font-size: 0.75rem; margin-top: 0.125rem; } /* Añadir estos estilos específicos para corregir el problema de la doble flecha */ /* Estilos específicos para corregir el selector de comuna */ .select-wrapper { position: relative; width: 100%; } /* Estilos para eliminar la flecha nativa de los selectores */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none !important; } /* Ocultar la flecha nativa del navegador en todos los selectores */ select::-ms-expand { display: none; } /* Asegurar que los selectores de shadcn tengan un estilo consistente */ [data-radix-select-trigger] { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Asegurar que el icono de flecha solo aparezca una vez */ [data-radix-select-trigger] svg { height: 1rem; width: 1rem; opacity: 0.5; } /* Ocultar cualquier flecha adicional que pueda estar causando el problema */ [data-radix-select-trigger]::after { display: none !important; } /* Animación para las notificaciones */ @keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in { animation: slide-in 0.3s ease-out forwards; } [V0_FILE]typescriptreact:file="lib/categoria-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useState, type ReactNode } from "react" // Definición de la interfaz para las categorías export interface Categoria { id: string nombre: string sku: string fechaVigencia: string activo: boolean } // Tipo para el contexto interface CategoriaContextType { categorias: Categoria[] setCategorias: React.Dispatch> categoriasActivas: Categoria[] } // Crear el contexto const CategoriaContext = createContext(undefined) // Proveedor del contexto export function CategoriaProvider({ children }: { children: ReactNode }) { const [categorias, setCategorias] = useState([ { id: "1", nombre: "Cambio de Titular", sku: "CAT-1", fechaVigencia: "27-02-2025", activo: true, }, { id: "2", nombre: "Capilla", sku: "CAT-2", fechaVigencia: "27-02-2025", activo: true, }, { id: "3", nombre: "Cineración", sku: "CAT-3", fechaVigencia: "27-02-2025", activo: true, }, { id: "4", nombre: "Cripta", sku: "CAT-4", fechaVigencia: "27-02-2025", activo: true, }, { id: "5", nombre: "Departamento de Familia Perpetuo", sku: "CAT-5", fechaVigencia: "27-02-2025", activo: true, }, { id: "6", nombre: "Dual", sku: "CAT-6", fechaVigencia: "27-02-2025", activo: true, }, { id: "7", nombre: "Liberación Mantención Memorial", sku: "CAT-7", fechaVigencia: "27-02-2025", activo: true, }, { id: "8", nombre: "Liberación Mantención Inmobiliario", sku: "CAT-8", fechaVigencia: "27-02-2025", activo: true, }, { id: "9", nombre: "Mantencion", sku: "CAT-9", fechaVigencia: "27-02-2025", activo: true, }, { id: "10", nombre: "Mausoleo", sku: "CAT-10", fechaVigencia: "27-02-2025", activo: true, }, { id: "11", nombre: "Memorial (3)", sku: "CAT-11", fechaVigencia: "27-02-2025", activo: true, }, { id: "12", nombre: "Nicho Perpetuo", sku: "CAT-12", fechaVigencia: "27-02-2025", activo: true, }, { id: "13", nombre: "Nicho Reducción Perpetuo en Urna(RPU)", sku: "CAT-13", fechaVigencia: "27-02-2025", activo: true, }, { id: "14", nombre: "Nicho Temporal", sku: "CAT-14", fechaVigencia: "27-02-2025", activo: true, }, { id: "15", nombre: "Otros AT", sku: "CAT-15", fechaVigencia: "27-02-2025", activo: true, }, { id: "16", nombre: "Producto Genérico Santísima Trinidad", sku: "CAT-16", fechaVigencia: "27-02-2025", activo: true, }, ]) // Filtrar solo las categorías activas const categoriasActivas = categorias.filter((cat) => cat.activo) return ( {children} ) } // Hook personalizado para usar el contexto export function useCategoria() { const context = useContext(CategoriaContext) if (context === undefined) { throw new Error("useCategoria debe ser usado dentro de un CategoriaProvider") } return context } [V0_FILE]typescriptreact:file="components/mantencion-dialog.tsx" isMerged="true" "use client" import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface MantencionDialogProps { open: boolean onOpenChange: (open: boolean) => void selectedMantencion: string setSelectedMantencion: (value: string) => void mantencionQuantity: number setMantencionQuantity: (value: number) => void handleAddMantencion: () => void serviciosMantencion: any[] } export function MantencionDialog({ open, onOpenChange, selectedMantencion, setSelectedMantencion, mantencionQuantity, setMantencionQuantity, handleAddMantencion, serviciosMantencion, }: MantencionDialogProps) { return ( ) } [V0_FILE]typescriptreact:file="components/mantenedor-atribuciones.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback, useMemo } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Switch } from "@/components/ui/switch" import { Search, Save, Plus, Pencil, Trash2, Users, Percent, Filter, UserCheck, UserCog, UserPlus, X, ChevronLeft, ChevronRight, AlertCircle, } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { toast } from "@/components/ui/use-toast" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import type { Atribucion } from "@/lib/definitions" export default function MantenedorAtribuciones() { const [atribuciones, setAtribuciones] = useState([ { id: "1", rut: "11605634-8", nombre: "CHRISTIAN", apellidoPaterno: "DURAN", apellidoMaterno: "PEREZ", perfil: "Gerente", porcentajeMaximo: 10, activo: true, }, { id: "5", rut: "11549970-K", nombre: "SORAYA ELENA", apellidoPaterno: "ZAPATA", apellidoMaterno: "ROMO", perfil: "Supervisor", porcentajeMaximo: 10, activo: true, }, { id: "6", rut: "12461232-2", nombre: "MARCELA", apellidoPaterno: "LEIVA", apellidoMaterno: "MARTINEZ", perfil: "Supervisor", porcentajeMaximo: 10, activo: true, }, { id: "8", rut: "13065342-1", nombre: "MARIA CAROLINA", apellidoPaterno: "RAMIREZ", apellidoMaterno: "BAEZA", perfil: "Supervisor", porcentajeMaximo: 10, activo: true, }, { id: "9", rut: "15789456-2", nombre: "JUAN", apellidoPaterno: "PEREZ", apellidoMaterno: "SOTO", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }, { id: "10", rut: "16987452-1", nombre: "ANDREA", apellidoPaterno: "MUÑOZ", apellidoMaterno: "LAGOS", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }, { id: "11", rut: "17654321-9", nombre: "CARLOS", apellidoPaterno: "GONZALEZ", apellidoMaterno: "ROJAS", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }, { id: "12", rut: "18765432-1", nombre: "PATRICIA", apellidoPaterno: "SILVA", apellidoMaterno: "MORALES", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }, ]) const [searchTerm, setSearchTerm] = useState("") const [showDialog, setShowDialog] = useState(false) const [editingAtribucion, setEditingAtribucion] = useState(null) const [formData, setFormData] = useState>({ rut: "", nombre: "", apellidoPaterno: "", apellidoMaterno: "", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }) const [formErrors, setFormErrors] = useState>({}) const [porcentajeGlobal, setPorcentajeGlobal] = useState(0) const [selectedAtribuciones, setSelectedAtribuciones] = useState([]) const [activeTab, setActiveTab] = useState("todos") // Paginación const [currentPage, setCurrentPage] = useState(1) const [itemsPerPage, setItemsPerPage] = useState(10) // Ordenamiento const [sortField, setSortField] = useState(null) const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc") // Referencia para el campo de búsqueda //Eliminar la referencia searchInputRef ya que no la necesitamos más: //const searchInputRef = useRef(null) // Estadísticas const totalUsuarios = atribuciones.length const totalGerentes = atribuciones.filter((a) => a.perfil === "Gerente").length const totalSupervisores = atribuciones.filter((a) => a.perfil === "Supervisor").length const totalEjecutivos = atribuciones.filter((a) => a.perfil === "Ejecutivo").length // Validar RUT chileno const validarRut = (rut: string): boolean => { if (!rut) return false // Eliminar puntos y guión const valor = rut.replace(/\./g, "").replace("-", "") // Aislar cuerpo y dígito verificador const cuerpo = valor.slice(0, -1) const dv = valor.slice(-1).toUpperCase() // Si no es un formato válido, retornar false if (!/^\d+[0-9K]$/.test(valor)) return false // Calcular dígito verificador let suma = 0 let multiplo = 2 // Para cada dígito del cuerpo for (let i = cuerpo.length - 1; i >= 0; i--) { suma += Number(cuerpo.charAt(i)) * multiplo multiplo = multiplo < 7 ? multiplo + 1 : 2 } // Calcular dígito verificador en base a módulo 11 let dvEsperado = 11 - (suma % 11) dvEsperado = dvEsperado === 11 ? "0" : dvEsperado === 10 ? "K" : String(dvEsperado) // Comparar dígito verificador return dv === dvEsperado } // Filtrar atribuciones según todos los criterios const filteredAtribuciones = useMemo(() => { return atribuciones .filter((atribucion) => { // Filtro de búsqueda const matchesSearch = atribucion.rut.toLowerCase().includes(searchTerm.toLowerCase()) || atribucion.nombre.toLowerCase().includes(searchTerm.toLowerCase()) || atribucion.apellidoPaterno.toLowerCase().includes(searchTerm.toLowerCase()) || atribucion.apellidoMaterno.toLowerCase().includes(searchTerm.toLowerCase()) || atribucion.perfil.toLowerCase().includes(searchTerm.toLowerCase()) // Filtro por pestaña const matchesTab = activeTab === "todos" || atribucion.perfil.toLowerCase() === activeTab.toLowerCase() return matchesSearch && matchesTab }) .sort((a, b) => { if (!sortField) return 0 let valueA, valueB switch (sortField) { case "rut": valueA = a.rut valueB = b.rut break case "nombre": valueA = a.nombre valueB = b.nombre break case "apellidoPaterno": valueA = a.apellidoPaterno valueB = b.apellidoPaterno break case "perfil": valueA = a.perfil valueB = b.perfil break case "porcentajeMaximo": valueA = a.porcentajeMaximo valueB = b.porcentajeMaximo break default: return 0 } if (typeof valueA === "string" && typeof valueB === "string") { return sortDirection === "asc" ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA) } else { return sortDirection === "asc" ? (valueA as number) - (valueB as number) : (valueB as number) - (valueA as number) } }) }, [atribuciones, searchTerm, activeTab, sortField, sortDirection]) // Paginación const paginatedAtribuciones = useMemo(() => { const startIndex = (currentPage - 1) * itemsPerPage return filteredAtribuciones.slice(startIndex, startIndex + itemsPerPage) }, [filteredAtribuciones, currentPage, itemsPerPage]) const totalPages = useMemo( () => Math.ceil(filteredAtribuciones.length / itemsPerPage), [filteredAtribuciones, itemsPerPage], ) // Manejar cambio de página const handlePageChange = useCallback((page: number) => { setCurrentPage(page) }, []) // Manejar cambio de elementos por página const handleItemsPerPageChange = useCallback((value: string) => { setItemsPerPage(Number.parseInt(value)) setCurrentPage(1) // Resetear a la primera página }, []) // Manejar ordenamiento const handleSort = useCallback( (field: string) => { if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortField(field) setSortDirection("asc") } }, [sortField, sortDirection], ) // Calcular si todos están seleccionados sin useEffect const allSelected = useMemo(() => { if (paginatedAtribuciones.length === 0) return false return paginatedAtribuciones.every((a) => selectedAtribuciones.includes(a.id)) }, [paginatedAtribuciones, selectedAtribuciones]) // Manejar la selección individual de atribuciones sin depender de useEffect const handleSelectAtribucion = useCallback((id: string, isChecked: boolean) => { setSelectedAtribuciones((prev) => { if (isChecked) { return [...prev, id] } else { return prev.filter((atribucionId) => atribucionId !== id) } }) }, []) // Manejar la selección/deselección de todos los elementos const handleSelectAll = useCallback( (checked: boolean) => { if (checked) { const allIds = paginatedAtribuciones.map((a) => a.id) setSelectedAtribuciones((prev) => { const newSelection = [...prev] allIds.forEach((id) => { if (!newSelection.includes(id)) { newSelection.push(id) } }) return newSelection }) } else { setSelectedAtribuciones((prev) => prev.filter((id) => !paginatedAtribuciones.some((a) => a.id === id))) } }, [paginatedAtribuciones], ) // Aplicar porcentaje global a las atribuciones seleccionadas const aplicarPorcentajeGlobal = useCallback(() => { if (selectedAtribuciones.length === 0) { toast({ title: "Error", description: "No hay atribuciones seleccionadas", variant: "destructive", }) return } setAtribuciones((prev) => prev.map((atribucion) => { if (selectedAtribuciones.includes(atribucion.id)) { return { ...atribucion, porcentajeMaximo: porcentajeGlobal, } } return atribucion }), ) toast({ title: "Porcentaje actualizado", description: `Se ha actualizado el porcentaje máximo de descuento a ${porcentajeGlobal}% para ${selectedAtribuciones.length} atribuciones`, }) }, [selectedAtribuciones, porcentajeGlobal]) // Validar formulario const validateForm = useCallback(() => { const errors: Record = {} if (!formData.rut) { errors.rut = "El RUT es obligatorio" } else if (!validarRut(formData.rut)) { errors.rut = "El RUT no es válido" } if (!formData.nombre) { errors.nombre = "El nombre es obligatorio" } if (!formData.apellidoPaterno) { errors.apellidoPaterno = "El apellido paterno es obligatorio" } if (!formData.perfil) { errors.perfil = "El perfil es obligatorio" } if (formData.porcentajeMaximo === undefined || formData.porcentajeMaximo < 0 || formData.porcentajeMaximo > 100) { errors.porcentajeMaximo = "El porcentaje debe estar entre 0 y 100" } setFormErrors(errors) return Object.keys(errors).length === 0 }, [formData]) // Abrir el diálogo para agregar una nueva atribución const handleAddNew = useCallback(() => { setEditingAtribucion(null) setFormData({ rut: "", nombre: "", apellidoPaterno: "", apellidoMaterno: "", perfil: "Ejecutivo", porcentajeMaximo: 5, activo: true, }) setFormErrors({}) setShowDialog(true) }, []) // Abrir el diálogo para editar una atribución existente const handleEdit = useCallback((atribucion: Atribucion) => { setEditingAtribucion(atribucion) setFormData({ ...atribucion }) setFormErrors({}) setShowDialog(true) }, []) // Manejar cambios en el formulario const handleFormChange = useCallback( (field: string, value: any) => { if (field === "rut") { // Convertir a mayúsculas value = value.toUpperCase() // Filtrar caracteres no permitidos y limitar longitud const lastChar = value.slice(-1) // Permitir solo números, K y guión, y limitar a 10 caracteres if (value.length <= 10) { if ( /^\d+$/.test(lastChar) || // Es un número (lastChar === "K" && !value.slice(0, -1).includes("K")) || // Es K y no hay otra K (lastChar === "-" && !value.slice(0, -1).includes("-")) // Es guión y no hay otro guión ) { setFormData((prev) => ({ ...prev, [field]: value, })) } else if (value.length < (formData.rut || "").length) { // Permitir borrar caracteres setFormData((prev) => ({ ...prev, [field]: value, })) } } } else { // Para otros campos, mantener el comportamiento original setFormData((prev) => ({ ...prev, [field]: value, })) } // Limpiar error del campo cuando cambia if (formErrors[field]) { setFormErrors((prev) => { const newErrors = { ...prev } delete newErrors[field] return newErrors }) } }, [formErrors, formData.rut], ) // Guardar la atribución (nueva o editada) const handleSaveAtribucion = useCallback(() => { if (!validateForm()) { toast({ title: "Error", description: "Por favor corrija los errores en el formulario", variant: "destructive", }) return } if (editingAtribucion) { // Actualizar atribución existente setAtribuciones((prev) => prev.map((atribucion) => { if (atribucion.id === editingAtribucion.id) { return { ...atribucion, ...formData, } as Atribucion } return atribucion }), ) toast({ title: "Atribución actualizada", description: `Se ha actualizado la atribución para ${formData.nombre} ${formData.apellidoPaterno}`, }) } else { // Agregar nueva atribución al principio de la lista const newAtribucion: Atribucion = { id: Date.now().toString(), rut: formData.rut || "", nombre: formData.nombre || "", apellidoPaterno: formData.apellidoPaterno || "", apellidoMaterno: formData.apellidoMaterno || "", perfil: (formData.perfil as Atribucion["perfil"]) || "Ejecutivo", porcentajeMaximo: formData.porcentajeMaximo || 5, activo: formData.activo !== undefined ? formData.activo : true, } setAtribuciones((prev) => [newAtribucion, ...prev]) toast({ title: "Atribución creada", description: `Se ha creado una nueva atribución para ${newAtribucion.nombre} ${newAtribucion.apellidoPaterno}`, }) } setShowDialog(false) }, [editingAtribucion, formData, validateForm]) // Eliminar una atribución const handleDelete = useCallback( (id: string) => { if (confirm("¿Está seguro que desea eliminar esta atribución?")) { const atribucionToDelete = atribuciones.find((a) => a.id === id) setAtribuciones((prev) => prev.filter((atribucion) => atribucion.id !== id)) // También eliminar de seleccionados si estaba seleccionado setSelectedAtribuciones((prev) => prev.filter((atribucionId) => atribucionId !== id)) toast({ title: "Atribución eliminada", description: `Se ha eliminado la atribución de ${atribucionToDelete?.nombre || ""} ${atribucionToDelete?.apellidoPaterno || ""} correctamente`, }) } }, [atribuciones], ) // Manejar cambio de pestaña const handleTabChange = useCallback((value: string) => { setActiveTab(value) // Reiniciar selecciones al cambiar de pestaña setSelectedAtribuciones([]) setCurrentPage(1) }, []) // Manejar búsqueda const handleSearch = useCallback((value: string) => { setSearchTerm(value) setCurrentPage(1) }, []) // Limpiar búsqueda const handleClearSearch = useCallback(() => { setSearchTerm("") //Eliminar el useEffect para el manejo de la tecla Enter en el campo de búsqueda ya que ahora filtramos instantáneamente //Eliminar este useEffect: /*if (searchInputRef.current) { searchInputRef.current.value = "" searchInputRef.current.focus() }*/ setCurrentPage(1) }, []) // Limpiar selecciones cuando cambian los filtros useEffect(() => { setSelectedAtribuciones([]) }, [searchTerm, activeTab]) //Eliminar el useEffect para el manejo de la tecla Enter en el campo de búsqueda ya que ahora filtramos instantáneamente //Eliminar este useEffect: /*useEffect(() => { const handleKeyPress = (e: KeyboardEvent) => { if (e.key === "Enter" && document.activeElement === searchInputRef.current) { handleSearch(searchInputRef.current.value) } } window.addEventListener("keypress", handleKeyPress) return () => { window.removeEventListener("keypress", handleKeyPress) } }, [handleSearch])*/ // Modificar la función para cambiar el estado activo directamente desde la tabla const toggleActivo = useCallback( (id: string, activo: boolean) => { setAtribuciones((prev) => prev.map((atribucion) => { if (atribucion.id === id) { return { ...atribucion, activo, } } return atribucion }), ) const atribucion = atribuciones.find((a) => a.id === id) if (atribucion) { toast({ title: `Usuario ${activo ? "activado" : "desactivado"}`, description: `${atribucion.nombre} ${atribucion.apellidoPaterno} ha sido ${activo ? "activado" : "desactivado"} correctamente`, }) } }, [atribuciones], ) return (

{/* Encabezado */}

Matriz de Atribuciones

Gestione los perfiles de usuarios y sus porcentajes máximos de descuento permitidos en las cotizaciones

{/* Tarjetas de estadísticas */}

Total Usuarios Usuarios con atribuciones

{totalUsuarios}

Gerentes Nivel máximo de atribución

{totalGerentes}

Supervisores Nivel medio de atribución

{totalSupervisores}

Ejecutivos Nivel básico de atribución

{totalEjecutivos}

{/* Barra de herramientas */}

{/* Sección de búsqueda y nueva atribución */}

handleSearch(e.target.value)} className="pl-10 pr-10 py-2 border-gray-300 focus:border-[#1e5180] focus:ring-[#1e5180] rounded-md shadow-sm" /> {searchTerm && ( )}

Agregar nueva atribución

{/* Sección de porcentaje y selección */}

Porcentaje máximo

setPorcentajeGlobal(Number.parseInt(e.target.value) || 0)} className="w-16 md:w-20 text-center border-gray-300 focus:border-[#1e5180] focus:ring-[#1e5180]" /> %

handleSelectAll(checked === true)} className="data-[state=checked]:bg-[#1e5180] data-[state=checked]:border-[#1e5180]" /> Seleccionar todos

{/* Pestañas de filtro */} Todos Gerentes Supervisores Ejecutivos {/* Tabla de atribuciones */}

handleSelectAll(checked === true)} className="data-[state=checked]:bg-[#1e5180] data-[state=checked]:border-[#1e5180]" /> handleSort("rut")} >

Rut {sortField === "rut" && ( {sortDirection === "asc" ? "↑" : "↓"} )}

handleSort("nombre")} >

Nombre {sortField === "nombre" && ( {sortDirection === "asc" ? "↑" : "↓"} )}

handleSort("apellidoPaterno")} >

Apellido paterno {sortField === "apellidoPaterno" && ( {sortDirection === "asc" ? "↑" : "↓"} )}

Apellido materno handleSort("perfil")} >

Perfil {sortField === "perfil" && ( {sortDirection === "asc" ? "↑" : "↓"} )}

handleSort("porcentajeMaximo")} >

Porcentaje máximo {sortField === "porcentajeMaximo" && ( {sortDirection === "asc" ? "↑" : "↓"} )}

Estado / Acciones {paginatedAtribuciones.length > 0 ? ( paginatedAtribuciones.map((atribucion, index) => ( handleSelectAtribucion(atribucion.id, checked === true)} className="data-[state=checked]:bg-[#1e5180] data-[state=checked]:border-[#1e5180]" /> {atribucion.rut} {atribucion.nombre} {atribucion.apellidoPaterno} {atribucion.apellidoMaterno} {atribucion.perfil} {atribucion.porcentajeMaximo}%

Editar atribución

Eliminar atribución

toggleActivo(atribucion.id, checked)} className="data-[state=checked]:bg-[#1e5180]" />

{atribucion.activo ? "Desactivar" : "Activar"} usuario

)) ) : (

No se encontraron atribuciones

Intente con otros criterios de búsqueda

)}

{/* Paginación mejorada */} {filteredAtribuciones.length > 0 && (

Mostrar de {filteredAtribuciones.length} resultados

{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => { let pageNum if (totalPages <= 5) { pageNum = i + 1 } else if (currentPage <= 3) { pageNum = i + 1 } else if (currentPage >= totalPages - 2) { pageNum = totalPages - 4 + i } else { pageNum = currentPage - 2 + i } return ( ) })}

)}

{/* Diálogo para agregar/editar atribución */}

) } [V0_FILE]typescriptreact:file="components/mantenedor-campanas.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { PencilLine, Trash2, Plus, Check, ArrowLeft } from "lucide-react" import { toast } from "@/components/ui/use-toast" // Interfaz para las campañas interface Campana { id: string nombre: string porcentajeDescuento: number fechaInicio: string fechaTermino: string activa: boolean } export default function MantenedorCampanas() { // Estado para las campañas const [campanas, setCampanas] = useState([ { id: "1", nombre: "Campaña FFAA", porcentajeDescuento: 20, fechaInicio: "2025-06-01", fechaTermino: "2025-06-01", activa: true, }, ]) // Estados para el modal const [showModal, setShowModal] = useState(false) const [editingCampana, setEditingCampana] = useState(null) const [formData, setFormData] = useState({ nombre: "", porcentajeDescuento: 0, fechaInicio: "", fechaTermino: "", }) // Función para abrir el modal para agregar nueva campaña const handleAgregarCampana = () => { setEditingCampana(null) setFormData({ nombre: "", porcentajeDescuento: 0, fechaInicio: "", fechaTermino: "", }) setShowModal(true) } // Función para abrir el modal para editar campaña const handleEditarCampana = (campana: Campana) => { setEditingCampana(campana) setFormData({ nombre: campana.nombre, porcentajeDescuento: campana.porcentajeDescuento, fechaInicio: campana.fechaInicio, fechaTermino: campana.fechaTermino, }) setShowModal(true) } // Función para eliminar campaña const handleEliminarCampana = (id: string) => { setCampanas(campanas.filter((c) => c.id !== id)) toast({ title: "Campaña eliminada", description: "La campaña ha sido eliminada exitosamente.", }) } // Función para cambiar el estado de la campaña const handleCambiarEstado = (id: string, nuevoEstado: boolean) => { setCampanas(campanas.map((c) => (c.id === id ? { ...c, activa: nuevoEstado } : c))) toast({ title: nuevoEstado ? "Campaña activada" : "Campaña desactivada", description: `La campaña ha sido ${nuevoEstado ? "activada" : "desactivada"} exitosamente.`, }) } // Función para guardar campaña const handleGuardarCampana = () => { // Validaciones if (!formData.nombre.trim()) { toast({ variant: "destructive", title: "Error", description: "El nombre de la campaña es obligatorio.", }) return } if (formData.porcentajeDescuento <= 0 || formData.porcentajeDescuento > 100) { toast({ variant: "destructive", title: "Error", description: "El porcentaje de descuento debe estar entre 1 y 100.", }) return } if (!formData.fechaInicio || !formData.fechaTermino) { toast({ variant: "destructive", title: "Error", description: "Las fechas de inicio y término son obligatorias.", }) return } if (new Date(formData.fechaInicio) > new Date(formData.fechaTermino)) { toast({ variant: "destructive", title: "Error", description: "La fecha de inicio no puede ser posterior a la fecha de término.", }) return } if (editingCampana) { // Editar campaña existente setCampanas( campanas.map((c) => c.id === editingCampana.id ? { ...c, nombre: formData.nombre, porcentajeDescuento: formData.porcentajeDescuento, fechaInicio: formData.fechaInicio, fechaTermino: formData.fechaTermino, } : c, ), ) toast({ title: "Campaña actualizada", description: "La campaña ha sido actualizada exitosamente.", }) } else { // Agregar nueva campaña const nuevaCampana: Campana = { id: Date.now().toString(), nombre: formData.nombre, porcentajeDescuento: formData.porcentajeDescuento, fechaInicio: formData.fechaInicio, fechaTermino: formData.fechaTermino, activa: true, } setCampanas([...campanas, nuevaCampana]) toast({ title: "Campaña creada", description: "La campaña ha sido creada exitosamente.", }) } setShowModal(false) } // Función para formatear fecha const formatearFecha = (fecha: string) => { const date = new Date(fecha) return date.toLocaleDateString("es-CL", { day: "2-digit", month: "2-digit", year: "numeric", }) } return (

Mantenedor de Campañas

Gestione las campañas y sus porcentajes de descuento

{/* Tabla de campañas */}

Nombre de la campaña Porciento de descuento Fecha de inicio Fecha de término Estado / Acciones {campanas.map((campana, index) => ( {campana.nombre} {campana.porcentajeDescuento}% {formatearFecha(campana.fechaInicio)} {formatearFecha(campana.fechaTermino)}

))} {campanas.length === 0 && ( No hay campañas registradas. Agregue una nueva campaña para comenzar. )}

{/* Modal para agregar/editar campaña */}

) } [V0_FILE]typescriptreact:file="components/mantenedor-accesorios.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent } from "@/components/ui/dialog" import { PencilLine, Trash2, Check, ArrowLeft, AlertCircle, X } from "lucide-react" import { format } from "date-fns" import { useNotification } from "@/components/notification-toast" // Tipos para los accesorios interface Accesorio { id: string nombre: string sku: string precio: string moneda: string fechaVigencia: string activo: boolean } export default function MantenedorAccesorios() { const { showSuccess, showError, NotificationContainer } = useNotification() const [accesorios, setAccesorios] = useState([ { id: "1", nombre: "Ánfora institucional", sku: "AC-1", precio: "$100.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "2", nombre: "Trasvasije interno", sku: "AC-2", precio: "$12.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "3", nombre: "Trasvasije ánfora externa", sku: "AC-3", precio: "$25.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "4", nombre: "Trasvasije relicario externo", sku: "AC-4", precio: "$30.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "5", nombre: "Certificado cremación simple", sku: "AC-5", precio: "$5.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, ]) const [isDialogOpen, setIsDialogOpen] = useState(false) const [currentAccesorio, setCurrentAccesorio] = useState>({ nombre: "", sku: "", precio: "0", moneda: "Pesos", activo: true, }) const [generarSKU, setGenerarSKU] = useState(true) const [validationError, setValidationError] = useState("") const [isEditing, setIsEditing] = useState(false) const handleOpenDialog = (accesorio?: Accesorio) => { if (accesorio) { // Extraer valor numérico del precio para mostrarlo correctamente en el input const precio = accesorio.precio.replace(/[^\d,]/g, "").replace(",", ".") setCurrentAccesorio({ ...accesorio, precio, }) setGenerarSKU(false) setIsEditing(true) } else { setCurrentAccesorio({ nombre: "", sku: "", precio: "0", moneda: "Pesos", activo: true, }) setGenerarSKU(true) setIsEditing(false) } setValidationError("") setIsDialogOpen(true) } const handleInputChange = (field: string, value: string) => { setCurrentAccesorio((prev) => ({ ...prev, [field]: value, })) // Generar SKU automáticamente si está activada la opción y no estamos editando if (field === "nombre" && generarSKU && !isEditing) { const nextId = accesorios.length + 1 setCurrentAccesorio((prev) => ({ ...prev, sku: `${nextId}`, })) } // Limpiar mensaje de error cuando el usuario comienza a corregir if (validationError) { setValidationError("") } } const handleSave = () => { // Validar campos obligatorios if (!currentAccesorio.nombre || !currentAccesorio.sku) { setValidationError("Por favor complete todos los campos obligatorios") return } const fechaActual = format(new Date(), "dd-MM-yyyy") if (currentAccesorio.id) { // Actualizar accesorio existente setAccesorios((prev) => prev.map((a) => a.id === currentAccesorio.id ? { ...a, nombre: currentAccesorio.nombre || "", precio: formatPrecio(currentAccesorio.precio || "0", currentAccesorio.moneda || "Pesos"), moneda: currentAccesorio.moneda || "Pesos", fechaVigencia: fechaActual, activo: currentAccesorio.activo !== undefined ? currentAccesorio.activo : true, } : a, ), ) // Mostrar notificación de éxito para edición showSuccess( "Accesorio actualizado", `El accesorio ${currentAccesorio.nombre} (${currentAccesorio.sku}) ha sido actualizado correctamente.`, ) } else { // Crear nuevo accesorio const skuValue = `AC-${currentAccesorio.sku}` || `AC-${accesorios.length + 1}` const newAccesorio: Accesorio = { id: (accesorios.length + 1).toString(), nombre: currentAccesorio.nombre || "", sku: skuValue, precio: formatPrecio(currentAccesorio.precio || "0", currentAccesorio.moneda || "Pesos"), moneda: currentAccesorio.moneda || "Pesos", fechaVigencia: fechaActual, activo: currentAccesorio.activo !== undefined ? currentAccesorio.activo : true, } setAccesorios((prev) => [...prev, newAccesorio]) // Mostrar notificación de éxito para creación showSuccess( "Accesorio creado", `El accesorio ${currentAccesorio.nombre} (${skuValue}) ha sido creado correctamente.`, ) } setIsDialogOpen(false) } const handleDelete = (id: string) => { const accesorioToDelete = accesorios.find((a) => a.id === id) if (confirm("¿Está seguro que desea eliminar este accesorio?")) { setAccesorios((prev) => prev.filter((a) => a.id !== id)) // Mostrar notificación de éxito para eliminación if (accesorioToDelete) { showSuccess( "Accesorio eliminado", `El accesorio ${accesorioToDelete.nombre} (${accesorioToDelete.sku}) ha sido eliminado correctamente.`, ) } } } const formatPrecio = (precio: string, moneda: string) => { const value = Number.parseFloat(precio.replace(/[^\d,]/g, "").replace(",", ".")) if (isNaN(value)) return moneda === "UF" ? "0,00 UF" : "$0" if (moneda === "UF") { return `${value.toFixed(2).replace(".", ",")} UF` } else { return `$${value.toLocaleString("es-CL")}` } } const handleToggleActive = (id: string) => { setAccesorios((prev) => prev.map((accesorio) => (accesorio.id === id ? { ...accesorio, activo: !accesorio.activo } : accesorio)), ) const accesorio = accesorios.find((a) => a.id === id) if (accesorio) { const nuevoEstado = !accesorio.activo showSuccess( `Accesorio ${nuevoEstado ? "activado" : "desactivado"}`, `El accesorio ${accesorio.nombre} ha sido ${nuevoEstado ? "activado" : "desactivado"} correctamente.`, ) } } return (

Mantenedor de Accesorios

{accesorios.map((accesorio, index) => ( ))}

Nombre del accesorio	SKU	Precio	Moneda	Fecha inicio de vigencia	Estado / Acciones
{accesorio.nombre}	{accesorio.sku}	{accesorio.precio}	{accesorio.moneda}	{accesorio.fechaVigencia}

{/* Contenedor de notificaciones */}

) } [V0_FILE]typescriptreact:file="components/mantenedor-categorias.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent } from "@/components/ui/dialog" import { PencilLine, Trash2, Check, ArrowLeft, AlertCircle, X } from "lucide-react" import { format } from "date-fns" import { useNotification } from "@/components/notification-toast" import { useCategoria } from "@/lib/categoria-context" import type { Categoria } from "@/lib/definitions" export default function MantenedorCategorias() { const { showSuccess, showError, NotificationContainer } = useNotification() const { categorias, setCategorias } = useCategoria() const [isDialogOpen, setIsDialogOpen] = useState(false) const [currentCategoria, setCurrentCategoria] = useState>({ nombre: "", sku: "", activo: true, }) const [generarSKU, setGenerarSKU] = useState(true) const [validationError, setValidationError] = useState("") const [isEditing, setIsEditing] = useState(false) const handleOpenDialog = (categoria?: Categoria) => { if (categoria) { setCurrentCategoria({ ...categoria, }) setGenerarSKU(false) setIsEditing(true) } else { setCurrentCategoria({ nombre: "", sku: "", activo: true, }) setGenerarSKU(true) setIsEditing(false) } setValidationError("") setIsDialogOpen(true) } const handleInputChange = (field: string, value: string) => { setCurrentCategoria((prev) => ({ ...prev, [field]: value, })) // Generar SKU automáticamente si está activada la opción y no estamos editando if (field === "nombre" && generarSKU && !isEditing) { const nextId = categorias.length + 1 setCurrentCategoria((prev) => ({ ...prev, sku: `${nextId}`, })) } // Limpiar mensaje de error cuando el usuario comienza a corregir if (validationError) { setValidationError("") } } // Función para reasignar SKUs correlativos const reasignarSKUs = (cats: Categoria[]): Categoria[] => { return cats.map((cat, index) => ({ ...cat, sku: `CAT-${index + 1}`, id: (index + 1).toString(), })) } const handleSave = () => { // Validar campos obligatorios if (!currentCategoria.nombre || !currentCategoria.sku) { setValidationError("Por favor complete todos los campos obligatorios") return } const fechaActual = format(new Date(), "dd-MM-yyyy") if (currentCategoria.id) { // Actualizar categoría existente setCategorias((prev) => { // Actualizar la categoría const updated = prev.map((a) => a.id === currentCategoria.id ? { ...a, nombre: currentCategoria.nombre || "", fechaVigencia: fechaActual, activo: currentCategoria.activo !== undefined ? currentCategoria.activo : true, } : a, ) // Ordenar alfabéticamente const sorted = updated.sort((a, b) => a.nombre.localeCompare(b.nombre)) // Reasignar SKUs correlativos return reasignarSKUs(sorted) }) // Mostrar notificación de éxito para edición showSuccess("Categoría actualizada", `La categoría ${currentCategoria.nombre} ha sido actualizada correctamente.`) } else { // Crear nueva categoría const newCategoria: Categoria = { id: (categorias.length + 1).toString(), nombre: currentCategoria.nombre || "", sku: `CAT-${categorias.length + 1}`, fechaVigencia: fechaActual, activo: currentCategoria.activo !== undefined ? currentCategoria.activo : true, } // Agregar nueva categoría, ordenar alfabéticamente y reasignar SKUs setCategorias((prev) => { const updated = [...prev, newCategoria] const sorted = updated.sort((a, b) => a.nombre.localeCompare(b.nombre)) return reasignarSKUs(sorted) }) // Mostrar notificación de éxito para creación showSuccess("Categoría creada", `La categoría ${currentCategoria.nombre} ha sido creada correctamente.`) } setIsDialogOpen(false) } const handleDelete = (id: string) => { const categoriaToDelete = categorias.find((a) => a.id === id) if (confirm("¿Está seguro que desea eliminar esta categoría?")) { setCategorias((prev) => { // Filtrar la categoría eliminada const filtered = prev.filter((a) => a.id !== id) // Reasignar SKUs correlativos return reasignarSKUs(filtered) }) // Mostrar notificación de éxito para eliminación if (categoriaToDelete) { showSuccess("Categoría eliminada", `La categoría ${categoriaToDelete.nombre} ha sido eliminada correctamente.`) } } } const handleToggleActive = (id: string) => { setCategorias((prev) => prev.map((categoria) => (categoria.id === id ? { ...categoria, activo: !categoria.activo } : categoria)), ) const categoria = categorias.find((c) => c.id === id) if (categoria) { const nuevoEstado = !categoria.activo showSuccess( `Categoría ${nuevoEstado ? "activada" : "desactivada"}`, `La categoría ${categoria.nombre} ha sido ${nuevoEstado ? "activada" : "desactivada"} correctamente.`, ) } } return (

Mantenedor de Categorías

{categorias.map((categoria, index) => ( ))}

Nombre de la categoría	SKU	Fecha inicio de vigencia	Estado / Acciones
{categoria.nombre}	{categoria.sku}	{categoria.fechaVigencia}

{/* Contenedor de notificaciones */}

) } [V0_FILE]typescriptreact:file="components/mantenedor-servicios.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent } from "@/components/ui/dialog" import { PencilLine, Trash2, Check, ArrowLeft, ChevronDown, AlertCircle, X } from "lucide-react" import { format } from "date-fns" import { useNotification } from "@/components/notification-toast" import { useCategoria } from "@/lib/categoria-context" // Tipos para los servicios interface Servicio { id: string nombre: string sku: string tipo: string categoria: string precioInmediata: string precioFutura: string moneda: string fechaVigencia: string activo: boolean } export default function MantenedorServicios() { const { showSuccess, showError, NotificationContainer } = useNotification() const { categoriasActivas } = useCategoria() const [servicios, setServicios] = useState([ { id: "1", nombre: "Normal", sku: "SE-1", tipo: "Cineración", categoria: "Cineración", precioInmediata: "39,30 UF", precioFutura: "36,90 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "2", nombre: "Normal en Pesos", sku: "SE-2", tipo: "Cineración", categoria: "Cineración", precioInmediata: "$1.500.000", precioFutura: "$1.400.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "3", nombre: "No Nato", sku: "SE-3", tipo: "Cineración", categoria: "Cineración", precioInmediata: "28,56 UF", precioFutura: "25,70 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "4", nombre: "Restos", sku: "SE-4", tipo: "Cineración", categoria: "Cineración", precioInmediata: "28,56 UF", precioFutura: "25,70 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "5", nombre: "Express", sku: "SE-5", tipo: "Cineración", categoria: "Cineración", precioInmediata: "45,00 UF", precioFutura: "40,50 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "6", nombre: "Integral de restos", sku: "SE-6", tipo: "Cineración", categoria: "Cineración", precioInmediata: "33,22 UF", precioFutura: "29,90 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "7", nombre: "Biocineración", sku: "SE-7", tipo: "Cineración", categoria: "Cineración", precioInmediata: "50,00 UF", precioFutura: "45,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "8", nombre: "Básica (salón Eternidad)", sku: "SE-8", tipo: "Cineración", categoria: "Cineración", precioInmediata: "42,00 UF", precioFutura: "38,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "9", nombre: "Full (salón eternidad)", sku: "SE-9", tipo: "Cineración", categoria: "Cineración", precioInmediata: "55,00 UF", precioFutura: "50,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "10", nombre: "Premium (salón eternidad)", sku: "SE-10", tipo: "Cineración", categoria: "Cineración", precioInmediata: "65,00 UF", precioFutura: "60,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Servicios de categoría DUAL { id: "11", nombre: "Plan básico", sku: "SE-11", tipo: "Dual", categoria: "Dual", precioInmediata: "70,00 UF", precioFutura: "65,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "12", nombre: "Plan 1", sku: "SE-12", tipo: "Dual", categoria: "Dual", precioInmediata: "85,00 UF", precioFutura: "80,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "13", nombre: "Plan 2", sku: "SE-13", tipo: "Dual", categoria: "Dual", precioInmediata: "95,00 UF", precioFutura: "90,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "14", nombre: "Plan 3", sku: "SE-14", tipo: "Dual", categoria: "Dual", precioInmediata: "125,00 UF", precioFutura: "120,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Servicio de categoría Liberación Mantención Memorial { id: "15", nombre: "Liberación Mantención Memorial", sku: "SE-15", tipo: "Liberación Mantención Memorial", categoria: "Liberación Mantención Memorial", precioInmediata: "15,00 UF", precioFutura: "12,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Servicios de categoría Nicho Temporal { id: "16", nombre: "Normal", sku: "SE-16", tipo: "Nicho Temporal", categoria: "Nicho Temporal", precioInmediata: "35,00 UF", precioFutura: "30,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "17", nombre: "Tierra", sku: "SE-17", tipo: "Nicho Temporal", categoria: "Nicho Temporal", precioInmediata: "40,00 UF", precioFutura: "35,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Mantener los servicios existentes que no son de cineración { id: "18", nombre: "Servicios Funerarios Plan Básico", sku: "SE-18", tipo: "Servicio Funerario", categoria: "Servicio Funerario", precioInmediata: "65,00 UF", precioFutura: "63,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "19", nombre: "Servicios Funerarios Plan 1", sku: "SE-19", tipo: "Servicio Funerario", categoria: "Servicio Funerario", precioInmediata: "80,00 UF", precioFutura: "74,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "20", nombre: "Servicios Funerarios Plan 2", sku: "SE-20", tipo: "Servicio Funerario", categoria: "Servicio Funerario", precioInmediata: "91,00 UF", precioFutura: "85,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "21", nombre: "Servicios Funerarios Plan 3", sku: "SE-21", tipo: "Servicio Funerario", categoria: "Servicio Funerario", precioInmediata: "121,00 UF", precioFutura: "115,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "22", nombre: "Sepultación Nicho Personal Frontal (Temporal 5 años)", sku: "SE-22", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$307.738", precioFutura: "$277.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "23", nombre: "Sepultación Nicho de Restos", sku: "SE-23", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$220.869", precioFutura: "$198.800", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "24", nombre: "Sepultación Nicho Lateral (Temporal 5 años)", sku: "SE-24", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$405.530", precioFutura: "$365.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "25", nombre: "Sepultación Departamento de Familia - Básico - Nro", sku: "SE-25", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$430.875", precioFutura: "$387.800", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "26", nombre: "Sepultación Cripta, Capilla 4 cap.", sku: "SE-26", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$430.875", precioFutura: "$387.800", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "27", nombre: "Sepultación Capilla 10 cap. o Mausoleos", sku: "SE-27", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$727.781", precioFutura: "$655.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "28", nombre: "Sepultación Aérea en Sepultura Familiar", sku: "SE-28", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$184.661", precioFutura: "$166.200", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "29", nombre: "Exhumación", sku: "SE-29", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$850.888", precioFutura: "$765.800", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "30", nombre: "Unión Nicho Individual", sku: "SE-30", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$973.995", precioFutura: "$876.600", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "31", nombre: "Unión Nicho Restos", sku: "SE-31", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$481.566", precioFutura: "$433.400", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "32", nombre: "Traslado entre Sepultura con Reducción", sku: "SE-32", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$343.976", precioFutura: "$309.600", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "33", nombre: "Traslado entre Sepultura sin Reducción", sku: "SE-33", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$246.214", precioFutura: "$221.600", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "34", nombre: "Traslado desde Nicho Restos a Interior Sepultura F", sku: "SE-34", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$148.435", precioFutura: "$133.600", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "35", nombre: "Reducción en General", sku: "SE-35", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$184.661", precioFutura: "$166.200", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, { id: "36", nombre: "Descanso de Cenizas en Memorial", sku: "SE-36", tipo: "Arancel de Cementerio", categoria: "Arancel de Cementerio", precioInmediata: "$58.847", precioFutura: "$53.000", moneda: "Pesos", fechaVigencia: "27-02-2025", activo: true, }, // Añadir los nuevos servicios después del último servicio existente (ID 36) // Agregar entre la definición del array de servicios inicial y antes del cierre del array // Categoría: Nicho Perpetuo { id: "37", nombre: "Normal", sku: "SE-37", tipo: "Nicho Perpetuo", categoria: "Nicho Perpetuo", precioInmediata: "65,00 UF", precioFutura: "60,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "38", nombre: "Jardín", sku: "SE-38", tipo: "Nicho Perpetuo", categoria: "Nicho Perpetuo", precioInmediata: "75,00 UF", precioFutura: "70,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "39", nombre: "De Restos", sku: "SE-39", tipo: "Nicho Perpetuo", categoria: "Nicho Perpetuo", precioInmediata: "55,00 UF", precioFutura: "50,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Nicho Reducción Perpetuo en Urna(RPU) { id: "40", nombre: "Nicho Reducción Perpetuo en Urna(RPU)", sku: "SE-40", tipo: "Nicho Reducción Perpetuo en Urna(RPU)", categoria: "Nicho Reducción Perpetuo en Urna(RPU)", precioInmediata: "80,00 UF", precioFutura: "75,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Departamento de Familia Perpetuo { id: "41", nombre: "2 Capacidades", sku: "SE-41", tipo: "Departamento de Familia Perpetuo", categoria: "Departamento de Familia Perpetuo", precioInmediata: "150,00 UF", precioFutura: "140,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "42", nombre: "4 Capacidades", sku: "SE-42", tipo: "Departamento de Familia Perpetuo", categoria: "Departamento de Familia Perpetuo", precioInmediata: "250,00 UF", precioFutura: "230,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Capilla { id: "43", nombre: "4 Capacidades", sku: "SE-43", tipo: "Capilla", categoria: "Capilla", precioInmediata: "300,00 UF", precioFutura: "280,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "44", nombre: "10 Capacidades", sku: "SE-44", tipo: "Capilla", categoria: "Capilla", precioInmediata: "600,00 UF", precioFutura: "550,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Mausoleo { id: "45", nombre: "10 Capacidades", sku: "SE-45", tipo: "Mausoleo", categoria: "Mausoleo", precioInmediata: "800,00 UF", precioFutura: "750,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Cripta { id: "46", nombre: "3 Capacidades", sku: "SE-46", tipo: "Cripta", categoria: "Cripta", precioInmediata: "200,00 UF", precioFutura: "180,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "47", nombre: "5 Capacidades", sku: "SE-47", tipo: "Cripta", categoria: "Cripta", precioInmediata: "320,00 UF", precioFutura: "290,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Mantención { id: "48", nombre: "Anual", sku: "SE-48", tipo: "Mantención", categoria: "Mantención", precioInmediata: "5,00 UF", precioFutura: "4,50 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "49", nombre: "10 Años", sku: "SE-49", tipo: "Mantención", categoria: "Mantención", precioInmediata: "45,00 UF", precioFutura: "40,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, { id: "50", nombre: "Perpetua", sku: "SE-50", tipo: "Mantención", categoria: "Mantención", precioInmediata: "100,00 UF", precioFutura: "90,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Cambio de Titular { id: "51", nombre: "Cambio de Titular", sku: "SE-51", tipo: "Cambio de Titular", categoria: "Cambio de Titular", precioInmediata: "15,00 UF", precioFutura: "15,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, // Categoría: Producto Genérico Santísima Trinidad { id: "52", nombre: "Producto Genérico Santísima Trinidad", sku: "SE-52", tipo: "Producto Genérico Santísima Trinidad", categoria: "Producto Genérico Santísima Trinidad", precioInmediata: "100,00 UF", precioFutura: "90,00 UF", moneda: "UF", fechaVigencia: "27-02-2025", activo: true, }, ]) const [isDialogOpen, setIsDialogOpen] = useState(false) const [currentServicio, setCurrentServicio] = useState>({ nombre: "", sku: "", tipo: "", categoria: "", precioInmediata: "0", precioFutura: "0", moneda: "Pesos", activo: true, }) const [generarSKU, setGenerarSKU] = useState(true) const [validationError, setValidationError] = useState("") const [isEditing, setIsEditing] = useState(false) const handleOpenDialog = (servicio?: Servicio) => { if (servicio) { // Extraer valores numéricos de los precios para mostrarlos correctamente en los inputs const precioInmediata = servicio.precioInmediata.replace(/[^\d,]/g, "").replace(",", ".") const precioFutura = servicio.precioFutura.replace(/[^\d,]/g, "").replace(",", ".") setCurrentServicio({ ...servicio, precioInmediata, precioFutura, }) setGenerarSKU(false) setIsEditing(true) } else { setCurrentServicio({ nombre: "", sku: "", tipo: "", categoria: "", precioInmediata: "0", precioFutura: "0", moneda: "Pesos", activo: true, }) setGenerarSKU(true) setIsEditing(false) } setValidationError("") setIsDialogOpen(true) } const handleInputChange = (field: string, value: string) => { if (field === "tipo") { // Cuando se cambia el tipo, actualizar también la categoría con el mismo valor setCurrentServicio((prev) => ({ ...prev, [field]: value, categoria: value, // Sincronizar categoría con tipo })) } else { setCurrentServicio((prev) => ({ ...prev, [field]: value, })) } // Generar SKU automáticamente si está activada la opción y no estamos editando if (field === "nombre" && generarSKU && !isEditing) { const nextId = servicios.length + 1 setCurrentServicio((prev) => ({ ...prev, sku: `${nextId}`, })) } // Limpiar mensaje de error cuando el usuario comienza a corregir if (validationError) { setValidationError("") } } const handleSave = () => { // Validar campos obligatorios if (!currentServicio.nombre || !currentServicio.sku || !currentServicio.tipo) { setValidationError("Por favor complete todos los campos obligatorios") return } const fechaActual = format(new Date(), "dd-MM-yyyy") if (currentServicio.id) { // Actualizar servicio existente setServicios((prev) => prev.map((s) => s.id === currentServicio.id ? { ...s, nombre: currentServicio.nombre || "", tipo: currentServicio.tipo || "", categoria: currentServicio.categoria || "", precioInmediata: formatPrecio(currentServicio.precioInmediata || "0", currentServicio.moneda || "UF"), precioFutura: formatPrecio(currentServicio.precioFutura || "0", currentServicio.moneda || "UF"), moneda: currentServicio.moneda || "UF", fechaVigencia: fechaActual, activo: currentServicio.activo !== undefined ? currentServicio.activo : true, } : s, ), ) // Mostrar notificación de éxito para edición showSuccess( "Servicio actualizado", `El servicio ${currentServicio.nombre} (${currentServicio.sku}) ha sido actualizado correctamente.`, ) } else { // Crear nuevo servicio const skuValue = `SE-${currentServicio.sku}` || `SE-${servicios.length + 1}` const newServicio: Servicio = { id: (servicios.length + 1).toString(), nombre: currentServicio.nombre || "", sku: skuValue, tipo: currentServicio.tipo || "", categoria: currentServicio.categoria || "", precioInmediata: formatPrecio(currentServicio.precioInmediata || "0", currentServicio.moneda || "UF"), precioFutura: formatPrecio(currentServicio.precioFutura || "0", currentServicio.moneda || "UF"), moneda: currentServicio.moneda || "UF", fechaVigencia: fechaActual, activo: currentServicio.activo !== undefined ? currentServicio.activo : true, } setServicios((prev) => [...prev, newServicio]) // Mostrar notificación de éxito para creación showSuccess( "Servicio creado", `El servicio ${currentServicio.nombre} (${skuValue}) ha sido creado correctamente.`, ) } setIsDialogOpen(false) } const handleDelete = (id: string) => { const servicioToDelete = servicios.find((s) => s.id === id) if (confirm("¿Está seguro que desea eliminar este servicio?")) { setServicios((prev) => prev.filter((s) => s.id !== id)) // Mostrar notificación de éxito para eliminación if (servicioToDelete) { showSuccess( "Servicio eliminado", `El servicio ${servicioToDelete.nombre} (${servicioToDelete.sku}) ha sido eliminado correctamente.`, ) } } } const formatPrecio = (precio: string, moneda: string) => { const value = Number.parseFloat(precio.replace(/[^\d,]/g, "").replace(",", ".")) if (isNaN(value)) return moneda === "UF" ? "0,00 UF" : "$0" if (moneda === "UF") { return `${value.toFixed(2).replace(".", ",")} UF` } else { return `$${value.toLocaleString("es-CL")}` } } const handleToggleActive = (id: string) => { setServicios((prev) => prev.map((servicio) => (servicio.id === id ? { ...servicio, activo: !servicio.activo } : servicio)), ) const servicio = servicios.find((s) => s.id === id) if (servicio) { const nuevoEstado = !servicio.activo showSuccess( `Servicio ${nuevoEstado ? "activado" : "desactivado"}`, `El servicio ${servicio.nombre} ha sido ${nuevoEstado ? "activado" : "desactivado"} correctamente.`, ) } } return (

Mantenedor de Servicios

{servicios.map((servicio, index) => ( ))}

Nombre del servicio	Categoría	SKU	Precio para necesidad inmediata	Precio para necesidad futura	Moneda	Fecha inicio de vigencia	Estado / Acciones
{servicio.nombre}	{servicio.categoria}	{servicio.sku}	{servicio.precioInmediata}	{servicio.precioFutura}	{servicio.moneda}	{servicio.fechaVigencia}

{/* Contenedor de notificaciones */}

) } [V0_FILE]typescript:file="lib/definitions.ts" isMerged="true" export interface InventarioProducto { id: string tipo: string categoria: string producto: string sku: string precio: number disponibles: number activo: boolean } export interface Pedido { id: string numero: string solicitante: string fechaPedido: string fechaRecepcion: string folioFactura: string proveedor: string fechaFactura: string neto: number iva: number total: number productos: ProductoPedido[] estado: "PENDIENTE" | "RECIBIDO" | "CANCELADO" } export interface ProductoPedido { id: string tipo: string categoria: string producto: string cantidad: number observacion: string costoUnitario: number descuento: number costoTotal: number } export interface Proveedor { id: string nombre: string rut: string contacto: string } [V0_FILE]typescriptreact:file="components/mantenedor-inventario.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useMemo, useEffect } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent } from "@/components/ui/dialog" import { PencilLine, Trash2, Check, ArrowLeft, AlertCircle, X, Search, Package, ShoppingCart, TrendingUp, Archive, ChevronDown, Plus, Eye, } from "lucide-react" import { useNotification } from "@/components/notification-toast" // Interfaces interface InventarioProducto { id: string tipo: string categoria: string producto: string sku: string precio: number disponibles: number activo: boolean } interface Pedido { id: string numero: string solicitante: string fechaPedido: string fechaRecepcion: string folioFactura: string proveedor: string fechaFactura: string neto: number iva: number total: number productos: ProductoPedido[] estado: "PENDIENTE" | "RECIBIDO" | "CANCELADO" } interface ProductoPedido { id: string sku: string producto: string tipo: string categoria: string cantidad: number observacion: string costoUnitario: number descuento: number costoTotal: number } interface Proveedor { id: string nombre: string rut: string contacto: string } export default function MantenedorInventario() { const { showSuccess, showError, NotificationContainer } = useNotification() // Estados principales const [activeTab, setActiveTab] = useState<"productos" | "pedidos">("productos") const [isProductDialogOpen, setIsProductDialogOpen] = useState(false) const [isPedidoDialogOpen, setIsPedidoDialogOpen] = useState(false) const [isAddProductToPedidoOpen, setIsAddProductToPedidoOpen] = useState(false) const [editingProducto, setEditingProducto] = useState(null) // Estados para las acciones de pedidos const [viewPedidoDialogOpen, setViewPedidoDialogOpen] = useState(false) const [editPedidoDialogOpen, setEditPedidoDialogOpen] = useState(false) const [selectedPedido, setSelectedPedido] = useState(null) // Agregar después de los otros estados de modal const [confirmReceiveDialogOpen, setConfirmReceiveDialogOpen] = useState(false) const [pedidoToReceive, setPedidoToReceive] = useState(null) // Estados de paginación const [currentPageProductos, setCurrentPageProductos] = useState(1) const [currentPagePedidos, setCurrentPagePedidos] = useState(1) const [itemsPerPage] = useState(10) // Datos de productos const [productos, setProductos] = useState([ { id: "3698", tipo: "RELICARIO", categoria: "ESTANDAR", producto: "ANILLO OVALO", sku: "R006", precio: 90000, disponibles: 0, activo: true, }, { id: "3673", tipo: "ANFORA", categoria: "ESPECIAL", producto: "AQUA", sku: "BIO-2005", precio: 159990, disponibles: 20, activo: true, }, { id: "3695", tipo: "RELICARIO", categoria: "ESTANDAR", producto: "ARBOL DE LA VIDA", sku: "R003", precio: 90000, disponibles: 0, activo: true, }, { id: "3668", tipo: "ANFORA", categoria: "ESPECIAL", producto: "ARBOL DE LA VIDA", sku: "5240L", precio: 320000, disponibles: 0, activo: true, }, { id: "3669", tipo: "ANFORA", categoria: "ESPECIAL", producto: "ARBOL DE LA VIDA MINI", sku: "5240M", precio: 120000, disponibles: 0, activo: true, }, { id: "3650", tipo: "ANFORA", categoria: "ESPECIAL", producto: "BENDICION DE NOCHE", sku: "A292", precio: 320000, disponibles: 3, activo: true, }, { id: "3651", tipo: "ANFORA", categoria: "ESPECIAL", producto: "BENDICION DE NOCHE MEDIUM", sku: "M292", precio: 180000, disponibles: 0, activo: true, }, { id: "3653", tipo: "ANFORA", categoria: "ESPECIAL", producto: "BENDICION DE NOCHE MINI", sku: "K292", precio: 120000, disponibles: 0, activo: true, }, { id: "3652", tipo: "ANFORA", categoria: "ESPECIAL", producto: "BENDICION DE NOCHE TEALIGHT", sku: "T666", precio: 180000, disponibles: 3, activo: true, }, { id: "3654", tipo: "ANFORA", categoria: "ESPECIAL", producto: "BENDICION PERLA", sku: "A290", precio: 320000, disponibles: 0, activo: true, }, ]) // Datos de pedidos const [pedidos, setPedidos] = useState([ { id: "1", numero: "PED-001", solicitante: "Juan Pérez", fechaPedido: "2024-01-15", fechaRecepcion: "2024-01-20", folioFactura: "F-12345", proveedor: "Proveedor ABC", fechaFactura: "2024-01-18", neto: 500000, iva: 95000, total: 595000, productos: [], estado: "RECIBIDO", }, ]) // Datos de proveedores const [proveedores] = useState([ { id: "1", nombre: "Proveedor ABC", rut: "12345678-9", contacto: "contacto@abc.com" }, { id: "2", nombre: "Proveedor XYZ", rut: "98765432-1", contacto: "info@xyz.com" }, ]) // Estados de formularios const [validationError, setValidationError] = useState("") const [searchFilters, setSearchFilters] = useState({ producto: "", tipo: "TODOS", categoria: "TODOS", sku: "", }) const [formData, setFormData] = useState>({ tipo: "RELICARIO", categoria: "ESTANDAR", producto: "", sku: "", precio: 0, disponibles: 0, activo: true, }) // Estados del formulario de pedido const [pedidoFormData, setPedidoFormData] = useState({ numero: "", solicitante: "", fechaPedido: "", fechaRecepcion: "", folioFactura: "", proveedor: "", fechaFactura: "", neto: 0, iva: 0, total: 0, }) const [productosPedido, setProductosPedido] = useState([]) // Estados para el modal de agregar producto al pedido const [productoSearch, setProductoSearch] = useState("") const [selectedProducto, setSelectedProducto] = useState(null) const [nuevoProductoPedido, setNuevoProductoPedido] = useState({ cantidad: 1, observacion: "", costoUnitario: 0, descuento: 0, }) const [productoSuggestions, setProductoSuggestions] = useState([]) const [showSuggestions, setShowSuggestions] = useState(false) // Calcular KPIs const kpis = useMemo(() => { const totalPedidos = pedidos.length const totalModelos = productos.length const totalVendidos = 1957 // Simulado const totalDisponibles = productos.reduce((sum, p) => sum + p.disponibles, 0) return { totalPedidos, totalModelos, totalVendidos, totalDisponibles, } }, [productos, pedidos]) // Filtrar productos const filteredProductos = useMemo(() => { return productos.filter((producto) => { const matchesProducto = searchFilters.producto === "" || producto.producto.toLowerCase().includes(searchFilters.producto.toLowerCase()) const matchesTipo = searchFilters.tipo === "TODOS" || producto.tipo === searchFilters.tipo const matchesCategoria = searchFilters.categoria === "TODOS" || producto.categoria === searchFilters.categoria const matchesSku = searchFilters.sku === "" || producto.sku.toLowerCase().includes(searchFilters.sku.toLowerCase()) return matchesProducto && matchesTipo && matchesCategoria && matchesSku }) }, [productos, searchFilters]) // Paginación para productos const paginatedProductos = useMemo(() => { const startIndex = (currentPageProductos - 1) * itemsPerPage return filteredProductos.slice(startIndex, startIndex + itemsPerPage) }, [filteredProductos, currentPageProductos, itemsPerPage]) const totalPagesProductos = Math.ceil(filteredProductos.length / itemsPerPage) // Paginación para pedidos const paginatedPedidos = useMemo(() => { const startIndex = (currentPagePedidos - 1) * itemsPerPage return pedidos.slice(startIndex, startIndex + itemsPerPage) }, [pedidos, currentPagePedidos, itemsPerPage]) const totalPagesPedidos = Math.ceil(pedidos.length / itemsPerPage) // Funciones para productos const handleOpenProductDialog = (producto?: InventarioProducto) => { if (producto) { setEditingProducto(producto) setFormData({ tipo: producto.tipo, categoria: producto.categoria, producto: producto.producto, sku: producto.sku, precio: producto.precio, disponibles: producto.disponibles, activo: producto.activo, }) } else { setEditingProducto(null) setFormData({ tipo: "RELICARIO", categoria: "ESTANDAR", producto: "", sku: "", precio: 0, disponibles: 0, activo: true, }) } setValidationError("") setIsProductDialogOpen(true) } const handleInputChange = (field: string, value: string | number | boolean) => { setFormData((prev) => ({ ...prev, [field]: value, })) if (validationError) { setValidationError("") } } const handleSaveProduct = () => { if (!formData.producto || !formData.sku) { setValidationError("Por favor complete todos los campos obligatorios") return } if (editingProducto) { setProductos((prev) => prev.map((p) => (p.id === editingProducto.id ? { ...formData, id: editingProducto.id } : p)), ) showSuccess( "Producto actualizado", `El producto ${formData.producto} (${formData.sku}) ha sido actualizado correctamente.`, ) } else { const newId = (Math.max(...productos.map((p) => Number.parseInt(p.id))) + 1).toString() const newProducto: InventarioProducto = { ...formData, id: newId, } setProductos((prev) => [...prev, newProducto]) showSuccess("Producto creado", `El producto ${formData.producto} (${formData.sku}) ha sido creado correctamente.`) } setIsProductDialogOpen(false) } const handleDeleteProduct = (id: string) => { const productoToDelete = productos.find((p) => p.id === id) if (confirm("¿Está seguro que desea eliminar este producto?")) { setProductos((prev) => prev.filter((p) => p.id !== id)) if (productoToDelete) { showSuccess( "Producto eliminado", `El producto ${productoToDelete.producto} (${productoToDelete.sku}) ha sido eliminado correctamente.`, ) } } } const handleToggleActiveProduct = (id: string) => { setProductos((prev) => prev.map((p) => (p.id === id ? { ...p, activo: !p.activo } : p))) const producto = productos.find((p) => p.id === id) if (producto) { const nuevoEstado = !producto.activo showSuccess( `Producto ${nuevoEstado ? "activado" : "desactivado"}`, `El producto ${producto.producto} ha sido ${nuevoEstado ? "activado" : "desactivado"} correctamente.`, ) } } // Funciones para pedidos const handleOpenPedidoDialog = () => { const nextNumber = `PED-${String(pedidos.length + 1).padStart(3, "0")}` setPedidoFormData({ numero: nextNumber, solicitante: "", fechaPedido: new Date().toISOString().split("T")[0], fechaRecepcion: "", folioFactura: "", proveedor: "", fechaFactura: "", neto: 0, iva: 0, total: 0, }) setProductosPedido([]) setValidationError("") setIsPedidoDialogOpen(true) } const handlePedidoInputChange = (field: string, value: string | number) => { setPedidoFormData((prev) => { const newData = { ...prev, [field]: value } // Calcular totales automáticamente basado en productos if (productosPedido.length > 0) { const subtotal = productosPedido.reduce((sum, p) => sum + p.costoTotal, 0) newData.neto = subtotal newData.iva = Math.round(subtotal * 0.19) newData.total = newData.neto + newData.iva } return newData }) if (validationError) { setValidationError("") } } // Funciones para agregar productos al pedido const handleOpenAddProductToPedido = () => { setProductoSearch("") setSelectedProducto(null) setProductoSuggestions([]) setShowSuggestions(false) setNuevoProductoPedido({ cantidad: 1, observacion: "", costoUnitario: 0, descuento: 0, }) setIsAddProductToPedidoOpen(true) } const handleSearchProducto = (searchTerm: string) => { setProductoSearch(searchTerm) if (searchTerm.trim()) { // Buscar productos que coincidan con el término de búsqueda const suggestions = productos .filter( (p) => p.sku.toLowerCase().includes(searchTerm.toLowerCase()) || p.producto.toLowerCase().includes(searchTerm.toLowerCase()), ) .slice(0, 5) // Limitar a 5 sugerencias setProductoSuggestions(suggestions) setShowSuggestions(suggestions.length > 0) // Remover la selección automática - el usuario debe hacer clic para seleccionar // No seleccionar automáticamente aunque haya coincidencia exacta setSelectedProducto(null) setNuevoProductoPedido((prev) => ({ ...prev, costoUnitario: 0, })) } else { setProductoSuggestions([]) setShowSuggestions(false) setSelectedProducto(null) setNuevoProductoPedido((prev) => ({ ...prev, costoUnitario: 0, })) } } const handleSelectProductoFromSuggestions = (producto: InventarioProducto) => { setSelectedProducto(producto) setProductoSearch(producto.sku) // Mostrar solo el SKU en el campo setNuevoProductoPedido((prev) => ({ ...prev, costoUnitario: producto.precio, })) setShowSuggestions(false) } const calculateTotal = () => { const subtotal = nuevoProductoPedido.costoUnitario * nuevoProductoPedido.cantidad const descuento = subtotal * (nuevoProductoPedido.descuento / 100) return subtotal - descuento } const handleAgregarProductoPedido = () => { if (!selectedProducto || nuevoProductoPedido.cantidad <= 0) { setValidationError("Seleccione un producto válido y cantidad mayor a 0") return } const costoTotal = calculateTotal() const newProducto: ProductoPedido = { id: Date.now().toString(), sku: selectedProducto.sku, producto: selectedProducto.producto, tipo: selectedProducto.tipo, categoria: selectedProducto.categoria, cantidad: nuevoProductoPedido.cantidad, observacion: nuevoProductoPedido.observacion, costoUnitario: nuevoProductoPedido.costoUnitario, descuento: nuevoProductoPedido.descuento, costoTotal, } setProductosPedido((prev) => [...prev, newProducto]) // Actualizar totales del pedido const newSubtotal = [...productosPedido, newProducto].reduce((sum, p) => sum + p.costoTotal, 0) setPedidoFormData((prev) => ({ ...prev, neto: newSubtotal, iva: Math.round(newSubtotal * 0.19), total: newSubtotal + Math.round(newSubtotal * 0.19), })) setIsAddProductToPedidoOpen(false) showSuccess("Producto agregado", `${selectedProducto.producto} agregado al pedido`) } const handleRemoveProductoPedido = (id: string) => { setProductosPedido((prev) => { const updated = prev.filter((p) => p.id !== id) // Recalcular totales const newSubtotal = updated.reduce((sum, p) => sum + p.costoTotal, 0) setPedidoFormData((prevPedido) => ({ ...prevPedido, neto: newSubtotal, iva: Math.round(newSubtotal * 0.19), total: newSubtotal + Math.round(newSubtotal * 0.19), })) return updated }) } const handleSavePedido = () => { const missingFields = [] if (!pedidoFormData.solicitante.trim()) { missingFields.push("Solicitante") } if (!pedidoFormData.proveedor || pedidoFormData.proveedor === "") { missingFields.push("Proveedor") } if (productosPedido.length === 0) { missingFields.push("al menos un producto") } if (missingFields.length > 0) { setValidationError(`Faltan los siguientes campos obligatorios: ${missingFields.join(", ")}`) return } const newPedido: Pedido = { id: Date.now().toString(), ...pedidoFormData, productos: productosPedido, estado: "PENDIENTE", } // NO actualizar stock aquí - solo cuando se recibe el pedido setPedidos((prev) => [...prev, newPedido]) showSuccess( "Pedido creado", `El pedido ${pedidoFormData.numero} ha sido creado correctamente. El stock se actualizará cuando se marque como recibido.`, ) setIsPedidoDialogOpen(false) } const handleViewPedido = (pedido: Pedido) => { setSelectedPedido(pedido) setViewPedidoDialogOpen(true) } const handleEditPedido = (pedido: Pedido) => { setSelectedPedido(pedido) setPedidoFormData({ numero: pedido.numero, solicitante: pedido.solicitante, fechaPedido: pedido.fechaPedido, fechaRecepcion: pedido.fechaRecepcion, folioFactura: pedido.folioFactura, proveedor: pedido.proveedor, fechaFactura: pedido.fechaFactura, neto: pedido.neto, iva: pedido.iva, total: pedido.total, }) setProductosPedido(pedido.productos) setEditPedidoDialogOpen(true) } const handleDeletePedido = (pedido: Pedido) => { if (confirm(`¿Está seguro que desea eliminar el pedido ${pedido.numero}?`)) { // Revertir el stock si el pedido ya fue recibido if (pedido.estado === "RECIBIDO") { setProductos((prevProductos) => prevProductos.map((producto) => { const productoPedido = pedido.productos.find((pp) => pp.sku === producto.sku) if (productoPedido) { return { ...producto, disponibles: Math.max(0, producto.disponibles - productoPedido.cantidad), } } return producto }), ) } setPedidos((prev) => prev.filter((p) => p.id !== pedido.id)) showSuccess("Pedido eliminado", `El pedido ${pedido.numero} ha sido eliminado correctamente.`) } } const handleUpdatePedido = () => { if (!selectedPedido) return const missingFields = [] if (!pedidoFormData.solicitante.trim()) { missingFields.push("Solicitante") } if (!pedidoFormData.proveedor || pedidoFormData.proveedor === "") { missingFields.push("Proveedor") } if (productosPedido.length === 0) { missingFields.push("al menos un producto") } if (missingFields.length > 0) { setValidationError(`Faltan los siguientes campos obligatorios: ${missingFields.join(", ")}`) return } const updatedPedido: Pedido = { ...selectedPedido, ...pedidoFormData, productos: productosPedido, } setPedidos((prev) => prev.map((p) => (p.id === selectedPedido.id ? updatedPedido : p))) showSuccess("Pedido actualizado", `El pedido ${pedidoFormData.numero} ha sido actualizado correctamente.`) setEditPedidoDialogOpen(false) setSelectedPedido(null) } const handleReceivePedido = (pedido: Pedido) => { setPedidoToReceive(pedido) setConfirmReceiveDialogOpen(true) } const confirmReceivePedido = () => { if (!pedidoToReceive) return const updatedPedido = { ...pedidoToReceive, estado: "RECIBIDO" as const, fechaRecepcion: new Date().toISOString().split("T")[0], } // Actualizar stock de productos cuando se recibe el pedido setProductos((prevProductos) => prevProductos.map((producto) => { const productoPedido = pedidoToReceive.productos.find((pp) => pp.sku === producto.sku) if (productoPedido) { return { ...producto, disponibles: producto.disponibles + productoPedido.cantidad, } } return producto }), ) setPedidos((prev) => prev.map((p) => (p.id === pedidoToReceive.id ? updatedPedido : p))) showSuccess( "Pedido recibido", `El pedido ${pedidoToReceive.numero} ha sido marcado como recibido y el stock ha sido actualizado.`, ) setConfirmReceiveDialogOpen(false) setPedidoToReceive(null) } const formatPrice = (price: number) => { return `$${price.toLocaleString("es-CL")}` } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("es-CL") } const getEstadoBadge = (estado: string) => { const colors = { PENDIENTE: "bg-yellow-100 text-yellow-800", RECIBIDO: "bg-green-100 text-green-800", CANCELADO: "bg-red-100 text-red-800", } return colors[estado as keyof typeof colors] || "bg-gray-100 text-gray-800" } // Componente de paginación mejorado (como el de prospectos) const Pagination = ({ currentPage, totalPages, onPageChange, }: { currentPage: number; totalPages: number; onPageChange: (page: number) => void }) => { const getVisiblePages = () => { const delta = 2 const range = [] const rangeWithDots = [] for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) { range.push(i) } if (currentPage - delta > 2) { rangeWithDots.push(1, "...") } else { rangeWithDots.push(1) } rangeWithDots.push(...range) if (currentPage + delta < totalPages - 1) { rangeWithDots.push("...", totalPages) } else { rangeWithDots.push(totalPages) } return rangeWithDots } if (totalPages <= 1) return null return (

Mostrando {Math.min((currentPage - 1) * 10 + 1, totalPages * 10)} a{" "} {Math.min(currentPage * 10, totalPages * 10)} de {totalPages * 10} resultados

{getVisiblePages().map((page, index) => ( ))}

) } useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as HTMLElement if (!target.closest(".relative")) { setShowSuggestions(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) const handleProductoPedidoInputChange = (field: string, value: number) => { setNuevoProductoPedido((prev) => ({ ...prev, [field]: value, })) } return (

Inventario de Productos

Administre el control de stock de productos y accesorios

{/* KPIs */}

{kpis.totalPedidos}

TOTAL PEDIDOS

{kpis.totalModelos}

TOTAL MODELOS

{kpis.totalVendidos}

TOTAL VENDIDOS

{kpis.totalDisponibles}

TOTAL DISPONIBLES

{/* Tabs */}

{/* Contenido de Productos */} {activeTab === "productos" && ( <> {/* Filtros */}

PRODUCTO: setSearchFilters((prev) => ({ ...prev, producto: e.target.value }))} className="w-full rounded-md border border-gray-300 py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#1e5180] focus:border-transparent" />

TIPO:

CATEGORIA:

SKU: setSearchFilters((prev) => ({ ...prev, sku: e.target.value }))} className="w-full rounded-md border border-gray-300 py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#1e5180] focus:border-transparent" />

{/* Tabla de Productos */}

{paginatedProductos.map((producto, index) => ( ))}

ID	TIPO	CATEGORIA	PRODUCTO	SKU	PRECIO	DISPONIBLES	Estado / Acciones
{producto.id}	{producto.tipo}	{producto.categoria}	{producto.producto}	{producto.sku}	{formatPrice(producto.precio)}	{producto.disponibles}

)} {/* Contenido de Pedidos */} {activeTab === "pedidos" && (

{paginatedPedidos.map((pedido, index) => ( ))}

N° PEDIDO	SOLICITANTE	PROVEEDOR	FECHA PEDIDO	FECHA RECEPCIÓN	TOTAL	ESTADO	ACCIONES
{pedido.numero}	{pedido.solicitante}	{pedido.proveedor}	{formatDate(pedido.fechaPedido)}	{pedido.fechaRecepcion ? formatDate(pedido.fechaRecepcion) : "-"}	{formatPrice(pedido.total)}	{pedido.estado}	{pedido.estado === "PENDIENTE" && ( )}

)} {/* Modal de Producto */} {/* Modal de Pedido Mejorado */}

INGRESO NUEVO PEDIDO

{validationError && (

{validationError}

)} {/* Información del Pedido y Factura */}

{/* Sección PEDIDO */}

PEDIDO

N°:

Solicitante:

handlePedidoInputChange("solicitante", e.target.value)} className="w-full rounded-md border border-gray-300 py-1.5 px-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#1e5180]" placeholder="Nombre del solicitante" />

Fecha Pedido:

handlePedidoInputChange("fechaPedido", e.target.value)} className="w-full rounded-md border border-gray-300 py-1.5 px-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#1e5180]" />

Fecha Recepción:

handlePedidoInputChange("fechaRecepcion", e.target.value)} className="w-full rounded-md border border-gray-300 py-1.5 px-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#1e5180]" />

{/* Sección FACTURA */}

FACTURA

Folio N°:

handlePedidoInputChange("folioFactura", e.target.value)} className="w-full rounded-md border border-gray-300 py-1.5 px-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#1e5180]" placeholder="Número de folio" />

Proveedor:

Fecha:

handlePedidoInputChange("fechaFactura", e.target.value)} className="w-full rounded-md border border-gray-300 py-1.5 px-2 text-xs focus:outline-none focus:ring-1 focus:ring-[#1e5180]" />

Neto:

IVA:

Total:

{/* Sección PRODUCTOS PEDIDO */}

PRODUCTOS PEDIDO

{productosPedido.length > 0 ? (

{productosPedido.map((producto) => ( ))}

TIPO	CATEGORIA	PRODUCTO	CANTIDAD	OBSERVACIÓN	COSTO C/U	DESCUENTO(%)	COSTO TOTAL	ACCIONES
{producto.tipo}	{producto.categoria}	{producto.sku} - {producto.producto}	{producto.cantidad}	{producto.observacion}	{formatPrice(producto.costoUnitario)}	{producto.descuento}	{formatPrice(producto.costoTotal)}

) : (

No hay productos agregados al pedido

)}

{/* Modal para Agregar Producto al Pedido */}