Consult AS Technology
c77b4c0628
Fase 1 - UI: dark mode, skeletons, toasts Fase 2 - Filtros: avanzados Mi día, búsqueda global Ctrl+K Fase 3 - Datos: export Excel, notas apartados, auditoría Fase 4 - Dashboard: gráficas vendedor + métricas uso Fase 5 - Responsive: tablets optimizadas Fase 6 - PWA: IndexedDB offline, push notifications Backend: 3 tablas nuevas, 6 services, 6 endpoints nuevos 721 API tests + fronts verdes.
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
interface Props {
|
|
pasos: string[]
|
|
pasoActual: number
|
|
onIrAPaso: (paso: number) => void
|
|
}
|
|
|
|
/** Palomita de paso completado */
|
|
function IconoCheck() {
|
|
return (
|
|
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-3.5 w-3.5">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.42 0l-3.2-3.2a1 1 0 111.42-1.42l2.49 2.5 6.49-6.5a1 1 0 011.42 0z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Stepper de progreso del wizard; permite volver a pasos ya visitados.
|
|
* En lg se muestra vertical (sidebar sticky en la página); en móvil colapsa
|
|
* a una barra horizontal de progreso.
|
|
*/
|
|
export default function Stepper({ pasos, pasoActual, onIrAPaso }: Props) {
|
|
const avance = Math.round(((pasoActual + 1) / pasos.length) * 100)
|
|
return (
|
|
<>
|
|
{/* Móvil: barra horizontal de progreso */}
|
|
<div className="md:hidden">
|
|
<div className="flex items-baseline justify-between gap-4">
|
|
<p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">{pasos[pasoActual]}</p>
|
|
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">
|
|
Paso {pasoActual + 1} de {pasos.length}
|
|
</p>
|
|
</div>
|
|
<div className="mt-2 h-1.5 rounded-full bg-[#E5E7EB]">
|
|
<div
|
|
className="h-full rounded-full bg-accent transition-all duration-200"
|
|
style={{ width: `${avance}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Escritorio: lista vertical con el estado de cada paso */}
|
|
<nav aria-label="Progreso" className="hidden md:block">
|
|
<ol className="space-y-1">
|
|
{pasos.map((nombre, i) => {
|
|
const activo = i === pasoActual
|
|
const completado = i < pasoActual
|
|
return (
|
|
<li key={nombre}>
|
|
<button
|
|
type="button"
|
|
onClick={() => completado && onIrAPaso(i)}
|
|
disabled={!completado}
|
|
aria-current={activo ? 'step' : undefined}
|
|
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors duration-150 ${
|
|
activo
|
|
? 'bg-accent/5 font-semibold text-accent'
|
|
: completado
|
|
? 'text-[#111827] dark:text-[#E2E8F0] hover:bg-[#F1F5F9]'
|
|
: 'text-[#94A3B8]'
|
|
}`}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium ${
|
|
activo
|
|
? 'bg-accent text-white'
|
|
: completado
|
|
? 'bg-green-100 text-green-700'
|
|
: 'border border-[#D1D5DB] bg-white text-[#94A3B8]'
|
|
}`}
|
|
>
|
|
{completado ? <IconoCheck /> : i + 1}
|
|
</span>
|
|
<span className="truncate">{nombre}</span>
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ol>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|