super-time-tracker-ui 0.1.2

package/components/reporting-view.tsx

@@ -0,0 +1,340 @@
+'use client'
+
+import { type ReactNode, useMemo, useState } from 'react'
+
+import { ReportingDateRangePicker } from '@/components/reporting-date-range-picker'
+import { ReportingSortControls } from '@/components/reporting-sort-controls'
+import { TrackerTopbar } from '@/components/tracker-topbar'
+import { build_reporting_stats } from '@/lib/build_reporting_stats'
+import { default_reporting_sort_preference } from '@/lib/preferences/default_reporting_sort_preference'
+import { format_duration } from '@/lib/format_duration'
+import { get_date_range_ms_from_inputs } from '@/lib/get_date_range_ms_from_inputs'
+import { get_initial_reporting_range_inputs } from '@/lib/get_initial_reporting_range_inputs'
+import { parse_reporting_source_sheets } from '@/lib/parse_reporting_source_sheets'
+import { sort_sheet_report_stats } from '@/lib/sort_sheet_report_stats'
+import { use_duration_format } from '@/lib/use_duration_format'
+import { use_week_starts_on } from '@/lib/use_week_starts_on'
+import { week_starts_on_to_index } from '@/lib/week_starts_on_to_index'
+import {
+  type ReportingDateRangeInputs,
+  type ReportingSourceSheet,
+  type SheetReportSort,
+  type SheetReportStats,
+} from '@/lib/types/reporting'
+
+interface ReportingViewProps {
+  source_sheets: ReportingSourceSheet[]
+}
+
+const empty_range: ReportingDateRangeInputs = {
+  from_date: '',
+  to_date: '',
+}
+
+/**
+ * Renders per-sheet time-tracking statistics.
+ */
+export function ReportingView({ source_sheets }: ReportingViewProps) {
+  const duration_format = use_duration_format()
+  const week_starts_on = use_week_starts_on()
+  const [sort, set_sort] = useState<SheetReportSort>(() =>
+    default_reporting_sort_preference.read(),
+  )
+  const [range_inputs, set_range_inputs] = useState<ReportingDateRangeInputs>(
+    () => get_initial_reporting_range_inputs(undefined, week_starts_on),
+  )
+
+  const sheets = useMemo(
+    () => parse_reporting_source_sheets(source_sheets),
+    [source_sheets],
+  )
+  const date_range = useMemo(
+    () =>
+      get_date_range_ms_from_inputs(
+        range_inputs.from_date,
+        range_inputs.to_date,
+      ),
+    [range_inputs],
+  )
+  const range_is_partial =
+    (range_inputs.from_date.length > 0) !==
+    (range_inputs.to_date.length > 0)
+  const range_is_invalid =
+    range_is_partial ||
+    (range_inputs.from_date.length > 0 &&
+      range_inputs.to_date.length > 0 &&
+      date_range === null)
+
+  const week_starts_on_index = week_starts_on_to_index(week_starts_on)
+  const stats = useMemo(
+    () => build_reporting_stats(sheets, date_range, Date.now(), week_starts_on_index),
+    [sheets, date_range, week_starts_on_index],
+  )
+
+  const {
+    activeSheets,
+    grandAverageEntryMs,
+    grandTotalMs,
+    idleSheets,
+    periodTotals,
+    totalEntryCount,
+  } = stats
+  const sheet_count = activeSheets.length + idleSheets.length
+  const show_period_totals = date_range === null
+
+  const sorted_active_sheets = useMemo(
+    () => sort_sheet_report_stats(activeSheets, sort),
+    [activeSheets, sort],
+  )
+  const sorted_idle_sheets = useMemo(
+    () => sort_sheet_report_stats(idleSheets, sort),
+    [idleSheets, sort],
+  )
+
+  return (
+    <>
+      <TrackerTopbar breadcrumb={{ current: 'Reporting' }} />
+      <main className="flex flex-col items-center gap-6 px-5 pb-10 pt-6">
+        <header className="flex w-full max-w-2xl flex-col gap-3">
+          <h1 className="m-0 text-center text-[1.35rem] font-[650] tracking-tight">
+            Reporting
+          </h1>
+          <p className="m-0 max-w-md self-center text-center text-[0.9rem] leading-relaxed text-muted">
+            {date_range === null
+              ? 'Time tracked across all sheets.'
+              : 'Metrics filtered to the selected date range.'}
+          </p>
+        </header>
+
+        <ReportingDateRangePicker
+          range={range_inputs}
+          is_invalid={range_is_invalid}
+          on_range_change={set_range_inputs}
+          on_clear={() => set_range_inputs(empty_range)}
+        />
+
+        <section
+          className="grid w-full max-w-2xl grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4"
+          aria-label="Summary"
+        >
+          <SummaryCard
+            label={date_range === null ? 'Total tracked' : 'In range'}
+            value={format_duration(grandTotalMs, duration_format)}
+          />
+          <SummaryCard
+            label="Avg per entry"
+            value={format_duration(grandAverageEntryMs, duration_format)}
+          />
+          <SummaryCard label="Sheets" value={String(sheet_count)} />
+          <SummaryCard label="Entries" value={String(totalEntryCount)} />
+        </section>
+
+        {show_period_totals ? (
+          <section
+            className="grid w-full max-w-2xl grid-cols-1 gap-2 sm:grid-cols-3"
+            aria-label="Period totals"
+          >
+            <SummaryCard
+              label="Today"
+              value={format_duration(periodTotals.todayMs, duration_format)}
+            />
+            <SummaryCard
+              label="This week"
+              value={format_duration(periodTotals.weekMs, duration_format)}
+            />
+            <SummaryCard
+              label="This month"
+              value={format_duration(periodTotals.monthMs, duration_format)}
+            />
+          </section>
+        ) : null}
+
+        {sheet_count === 0 ? (
+          <p className="m-0 w-full max-w-2xl text-center text-[0.9rem] text-muted">
+            No sheets yet. Create a sheet on the tracker to start logging time.
+          </p>
+        ) : range_is_invalid ? (
+          <p className="m-0 w-full max-w-2xl text-center text-[0.9rem] text-muted">
+            Choose both dates to filter metrics, or clear the range to see all
+            time.
+          </p>
+        ) : (
+          <>
+            <ReportingSortControls sort={sort} on_sort_change={set_sort} />
+            {activeSheets.length === 0 ? (
+              <p className="m-0 w-full max-w-2xl text-center text-[0.9rem] text-muted">
+                {date_range === null
+                  ? 'No tracked time yet. Check in on a sheet to see stats here.'
+                  : 'No tracked time in this date range.'}
+              </p>
+            ) : (
+              <SheetStatsSection
+                title="Tracked sheets"
+                aria_label="Tracked sheet statistics"
+              >
+                {sorted_active_sheets.map((sheet) => (
+                  <SheetStatsRow
+                    key={sheet.sheetName}
+                    sheet={sheet}
+                    grand_total_ms={grandTotalMs}
+                    duration_format={duration_format}
+                  />
+                ))}
+              </SheetStatsSection>
+            )}
+            {idleSheets.length > 0 ? (
+              <SheetStatsSection
+                title={date_range === null ? 'Empty sheets' : 'Sheets in range'}
+                aria_label="Sheets without time in range"
+                muted
+              >
+                {sorted_idle_sheets.map((sheet) => (
+                  <IdleSheetStatsRow
+                    key={sheet.sheetName}
+                    sheet={sheet}
+                    in_range={date_range !== null}
+                  />
+                ))}
+              </SheetStatsSection>
+            ) : null}
+          </>
+        )}
+      </main>
+    </>
+  )
+}
+
+interface SummaryCardProps {
+  label: string
+  value: string
+}
+
+/**
+ * Compact summary metric for the reporting header.
+ */
+function SummaryCard({ label, value }: SummaryCardProps) {
+  return (
+    <div className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+      <p className="m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+        {label}
+      </p>
+      <p className="m-0 mt-1 text-[1.1rem] font-[650] tracking-tight">{value}</p>
+    </div>
+  )
+}
+
+interface SheetStatsSectionProps {
+  title: string
+  aria_label: string
+  muted?: boolean
+  children: ReactNode
+}
+
+/**
+ * Grouped list of sheet statistics with a section heading.
+ */
+function SheetStatsSection({
+  title,
+  aria_label,
+  muted = false,
+  children,
+}: SheetStatsSectionProps) {
+  return (
+    <section className="flex w-full max-w-2xl flex-col gap-2">
+      <h2
+        className={`m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em] ${
+          muted ? 'text-muted' : 'text-foreground'
+        }`}
+      >
+        {title}
+      </h2>
+      <ul
+        className="m-0 flex list-none flex-col gap-2 p-0"
+        aria-label={aria_label}
+      >
+        {children}
+      </ul>
+    </section>
+  )
+}
+
+interface SheetStatsRowProps {
+  sheet: SheetReportStats
+  grand_total_ms: number
+  duration_format: import('@/lib/types/ui_preferences').DurationFormat
+}
+
+/**
+ * Single sheet row with duration, share, and entry count.
+ */
+function SheetStatsRow({
+  sheet,
+  grand_total_ms,
+  duration_format,
+}: SheetStatsRowProps) {
+  const share_percent =
+    grand_total_ms > 0 ? Math.round((sheet.totalMs / grand_total_ms) * 100) : 0
+  const bar_percent = grand_total_ms > 0 ? (sheet.totalMs / grand_total_ms) * 100 : 0
+
+  return (
+    <li className="rounded-md border border-panel-border bg-panel p-3.5 shadow-sm">
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h2 className="m-0 min-w-0 truncate text-[1rem] font-semibold">{sheet.sheetName}</h2>
+        <span className="shrink-0 font-mono text-[0.95rem] font-semibold text-accent">
+          {format_duration(sheet.totalMs, duration_format)}
+        </span>
+      </div>
+      <div
+        className="mt-2.5 h-1.5 overflow-hidden rounded-full bg-surface-raised"
+        role="presentation"
+      >
+        <div
+          className="h-full rounded-full bg-accent"
+          style={{ width: `${bar_percent}%` }}
+        />
+      </div>
+      <p className="m-0 mt-2 flex flex-wrap gap-x-3 gap-y-0.5 text-[0.82rem] text-muted">
+        <span>{share_percent}% of total</span>
+        <span>
+          {sheet.entryCount} {sheet.entryCount === 1 ? 'entry' : 'entries'}
+        </span>
+        <span>
+          {sheet.entryCount === 0
+            ? 'No average'
+            : `${format_duration(sheet.averageEntryMs, duration_format)} avg`}
+        </span>
+        {sheet.hasActiveEntry ? <span className="text-accent">Timer running</span> : null}
+      </p>
+    </li>
+  )
+}
+
+interface IdleSheetStatsRowProps {
+  sheet: SheetReportStats
+  in_range: boolean
+}
+
+/**
+ * Compact row for sheets with no entries or no tracked time.
+ */
+function IdleSheetStatsRow({ sheet, in_range }: IdleSheetStatsRowProps) {
+  const status_label = in_range
+    ? 'No time in range'
+    : sheet.entryCount === 0
+      ? 'No entries'
+      : 'No tracked time'
+
+  return (
+    <li className="rounded-md border border-dashed border-panel-border bg-surface-raised/60 px-3.5 py-2.5">
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h3 className="m-0 min-w-0 truncate text-[0.95rem] font-medium text-muted">
+          {sheet.sheetName}
+        </h3>
+        <span className="shrink-0 text-[0.82rem] text-muted">{status_label}</span>
+      </div>
+      {sheet.hasActiveEntry ? (
+        <p className="m-0 mt-1.5 text-[0.82rem] text-accent">Timer running</p>
+      ) : null}
+    </li>
+  )
+}

package/components/setting-radio-group.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { type ReactNode } from 'react'
+
+interface SettingRadioGroupOption<T extends string> {
+  value: T
+  label: string
+  description?: string
+}
+
+interface SettingRadioGroupProps<T extends string> {
+  name: string
+  legend: ReactNode
+  description?: ReactNode
+  value: T
+  options: SettingRadioGroupOption<T>[]
+  disabled?: boolean
+  on_change: (value: T) => void
+}
+
+/**
+ * Themed radio group for single-choice settings.
+ */
+export function SettingRadioGroup<T extends string>({
+  name,
+  legend,
+  description,
+  value,
+  options,
+  disabled = false,
+  on_change,
+}: SettingRadioGroupProps<T>) {
+  return (
+    <fieldset className="m-0 border-0 p-0">
+      <legend className="m-0 mb-1 text-[0.95rem] font-semibold">
+        {legend}
+      </legend>
+      {description !== undefined ? (
+        <p className="m-0 mb-2 text-[0.8rem] leading-snug text-muted">
+          {description}
+        </p>
+      ) : null}
+      <div className="flex flex-col gap-1.5">
+        {options.map((option) => {
+          const is_selected = option.value === value
+
+          return (
+            <label
+              key={option.value}
+              className={`flex cursor-pointer items-start gap-2 rounded-md border px-2.5 py-2 transition-colors duration-150 ${
+                is_selected
+                  ? 'border-accent-border bg-accent-soft'
+                  : 'border-panel-border hover:bg-surface-hover'
+              }`}
+            >
+              <input
+                type="radio"
+                className="mt-1 shrink-0"
+                name={name}
+                value={option.value}
+                checked={is_selected}
+                disabled={disabled}
+                onChange={() => on_change(option.value)}
+              />
+              <span className="flex flex-col gap-0.5">
+                <span className="text-[0.9rem] font-semibold">{option.label}</span>
+                {option.description !== undefined ? (
+                  <span className="text-[0.8rem] leading-snug text-muted">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+            </label>
+          )
+        })}
+      </div>
+    </fieldset>
+  )
+}

package/components/settings-nav.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+interface SettingsNavItem {
+  href: string
+  label: string
+  match: (pathname: string) => boolean
+}
+
+const items: SettingsNavItem[] = [
+  {
+    href: '/settings',
+    label: 'General',
+    match: (pathname) => pathname === '/settings',
+  },
+  {
+    href: '/settings/display',
+    label: 'Display & layout',
+    match: (pathname) => pathname.startsWith('/settings/display'),
+  },
+  {
+    href: '/settings/data',
+    label: 'Data & backup',
+    match: (pathname) => pathname.startsWith('/settings/data'),
+  },
+  {
+    href: '/settings/tags',
+    label: 'Tag management',
+    match: (pathname) => pathname.startsWith('/settings/tags'),
+  },
+]
+
+/**
+ * Sidebar navigation for the settings sub-pages.
+ */
+export function SettingsNav() {
+  const pathname = usePathname() ?? '/settings'
+
+  return (
+    <nav aria-label="Settings sections" className="w-full">
+      <ul className="m-0 flex w-full list-none flex-col gap-0.5 p-0">
+        {items.map((item) => {
+          const is_active = item.match(pathname)
+
+          return (
+            <li key={item.href}>
+              <Link
+                href={item.href}
+                aria-current={is_active ? 'page' : undefined}
+                className={`block rounded-md px-3 py-2 text-[0.9rem] no-underline transition-colors duration-150 ${
+                  is_active
+                    ? 'bg-accent-soft text-foreground'
+                    : 'text-muted hover:bg-surface-hover hover:text-foreground'
+                }`}
+              >
+                {item.label}
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}

package/components/settings-page-layout.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react'
+
+import { SettingsNav } from '@/components/settings-nav'
+import { SettingsSavedToast } from '@/components/settings-saved-toast'
+import {
+  TrackerTopbar,
+  type TrackerTopbarBreadcrumb,
+} from '@/components/tracker-topbar'
+
+interface SettingsPageLayoutProps {
+  breadcrumb: TrackerTopbarBreadcrumb
+  title: string
+  description?: string
+  children: ReactNode
+}
+
+/**
+ * Shared chrome for settings sub-pages: topbar, sidebar nav, and main content.
+ */
+export function SettingsPageLayout({
+  breadcrumb,
+  title,
+  description,
+  children,
+}: SettingsPageLayoutProps) {
+  return (
+    <>
+      <SettingsSavedToast />
+      <TrackerTopbar breadcrumb={breadcrumb} />
+      <main className="mx-auto grid w-full max-w-[1120px] grid-cols-[minmax(12rem,16rem)_minmax(0,1fr)] gap-6 px-5 pb-10 pt-6 max-[860px]:grid-cols-1">
+        <aside className="flex flex-col gap-2">
+          <h2 className="m-0 text-[0.72rem] font-semibold uppercase tracking-[0.06em] text-muted">
+            Settings
+          </h2>
+          <SettingsNav />
+        </aside>
+        <section className="flex min-w-0 flex-col gap-4">
+          <header className="flex flex-col gap-1">
+            <h1 className="m-0 text-[1.35rem] font-[650] tracking-tight">
+              {title}
+            </h1>
+            {description !== undefined ? (
+              <p className="m-0 text-[0.9rem] leading-relaxed text-muted">
+                {description}
+              </p>
+            ) : null}
+          </header>
+          {children}
+        </section>
+      </main>
+    </>
+  )
+}

package/components/settings-saved-toast.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import {
+  SETTINGS_SAVED_DEFAULT_MESSAGE,
+  subscribe_settings_saved,
+} from '@/lib/notify_settings_saved'
+
+const toast_visible_ms = 2800
+
+/**
+ * Fixed toast shown when a settings preference is persisted.
+ */
+export function SettingsSavedToast() {
+  const [message, set_message] = useState<string | null>(null)
+
+  useEffect(() => {
+    let hide_timer: ReturnType<typeof setTimeout> | null = null
+
+    const unsubscribe = subscribe_settings_saved((next_message) => {
+      set_message(next_message)
+
+      if (hide_timer !== null) {
+        clearTimeout(hide_timer)
+      }
+
+      hide_timer = setTimeout(() => {
+        set_message(null)
+        hide_timer = null
+      }, toast_visible_ms)
+    })
+
+    return () => {
+      unsubscribe()
+
+      if (hide_timer !== null) {
+        clearTimeout(hide_timer)
+      }
+    }
+  }, [])
+
+  if (message === null) {
+    return null
+  }
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      className="pointer-events-none fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-md border border-accent-border bg-panel px-4 py-2.5 text-[0.88rem] font-medium text-foreground shadow-md transition-[opacity,transform] duration-200"
+    >
+      {message || SETTINGS_SAVED_DEFAULT_MESSAGE}
+    </div>
+  )
+}

package/components/sheet-actions-menu.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+import { HamburgerIcon } from '@/components/hamburger-icon'
+
+interface SheetActionsMenuProps {
+  sheet_name: string
+  is_pending: boolean
+  can_delete: boolean
+  on_rename: () => void
+  on_delete: () => void
+}
+
+const menu_item_class =
+  'block w-full cursor-pointer rounded-[0.45rem] border-0 bg-transparent px-2.5 py-1.5 text-left font-inherit text-[0.85rem] text-inherit hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-55'
+
+/**
+ * Hamburger menu for sheet actions such as rename.
+ */
+export function SheetActionsMenu({
+  sheet_name,
+  is_pending,
+  can_delete,
+  on_rename,
+  on_delete,
+}: SheetActionsMenuProps) {
+  const [is_open, set_is_open] = useState(false)
+  const menu_ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!is_open) {
+      return
+    }
+
+    const handle_pointer_down = (event: PointerEvent): void => {
+      if (
+        menu_ref.current !== null &&
+        !menu_ref.current.contains(event.target as Node)
+      ) {
+        set_is_open(false)
+      }
+    }
+
+    document.addEventListener('pointerdown', handle_pointer_down)
+
+    return () => {
+      document.removeEventListener('pointerdown', handle_pointer_down)
+    }
+  }, [is_open])
+
+  const close_menu = (): void => {
+    set_is_open(false)
+  }
+
+  return (
+    <div className="relative shrink-0 self-center" ref={menu_ref}>
+      <button
+        type="button"
+        className="inline-flex cursor-pointer appearance-none items-center justify-center rounded-none border-0 bg-transparent p-0.5 text-muted shadow-none hover:opacity-75 focus-visible:outline-2 focus-visible:outline-input-focus-border focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-55"
+        aria-label={`Actions for sheet ${sheet_name}`}
+        aria-expanded={is_open}
+        aria-haspopup="menu"
+        disabled={is_pending}
+        onClick={() => set_is_open((open) => !open)}
+      >
+        <HamburgerIcon />
+      </button>
+      {is_open ? (
+        <ul
+          className="absolute right-0 top-full z-10 mt-1.5 min-w-56 list-none rounded-md border border-panel-border bg-panel p-1.5 shadow-md"
+          role="menu"
+        >
+          <li role="none">
+            <button
+              type="button"
+              className={menu_item_class}
+              role="menuitem"
+              disabled={is_pending}
+              onClick={() => {
+                close_menu()
+                on_rename()
+              }}
+            >
+              Rename
+            </button>
+          </li>
+          <li className="my-1 border-t border-panel-border" role="separator" aria-hidden="true" />
+          <li role="none">
+            <button
+              type="button"
+              className={`${menu_item_class} text-danger`}
+              role="menuitem"
+              disabled={is_pending || !can_delete}
+              title={can_delete ? undefined : 'Cannot delete the last sheet'}
+              onClick={() => {
+                close_menu()
+                on_delete()
+              }}
+            >
+              Delete sheet
+            </button>
+          </li>
+        </ul>
+      ) : null}
+    </div>
+  )
+}