@tuturuuu/ui 0.6.2 → 0.8.0

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

@@ -1,10 +1,30 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { CreateDialogFeatureSummary } from '../shared/create-dialog-feature-summary';
 import { TransactionForm } from './form';
 import { TransactionsCreateSummary } from './transactions-create-summary';
 
+const mocks = vi.hoisted(() => ({
+  createTransaction: vi.fn(),
+  createTransfer: vi.fn(),
+  deleteWorkspaceStorageObjects: vi.fn(),
+  listTransactionCategories: vi.fn(),
+  listTransactionTagLinks: vi.fn(),
+  listTransactionTags: vi.fn(),
+  listWallets: vi.fn(),
+  listWorkspaceStorageObjects: vi.fn(),
+  preferences: {
+    lastSelections: {} as { categoryId?: string; walletId?: string },
+    rememberLastSelections: true,
+  },
+  saveLastSelections: vi.fn(),
+  updateTransaction: vi.fn(),
+  updateTransfer: vi.fn(),
+  uploadWorkspaceStorageFile: vi.fn(),
+}));
+
 vi.mock('next/navigation', () => ({
   useRouter: () => ({
     refresh: vi.fn(),
@@ -27,9 +47,9 @@ vi.mock('@tuturuuu/ui/hooks/use-finance-transaction-preferences', () => ({
   useFinanceTransactionPreferences: () => ({
     isLastSelectionsInitialized: true,
     isLoadingRememberLastSelections: false,
-    lastSelections: {},
-    rememberLastSelections: true,
-    saveLastSelections: vi.fn(),
+    lastSelections: mocks.preferences.lastSelections,
+    rememberLastSelections: mocks.preferences.rememberLastSelections,
+    saveLastSelections: mocks.saveLastSelections,
   }),
 }));
 
@@ -38,21 +58,34 @@ vi.mock('@tuturuuu/ui/hooks/use-workspace-config', () => ({
 }));
 
 vi.mock('@tuturuuu/internal-api', () => ({
-  createTransaction: vi.fn(),
-  createTransfer: vi.fn(),
-  deleteWorkspaceStorageObjects: vi.fn(),
-  listTransactionCategories: vi.fn().mockResolvedValue([]),
-  listTransactionTagLinks: vi.fn().mockResolvedValue([]),
-  listTransactionTags: vi.fn().mockResolvedValue([]),
-  listWallets: vi.fn().mockResolvedValue([]),
-  listWorkspaceStorageObjects: vi.fn().mockResolvedValue({
-    data: [],
-    hasMore: false,
-    total: 0,
-  }),
-  updateTransaction: vi.fn(),
-  updateTransfer: vi.fn(),
-  uploadWorkspaceStorageFile: vi.fn(),
+  createTransaction: (...args: Parameters<typeof mocks.createTransaction>) =>
+    mocks.createTransaction(...args),
+  createTransfer: (...args: Parameters<typeof mocks.createTransfer>) =>
+    mocks.createTransfer(...args),
+  deleteWorkspaceStorageObjects: (
+    ...args: Parameters<typeof mocks.deleteWorkspaceStorageObjects>
+  ) => mocks.deleteWorkspaceStorageObjects(...args),
+  listTransactionCategories: (
+    ...args: Parameters<typeof mocks.listTransactionCategories>
+  ) => mocks.listTransactionCategories(...args),
+  listTransactionTagLinks: (
+    ...args: Parameters<typeof mocks.listTransactionTagLinks>
+  ) => mocks.listTransactionTagLinks(...args),
+  listTransactionTags: (
+    ...args: Parameters<typeof mocks.listTransactionTags>
+  ) => mocks.listTransactionTags(...args),
+  listWallets: (...args: Parameters<typeof mocks.listWallets>) =>
+    mocks.listWallets(...args),
+  listWorkspaceStorageObjects: (
+    ...args: Parameters<typeof mocks.listWorkspaceStorageObjects>
+  ) => mocks.listWorkspaceStorageObjects(...args),
+  updateTransaction: (...args: Parameters<typeof mocks.updateTransaction>) =>
+    mocks.updateTransaction(...args),
+  updateTransfer: (...args: Parameters<typeof mocks.updateTransfer>) =>
+    mocks.updateTransfer(...args),
+  uploadWorkspaceStorageFile: (
+    ...args: Parameters<typeof mocks.uploadWorkspaceStorageFile>
+  ) => mocks.uploadWorkspaceStorageFile(...args),
 }));
 
 vi.mock('@tuturuuu/internal-api/finance', () => ({
@@ -70,7 +103,9 @@ vi.mock('@tuturuuu/ui/sonner', () => ({
   },
 }));
 
-function renderTransactionForm() {
+function renderTransactionForm(
+  props: Partial<ComponentProps<typeof TransactionForm>> = {}
+) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -81,18 +116,34 @@ function renderTransactionForm() {
 
   return render(
     <QueryClientProvider client={queryClient}>
-      <TransactionForm wsId="ws-1" canCreateTransactions />
+      <TransactionForm wsId="ws-1" canCreateTransactions {...props} />
     </QueryClientProvider>
   );
 }
 
 describe('TransactionForm', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   beforeEach(() => {
+    vi.clearAllMocks();
     globalThis.ResizeObserver = class ResizeObserver {
       disconnect() {}
       observe() {}
       unobserve() {}
     };
+    mocks.preferences.lastSelections = {};
+    mocks.preferences.rememberLastSelections = true;
+    mocks.listTransactionCategories.mockResolvedValue([]);
+    mocks.listTransactionTagLinks.mockResolvedValue([]);
+    mocks.listTransactionTags.mockResolvedValue([]);
+    mocks.listWallets.mockResolvedValue([]);
+    mocks.listWorkspaceStorageObjects.mockResolvedValue({
+      data: [],
+      hasMore: false,
+      total: 0,
+    });
   });
 
   it('renders the create transaction form without invalid component errors', () => {
@@ -102,6 +153,38 @@ describe('TransactionForm', () => {
     expect(screen.getByText('ws-transactions.create')).toBeVisible();
   });
 
+  it('renders the optional time control on by default for new transactions', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-06-13T12:34:00.000Z'));
+
+    renderTransactionForm({ timezone: 'UTC' });
+
+    const includeTimeSwitch = screen.getByRole('switch', {
+      name: 'transaction-data-table.include_time',
+    });
+
+    expect(includeTimeSwitch).toHaveAttribute('data-state', 'checked');
+    expect(screen.getByText('12:34 PM')).toBeVisible();
+  });
+
+  it('keeps the contextual wallet selected when wallet context is preferred', async () => {
+    mocks.preferences.lastSelections = { walletId: 'wallet-remembered' };
+    mocks.listWallets.mockResolvedValue([
+      { id: 'wallet-remembered', name: 'Remembered Wallet' },
+      { id: 'wallet-current', name: 'Current Wallet' },
+    ]);
+
+    renderTransactionForm({
+      initialTransaction: { origin_wallet_id: 'wallet-current' },
+      preferInitialWalletSelection: true,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Current Wallet')).toBeVisible();
+    });
+    expect(screen.queryByText('Remembered Wallet')).not.toBeInTheDocument();
+  });
+
   it('renders inside the create dialog summary when opened from query state', () => {
     const queryClient = new QueryClient({
       defaultOptions: {

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

@@ -39,6 +39,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { convertCurrency } from '@tuturuuu/utils/exchange-rates';
 import { shouldLockFinanceWalletSelectionOnCreate } from '@tuturuuu/utils/finance';
 import { joinPath } from '@tuturuuu/utils/path-helper';
+import {
+  buildDateInTimezone,
+  getDatePartsInTimezone,
+} from '@tuturuuu/utils/task-date-timezone';
 import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
@@ -62,6 +66,67 @@ import {
 } from './transaction-attachments-field';
 
 const TRANSACTION_ATTACHMENT_PAGE_SIZE = 100;
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+function startOfDayInTimezone(date: Date, timezone?: string | null) {
+  const resolvedTimezone = timezone || 'auto';
+  const parts = getDatePartsInTimezone(date, resolvedTimezone);
+
+  return buildDateInTimezone(
+    parts.year,
+    parts.month,
+    parts.day,
+    0,
+    0,
+    resolvedTimezone
+  );
+}
+
+function parseDateOnlyInTimezone(value: string, timezone?: string | null) {
+  const [year, month, day] = value.split('-').map(Number);
+
+  if (!year || !month || !day)
+    return startOfDayInTimezone(new Date(), timezone);
+
+  return buildDateInTimezone(year, month, day, 0, 0, timezone || 'auto');
+}
+
+function resolveInitialTakenAt({
+  data,
+  initialIsTransfer,
+  initialTransaction,
+  initialTransfer,
+  timezone,
+}: Pick<
+  TransactionFormProps,
+  'data' | 'initialTransaction' | 'initialTransfer' | 'timezone'
+> & {
+  initialIsTransfer: boolean;
+}) {
+  const existingTakenAt = data?.taken_at;
+
+  if (existingTakenAt) {
+    const isDateOnly =
+      typeof existingTakenAt === 'string' &&
+      DATE_ONLY_PATTERN.test(existingTakenAt);
+
+    return {
+      date: isDateOnly
+        ? parseDateOnlyInTimezone(existingTakenAt, timezone)
+        : new Date(existingTakenAt),
+      includeTime: !!data?.id,
+    };
+  }
+
+  const initialTakenAt = initialIsTransfer
+    ? initialTransfer?.taken_at
+    : initialTransaction?.taken_at;
+
+  return {
+    date: initialTakenAt ?? new Date(),
+    includeTime: true,
+  };
+}
 
 export function TransactionForm({
   wsId,
@@ -76,6 +141,9 @@ export function TransactionForm({
   initialMode = 'transaction',
   initialTransaction,
   initialTransfer,
+  timezone,
+  preferInitialWalletSelection = false,
+  refreshPageOnFinish = false,
   permissionRequestUser,
 }: TransactionFormProps) {
   const t = useTranslations();
@@ -87,6 +155,20 @@ export function TransactionForm({
     []
   );
   const initialIsTransfer = initialMode === 'transfer' || !!data?.transfer;
+  const initialTakenAt = useMemo(
+    () =>
+      resolveInitialTakenAt({
+        data,
+        initialIsTransfer,
+        initialTransaction,
+        initialTransfer,
+        timezone,
+      }),
+    [data, initialIsTransfer, initialTransaction, initialTransfer, timezone]
+  );
+  const [includeTakenAtTime, setIncludeTakenAtTime] = useState(
+    initialTakenAt.includeTime
+  );
   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.
@@ -173,11 +255,7 @@ export function TransactionForm({
         ? Math.abs(data.transfer.linked_amount)
         : 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()),
+      taken_at: initialTakenAt.date,
       report_opt_in: data?.report_opt_in ?? true,
       tag_ids: [] as string[],
       is_transfer: initialIsTransfer,
@@ -190,6 +268,10 @@ export function TransactionForm({
     },
   });
 
+  useEffect(() => {
+    setIncludeTakenAtTime(initialTakenAt.includeTime);
+  }, [initialTakenAt.includeTime]);
+
   // Keep is_transfer in sync with local state
   useEffect(() => {
     if (form.getValues('is_transfer') !== isTransfer) {
@@ -232,25 +314,35 @@ export function TransactionForm({
       wallets.some((wallet) => wallet.id === lastSelections.walletId)
         ? lastSelections.walletId
         : '';
-    const nextWalletSelection =
-      rememberedWalletId ||
-      (contextualWalletId &&
+    const contextualWalletSelection =
+      contextualWalletId &&
       wallets.some((wallet) => wallet.id === contextualWalletId)
         ? contextualWalletId
-        : '') ||
-      (defaultWalletId &&
-      wallets.some((wallet) => wallet.id === defaultWalletId)
+        : '';
+    const defaultWalletSelection =
+      defaultWalletId && wallets.some((wallet) => wallet.id === defaultWalletId)
         ? defaultWalletId
-        : '') ||
+        : '';
+    const nextWalletSelection =
+      (preferInitialWalletSelection
+        ? contextualWalletSelection ||
+          rememberedWalletId ||
+          defaultWalletSelection
+        : rememberedWalletId ||
+          contextualWalletSelection ||
+          defaultWalletSelection) ||
       wallets[0]?.id ||
       '';
-    const sourceLabel = rememberedWalletId
-      ? t('transaction-data-table.prefill_source_last_used')
-      : contextualWalletId && nextWalletSelection === contextualWalletId
-        ? t('transaction-data-table.prefill_source_current_context')
-        : defaultWalletId && nextWalletSelection === defaultWalletId
-          ? t('transaction-data-table.prefill_source_workspace_default')
-          : '';
+    const sourceLabel =
+      rememberedWalletId && nextWalletSelection === rememberedWalletId
+        ? t('transaction-data-table.prefill_source_last_used')
+        : contextualWalletSelection &&
+            nextWalletSelection === contextualWalletSelection
+          ? t('transaction-data-table.prefill_source_current_context')
+          : defaultWalletSelection &&
+              nextWalletSelection === defaultWalletSelection
+            ? t('transaction-data-table.prefill_source_workspace_default')
+            : '';
 
     if (!nextWalletSelection) return;
 
@@ -277,6 +369,7 @@ export function TransactionForm({
     isLastSelectionsInitialized,
     isLoadingRememberLastSelections,
     lastSelections.walletId,
+    preferInitialWalletSelection,
     rememberLastSelections,
     t,
     wallets,
@@ -430,7 +523,7 @@ export function TransactionForm({
   const refreshTransactions = async () => {
     await invalidateTransactionMutationQueries(queryClient, wsId);
 
-    if (!onFinish) {
+    if (refreshPageOnFinish || !onFinish) {
       router.refresh();
     }
   };
@@ -981,6 +1074,9 @@ export function TransactionForm({
                 suggestedExchangeRate={suggestedExchangeRate}
                 isDestinationOverridden={isDestinationOverridden}
                 setIsDestinationOverridden={setIsDestinationOverridden}
+                includeTakenAtTime={includeTakenAtTime}
+                setIncludeTakenAtTime={setIncludeTakenAtTime}
+                timezone={timezone}
                 setNewContentType={setNewContentType}
                 setNewContent={setNewContent}
                 walletPrefillMeta={walletPrefillMeta}

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

@@ -55,6 +55,7 @@ import {
   type FinancePermissionRequestUser,
   FinancePermissionWarningDialog,
 } from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
+import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -71,6 +72,7 @@ import {
   listTransactionPeriodsWithInternalApi,
 } from './internal-api';
 import { PeriodBreakdownPanel } from './period-charts';
+import { invalidateTransactionMutationQueries } from './query-invalidation';
 import { TransactionCard } from './transaction-card';
 import { TransactionStatistics } from './transaction-statistics';
 import { mergeLinkedTransferTransactions } from './transfer-merge';
@@ -144,6 +146,7 @@ export function InfiniteTransactionsList({
   const t = useTranslations();
   const locale = useLocale();
   const queryClient = useQueryClient();
+  const router = useRouter();
   const loadMoreRef = useRef<HTMLDivElement>(null);
   const { data: exchangeRatesData } = useExchangeRates();
   const exchangeRates = exchangeRatesData?.data ?? [];
@@ -181,12 +184,11 @@ export function InfiniteTransactionsList({
   };
 
   const handleTransactionUpdate = () => {
-    queryClient.invalidateQueries({
-      predicate: (query) =>
-        Array.isArray(query.queryKey) &&
-        typeof query.queryKey[0] === 'string' &&
-        query.queryKey[0].includes(`/api/workspaces/${wsId}/transactions`),
-    });
+    void invalidateTransactionMutationQueries(queryClient, wsId);
+
+    if (walletId) {
+      router.refresh();
+    }
   };
 
   const deleteMutation = useMutation({
@@ -1065,6 +1067,8 @@ export function InfiniteTransactionsList({
               canUpdateConfidentialTransactions={
                 canUpdateConfidentialTransactions
               }
+              timezone={resolvedTimezone}
+              refreshPageOnFinish={!!walletId}
               permissionRequestUser={permissionRequestUser}
               onFinish={() => {
                 handleTransactionUpdate();
@@ -1098,6 +1102,9 @@ export function InfiniteTransactionsList({
               canCreateConfidentialTransactions={
                 canCreateConfidentialTransactions
               }
+              timezone={resolvedTimezone}
+              preferInitialWalletSelection={!!walletId}
+              refreshPageOnFinish={!!walletId}
               permissionRequestUser={permissionRequestUser}
               onFinish={() => {
                 handleTransactionUpdate();

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

@@ -85,12 +85,6 @@ export function TransactionCard({
     useFinanceConfidentialVisibility();
   const isTransfer = !!transaction.transfer;
 
-  // Check if transaction is confidential
-  const isConfidential =
-    transaction.is_amount_confidential ||
-    transaction.is_description_confidential ||
-    transaction.is_category_confidential;
-
   // Get custom icon if available
   const CategoryIcon = useMemo(() => {
     if (transaction.category_icon) {
@@ -127,10 +121,17 @@ export function TransactionCard({
     return wallets.find((w) => w.id === transaction.transfer?.linked_wallet_id);
   }, [transaction.transfer?.linked_wallet_id, wallets]);
 
+  const linkedAmount = transaction.transfer?.linked_amount_redacted
+    ? undefined
+    : transaction.transfer?.linked_amount;
+  const linkedAmountIsConfidential = Boolean(
+    transaction.transfer?.linked_is_amount_confidential
+  );
   const transferDisplay = transaction.transfer
     ? transaction.transfer.is_origin
       ? {
           amount: transaction.amount,
+          amountIsConfidential: Boolean(transaction.is_amount_confidential),
           amountCurrency: transaction.wallet_currency,
           destinationIcon: linkedWallet?.icon,
           destinationImageSrc: linkedWallet?.image_src,
@@ -140,11 +141,15 @@ export function TransactionCard({
           originImageSrc: wallet?.image_src,
           originWalletId: transaction.wallet_id,
           originWalletName: transaction.wallet,
-          secondaryAmount: transaction.transfer.linked_amount,
+          secondaryAmount: linkedAmount,
           secondaryCurrency: transaction.transfer.linked_wallet_currency,
         }
       : {
-          amount: transaction.transfer.linked_amount ?? transaction.amount,
+          amount: linkedAmount ?? transaction.amount,
+          amountIsConfidential:
+            linkedAmount != null
+              ? linkedAmountIsConfidential
+              : Boolean(transaction.is_amount_confidential),
           amountCurrency:
             transaction.transfer.linked_wallet_currency ||
             transaction.wallet_currency,
@@ -161,9 +166,16 @@ export function TransactionCard({
         }
     : null;
   const displayAmount = transferDisplay?.amount ?? transaction.amount;
+  const displayAmountIsConfidential =
+    transferDisplay?.amountIsConfidential ??
+    Boolean(transaction.is_amount_confidential);
   const effectiveCurrency =
     transferDisplay?.amountCurrency || transaction.wallet_currency || currency;
   const isExpense = (displayAmount || 0) < 0;
+  const isConfidential =
+    displayAmountIsConfidential ||
+    transaction.is_description_confidential ||
+    transaction.is_category_confidential;
 
   // Currency conversion for foreign-currency transactions
   const isForeignCurrency =
@@ -434,7 +446,7 @@ export function TransactionCard({
               <div className="flex flex-col items-end">
                 <ConfidentialAmount
                   amount={displayAmount ?? null}
-                  isConfidential={transaction.is_amount_confidential || false}
+                  isConfidential={displayAmountIsConfidential}
                   currency={effectiveCurrency}
                   className={cn(
                     'font-bold text-sm tabular-nums transition-all duration-200 sm:text-xl',

package/src/components/ui/finance/transactions/transaction-edit-dialog.test.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
+import type { ComponentProps } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { TransactionEditDialog } from './transaction-edit-dialog';
 
@@ -40,7 +41,9 @@ vi.mock('next/image', () => ({
   default: () => null,
 }));
 
-function renderDialog() {
+function renderDialog(
+  props: Partial<ComponentProps<typeof TransactionEditDialog>> = {}
+) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -68,6 +71,7 @@ function renderDialog() {
           } as never
         }
         wsId="ws-1"
+        {...props}
       />
     </QueryClientProvider>
   );
@@ -98,4 +102,24 @@ describe('TransactionEditDialog', () => {
     expect(await screen.findByText('•••••')).toBeVisible();
     expect(screen.queryByText('+$123')).not.toBeInTheDocument();
   });
+
+  it('enables the optional time control for existing transactions', async () => {
+    renderDialog();
+
+    expect(
+      await screen.findByRole('switch', {
+        name: 'transaction-data-table.include_time',
+      })
+    ).toHaveAttribute('data-state', 'checked');
+  });
+
+  it('disables the optional time control when update access is missing', async () => {
+    renderDialog({ canUpdateTransactions: false });
+
+    expect(
+      await screen.findByRole('switch', {
+        name: 'transaction-data-table.include_time',
+      })
+    ).toBeDisabled();
+  });
 });

package/src/components/ui/finance/transactions/transaction-edit-dialog.tsx

@@ -50,7 +50,6 @@ import {
   getIconComponentByKey,
   type PlatformIconKey,
 } from '@tuturuuu/ui/custom/icon-picker';
-import { DateTimePicker } from '@tuturuuu/ui/date-time-picker';
 import {
   Dialog,
   DialogContent,
@@ -58,6 +57,7 @@ import {
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
 import { Label } from '@tuturuuu/ui/label';
+import { OptionalTimePicker } from '@tuturuuu/ui/optional-time-picker';
 import { Separator } from '@tuturuuu/ui/separator';
 import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
@@ -148,6 +148,7 @@ interface TransactionEditDialogProps {
   canViewConfidentialAmount?: boolean;
   canViewConfidentialDescription?: boolean;
   canViewConfidentialCategory?: boolean;
+  timezone?: string | null;
 }
 
 export function TransactionEditDialog({
@@ -164,6 +165,7 @@ export function TransactionEditDialog({
   canViewConfidentialAmount,
   canViewConfidentialDescription,
   canViewConfidentialCategory,
+  timezone,
 }: TransactionEditDialogProps) {
   const t = useTranslations();
   const locale = useLocale();
@@ -212,6 +214,9 @@ export function TransactionEditDialog({
   const [takenAt, setTakenAt] = useState<Date | undefined>(
     transaction?.taken_at ? new Date(transaction.taken_at) : new Date()
   );
+  const [includeTakenAtTime, setIncludeTakenAtTime] = useState(
+    !!transaction?.taken_at
+  );
   const [reportOptIn, setReportOptIn] = useState(
     transaction?.report_opt_in ?? true
   );
@@ -292,6 +297,7 @@ export function TransactionEditDialog({
       setTakenAt(
         transaction.taken_at ? new Date(transaction.taken_at) : new Date()
       );
+      setIncludeTakenAtTime(!!transaction.taken_at);
       setReportOptIn(transaction.report_opt_in ?? true);
       setIsAmountConfidential(
         (transaction as any)?.is_amount_confidential ?? false
@@ -309,6 +315,7 @@ export function TransactionEditDialog({
       setWalletId('');
       setCategoryId('');
       setTakenAt(new Date());
+      setIncludeTakenAtTime(true);
       setReportOptIn(true);
       setIsAmountConfidential(false);
       setIsDescriptionConfidential(false);
@@ -748,13 +755,19 @@ export function TransactionEditDialog({
                   </div>
                   {t('transaction-data-table.taken_at')}
                 </Label>
-                <DateTimePicker
+                <OptionalTimePicker
                   date={takenAt}
                   setDate={setTakenAt}
-                  showTimeSelect={true}
+                  includeTime={includeTakenAtTime}
+                  setIncludeTime={setIncludeTakenAtTime}
+                  includeTimeLabel={t('transaction-data-table.include_time')}
                   allowClear={false}
                   showFooterControls={true}
                   disabled={isDisabled || !canUpdateTransactions}
+                  preferences={{
+                    timezone: timezone || 'auto',
+                    timeFormat: locale === 'vi' ? '24h' : '12h',
+                  }}
                 />
               </div>
 

package/src/components/ui/finance/transactions/transactionId/transaction-details-client-page.tsx

@@ -34,6 +34,7 @@ interface Props {
   currency?: string;
   transaction: any;
   tags: Array<{ id: string; name: string; color: string }>;
+  timezone?: string | null;
 }
 
 export function TransactionDetailsClientPage({
@@ -41,6 +42,7 @@ export function TransactionDetailsClientPage({
   currency = 'USD',
   transaction,
   tags,
+  timezone,
 }: Props) {
   const t = useTranslations();
   const financeHref = useFinanceHref();
@@ -289,6 +291,7 @@ export function TransactionDetailsClientPage({
         wsId={wsId}
         isOpen={isEditOpen}
         onClose={() => setIsEditOpen(false)}
+        timezone={timezone}
       />
     </>
   );