@tuturuuu/ui 0.4.0 → 0.5.0

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoint-sections.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { CheckCircle2, Pencil, Trash2, TriangleAlert } from '@tuturuuu/icons';
+import type {
+  WalletCheckpoint,
+  WalletCheckpointInterval,
+} from '@tuturuuu/internal-api/finance';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { useTranslations } from 'next-intl';
+import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
+
+export function LatestCheckpoint({
+  checkpoint,
+  currency,
+  formatDate,
+}: {
+  checkpoint: WalletCheckpoint;
+  currency: string;
+  formatDate: (value: string) => string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  return (
+    <div className="grid gap-2 rounded-md border p-3 text-sm md:grid-cols-3">
+      <Metric label={t('latest_checkpoint')}>
+        {formatDate(checkpoint.checked_at)}
+      </Metric>
+      <Metric label={t('actual_balance')}>
+        <WalletCheckpointAmount
+          amount={checkpoint.actual_balance}
+          currency={currency}
+        />
+      </Metric>
+      <Metric label={t('current_variance')}>
+        <WalletCheckpointAmount
+          amount={checkpoint.current_variance}
+          currency={currency}
+          signDisplay="always"
+        />
+      </Metric>
+    </div>
+  );
+}
+
+export function WalletCheckpointIntervals({
+  canCreateTransactions,
+  currency,
+  formatDate,
+  intervals,
+  onAdjust,
+}: {
+  canCreateTransactions: boolean;
+  currency: string;
+  formatDate: (value: string) => string;
+  intervals: WalletCheckpointInterval[];
+  onAdjust: (interval: WalletCheckpointInterval) => void;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  if (intervals.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <div className="font-medium text-sm">{t('intervals')}</div>
+      {intervals.map((interval) => (
+        <div
+          key={interval.end_checkpoint_id}
+          className={
+            interval.is_clean
+              ? 'rounded-md border border-dynamic-green/40 p-3'
+              : 'rounded-md border border-dynamic-yellow/50 p-3'
+          }
+        >
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div className="flex items-center gap-2 text-sm">
+              {interval.is_clean ? (
+                <CheckCircle2 className="h-4 w-4 text-dynamic-green" />
+              ) : (
+                <TriangleAlert className="h-4 w-4 text-dynamic-yellow" />
+              )}
+              <span>
+                {formatDate(interval.start_checked_at)} -{' '}
+                {formatDate(interval.end_checked_at)}
+              </span>
+            </div>
+            <Badge variant={interval.is_clean ? 'secondary' : 'outline'}>
+              {interval.is_clean ? t('clean') : t('unresolved')}
+            </Badge>
+          </div>
+          <div className="mt-3 grid gap-2 text-sm md:grid-cols-3">
+            <Metric label={t('actual_delta')}>
+              <WalletCheckpointAmount
+                amount={interval.actual_delta}
+                currency={currency}
+              />
+            </Metric>
+            <Metric label={t('ledger_delta')}>
+              <WalletCheckpointAmount
+                amount={interval.ledger_delta}
+                currency={currency}
+              />
+            </Metric>
+            <Metric label={t('variance')}>
+              <WalletCheckpointAmount
+                amount={interval.interval_variance}
+                currency={currency}
+                signDisplay="always"
+              />
+            </Metric>
+          </div>
+          {!interval.is_clean && canCreateTransactions && (
+            <Button
+              className="mt-3"
+              size="sm"
+              variant="outline"
+              onClick={() => onAdjust(interval)}
+            >
+              {t('create_adjustment')}
+            </Button>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function WalletCheckpointTimeline({
+  canUpdateWallets,
+  checkpoints,
+  formatDate,
+  onDelete,
+  onEdit,
+}: {
+  canUpdateWallets: boolean;
+  checkpoints: WalletCheckpoint[];
+  formatDate: (value: string) => string;
+  onDelete: (checkpoint: WalletCheckpoint) => void;
+  onEdit: (checkpoint: WalletCheckpoint) => void;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  if (checkpoints.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      <div className="font-medium text-sm">{t('timeline')}</div>
+      {checkpoints.map((checkpoint) => (
+        <div
+          key={checkpoint.id}
+          className="flex flex-col gap-2 rounded-md border p-3 md:flex-row md:items-center md:justify-between"
+        >
+          <div>
+            <div className="font-medium text-sm">
+              {formatDate(checkpoint.checked_at)}
+            </div>
+            <div className="text-muted-foreground text-sm">
+              <WalletCheckpointAmount
+                amount={checkpoint.actual_balance}
+                currency={checkpoint.currency}
+              />{' '}
+              {checkpoint.note ? `- ${checkpoint.note}` : null}
+            </div>
+          </div>
+          {canUpdateWallets && (
+            <div className="flex items-center gap-2">
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => onEdit(checkpoint)}
+                aria-label={t('edit_checkpoint')}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => onDelete(checkpoint)}
+                aria-label={t('delete_checkpoint')}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Metric({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div>
+      <div className="text-muted-foreground text-xs">{label}</div>
+      <div className="font-medium">{children}</div>
+    </div>
+  );
+}

package/src/components/ui/finance/wallets/checkpoints/wallet-checkpoints.test.tsx

@@ -0,0 +1,277 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ReactElement } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletCheckpointAdjustmentDialog } from './wallet-checkpoint-adjustment-dialog';
+import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
+import { WalletCheckpointPanel } from './wallet-checkpoint-panel';
+import { WalletTotalCheckDialog } from './wallet-total-check-dialog';
+
+const mocks = vi.hoisted(() => ({
+  createTransaction: vi.fn(),
+  createWalletCheckpointBatch: vi.fn(),
+  deleteWalletCheckpoint: vi.fn(),
+  isConfidential: true,
+  listTransactionCategories: vi.fn(),
+  listWalletCheckpoints: vi.fn(),
+  success: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/finance', () => ({
+  createTransaction: (...args: Parameters<typeof mocks.createTransaction>) =>
+    mocks.createTransaction(...args),
+  createWalletCheckpoint: vi.fn(),
+  createWalletCheckpointBatch: (
+    ...args: Parameters<typeof mocks.createWalletCheckpointBatch>
+  ) => mocks.createWalletCheckpointBatch(...args),
+  deleteWalletCheckpoint: (
+    ...args: Parameters<typeof mocks.deleteWalletCheckpoint>
+  ) => mocks.deleteWalletCheckpoint(...args),
+  listTransactionCategories: (
+    ...args: Parameters<typeof mocks.listTransactionCategories>
+  ) => mocks.listTransactionCategories(...args),
+  listWalletCheckpoints: (
+    ...args: Parameters<typeof mocks.listWalletCheckpoints>
+  ) => mocks.listWalletCheckpoints(...args),
+  updateWalletCheckpoint: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+    success: (...args: Parameters<typeof mocks.success>) =>
+      mocks.success(...args),
+  },
+}));
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en-US',
+  useTranslations:
+    () => (key: string, values?: Record<string, string | number>) =>
+      values ? `${key}:${Object.values(values).join(',')}` : key,
+}));
+
+vi.mock('../../shared/use-finance-confidential-visibility', () => ({
+  FINANCE_HIDDEN_AMOUNT: '•••••',
+  useFinanceConfidentialVisibility: () => ({
+    isConfidential: mocks.isConfidential,
+  }),
+}));
+
+function renderWithQueryClient(ui: ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
+describe('wallet checkpoint UI', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.isConfidential = true;
+    mocks.createTransaction.mockResolvedValue({ transaction_id: 'tx-1' });
+    mocks.createWalletCheckpointBatch.mockResolvedValue({
+      data: [],
+      totals_by_currency: [],
+    });
+    mocks.listTransactionCategories.mockResolvedValue([]);
+    mocks.listWalletCheckpoints.mockResolvedValue({
+      data: [],
+      intervals: [],
+      latest: null,
+    });
+  });
+
+  it('masks checkpoint amounts in confidential mode', () => {
+    render(<WalletCheckpointAmount amount={123.45} currency="USD" />);
+
+    expect(screen.getByText('•••••')).toBeInTheDocument();
+  });
+
+  it('shows checkpoint amounts when confidential mode is disabled', () => {
+    mocks.isConfidential = false;
+
+    render(<WalletCheckpointAmount amount={123.45} currency="USD" />);
+
+    expect(screen.getByText('$123.45')).toBeInTheDocument();
+  });
+
+  it('saves all-wallet checks with typed decimal values intact', async () => {
+    renderWithQueryClient(
+      <WalletTotalCheckDialog
+        wsId="ws-1"
+        canUpdateWallets
+        wallets={[
+          {
+            balance: 0,
+            currency: 'USD',
+            id: 'wallet-1',
+            name: 'Cash',
+          },
+          {
+            balance: 0,
+            currency: 'VND',
+            id: 'wallet-2',
+            name: 'Bank',
+          },
+        ]}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'all_wallet_check' }));
+    expect(
+      screen.getByRole('button', { name: 'save_checkpoints' })
+    ).toBeDisabled();
+
+    fireEvent.change(
+      screen.getByLabelText('actual_balance_with_currency:USD'),
+      {
+        target: { value: '12.3405' },
+      }
+    );
+    fireEvent.change(
+      screen.getByLabelText('actual_balance_with_currency:VND'),
+      {
+        target: { value: '-5000' },
+      }
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'save_checkpoints' }));
+
+    await waitFor(() => {
+      expect(mocks.createWalletCheckpointBatch).toHaveBeenCalledWith('ws-1', {
+        checked_at: expect.any(String),
+        entries: [
+          {
+            actual_balance: 12.3405,
+            wallet_id: 'wallet-1',
+          },
+          {
+            actual_balance: -5000,
+            wallet_id: 'wallet-2',
+          },
+        ],
+      });
+    });
+  });
+
+  it('renders clean and unresolved checkpoint intervals', async () => {
+    mocks.listWalletCheckpoints.mockResolvedValue({
+      data: [
+        {
+          actual_balance: 120,
+          checked_at: '2026-06-11T10:00:00.000Z',
+          created_at: '2026-06-11T10:01:00.000Z',
+          created_by: 'user-1',
+          currency: 'USD',
+          current_ledger_balance: 115,
+          current_variance: 5,
+          id: 'checkpoint-2',
+          ledger_balance: 110,
+          note: null,
+          original_variance: 10,
+          updated_at: '2026-06-11T10:01:00.000Z',
+          wallet_id: 'wallet-1',
+        },
+      ],
+      intervals: [
+        {
+          actual_delta: 10,
+          end_actual_balance: 110,
+          end_checked_at: '2026-06-10T10:00:00.000Z',
+          end_checkpoint_id: 'checkpoint-1',
+          interval_variance: 0,
+          is_clean: true,
+          ledger_delta: 10,
+          start_actual_balance: 100,
+          start_checked_at: '2026-06-09T10:00:00.000Z',
+          start_checkpoint_id: 'checkpoint-0',
+          transaction_count: 1,
+        },
+        {
+          actual_delta: 10,
+          end_actual_balance: 120,
+          end_checked_at: '2026-06-11T10:00:00.000Z',
+          end_checkpoint_id: 'checkpoint-2',
+          interval_variance: 5,
+          is_clean: false,
+          ledger_delta: 5,
+          start_actual_balance: 110,
+          start_checked_at: '2026-06-10T10:00:00.000Z',
+          start_checkpoint_id: 'checkpoint-1',
+          transaction_count: 2,
+        },
+      ],
+      latest: {
+        actual_balance: 120,
+        checked_at: '2026-06-11T10:00:00.000Z',
+        created_at: '2026-06-11T10:01:00.000Z',
+        created_by: 'user-1',
+        currency: 'USD',
+        current_ledger_balance: 115,
+        current_variance: 5,
+        id: 'checkpoint-2',
+        ledger_balance: 110,
+        note: null,
+        original_variance: 10,
+        updated_at: '2026-06-11T10:01:00.000Z',
+        wallet_id: 'wallet-1',
+      },
+    });
+
+    renderWithQueryClient(
+      <WalletCheckpointPanel
+        wsId="ws-1"
+        walletId="wallet-1"
+        walletName="Cash"
+        currency="USD"
+        canCreateTransactions
+        canUpdateWallets
+      />
+    );
+
+    expect(await screen.findByText('clean')).toBeInTheDocument();
+    expect(screen.getByText('unresolved')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'create_adjustment' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'edit_checkpoint' })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'delete_checkpoint' })
+    ).toBeInTheDocument();
+  });
+
+  it('creates adjustment transactions with exact signed variance and reports disabled', async () => {
+    renderWithQueryClient(
+      <WalletCheckpointAdjustmentDialog
+        wsId="ws-1"
+        walletId="wallet-1"
+        walletName="Cash"
+        checkedAt="2026-06-11T10:00:00.000Z"
+        currency="USD"
+        variance={-12.34}
+        open
+        onOpenChange={vi.fn()}
+        onCreated={vi.fn()}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'create_adjustment' }));
+
+    await waitFor(() => {
+      expect(mocks.createTransaction).toHaveBeenCalledWith('ws-1', {
+        amount: -12.34,
+        category_id: undefined,
+        description: expect.stringContaining('Cash'),
+        origin_wallet_id: 'wallet-1',
+        report_opt_in: false,
+        taken_at: expect.any(String),
+      });
+    });
+  });
+});

package/src/components/ui/finance/wallets/checkpoints/wallet-total-check-dialog.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Calculator } from '@tuturuuu/icons';
+import {
+  createWalletCheckpointBatch,
+  type WalletCheckpointBatchPayload,
+} from '@tuturuuu/internal-api/finance';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { invalidateWalletMutationQueries } from '../query-invalidation';
+import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
+
+type WalletInput = {
+  balance?: number | null;
+  currency: string;
+  id: string;
+  name?: string | null;
+};
+
+export function WalletTotalCheckDialog({
+  canUpdateWallets,
+  wallets,
+  wsId,
+}: {
+  canUpdateWallets: boolean;
+  wallets: WalletInput[];
+  wsId: string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [values, setValues] = useState<Record<string, string>>({});
+  const mutation = useMutation({
+    mutationFn: (payload: WalletCheckpointBatchPayload) =>
+      createWalletCheckpointBatch(wsId, payload),
+    onSuccess: () => {
+      toast.success(t('batch_saved'));
+      setValues({});
+      setOpen(false);
+      invalidateWalletMutationQueries(queryClient, wsId);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t('batch_error'));
+    },
+  });
+  const totals = useMemo(() => {
+    const grouped = new Map<string, number>();
+    for (const wallet of wallets) {
+      const rawValue = values[wallet.id];
+      const amount = rawValue === undefined ? Number.NaN : Number(rawValue);
+      if (!Number.isFinite(amount)) continue;
+      grouped.set(
+        wallet.currency,
+        (grouped.get(wallet.currency) ?? 0) + amount
+      );
+    }
+    return [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b));
+  }, [values, wallets]);
+  const canSubmit =
+    wallets.length > 0 &&
+    wallets.every((wallet) => Number.isFinite(Number(values[wallet.id])));
+
+  if (!canUpdateWallets) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setOpen(true)}>
+        <Calculator className="mr-2 h-4 w-4" />
+        {t('all_wallet_check')}
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{t('all_wallet_check')}</DialogTitle>
+            <DialogDescription>
+              {t('all_wallet_check_description')}
+            </DialogDescription>
+          </DialogHeader>
+          {wallets.length === 0 ? (
+            <div className="rounded-md border border-dashed p-4 text-muted-foreground text-sm">
+              {t('no_wallets')}
+            </div>
+          ) : (
+            <div className="grid gap-3">
+              {wallets.map((wallet) => (
+                <div
+                  key={wallet.id}
+                  className="grid gap-2 rounded-md border p-3"
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="truncate font-medium text-sm">
+                        {wallet.name}
+                      </div>
+                      <div className="text-muted-foreground text-xs">
+                        {t('ledger_balance')}:{' '}
+                        <WalletCheckpointAmount
+                          amount={wallet.balance ?? 0}
+                          currency={wallet.currency}
+                        />
+                      </div>
+                    </div>
+                    <div className="text-muted-foreground text-xs">
+                      {wallet.currency}
+                    </div>
+                  </div>
+                  <div className="grid gap-2">
+                    <Label htmlFor={`wallet-check-${wallet.id}`}>
+                      {t('actual_balance_with_currency', {
+                        currency: wallet.currency,
+                      })}
+                    </Label>
+                    <Input
+                      id={`wallet-check-${wallet.id}`}
+                      inputMode="decimal"
+                      value={values[wallet.id] ?? ''}
+                      onChange={(event) =>
+                        setValues((current) => ({
+                          ...current,
+                          [wallet.id]: event.target.value,
+                        }))
+                      }
+                      placeholder="0"
+                    />
+                  </div>
+                </div>
+              ))}
+              {totals.length > 0 && (
+                <div className="rounded-md border p-3">
+                  <div className="font-medium text-sm">{t('totals')}</div>
+                  <div className="mt-2 grid gap-1 text-sm">
+                    {totals.map(([currency, total]) => (
+                      <div
+                        key={currency}
+                        className="flex items-center justify-between gap-3"
+                      >
+                        <span>{currency}</span>
+                        <span>
+                          <WalletCheckpointAmount
+                            amount={total}
+                            currency={currency}
+                          />
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              {t('cancel')}
+            </Button>
+            <Button
+              disabled={!canSubmit || mutation.isPending}
+              onClick={() => {
+                mutation.mutate({
+                  checked_at: new Date().toISOString(),
+                  entries: wallets.map((wallet) => ({
+                    actual_balance: Number(values[wallet.id]),
+                    wallet_id: wallet.id,
+                  })),
+                });
+              }}
+            >
+              {mutation.isPending ? t('saving') : t('save_checkpoints')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/components/ui/finance/wallets/query-invalidation.ts

@@ -14,6 +14,8 @@ const WALLET_MUTATION_QUERY_ROOTS = new Set([
   'opening-balance',
   'recurring_transactions',
   'spending_trends',
+  'wallet-checkpoint-summary',
+  'wallet-checkpoints',
   'upcoming_recurring_transactions',
   'wallets',
   'workspace-invoices',