@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/transactions/transaction-card.tsx

@@ -83,35 +83,8 @@ export function TransactionCard({
   const [isHovered, setIsHovered] = useState(false);
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
-  const effectiveCurrency = transaction.wallet_currency || currency;
-  const isExpense = (transaction.amount || 0) < 0;
   const isTransfer = !!transaction.transfer;
 
-  // Currency conversion for foreign-currency transactions
-  const isForeignCurrency =
-    effectiveCurrency.toUpperCase() !== currency.toUpperCase();
-  const { data: exchangeRateData } = useExchangeRates();
-  const convertedAmount = useMemo(() => {
-    if (
-      !isForeignCurrency ||
-      transaction.amount == null ||
-      !exchangeRateData?.data
-    )
-      return null;
-    return convertCurrency(
-      transaction.amount,
-      effectiveCurrency,
-      currency,
-      exchangeRateData.data
-    );
-  }, [
-    isForeignCurrency,
-    transaction.amount,
-    effectiveCurrency,
-    currency,
-    exchangeRateData?.data,
-  ]);
-
   // Check if transaction is confidential
   const isConfidential =
     transaction.is_amount_confidential ||
@@ -154,6 +127,65 @@ export function TransactionCard({
     return wallets.find((w) => w.id === transaction.transfer?.linked_wallet_id);
   }, [transaction.transfer?.linked_wallet_id, wallets]);
 
+  const transferDisplay = transaction.transfer
+    ? transaction.transfer.is_origin
+      ? {
+          amount: transaction.amount,
+          amountCurrency: transaction.wallet_currency,
+          destinationIcon: linkedWallet?.icon,
+          destinationImageSrc: linkedWallet?.image_src,
+          destinationWalletId: transaction.transfer.linked_wallet_id,
+          destinationWalletName: transaction.transfer.linked_wallet_name,
+          originIcon: wallet?.icon,
+          originImageSrc: wallet?.image_src,
+          originWalletId: transaction.wallet_id,
+          originWalletName: transaction.wallet,
+          secondaryAmount: transaction.transfer.linked_amount,
+          secondaryCurrency: transaction.transfer.linked_wallet_currency,
+        }
+      : {
+          amount: transaction.transfer.linked_amount ?? transaction.amount,
+          amountCurrency:
+            transaction.transfer.linked_wallet_currency ||
+            transaction.wallet_currency,
+          destinationIcon: wallet?.icon,
+          destinationImageSrc: wallet?.image_src,
+          destinationWalletId: transaction.wallet_id,
+          destinationWalletName: transaction.wallet,
+          originIcon: linkedWallet?.icon,
+          originImageSrc: linkedWallet?.image_src,
+          originWalletId: transaction.transfer.linked_wallet_id,
+          originWalletName: transaction.transfer.linked_wallet_name,
+          secondaryAmount: transaction.amount,
+          secondaryCurrency: transaction.wallet_currency,
+        }
+    : null;
+  const displayAmount = transferDisplay?.amount ?? transaction.amount;
+  const effectiveCurrency =
+    transferDisplay?.amountCurrency || transaction.wallet_currency || currency;
+  const isExpense = (displayAmount || 0) < 0;
+
+  // Currency conversion for foreign-currency transactions
+  const isForeignCurrency =
+    effectiveCurrency.toUpperCase() !== currency.toUpperCase();
+  const { data: exchangeRateData } = useExchangeRates();
+  const convertedAmount = useMemo(() => {
+    if (!isForeignCurrency || displayAmount == null || !exchangeRateData?.data)
+      return null;
+    return convertCurrency(
+      displayAmount,
+      effectiveCurrency,
+      currency,
+      exchangeRateData.data
+    );
+  }, [
+    isForeignCurrency,
+    displayAmount,
+    effectiveCurrency,
+    currency,
+    exchangeRateData?.data,
+  ]);
+
   // Determine if we should use custom styling
   const hasCustomStyling = Boolean(customColorStyles);
 
@@ -331,37 +363,37 @@ export function TransactionCard({
                   {transaction.category}
                 </Badge>
               ) : null}
-              {transaction.wallet && (
+              {(transaction.wallet || transferDisplay) && (
                 <div className="flex items-center gap-1">
-                  {isTransfer && transaction.transfer ? (
+                  {isTransfer && transferDisplay ? (
                     <div className="flex items-center rounded-full border border-dynamic-blue/20 bg-dynamic-blue/5 py-0.5 pr-1 pl-1">
                       <Link
-                        href={`/${wsId}${financeHref(`/wallets/${transaction.wallet_id}`)}`}
+                        href={`/${wsId}${financeHref(`/wallets/${transferDisplay.originWalletId}`)}`}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <span className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-dynamic-blue/10 hover:text-foreground sm:text-xs">
                           <WalletIconDisplay
-                            icon={wallet?.icon}
-                            imageSrc={wallet?.image_src}
+                            icon={transferDisplay.originIcon}
+                            imageSrc={transferDisplay.originImageSrc}
                             size="sm"
                             className="h-3 w-3"
                           />
-                          {transaction.wallet}
+                          {transferDisplay.originWalletName}
                         </span>
                       </Link>
                       <ArrowRight className="mx-0.5 h-3 w-3 shrink-0 text-dynamic-blue" />
                       <Link
-                        href={`/${wsId}${financeHref(`/wallets/${transaction.transfer.linked_wallet_id}`)}`}
+                        href={`/${wsId}${financeHref(`/wallets/${transferDisplay.destinationWalletId}`)}`}
                         onClick={(e) => e.stopPropagation()}
                       >
                         <span className="flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium text-[11px] text-dynamic-blue transition-colors hover:bg-dynamic-blue/10 sm:text-xs">
                           <WalletIconDisplay
-                            icon={linkedWallet?.icon}
-                            imageSrc={linkedWallet?.image_src}
+                            icon={transferDisplay.destinationIcon}
+                            imageSrc={transferDisplay.destinationImageSrc}
                             size="sm"
                             className="h-3 w-3"
                           />
-                          {transaction.transfer.linked_wallet_name}
+                          {transferDisplay.destinationWalletName}
                         </span>
                       </Link>
                     </div>
@@ -401,7 +433,7 @@ export function TransactionCard({
             <div className="flex shrink-0 items-center gap-1 sm:gap-2">
               <div className="flex flex-col items-end">
                 <ConfidentialAmount
-                  amount={transaction.amount ?? null}
+                  amount={displayAmount ?? null}
                   isConfidential={transaction.is_amount_confidential || false}
                   currency={effectiveCurrency}
                   className={cn(
@@ -426,16 +458,16 @@ export function TransactionCard({
                   }
                 />
                 {isTransfer &&
-                  transaction.transfer?.linked_amount != null &&
-                  transaction.transfer?.linked_wallet_currency &&
-                  transaction.transfer.linked_wallet_currency.toUpperCase() !==
+                  transferDisplay?.secondaryAmount != null &&
+                  transferDisplay.secondaryCurrency &&
+                  transferDisplay.secondaryCurrency.toUpperCase() !==
                     effectiveCurrency.toUpperCase() && (
                     <span className="text-[10px] text-dynamic-blue tabular-nums sm:text-xs">
                       {areNumbersHidden
                         ? FINANCE_HIDDEN_AMOUNT
                         : formatCurrency(
-                            Math.abs(transaction.transfer.linked_amount),
-                            transaction.transfer.linked_wallet_currency,
+                            Math.abs(transferDisplay.secondaryAmount),
+                            transferDisplay.secondaryCurrency,
                             undefined,
                             { signDisplay: 'always' }
                           )}

package/src/components/ui/finance/transactions/transfer-merge.test.ts

@@ -0,0 +1,90 @@
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+import { describe, expect, it } from 'vitest';
+import { mergeLinkedTransferTransactions } from './transfer-merge';
+
+function transaction(
+  id: string,
+  amount: number,
+  transfer?: Transaction['transfer']
+): Transaction {
+  return {
+    amount,
+    id,
+    taken_at: '2026-06-11T00:00:00.000Z',
+    wallet_id: `wallet-${id}`,
+    wallet: `Wallet ${id}`,
+    transfer,
+  };
+}
+
+const originTransfer = {
+  is_origin: true,
+  linked_amount: 100,
+  linked_transaction_id: 'destination',
+  linked_wallet_id: 'wallet-destination',
+  linked_wallet_name: 'Destination Wallet',
+} satisfies Transaction['transfer'];
+
+const destinationTransfer = {
+  is_origin: false,
+  linked_amount: -100,
+  linked_transaction_id: 'origin',
+  linked_wallet_id: 'wallet-origin',
+  linked_wallet_name: 'Origin Wallet',
+} satisfies Transaction['transfer'];
+
+describe('mergeLinkedTransferTransactions', () => {
+  it('collapses a linked origin and destination pair into one transfer row', () => {
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([origin, destination])).toEqual([
+      origin,
+    ]);
+  });
+
+  it('keeps the origin transfer when the destination leg appears first', () => {
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([destination, origin])).toEqual([
+      origin,
+    ]);
+  });
+
+  it('keeps an unmatched transfer leg visible', () => {
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(mergeLinkedTransferTransactions([destination])).toEqual([
+      destination,
+    ]);
+  });
+
+  it('does not merge unrelated rows with matching amounts', () => {
+    const expense = transaction('expense', -100);
+    const income = transaction('income', 100);
+
+    expect(mergeLinkedTransferTransactions([expense, income])).toEqual([
+      expense,
+      income,
+    ]);
+  });
+
+  it('keeps unrelated row order while using the first pair slot', () => {
+    const first = transaction('first', 1);
+    const second = transaction('second', 2);
+    const third = transaction('third', 3);
+    const origin = transaction('origin', -100, originTransfer);
+    const destination = transaction('destination', 100, destinationTransfer);
+
+    expect(
+      mergeLinkedTransferTransactions([
+        first,
+        destination,
+        second,
+        origin,
+        third,
+      ])
+    ).toEqual([first, origin, second, third]);
+  });
+});

package/src/components/ui/finance/transactions/transfer-merge.ts

@@ -0,0 +1,52 @@
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+
+function getTransferPairKey(transaction: Transaction) {
+  const transactionId = transaction.id;
+  const linkedTransactionId = transaction.transfer?.linked_transaction_id;
+
+  if (!transactionId || !linkedTransactionId) return null;
+
+  return [transactionId, linkedTransactionId].sort().join(':');
+}
+
+function preferOriginTransfer(
+  current: Transaction,
+  candidate: Transaction
+): Transaction {
+  if (candidate.transfer?.is_origin && !current.transfer?.is_origin) {
+    return candidate;
+  }
+
+  return current;
+}
+
+export function mergeLinkedTransferTransactions(
+  transactions: Transaction[]
+): Transaction[] {
+  const mergedTransactions: Transaction[] = [];
+  const pairSlotByKey = new Map<string, number>();
+
+  for (const transaction of transactions) {
+    const pairKey = getTransferPairKey(transaction);
+
+    if (!pairKey) {
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    const existingSlot = pairSlotByKey.get(pairKey);
+
+    if (existingSlot === undefined) {
+      pairSlotByKey.set(pairKey, mergedTransactions.length);
+      mergedTransactions.push(transaction);
+      continue;
+    }
+
+    mergedTransactions[existingSlot] = preferOriginTransfer(
+      mergedTransactions[existingSlot]!,
+      transaction
+    );
+  }
+
+  return mergedTransactions;
+}

package/src/components/ui/finance/transactions/wallet-filter.tsx

@@ -20,10 +20,12 @@ import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
+import { useFinanceBalanceMode } from '../shared/use-finance-balance-mode';
 import {
   FINANCE_HIDDEN_AMOUNT,
   useFinanceConfidentialVisibility,
 } from '../shared/use-finance-confidential-visibility';
+import { resolveWalletBalanceForMode } from '../shared/wallet-balance-mode';
 
 interface WalletFilterProps {
   wsId: string;
@@ -45,9 +47,11 @@ export function WalletFilter({
   className,
 }: WalletFilterProps) {
   const t = useTranslations();
+  const checkpointT = useTranslations('wallet-checkpoints');
   const [isOpen, setIsOpen] = useState(false);
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
+  const { isAuditedMode } = useFinanceBalanceMode();
 
   const hasActiveFilters = selectedWalletIds.length > 0;
 
@@ -135,6 +139,14 @@ export function WalletFilter({
                     })
                     .map((wallet) => {
                       const isSelected = selectedWalletIds.includes(wallet.id);
+                      const { displayBalance, usesAuditedBalance } =
+                        resolveWalletBalanceForMode(
+                          wallet,
+                          isAuditedMode ? 'audited' : 'ledger'
+                        );
+                      const balanceLabel = usesAuditedBalance
+                        ? checkpointT('audited')
+                        : checkpointT('ledger');
 
                       return (
                         <CommandItem
@@ -161,7 +173,7 @@ export function WalletFilter({
                               <span className="text-muted-foreground text-xs">
                                 {areNumbersHidden
                                   ? FINANCE_HIDDEN_AMOUNT
-                                  : Intl.NumberFormat(
+                                  : `${balanceLabel}: ${Intl.NumberFormat(
                                       getCurrencyLocale(
                                         wallet.currency || 'USD'
                                       ),
@@ -171,7 +183,14 @@ export function WalletFilter({
                                         minimumFractionDigits: 0,
                                         maximumFractionDigits: 0,
                                       }
-                                    ).format(wallet.balance || 0)}
+                                    ).format(displayBalance)}`}
+                                {!areNumbersHidden &&
+                                  isAuditedMode &&
+                                  wallet.audit_status === 'no_checkpoint' && (
+                                    <span className="ml-1">
+                                      {checkpointT('no_checkpoint_short')}
+                                    </span>
+                                  )}
                               </span>
                             </div>
                           </div>

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

@@ -0,0 +1,219 @@
+'use client';
+
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  createWalletCheckpointReconciliation,
+  listTransactionCategories,
+} from '@tuturuuu/internal-api/finance';
+import { FINANCE_DEFAULT_RECONCILIATION_CATEGORY_CONFIG_ID } from '@tuturuuu/internal-api/workspace-configs';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { useWorkspaceConfig } from '@tuturuuu/ui/hooks/use-workspace-config';
+import { Input } from '@tuturuuu/ui/input';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import { formatCurrency } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+
+const NO_CATEGORY = 'none';
+
+export function WalletCheckpointAdjustmentDialog({
+  checkedAt,
+  checkpointId,
+  currency,
+  onCreated,
+  onOpenChange,
+  open,
+  variance,
+  walletId,
+  walletName,
+  wsId,
+}: {
+  checkedAt: string;
+  checkpointId: string;
+  currency: string;
+  onCreated: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  variance: number;
+  walletId: string;
+  walletName: string;
+  wsId: string;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  const [categoryId, setCategoryId] = useState(NO_CATEGORY);
+  const [description, setDescription] = useState(
+    t('reconciliation_description', {
+      date: new Date(checkedAt).toLocaleDateString(),
+      wallet: walletName,
+    })
+  );
+  const [categoryInitialized, setCategoryInitialized] = useState(false);
+  const categoriesQuery = useQuery({
+    queryKey: ['transaction-categories', wsId],
+    queryFn: () => listTransactionCategories(wsId),
+    enabled: open,
+  });
+  const {
+    data: defaultReconciliationCategoryId,
+    isLoading: isLoadingDefaultReconciliationCategory,
+  } = useWorkspaceConfig<string>(
+    wsId,
+    FINANCE_DEFAULT_RECONCILIATION_CATEGORY_CONFIG_ID,
+    ''
+  );
+
+  useEffect(() => {
+    if (!open) {
+      setCategoryId(NO_CATEGORY);
+      setCategoryInitialized(false);
+      return;
+    }
+
+    if (
+      categoryInitialized ||
+      categoriesQuery.isLoading ||
+      isLoadingDefaultReconciliationCategory
+    ) {
+      return;
+    }
+
+    const defaultCategoryExists = (categoriesQuery.data ?? []).some(
+      (category) => category.id === defaultReconciliationCategoryId
+    );
+
+    setCategoryId(
+      defaultReconciliationCategoryId && defaultCategoryExists
+        ? defaultReconciliationCategoryId
+        : NO_CATEGORY
+    );
+    setCategoryInitialized(true);
+  }, [
+    categoriesQuery.data,
+    categoriesQuery.isLoading,
+    categoryInitialized,
+    defaultReconciliationCategoryId,
+    isLoadingDefaultReconciliationCategory,
+    open,
+  ]);
+  const amountText = useMemo(
+    () =>
+      formatCurrency(variance, currency, undefined, {
+        maximumFractionDigits: currency === 'VND' ? 0 : 6,
+        signDisplay: 'always',
+      }),
+    [currency, variance]
+  );
+  const checkedAtText = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      }).format(new Date(checkedAt)),
+    [checkedAt]
+  );
+  const mutation = useMutation({
+    mutationFn: () =>
+      createWalletCheckpointReconciliation(wsId, walletId, checkpointId, {
+        category_id: categoryId === NO_CATEGORY ? undefined : categoryId,
+        description,
+      }),
+    onSuccess: (result) => {
+      toast.success(
+        result.created ? t('reconciliation_created') : t('reconciliation_clean')
+      );
+      onCreated();
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : t('reconciliation_error')
+      );
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('create_reconciliation_transaction')}</DialogTitle>
+          <DialogDescription>
+            {t('create_reconciliation_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label>{t('offset_amount_preview')}</Label>
+            <Input value={amountText} readOnly />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-reconciliation-date">{t('date')}</Label>
+            <Input
+              id="checkpoint-reconciliation-date"
+              value={checkedAtText}
+              readOnly
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('category')}</Label>
+            <Select value={categoryId} onValueChange={setCategoryId}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={NO_CATEGORY}>{t('no_category')}</SelectItem>
+                {(categoriesQuery.data ?? [])
+                  .filter(
+                    (category): category is typeof category & { id: string } =>
+                      typeof category.id === 'string'
+                  )
+                  .map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      {category.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="checkpoint-adjustment-description">
+              {t('description')}
+            </Label>
+            <Textarea
+              id="checkpoint-adjustment-description"
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            disabled={mutation.isPending || !categoryInitialized}
+            onClick={() => mutation.mutate()}
+          >
+            {mutation.isPending ? t('creating') : t('reconcile')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,32 @@
+'use client';
+
+import { formatCurrency } from '@tuturuuu/utils/format';
+import {
+  FINANCE_HIDDEN_AMOUNT,
+  useFinanceConfidentialVisibility,
+} from '../../shared/use-finance-confidential-visibility';
+
+export function WalletCheckpointAmount({
+  amount,
+  currency,
+  signDisplay = 'auto',
+}: {
+  amount: number;
+  currency: string;
+  signDisplay?: Intl.NumberFormatOptions['signDisplay'];
+}) {
+  const { isConfidential } = useFinanceConfidentialVisibility();
+
+  if (isConfidential) {
+    return <span>{FINANCE_HIDDEN_AMOUNT}</span>;
+  }
+
+  return (
+    <span>
+      {formatCurrency(amount, currency, undefined, {
+        maximumFractionDigits: currency === 'VND' ? 0 : 6,
+        signDisplay,
+      })}
+    </span>
+  );
+}

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { useTranslations } from 'next-intl';
+
+export function WalletCheckpointDeleteDialog({
+  isPending,
+  onConfirm,
+  onOpenChange,
+  open,
+}: {
+  isPending: boolean;
+  onConfirm: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}) {
+  const t = useTranslations('wallet-checkpoints');
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('delete_checkpoint')}</DialogTitle>
+          <DialogDescription>
+            {t('delete_checkpoint_description')}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button
+            variant="destructive"
+            disabled={isPending}
+            onClick={onConfirm}
+          >
+            {isPending ? t('deleting') : t('delete')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}