DueDateTabs

A smart tab bar built on top of Tabs that understands a structured array of due-date summary items. It can receive the data directly via data or fetch it from an API endpoint (fetchPath). The component maps each item to a tab with a human-readable label and badge count, then calls onTabChange with both the tab key and the full DueDateItem object. Tabs reset to 'overdue' by default if that bucket exists.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | id | string | No | — | HTML id for the underlying Tabs container. | | containerStyle | React.CSSProperties | No | — | Inline styles for the outer container. | | color | string | No | 'primary' | Color passed to the underlying Tabs component. | | tabStyle | React.CSSProperties | No | — | Inline styles for each tab item. | | activeTabStyle | React.CSSProperties | No | — | Additional inline styles for the active tab. | | tabListStyle | React.CSSProperties | No | — | Inline styles for the tab list. | | showNavigationButtons | boolean | No | true | When true, shows left/right navigation buttons. | | defaultActiveKey | string | No | — | Key of the tab to activate on mount. Defaults to 'overdue' if that tab exists, otherwise the first tab. | | onTabChange | (activeKey: string, item?: DueDateItem) => void | No | — | Called when the active tab changes. Receives the tab key and the corresponding DueDateItem object. | | onLoadingChange | (isLoading: boolean) => void | No | — | Called when the loading state changes. | | onLoaded | (result: { ok: boolean; error?: any; data?: DueDateItem[] }) => void | No | — | Called when the data fetch completes (successfully or with an error). | | data | DueDateItem[] \| null | No | — | Pre-resolved array of due-date items. When provided, skips the API fetch. | | apiBaseUrl | string | No | — | Base URL for the HTTP client. | | useAuthToken | boolean | No | false | When true, uses the authenticated HTTP client. | | fetchPath | string | No | — | API endpoint that returns a DueDateItem[] array. | | reloadTrigger | number | No | — | Incrementing this value forces a re-fetch. |

DueDateItem union type

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 };

Usage

With static data

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);
      }}
    />
  );
}

With API fetch

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