@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/wallets/columns.tsx

@@ -2,10 +2,13 @@
 
 import type { ColumnDef } from '@tanstack/react-table';
 import {
+  BookOpen,
   Check,
   CreditCard,
+  Scale,
   TrendingDown,
   TrendingUp,
+  TriangleAlert,
   Wallet as WalletIcon,
   X,
 } from '@tuturuuu/icons';
@@ -19,13 +22,22 @@ import { convertCurrency } from '@tuturuuu/utils/exchange-rates';
 import { cn, formatCurrency } from '@tuturuuu/utils/format';
 import moment from 'moment';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import type { FocusEvent, ReactNode } from 'react';
+import { useState } from 'react';
+import type { FinanceBalanceMode } from '../shared/use-finance-balance-mode';
 import {
   FINANCE_HIDDEN_AMOUNT,
   useFinanceConfidentialVisibility,
 } from '../shared/use-finance-confidential-visibility';
+import {
+  getWalletBalanceTone,
+  resolveWalletBalanceForMode,
+} from '../shared/wallet-balance-mode';
 import { WalletIconDisplay } from './wallet-icon-display';
 
 interface WalletExtraData {
+  balanceMode?: FinanceBalanceMode;
   canUpdateWallets?: boolean;
   canDeleteWallets?: boolean;
   currency?: string;
@@ -33,33 +45,138 @@ interface WalletExtraData {
   isPersonalWorkspace?: boolean;
 }
 
+type AmountBadgeTone = ReturnType<typeof getWalletBalanceTone> | 'varied';
+
+function getAmountBadgeClassName(tone: AmountBadgeTone) {
+  if (tone === 'varied') {
+    return 'border-dynamic-orange/40 bg-dynamic-orange/10 font-semibold text-dynamic-orange';
+  }
+
+  if (tone === 'positive') {
+    return 'border-dynamic-green/30 bg-dynamic-green/10 font-semibold text-dynamic-green';
+  }
+
+  if (tone === 'negative') {
+    return 'border-dynamic-red/30 bg-dynamic-red/10 font-semibold text-dynamic-red';
+  }
+
+  return 'font-semibold text-muted-foreground';
+}
+
+function getContextAmountBadgeClassName(tone: 'ledger' | 'variance') {
+  if (tone === 'ledger') {
+    return 'border-dynamic-blue/30 bg-dynamic-blue/10 font-semibold text-dynamic-blue';
+  }
+
+  return 'border-dynamic-purple/30 bg-dynamic-purple/10 font-semibold text-dynamic-purple';
+}
+
+function AmountBadge({
+  children,
+  icon,
+  label,
+  tone,
+}: {
+  children: ReactNode;
+  icon?: ReactNode;
+  label?: string;
+  tone: AmountBadgeTone;
+}) {
+  return (
+    <Badge
+      variant="outline"
+      data-wallet-balance-badge={tone}
+      className={cn(
+        'flex w-fit items-center gap-1 whitespace-nowrap',
+        getAmountBadgeClassName(tone)
+      )}
+    >
+      {icon}
+      {label && <span className="font-medium opacity-75">{label}</span>}
+      <span>{children}</span>
+    </Badge>
+  );
+}
+
+function ContextAmountBadge({
+  children,
+  icon,
+  label,
+  tone,
+}: {
+  children: ReactNode;
+  icon?: ReactNode;
+  label: string;
+  tone: 'ledger' | 'variance';
+}) {
+  return (
+    <Badge
+      variant="outline"
+      data-wallet-balance-context-badge={tone}
+      className={cn(
+        'flex w-fit items-center gap-1 whitespace-nowrap',
+        getContextAmountBadgeClassName(tone)
+      )}
+    >
+      {icon}
+      <span className="font-medium opacity-75">{label}</span>
+      <span>{children}</span>
+    </Badge>
+  );
+}
+
 function WalletBalanceCell({
-  balance,
+  balanceMode,
+  wallet,
   walletCurrency,
   workspaceCurrency,
   exchangeRates,
 }: {
-  balance: number;
+  balanceMode: FinanceBalanceMode;
+  wallet: Wallet;
   walletCurrency: string;
   workspaceCurrency: string;
   exchangeRates?: ExchangeRate[];
 }) {
+  const t = useTranslations('wallet-checkpoints');
+  const [isAuditContextOpen, setIsAuditContextOpen] = useState(false);
   const { isConfidential: areNumbersHidden } =
     useFinanceConfidentialVisibility();
+  const {
+    auditStatus,
+    auditVariance,
+    contextBalance,
+    displayBalance,
+    hasAuditedBalance,
+    isAuditedMode,
+  } = resolveWalletBalanceForMode(wallet, balanceMode);
+  const contextLabel = isAuditedMode ? t('ledger') : t('audited');
+  const showAuditContext =
+    hasAuditedBalance &&
+    auditStatus &&
+    auditStatus !== 'clean' &&
+    auditStatus !== 'no_checkpoint' &&
+    auditVariance !== null &&
+    auditVariance !== 0;
 
-  const formattedBalance = formatCurrency(balance, walletCurrency, undefined, {
-    signDisplay: 'auto',
-  });
+  const formattedBalance = formatCurrency(
+    displayBalance,
+    walletCurrency,
+    undefined,
+    {
+      signDisplay: 'auto',
+    }
+  );
 
   let convertedText: string | null = null;
   if (
     walletCurrency !== workspaceCurrency &&
     exchangeRates &&
     exchangeRates.length > 0 &&
-    balance !== 0
+    displayBalance !== 0
   ) {
     const converted = convertCurrency(
-      balance,
+      displayBalance,
       walletCurrency,
       workspaceCurrency,
       exchangeRates
@@ -82,51 +199,84 @@ function WalletBalanceCell({
     );
   }
 
-  const isPositive = balance > 0;
-  const isNegative = balance < 0;
-  const isNeutral = balance === 0;
+  const balanceTone = showAuditContext
+    ? 'varied'
+    : getWalletBalanceTone(displayBalance);
+
+  function handleAuditContextBlur(event: FocusEvent<HTMLDivElement>) {
+    const nextTarget = event.relatedTarget as Node | null;
+    if (!nextTarget || !event.currentTarget.contains(nextTarget)) {
+      setIsAuditContextOpen(false);
+    }
+  }
 
   return (
     <div className="flex flex-col gap-0.5">
-      <div className="flex items-center gap-2">
-        {isPositive && (
-          <Badge
-            variant="outline"
-            className={cn(
-              'border-dynamic-green/30 bg-dynamic-green/10 font-semibold text-dynamic-green',
-              'flex items-center gap-1'
-            )}
+      <div className="flex flex-wrap items-center gap-1.5">
+        <div
+          data-wallet-balance-trigger
+          className="relative w-fit rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          onBlur={handleAuditContextBlur}
+          onFocus={() => setIsAuditContextOpen(true)}
+          onMouseEnter={() => setIsAuditContextOpen(true)}
+          onMouseLeave={() => setIsAuditContextOpen(false)}
+          tabIndex={showAuditContext ? 0 : undefined}
+        >
+          <AmountBadge
+            tone={balanceTone}
+            icon={
+              balanceTone === 'positive' ? (
+                <TrendingUp className="h-3 w-3" />
+              ) : balanceTone === 'negative' ? (
+                <TrendingDown className="h-3 w-3" />
+              ) : balanceTone === 'varied' ? (
+                <TriangleAlert className="h-3 w-3" />
+              ) : undefined
+            }
           >
-            <TrendingUp className="h-3 w-3" />
             {formattedBalance}
-          </Badge>
-        )}
-        {isNegative && (
-          <Badge
-            variant="outline"
-            className={cn(
-              'border-dynamic-red/30 bg-dynamic-red/10 font-semibold text-dynamic-red',
-              'flex items-center gap-1'
+          </AmountBadge>
+          {showAuditContext &&
+            isAuditContextOpen &&
+            typeof contextBalance === 'number' && (
+              <div className="absolute top-full left-0 z-20 mt-1 flex min-w-max flex-wrap items-center gap-1.5 rounded-md border bg-popover p-1.5 shadow-md">
+                <ContextAmountBadge
+                  tone="ledger"
+                  icon={<BookOpen className="h-3 w-3" />}
+                  label={contextLabel}
+                >
+                  {formatCurrency(contextBalance, walletCurrency, undefined, {
+                    signDisplay: 'auto',
+                  })}
+                </ContextAmountBadge>
+                <ContextAmountBadge
+                  tone="variance"
+                  icon={<Scale className="h-3 w-3" />}
+                  label={t('variance')}
+                >
+                  {formatCurrency(
+                    auditVariance ?? 0,
+                    walletCurrency,
+                    undefined,
+                    {
+                      signDisplay: 'always',
+                    }
+                  )}
+                </ContextAmountBadge>
+              </div>
             )}
-          >
-            <TrendingDown className="h-3 w-3" />
-            {formattedBalance}
-          </Badge>
-        )}
-        {isNeutral && (
-          <Badge
-            variant="outline"
-            className="font-semibold text-muted-foreground"
-          >
-            {formattedBalance}
-          </Badge>
-        )}
+        </div>
       </div>
       {convertedText && (
         <span className="text-muted-foreground text-xs">
           {'\u2248'} {convertedText}
         </span>
       )}
+      {isAuditedMode && auditStatus === 'no_checkpoint' && (
+        <span className="text-muted-foreground text-xs">
+          {t('no_checkpoint_short')}
+        </span>
+      )}
     </div>
   );
 }
@@ -139,6 +289,7 @@ export const walletColumns = ({
   extraData?: WalletExtraData;
 }): ColumnDef<Wallet>[] => {
   const workspaceCurrency = extraData?.currency || 'USD';
+  const balanceMode = extraData?.balanceMode ?? 'ledger';
 
   return [
     // {
@@ -213,7 +364,9 @@ export const walletColumns = ({
       cell: ({ row }) => <div>{row.getValue('description') || '-'}</div>,
     },
     {
-      accessorKey: 'balance',
+      id: 'balance',
+      accessorFn: (wallet) =>
+        resolveWalletBalanceForMode(wallet, balanceMode).displayBalance,
       header: ({ column }) => (
         <DataTableColumnHeader
           t={t}
@@ -222,11 +375,11 @@ export const walletColumns = ({
         />
       ),
       cell: ({ row }) => {
-        const balance = Number(row.getValue('balance')) || 0;
         const walletCurrency = row.original.currency || workspaceCurrency;
         return (
           <WalletBalanceCell
-            balance={balance}
+            balanceMode={balanceMode}
+            wallet={row.original}
             walletCurrency={walletCurrency}
             workspaceCurrency={workspaceCurrency}
             exchangeRates={extraData?.exchangeRates}

package/src/components/ui/finance/wallets/form.test.tsx

@@ -1,6 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ComponentProps } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { WalletFormValues } from './form';
 import { WalletForm } from './form';
 
 vi.mock('@tuturuuu/ui/hooks/use-workspace-currency', () => ({
@@ -23,27 +25,47 @@ vi.mock('./wallet-icon-image-picker', () => ({
   WalletIconImagePicker: () => null,
 }));
 
-function renderWalletForm() {
+function renderWalletForm(
+  options: {
+    data?: ComponentProps<typeof WalletForm>['data'];
+    defaultType?: WalletFormValues['type'];
+  } = {}
+) {
+  const data =
+    'data' in options
+      ? options.data
+      : ({
+          balance: 1234,
+          currency: 'USD',
+          id: 'wallet-1',
+          name: 'Primary',
+          type: 'STANDARD',
+        } as never);
+  const { defaultType } = options;
+
   const queryClient = new QueryClient();
 
   return render(
     <QueryClientProvider client={queryClient}>
-      <WalletForm
-        wsId="ws-1"
-        data={
-          {
-            balance: 1234,
-            currency: 'USD',
-            id: 'wallet-1',
-            name: 'Primary',
-            type: 'STANDARD',
-          } as never
-        }
-      />
+      <WalletForm wsId="ws-1" data={data} defaultType={defaultType} />
     </QueryClientProvider>
   );
 }
 
+function typeIntoCurrencyInput(input: HTMLInputElement, value: string) {
+  fireEvent.focus(input);
+
+  for (const character of value) {
+    const nextValue = `${input.value}${character}`;
+    fireEvent.change(input, {
+      target: {
+        selectionStart: nextValue.length,
+        value: nextValue,
+      },
+    });
+  }
+}
+
 describe('WalletForm', () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -75,4 +97,47 @@ describe('WalletForm', () => {
       ).toHaveValue('1,234')
     );
   });
+
+  it('opens credit-card create flows with credit defaults', () => {
+    renderWalletForm({
+      data: undefined,
+      defaultType: 'CREDIT',
+    });
+
+    expect(
+      screen.getByText('wallet-data-table.wallet_type_credit_description')
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText('wallet-data-table.credit_limit')).toHaveValue(
+      ''
+    );
+    expect(
+      screen.getByLabelText('wallet-data-table.statement_date')
+    ).toHaveValue(1);
+    expect(screen.getByLabelText('wallet-data-table.payment_date')).toHaveValue(
+      15
+    );
+  });
+
+  it('keeps accepting large credit limits after locale grouping is inserted', () => {
+    renderWalletForm({
+      data: {
+        balance: 0,
+        currency: 'VND',
+        id: 'wallet-1',
+        limit: undefined,
+        name: 'Credit Wallet',
+        payment_date: 25,
+        statement_date: 10,
+        type: 'CREDIT',
+      } as never,
+    });
+
+    const creditLimitInput = screen.getByLabelText(
+      'wallet-data-table.credit_limit'
+    ) as HTMLInputElement;
+
+    typeIntoCurrencyInput(creditLimitInput, '39999');
+
+    expect(creditLimitInput).toHaveValue('39.999');
+  });
 });