@tuturuuu/ui 0.6.1 → 0.7.0

package/src/components/ui/finance/command/finance-command-results.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import {
+  CreditCard,
+  DollarSign,
+  FileText,
+  Repeat,
+  Tag,
+  Target,
+  TrendingDown,
+  Wallet as WalletIcon,
+} from '@tuturuuu/icons';
+import type {
+  RecurringTransactionRecord,
+  TransactionTagRecord,
+} from '@tuturuuu/internal-api/finance';
+import type { FinanceBudget } from '@tuturuuu/types';
+import type { DebtLoanWithBalance } from '@tuturuuu/types/primitives/DebtLoan';
+import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+import type { TransactionCategoryWithStats } from '@tuturuuu/types/primitives/TransactionCategory';
+import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import type { QuickCommandCenterGroup } from '@tuturuuu/ui/quick-command-center';
+import { formatCurrency } from '@tuturuuu/utils/format';
+
+type Translation = (key: any) => string;
+
+interface FinanceRecentCommandGroupsOptions {
+  budgets?: FinanceBudget[];
+  categories?: TransactionCategoryWithStats[];
+  currency: string;
+  debts?: DebtLoanWithBalance[];
+  invoices?: Invoice[];
+  locale: string;
+  pushFinanceHref: (path: string) => void;
+  recurring?: RecurringTransactionRecord[];
+  search: string;
+  tags?: TransactionTagRecord[];
+  tCommand: Translation;
+  tFinance: Translation;
+  transactions?: Transaction[];
+  wallets?: Wallet[];
+}
+
+function formatDate(value: string | undefined, locale: string) {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(date);
+}
+
+function matchesQuery(
+  value: string | null | undefined,
+  query: string | null | undefined
+) {
+  if (!query) return true;
+  return (value ?? '').toLowerCase().includes(query.toLowerCase());
+}
+
+export function buildFinanceRecentCommandGroups({
+  budgets,
+  categories,
+  currency,
+  debts,
+  invoices,
+  locale,
+  pushFinanceHref,
+  recurring,
+  search,
+  tags,
+  tCommand,
+  tFinance,
+  transactions,
+  wallets,
+}: FinanceRecentCommandGroupsOptions): QuickCommandCenterGroup[] {
+  const groups: QuickCommandCenterGroup[] = [];
+  const txItems = (transactions ?? [])
+    .filter((transaction) => !!transaction.id)
+    .map((transaction) => {
+      const amount =
+        typeof transaction.amount === 'number'
+          ? formatCurrency(
+              transaction.amount,
+              transaction.wallet_currency ?? currency,
+              locale,
+              { signDisplay: 'always' }
+            )
+          : null;
+      return {
+        description: [
+          amount,
+          transaction.wallet_name,
+          formatDate(transaction.taken_at, locale),
+        ]
+          .filter(Boolean)
+          .join(' · '),
+        icon: <DollarSign className="h-4 w-4" />,
+        id: `transaction-${transaction.id}`,
+        onSelect: () => pushFinanceHref(`/transactions/${transaction.id}`),
+        title:
+          transaction.description ||
+          transaction.category_name ||
+          tCommand('transaction_fallback'),
+      };
+    });
+
+  if (txItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_transactions'),
+      id: 'recent-transactions',
+      items: txItems,
+    });
+  }
+
+  const walletItems = (wallets ?? []).map((wallet) => ({
+    description: [wallet.type, wallet.currency].filter(Boolean).join(' · '),
+    icon: <WalletIcon className="h-4 w-4" />,
+    id: `wallet-${wallet.id}`,
+    onSelect: () => pushFinanceHref(`/wallets/${wallet.id}`),
+    title: wallet.name || tCommand('wallet_fallback'),
+  }));
+
+  if (walletItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_wallets'),
+      id: 'recent-wallets',
+      items: walletItems,
+    });
+  }
+
+  const invoiceItems = (invoices ?? []).map((invoice) => ({
+    description: [
+      invoice.customer?.full_name || invoice.customer?.display_name,
+      typeof invoice.price === 'number'
+        ? formatCurrency(invoice.price, currency, locale)
+        : null,
+      formatDate(invoice.created_at, locale),
+    ]
+      .filter(Boolean)
+      .join(' · '),
+    icon: <FileText className="h-4 w-4" />,
+    id: `invoice-${invoice.id}`,
+    onSelect: () => pushFinanceHref(`/invoices/${invoice.id}`),
+    title:
+      invoice.notice ||
+      invoice.note ||
+      `${tCommand('invoice_fallback')} ${invoice.id.slice(0, 8)}`,
+  }));
+
+  if (invoiceItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_invoices'),
+      id: 'recent-invoices',
+      items: invoiceItems,
+    });
+  }
+
+  const budgetItems = (budgets ?? [])
+    .filter((budget) => matchesQuery(budget.name, search))
+    .slice(0, 5)
+    .map((budget) => ({
+      description:
+        typeof budget.amount === 'number'
+          ? formatCurrency(budget.amount, currency, locale)
+          : undefined,
+      icon: <Target className="h-4 w-4" />,
+      id: `budget-${budget.id}`,
+      onSelect: () => pushFinanceHref('/budgets'),
+      title: budget.name,
+    }));
+
+  if (budgetItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_budgets'),
+      id: 'recent-budgets',
+      items: budgetItems,
+    });
+  }
+
+  const recurringItems = (recurring ?? [])
+    .filter((item) => matchesQuery(item.name, search))
+    .slice(0, 5)
+    .map((item) => ({
+      description: item.frequency,
+      icon: <Repeat className="h-4 w-4" />,
+      id: `recurring-${item.id}`,
+      onSelect: () => pushFinanceHref('/recurring'),
+      title: item.name,
+    }));
+
+  if (recurringItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_recurring'),
+      id: 'recent-recurring',
+      items: recurringItems,
+    });
+  }
+
+  const debtItems = (debts ?? [])
+    .filter((item) => matchesQuery(item.name, search))
+    .slice(0, 5)
+    .map((item) => ({
+      description: item.type,
+      icon: <TrendingDown className="h-4 w-4" />,
+      id: `debt-${item.id}`,
+      onSelect: () => pushFinanceHref(`/debts/${item.id}`),
+      title: item.name,
+    }));
+
+  if (debtItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_debts'),
+      id: 'recent-debts',
+      items: debtItems,
+    });
+  }
+
+  const categoryItems = (categories ?? [])
+    .filter((item) => matchesQuery(item.name, search))
+    .slice(0, 5)
+    .map((item) => ({
+      description:
+        item.is_expense === false ? tFinance('income') : tFinance('expense'),
+      icon: <CreditCard className="h-4 w-4" />,
+      id: `category-${item.id}`,
+      onSelect: () => pushFinanceHref('/categories'),
+      title: item.name ?? tCommand('category_fallback'),
+    }));
+
+  if (categoryItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_categories'),
+      id: 'recent-categories',
+      items: categoryItems,
+    });
+  }
+
+  const tagItems = (tags ?? [])
+    .filter((item) => matchesQuery(item.name, search))
+    .slice(0, 5)
+    .map((item) => ({
+      description: item.description ?? undefined,
+      icon: <Tag className="h-4 w-4" />,
+      id: `tag-${item.id}`,
+      onSelect: () => pushFinanceHref(`/transactions?tagIds=${item.id}`),
+      title: item.name,
+    }));
+
+  if (tagItems.length > 0) {
+    groups.push({
+      heading: tCommand('recent_tags'),
+      id: 'recent-tags',
+      items: tagItems,
+    });
+  }
+
+  return groups;
+}

package/src/components/ui/finance/invoices/pending-invoices-table.tsx

@@ -2,6 +2,7 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 import { Loader2 } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
 import { DataTable } from '@tuturuuu/ui/custom/tables/data-table';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import { useTranslations } from 'next-intl';
@@ -86,14 +87,17 @@ export function PendingInvoicesTable({
     setPageSize(null);
   }, [setQ, setUserIds, setPage, setPageSize]);
 
-  const { data, isLoading, isFetching, error } = usePendingInvoices(wsId, {
-    page,
-    pageSize,
-    q,
-    userIds,
-    groupByUser,
-    enabled: !isConfigLoading,
-  });
+  const { data, isLoading, isFetching, error, refetch } = usePendingInvoices(
+    wsId,
+    {
+      page,
+      pageSize,
+      q,
+      userIds,
+      groupByUser,
+      enabled: !isConfigLoading,
+    }
+  );
 
   const columns = useMemo(
     () =>
@@ -170,10 +174,19 @@ export function PendingInvoicesTable({
 
   if (error) {
     return (
-      <div className="flex items-center justify-center py-8">
+      <div className="flex flex-col items-center justify-center gap-3 py-8">
         <p className="text-destructive text-sm">
           {t('ws-invoices.error_loading')}
         </p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          disabled={isFetching}
+        >
+          {isFetching && <Loader2 className="h-4 w-4 animate-spin" />}
+          {t('common.retry')}
+        </Button>
       </div>
     );
   }

package/src/components/ui/finance/shared/quick-actions.tsx

@@ -1,16 +1,6 @@
 'use client';
 
-import {
-  CreditCard,
-  DollarSign,
-  FileText,
-  Plus,
-  Repeat,
-  Target,
-  TrendingDown,
-  TrendingUp,
-  Wallet,
-} from '@tuturuuu/icons';
+import { Plus } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
 import {
   DropdownMenu,
@@ -22,6 +12,11 @@ import {
 } from '@tuturuuu/ui/dropdown-menu';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { Fragment } from 'react';
+import {
+  buildFinanceCommandActionGroups,
+  renderFinanceCommandActionIcon,
+} from '../command/finance-command-actions';
 import { useFinanceHref } from '../finance-route-context';
 
 interface QuickActionsProps {
@@ -45,14 +40,21 @@ export function QuickActions({
 }: QuickActionsProps) {
   const router = useRouter();
   const t = useTranslations('finance');
+  const commandT = useTranslations('finance-command-center');
   const financeHref = useFinanceHref();
-  const hasVisibleActions =
-    canCreateDebts ||
-    canCreateRecurringTransactions ||
-    canCreateTransactions ||
-    canCreateWallets ||
-    canManageFinance ||
-    canCreateInvoices;
+  const groups = buildFinanceCommandActionGroups({
+    permissions: {
+      canCreateDebts,
+      canCreateInvoices,
+      canCreateRecurringTransactions,
+      canCreateTransactions,
+      canCreateWallets,
+      canManageFinance,
+    },
+    tCommand: commandT,
+    tFinance: t,
+  });
+  const hasVisibleActions = groups.some((group) => group.items.length > 0);
 
   if (!hasVisibleActions) return null;
 
@@ -73,78 +75,25 @@ export function QuickActions({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-56">
         <DropdownMenuLabel>{t('quick_actions')}</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {canCreateTransactions && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/transactions?create=transaction')}
-          >
-            <DollarSign className="mr-2 h-4 w-4" />
-            <span>{t('new_transaction')}</span>
-          </DropdownMenuItem>
-        )}
-        {canCreateRecurringTransactions && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/recurring?create=recurring')}
-          >
-            <Repeat className="mr-2 h-4 w-4" />
-            <span>{t('new_recurring_transaction')}</span>
-          </DropdownMenuItem>
-        )}
-        {canCreateWallets && (
-          <>
-            <DropdownMenuItem
-              onClick={() => pushFinanceHref('/wallets?create=wallet')}
-            >
-              <Wallet className="mr-2 h-4 w-4" />
-              <span>{t('new_wallet')}</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => pushFinanceHref('/wallets?create=credit-card')}
-            >
-              <CreditCard className="mr-2 h-4 w-4" />
-              <span>{t('new_credit_card')}</span>
-            </DropdownMenuItem>
-          </>
-        )}
-        {canManageFinance && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/budgets?create=budget')}
-          >
-            <Target className="mr-2 h-4 w-4" />
-            <span>{t('new_budget')}</span>
-          </DropdownMenuItem>
-        )}
-        {(canCreateInvoices || canCreateDebts || canManageFinance) && (
-          <DropdownMenuSeparator />
-        )}
-        {canCreateInvoices && (
-          <DropdownMenuItem onClick={() => pushFinanceHref('/invoices/new')}>
-            <FileText className="mr-2 h-4 w-4" />
-            <span>{t('new_invoice')}</span>
-          </DropdownMenuItem>
-        )}
-        {canCreateDebts && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/debts?create=debt')}
-          >
-            <TrendingDown className="mr-2 h-4 w-4" />
-            <span>{t('new_debt')}</span>
-          </DropdownMenuItem>
-        )}
-        {canCreateDebts && (
-          <DropdownMenuItem
-            onClick={() => pushFinanceHref('/debts?create=loan')}
-          >
-            <TrendingUp className="mr-2 h-4 w-4" />
-            <span>{t('new_loan')}</span>
-          </DropdownMenuItem>
-        )}
-        {canManageFinance && (
-          <DropdownMenuItem onClick={() => pushFinanceHref('/categories')}>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>{t('manage_categories')}</span>
-          </DropdownMenuItem>
-        )}
+        {groups.map((group, groupIndex) => (
+          <Fragment key={group.id}>
+            <DropdownMenuSeparator />
+            {groupIndex > 0 && (
+              <DropdownMenuLabel>{group.heading}</DropdownMenuLabel>
+            )}
+            {group.items.map((action) => (
+              <DropdownMenuItem
+                key={action.id}
+                onClick={() => pushFinanceHref(action.href)}
+              >
+                <span className="mr-2">
+                  {renderFinanceCommandActionIcon(action)}
+                </span>
+                <span>{action.title}</span>
+              </DropdownMenuItem>
+            ))}
+          </Fragment>
+        ))}
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/ui/finance/tags/tag-manager.tsx

@@ -62,7 +62,7 @@ import { Textarea } from '@tuturuuu/ui/textarea';
 import { cn, formatCurrency } from '@tuturuuu/utils/format';
 import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { useFinanceHref } from '../finance-route-context';
@@ -73,6 +73,8 @@ import {
 
 interface TagManagerProps {
   currency: string;
+  onOpenCreateDialogChange?: (open: boolean) => void;
+  openCreateDialog?: boolean;
   wsId: string;
 }
 
@@ -99,7 +101,12 @@ const PRESET_COLORS = [
   '#ec4899', // pink
 ];
 
-export function TagManager({ currency, wsId }: TagManagerProps) {
+export function TagManager({
+  currency,
+  onOpenCreateDialogChange,
+  openCreateDialog,
+  wsId,
+}: TagManagerProps) {
   const t = useTranslations();
   const locale = useLocale();
   const { isConfidential: areNumbersHidden } =
@@ -221,7 +228,7 @@ export function TagManager({ currency, wsId }: TagManagerProps) {
     router.push(`/${wsId}${financeHref('/transactions')}?tagIds=${tagId}`);
   };
 
-  const handleOpenCreate = () => {
+  const handleOpenCreate = useCallback(() => {
     setEditingTag(null);
     form.reset({
       name: '',
@@ -229,7 +236,11 @@ export function TagManager({ currency, wsId }: TagManagerProps) {
       description: '',
     });
     setIsDialogOpen(true);
-  };
+  }, [form]);
+
+  useEffect(() => {
+    if (openCreateDialog) handleOpenCreate();
+  }, [handleOpenCreate, openCreateDialog]);
 
   const handleOpenEdit = (tag: TransactionTag) => {
     setEditingTag(tag);
@@ -475,7 +486,15 @@ export function TagManager({ currency, wsId }: TagManagerProps) {
       )}
 
       {/* Create/Edit Dialog */}
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <Dialog
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open && openCreateDialog) {
+            onOpenCreateDialogChange?.(false);
+          }
+        }}
+      >
         <DialogContent>
           <DialogHeader>
             <DialogTitle>

package/src/components/ui/finance/transactions/form-basic-tab.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { CalendarIcon, PlusIcon } from '@tuturuuu/icons';
+import { PlusIcon } from '@tuturuuu/icons';
 import type { TransactionCategory } from '@tuturuuu/types/primitives/TransactionCategory';
 import type { Wallet as WalletType } from '@tuturuuu/types/primitives/Wallet';
-import { Button } from '@tuturuuu/ui/button';
-import { Calendar } from '@tuturuuu/ui/calendar';
 import { CurrencyInput } from '@tuturuuu/ui/currency-input';
 import { Combobox } from '@tuturuuu/ui/custom/combobox';
 import { getIconComponentByKey } from '@tuturuuu/ui/custom/icon-picker';
@@ -22,10 +20,8 @@ import {
   FormMessage,
 } from '@tuturuuu/ui/form';
 import { Input } from '@tuturuuu/ui/input';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { OptionalTimePicker } from '@tuturuuu/ui/optional-time-picker';
 import { computeAccessibleLabelStyles } from '@tuturuuu/utils/label-colors';
-import { format } from 'date-fns';
-import { enUS, vi } from 'date-fns/locale';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
 import type { UseFormReturn } from 'react-hook-form';
@@ -52,6 +48,9 @@ interface FormBasicTabProps {
   suggestedExchangeRate: number | null;
   isDestinationOverridden: boolean;
   setIsDestinationOverridden: (value: boolean) => void;
+  includeTakenAtTime: boolean;
+  setIncludeTakenAtTime: (value: boolean) => void;
+  timezone?: string | null;
   setNewContentType: (value: NewContentType) => void;
   setNewContent: (value: NewContent) => void;
   walletPrefillMeta?: {
@@ -83,6 +82,9 @@ export function FormBasicTab({
   suggestedExchangeRate,
   isDestinationOverridden,
   setIsDestinationOverridden,
+  includeTakenAtTime,
+  setIncludeTakenAtTime,
+  timezone,
   setNewContentType,
   setNewContent,
   walletPrefillMeta,
@@ -320,49 +322,31 @@ export function FormBasicTab({
         )}
       />
 
-      <Popover>
-        <FormField
-          control={form.control}
-          name="taken_at"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>{t('transaction-data-table.taken_at')}</FormLabel>
-              <PopoverTrigger asChild>
-                <FormControl>
-                  <Button
-                    variant="outline"
-                    className="pl-3 text-left font-normal"
-                    disabled={!hasFormPermission}
-                  >
-                    {field.value ? (
-                      format(
-                        field.value,
-                        locale === 'vi' ? 'dd/MM/yyyy, ppp' : 'PPP',
-                        {
-                          locale: locale === 'vi' ? vi : enUS,
-                        }
-                      )
-                    ) : (
-                      <span>{t('transaction-data-table.taken_at')}</span>
-                    )}
-                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                  </Button>
-                </FormControl>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="center">
-                <Calendar
-                  mode="single"
-                  selected={field.value}
-                  onSelect={field.onChange}
-                  onSubmit={field.onChange}
-                  initialFocus
-                />
-              </PopoverContent>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </Popover>
+      <FormField
+        control={form.control}
+        name="taken_at"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>{t('transaction-data-table.taken_at')}</FormLabel>
+            <FormControl>
+              <OptionalTimePicker
+                date={field.value}
+                setDate={field.onChange}
+                includeTime={includeTakenAtTime}
+                setIncludeTime={setIncludeTakenAtTime}
+                includeTimeLabel={t('transaction-data-table.include_time')}
+                disabled={loading || !hasFormPermission}
+                allowClear={false}
+                preferences={{
+                  timezone: timezone || 'auto',
+                  timeFormat: locale === 'vi' ? '24h' : '12h',
+                }}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
     </div>
   );
 }

package/src/components/ui/finance/transactions/form-types.ts

@@ -56,6 +56,9 @@ export interface TransactionFormProps {
   initialMode?: TransactionFormInitialMode;
   initialTransaction?: TransactionFormInitialTransaction;
   initialTransfer?: TransactionFormInitialTransfer;
+  timezone?: string | null;
+  preferInitialWalletSelection?: boolean;
+  refreshPageOnFinish?: boolean;
   permissionRequestUser?: FinancePermissionRequestUser | null;
 }