@tuturuuu/ui 0.6.2 → 0.8.0

package/src/components/ui/finance/categories-tags-tabs.tsx

@@ -11,6 +11,7 @@ import { Separator } from '@tuturuuu/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { useTranslations } from 'next-intl';
 import { parseAsString, useQueryState } from 'nuqs';
+import { useEffect } from 'react';
 
 interface Props {
   currency: string;
@@ -30,8 +31,22 @@ export default function CategoriesTagsTabs({
       shallow: true,
     })
   );
+  const [create, setCreate] = useQueryState(
+    'create',
+    parseAsString.withDefault('').withOptions({
+      shallow: true,
+    })
+  );
 
   const activeTab = tab === 'tags' ? 'tags' : 'categories';
+  const categoryCreateOpen = create === 'category';
+  const tagCreateOpen = create === 'tag';
+
+  useEffect(() => {
+    if (tagCreateOpen && activeTab !== 'tags') {
+      setTab('tags');
+    }
+  }, [activeTab, setTab, tagCreateOpen]);
 
   return (
     <Tabs
@@ -58,6 +73,8 @@ export default function CategoriesTagsTabs({
           createTitle={t('ws-transaction-categories.create')}
           createDescription={t('ws-transaction-categories.create_description')}
           form={<TransactionCategoryForm wsId={wsId} />}
+          open={categoryCreateOpen}
+          setOpen={(open) => setCreate(open ? 'category' : null)}
         />
         <Separator className="my-4" />
         <CategoryBreakdownChart wsId={wsId} currency={currency} />
@@ -73,7 +90,12 @@ export default function CategoriesTagsTabs({
       </TabsContent>
 
       <TabsContent value="tags">
-        <TagManager wsId={wsId} currency={currency} />
+        <TagManager
+          wsId={wsId}
+          currency={currency}
+          openCreateDialog={tagCreateOpen}
+          onOpenCreateDialogChange={(open) => setCreate(open ? 'tag' : null)}
+        />
       </TabsContent>
     </Tabs>
   );

package/src/components/ui/finance/command/finance-command-actions.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { buildFinanceCommandActionGroups } from './finance-command-actions';
+
+const translate = (key: string) => key;
+
+describe('buildFinanceCommandActionGroups', () => {
+  it('exposes create and utility commands when permissions allow them', () => {
+    const groups = buildFinanceCommandActionGroups({
+      permissions: {
+        canCreateDebts: true,
+        canCreateInvoices: true,
+        canCreateRecurringTransactions: true,
+        canCreateTransactions: true,
+        canCreateWallets: true,
+        canExportFinanceData: true,
+        canManageFinance: true,
+        canUpdateWallets: true,
+      },
+      tCommand: translate,
+      tFinance: translate,
+    });
+
+    const ids = groups.flatMap((group) => group.items.map((item) => item.id));
+
+    expect(ids).toContain('new-transaction');
+    expect(ids).toContain('new-transfer');
+    expect(ids).toContain('import-transactions');
+    expect(ids).toContain('export-transactions');
+    expect(ids).toContain('all-wallet-check');
+  });
+
+  it('hides transaction and wallet commands without permission', () => {
+    const groups = buildFinanceCommandActionGroups({
+      permissions: {
+        canCreateTransactions: false,
+        canCreateWallets: false,
+      },
+      tCommand: translate,
+      tFinance: translate,
+    });
+
+    const ids = groups.flatMap((group) => group.items.map((item) => item.id));
+
+    expect(ids).not.toContain('new-transaction');
+    expect(ids).not.toContain('new-transfer');
+    expect(ids).not.toContain('new-wallet');
+  });
+});

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

@@ -0,0 +1,200 @@
+import {
+  ArrowLeftRight,
+  Calculator,
+  CreditCard,
+  DollarSign,
+  Download,
+  FileText,
+  History,
+  Repeat,
+  Tag,
+  Target,
+  TrendingDown,
+  TrendingUp,
+  Upload,
+  Wallet,
+} from '@tuturuuu/icons';
+import type { ComponentType, ReactNode } from 'react';
+
+type IconComponent = ComponentType<{ className?: string }>;
+type Translation = (key: any) => string;
+
+export interface FinanceCommandActionPermissions {
+  canCreateDebts?: boolean;
+  canCreateInvoices?: boolean;
+  canCreateRecurringTransactions?: boolean;
+  canCreateTransactions?: boolean;
+  canCreateWallets?: boolean;
+  canExportFinanceData?: boolean;
+  canManageFinance?: boolean;
+  canUpdateWallets?: boolean;
+}
+
+export interface FinanceCommandAction {
+  description?: string;
+  href: string;
+  icon: IconComponent;
+  id: string;
+  title: string;
+}
+
+export interface FinanceCommandActionGroup {
+  heading: string;
+  id: 'create' | 'tools';
+  items: FinanceCommandAction[];
+}
+
+function iconNode(Icon: IconComponent): ReactNode {
+  return <Icon className="h-4 w-4" />;
+}
+
+export function renderFinanceCommandActionIcon(action: FinanceCommandAction) {
+  return iconNode(action.icon);
+}
+
+export function buildFinanceCommandActionGroups({
+  permissions,
+  tCommand,
+  tFinance,
+}: {
+  permissions: FinanceCommandActionPermissions;
+  tCommand: Translation;
+  tFinance: Translation;
+}): FinanceCommandActionGroup[] {
+  const canCreateTransactions = permissions.canCreateTransactions ?? true;
+  const canCreateWallets = permissions.canCreateWallets ?? true;
+  const canManageFinance = permissions.canManageFinance ?? true;
+  const canCreateInvoices = permissions.canCreateInvoices ?? true;
+  const canCreateDebts = permissions.canCreateDebts ?? true;
+  const canCreateRecurringTransactions =
+    permissions.canCreateRecurringTransactions ?? true;
+
+  const groups: FinanceCommandActionGroup[] = [
+    {
+      heading: tCommand('create_group'),
+      id: 'create',
+      items: [
+        canCreateTransactions && {
+          description: tCommand('new_transaction_description'),
+          href: '/transactions?create=transaction',
+          icon: DollarSign,
+          id: 'new-transaction',
+          title: tFinance('new_transaction'),
+        },
+        canCreateTransactions && {
+          description: tCommand('new_transfer_description'),
+          href: '/transactions?create=transfer',
+          icon: ArrowLeftRight,
+          id: 'new-transfer',
+          title: tFinance('new_transfer'),
+        },
+        canCreateRecurringTransactions && {
+          description: tCommand('new_recurring_transaction_description'),
+          href: '/recurring?create=recurring',
+          icon: Repeat,
+          id: 'new-recurring-transaction',
+          title: tFinance('new_recurring_transaction'),
+        },
+        canCreateWallets && {
+          description: tCommand('new_wallet_description'),
+          href: '/wallets?create=wallet',
+          icon: Wallet,
+          id: 'new-wallet',
+          title: tFinance('new_wallet'),
+        },
+        canCreateWallets && {
+          description: tCommand('new_credit_card_description'),
+          href: '/wallets?create=credit-card',
+          icon: CreditCard,
+          id: 'new-credit-card',
+          title: tFinance('new_credit_card'),
+        },
+        canManageFinance && {
+          description: tCommand('new_budget_description'),
+          href: '/budgets?create=budget',
+          icon: Target,
+          id: 'new-budget',
+          title: tFinance('new_budget'),
+        },
+        canCreateInvoices && {
+          description: tCommand('new_invoice_description'),
+          href: '/invoices/new',
+          icon: FileText,
+          id: 'new-invoice',
+          title: tFinance('new_invoice'),
+        },
+        canCreateDebts && {
+          description: tCommand('new_debt_description'),
+          href: '/debts?create=debt',
+          icon: TrendingDown,
+          id: 'new-debt',
+          title: tFinance('new_debt'),
+        },
+        canCreateDebts && {
+          description: tCommand('new_loan_description'),
+          href: '/debts?create=loan',
+          icon: TrendingUp,
+          id: 'new-loan',
+          title: tFinance('new_loan'),
+        },
+        canManageFinance && {
+          description: tCommand('new_category_description'),
+          href: '/categories?create=category',
+          icon: CreditCard,
+          id: 'new-category',
+          title: tCommand('new_category'),
+        },
+        canManageFinance && {
+          description: tCommand('new_tag_description'),
+          href: '/categories?tab=tags&create=tag',
+          icon: Tag,
+          id: 'new-tag',
+          title: tCommand('new_tag'),
+        },
+      ].filter(Boolean) as FinanceCommandAction[],
+    },
+    {
+      heading: tCommand('tools_group'),
+      id: 'tools',
+      items: [
+        canCreateTransactions && {
+          description: tCommand('import_transactions_description'),
+          href: '/transactions?tool=import',
+          icon: Download,
+          id: 'import-transactions',
+          title: tCommand('import_transactions'),
+        },
+        permissions.canExportFinanceData && {
+          description: tCommand('export_transactions_description'),
+          href: '/transactions?tool=export',
+          icon: Upload,
+          id: 'export-transactions',
+          title: tCommand('export_transactions'),
+        },
+        permissions.canUpdateWallets && {
+          description: tCommand('all_wallet_check_description'),
+          href: '/wallets?tool=all-wallet-check',
+          icon: Calculator,
+          id: 'all-wallet-check',
+          title: tCommand('all_wallet_check'),
+        },
+        canCreateTransactions && {
+          description: tCommand('checkpoint_history_description'),
+          href: '/wallets?tool=checkpoint-history',
+          icon: History,
+          id: 'checkpoint-history',
+          title: tCommand('checkpoint_history'),
+        },
+        canManageFinance && {
+          description: tCommand('manage_categories_description'),
+          href: '/categories',
+          icon: CreditCard,
+          id: 'manage-categories',
+          title: tFinance('manage_categories'),
+        },
+      ].filter(Boolean) as FinanceCommandAction[],
+    },
+  ];
+
+  return groups.filter((group) => group.items.length > 0);
+}

package/src/components/ui/finance/command/finance-command-provider.test.tsx

@@ -0,0 +1,151 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FinanceRouteProvider } from '../finance-route-context';
+import { FinanceCommandProvider } from './finance-command-provider';
+
+const mocks = vi.hoisted(() => ({
+  listBudgets: vi.fn(),
+  listDebtLoans: vi.fn(),
+  listFinanceInvoices: vi.fn(),
+  listInfiniteTransactionsWithInternalApi: vi.fn(),
+  listInfiniteWallets: vi.fn(),
+  listRecurringTransactions: vi.fn(),
+  listTransactionCategories: vi.fn(),
+  listTransactionTags: vi.fn(),
+  push: vi.fn(),
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: mocks.push,
+  }),
+}));
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => {
+    const labels: Record<string, string> = {
+      create_group: 'Create',
+      description: 'Finance shortcuts',
+      empty: 'No commands',
+      finance: 'Finance',
+      new_transaction: 'New transaction',
+      new_transfer: 'New transfer',
+      quick_create_title: 'Quick create',
+      quick_placeholder: 'Create anything...',
+      recent_transactions: 'Recent transactions',
+      search_placeholder: 'Search finance...',
+      title: 'Finance command center',
+    };
+    return labels[key] ?? key;
+  },
+}));
+
+vi.mock('@tuturuuu/internal-api/finance', () => ({
+  listBudgets: (...args: Parameters<typeof mocks.listBudgets>) =>
+    mocks.listBudgets(...args),
+  listDebtLoans: (...args: Parameters<typeof mocks.listDebtLoans>) =>
+    mocks.listDebtLoans(...args),
+  listFinanceInvoices: (
+    ...args: Parameters<typeof mocks.listFinanceInvoices>
+  ) => mocks.listFinanceInvoices(...args),
+  listInfiniteWallets: (
+    ...args: Parameters<typeof mocks.listInfiniteWallets>
+  ) => mocks.listInfiniteWallets(...args),
+  listRecurringTransactions: (
+    ...args: Parameters<typeof mocks.listRecurringTransactions>
+  ) => mocks.listRecurringTransactions(...args),
+  listTransactionCategories: (
+    ...args: Parameters<typeof mocks.listTransactionCategories>
+  ) => mocks.listTransactionCategories(...args),
+  listTransactionTags: (
+    ...args: Parameters<typeof mocks.listTransactionTags>
+  ) => mocks.listTransactionTags(...args),
+}));
+
+vi.mock('../transactions/internal-api', () => ({
+  listInfiniteTransactionsWithInternalApi: (
+    ...args: Parameters<typeof mocks.listInfiniteTransactionsWithInternalApi>
+  ) => mocks.listInfiniteTransactionsWithInternalApi(...args),
+}));
+
+function renderProvider() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <FinanceRouteProvider prefix="/finance">
+        <FinanceCommandProvider
+          wsId="ws-1"
+          workspaceSlug="ws-1"
+          canCreateTransactions
+        />
+      </FinanceRouteProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('FinanceCommandProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    globalThis.ResizeObserver = class ResizeObserver {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+    Element.prototype.scrollIntoView = vi.fn();
+    mocks.listBudgets.mockResolvedValue([]);
+    mocks.listDebtLoans.mockResolvedValue([]);
+    mocks.listFinanceInvoices.mockResolvedValue({ data: [] });
+    mocks.listInfiniteTransactionsWithInternalApi.mockResolvedValue({
+      data: [],
+    });
+    mocks.listInfiniteWallets.mockResolvedValue({ data: [] });
+    mocks.listRecurringTransactions.mockResolvedValue([]);
+    mocks.listTransactionCategories.mockResolvedValue([]);
+    mocks.listTransactionTags.mockResolvedValue([]);
+  });
+
+  it('opens quick create with C and routes digit shortcuts', () => {
+    renderProvider();
+
+    fireEvent.keyDown(window, { key: 'c' });
+
+    expect(screen.getByText('New transaction')).toBeVisible();
+
+    fireEvent.keyDown(window, { key: '1' });
+
+    expect(mocks.push).toHaveBeenCalledWith(
+      '/ws-1/finance/transactions?create=transaction'
+    );
+  });
+
+  it('opens finance search with command-k and loads recent transactions', async () => {
+    mocks.listInfiniteTransactionsWithInternalApi.mockResolvedValue({
+      data: [
+        {
+          amount: -12,
+          description: 'Lunch',
+          id: 'tx-1',
+          taken_at: '2026-06-13T12:00:00.000Z',
+          wallet_currency: 'USD',
+          wallet_name: 'Cash',
+        },
+      ],
+    });
+
+    renderProvider();
+
+    fireEvent.keyDown(window, { key: 'k', metaKey: true });
+
+    expect(screen.getByPlaceholderText('Search finance...')).toBeVisible();
+    expect(await screen.findByText('Lunch')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,250 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  listBudgets,
+  listDebtLoans,
+  listFinanceInvoices,
+  listInfiniteWallets,
+  listRecurringTransactions,
+  listTransactionCategories,
+  listTransactionTags,
+} from '@tuturuuu/internal-api/finance';
+import type { QuickCommandCenterGroup } from '@tuturuuu/ui/quick-command-center';
+import { QuickCommandCenter } from '@tuturuuu/ui/quick-command-center';
+import { useRouter } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useFinanceHref } from '../finance-route-context';
+import { listInfiniteTransactionsWithInternalApi } from '../transactions/internal-api';
+import {
+  buildFinanceCommandActionGroups,
+  type FinanceCommandActionPermissions,
+  renderFinanceCommandActionIcon,
+} from './finance-command-actions';
+import { buildFinanceRecentCommandGroups } from './finance-command-results';
+
+interface FinanceCommandProviderProps extends FinanceCommandActionPermissions {
+  currency?: string;
+  workspaceSlug: string;
+  wsId: string;
+}
+
+type CommandMode = 'quick-create' | 'search';
+
+function isEditableTarget(target: EventTarget | null) {
+  return (
+    target instanceof HTMLElement &&
+    !!target.closest(
+      'input, textarea, select, [contenteditable="true"], [role="textbox"]'
+    )
+  );
+}
+
+export function FinanceCommandProvider({
+  currency = 'USD',
+  workspaceSlug,
+  wsId,
+  ...permissions
+}: FinanceCommandProviderProps) {
+  const router = useRouter();
+  const locale = useLocale();
+  const tCommand = useTranslations('finance-command-center');
+  const tFinance = useTranslations('finance');
+  const financeHref = useFinanceHref();
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<CommandMode>('quick-create');
+  const [search, setSearch] = useState('');
+  const trimmedSearch = search.trim();
+  const searchEnabled = open && mode === 'search';
+
+  const pushFinanceHref = useCallback(
+    (path: string) => {
+      setOpen(false);
+      setSearch('');
+      router.push(`/${workspaceSlug}${financeHref(path)}`);
+    },
+    [financeHref, router, workspaceSlug]
+  );
+
+  useEffect(() => {
+    const handleFinanceShortcut = (event: KeyboardEvent) => {
+      if (event.isComposing || isEditableTarget(event.target)) return;
+
+      if (
+        event.key.toLowerCase() === 'k' &&
+        (event.metaKey || event.ctrlKey) &&
+        !event.altKey
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        setMode('search');
+        setOpen(true);
+        return;
+      }
+
+      if (
+        event.key.toLowerCase() === 'c' &&
+        !(event.metaKey || event.ctrlKey || event.altKey)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        setMode('quick-create');
+        setOpen(true);
+      }
+    };
+
+    window.addEventListener('keydown', handleFinanceShortcut, {
+      capture: true,
+    });
+
+    return () =>
+      window.removeEventListener('keydown', handleFinanceShortcut, {
+        capture: true,
+      });
+  }, []);
+
+  const transactionsQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () =>
+      listInfiniteTransactionsWithInternalApi(wsId, {
+        limit: 6,
+        q: trimmedSearch || undefined,
+      }),
+    queryKey: ['finance-command-center', wsId, 'transactions', trimmedSearch],
+  });
+  const walletsQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () =>
+      listInfiniteWallets(wsId, {
+        limit: 6,
+        q: trimmedSearch || undefined,
+      }),
+    queryKey: ['finance-command-center', wsId, 'wallets', trimmedSearch],
+  });
+  const invoicesQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () =>
+      listFinanceInvoices(wsId, {
+        page: 1,
+        pageSize: 6,
+        q: trimmedSearch || undefined,
+      }),
+    queryKey: ['finance-command-center', wsId, 'invoices', trimmedSearch],
+  });
+  const budgetsQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () => listBudgets(wsId),
+    queryKey: ['finance-command-center', wsId, 'budgets'],
+  });
+  const debtsQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () => listDebtLoans(wsId),
+    queryKey: ['finance-command-center', wsId, 'debts'],
+  });
+  const recurringQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () => listRecurringTransactions(wsId),
+    queryKey: ['finance-command-center', wsId, 'recurring'],
+  });
+  const categoriesQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () => listTransactionCategories(wsId),
+    queryKey: ['finance-command-center', wsId, 'categories'],
+  });
+  const tagsQuery = useQuery({
+    enabled: searchEnabled,
+    queryFn: () => listTransactionTags(wsId),
+    queryKey: ['finance-command-center', wsId, 'tags'],
+  });
+
+  const actionGroups = useMemo<QuickCommandCenterGroup[]>(
+    () =>
+      buildFinanceCommandActionGroups({
+        permissions,
+        tCommand,
+        tFinance,
+      }).map((group) => ({
+        heading: group.heading,
+        id: group.id,
+        items: group.items.map((action) => ({
+          description: action.description,
+          icon: renderFinanceCommandActionIcon(action),
+          id: action.id,
+          keywords: [action.href],
+          onSelect: () => pushFinanceHref(action.href),
+          title: action.title,
+        })),
+      })),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `permissions` is the rest-spread of stable boolean props; its identity churns each render but the memo body is a cheap synchronous mapping.
+    [permissions, pushFinanceHref, tCommand, tFinance]
+  );
+
+  const recentGroups = useMemo<QuickCommandCenterGroup[]>(() => {
+    if (mode !== 'search') return [];
+
+    return buildFinanceRecentCommandGroups({
+      budgets: budgetsQuery.data,
+      categories: categoriesQuery.data,
+      currency,
+      debts: debtsQuery.data,
+      invoices: invoicesQuery.data?.data,
+      locale,
+      pushFinanceHref,
+      recurring: recurringQuery.data,
+      search: trimmedSearch,
+      tags: tagsQuery.data,
+      tCommand,
+      tFinance,
+      transactions: transactionsQuery.data?.data,
+      wallets: walletsQuery.data?.data,
+    });
+  }, [
+    budgetsQuery.data,
+    categoriesQuery.data,
+    currency,
+    debtsQuery.data,
+    invoicesQuery.data,
+    locale,
+    mode,
+    pushFinanceHref,
+    recurringQuery.data,
+    tagsQuery.data,
+    tCommand,
+    tFinance,
+    transactionsQuery.data,
+    trimmedSearch,
+    walletsQuery.data,
+  ]);
+
+  const groups =
+    mode === 'quick-create' ? actionGroups : [...actionGroups, ...recentGroups];
+
+  return (
+    <QuickCommandCenter
+      digitShortcuts={mode === 'quick-create'}
+      emptyLabel={tCommand('empty')}
+      groups={groups}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) setSearch('');
+      }}
+      onSearchValueChange={setSearch}
+      open={open}
+      placeholder={
+        mode === 'quick-create'
+          ? tCommand('quick_placeholder')
+          : tCommand('search_placeholder')
+      }
+      searchValue={search}
+      title={
+        mode === 'quick-create'
+          ? tCommand('quick_create_title')
+          : tCommand('title')
+      }
+      description={tCommand('description')}
+    />
+  );
+}