@tuturuuu/ui 0.6.2 → 0.8.0

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

@@ -15,6 +15,7 @@ interface Props {
     locale: string;
   }>;
   internalApiOptions?: InternalApiClientOptions;
+  timezone?: string | null;
 }
 
 type TransactionDetailsData = {
@@ -26,6 +27,7 @@ type TransactionDetailsData = {
 export default async function TransactionDetailsPage({
   params,
   internalApiOptions,
+  timezone,
 }: Props) {
   const { wsId, transactionId } = await params;
 
@@ -55,6 +57,7 @@ export default async function TransactionDetailsPage({
         wsId={wsId}
         transaction={transaction}
         tags={tags}
+        timezone={timezone}
       />
     </div>
   );

package/src/components/ui/finance/transactions/transactions-create-summary.tsx

@@ -16,9 +16,11 @@ interface TransactionsCreateSummaryProps {
   createTitle: string;
   defaultOpen?: boolean;
   description: string;
+  initialMode?: 'transaction' | 'transfer';
   permissionRequestUser?: FinancePermissionRequestUser | null;
   pluralTitle: string;
   singularTitle: string;
+  timezone?: string | null;
   wsId: string;
 }
 
@@ -31,9 +33,11 @@ export function TransactionsCreateSummary({
   createTitle,
   defaultOpen = false,
   description,
+  initialMode = 'transaction',
   permissionRequestUser,
   pluralTitle,
   singularTitle,
+  timezone,
   wsId,
 }: TransactionsCreateSummaryProps) {
   return (
@@ -54,6 +58,8 @@ export function TransactionsCreateSummary({
             canCreateConfidentialTransactions={
               canCreateConfidentialTransactions
             }
+            initialMode={initialMode}
+            timezone={timezone}
             permissionRequestUser={permissionRequestUser}
           />
         ) : (

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

@@ -82,6 +82,14 @@ export function TransactionsInfinitePage({
       shallow: true,
     })
   );
+  const [tool, setTool] = useQueryState(
+    'tool',
+    parseAsString.withDefault('').withOptions({
+      shallow: true,
+    })
+  );
+  const importOpen = tool === 'import';
+  const exportOpen = tool === 'export';
 
   const handleSearch = async (query: string) => {
     await setQ(query || '');
@@ -143,7 +151,12 @@ export function TransactionsInfinitePage({
 
         <div className="flex w-full flex-col gap-2 sm:flex-row md:w-auto">
           {/* Import button */}
-          <Dialog>
+          <Dialog
+            open={importOpen}
+            onOpenChange={(nextOpen) =>
+              setTool(nextOpen ? 'import' : tool === 'import' ? null : tool)
+            }
+          >
             <DialogTrigger asChild>
               <Button
                 variant="outline"
@@ -161,7 +174,12 @@ export function TransactionsInfinitePage({
 
           {/* Export button */}
           {canExport && exportContent && (
-            <Dialog>
+            <Dialog
+              open={exportOpen}
+              onOpenChange={(nextOpen) =>
+                setTool(nextOpen ? 'export' : tool === 'export' ? null : tool)
+              }
+            >
               <DialogTrigger asChild>
                 <Button
                   variant="outline"

package/src/components/ui/finance/transactions/transactions-page.tsx

@@ -26,6 +26,7 @@ interface Props {
   };
   permissionRequestUser?: FinancePermissionRequestUser | null;
   openCreateDialog?: boolean;
+  initialCreateMode?: 'transaction' | 'transfer';
   showTransactionTypeFilter?: boolean;
 }
 
@@ -36,6 +37,7 @@ export default async function TransactionsPage({
   workspace,
   permissionRequestUser,
   openCreateDialog = false,
+  initialCreateMode = 'transaction',
   showTransactionTypeFilter = false,
 }: Props) {
   const [t, resolvedWorkspace, resolvedPermissions, resolvedCurrency] =
@@ -102,11 +104,13 @@ export default async function TransactionsPage({
         createTitle={t('ws-transactions.create')}
         createDescription={t('ws-transactions.create_description')}
         defaultOpen={openCreateDialog}
+        initialMode={initialCreateMode}
         wsId={wsId}
         canCreateTransactions={canCreateTransactions}
         canChangeFinanceWallets={canChangeFinanceWallets}
         canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
         canCreateConfidentialTransactions={canCreateConfidentialTransactions}
+        timezone={resolvedWorkspace.timezone}
         permissionRequestUser={permissionRequestUser}
       />
       <Separator className="my-4" />

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

@@ -30,7 +30,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { cn } from '@tuturuuu/utils/format';
 import Link from 'next/link';
 import { useLocale, useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { invalidateWalletMutationQueries } from '../query-invalidation';
 import { WalletCheckpointAdjustmentDialog } from './wallet-checkpoint-adjustment-dialog';
 import { WalletCheckpointAmount } from './wallet-checkpoint-amount';
@@ -63,17 +63,19 @@ type WindowRow =
 
 export function WalletCheckpointHistoryDialog({
   canCreateTransactions,
+  defaultOpen = false,
   financePrefix = '/finance',
   wsId,
 }: {
   canCreateTransactions: boolean;
+  defaultOpen?: boolean;
   financePrefix?: string;
   wsId: string;
 }) {
   const t = useTranslations('wallet-checkpoints');
   const locale = useLocale();
   const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
   const [search, setSearch] = useState('');
   const [currency, setCurrency] = useState(ALL);
   const [status, setStatus] = useState<typeof ALL | CheckpointStatus>(ALL);
@@ -84,6 +86,9 @@ export function WalletCheckpointHistoryDialog({
     queryFn: () => getWalletCheckpointHistory(wsId, { limit: 100 }),
     enabled: open,
   });
+  useEffect(() => {
+    if (defaultOpen) setOpen(true);
+  }, [defaultOpen]);
   const formatDate = (value: string) =>
     new Intl.DateTimeFormat(locale, {
       dateStyle: 'medium',

package/src/components/ui/finance/wallets/checkpoints/wallet-total-check-dialog.tsx

@@ -29,7 +29,7 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useFinanceBalanceMode } from '../../shared/use-finance-balance-mode';
 import {
   getWalletBalanceTone,
@@ -51,22 +51,27 @@ type WalletInput = {
 export function WalletTotalCheckDialog({
   canUpdateWallets,
   currency,
+  defaultOpen = false,
   wsId,
 }: {
   canUpdateWallets: boolean;
   currency: string;
+  defaultOpen?: boolean;
   wsId: string;
 }) {
   const t = useTranslations('wallet-checkpoints');
   const queryClient = useQueryClient();
   const { isAuditedMode } = useFinanceBalanceMode();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
   const [values, setValues] = useState<Record<string, string>>({});
   const walletsQuery = useQuery({
     enabled: open && canUpdateWallets,
     queryFn: () => listWallets(wsId),
     queryKey: ['wallets', wsId, 'all-wallet-check'],
   });
+  useEffect(() => {
+    if (defaultOpen) setOpen(true);
+  }, [defaultOpen]);
   const wallets = useMemo<WalletInput[]>(
     () =>
       (walletsQuery.data ?? []).flatMap((wallet) => {

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

@@ -50,7 +50,7 @@ describe('WalletDetailsActions', () => {
   });
 
   it('prefills card payments as transfers into the credit wallet', () => {
-    render(<WalletDetailsActions {...baseProps} />);
+    render(<WalletDetailsActions {...baseProps} timezone="Asia/Ho_Chi_Minh" />);
 
     fireEvent.click(screen.getByText('wallet-data-table.credit_payment'));
 
@@ -63,6 +63,9 @@ describe('WalletDetailsActions', () => {
         initialTransfer: expect.objectContaining({
           destination_wallet_id: 'wallet-1',
         }),
+        preferInitialWalletSelection: false,
+        refreshPageOnFinish: true,
+        timezone: 'Asia/Ho_Chi_Minh',
       })
     );
   });
@@ -81,6 +84,8 @@ describe('WalletDetailsActions', () => {
           categoryKind: 'expense',
           origin_wallet_id: 'wallet-1',
         }),
+        preferInitialWalletSelection: true,
+        refreshPageOnFinish: true,
       })
     );
   });
@@ -99,6 +104,38 @@ describe('WalletDetailsActions', () => {
           categoryKind: 'income',
           origin_wallet_id: 'wallet-1',
         }),
+        preferInitialWalletSelection: true,
+        refreshPageOnFinish: true,
+      })
+    );
+  });
+
+  it('prefills standard wallet transactions as source-wallet transactions', () => {
+    render(
+      <WalletDetailsActions
+        {...baseProps}
+        wallet={
+          {
+            id: 'wallet-1',
+            name: 'Cash',
+            type: 'STANDARD',
+          } as never
+        }
+      />
+    );
+
+    fireEvent.click(screen.getByText('ws-transactions.singular'));
+
+    const props = mocks.transactionForm.mock.calls.at(-1)?.[0];
+
+    expect(props).toEqual(
+      expect.objectContaining({
+        initialMode: 'transaction',
+        initialTransaction: expect.objectContaining({
+          origin_wallet_id: 'wallet-1',
+        }),
+        preferInitialWalletSelection: true,
+        refreshPageOnFinish: true,
       })
     );
   });

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

@@ -35,6 +35,7 @@ interface WalletDetailsActionsProps {
   canSetFinanceWalletsOnCreate?: boolean;
   canDeleteWallets: boolean;
   isPersonalWorkspace: boolean;
+  timezone?: string | null;
   permissionRequestUser?: FinancePermissionRequestUser | null;
 }
 
@@ -50,6 +51,7 @@ export function WalletDetailsActions({
   canSetFinanceWalletsOnCreate,
   canDeleteWallets,
   isPersonalWorkspace,
+  timezone,
   permissionRequestUser,
 }: WalletDetailsActionsProps) {
   const t = useTranslations();
@@ -208,6 +210,9 @@ export function WalletDetailsActions({
                 canCreateConfidentialTransactions={
                   canCreateConfidentialTransactions
                 }
+                timezone={timezone}
+                preferInitialWalletSelection={transactionAction !== 'payment'}
+                refreshPageOnFinish
                 permissionRequestUser={permissionRequestUser}
               />
             }

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

@@ -30,6 +30,7 @@ const mocks = vi.hoisted(() => {
     getWorkspace: vi.fn(),
     getWorkspaceConfig: vi.fn(),
     headers: vi.fn(),
+    infiniteTransactionsList: vi.fn((_props: unknown) => null),
     notFound: vi.fn(() => {
       throw new Error('notFound');
     }),
@@ -81,7 +82,9 @@ vi.mock('@tuturuuu/ui/custom/feature-summary', () => ({
 }));
 
 vi.mock('@tuturuuu/ui/finance/transactions/infinite-transactions-list', () => ({
-  InfiniteTransactionsList: () => null,
+  InfiniteTransactionsList: (
+    ...args: Parameters<typeof mocks.infiniteTransactionsList>
+  ) => mocks.infiniteTransactionsList(...args),
 }));
 
 vi.mock('@tuturuuu/ui/separator', () => ({
@@ -129,7 +132,10 @@ describe('wallet details page', () => {
     vi.resetModules();
     vi.clearAllMocks();
     mocks.getTranslations.mockResolvedValue((key: string) => key);
-    mocks.getWorkspace.mockResolvedValue({ personal: false });
+    mocks.getWorkspace.mockResolvedValue({
+      personal: false,
+      timezone: 'Asia/Ho_Chi_Minh',
+    });
     mocks.getWorkspaceConfig.mockResolvedValue('USD');
     mocks.getPermissions.mockResolvedValue({
       withoutPermission: vi.fn(() => false),
@@ -208,6 +214,16 @@ describe('wallet details page', () => {
     expect(actionProps).toEqual(
       expect.objectContaining({
         initialAction: 'payment',
+        timezone: 'Asia/Ho_Chi_Minh',
+        walletId: 'wallet-1',
+      })
+    );
+    expect(mocks.infiniteTransactionsList).toHaveBeenCalled();
+    const listProps = mocks.infiniteTransactionsList.mock.calls[0]?.[0];
+
+    expect(listProps).toEqual(
+      expect.objectContaining({
+        timezone: 'Asia/Ho_Chi_Minh',
         walletId: 'wallet-1',
       })
     );

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

@@ -51,6 +51,7 @@ interface Props {
   permissions?: PermissionsResult;
   workspace?: {
     personal?: boolean | null;
+    timezone?: string | null;
   };
   permissionRequestUser?: FinancePermissionRequestUser | null;
 }
@@ -152,6 +153,7 @@ export default async function WalletDetailsPage({
           canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
           canDeleteWallets={canDeleteWallets}
           isPersonalWorkspace={!!resolvedWorkspace.personal}
+          timezone={resolvedWorkspace.timezone}
           permissionRequestUser={permissionRequestUser}
         />
       </div>
@@ -314,6 +316,7 @@ export default async function WalletDetailsPage({
           wsId={wsId}
           walletId={walletId}
           currency={currency}
+          timezone={resolvedWorkspace.timezone}
           canCreateTransactions={canCreateTransactions}
           canCreateConfidentialTransactions={canCreateConfidentialTransactions}
           canUpdateTransactions={canUpdateTransactions}

package/src/components/ui/finance/wallets/wallets-page.tsx

@@ -20,6 +20,7 @@ interface Props {
   searchParams: {
     create?: string;
     q?: string;
+    tool?: string;
   };
   currency?: string;
   financePrefix?: string;
@@ -90,11 +91,13 @@ export default async function WalletsPage({
             wsId={wsId}
             financePrefix={financePrefix}
             canCreateTransactions={canCreateTransactions}
+            defaultOpen={searchParams.tool === 'checkpoint-history'}
           />
           <WalletTotalCheckDialog
             wsId={wsId}
             currency={resolvedCurrency ?? 'USD'}
             canUpdateWallets={canUpdateWallets}
+            defaultOpen={searchParams.tool === 'all-wallet-check'}
           />
         </div>
       </div>

package/src/components/ui/legacy/calendar/settings/google-calendar-settings.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Check, ExternalLink, Link, Loader2, RefreshCw } from '@tuturuuu/icons';
+import { getGoogleCalendarAuthUrl } from '@tuturuuu/internal-api';
 import { createClient } from '@tuturuuu/supabase/next/client';
 import type { WorkspaceCalendarGoogleTokenClient } from '@tuturuuu/types';
 import { Alert, AlertDescription } from '@tuturuuu/ui/alert';
@@ -119,15 +120,7 @@ export function GoogleCalendarSettings({
 
     setIsGoogleAuthenticating(true);
     try {
-      const response = await fetch(`/api/v1/calendar/auth?wsId=${wsId}`, {
-        method: 'GET',
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const { authUrl } = await response.json();
+      const { authUrl } = await getGoogleCalendarAuthUrl(wsId);
       window.location.href = authUrl;
     } catch (error) {
       console.error('Error initiating Google auth:', error);

package/src/components/ui/money-input.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MoneyInput } from './money-input';
+
+describe('MoneyInput', () => {
+  it('renders a minor-unit USD value as major units', () => {
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="USD"
+        hideHelpers
+        onChange={vi.fn()}
+        value={10000}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    expect(input).toHaveValue('100');
+  });
+
+  it('emits minor units (cents) for a USD entry', () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="USD"
+        hideHelpers
+        onChange={onChange}
+        value={undefined}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    fireEvent.focus(input);
+    fireEvent.change(input, {
+      target: { selectionStart: 4, value: '9.99' },
+    });
+
+    expect(onChange).toHaveBeenLastCalledWith(999);
+  });
+
+  it('treats zero-decimal currencies 1:1', () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="VND"
+        hideHelpers
+        onChange={onChange}
+        value={25000}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    // 25000 minor units == 25000 major units for VND (0 fraction digits).
+    expect(input.value.replace(/[^\d]/g, '')).toBe('25000');
+
+    fireEvent.focus(input);
+    fireEvent.change(input, {
+      target: { selectionStart: 3, value: '500' },
+    });
+    expect(onChange).toHaveBeenLastCalledWith(500);
+  });
+});

package/src/components/ui/money-input.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { getCurrencyLocale } from '@tuturuuu/utils/format';
+import {
+  getCurrencyFractionDigits,
+  majorToMinor,
+  minorToMajor,
+} from '@tuturuuu/utils/money';
+import { useMemo } from 'react';
+import { CurrencyInput, type CurrencyInputProps } from './currency-input';
+
+export interface MoneyInputProps
+  extends Omit<
+    CurrencyInputProps,
+    'value' | 'onChange' | 'locale' | 'maximumFractionDigits' | 'currencySuffix'
+  > {
+  /** ISO currency code (e.g. 'USD', 'VND'). Drives precision + locale. */
+  currency: string;
+  /** Amount in integer minor units (cents for USD, whole units for JPY/VND). */
+  value: number | undefined;
+  /** Emits the amount in integer minor units. */
+  onChange: (minorValue: number) => void;
+  /** Show the currency code as a muted suffix (defaults to true). */
+  showCurrencySuffix?: boolean;
+}
+
+/**
+ * Currency-aware money input. The `value`/`onChange` boundary is always in
+ * integer **minor units** (the canonical storage format); the field renders and
+ * edits in localized major units with the correct precision for the currency.
+ *
+ * Wraps the shared {@link CurrencyInput} so all money entry across the platform
+ * shares one polished input (cursor preservation, quick-action helpers) while
+ * keeping the minor-unit conversion centralized in one place.
+ */
+export function MoneyInput({
+  currency,
+  value,
+  onChange,
+  showCurrencySuffix = true,
+  ...props
+}: MoneyInputProps) {
+  const fractionDigits = useMemo(
+    () => getCurrencyFractionDigits(currency),
+    [currency]
+  );
+  const locale = useMemo(() => getCurrencyLocale(currency), [currency]);
+  const majorValue = useMemo(
+    () => (value === undefined ? undefined : minorToMajor(value, currency)),
+    [currency, value]
+  );
+
+  return (
+    <CurrencyInput
+      {...props}
+      value={majorValue}
+      onChange={(major) => onChange(majorToMinor(major, currency))}
+      locale={locale}
+      maximumFractionDigits={fractionDigits}
+      currencySuffix={showCurrencySuffix ? currency.toUpperCase() : undefined}
+    />
+  );
+}

package/src/components/ui/optional-time-picker.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { DateTimePicker } from '@tuturuuu/ui/date-time-picker';
+import { cn } from '@tuturuuu/utils/format';
+import {
+  buildDateInTimezone,
+  getDatePartsInTimezone,
+} from '@tuturuuu/utils/task-date-timezone';
+import type { ReactNode } from 'react';
+
+export interface OptionalTimePickerProps {
+  date?: Date;
+  setDate: (date: Date | undefined) => void;
+  includeTime: boolean;
+  setIncludeTime: (includeTime: boolean) => void;
+  includeTimeLabel: ReactNode;
+  disabled?: boolean;
+  allowClear?: boolean;
+  showFooterControls?: boolean;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  collisionPadding?: number;
+  className?: string;
+  preferences?: {
+    weekStartsOn?: 0 | 1 | 6;
+    timezone?: string;
+    timeFormat?: '12h' | '24h';
+  };
+}
+
+function startOfDay(date: Date, timezone?: string) {
+  if (!timezone) {
+    const next = new Date(date);
+    next.setHours(0, 0, 0, 0);
+    return next;
+  }
+
+  const parts = getDatePartsInTimezone(date, timezone);
+  return buildDateInTimezone(
+    parts.year,
+    parts.month,
+    parts.day,
+    0,
+    0,
+    timezone
+  );
+}
+
+export function OptionalTimePicker({
+  date,
+  setDate,
+  includeTime,
+  setIncludeTime,
+  includeTimeLabel,
+  disabled = false,
+  allowClear = true,
+  showFooterControls = true,
+  side = 'bottom',
+  align = 'start',
+  collisionPadding = 16,
+  className,
+  preferences,
+}: OptionalTimePickerProps) {
+  const handleDateChange = (nextDate: Date | undefined) => {
+    if (!nextDate || includeTime) {
+      setDate(nextDate);
+      return;
+    }
+
+    setDate(startOfDay(nextDate, preferences?.timezone));
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      <DateTimePicker
+        date={date}
+        setDate={handleDateChange}
+        showTimeSelect={includeTime}
+        allowClear={allowClear}
+        showFooterControls={showFooterControls}
+        disabled={disabled}
+        side={side}
+        align={align}
+        collisionPadding={collisionPadding}
+        preferences={preferences}
+        timeToggle={{
+          checked: includeTime,
+          disabled,
+          label: includeTimeLabel,
+          onCheckedChange: setIncludeTime,
+        }}
+      />
+    </div>
+  );
+}