DueDateTabs

Barra de pestanas inteligente construida sobre Tabs que comprende un arreglo estructurado de ítems de resumen de vencimiento. Puede recibir los datos directamente mediante data u obtenerlos de un endpoint de API (fetchPath). El componente mapea cada ítem a una pestana con una etiqueta legible y un contador, y luego llama a onTabChange con la clave de la pestana y el objeto DueDateItem completo. Las pestanas se activan en 'overdue' por defecto si ese bucket existe.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | id | string | No | — | id HTML para el contenedor Tabs subyacente. | | containerStyle | React.CSSProperties | No | — | Estilos en línea para el contenedor exterior. | | color | string | No | 'primary' | Color pasado al componente Tabs subyacente. | | tabStyle | React.CSSProperties | No | — | Estilos en línea para cada ítem de pestana. | | activeTabStyle | React.CSSProperties | No | — | Estilos en línea adicionales para la pestana activa. | | tabListStyle | React.CSSProperties | No | — | Estilos en línea para la lista de pestanas. | | showNavigationButtons | boolean | No | true | Cuando es true, muestra botones de navegación izquierda/derecha. | | defaultActiveKey | string | No | — | Clave de la pestana a activar al montar. Por defecto 'overdue' si esa pestana existe, si no la primera. | | onTabChange | (activeKey: string, item?: DueDateItem) => void | No | — | Se llama cuando cambia la pestana activa. Recibe la clave y el objeto DueDateItem correspondiente. | | onLoadingChange | (isLoading: boolean) => void | No | — | Se llama cuando cambia el estado de carga. | | onLoaded | (result: { ok: boolean; error?: any; data?: DueDateItem[] }) => void | No | — | Se llama cuando la obtención de datos finaliza (exitosamente o con error). | | data | DueDateItem[] \| null | No | — | Arreglo de ítems de vencimiento ya resueltos. Cuando se proporciona, omite la petición a la API. | | apiBaseUrl | string | No | — | URL base del cliente HTTP. | | useAuthToken | boolean | No | false | Cuando es true, usa el cliente HTTP autenticado. | | fetchPath | string | No | — | Endpoint de API que devuelve un arreglo DueDateItem[]. | | reloadTrigger | number | No | — | Incrementar este valor fuerza una nueva petición. |

Tipo unión DueDateItem

type DueDateItem =
  | { type: 'overdue'; label?: string; count: number }
  | { type: 'undated'; label?: string; count: number }
  | { type: 'day'; date: string; count: number; dayOfWeek: string; dayOfMonth: number; monthName: string; year: number };

Uso

Con datos estáticos

import React from 'react';
import DueDateTabs from '@/components/tabs/DueDateTabs';
import type { DueDateItem } from '@/components/tabs/DueDateTabs';

const items: DueDateItem[] = [
  { type: 'overdue', count: 3 },
  { type: 'day', date: '2026-02-25', count: 5, dayOfWeek: 'Wed', dayOfMonth: 25, monthName: 'Feb', year: 2026 },
  { type: 'undated', count: 2 },
];

export default function Example() {
  return (
    <DueDateTabs
      data={items}
      onTabChange={(key, item) => {
        console.log('Selected tab:', key, item);
      }}
    />
  );
}

Con fetch a API

<DueDateTabs
  fetchPath="/v1/tasks/due-date-summary"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  reloadTrigger={reloadCounter}
  onTabChange={(key) => setFilter(key)}
/>