@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/custom/settings-dialog-shell.tsx

@@ -53,10 +53,11 @@ import {
   SidebarProvider,
 } from '@tuturuuu/ui/sidebar';
 import { cn } from '@tuturuuu/utils/format';
-import { removeAccents } from '@tuturuuu/utils/text-helper';
 import { useTranslations } from 'next-intl';
 import type { ComponentType, KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
+import type { createSettingsSearchEngine } from './settings-dialog-search';
+import { loadSettingsSearchEngine } from './settings-dialog-search-loader';
 
 export interface SettingsNavItem {
   name: string;
@@ -65,6 +66,8 @@ export interface SettingsNavItem {
   description?: string;
   disabled?: boolean;
   keywords?: string[];
+  aliases?: string[];
+  searchLabels?: string[];
 }
 
 export interface SettingsNavGroup {
@@ -93,6 +96,9 @@ export interface SettingsDialogShellProps {
   children: ReactNode;
 }
 
+type SettingsSearchEngine = ReturnType<typeof createSettingsSearchEngine>;
+type SettingsSearchEngineFactory = typeof createSettingsSearchEngine;
+
 function isEditableShortcutTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
 
@@ -127,12 +133,20 @@ export function SettingsDialogShell({
   const isMobile = useIsMobile();
   const desktopSearchInputRef = useRef<HTMLInputElement>(null);
   const mobileSearchInputRef = useRef<HTMLInputElement>(null);
+  const searchEngineLoadRef = useRef<Promise<void> | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
+  const [searchEngineFactory, setSearchEngineFactory] =
+    useState<SettingsSearchEngineFactory | null>(null);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  const searchEngine = useMemo<SettingsSearchEngine | null>(
+    () => searchEngineFactory?.(navItems) ?? null,
+    [navItems, searchEngineFactory]
+  );
+
   const allNavItems = useMemo(
-    () => navItems.flatMap((group) => group.items),
-    [navItems]
+    () => searchEngine?.allItems ?? navItems.flatMap((group) => group.items),
+    [navItems, searchEngine]
   );
 
   const activeGroup = navItems.find((group) =>
@@ -144,26 +158,39 @@ export function SettingsDialogShell({
     allNavItems.find((item) => !item.disabled) ||
     allNavItems[0];
 
-  const filteredNavItems = navItems
-    .map((group) => {
-      const normalizedQuery = removeAccents(searchQuery.toLowerCase());
-      const filteredItems = group.items.filter(
-        (item) =>
-          removeAccents(item.label.toLowerCase()).includes(normalizedQuery) ||
-          (item.description &&
-            removeAccents(item.description.toLowerCase()).includes(
-              normalizedQuery
-            )) ||
-          item.keywords?.some((keyword) =>
-            removeAccents(keyword.toLowerCase()).includes(normalizedQuery)
-          )
-      );
-      return { ...group, items: filteredItems };
-    })
-    .filter((group) => group.items.length > 0);
+  const ensureSearchEngine = useCallback(() => {
+    if (searchEngineFactory || searchEngineLoadRef.current) return;
+
+    searchEngineLoadRef.current = loadSettingsSearchEngine()
+      .then((module) => {
+        setSearchEngineFactory(() => module.createSettingsSearchEngine);
+      })
+      .finally(() => {
+        searchEngineLoadRef.current = null;
+      });
+  }, [searchEngineFactory]);
 
-  const filteredEnabledItems = filteredNavItems.flatMap((group) =>
-    group.items.filter((item) => !item.disabled)
+  const filteredNavItems = useMemo(
+    () =>
+      searchQuery ? (searchEngine?.search(searchQuery) ?? navItems) : navItems,
+    [navItems, searchEngine, searchQuery]
+  );
+
+  const filteredEnabledItems = useMemo(
+    () =>
+      searchEngine?.getEnabledItems(searchQuery) ??
+      filteredNavItems.flatMap((group) =>
+        group.items.filter((item) => !item.disabled)
+      ),
+    [filteredNavItems, searchEngine, searchQuery]
+  );
+
+  const updateSearchQuery = useCallback(
+    (value: string) => {
+      if (value) ensureSearchEngine();
+      setSearchQuery(value);
+    },
+    [ensureSearchEngine]
   );
 
   const isGroupExpandedByDefault = (groupLabel: string, index: number) => {
@@ -175,14 +202,16 @@ export function SettingsDialogShell({
   const focusSearch = useCallback(() => {
     if (isMobile) {
       setMobileNavOpen(true);
+      ensureSearchEngine();
       requestAnimationFrame(() => {
         mobileSearchInputRef.current?.focus();
       });
       return;
     }
 
+    ensureSearchEngine();
     desktopSearchInputRef.current?.focus();
-  }, [isMobile]);
+  }, [ensureSearchEngine, isMobile]);
 
   const changeActiveItem = useCallback(
     (targetIndex: number) => {
@@ -273,7 +302,8 @@ export function SettingsDialogShell({
 
   return (
     <DialogContent
-      className="top-0 left-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none"
+      presentation="fullscreen"
+      className="flex-col"
       onKeyDown={handleKeyboardNavigation}
       showCloseButton={false}
     >
@@ -304,7 +334,8 @@ export function SettingsDialogShell({
                 placeholder={t('settings.search_settings_placeholder')}
                 className="bg-background pl-8"
                 value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={(e) => updateSearchQuery(e.target.value)}
+                onFocus={ensureSearchEngine}
               />
             </div>
           </SidebarHeader>
@@ -402,22 +433,28 @@ export function SettingsDialogShell({
                         {t('search.search')}
                       </DrawerDescription>
                     </DrawerHeader>
-                    <Command className="rounded-none border-0">
+                    <Command
+                      className="rounded-none border-0"
+                      shouldFilter={false}
+                    >
                       <CommandInput
                         ref={mobileSearchInputRef}
+                        value={searchQuery}
+                        onFocus={ensureSearchEngine}
+                        onValueChange={updateSearchQuery}
                         placeholder={t('settings.search_settings_placeholder')}
                       />
                       <CommandList className="max-h-[50vh]">
                         <CommandEmpty>
                           {t('common.no_results_found')}
                         </CommandEmpty>
-                        {navItems.map((group) => (
+                        {filteredNavItems.map((group) => (
                           <CommandGroup key={group.label} heading={group.label}>
                             {group.items.map((item) => (
                               <CommandItem
                                 disabled={item.disabled}
                                 key={item.name}
-                                value={`${group.label} ${item.label} ${item.keywords?.join(' ') || ''}`}
+                                value={`${group.label} ${item.label} ${item.description || ''} ${item.keywords?.join(' ') || ''} ${item.aliases?.join(' ') || ''} ${item.searchLabels?.join(' ') || ''}`}
                                 onSelect={() => {
                                   if (item.disabled) return;
                                   onActiveTabChange(item.name);

package/src/components/ui/custom/theme-toggle.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Moon, Sun } from '@tuturuuu/icons';
+import { Moon, Sun } from '@tuturuuu/icons/lucide-static';
 import { Button } from '@tuturuuu/ui/button';
 import { cn } from '@tuturuuu/utils/format';
 import { useTheme } from 'next-themes';

package/src/components/ui/custom/workspace-select-helpers.ts

@@ -18,3 +18,26 @@ export function mergeWorkspaceSelectWorkspaces(
 
   return [...workspaceList, currentWorkspaceFallback];
 }
+
+export function normalizeWorkspaceSwitchPath(
+  pathname: string,
+  nextSlug: string
+) {
+  const taskBoardsPath = `/${nextSlug}/tasks/boards`;
+
+  if (
+    pathname === taskBoardsPath ||
+    pathname.startsWith(`${taskBoardsPath}/`)
+  ) {
+    return `/${nextSlug}/tasks`;
+  }
+
+  const uuidRegex =
+    /\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[0-9a-fA-F]{32})$/;
+
+  if (uuidRegex.test(pathname) && pathname !== `/${nextSlug}`) {
+    return pathname.replace(uuidRegex, '');
+  }
+
+  return pathname;
+}

package/src/components/ui/custom/workspace-select.tsx

@@ -23,9 +23,9 @@ import {
   toWorkspaceSlug,
 } from '@tuturuuu/utils/constants';
 import { cn } from '@tuturuuu/utils/format';
-import { getInitials } from '@tuturuuu/utils/name-helper';
 import { workspaceHandleSchema } from '@tuturuuu/utils/workspace-handle';
 import { WORKSPACE_LIMIT_ERROR_CODE } from '@tuturuuu/utils/workspace-limits';
+import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
@@ -66,7 +66,10 @@ import {
 import { Input } from '../input';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
-import { mergeWorkspaceSelectWorkspaces } from './workspace-select-helpers';
+import {
+  mergeWorkspaceSelectWorkspaces,
+  normalizeWorkspaceSwitchPath,
+} from './workspace-select-helpers';
 
 const FormSchema = z.object({
   name: z.string().min(1).max(100),
@@ -98,6 +101,7 @@ function WorkspaceIcon({
     avatarUrl,
     fallbackLogoUrl
   );
+  const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
 
   return (
     <Avatar
@@ -124,11 +128,15 @@ function WorkspaceIcon({
           resolvedAvatarUrl ? 'rounded-xs' : 'rounded-sm'
         )}
       >
-        <AvatarImage
+        <Image
+          alt=""
+          aria-hidden="true"
           className="h-full w-full object-cover"
+          height={20}
           src={fallbackLogoUrl}
+          unoptimized={shouldSkipFallbackOptimization}
+          width={20}
         />
-        {name ? getInitials(name) : '?'}
       </AvatarFallback>
     </Avatar>
   );
@@ -433,22 +441,20 @@ export function WorkspaceSelect({
     const selectedTeam = groups
       .flatMap((group) => group.teams)
       .find((team) => team.value === nextSlug);
-    let newPathname =
-      selectedTeam?.accessType === 'guest' && selectedTeam.guestLandingPath
-        ? `/${nextSlug}${selectedTeam.guestLandingPath}`
-        : pathname
-          ? (resolveNextPathname?.({
-              currentPathname: pathname,
-              nextSlug,
-            }) ?? pathname.replace(/^\/[^/]+/, `/${nextSlug}`))
-          : undefined;
+    const usesGuestLandingPath =
+      selectedTeam?.accessType === 'guest' && selectedTeam.guestLandingPath;
+    let newPathname = usesGuestLandingPath
+      ? `/${nextSlug}${selectedTeam.guestLandingPath}`
+      : pathname
+        ? (resolveNextPathname?.({
+            currentPathname: pathname,
+            nextSlug,
+          }) ?? pathname.replace(/^\/[^/]+/, `/${nextSlug}`))
+        : undefined;
+    if (newPathname && !usesGuestLandingPath) {
+      newPathname = normalizeWorkspaceSwitchPath(newPathname, nextSlug);
+    }
     if (newPathname) {
-      // Regex to match a UUID at the end of the string, with or without dashes
-      const uuidRegex =
-        /\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}|[0-9a-fA-F]{32})$/;
-      // Remove the UUID if present, and the current path is not /:wsId
-      if (uuidRegex.test(newPathname) && newPathname !== `/${nextSlug}`)
-        newPathname = newPathname.replace(uuidRegex, '');
       router.push(newPathname);
     }
   };

package/src/components/ui/dialog.test.tsx

@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it } from 'vitest';
+import { Dialog, DialogContent, DialogTitle } from './dialog';
+
+function renderOpenDialog(children: ReactNode) {
+  return render(<Dialog open>{children}</Dialog>);
+}
+
+describe('DialogContent presentation', () => {
+  it('keeps the default centered dialog animation classes', () => {
+    renderOpenDialog(
+      <DialogContent>
+        <DialogTitle>Default dialog</DialogTitle>
+      </DialogContent>
+    );
+
+    const dialog = screen.getByRole('dialog', { name: 'Default dialog' });
+    const className = dialog.getAttribute('class') ?? '';
+
+    expect(className).toContain('top-[50%]');
+    expect(className).toContain('left-[50%]');
+    expect(className).toContain('data-[state=open]:animate-in');
+    expect(className).toContain('data-[state=open]:fade-in-0');
+    expect(className).toContain('data-[state=open]:zoom-in-95');
+    expect(dialog).toHaveClass('rounded-lg');
+  });
+
+  it('renders fullscreen content as an opaque non-animated viewport surface', () => {
+    renderOpenDialog(
+      <DialogContent presentation="fullscreen">
+        <DialogTitle>Fullscreen dialog</DialogTitle>
+      </DialogContent>
+    );
+
+    const dialog = screen.getByRole('dialog', { name: 'Fullscreen dialog' });
+    const className = dialog.getAttribute('class') ?? '';
+
+    expect(dialog).toHaveClass('fixed');
+    expect(dialog).toHaveClass('inset-0');
+    expect(dialog).toHaveClass('h-dvh');
+    expect(dialog).toHaveClass('max-h-dvh');
+    expect(dialog).toHaveClass('w-screen');
+    expect(dialog).toHaveClass('max-w-none');
+    expect(dialog).toHaveClass('bg-background');
+    expect(dialog).toHaveClass('rounded-none');
+    expect(dialog).toHaveClass('border-0');
+    expect(dialog).toHaveClass('shadow-none');
+    expect(className).not.toMatch(/animate-in|fade-in|zoom-in|slide-in/);
+  });
+});

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from '@tuturuuu/icons';
+import { XIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 
@@ -51,9 +51,11 @@ function DialogContent({
   children,
   role = 'dialog',
   showCloseButton = true,
+  presentation = 'default',
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  presentation?: 'default' | 'fullscreen';
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -62,7 +64,9 @@ function DialogContent({
         data-slot="dialog-content"
         role={role}
         className={cn(
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
+          presentation === 'fullscreen'
+            ? 'fixed inset-0 z-50 flex h-dvh max-h-dvh w-screen max-w-none gap-0 overflow-hidden rounded-none border-0 bg-background p-0 shadow-none'
+            : 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg',
           className
         )}
         onClick={(e) => e.stopPropagation()}

package/src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@tuturuuu/icons';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CircleIcon,
+} from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/finance/debts/debt-loan-form.tsx

@@ -9,6 +9,10 @@ import type {
   InterestCalculationType,
 } from '@tuturuuu/types/primitives/DebtLoan';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import {
+  resolveSupportedCurrency,
+  SUPPORTED_CURRENCIES,
+} from '@tuturuuu/utils/currencies';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -36,6 +40,7 @@ interface Props {
   data?: DebtLoan;
   wallets?: Wallet[];
   defaultType?: DebtLoanType;
+  defaultCurrency?: string;
   onFinish?: (data: DebtLoanFormData) => void;
   onCancel?: () => void;
 }
@@ -45,12 +50,14 @@ export function DebtLoanForm({
   data,
   wallets = [],
   defaultType = 'debt',
+  defaultCurrency,
   onFinish,
   onCancel,
 }: Props) {
   const t = useTranslations('ws-debt-loan');
   const [loading, setLoading] = useState(false);
   const formSchema = createDebtLoanFormSchema(t);
+  const workspaceCurrency = resolveSupportedCurrency(defaultCurrency);
 
   const form = useForm<DebtLoanFormValues>({
     resolver: zodResolver(formSchema),
@@ -60,7 +67,7 @@ export function DebtLoanForm({
       counterparty: data?.counterparty || '',
       type: (data?.type || defaultType) as DebtLoanType,
       principal_amount: data?.principal_amount || 0,
-      currency: data?.currency || 'VND',
+      currency: data?.currency || workspaceCurrency,
       interest_rate: data?.interest_rate ?? undefined,
       interest_type: (data?.interest_type || undefined) as
         | InterestCalculationType
@@ -226,10 +233,10 @@ export function DebtLoanForm({
                 <SelectField
                   id="currency"
                   placeholder={t('select_currency')}
-                  options={[
-                    { value: 'VND', label: 'VND' },
-                    { value: 'USD', label: 'USD' },
-                  ]}
+                  options={SUPPORTED_CURRENCIES.map((currency) => ({
+                    value: currency.code,
+                    label: `${currency.code} - ${currency.name}`,
+                  }))}
                   classNames={{ selectTrigger: 'w-full' }}
                   value={field.value}
                   onValueChange={field.onChange}

package/src/components/ui/finance/debts/debt-loan-summary.tsx

@@ -8,6 +8,7 @@ import {
   TrendingUp,
 } from '@tuturuuu/icons';
 import type { DebtLoanSummary } from '@tuturuuu/types/primitives/DebtLoan';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { useFinanceHref } from '../finance-route-context';
@@ -22,8 +23,8 @@ interface Props {
 
 export function DebtLoanSummaryCards({
   summary,
-  currency = 'VND',
-  locale = 'vi-VN',
+  currency = 'USD',
+  locale = getCurrencyLocale(currency),
   wsId,
 }: Props) {
   const t = useTranslations('ws-debt-loan');

package/src/components/ui/finance/debts/debts-page.test.tsx

@@ -5,6 +5,8 @@ import { DebtsPage } from './debts-page';
 
 const mocks = vi.hoisted(() => ({
   debtLoanForm: vi.fn(),
+  debtLoanList: vi.fn(),
+  debtLoanSummaryCards: vi.fn(),
   getDebtLoanSummary: vi.fn(),
   listDebtLoans: vi.fn(),
   listWallets: vi.fn(),
@@ -31,15 +33,22 @@ vi.mock('./debt-loan-form', () => ({
 }));
 
 vi.mock('./debt-loan-list', () => ({
-  DebtLoanList: () => null,
+  DebtLoanList: (props: unknown) => {
+    mocks.debtLoanList(props);
+    return null;
+  },
 }));
 
 vi.mock('./debt-loan-summary', () => ({
-  DebtLoanSummaryCards: () => null,
+  DebtLoanSummaryCards: (props: unknown) => {
+    mocks.debtLoanSummaryCards(props);
+    return null;
+  },
 }));
 
 function renderDebtsPage(
-  searchParams: { create?: string; type?: string } = {}
+  searchParams: { create?: string; type?: string } = {},
+  props: { currency?: string } = {}
 ) {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -51,7 +60,11 @@ function renderDebtsPage(
 
   return render(
     <QueryClientProvider client={queryClient}>
-      <DebtsPage wsId="ws-1" searchParams={searchParams} />
+      <DebtsPage
+        wsId="ws-1"
+        searchParams={searchParams}
+        currency={props.currency}
+      />
     </QueryClientProvider>
   );
 }
@@ -83,15 +96,51 @@ describe('debts page', () => {
   });
 
   it('opens the loan create dialog from query state', async () => {
-    renderDebtsPage({ create: 'loan' });
+    renderDebtsPage({ create: 'loan' }, { currency: 'SGD' });
 
     await waitFor(() => {
       expect(mocks.debtLoanForm).toHaveBeenCalledWith(
         expect.objectContaining({
+          defaultCurrency: 'SGD',
           defaultType: 'loan',
           wsId: 'ws-1',
         })
       );
     });
   });
+
+  it('passes workspace currency to summary without overriding list row currencies', async () => {
+    mocks.listDebtLoans.mockResolvedValueOnce([
+      {
+        currency: 'USD',
+        id: 'debt-1',
+        name: 'USD Debt',
+        status: 'active',
+        type: 'debt',
+      },
+    ]);
+
+    renderDebtsPage({}, { currency: 'SGD' });
+
+    await waitFor(() => {
+      expect(mocks.debtLoanSummaryCards).toHaveBeenCalledWith(
+        expect.objectContaining({
+          currency: 'SGD',
+          locale: 'en-SG',
+        })
+      );
+      expect(mocks.debtLoanList).toHaveBeenCalledWith(
+        expect.not.objectContaining({
+          currency: expect.anything(),
+        })
+      );
+      expect(mocks.debtLoanList).toHaveBeenCalledWith(
+        expect.objectContaining({
+          debtLoans: expect.arrayContaining([
+            expect.objectContaining({ currency: 'USD' }),
+          ]),
+        })
+      );
+    });
+  });
 });

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

@@ -13,6 +13,10 @@ import type {
   DebtLoanWithBalance,
 } from '@tuturuuu/types/primitives/DebtLoan';
 import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import {
+  getCurrencyLocale,
+  resolveSupportedCurrency,
+} from '@tuturuuu/utils/currencies';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { Button } from '../../button';
@@ -37,11 +41,14 @@ interface Props {
     create?: string;
     type?: string;
   };
+  currency?: string;
 }
 
-export function DebtsPage({ wsId, searchParams }: Props) {
+export function DebtsPage({ wsId, searchParams, currency }: Props) {
   const t = useTranslations('ws-debt-loan');
   const queryClient = useQueryClient();
+  const workspaceCurrency = resolveSupportedCurrency(currency);
+  const workspaceCurrencyLocale = getCurrencyLocale(workspaceCurrency);
   const requestedCreateType =
     searchParams?.create === 'loan'
       ? 'loan'
@@ -135,7 +142,12 @@ export function DebtsPage({ wsId, searchParams }: Props) {
           ))}
         </div>
       ) : summary ? (
-        <DebtLoanSummaryCards summary={summary} wsId={wsId} />
+        <DebtLoanSummaryCards
+          summary={summary}
+          wsId={wsId}
+          currency={workspaceCurrency}
+          locale={workspaceCurrencyLocale}
+        />
       ) : null}
 
       <Separator />
@@ -220,6 +232,7 @@ export function DebtsPage({ wsId, searchParams }: Props) {
             wsId={wsId}
             wallets={wallets}
             defaultType={defaultCreateType}
+            defaultCurrency={workspaceCurrency}
             onFinish={handleFormFinish}
             onCancel={() => setIsCreateDialogOpen(false)}
           />

package/src/components/ui/finance/invoices/components/subscription-group-selector.tsx

@@ -6,7 +6,6 @@ import {
   ChevronDown,
   Loader2,
 } from '@tuturuuu/icons';
-import type { Database } from '@tuturuuu/types';
 import {
   Card,
   CardContent,
@@ -29,6 +28,7 @@ import {
   getSubscriptionCoverageInvoiceForGroup,
   isSubscriptionMonthPaidForGroup,
   parseLocalCalendarDate,
+  type WorkspaceUserGroup,
 } from '../utils';
 
 type LatestInvoice = {
@@ -38,9 +38,7 @@ type LatestInvoice = {
 };
 
 type UserGroupItem = {
-  workspace_user_groups:
-    | Database['public']['Tables']['workspace_user_groups']['Row']
-    | null;
+  workspace_user_groups: WorkspaceUserGroup | null;
 };
 
 function hasSchedule(group: UserGroupItem['workspace_user_groups']): boolean {
@@ -84,7 +82,7 @@ function GroupRow({
   onToggle,
   t,
 }: {
-  group: Database['public']['Tables']['workspace_user_groups']['Row'];
+  group: WorkspaceUserGroup;
   isSelected: boolean;
   isMonthPaid: boolean;
   latestInvoice: LatestInvoice | undefined;