@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/custom/sidebar-remote-behavior-bridge.tsx

@@ -9,12 +9,14 @@ import { useEffect, useRef } from 'react';
 type SidebarBehavior = 'expanded' | 'collapsed' | 'hover';
 
 const SIDEBAR_BEHAVIOR_CONFIG_KEY = 'SIDEBAR_BEHAVIOR';
+const RECENT_LOCAL_BEHAVIOR_GRACE_MS = 5 * 60 * 1000;
 
 const isValidBehavior = (value: string | undefined): value is SidebarBehavior =>
   value === 'expanded' || value === 'collapsed' || value === 'hover';
 
 interface SidebarRemoteBehaviorBridgeProps {
   behavior: SidebarBehavior;
+  behaviorUpdatedAt: number | null;
   localOverride: boolean;
   localOverrideVersion: number;
   onApplyRemoteBehavior: (newBehavior: SidebarBehavior) => void;
@@ -24,6 +26,7 @@ interface SidebarRemoteBehaviorBridgeProps {
 
 export function SidebarRemoteBehaviorBridge({
   behavior,
+  behaviorUpdatedAt,
   localOverride,
   localOverrideVersion,
   onApplyRemoteBehavior,
@@ -39,6 +42,12 @@ export function SidebarRemoteBehaviorBridge({
   const persistedUserChangeVersion = useRef(0);
   const handledLocalOverrideVersion = useRef(0);
 
+  const hasRecentLocalBehavior =
+    typeof behaviorUpdatedAt === 'number' &&
+    Number.isFinite(behaviorUpdatedAt) &&
+    Date.now() - behaviorUpdatedAt >= 0 &&
+    Date.now() - behaviorUpdatedAt <= RECENT_LOCAL_BEHAVIOR_GRACE_MS;
+
   useEffect(() => {
     if (!remoteLoaded || !isValidBehavior(remoteBehavior)) return;
 
@@ -58,15 +67,25 @@ export function SidebarRemoteBehaviorBridge({
 
     hasAppliedRemote.current = true;
 
-    if (remoteBehavior !== behavior) {
-      onApplyRemoteBehavior(remoteBehavior);
+    if (remoteBehavior === behavior) return;
+
+    if (hasRecentLocalBehavior) {
+      updateConfig.mutate({
+        configId: SIDEBAR_BEHAVIOR_CONFIG_KEY,
+        value: behavior,
+      });
+      return;
     }
+
+    onApplyRemoteBehavior(remoteBehavior);
   }, [
     behavior,
+    hasRecentLocalBehavior,
     localOverride,
     onApplyRemoteBehavior,
     remoteBehavior,
     remoteLoaded,
+    updateConfig,
     userChangeVersion,
   ]);
 

package/src/components/ui/finance/finance-layout.tsx

@@ -1,5 +1,5 @@
 import { Navigation, type NavLink } from '@tuturuuu/ui/custom/navigation';
-import { FinanceNumbersVisibilityToggle } from '@tuturuuu/ui/finance/shared/numbers-visibility-toggle';
+import { FinanceLayoutControls } from '@tuturuuu/ui/finance/shared/finance-layout-controls';
 import { QuickActions } from '@tuturuuu/ui/finance/shared/quick-actions';
 import { getPermissions } from '@tuturuuu/utils/workspace-helper';
 import { notFound, redirect } from 'next/navigation';
@@ -88,9 +88,7 @@ export default async function FinanceLayout({
   return (
     <>
       <Navigation navLinks={navLinks} />
-      <div className="mb-4 flex justify-end">
-        <FinanceNumbersVisibilityToggle />
-      </div>
+      <FinanceLayoutControls financePrefix={financePrefix} />
       {children}
       <QuickActions wsId={wsId} />
     </>

package/src/components/ui/finance/shared/balance-mode-toggle.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { ToggleGroup, ToggleGroupItem } from '../../toggle-group';
+import {
+  type FinanceBalanceMode,
+  useFinanceBalanceMode,
+} from './use-finance-balance-mode';
+
+export function FinanceBalanceModeToggle() {
+  const t = useTranslations('wallet-checkpoints');
+  const { mode, setMode } = useFinanceBalanceMode();
+
+  return (
+    <ToggleGroup
+      type="single"
+      variant="outline"
+      size="sm"
+      value={mode}
+      onValueChange={(value) => {
+        if (value === 'ledger' || value === 'audited') {
+          setMode(value as FinanceBalanceMode);
+        }
+      }}
+      aria-label={t('balance_mode')}
+    >
+      <ToggleGroupItem value="ledger" aria-label={t('ledger_mode')}>
+        {t('ledger')}
+      </ToggleGroupItem>
+      <ToggleGroupItem value="audited" aria-label={t('audited_mode')}>
+        {t('audited')}
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+}

package/src/components/ui/finance/shared/finance-layout-controls.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { usePathname } from 'next/navigation';
+import { FinanceBalanceModeToggle } from './balance-mode-toggle';
+import { FinanceNumbersVisibilityToggle } from './numbers-visibility-toggle';
+
+interface FinanceLayoutControlsProps {
+  className?: string;
+  financePrefix?: string;
+}
+
+function normalizePathname(pathname: string | null) {
+  if (!pathname) return '';
+  return pathname.replace(/\/+$/u, '');
+}
+
+function isWalletIndexPath(pathname: string, financePrefix: string) {
+  const normalizedPrefix = financePrefix.replace(/\/+$/u, '');
+  if (normalizedPrefix) {
+    return pathname.endsWith(`${normalizedPrefix}/wallets`);
+  }
+
+  return pathname.endsWith('/wallets');
+}
+
+export function FinanceLayoutControls({
+  className,
+  financePrefix = '/finance',
+}: FinanceLayoutControlsProps) {
+  const pathname = normalizePathname(usePathname());
+
+  if (isWalletIndexPath(pathname, financePrefix)) {
+    return null;
+  }
+
+  return (
+    <div className={cn('mb-4 flex flex-wrap justify-end gap-2', className)}>
+      <FinanceBalanceModeToggle />
+      <FinanceNumbersVisibilityToggle />
+    </div>
+  );
+}

package/src/components/ui/finance/shared/quick-actions.tsx

@@ -91,12 +91,20 @@ export function QuickActions({
           </DropdownMenuItem>
         )}
         {canCreateWallets && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/wallets?create=wallet')}
-          >
-            <Wallet className="mr-2 h-4 w-4" />
-            <span>{t('new_wallet')}</span>
-          </DropdownMenuItem>
+          <>
+            <DropdownMenuItem
+              onClick={() => pushFinanceHref('/wallets?create=wallet')}
+            >
+              <Wallet className="mr-2 h-4 w-4" />
+              <span>{t('new_wallet')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => pushFinanceHref('/wallets?create=credit-card')}
+            >
+              <CreditCard className="mr-2 h-4 w-4" />
+              <span>{t('new_credit_card')}</span>
+            </DropdownMenuItem>
+          </>
         )}
         {canManageFinance && (
           <DropdownMenuItem

package/src/components/ui/finance/shared/use-finance-balance-mode.ts

@@ -0,0 +1,72 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+const BALANCE_MODE_COOKIE_NAME = 'finance-balance-mode';
+const BALANCE_MODE_CHANGE_EVENT = 'finance-balance-mode-change';
+
+export type FinanceBalanceMode = 'audited' | 'ledger';
+
+const isBalanceMode = (value: string | null): value is FinanceBalanceMode =>
+  value === 'audited' || value === 'ledger';
+
+const getCookie = (name: string): string | null => {
+  if (typeof document === 'undefined') return null;
+  const nameEQ = `${name}=`;
+  const cookies = document.cookie.split(';');
+  for (let i = 0; i < cookies.length; i += 1) {
+    let cookie = cookies[i];
+    if (!cookie) continue;
+    while (cookie.charAt(0) === ' ') cookie = cookie.substring(1);
+    if (cookie.indexOf(nameEQ) === 0) {
+      return cookie.substring(nameEQ.length);
+    }
+  }
+  return null;
+};
+
+const setCookie = (name: string, value: string, days = 365) => {
+  const expires = new Date();
+  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+  // biome-ignore lint/suspicious/noDocumentCookie: Used for finance balance mode persistence.
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
+};
+
+export function useFinanceBalanceMode() {
+  const [mode, setModeState] = useState<FinanceBalanceMode>('ledger');
+
+  useEffect(() => {
+    const saved = getCookie(BALANCE_MODE_COOKIE_NAME);
+    if (isBalanceMode(saved)) {
+      setModeState(saved);
+    }
+
+    const handleBalanceModeChange = () => {
+      const nextValue = getCookie(BALANCE_MODE_COOKIE_NAME);
+      if (isBalanceMode(nextValue)) {
+        setModeState(nextValue);
+      }
+    };
+
+    window.addEventListener(BALANCE_MODE_CHANGE_EVENT, handleBalanceModeChange);
+
+    return () => {
+      window.removeEventListener(
+        BALANCE_MODE_CHANGE_EVENT,
+        handleBalanceModeChange
+      );
+    };
+  }, []);
+
+  const setMode = useCallback((nextMode: FinanceBalanceMode) => {
+    setModeState(nextMode);
+    setCookie(BALANCE_MODE_COOKIE_NAME, nextMode);
+    window.dispatchEvent(new Event(BALANCE_MODE_CHANGE_EVENT));
+  }, []);
+
+  return {
+    isAuditedMode: mode === 'audited',
+    mode,
+    setMode,
+  };
+}

package/src/components/ui/finance/shared/wallet-balance-mode.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getWalletBalanceTone,
+  resolveWalletBalanceForMode,
+} from './wallet-balance-mode';
+
+describe('wallet balance mode resolver', () => {
+  it('uses ledger balance in ledger mode', () => {
+    expect(
+      resolveWalletBalanceForMode(
+        {
+          audit_balance: 150,
+          audit_status: 'unresolved',
+          balance: 100,
+        },
+        'ledger'
+      )
+    ).toMatchObject({
+      contextBalance: 150,
+      displayBalance: 100,
+      hasAuditedBalance: true,
+      usesAuditedBalance: false,
+    });
+  });
+
+  it('uses audited balance in audited mode when a checkpoint exists', () => {
+    expect(
+      resolveWalletBalanceForMode(
+        {
+          audit_balance: -25,
+          audit_status: 'unresolved',
+          balance: 100,
+        },
+        'audited'
+      )
+    ).toMatchObject({
+      contextBalance: 100,
+      displayBalance: -25,
+      hasAuditedBalance: true,
+      usesAuditedBalance: true,
+    });
+  });
+
+  it('falls back to ledger balance in audited mode without a checkpoint', () => {
+    expect(
+      resolveWalletBalanceForMode(
+        {
+          audit_status: 'no_checkpoint',
+          balance: 100,
+        },
+        'audited'
+      )
+    ).toMatchObject({
+      contextBalance: null,
+      displayBalance: 100,
+      hasAuditedBalance: false,
+      usesAuditedBalance: false,
+    });
+  });
+
+  it('derives tone from the effective balance', () => {
+    expect(getWalletBalanceTone(10)).toBe('positive');
+    expect(getWalletBalanceTone(-10)).toBe('negative');
+    expect(getWalletBalanceTone(0)).toBe('neutral');
+  });
+});

package/src/components/ui/finance/shared/wallet-balance-mode.ts

@@ -0,0 +1,42 @@
+import type { FinanceBalanceMode } from './use-finance-balance-mode';
+
+type WalletBalanceInput = {
+  audit_balance?: number | null;
+  audit_status?: 'clean' | 'no_checkpoint' | 'unresolved' | null;
+  audit_variance?: number | null;
+  balance?: number | null;
+};
+
+function toFiniteNumber(value: number | null | undefined) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+
+export function resolveWalletBalanceForMode(
+  wallet: WalletBalanceInput,
+  mode: FinanceBalanceMode
+) {
+  const ledgerBalance = toFiniteNumber(wallet.balance) ?? 0;
+  const auditedBalance = toFiniteNumber(wallet.audit_balance);
+  const hasAuditedBalance = auditedBalance !== null;
+  const usesAuditedBalance = mode === 'audited' && hasAuditedBalance;
+  const displayBalance = usesAuditedBalance ? auditedBalance : ledgerBalance;
+  const contextBalance = usesAuditedBalance ? ledgerBalance : auditedBalance;
+
+  return {
+    auditedBalance,
+    auditStatus: wallet.audit_status ?? null,
+    auditVariance: toFiniteNumber(wallet.audit_variance),
+    contextBalance,
+    displayBalance,
+    hasAuditedBalance,
+    isAuditedMode: mode === 'audited',
+    ledgerBalance,
+    usesAuditedBalance,
+  };
+}
+
+export function getWalletBalanceTone(balance: number) {
+  if (balance > 0) return 'positive';
+  if (balance < 0) return 'negative';
+  return 'neutral';
+}

package/src/components/ui/finance/transactions/form-types.ts

@@ -23,6 +23,26 @@ export type TransactionCategory = DbTransactionCategory;
 export type Wallet = DbWallet;
 export type TagDraft = Pick<DbTag, 'name'> & Partial<Pick<DbTag, 'color'>>;
 
+export type TransactionFormInitialMode = 'transaction' | 'transfer';
+
+export interface TransactionFormInitialTransaction {
+  amount?: number;
+  category_id?: string;
+  categoryKind?: 'expense' | 'income';
+  description?: string;
+  origin_wallet_id?: string;
+  taken_at?: Date;
+}
+
+export interface TransactionFormInitialTransfer {
+  amount?: number;
+  description?: string;
+  destination_amount?: number;
+  destination_wallet_id?: string;
+  origin_wallet_id?: string;
+  taken_at?: Date;
+}
+
 export interface TransactionFormProps {
   wsId: string;
   data?: Partial<Transaction>;
@@ -33,6 +53,9 @@ export interface TransactionFormProps {
   canUpdateConfidentialTransactions?: boolean;
   canChangeFinanceWallets?: boolean;
   canSetFinanceWalletsOnCreate?: boolean;
+  initialMode?: TransactionFormInitialMode;
+  initialTransaction?: TransactionFormInitialTransaction;
+  initialTransfer?: TransactionFormInitialTransfer;
   permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 

package/src/components/ui/finance/transactions/form.tsx

@@ -73,6 +73,9 @@ export function TransactionForm({
   canUpdateConfidentialTransactions,
   canChangeFinanceWallets = true,
   canSetFinanceWalletsOnCreate = true,
+  initialMode = 'transaction',
+  initialTransaction,
+  initialTransfer,
   permissionRequestUser,
 }: TransactionFormProps) {
   const t = useTranslations();
@@ -83,7 +86,8 @@ export function TransactionForm({
   const [attachments, setAttachments] = useState<TransactionAttachmentDraft[]>(
     []
   );
-  const [isTransfer, setIsTransfer] = useState(!!data?.transfer);
+  const initialIsTransfer = initialMode === 'transfer' || !!data?.transfer;
+  const [isTransfer, setIsTransfer] = useState(initialIsTransfer);
   // Start in override mode when editing an existing transfer (preserve stored amounts).
   // Start in auto mode for new transfers so the exchange rate pre-fills destination.
   const [isDestinationOverridden, setIsDestinationOverridden] = useState(
@@ -144,18 +148,39 @@ export function TransactionForm({
     resolver: zodResolver(TransactionFormSchema),
     defaultValues: {
       id: data?.id,
-      description: data?.description || '',
-      amount: data?.amount ? Math.abs(data.amount) : undefined,
-      origin_wallet_id: data?.wallet_id || '',
-      destination_wallet_id: data?.transfer?.linked_wallet_id || '',
+      description:
+        data?.description ||
+        (initialIsTransfer
+          ? initialTransfer?.description
+          : initialTransaction?.description) ||
+        '',
+      amount: data?.amount
+        ? Math.abs(data.amount)
+        : initialIsTransfer
+          ? initialTransfer?.amount
+          : initialTransaction?.amount,
+      origin_wallet_id:
+        data?.wallet_id ||
+        (initialIsTransfer
+          ? initialTransfer?.origin_wallet_id
+          : initialTransaction?.origin_wallet_id) ||
+        '',
+      destination_wallet_id:
+        data?.transfer?.linked_wallet_id ||
+        initialTransfer?.destination_wallet_id ||
+        '',
       destination_amount: data?.transfer?.linked_amount
         ? Math.abs(data.transfer.linked_amount)
-        : undefined,
-      category_id: data?.category_id || '',
-      taken_at: data?.taken_at ? new Date(data.taken_at) : new Date(),
+        : initialTransfer?.destination_amount,
+      category_id: data?.category_id || initialTransaction?.category_id || '',
+      taken_at: data?.taken_at
+        ? new Date(data.taken_at)
+        : initialIsTransfer
+          ? (initialTransfer?.taken_at ?? new Date())
+          : (initialTransaction?.taken_at ?? new Date()),
       report_opt_in: data?.report_opt_in ?? true,
       tag_ids: [] as string[],
-      is_transfer: !!data?.transfer,
+      is_transfer: initialIsTransfer,
       is_amount_confidential:
         (data as Record<string, unknown>)?.is_amount_confidential === true,
       is_description_confidential:
@@ -189,7 +214,12 @@ export function TransactionForm({
     const isUserEdited =
       originWalletState.isDirty || originWalletState.isTouched;
     const currentWalletId = form.getValues('origin_wallet_id');
-    const contextualWalletId = data?.wallet_id || '';
+    const contextualWalletId =
+      data?.wallet_id ||
+      (initialIsTransfer
+        ? initialTransfer?.origin_wallet_id
+        : initialTransaction?.origin_wallet_id) ||
+      '';
 
     if (data?.id || isUserEdited) return;
     if (!wallets || wallets.length === 0) return;
@@ -241,6 +271,9 @@ export function TransactionForm({
     data?.wallet_id,
     defaultWalletId,
     form,
+    initialIsTransfer,
+    initialTransaction?.origin_wallet_id,
+    initialTransfer?.origin_wallet_id,
     isLastSelectionsInitialized,
     isLoadingRememberLastSelections,
     lastSelections.walletId,
@@ -253,7 +286,22 @@ export function TransactionForm({
     const categoryState = form.getFieldState('category_id');
     const isUserEdited = categoryState.isDirty || categoryState.isTouched;
     const currentCategoryId = form.getValues('category_id');
-    const contextualCategoryId = data?.category_id || '';
+    const contextualCategoryId =
+      data?.category_id || initialTransaction?.category_id || '';
+    const categoryKind = initialTransaction?.categoryKind;
+    const matchesCategoryKind = (category: { is_expense?: boolean | null }) => {
+      if (!categoryKind) return true;
+      return categoryKind === 'income'
+        ? category.is_expense === false
+        : category.is_expense !== false;
+    };
+    const hasSelectableCategory = (categoryId?: string | null) =>
+      !!categoryId &&
+      (categories ?? []).some(
+        (category) =>
+          category.id === categoryId &&
+          (!categoryKind || matchesCategoryKind(category))
+      );
 
     if (data?.id || isUserEdited) return;
     if (!categories || categories.length === 0) return;
@@ -263,24 +311,33 @@ export function TransactionForm({
     const rememberedCategoryId =
       rememberLastSelections &&
       lastSelections.categoryId &&
-      categories.some((category) => category.id === lastSelections.categoryId)
+      hasSelectableCategory(lastSelections.categoryId)
         ? lastSelections.categoryId
         : '';
+    const contextualCategorySelection = hasSelectableCategory(
+      contextualCategoryId
+    )
+      ? contextualCategoryId
+      : '';
+    const defaultCategorySelection = hasSelectableCategory(defaultCategoryId)
+      ? defaultCategoryId
+      : '';
+    const intentCategorySelection =
+      categoryKind && categories.find(matchesCategoryKind)?.id
+        ? categories.find(matchesCategoryKind)?.id
+        : '';
     const nextCategorySelection =
       rememberedCategoryId ||
-      (contextualCategoryId &&
-      categories.some((category) => category.id === contextualCategoryId)
-        ? contextualCategoryId
-        : '') ||
-      (defaultCategoryId &&
-      categories.some((category) => category.id === defaultCategoryId)
-        ? defaultCategoryId
-        : '');
+      contextualCategorySelection ||
+      defaultCategorySelection ||
+      intentCategorySelection;
     const sourceLabel = rememberedCategoryId
       ? t('transaction-data-table.prefill_source_last_used')
-      : contextualCategoryId && nextCategorySelection === contextualCategoryId
+      : contextualCategorySelection &&
+          nextCategorySelection === contextualCategorySelection
         ? t('transaction-data-table.prefill_source_current_context')
-        : defaultCategoryId && nextCategorySelection === defaultCategoryId
+        : defaultCategorySelection &&
+            nextCategorySelection === defaultCategorySelection
           ? t('transaction-data-table.prefill_source_workspace_default')
           : '';
 
@@ -304,6 +361,8 @@ export function TransactionForm({
     data?.id,
     defaultCategoryId,
     form,
+    initialTransaction?.categoryKind,
+    initialTransaction?.category_id,
     isLastSelectionsInitialized,
     isLoadingRememberLastSelections,
     lastSelections.categoryId,

package/src/components/ui/finance/transactions/infinite-transactions-list.tsx

@@ -73,6 +73,7 @@ import {
 import { PeriodBreakdownPanel } from './period-charts';
 import { TransactionCard } from './transaction-card';
 import { TransactionStatistics } from './transaction-statistics';
+import { mergeLinkedTransferTransactions } from './transfer-merge';
 
 interface InfiniteTransactionsListProps {
   wsId: string;
@@ -446,6 +447,10 @@ export function InfiniteTransactionsList({
   const allTransactions = usePeriods
     ? []
     : dailyData?.pages.flatMap((page) => page.data) || [];
+  const visibleTransactions = useMemo(
+    () => mergeLinkedTransferTransactions(allTransactions),
+    [allTransactions]
+  );
 
   // All periods for period-based views
   const allPeriods: TransactionPeriod[] = usePeriods
@@ -485,26 +490,32 @@ export function InfiniteTransactionsList({
   const groupedTransactions = useMemo(() => {
     // For period-based views, convert periods to grouped transactions format
     if (usePeriods) {
-      return allPeriods.map((period) => ({
-        date: period.periodStart,
-        label: generatePeriodLabel(period.periodStart, viewMode),
-        transactions: period.transactions || [],
-        // Store period stats for display
-        periodStats: {
-          totalIncome: period.totalIncome,
-          totalExpense: period.totalExpense,
-          netTotal: period.netTotal,
-          transactionCount: period.transactionCount,
-          hasRedactedAmounts: period.hasRedactedAmounts,
-        },
-      }));
+      return allPeriods.map((period) => {
+        const transactions = mergeLinkedTransferTransactions(
+          period.transactions || []
+        );
+
+        return {
+          date: period.periodStart,
+          label: generatePeriodLabel(period.periodStart, viewMode),
+          transactions,
+          // Store period stats for display
+          periodStats: {
+            totalIncome: period.totalIncome,
+            totalExpense: period.totalExpense,
+            netTotal: period.netTotal,
+            transactionCount: transactions.length,
+            hasRedactedAmounts: period.hasRedactedAmounts,
+          },
+        };
+      });
     }
 
     // For daily view, group transactions by date in the user's timezone
     const groups: GroupedTransactions[] = [];
     const now = dayjs().tz(resolvedTimezone);
 
-    allTransactions.forEach((transaction) => {
+    visibleTransactions.forEach((transaction) => {
       // Parse transaction date in the user's timezone
       const transactionDate = dayjs(transaction.taken_at).tz(resolvedTimezone);
       const dateKey = transactionDate.format('YYYY-MM-DD');
@@ -543,7 +554,7 @@ export function InfiniteTransactionsList({
 
     return groups;
   }, [
-    allTransactions,
+    visibleTransactions,
     allPeriods,
     usePeriods,
     viewMode,
@@ -604,7 +615,7 @@ export function InfiniteTransactionsList({
   // Check if there's no data (either no transactions for daily or no periods for other views)
   const hasNoData = usePeriods
     ? allPeriods.length === 0
-    : allTransactions.length === 0;
+    : visibleTransactions.length === 0;
 
   if (hasNoData) {
     return (
@@ -627,7 +638,7 @@ export function InfiniteTransactionsList({
       {/* Statistics Summary - Only show when filters are active (daily view only uses transactions for stats) */}
       {hasActiveFilter && (stats || isStatsLoading) && !usePeriods && (
         <TransactionStatistics
-          transactions={allTransactions}
+          transactions={visibleTransactions}
           stats={stats}
           isLoading={isStatsLoading}
           currency={currency}
@@ -1023,7 +1034,7 @@ export function InfiniteTransactionsList({
         {!hasNextPage &&
           (usePeriods
             ? allPeriods.length > 5
-            : allTransactions.length > 10) && (
+            : visibleTransactions.length > 10) && (
             <div className="rounded-xl border border-dashed bg-muted/20 p-6 text-center">
               <p className="text-muted-foreground text-sm">
                 {t('user-data-table.common.end_of_list')}