@tuturuuu/ui 0.32.0 → 0.34.0

package/src/components/ui/finance/shared/charts/category-breakdown-chart-body.tsx

@@ -1,13 +1,4 @@
-import type { LegendPayload } from 'recharts';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Legend,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 import type { ChartConfig } from '../../../chart';
 import { ChartContainer } from '../../../chart';
 import { CategoryBreakdownLegend } from './category-breakdown-chart-legend';
@@ -28,7 +19,7 @@ interface CategoryBreakdownChartBodyProps {
   hiddenCategories: Set<string>;
   interval: ChartInterval;
   locale: string;
-  onToggleCategory: (entry: LegendPayload) => void;
+  onToggleCategory: (key: string) => void;
 }
 
 export function CategoryBreakdownChartBody({
@@ -43,76 +34,78 @@ export function CategoryBreakdownChartBody({
   onToggleCategory,
 }: CategoryBreakdownChartBodyProps) {
   return (
-    <ChartContainer config={chartConfig} className="h-80 w-full">
-      <BarChart data={chartData}>
-        <CartesianGrid vertical={false} strokeDasharray="3 3" opacity={0.3} />
-        <XAxis
-          dataKey="period"
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) =>
-            formatCategoryBreakdownXAxisTick(String(value), interval, locale)
-          }
-          tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
-        />
-        <YAxis
-          tickLine={false}
-          axisLine={false}
-          tickFormatter={(value) =>
-            typeof value === 'number' ? formatCompactValue(value) : value
-          }
-          tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
-          width={60}
-        />
-        <Legend
-          content={(props) => (
-            <CategoryBreakdownLegend
-              hiddenCategories={hiddenCategories}
-              onToggleCategory={onToggleCategory}
-              payload={props.payload}
-            />
-          )}
-          iconType="rect"
-          iconSize={12}
-        />
-        <Tooltip
-          cursor={{ fill: 'hsl(var(--foreground))', opacity: 0.05 }}
-          wrapperStyle={{
-            outline: 'none',
-            zIndex: 100,
-          }}
-          contentStyle={{
-            backgroundColor: 'transparent',
-            border: 'none',
-            padding: 0,
-            boxShadow: 'none',
-          }}
-          content={
-            <CategoryBreakdownTooltipContent
-              locale={locale}
-              interval={interval}
-              formatValue={formatValue}
-              categories={categories}
-              hiddenCategories={hiddenCategories}
-            />
-          }
-        />
-        {categories.map((category) => (
-          <Bar
-            key={category.id || 'uncategorized'}
-            dataKey={category.name}
-            stackId="categories"
-            fill={
-              hiddenCategories.has(category.name)
-                ? 'transparent'
-                : category.color
+    <div className="grid min-w-0 gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
+      <ChartContainer
+        config={chartConfig}
+        className="aspect-auto h-72 w-full min-w-0 sm:h-80"
+      >
+        <BarChart data={chartData}>
+          <CartesianGrid vertical={false} strokeDasharray="3 3" opacity={0.3} />
+          <XAxis
+            dataKey="period"
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) =>
+              formatCategoryBreakdownXAxisTick(String(value), interval, locale)
+            }
+            tick={{ fill: 'var(--foreground)', opacity: 0.7 }}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={(value) =>
+              typeof value === 'number' ? formatCompactValue(value) : value
             }
-            radius={[0, 0, 0, 0]}
-            maxBarSize={50}
-            hide={hiddenCategories.has(category.name)}
+            tick={{ fill: 'var(--foreground)', opacity: 0.7 }}
+            width={60}
           />
-        ))}
-      </BarChart>
-    </ChartContainer>
+          <Tooltip
+            cursor={{ fill: 'var(--foreground)', opacity: 0.05 }}
+            wrapperStyle={{
+              outline: 'none',
+              zIndex: 100,
+            }}
+            contentStyle={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              padding: 0,
+              boxShadow: 'none',
+            }}
+            content={
+              <CategoryBreakdownTooltipContent
+                locale={locale}
+                interval={interval}
+                formatValue={formatValue}
+                categories={categories}
+                hiddenCategories={hiddenCategories}
+              />
+            }
+          />
+          {categories.map((category) => (
+            <Bar
+              key={category.key}
+              dataKey={category.key}
+              name={category.name}
+              stackId="categories"
+              fill={
+                hiddenCategories.has(category.key)
+                  ? 'transparent'
+                  : category.color
+              }
+              radius={[0, 0, 0, 0]}
+              maxBarSize={50}
+              isAnimationActive={false}
+              hide={hiddenCategories.has(category.key)}
+            />
+          ))}
+        </BarChart>
+      </ChartContainer>
+      <CategoryBreakdownLegend
+        categories={categories}
+        hiddenCategories={hiddenCategories}
+        onToggleCategory={onToggleCategory}
+        formatValue={formatValue}
+      />
+    </div>
   );
 }

package/src/components/ui/finance/shared/charts/category-breakdown-chart-controls.tsx

@@ -50,7 +50,7 @@ export function CategoryBreakdownChartControls({
   const t = useTranslations();
 
   return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
         <CardTitle className="text-base sm:text-lg">{chartTitle}</CardTitle>
         <ToggleGroup
@@ -103,6 +103,7 @@ export function CategoryBreakdownChartControls({
                 onClick={onPreviousPeriod}
                 className="h-7 w-7"
                 title={t('finance-analytics.previous-period')}
+                aria-label={t('finance-analytics.previous-period')}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
@@ -116,6 +117,7 @@ export function CategoryBreakdownChartControls({
                 disabled={dateOffset === 0}
                 className="h-7 w-7"
                 title={t('finance-analytics.next-period')}
+                aria-label={t('finance-analytics.next-period')}
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>

package/src/components/ui/finance/shared/charts/category-breakdown-chart-legend.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { CategoryBreakdownLegend } from './category-breakdown-chart-legend';
+
+describe('category legend', () => {
+  it('toggles a category by stable id and exposes visibility to keyboard users', () => {
+    const toggle = vi.fn();
+    render(
+      <CategoryBreakdownLegend
+        categories={[
+          {
+            key: 'a',
+            id: 'a',
+            name: 'Office',
+            total: 50,
+            color: 'var(--chart-1)',
+          },
+        ]}
+        hiddenCategories={new Set(['a'])}
+        onToggleCategory={toggle}
+        formatValue={() => '•••'}
+      />
+    );
+    const button = screen.getByRole('button', { name: 'Office •••' });
+    expect(button.getAttribute('aria-pressed')).toBe('false');
+    fireEvent.click(button);
+    expect(toggle).toHaveBeenCalledWith('a');
+    expect(screen.queryByText('50')).toBeNull();
+  });
+});

package/src/components/ui/finance/shared/charts/category-breakdown-chart-legend.tsx

@@ -1,45 +1,52 @@
 import { cn } from '@tuturuuu/utils/format';
-import type { LegendPayload } from 'recharts';
+import type { CategoryBreakdownCategory } from './category-breakdown-chart-types';
 
 interface CategoryBreakdownLegendProps {
+  categories: CategoryBreakdownCategory[];
   hiddenCategories: Set<string>;
-  onToggleCategory: (entry: LegendPayload) => void;
-  payload?: readonly LegendPayload[];
+  onToggleCategory: (key: string) => void;
+  formatValue: (value: number) => string;
 }
 
 export function CategoryBreakdownLegend({
+  categories,
   hiddenCategories,
   onToggleCategory,
-  payload,
+  formatValue,
 }: CategoryBreakdownLegendProps) {
-  if (!payload) return null;
-
   return (
-    <div className="flex flex-wrap justify-center gap-3 pt-5">
-      {payload.map((entry) => {
-        const isHidden = hiddenCategories.has(entry.value as string);
+    <div className="grid max-h-64 content-start gap-1 overflow-y-auto rounded-lg border bg-muted/20 p-2 sm:grid-cols-2 xl:max-h-80 xl:grid-cols-1">
+      {categories.map((category) => {
+        const hidden = hiddenCategories.has(category.key);
         return (
           <button
-            key={String(entry.value)}
+            key={category.key}
             type="button"
-            onClick={() => onToggleCategory(entry)}
+            aria-pressed={!hidden}
+            aria-label={`${category.name} ${formatValue(category.total)}`}
+            onClick={() => onToggleCategory(category.key)}
             className={cn(
-              'flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 text-sm transition-all hover:bg-accent',
-              isHidden && 'opacity-40'
+              'flex min-w-0 items-start gap-2 rounded-md p-2 text-left text-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              hidden && 'opacity-50'
             )}
           >
-            <div
-              className="h-3 w-3 rounded-sm"
-              style={{
-                backgroundColor: entry.color,
-                opacity: isHidden ? 0.4 : 1,
-              }}
-            />
             <span
-              className={cn(isHidden && 'line-through')}
-              style={{ color: 'hsl(var(--foreground))' }}
-            >
-              {entry.value}
+              className="mt-1 size-2.5 shrink-0 rounded-sm"
+              style={{ backgroundColor: category.color }}
+            />
+            <span className="min-w-0 flex-1">
+              <span
+                className={cn(
+                  'line-clamp-2 break-words font-medium',
+                  hidden && 'line-through'
+                )}
+                title={category.name}
+              >
+                {category.name}
+              </span>
+              <span className="mt-1 block text-muted-foreground tabular-nums">
+                {formatValue(category.total)}
+              </span>
             </span>
           </button>
         );

package/src/components/ui/finance/shared/charts/category-breakdown-chart-tooltip.tsx

@@ -6,6 +6,7 @@ import type {
 
 interface TooltipPayloadItem {
   name: string;
+  dataKey?: string;
   value: number;
   color?: string;
 }
@@ -36,7 +37,7 @@ export function CategoryBreakdownTooltipContent({
   if (!active || !payload || payload.length === 0) return null;
 
   const sortedPayload = [...payload]
-    .filter((item) => !hiddenCategories.has(item.name))
+    .filter((item) => !hiddenCategories.has(item.dataKey ?? item.name))
     .sort((a, b) => (b.value || 0) - (a.value || 0));
 
   if (sortedPayload.length === 0) return null;
@@ -78,16 +79,16 @@ export function CategoryBreakdownTooltipContent({
   }
 
   return (
-    <div className="rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl">
+    <div className="max-w-sm rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl">
       <p className="mb-2 font-semibold">{formattedLabel}</p>
-      <div className="space-y-1">
+      <div className="max-h-64 space-y-1 overflow-y-auto">
         {sortedPayload.map((item) => {
-          const category = categories.find((c) => c.name === item.name);
+          const category = categories.find((c) => c.key === item.dataKey);
           const color = category?.color || item.color;
 
           return (
             <div
-              key={item.name}
+              key={item.dataKey ?? item.name}
               className="flex items-center justify-between gap-4"
             >
               <div className="flex items-center gap-2">
@@ -95,7 +96,9 @@ export function CategoryBreakdownTooltipContent({
                   className="h-3 w-3 rounded-sm"
                   style={{ backgroundColor: color }}
                 />
-                <span className="text-sm">{item.name}</span>
+                <span className="line-clamp-2 break-words text-sm">
+                  {item.name}
+                </span>
               </div>
               <span className="font-semibold text-sm" style={{ color }}>
                 {formatValue(item.value)}

package/src/components/ui/finance/shared/charts/category-breakdown-chart-types.ts

@@ -3,6 +3,8 @@ export type TransactionType = 'expense' | 'income';
 export type ChartInterval = 'daily' | 'weekly' | 'monthly' | 'yearly';
 
 export interface CategoryBreakdownCategory {
+  key: string;
+  total: number;
   color: string;
   id: string | null;
   name: string;

package/src/components/ui/finance/shared/charts/category-breakdown-chart-utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import { buildCategoryBreakdownChartData } from './category-breakdown-chart-utils';
+
+const point = (
+  id: string,
+  name: string,
+  total: number,
+  period = '2026-09-01'
+) => ({
+  category_id: id,
+  category_name: name,
+  category_color: null,
+  category_icon: null,
+  total,
+  period,
+});
+
+describe('category breakdown series', () => {
+  it('keeps categories with the same name separate and sums repeated points', () => {
+    const result = buildCategoryBreakdownChartData([
+      point('a', 'Office', 10),
+      point('b', 'Office', 20),
+      point('a', 'Office', 5),
+    ]);
+    expect(result.categories.map((category) => category.total)).toEqual([
+      20, 15,
+    ]);
+    expect(result.chartData[0]).toMatchObject({
+      category_a: 15,
+      category_b: 20,
+    });
+  });
+  it('groups smaller categories without losing any period totals', () => {
+    const result = buildCategoryBreakdownChartData(
+      [
+        point('a', 'A', 100),
+        point('b', 'B', 20),
+        point('c', 'C', 5),
+        point('b', 'B', 3, '2026-08-01'),
+      ],
+      { limit: 1, otherLabel: 'Other' }
+    );
+    expect(
+      result.categories.map((category) => [category.name, category.total])
+    ).toEqual([
+      ['A', 100],
+      ['Other', 28],
+    ]);
+    expect(result.chartData).toEqual([
+      { period: '2026-08-01', other_categories: 3 },
+      { period: '2026-09-01', category_a: 100, other_categories: 25 },
+    ]);
+  });
+  it('keeps arbitrary names out of chart data keys', () => {
+    expect(
+      buildCategoryBreakdownChartData([point('a', 'period', 10)]).chartData[0]
+    ).toEqual({ period: '2026-09-01', category_a: 10 });
+  });
+});

package/src/components/ui/finance/shared/charts/category-breakdown-chart-utils.ts

@@ -131,50 +131,64 @@ export function getActualCategoryBreakdownDisplayRange(
 }
 
 export function buildCategoryBreakdownChartData(
-  rawData: FinanceCategoryBreakdownPoint[]
+  rawData: FinanceCategoryBreakdownPoint[],
+  options?: { limit: number; otherLabel: string }
 ): {
   categories: CategoryBreakdownCategory[];
   chartData: CategoryBreakdownChartDatum[];
 } {
-  if (rawData.length === 0) {
-    return { chartData: [], categories: [] };
-  }
-
   const categoryMap = new Map<string, CategoryBreakdownCategory>();
-  let colorIndex = 0;
-
-  rawData.forEach((item) => {
-    const key = item.category_id || 'uncategorized';
-    if (categoryMap.has(key)) return;
-
-    const color =
-      item.category_color ||
-      DEFAULT_CATEGORY_COLORS[colorIndex % DEFAULT_CATEGORY_COLORS.length] ||
-      DEFAULT_CATEGORY_COLORS[0]!;
-
-    categoryMap.set(key, {
-      id: item.category_id,
-      name: item.category_name,
-      color,
-    });
-    colorIndex += 1;
-  });
-
+  for (const item of rawData) {
+    const key = `category_${item.category_id ?? 'uncategorized'}`;
+    const existing = categoryMap.get(key);
+    if (existing) {
+      existing.total += Number(item.total) || 0;
+    } else {
+      categoryMap.set(key, {
+        key,
+        id: item.category_id,
+        name: item.category_name,
+        total: Number(item.total) || 0,
+        color:
+          item.category_color ||
+          DEFAULT_CATEGORY_COLORS[
+            categoryMap.size % DEFAULT_CATEGORY_COLORS.length
+          ]!,
+      });
+    }
+  }
+  const ranked = [...categoryMap.values()].sort(
+    (a, b) => b.total - a.total || a.key.localeCompare(b.key)
+  );
+  const visible = options ? ranked.slice(0, options.limit) : ranked;
+  const visibleKeys = new Set(visible.map((category) => category.key));
+  const remainder = ranked.slice(visible.length);
+  const categories =
+    remainder.length > 0
+      ? [
+          ...visible,
+          {
+            key: 'other_categories',
+            id: null,
+            name: options!.otherLabel,
+            total: remainder.reduce((sum, category) => sum + category.total, 0),
+            color: 'var(--muted-foreground)',
+          },
+        ]
+      : visible;
   const periodMap = new Map<string, CategoryBreakdownChartDatum>();
-
-  rawData.forEach((item) => {
-    if (!periodMap.has(item.period)) {
+  for (const item of rawData) {
+    if (!periodMap.has(item.period))
       periodMap.set(item.period, { period: item.period });
-    }
-    const periodData = periodMap.get(item.period)!;
-    periodData[item.category_name] = Number(item.total) || 0;
-  });
-
-  const chartData = Array.from(periodMap.values()).sort((a, b) => {
-    return new Date(a.period).getTime() - new Date(b.period).getTime();
-  });
-
-  return { chartData, categories: Array.from(categoryMap.values()) };
+    const period = periodMap.get(item.period)!;
+    const categoryKey = `category_${item.category_id ?? 'uncategorized'}`;
+    const key = visibleKeys.has(categoryKey) ? categoryKey : 'other_categories';
+    period[key] = Number(period[key] || 0) + (Number(item.total) || 0);
+  }
+  const chartData = [...periodMap.values()].sort(
+    (a, b) => new Date(a.period).getTime() - new Date(b.period).getTime()
+  );
+  return { categories, chartData };
 }
 
 export function formatCategoryBreakdownXAxisTick(

package/src/components/ui/finance/shared/charts/category-breakdown-chart.tsx

@@ -5,7 +5,7 @@ import { listFinanceCategoryBreakdown } from '@tuturuuu/internal-api/finance';
 import { cn, getCurrencyLocale } from '@tuturuuu/utils/format';
 import { useLocale, useTranslations } from 'next-intl';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
-import type { LegendPayload } from 'recharts';
+import { Button } from '../../../button';
 import { Card, CardContent, CardHeader } from '../../../card';
 import type { ChartConfig } from '../../../chart';
 import { Skeleton } from '../../../skeleton';
@@ -47,6 +47,7 @@ export function CategoryBreakdownChart({
   const { isConfidential, toggleConfidential } =
     useFinanceConfidentialVisibility();
   const shouldHideAmounts = isConfidential || !includeConfidential;
+  const [showAll, setShowAll] = useState(false);
   const [dateOffset, setDateOffset] = useState(0);
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(
     new Set()
@@ -110,8 +111,14 @@ export function CategoryBreakdownChart({
   );
 
   const { chartData, categories } = useMemo(
-    () => buildCategoryBreakdownChartData(rawData),
-    [rawData]
+    () =>
+      buildCategoryBreakdownChartData(
+        rawData,
+        showAll
+          ? undefined
+          : { limit: 7, otherLabel: t('finance-analytics.other-categories') }
+      ),
+    [rawData, showAll, t]
   );
 
   const intervalLabels: Record<ChartInterval, string> = useMemo(
@@ -133,7 +140,7 @@ export function CategoryBreakdownChart({
 
   const chartConfig = useMemo<ChartConfig>(() => {
     return categories.reduce((config, category) => {
-      config[category.name] = {
+      config[category.key] = {
         label: category.name,
         color: category.color,
       };
@@ -166,8 +173,7 @@ export function CategoryBreakdownChart({
     [shouldHideAmounts, locale]
   );
 
-  const handleLegendClick = useCallback((entry: LegendPayload) => {
-    const categoryName = entry.value as string;
+  const handleLegendClick = useCallback((categoryName: string) => {
     setHiddenCategories((prev) => {
       const next = new Set(prev);
       if (next.has(categoryName)) {
@@ -246,7 +252,31 @@ export function CategoryBreakdownChart({
   }
 
   return renderCard(
-    <CardContent className="px-2 pb-4">
+    <CardContent className="min-w-0 space-y-3 px-4 pb-4 sm:px-6">
+      <div className="flex flex-wrap items-center justify-between gap-2 text-muted-foreground text-xs">
+        <p>
+          {t(
+            showAll
+              ? 'finance-analytics.all-categories-description'
+              : 'finance-analytics.top-categories-description'
+          )}
+        </p>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => {
+            setShowAll(!showAll);
+            setHiddenCategories(new Set());
+          }}
+          aria-expanded={showAll}
+        >
+          {t(
+            showAll
+              ? 'finance-analytics.show-top-categories'
+              : 'finance-analytics.show-all-categories'
+          )}
+        </Button>
+      </div>
       <CategoryBreakdownChartBody
         categories={categories}
         chartConfig={chartConfig}

package/src/components/ui/legacy/calendar/all-day-event-bar.tsx

@@ -12,8 +12,9 @@ import timezone from 'dayjs/plugin/timezone';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { MIN_COLUMN_WIDTH } from './config';
 import { CalendarEventProviderIcon } from './event-provider-display';
-import { getLocationType, LocationTimeline } from './location-timeline';
+import { LocationTimeline } from './location-timeline';
 import { useCalendarSettings } from './settings/settings-context';
+import { getEventLocationType } from './working-location';
 
 dayjs.extend(isBetween);
 dayjs.extend(isSameOrAfter);
@@ -22,7 +23,6 @@ dayjs.extend(timezone);
 
 const MAX_EVENTS_DISPLAY = 2;
 
-// Define types for better type safety
 interface EventSpan {
   event: CalendarEvent;
   startIndex: number;
@@ -490,11 +490,11 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
     // Location events will be rendered separately as a compact timeline strip
     // Extract location spans before filtering them out for row assignment
     const locationSpansFromMerge = mergedTempSpans
-      .filter((span) => getLocationType(span.event.title ?? '') !== null)
+      .filter((span) => getEventLocationType(span.event) !== null)
       .map((span) => ({ ...span, row: 0 })); // Give them row 0 as placeholder
 
     const nonLocationSpans = mergedTempSpans.filter(
-      (span) => getLocationType(span.event.title ?? '') === null
+      (span) => getEventLocationType(span.event) === null
     );
 
     // Sort: 1) by span length (longer events first for better packing), 2) by start date
@@ -628,7 +628,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
   // Get non-location spans for regular event display
   const regularSpans = useMemo(() => {
     return eventLayout.spans.filter(
-      (span) => getLocationType(span.event.title ?? '') === null
+      (span) => getEventLocationType(span.event) === null
     );
   }, [eventLayout.spans]);