import { useState } from 'react' import { Calculator, Edit, Save, X } from 'lucide-react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Input } from "/components/ui/input" import { Label } from "/components/ui/label" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "/components/ui/table" type Servicio = { id: number nombre: string precioBase: number editando?: boolean precioTemp?: number } export default function CalculadoraCostos() { const [servicios, setServicios] = useState([ { id: 1, nombre: 'Tratamiento de pisos', precioBase: 150 }, { id: 2, nombre: 'Aplicación de superficies', precioBase: 200 }, { id: 3, nombre: 'Tratamiento en paredes', precioBase: 180 }, ]) const [unidades, setUnidades] = useState(1) const [precioUnitario, setPrecioUnitario] = useState(0) const [total, setTotal] = useState(0) const [servicioSeleccionado, setServicioSeleccionado] = useState(null) const seleccionarServicio = (servicio: Servicio) => { setServicioSeleccionado(servicio) setPrecioUnitario(servicio.precioBase) } const calcularTotal = () => { if (!servicioSeleccionado) return const resultado = unidades * precioUnitario setTotal(resultado) } const habilitarEdicion = (id: number) => { setServicios(servicios.map(servicio => servicio.id === id ? { ...servicio, editando: true, precioTemp: servicio.precioBase } : servicio )) } const cancelarEdicion = (id: number) => { setServicios(servicios.map(servicio => servicio.id === id ? { ...servicio, editando: false } : servicio )) } const guardarEdicion = (id: number) => { setServicios(servicios.map(servicio => { if (servicio.id === id) { const nuevoPrecio = servicio.precioTemp || servicio.precioBase return { ...servicio, precioBase: nuevoPrecio, editando: false } } return servicio })) if (servicioSeleccionado?.id === id) { const servicioActualizado = servicios.find(s => s.id === id) if (servicioActualizado) { setPrecioUnitario(servicioActualizado.precioTemp || servicioActualizado.precioBase) } } } const cambiarPrecioTemp = (id: number, valor: number) => { setServicios(servicios.map(servicio => servicio.id === id ? { ...servicio, precioTemp: valor } : servicio )) } return (

Calculadora de Costos de Servicios

Base de Servicios

ID Servicio Precio Base Acciones {servicios.map((servicio) => ( {servicio.id} {servicio.nombre} {servicio.editando ? ( cambiarPrecioTemp(servicio.id, Number(e.target.value))} className="w-24 border-blue-300 focus:ring-blue-500 focus:border-blue-500" /> ) : ( ${servicio.precioBase.toFixed(2)} )} {servicio.editando ? ( <> ) : ( <> )} ))}

{servicioSeleccionado && (

Servicio seleccionado:

Tipo: {servicioSeleccionado.nombre}

Precio base: ${servicioSeleccionado.precioBase.toFixed(2)}

Número de unidades/superficie (m²) setUnidades(Number(e.target.value))} className="border-blue-300 focus:ring-blue-500 focus:border-blue-500" />

Precio por unidad ($) setPrecioUnitario(Number(e.target.value))} className="border-blue-300 focus:ring-blue-500 focus:border-blue-500" />

{total > 0 && (

Total calculado:

${total.toFixed(2)}

{unidades} {unidades === 1 ? 'unidad' : 'unidades'} × ${precioUnitario.toFixed(2)} ({servicioSeleccionado.nombre})

)}

) }