f0a09fea29
- Add viajes module with ViajesList, ViajeForm, ViajeDetail, ViajeStatusBadge - Add flota module with UnidadesList, OperadoresList, StatusBadge components - Add tracking module with TrackingMap, EventosList, GeocercasList - Add ordenes-transporte module with OTList, OTForm, OTDetail, OTStatusBadge - Add types, API services, and feature index files for all modules - Add main entry files (App.tsx, main.tsx, index.css) - Add page components for routing - Configure Tailwind CSS with primary colors Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { EstadoUnidad } from '../types';
|
|
|
|
interface UnidadStatusBadgeProps {
|
|
estado: EstadoUnidad;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
const estadoConfig: Record<EstadoUnidad, { label: string; color: string }> = {
|
|
[EstadoUnidad.DISPONIBLE]: { label: 'Disponible', color: 'bg-green-100 text-green-800' },
|
|
[EstadoUnidad.EN_VIAJE]: { label: 'En Viaje', color: 'bg-blue-100 text-blue-800' },
|
|
[EstadoUnidad.EN_RUTA]: { label: 'En Ruta', color: 'bg-yellow-100 text-yellow-800' },
|
|
[EstadoUnidad.EN_TALLER]: { label: 'En Taller', color: 'bg-orange-100 text-orange-800' },
|
|
[EstadoUnidad.BLOQUEADA]: { label: 'Bloqueada', color: 'bg-red-100 text-red-800' },
|
|
[EstadoUnidad.BAJA]: { label: 'Baja', color: 'bg-gray-100 text-gray-800' },
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-sm',
|
|
lg: 'px-3 py-1.5 text-base',
|
|
};
|
|
|
|
export function UnidadStatusBadge({ estado, size = 'md' }: UnidadStatusBadgeProps) {
|
|
const config = estadoConfig[estado] || { label: estado, color: 'bg-gray-100 text-gray-800' };
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center rounded-full font-medium ${config.color} ${sizeClasses[size]}`}
|
|
>
|
|
{config.label}
|
|
</span>
|
|
);
|
|
}
|