Improve the UI add button
This commit is contained in:
Urtzi Alfaro
@@ -1,65 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||
import { Wrench, CheckCircle2, Loader2 } from 'lucide-react';
|
||||
import { useTenant } from '../../../../stores/tenant.store';
|
||||
import { equipmentService } from '../../../../api/services/equipment';
|
||||
import { showToast } from '../../../../utils/toast';
|
||||
import { Wrench } from 'lucide-react';
|
||||
|
||||
interface WizardDataProps extends WizardStepProps {
|
||||
data: Record<string, any>;
|
||||
onDataChange: (data: Record<string, any>) => void;
|
||||
}
|
||||
const EquipmentDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
|
||||
const data = dataRef?.current || {};
|
||||
|
||||
const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||
const { currentTenant } = useTenant();
|
||||
const [equipmentData, setEquipmentData] = useState({
|
||||
type: data.type || 'oven',
|
||||
brand: data.brand || '',
|
||||
model: data.model || '',
|
||||
location: data.location || '',
|
||||
purchaseDate: data.purchaseDate || '',
|
||||
status: data.status || 'active',
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!currentTenant?.id) {
|
||||
setError('No se pudo obtener información del tenant');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const equipmentCreateData: any = {
|
||||
name: `${equipmentData.type} - ${equipmentData.brand || 'Sin marca'}`,
|
||||
type: equipmentData.type,
|
||||
model: equipmentData.brand,
|
||||
serialNumber: equipmentData.model,
|
||||
location: equipmentData.location,
|
||||
status: equipmentData.status,
|
||||
installDate: equipmentData.purchaseDate || new Date().toISOString().split('T')[0],
|
||||
lastMaintenance: new Date().toISOString().split('T')[0],
|
||||
nextMaintenance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
maintenanceInterval: 30,
|
||||
is_active: true
|
||||
};
|
||||
|
||||
await equipmentService.createEquipment(currentTenant.id, equipmentCreateData);
|
||||
|
||||
showToast.success('Equipo creado exitosamente');
|
||||
onDataChange({ ...data, ...equipmentData });
|
||||
onComplete();
|
||||
} catch (err: any) {
|
||||
console.error('Error creating equipment:', err);
|
||||
const errorMessage = err.response?.data?.detail || 'Error al crear el equipo';
|
||||
setError(errorMessage);
|
||||
showToast.error(errorMessage);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
const handleFieldChange = (field: string, value: any) => {
|
||||
onDataChange?.({ ...data, [field]: value });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -69,18 +16,12 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Equipo de Panadería</h3>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Tipo de Equipo *</label>
|
||||
<select
|
||||
value={equipmentData.type}
|
||||
onChange={(e) => setEquipmentData({ ...equipmentData, type: e.target.value })}
|
||||
value={data.type || 'oven'}
|
||||
onChange={(e) => handleFieldChange('type', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
>
|
||||
<option value="oven">Horno</option>
|
||||
@@ -94,8 +35,8 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Marca/Modelo</label>
|
||||
<input
|
||||
type="text"
|
||||
value={equipmentData.brand}
|
||||
onChange={(e) => setEquipmentData({ ...equipmentData, brand: e.target.value })}
|
||||
value={data.brand || ''}
|
||||
onChange={(e) => handleFieldChange('brand', e.target.value)}
|
||||
placeholder="Ej: Rational SCC 101"
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
@@ -104,8 +45,8 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Ubicación</label>
|
||||
<input
|
||||
type="text"
|
||||
value={equipmentData.location}
|
||||
onChange={(e) => setEquipmentData({ ...equipmentData, location: e.target.value })}
|
||||
value={data.location || ''}
|
||||
onChange={(e) => handleFieldChange('location', e.target.value)}
|
||||
placeholder="Ej: Cocina principal"
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
@@ -114,36 +55,63 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Fecha de Compra</label>
|
||||
<input
|
||||
type="date"
|
||||
value={equipmentData.purchaseDate}
|
||||
onChange={(e) => setEquipmentData({ ...equipmentData, purchaseDate: e.target.value })}
|
||||
value={data.purchaseDate || ''}
|
||||
onChange={(e) => handleFieldChange('purchaseDate', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Guardando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
Agregar Equipo
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const EquipmentWizardSteps = (data: Record<string, any>, setData: (data: Record<string, any>) => void): WizardStep[] => [
|
||||
{ id: 'equipment-details', title: 'Detalles del Equipo', description: 'Tipo, modelo, ubicación', component: (props) => <EquipmentDetailsStep {...props} data={data} onDataChange={setData} /> },
|
||||
];
|
||||
export const EquipmentWizardSteps = (dataRef: React.MutableRefObject<Record<string, any>>, setData: (data: Record<string, any>) => void): WizardStep[] => {
|
||||
// New architecture: return direct component references instead of arrow functions
|
||||
// dataRef and onDataChange are now passed through WizardModal props
|
||||
return [
|
||||
{
|
||||
id: 'equipment-details',
|
||||
title: 'Detalles del Equipo',
|
||||
description: 'Tipo, modelo, ubicación',
|
||||
component: EquipmentDetailsStep,
|
||||
validate: async () => {
|
||||
const { useTenant } = await import('../../../../stores/tenant.store');
|
||||
const { equipmentService } = await import('../../../../api/services/equipment');
|
||||
const { showToast } = await import('../../../../utils/toast');
|
||||
|
||||
const data = dataRef.current;
|
||||
const { currentTenant } = useTenant.getState();
|
||||
|
||||
if (!currentTenant?.id) {
|
||||
showToast.error('No se pudo obtener información del tenant');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const equipmentCreateData: any = {
|
||||
name: `${data.type || 'oven'} - ${data.brand || 'Sin marca'}`,
|
||||
type: data.type || 'oven',
|
||||
model: data.brand || '',
|
||||
serialNumber: data.model || '',
|
||||
location: data.location || '',
|
||||
status: data.status || 'active',
|
||||
installDate: data.purchaseDate || new Date().toISOString().split('T')[0],
|
||||
lastMaintenance: new Date().toISOString().split('T')[0],
|
||||
nextMaintenance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
|
||||
maintenanceInterval: 30,
|
||||
is_active: true
|
||||
};
|
||||
|
||||
await equipmentService.createEquipment(currentTenant.id, equipmentCreateData);
|
||||
showToast.success('Equipo creado exitosamente');
|
||||
return true;
|
||||
} catch (err: any) {
|
||||
console.error('Error creating equipment:', err);
|
||||
const errorMessage = err.response?.data?.detail || 'Error al crear el equipo';
|
||||
showToast.error(errorMessage);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user