import React from 'react';
// Main App Component
export default function App() {
// State for the list of profiles
const [profiles, setProfiles] = React.useState([
{ id: 1, name: 'Administrativo', time: 15, cost: 120, quantity: 30 },
{ id: 2, name: 'Operador de Montacargas', time: 5, cost: 95, quantity: 80 },
]);
// State for the input fields in the form
const [newProfile, setNewProfile] = React.useState({
name: '',
time: '',
cost: '',
quantity: '',
});
// State for handling which profile is being edited
const [editingId, setEditingId] = React.useState(null);
// Custom modal state
const [modal, setModal] = React.useState({ isOpen: false, message: '' });
// Handlers for input changes
const handleInputChange = (e) => {
const { name, value } = e.target;
setNewProfile({ ...newProfile, [name]: value });
};
// Function to show modal
const showModal = (message) => {
setModal({ isOpen: true, message });
};
// Handler to add a new profile
const handleAddProfile = (e) => {
e.preventDefault();
if (!newProfile.name || !newProfile.time || !newProfile.cost || !newProfile.quantity) {
showModal('Por favor, completa todos los campos.');
return;
}
const newEntry = {
id: Date.now(),
name: newProfile.name,
time: parseFloat(newProfile.time),
cost: parseFloat(newProfile.cost),
quantity: parseInt(newProfile.quantity, 10),
};
setProfiles([...profiles, newEntry]);
setNewProfile({ name: '', time: '', cost: '', quantity: '' }); // Reset form
};
// Handler to start editing a profile
const handleEdit = (profile) => {
setEditingId(profile.id);
setNewProfile({
name: profile.name,
time: profile.time,
cost: profile.cost,
quantity: profile.quantity
});
};
// Handler to update a profile after editing
const handleUpdateProfile = (e) => {
e.preventDefault();
setProfiles(profiles.map(p => (p.id === editingId ? { ...p, ...newProfile } : p)));
setEditingId(null);
setNewProfile({ name: '', time: '', cost: '', quantity: '' });
};
// Handler to delete a profile
const handleDeleteProfile = (id) => {
setProfiles(profiles.filter(p => p.id !== id));
};
// Cancel editing
const cancelEdit = () => {
setEditingId(null);
setNewProfile({ name: '', time: '', cost: '', quantity: '' });
}
// Calculations for the summary, memoized for performance
const summary = React.useMemo(() => {
const totalRegistrations = profiles.reduce((sum, p) => sum + p.quantity, 0);
const totalDailyCost = profiles.reduce((sum, p) => {
const costPerRegistration = (p.time / 60) * p.cost;
return sum + (costPerRegistration * p.quantity);
}, 0);
const averageCostPerRegistration = totalRegistrations > 0 ? totalDailyCost / totalRegistrations : 0;
return {
totalRegistrations,
totalDailyCost,
averageCostPerRegistration
};
}, [profiles]);
// Helper to format numbers as currency
const formatCurrency = (value) => {
return new Intl.NumberFormat('es-MX', {
style: 'currency',
currency: 'MXN'
}).format(value);
};
// Custom Modal Component
const CustomModal = ({ isOpen, message, onClose }) => {
if (!isOpen) return null;
return (
);
};
return (
<>
setModal({ isOpen: false, message: '' })}
/>
{/* Placeholder for the logo */}
{/* Form Section */}
{/* Profiles and Summary Section */}
);
}
Aviso
{message}
{/* Replace this with your actual image tag */}
{/* 
*/}
{/* For example: */}
Costos de Registros
Calcula cuánto invierte tu organización en la gestión y autorización de accesos.
{editingId ? 'Editar Perfil' : 'Añadir Nuevo Perfil'}
{/* Summary Cards */}
{/* Profiles Table */}
Costo Prom./Registro
{formatCurrency(summary.averageCostPerRegistration)}
Costo Total Diario
{formatCurrency(summary.totalDailyCost)}
Registros Totales/Día
{summary.totalRegistrations.toLocaleString('es-MX')}
| Perfil | Costo/Registro | Registros/Día | Costo Diario | Acciones |
|---|---|---|---|---|
| {p.name} | {formatCurrency(costPerReg)} | {p.quantity} | {formatCurrency(dailyCost)} |
|
| No hay perfiles. Añade uno para empezar. | ||||