useDocyrusPivotCalendar

import { useState } from 'react';

import { useDocyrusClient } from '@docyrus/signin/react-native';

import { PivotCalendar } from '@/components/docyrus-native/pivot-calendar';
import {
  useDocyrusPivotCalendar,
  type DocyrusPivotDrilldownQuery
} from '@/hooks/docyrus-native/use-docyrus-pivot-calendar';

const toHours = (seconds: number) => seconds / 3600;

export function TimeEntriesCalendar() {
  const client = useDocyrusClient();
  const [drilldown, setDrilldown] = useState<DocyrusPivotDrilldownQuery | null>(null);

  const { pivotCalendarProps, buildDrilldownQuery } = useDocyrusPivotCalendar({
    client: client!,
    appSlug: 'base',
    dataSourceSlug: 'time_entry',
    dateField: 'date',
    measures: [
      { id: 'logged', label: 'Logged', field: 'duration', func: 'sum', transform: toHours, formatValue: v => `${v.toFixed(1)}h`, color: '#10b981' },
      { id: 'billable', label: 'Billable', field: 'duration_billable', func: 'sum', transform: toHours, formatValue: v => `${v.toFixed(1)}h`, color: '#6366f1' }
    ],
    groupBy: { field: 'record_owner', label: 'User', labelField: 'name', idField: 'user_id' },
    persistState: true,
    // `drilldown.filters` / `columns` / `orderBy` → fetch the underlying records.
    onCellClick: info => setDrilldown(buildDrilldownQuery(info))
  });

  return <PivotCalendar {...pivotCalendarProps} />;
}