@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/finance/wallets/walletId/credit-wallet-summary.tsx

@@ -7,6 +7,7 @@ import {
   ChevronUp,
   Clock,
   CreditCard,
+  Gauge,
   TrendingDown,
 } from '@tuturuuu/icons';
 import {
@@ -15,7 +16,13 @@ import {
 } from '@tuturuuu/internal-api/finance';
 import type { Wallet } from '@tuturuuu/types';
 import { Badge } from '@tuturuuu/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@tuturuuu/ui/card';
 import { useCurrencyFormatter } from '@tuturuuu/ui/hooks/use-currency-formatter';
 import { Progress } from '@tuturuuu/ui/progress';
 import { Separator } from '@tuturuuu/ui/separator';
@@ -77,12 +84,13 @@ export function CreditWalletSummary({
       <Card>
         <CardHeader className="pb-2">
           <Skeleton className="h-6 w-48" />
+          <Skeleton className="h-4 w-80 max-w-full" />
         </CardHeader>
         <CardContent className="space-y-4">
-          <Skeleton className="h-8 w-full" />
-          <div className="grid gap-4 md:grid-cols-3">
-            {[...Array(3)].map((_, i) => (
-              <Skeleton key={i} className="h-16" />
+          <Skeleton className="h-28 w-full" />
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {[...Array(4)].map((_, i) => (
+              <Skeleton key={i} className="h-20" />
             ))}
           </div>
         </CardContent>
@@ -90,79 +98,125 @@ export function CreditWalletSummary({
     );
   }
 
-  if (error || !data) return null;
+  if (error || !data) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <CreditCard className="h-5 w-5" />
+            {t('credit_operations')}
+          </CardTitle>
+          <CardDescription>{t('credit_summary_unavailable')}</CardDescription>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  const utilization = Math.max(0, data.utilization);
+  const progressValue = Math.min(utilization, 100);
+  const outstandingDebt = Math.max(data.totalOutstanding, 0);
+  const hasCreditBalance = data.balance > 0 && outstandingDebt === 0;
+  const isOverLimit = data.availableCredit < 0;
 
   return (
     <Card>
       <CardHeader className="pb-2">
         <CardTitle className="flex items-center gap-2 text-lg">
           <CreditCard className="h-5 w-5" />
-          {t('credit_summary')}
+          {t('credit_operations')}
         </CardTitle>
+        <CardDescription>{t('credit_operations_description')}</CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-        {/* Utilization Bar */}
-        <div className="space-y-2">
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">
-              {t('credit_utilization')}
-            </span>
-            <span
-              className={cn(
-                'font-semibold',
-                getUtilizationTextColor(data.utilization)
+        <div className="grid gap-4 lg:grid-cols-[1.1fr_1.6fr]">
+          <div className="space-y-3 rounded-lg border p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-muted-foreground text-sm">
+                  {t('total_outstanding')}
+                </p>
+                <p className="font-semibold text-2xl">
+                  {formatVisibleCurrency(outstandingDebt)}
+                </p>
+              </div>
+              {isOverLimit ? (
+                <Badge variant="destructive">{t('credit_over_limit')}</Badge>
+              ) : hasCreditBalance ? (
+                <Badge variant="secondary">{t('credit_balance_credit')}</Badge>
+              ) : (
+                <Badge variant="secondary">{t('current_cycle')}</Badge>
               )}
-            >
-              {data.utilization}%
-            </span>
-          </div>
-          <Progress
-            value={data.utilization}
-            className="h-3"
-            indicatorClassName={cn(
-              getUtilizationColor(data.utilization),
-              'transition-all duration-500'
-            )}
-          />
-          <p className="text-muted-foreground text-xs">
-            {formatVisibleCurrency(data.totalOutstanding)}{' '}
-            {t('of_limit', { limit: formatVisibleCurrency(data.limit) })}
-          </p>
-        </div>
+            </div>
 
-        {/* Hero Stats */}
-        <div className="grid gap-3 sm:grid-cols-3">
-          <div className="rounded-lg border p-3">
-            <p className="text-muted-foreground text-xs">
-              {t('available_credit')}
-            </p>
-            <p className="font-semibold text-lg">
-              {formatVisibleCurrency(data.availableCredit)}
-            </p>
-          </div>
-          <div className="rounded-lg border p-3">
-            <p className="text-muted-foreground text-xs">
-              {t('total_outstanding')}
-            </p>
-            <p className="font-semibold text-lg">
-              {data.totalOutstanding > 0
-                ? formatVisibleCurrency(data.totalOutstanding)
-                : formatVisibleCurrency(0)}
-            </p>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  {t('credit_utilization')}
+                </span>
+                <span
+                  className={cn(
+                    'font-semibold',
+                    getUtilizationTextColor(utilization)
+                  )}
+                >
+                  {utilization}%
+                </span>
+              </div>
+              <Progress
+                value={progressValue}
+                className="h-3"
+                indicatorClassName={cn(
+                  getUtilizationColor(utilization),
+                  'transition-all duration-500'
+                )}
+              />
+              <p className="text-muted-foreground text-xs">
+                {formatVisibleCurrency(outstandingDebt)}{' '}
+                {t('of_limit', { limit: formatVisibleCurrency(data.limit) })}
+              </p>
+            </div>
           </div>
-          <div className="rounded-lg border p-3">
-            <p className="text-muted-foreground text-xs">
-              {t('current_activity')}
-            </p>
-            <p className="font-semibold text-lg">
-              {data.currentActivity !== 0
-                ? formatVisibleCurrency(data.currentActivity)
-                : t('no_charges')}
-            </p>
+
+          <div className="grid gap-3 sm:grid-cols-2">
+            <SummaryTile
+              icon={<Gauge className="h-4 w-4" />}
+              label={
+                isOverLimit ? t('credit_over_limit') : t('credit_available')
+              }
+              value={formatVisibleCurrency(Math.abs(data.availableCredit))}
+            />
+            <SummaryTile
+              icon={<TrendingDown className="h-4 w-4" />}
+              label={t('current_activity')}
+              value={
+                data.currentActivity !== 0
+                  ? formatVisibleCurrency(data.currentActivity)
+                  : t('no_charges')
+              }
+            />
+            <SummaryTile
+              icon={<Calendar className="h-4 w-4" />}
+              label={t('next_statement')}
+              value={data.nextStatementDate}
+              subvalue={t('days_remaining', {
+                days: data.daysUntilStatement,
+              })}
+            />
+            <SummaryTile
+              icon={<Clock className="h-4 w-4" />}
+              label={t('payment_due_date')}
+              value={data.nextPaymentDate}
+              subvalue={
+                data.daysUntilPayment < 0
+                  ? t('overdue')
+                  : t('days_remaining', {
+                      days: data.daysUntilPayment,
+                    })
+              }
+            />
           </div>
         </div>
 
-        {/* Expand/Collapse Toggle */}
         <button
           type="button"
           onClick={handleToggle}
@@ -181,16 +235,14 @@ export function CreditWalletSummary({
           )}
         </button>
 
-        {/* Expandable Details */}
         {showDetails && (
           <>
             <Separator />
             <div className="space-y-3">
-              {/* Statement Balance */}
               <DetailRow
                 icon={<TrendingDown className="h-4 w-4" />}
                 label={t('statement_balance')}
-                sublabel={`${t('previous_cycle')}: ${data.prevCycleStart} — ${data.prevCycleEnd}`}
+                sublabel={`${t('previous_cycle')}: ${data.prevCycleStart} - ${data.prevCycleEnd}`}
                 value={
                   data.statementBalance !== 0
                     ? formatVisibleCurrency(data.statementBalance)
@@ -200,7 +252,6 @@ export function CreditWalletSummary({
 
               <Separator />
 
-              {/* Next Statement Date */}
               <DetailRow
                 icon={<Calendar className="h-4 w-4" />}
                 label={t('next_statement')}
@@ -214,7 +265,6 @@ export function CreditWalletSummary({
                 }
               />
 
-              {/* Payment Due Date */}
               <DetailRow
                 icon={<Clock className="h-4 w-4" />}
                 label={t('payment_due_date')}
@@ -239,6 +289,31 @@ export function CreditWalletSummary({
   );
 }
 
+function SummaryTile({
+  icon,
+  label,
+  subvalue,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  subvalue?: React.ReactNode;
+  value: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border p-3">
+      <div className="mb-2 flex items-center gap-2 text-muted-foreground">
+        {icon}
+        <p className="text-xs">{label}</p>
+      </div>
+      <p className="font-semibold text-base">{value}</p>
+      {subvalue ? (
+        <p className="mt-1 text-muted-foreground text-xs">{subvalue}</p>
+      ) : null}
+    </div>
+  );
+}
+
 function DetailRow({
   icon,
   label,

package/src/components/ui/finance/wallets/walletId/wallet-details-actions.test.tsx

@@ -0,0 +1,105 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { WalletDetailsActions } from './wallet-details-actions';
+
+const mocks = vi.hoisted(() => ({
+  transactionForm: vi.fn((_props: unknown) => null),
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/ui/custom/modifiable-dialog-trigger', () => ({
+  default: ({ form, open }: { form?: ReactNode; open?: boolean }) =>
+    open ? <div data-testid="dialog">{form}</div> : null,
+}));
+
+vi.mock('@tuturuuu/ui/finance/transactions/form', () => ({
+  TransactionForm: (...args: Parameters<typeof mocks.transactionForm>) =>
+    mocks.transactionForm(...args),
+}));
+
+vi.mock('@tuturuuu/ui/finance/wallets/form', () => ({
+  WalletForm: () => null,
+}));
+
+vi.mock('./wallet-delete-button', () => ({
+  WalletDeleteButton: () => null,
+}));
+
+describe('WalletDetailsActions', () => {
+  const baseProps = {
+    wsId: 'ws-1',
+    walletId: 'wallet-1',
+    wallet: {
+      id: 'wallet-1',
+      name: 'Rewards Card',
+      type: 'CREDIT',
+    } as never,
+    canUpdateWallets: true,
+    canCreateTransactions: true,
+    canCreateConfidentialTransactions: true,
+    canDeleteWallets: false,
+    isPersonalWorkspace: true,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('prefills card payments as transfers into the credit wallet', () => {
+    render(<WalletDetailsActions {...baseProps} />);
+
+    fireEvent.click(screen.getByText('wallet-data-table.credit_payment'));
+
+    expect(mocks.transactionForm).toHaveBeenCalled();
+    const props = mocks.transactionForm.mock.calls.at(-1)?.[0];
+
+    expect(props).toEqual(
+      expect.objectContaining({
+        initialMode: 'transfer',
+        initialTransfer: expect.objectContaining({
+          destination_wallet_id: 'wallet-1',
+        }),
+      })
+    );
+  });
+
+  it('prefills card charges as expense transactions on the credit wallet', () => {
+    render(<WalletDetailsActions {...baseProps} />);
+
+    fireEvent.click(screen.getByText('wallet-data-table.credit_charge'));
+
+    const props = mocks.transactionForm.mock.calls.at(-1)?.[0];
+
+    expect(props).toEqual(
+      expect.objectContaining({
+        initialMode: 'transaction',
+        initialTransaction: expect.objectContaining({
+          categoryKind: 'expense',
+          origin_wallet_id: 'wallet-1',
+        }),
+      })
+    );
+  });
+
+  it('prefills card credits as income transactions on the credit wallet', () => {
+    render(<WalletDetailsActions {...baseProps} />);
+
+    fireEvent.click(screen.getByText('wallet-data-table.credit_refund'));
+
+    const props = mocks.transactionForm.mock.calls.at(-1)?.[0];
+
+    expect(props).toEqual(
+      expect.objectContaining({
+        initialMode: 'transaction',
+        initialTransaction: expect.objectContaining({
+          categoryKind: 'income',
+          origin_wallet_id: 'wallet-1',
+        }),
+      })
+    );
+  });
+});

package/src/components/ui/finance/wallets/walletId/wallet-details-actions.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { Pencil, Plus } from '@tuturuuu/icons';
+import {
+  ArrowLeftRight,
+  CreditCard,
+  Pencil,
+  Plus,
+  RotateCcw,
+} from '@tuturuuu/icons';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
 import { Button } from '@tuturuuu/ui/button';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
@@ -11,10 +17,17 @@ import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { WalletDeleteButton } from './wallet-delete-button';
 
+export type WalletDetailsAction = 'charge' | 'payment' | 'credit' | 'edit';
+
+type WalletTransactionAction =
+  | Exclude<WalletDetailsAction, 'edit'>
+  | 'transaction';
+
 interface WalletDetailsActionsProps {
   wsId: string;
   walletId: string;
   wallet: Wallet;
+  initialAction?: WalletDetailsAction | null;
   canUpdateWallets: boolean;
   canCreateTransactions: boolean;
   canCreateConfidentialTransactions: boolean;
@@ -29,6 +42,7 @@ export function WalletDetailsActions({
   wsId,
   walletId,
   wallet,
+  initialAction,
   canUpdateWallets,
   canCreateTransactions,
   canCreateConfidentialTransactions,
@@ -40,14 +54,38 @@ export function WalletDetailsActions({
 }: WalletDetailsActionsProps) {
   const t = useTranslations();
 
-  const [showEditDialog, setShowEditDialog] = useState(false);
-  const [showTransactionDialog, setShowTransactionDialog] = useState(false);
+  const initialTransactionAction =
+    initialAction && initialAction !== 'edit' ? initialAction : null;
+  const [showEditDialog, setShowEditDialog] = useState(
+    initialAction === 'edit'
+  );
+  const [transactionAction, setTransactionAction] =
+    useState<WalletTransactionAction | null>(initialTransactionAction);
 
   const hasAnyAction =
     canUpdateWallets || canCreateTransactions || canDeleteWallets;
 
   if (!hasAnyAction) return null;
 
+  const isCreditWallet = wallet.type === 'CREDIT';
+  const transactionDialogOpen = transactionAction !== null;
+  const transactionDialogTitle =
+    transactionAction === 'charge'
+      ? t('wallet-data-table.credit_charge')
+      : transactionAction === 'payment'
+        ? t('wallet-data-table.credit_payment')
+        : transactionAction === 'credit'
+          ? t('wallet-data-table.credit_refund')
+          : t('ws-transactions.create');
+  const transactionDialogDescription =
+    transactionAction === 'charge'
+      ? t('wallet-data-table.credit_charge_description')
+      : transactionAction === 'payment'
+        ? t('wallet-data-table.credit_payment_description')
+        : transactionAction === 'credit'
+          ? t('wallet-data-table.credit_refund_description')
+          : t('ws-transactions.create_description');
+
   return (
     <div className="flex flex-wrap items-center gap-2">
       {canUpdateWallets && (
@@ -80,24 +118,90 @@ export function WalletDetailsActions({
 
       {canCreateTransactions && (
         <>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowTransactionDialog(true)}
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            {t('ws-transactions.singular')}
-          </Button>
+          {isCreditWallet ? (
+            <>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setTransactionAction('charge')}
+              >
+                <CreditCard className="mr-2 h-4 w-4" />
+                {t('wallet-data-table.credit_charge')}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setTransactionAction('payment')}
+              >
+                <ArrowLeftRight className="mr-2 h-4 w-4" />
+                {t('wallet-data-table.credit_payment')}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setTransactionAction('credit')}
+              >
+                <RotateCcw className="mr-2 h-4 w-4" />
+                {t('wallet-data-table.credit_refund')}
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setTransactionAction('transaction')}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              {t('ws-transactions.singular')}
+            </Button>
+          )}
           <ModifiableDialogTrigger
-            data={{ wallet_id: walletId }}
-            open={showTransactionDialog}
-            title={t('ws-transactions.create')}
-            createDescription={t('ws-transactions.create_description')}
-            setOpen={setShowTransactionDialog}
+            open={transactionDialogOpen}
+            title={transactionDialogTitle}
+            createDescription={transactionDialogDescription}
+            setOpen={(open) =>
+              setTransactionAction(open ? transactionAction : null)
+            }
             forceDefault
             form={
               <TransactionForm
                 wsId={wsId}
+                initialMode={
+                  transactionAction === 'payment' ? 'transfer' : 'transaction'
+                }
+                initialTransaction={
+                  transactionAction === 'charge'
+                    ? {
+                        categoryKind: 'expense',
+                        description: t(
+                          'wallet-data-table.credit_charge_default_description'
+                        ),
+                        origin_wallet_id: walletId,
+                      }
+                    : transactionAction === 'credit'
+                      ? {
+                          categoryKind: 'income',
+                          description: t(
+                            'wallet-data-table.credit_refund_default_description'
+                          ),
+                          origin_wallet_id: walletId,
+                        }
+                      : transactionAction === 'transaction'
+                        ? {
+                            origin_wallet_id: walletId,
+                          }
+                        : undefined
+                }
+                initialTransfer={
+                  transactionAction === 'payment'
+                    ? {
+                        description: t(
+                          'wallet-data-table.credit_payment_default_description'
+                        ),
+                        destination_wallet_id: walletId,
+                      }
+                    : undefined
+                }
                 canCreateTransactions={canCreateTransactions}
                 canChangeFinanceWallets={canChangeFinanceWallets}
                 canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}

package/src/components/ui/finance/wallets/walletId/wallet-details-amount.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { WalletDetailsAmount } from './wallet-details-amount';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('../../shared/use-finance-balance-mode', () => ({
+  useFinanceBalanceMode: () => ({
+    mode: 'audited',
+  }),
+}));
+
+vi.mock('../../shared/use-finance-confidential-visibility', () => ({
+  FINANCE_HIDDEN_AMOUNT: 'hidden amount',
+  useFinanceConfidentialVisibility: () => ({
+    isConfidential: false,
+  }),
+}));
+
+describe('WalletDetailsAmount', () => {
+  it('uses an orange balance badge and compact context badges for varied wallets', () => {
+    render(
+      <WalletDetailsAmount
+        auditedBalance={95}
+        auditStatus="unresolved"
+        auditVariance={-5}
+        currency="USD"
+        ledgerBalance={100}
+        primary="$100.00"
+      />
+    );
+
+    expect(
+      screen
+        .getByText('$95.00')
+        .closest('[data-wallet-details-balance-badge="varied"]')
+    ).toHaveClass('text-dynamic-orange');
+    expect(screen.getByText('ledger')).toBeInTheDocument();
+    expect(screen.getByText('variance')).toBeInTheDocument();
+  });
+
+  it('suppresses audit context for clean checkpoints', () => {
+    render(
+      <WalletDetailsAmount
+        auditedBalance={100}
+        auditStatus="clean"
+        auditVariance={0}
+        currency="USD"
+        ledgerBalance={100}
+        primary="$100.00"
+      />
+    );
+
+    expect(screen.queryByText('ledger')).not.toBeInTheDocument();
+    expect(screen.queryByText('variance')).not.toBeInTheDocument();
+    expect(
+      screen
+        .getByText('$100.00')
+        .closest('[data-wallet-details-balance-badge="varied"]')
+    ).not.toBeInTheDocument();
+  });
+});