@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/finance/shared/charts/daily-total-chart-client.tsx

@@ -0,0 +1,384 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { ChevronLeft, ChevronRight, Eye, EyeOff } from '@tuturuuu/icons';
+import { listFinanceIncomeExpenseSummary } from '@tuturuuu/internal-api/finance';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
+import { cn } from '@tuturuuu/utils/format';
+import dayjs from 'dayjs';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Button } from '../../../button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../../chart';
+import { Skeleton } from '../../../skeleton';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  FINANCE_HIDDEN_COMPACT_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from './use-finance-confidential-visibility';
+
+type ViewMode = 'all' | 'income' | 'expense';
+
+interface DailyTotalChartClientProps {
+  wsId: string;
+  currency?: string;
+  className?: string;
+  includeConfidential?: boolean;
+}
+
+export function DailyTotalChartClient({
+  wsId,
+  currency = 'USD',
+  className,
+  includeConfidential = true,
+}: DailyTotalChartClientProps) {
+  const appLocale = useLocale();
+  const t = useTranslations('transaction-data-table');
+  const analyticsT = useTranslations('finance-analytics');
+  const [viewMode, setViewMode] = useState<ViewMode>('all');
+  const { isConfidential, toggleConfidential } =
+    useFinanceConfidentialVisibility();
+  const shouldHideAmounts = isConfidential || !includeConfidential;
+  const [dateOffset, setDateOffset] = useState(0);
+
+  const incomeColor = 'var(--chart-2)';
+  const expenseColor = 'var(--chart-5)';
+  const shortDateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(appLocale, { month: 'short', day: 'numeric' }),
+    [appLocale]
+  );
+  const longDateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(appLocale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }),
+    [appLocale]
+  );
+
+  const formatChartDate = (value: unknown, formatter: Intl.DateTimeFormat) => {
+    const fallback = String(value);
+    const date = new Date(fallback);
+
+    if (Number.isNaN(date.getTime())) {
+      return fallback;
+    }
+
+    return formatter.format(date);
+  };
+
+  // Calculate date range based on offset (14-day windows)
+  const dateRange = useMemo(() => {
+    const endDate = dayjs().subtract(dateOffset * 14, 'days');
+    const startDate = endDate.subtract(13, 'days');
+    return {
+      startDate: startDate.startOf('day').toISOString(),
+      endDate: endDate.endOf('day').toISOString(),
+      displayStart: shortDateFormatter.format(startDate.toDate()),
+      displayEnd: longDateFormatter.format(endDate.toDate()),
+    };
+  }, [dateOffset, longDateFormatter, shortDateFormatter]);
+
+  const { data: summary, isLoading } = useQuery({
+    queryKey: [
+      'daily-chart',
+      wsId,
+      dateRange.startDate,
+      dateRange.endDate,
+      includeConfidential,
+    ],
+    queryFn: () =>
+      listFinanceIncomeExpenseSummary(wsId, {
+        interval: 'daily',
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        includeConfidential,
+      }),
+  });
+
+  const data = summary?.data ?? [];
+  const openingBalance = summary?.opening_balance;
+  const closingBalance = summary?.closing_balance;
+
+  const currencyLocale = getCurrencyLocale(currency);
+
+  const formatValue = (value: number) => {
+    if (shouldHideAmounts) return FINANCE_HIDDEN_AMOUNT;
+    return new Intl.NumberFormat(currencyLocale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const formatCompactValue = (value: number) => {
+    if (shouldHideAmounts) return FINANCE_HIDDEN_COMPACT_AMOUNT;
+    return new Intl.NumberFormat(currencyLocale, {
+      notation: 'compact',
+      compactDisplay: 'short',
+      maximumFractionDigits: 1,
+    }).format(value);
+  };
+
+  if (isLoading) {
+    return (
+      <Card className={cn('flex flex-col', className)}>
+        <CardHeader>
+          <CardTitle>{t('daily_total_from_14_recent_days')}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex h-80 items-center justify-center">
+          <Skeleton className="h-full w-full" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <Card className={cn('flex flex-col', className)}>
+        <CardHeader>
+          <CardTitle>{t('daily_total_from_14_recent_days')}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex h-75 items-center justify-center">
+          <p className="text-muted-foreground text-sm">
+            {analyticsT('no-data')}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const chartData = data.map(
+    (item: {
+      period: string;
+      total_income: number;
+      total_expense: number;
+    }) => ({
+      date: item.period,
+      income: Number(item.total_income) || 0,
+      expense: Number(item.total_expense) || 0,
+    })
+  );
+
+  const chartConfig = {
+    income: {
+      label: t('income'),
+      color: incomeColor,
+    },
+    expense: {
+      label: t('expense'),
+      color: expenseColor,
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card className={cn('flex flex-col', className)}>
+      <CardHeader>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <CardTitle className="text-base sm:text-lg">
+            {t('daily_total_from_14_recent_days')}
+          </CardTitle>
+          <div className="flex flex-wrap items-center gap-2">
+            {/* Time navigation */}
+            <div className="flex items-center gap-1 rounded-lg border bg-background p-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setDateOffset((d) => d + 1)}
+                className="h-7 w-7"
+                title={analyticsT('previous-period')}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="min-w-35 px-2 text-center text-xs">
+                {dateRange.displayStart} - {dateRange.displayEnd}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setDateOffset((d) => Math.max(0, d - 1))}
+                disabled={dateOffset === 0}
+                className="h-7 w-7"
+                title={analyticsT('next-period')}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleConfidential}
+              className="h-8 w-8 shrink-0"
+              title={
+                isConfidential ? t('show_confidential') : t('hide_confidential')
+              }
+            >
+              {isConfidential ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
+
+            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+              <button
+                type="button"
+                onClick={() => setViewMode('all')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'all'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('all')}
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode('income')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'income'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('income')}
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode('expense')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'expense'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('expense')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 pb-4">
+        <ChartContainer config={chartConfig} className="h-80 w-full">
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid
+              vertical={false}
+              strokeDasharray="3 3"
+              opacity={0.3}
+            />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return formatChartDate(value, shortDateFormatter);
+              }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) =>
+                typeof value === 'number' ? formatCompactValue(value) : value
+              }
+              tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
+              width={60}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="dot" />}
+              labelFormatter={(value) => {
+                return formatChartDate(value, longDateFormatter);
+              }}
+              formatter={(value, name) => {
+                const formattedValue =
+                  typeof value === 'number' ? formatValue(value) : value;
+
+                return [
+                  <span
+                    key={name}
+                    style={{
+                      color: name === t('income') ? incomeColor : expenseColor,
+                      fontWeight: 600,
+                      fontSize: '0.875rem',
+                    }}
+                  >
+                    {formattedValue}
+                  </span>,
+                  name,
+                ];
+              }}
+              cursor={{ fill: 'hsl(var(--foreground))', opacity: 0.05 }}
+            />
+            {(viewMode === 'all' || viewMode === 'income') && (
+              <Bar
+                dataKey="income"
+                fill="var(--color-income)"
+                name={t('income')}
+                radius={[4, 4, 0, 0]}
+                maxBarSize={50}
+              />
+            )}
+            {(viewMode === 'all' || viewMode === 'expense') && (
+              <Bar
+                dataKey="expense"
+                fill="var(--color-expense)"
+                name={t('expense')}
+                radius={[4, 4, 0, 0]}
+                maxBarSize={50}
+              />
+            )}
+            {openingBalance !== undefined && !shouldHideAmounts && (
+              <ReferenceLine
+                y={openingBalance}
+                stroke="hsl(var(--primary))"
+                strokeDasharray="5 5"
+                strokeWidth={2}
+                label={{
+                  value: t('opening_balance'),
+                  position: 'insideTopLeft',
+                  fill: 'hsl(var(--primary))',
+                  fontSize: 12,
+                }}
+              />
+            )}
+            {closingBalance !== undefined && !shouldHideAmounts && (
+              <ReferenceLine
+                y={closingBalance}
+                stroke="hsl(var(--muted-foreground))"
+                strokeDasharray="5 5"
+                strokeWidth={2}
+                label={{
+                  value: t('closing_balance'),
+                  position: 'insideBottomLeft',
+                  fill: 'hsl(var(--muted-foreground))',
+                  fontSize: 12,
+                }}
+              />
+            )}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/finance/shared/charts/daily-total-chart.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { Eye, EyeOff } from '@tuturuuu/icons';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
+import { cn } from '@tuturuuu/utils/format';
+import { useLocale, useTranslations } from 'next-intl';
+import { useTheme } from 'next-themes';
+import { useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ReferenceLine,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { Button } from '../../../button';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../../chart';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  FINANCE_HIDDEN_COMPACT_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../use-finance-confidential-visibility';
+
+type ViewMode = 'all' | 'income' | 'expense';
+
+export function DailyTotalChart({
+  data,
+  className,
+  currency = 'USD',
+  openingBalance,
+  closingBalance,
+}: {
+  data: { day: string; total_income: number; total_expense: number }[];
+  className?: string;
+  currency?: string;
+  openingBalance?: number;
+  closingBalance?: number;
+}) {
+  const appLocale = useLocale();
+  const t = useTranslations('transaction-data-table');
+  const tAnalytics = useTranslations('finance-analytics');
+  const { resolvedTheme } = useTheme();
+  const [viewMode, setViewMode] = useState<ViewMode>('all');
+  const { isConfidential, toggleConfidential } =
+    useFinanceConfidentialVisibility();
+  const shortDateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(appLocale, { month: 'short', day: 'numeric' }),
+    [appLocale]
+  );
+  const longDateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(appLocale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }),
+    [appLocale]
+  );
+
+  const formatChartDate = (value: unknown, formatter: Intl.DateTimeFormat) => {
+    const fallback = String(value);
+    const date = new Date(fallback);
+
+    if (Number.isNaN(date.getTime())) {
+      return fallback;
+    }
+
+    return formatter.format(date);
+  };
+
+  const incomeColor = resolvedTheme === 'dark' ? '#4ade80' : '#16a34a';
+  const expenseColor = resolvedTheme === 'dark' ? '#f87171' : '#dc2626';
+
+  const currencyLocale = getCurrencyLocale(currency);
+
+  const formatValue = (value: number) => {
+    if (isConfidential) return FINANCE_HIDDEN_AMOUNT;
+    return new Intl.NumberFormat(currencyLocale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value);
+  };
+
+  const formatCompactValue = (value: number) => {
+    if (isConfidential) return FINANCE_HIDDEN_COMPACT_AMOUNT;
+    return new Intl.NumberFormat(currencyLocale, {
+      notation: 'compact',
+      compactDisplay: 'short',
+      maximumFractionDigits: 1,
+    }).format(value);
+  };
+
+  if (!data || data.length === 0) {
+    return (
+      <Card className={cn('flex flex-col', className)}>
+        <CardHeader>
+          <CardTitle>{t('daily_total_from_14_recent_days')}</CardTitle>
+        </CardHeader>
+        <CardContent className="flex h-75 items-center justify-center">
+          <p className="text-muted-foreground text-sm">
+            {tAnalytics('no-data')}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const chartData = data.map((item) => ({
+    date: item.day,
+    income: Number(item.total_income) || 0,
+    expense: Number(item.total_expense) || 0,
+  }));
+
+  const chartConfig = {
+    income: {
+      label: t('income'),
+      color: incomeColor,
+    },
+    expense: {
+      label: t('expense'),
+      color: expenseColor,
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card className={cn('flex flex-col', className)}>
+      <CardHeader>
+        <div className="flex items-center justify-between gap-3">
+          <CardTitle>{t('daily_total_from_14_recent_days')}</CardTitle>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleConfidential}
+              className="h-8 w-8 shrink-0"
+              title={
+                isConfidential ? t('show_confidential') : t('hide_confidential')
+              }
+            >
+              {isConfidential ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
+            <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+              <button
+                type="button"
+                onClick={() => setViewMode('all')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'all'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('all')}
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode('income')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'income'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('income')}
+              </button>
+              <button
+                type="button"
+                onClick={() => setViewMode('expense')}
+                className={cn(
+                  'rounded-md px-3 py-1.5 font-medium text-xs transition-colors',
+                  viewMode === 'expense'
+                    ? 'bg-background text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {t('expense')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 pb-4">
+        <ChartContainer config={chartConfig} className="h-80 w-full">
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid
+              vertical={false}
+              strokeDasharray="3 3"
+              opacity={0.3}
+            />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => {
+                return formatChartDate(value, shortDateFormatter);
+              }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) =>
+                typeof value === 'number' ? formatCompactValue(value) : value
+              }
+              tick={{ fill: 'hsl(var(--foreground))', opacity: 0.7 }}
+              width={60}
+            />
+            <ChartTooltip
+              content={<ChartTooltipContent indicator="dot" />}
+              labelFormatter={(value) => {
+                return formatChartDate(value, longDateFormatter);
+              }}
+              formatter={(value, name) => {
+                const formattedValue =
+                  typeof value === 'number' ? formatValue(value) : value;
+
+                return [
+                  <span
+                    key={name}
+                    style={{
+                      color: name === t('income') ? incomeColor : expenseColor,
+                      fontWeight: 600,
+                      fontSize: '0.875rem',
+                    }}
+                  >
+                    {formattedValue}
+                  </span>,
+                  name,
+                ];
+              }}
+              cursor={{ fill: 'hsl(var(--foreground))', opacity: 0.05 }}
+            />
+            {(viewMode === 'all' || viewMode === 'income') && (
+              <Bar
+                dataKey="income"
+                fill="var(--color-income)"
+                name={t('income')}
+                radius={[4, 4, 0, 0]}
+                maxBarSize={50}
+              />
+            )}
+            {(viewMode === 'all' || viewMode === 'expense') && (
+              <Bar
+                dataKey="expense"
+                fill="var(--color-expense)"
+                name={t('expense')}
+                radius={[4, 4, 0, 0]}
+                maxBarSize={50}
+              />
+            )}
+            {openingBalance !== undefined && !isConfidential && (
+              <ReferenceLine
+                y={openingBalance}
+                stroke="hsl(var(--primary))"
+                strokeDasharray="5 5"
+                strokeWidth={2}
+                label={{
+                  value: t('opening_balance'),
+                  position: 'insideTopLeft',
+                  fill: 'hsl(var(--primary))',
+                  fontSize: 12,
+                }}
+              />
+            )}
+            {closingBalance !== undefined && !isConfidential && (
+              <ReferenceLine
+                y={closingBalance}
+                stroke="hsl(var(--muted-foreground))"
+                strokeDasharray="5 5"
+                strokeWidth={2}
+                label={{
+                  value: t('closing_balance'),
+                  position: 'insideBottomLeft',
+                  fill: 'hsl(var(--muted-foreground))',
+                  fontSize: 12,
+                }}
+              />
+            )}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}