50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
export default function GestionesSidebar({ gestiones, gestionActual, selectedId, onSelect }) {
|
|
const historial = gestiones?.historial || [];
|
|
const actual = gestiones?.gestionActual || gestionActual;
|
|
|
|
return (
|
|
<aside className="gestiones-sidebar">
|
|
<h3 className="gestiones-sidebar__title">Gestiones</h3>
|
|
|
|
<button
|
|
type="button"
|
|
className={`gestion-item gestion-item--actual${selectedId === 'actual' ? ' gestion-item--active' : ''}`}
|
|
onClick={() => onSelect('actual')}
|
|
>
|
|
<span className="gestion-item__label">Gestión actual</span>
|
|
{actual && (
|
|
<span className="gestion-item__range">
|
|
desde {actual.fechaInicio}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
{historial.length > 0 && (
|
|
<>
|
|
<p className="gestiones-sidebar__subtitle">Historial</p>
|
|
<ul className="gestion-list">
|
|
{historial.map((g) => (
|
|
<li key={g.id}>
|
|
<button
|
|
type="button"
|
|
className={`gestion-item${String(selectedId) === String(g.id) ? ' gestion-item--active' : ''}`}
|
|
onClick={() => onSelect(String(g.id))}
|
|
>
|
|
<span className="gestion-item__label">{g.etiqueta}</span>
|
|
<span className="gestion-item__range">
|
|
{g.fechaInicio} → {g.fechaFin}
|
|
</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)}
|
|
|
|
{historial.length === 0 && (
|
|
<p className="gestiones-sidebar__empty">Sin gestiones cerradas aún.</p>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|