@tuturuuu/ui 0.14.0 → 0.16.0

package/src/components/ui/finance/invoices/civil-month.ts

@@ -0,0 +1,224 @@
+const MONTH_VALUE_PATTERN = /^(\d{4})-(\d{2})$/;
+const DATE_VALUE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})(?:$|[T\s])/;
+
+export const MAX_PREPAID_MONTH_COUNT = 12;
+export const PREPAID_MONTH_OPTION_HORIZON = 12;
+
+type CivilDateParts = {
+  day: number;
+  month: number;
+  year: number;
+};
+
+const invalidDate = () => new Date(Number.NaN);
+
+const getDaysInMonth = (year: number, month: number) =>
+  new Date(year, month, 0).getDate();
+
+const isValidCivilDate = ({ day, month, year }: CivilDateParts) =>
+  Number.isInteger(year) &&
+  Number.isInteger(month) &&
+  Number.isInteger(day) &&
+  month >= 1 &&
+  month <= 12 &&
+  day >= 1 &&
+  day <= getDaysInMonth(year, month);
+
+const parseCivilDateParts = (
+  value: string | Date | null | undefined
+): CivilDateParts | null => {
+  if (!value) return null;
+
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) return null;
+    return {
+      day: value.getDate(),
+      month: value.getMonth() + 1,
+      year: value.getFullYear(),
+    };
+  }
+
+  const trimmed = value.trim();
+  const monthMatch = MONTH_VALUE_PATTERN.exec(trimmed);
+  if (monthMatch) {
+    const [, year, month] = monthMatch;
+    const parts = {
+      day: 1,
+      month: Number(month),
+      year: Number(year),
+    };
+    return isValidCivilDate(parts) ? parts : null;
+  }
+
+  const dateMatch = DATE_VALUE_PATTERN.exec(trimmed);
+  if (dateMatch) {
+    const [, year, month, day] = dateMatch;
+    const parts = {
+      day: Number(day),
+      month: Number(month),
+      year: Number(year),
+    };
+    return isValidCivilDate(parts) ? parts : null;
+  }
+
+  return null;
+};
+
+const formatCivilMonthValue = (year: number, month: number) =>
+  `${year}-${String(month).padStart(2, '0')}`;
+
+export const parseLocalCalendarDate = (
+  value: string | Date | null | undefined
+): Date => {
+  const parts = parseCivilDateParts(value);
+  return parts
+    ? new Date(parts.year, parts.month - 1, parts.day)
+    : invalidDate();
+};
+
+export const getMonthStartDate = (
+  value: string | Date | null | undefined
+): Date => {
+  const date = parseLocalCalendarDate(value);
+  if (Number.isNaN(date.getTime())) {
+    return date;
+  }
+
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+export const formatMonthValue = (date: Date): string =>
+  formatCivilMonthValue(date.getFullYear(), date.getMonth() + 1);
+
+export const formatMonthLabel = (month: string, locale: string): string => {
+  const date = getMonthStartDate(month);
+  if (Number.isNaN(date.getTime())) {
+    return month;
+  }
+
+  return date.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+  });
+};
+
+export const addMonthsToMonthValue = (
+  month: string,
+  monthOffset: number
+): string => {
+  const parts = parseCivilDateParts(month);
+  if (!parts) return month;
+
+  const totalMonthIndex = parts.year * 12 + (parts.month - 1) + monthOffset;
+  const year = Math.floor(totalMonthIndex / 12);
+  const monthNumber = (totalMonthIndex % 12) + 1;
+
+  return formatCivilMonthValue(year, monthNumber);
+};
+
+export const normalizePrepaidMonthCount = (
+  value: number | null | undefined
+): number => {
+  if (!Number.isFinite(value) || !value) return 1;
+
+  return Math.min(MAX_PREPAID_MONTH_COUNT, Math.max(1, Math.trunc(value)));
+};
+
+export const getCoverageMonths = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string[] => {
+  const monthCount = normalizePrepaidMonthCount(prepaidMonthCount);
+  const startMonth = parseCivilDateParts(selectedMonth);
+  if (!startMonth) return [];
+
+  return Array.from({ length: monthCount }, (_, index) =>
+    addMonthsToMonthValue(selectedMonth, index)
+  );
+};
+
+export const getCoverageEndMonthValue = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string => {
+  const coverageMonths = getCoverageMonths(selectedMonth, prepaidMonthCount);
+  return coverageMonths[coverageMonths.length - 1] ?? selectedMonth;
+};
+
+export const getCoverageValidUntilMonthValue = (
+  selectedMonth: string,
+  prepaidMonthCount = 1
+): string => addMonthsToMonthValue(selectedMonth, prepaidMonthCount);
+
+export const formatCoverageRangeLabel = ({
+  locale,
+  prepaidMonthCount,
+  selectedMonth,
+}: {
+  locale: string;
+  prepaidMonthCount?: number | null;
+  selectedMonth: string;
+}): string => {
+  const coverageMonths = getCoverageMonths(
+    selectedMonth,
+    prepaidMonthCount ?? 1
+  );
+  const firstMonth = coverageMonths[0];
+  const lastMonth = coverageMonths[coverageMonths.length - 1];
+
+  if (!firstMonth || !lastMonth || firstMonth === lastMonth) {
+    return formatMonthLabel(selectedMonth, locale);
+  }
+
+  return `${formatMonthLabel(firstMonth, locale)} - ${formatMonthLabel(
+    lastMonth,
+    locale
+  )}`;
+};
+
+export const resolveBillingTimezone = (
+  timezone: string | null | undefined
+): string => {
+  const trimmed = timezone?.trim();
+  if (!trimmed || trimmed === 'auto') return 'UTC';
+
+  try {
+    new Intl.DateTimeFormat('en-US', { timeZone: trimmed }).format(new Date(0));
+    return trimmed;
+  } catch {
+    return 'UTC';
+  }
+};
+
+export const getCurrentBillingDate = (
+  timezone: string | null | undefined,
+  now = new Date()
+): Date => {
+  const resolvedTimezone = resolveBillingTimezone(timezone);
+  const parts = new Intl.DateTimeFormat('en-US', {
+    day: '2-digit',
+    month: '2-digit',
+    timeZone: resolvedTimezone,
+    year: 'numeric',
+  }).formatToParts(now);
+  const getPart = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((part) => part.type === type)?.value;
+  const year = Number(getPart('year'));
+  const month = Number(getPart('month'));
+  const day = Number(getPart('day'));
+  const civilDate = { day, month, year };
+
+  return isValidCivilDate(civilDate)
+    ? new Date(year, month - 1, day)
+    : invalidDate();
+};
+
+export const getCurrentMonthValue = (
+  timezone: string | null | undefined,
+  now = new Date()
+): string => formatMonthValue(getCurrentBillingDate(timezone, now));
+
+export const getCurrentMonthStartDate = (
+  timezone: string | null | undefined,
+  now = new Date()
+): Date => getMonthStartDate(getCurrentMonthValue(timezone, now));

package/src/components/ui/finance/invoices/components/subscription-invoice-proposal.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SubscriptionInvoiceProposal } from './subscription-invoice-proposal';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+vi.mock('../../shared/finance-display-amount', () => ({
+  FinanceDisplayAmount: ({ value }: { value: string }) => <span>{value}</span>,
+}));
+
+describe('SubscriptionInvoiceProposal', () => {
+  it('shows the suggested total and billable quantity before products load', () => {
+    render(
+      <SubscriptionInvoiceProposal
+        billableQuantity={3}
+        currency="VND"
+        currentTotal={0}
+        hasSelectedProducts={false}
+        suggestedTotal={1_500_000}
+      />
+    );
+
+    expect(screen.getByText(/1[,.]500[,.]000/)).toBeInTheDocument();
+    expect(
+      screen.getByText(/based_on_billable_quantity.*"count":3/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('ws-invoices.suggested_total_requires_products')
+    ).toBeInTheDocument();
+  });
+
+  it('warns when selected products calculate a different total', () => {
+    render(
+      <SubscriptionInvoiceProposal
+        currency="VND"
+        currentTotal={1_200_000}
+        hasSelectedProducts
+        suggestedTotal={1_500_000}
+      />
+    );
+
+    expect(
+      screen.getByText(/ws-invoices.suggested_total_mismatch/)
+    ).toBeInTheDocument();
+  });
+});

package/src/components/ui/finance/invoices/components/subscription-invoice-proposal.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { AlertTriangle, Calculator } from '@tuturuuu/icons';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { formatCurrency } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import { FinanceDisplayAmount } from '../../shared/finance-display-amount';
+
+interface SubscriptionInvoiceProposalProps {
+  billableQuantity?: number | null;
+  currency: string;
+  currentTotal: number;
+  hasSelectedProducts: boolean;
+  suggestedTotal: number;
+}
+
+export function SubscriptionInvoiceProposal({
+  billableQuantity,
+  currency,
+  currentTotal,
+  hasSelectedProducts,
+  suggestedTotal,
+}: SubscriptionInvoiceProposalProps) {
+  const t = useTranslations();
+  const totalsDiffer =
+    hasSelectedProducts && Math.abs(currentTotal - suggestedTotal) > 0.01;
+
+  return (
+    <Card className="overflow-hidden border-dynamic-blue/30 bg-dynamic-blue/5">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-dynamic-blue/15 text-dynamic-blue">
+            <Calculator className="h-4 w-4" />
+          </span>
+          {t('ws-invoices.invoice_proposal')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="flex items-end justify-between gap-4 rounded-lg border bg-background/80 p-4">
+          <div>
+            <p className="text-muted-foreground text-xs uppercase tracking-wide">
+              {t('ws-invoices.suggested_invoice_total')}
+            </p>
+            {billableQuantity != null && (
+              <p className="mt-1 text-muted-foreground text-sm">
+                {t('ws-invoices.based_on_billable_quantity', {
+                  count: billableQuantity,
+                })}
+              </p>
+            )}
+          </div>
+          <FinanceDisplayAmount
+            className="shrink-0 font-bold text-2xl text-dynamic-blue tabular-nums"
+            value={formatCurrency(suggestedTotal, currency)}
+          />
+        </div>
+
+        {!hasSelectedProducts && (
+          <div className="flex items-start gap-2 rounded-lg border border-dynamic-yellow/30 bg-dynamic-yellow/10 p-3 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-yellow" />
+            <p className="text-muted-foreground">
+              {t('ws-invoices.suggested_total_requires_products')}
+            </p>
+          </div>
+        )}
+
+        {totalsDiffer && (
+          <div className="flex items-start gap-2 rounded-lg border border-dynamic-yellow/30 bg-dynamic-yellow/10 p-3 text-sm">
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-yellow" />
+            <p className="text-muted-foreground">
+              {t('ws-invoices.suggested_total_mismatch', {
+                current: formatCurrency(currentTotal, currency),
+                suggested: formatCurrency(suggestedTotal, currency),
+              })}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/finance/invoices/hooks/use-subscription-auto-selection.ts

@@ -38,6 +38,7 @@ interface UseSubscriptionAutoSelectionProps {
   }[];
   onSelectedProductsChange: Dispatch<SetStateAction<SelectedProductItem[]>>;
   prepaidMonthCount?: number;
+  workspaceTimezone?: string | null;
 }
 
 export type UseSubscriptionAutoSelectionResult = undefined;
@@ -162,13 +163,15 @@ const computeGroupAttendanceDaysMap = (
   selectedMonth: string,
   userAttendance: { status: string; date: string; group_id?: string }[],
   useAttendanceBased: boolean,
-  prepaidMonthCount = 1
+  prepaidMonthCount = 1,
+  workspaceTimezone?: string | null
 ) => {
   return getBillableQuantityMapForGroupsRange({
     groupIds: selectedGroupIds,
     latestInvoices: latestSubscriptionInvoices,
     prepaidMonthCount,
     selectedMonth,
+    workspaceTimezone,
     useAttendanceBased,
     userAttendance,
     userGroups,
@@ -229,6 +232,7 @@ export function useSubscriptionAutoSelection({
   latestSubscriptionInvoices,
   onSelectedProductsChange,
   prepaidMonthCount = 1,
+  workspaceTimezone,
 }: UseSubscriptionAutoSelectionProps): UseSubscriptionAutoSelectionResult {
   const t = useTranslations();
   const previousGroupIdRef = useRef<string>('');
@@ -251,7 +255,8 @@ export function useSubscriptionAutoSelection({
         selectedMonth,
         userAttendance,
         useAttendanceBased,
-        prepaidMonthCount
+        prepaidMonthCount,
+        workspaceTimezone
       ),
     [
       sortedSelectedGroupIds,
@@ -261,6 +266,7 @@ export function useSubscriptionAutoSelection({
       userAttendance,
       useAttendanceBased,
       prepaidMonthCount,
+      workspaceTimezone,
     ]
   );
 

package/src/components/ui/finance/invoices/new-invoice-page.test.tsx

@@ -11,6 +11,7 @@ const invoiceMocks = vi.hoisted(() => ({
 
 const nuqsState = vi.hoisted(() => ({
   invoiceType: 'standard' as 'standard' | 'subscription',
+  values: new Map<string, number | null>(),
 }));
 
 vi.mock('next-intl', () => ({
@@ -23,7 +24,11 @@ vi.mock('nuqs', () => ({
       return [nuqsState.invoiceType, vi.fn()];
     }
 
-    if (key === 'amount') {
+    if (nuqsState.values.has(key)) {
+      return [nuqsState.values.get(key), vi.fn()];
+    }
+
+    if (['amount', 'billable_quantity', 'suggested_total'].includes(key)) {
       return [null, vi.fn()];
     }
 
@@ -80,11 +85,13 @@ describe('NewInvoicePage', () => {
     invoiceMocks.StandardInvoice.mockClear();
     invoiceMocks.SubscriptionInvoice.mockClear();
     nuqsState.invoiceType = 'standard';
+    nuqsState.values.clear();
     fetchMock = vi.fn().mockResolvedValue({
       ok: true,
       json: async () => ({
         DEFAULT_CURRENCY: 'SGD',
         DEFAULT_SUBSCRIPTION_CATEGORY_ID: 'category-1',
+        default_category_id: 'category-general',
         default_wallet_id: 'wallet-1',
       }),
     });
@@ -101,7 +108,7 @@ describe('NewInvoicePage', () => {
     await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(1));
 
     expect(fetchMock).toHaveBeenCalledWith(
-      '/api/v1/workspaces/ws-1/settings/configs?ids=default_wallet_id,DEFAULT_SUBSCRIPTION_CATEGORY_ID,DEFAULT_CURRENCY',
+      '/api/v1/workspaces/ws-1/settings/configs?ids=default_wallet_id,default_category_id,DEFAULT_SUBSCRIPTION_CATEGORY_ID,DEFAULT_CURRENCY',
       { cache: 'no-store' }
     );
     expect(invoiceMocks.StandardInvoice).toHaveBeenCalled();
@@ -110,6 +117,7 @@ describe('NewInvoicePage', () => {
     await waitFor(() =>
       expect(invoiceMocks.StandardInvoice).toHaveBeenLastCalledWith(
         expect.objectContaining({
+          defaultCategoryId: 'category-general',
           defaultCurrency: 'SGD',
           defaultWalletId: 'wallet-1',
         })
@@ -133,6 +141,86 @@ describe('NewInvoicePage', () => {
           defaultCategoryId: 'category-1',
           defaultCurrency: 'SGD',
           defaultWalletId: 'wallet-1',
+          workspaceTimezone: undefined,
+        })
+      )
+    );
+  });
+
+  it('forwards a pending invoice quantity and suggested monetary total', async () => {
+    nuqsState.invoiceType = 'subscription';
+    nuqsState.values.set('billable_quantity', 3);
+    nuqsState.values.set('suggested_total', 1_500_000);
+
+    renderPage();
+
+    await waitFor(() =>
+      expect(invoiceMocks.SubscriptionInvoice).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          prefillQuantity: 3,
+          suggestedTotal: 1_500_000,
+        })
+      )
+    );
+  });
+
+  it('keeps legacy amount links working as a quantity fallback', async () => {
+    nuqsState.invoiceType = 'subscription';
+    nuqsState.values.set('amount', 4);
+
+    renderPage();
+
+    await waitFor(() =>
+      expect(invoiceMocks.SubscriptionInvoice).toHaveBeenLastCalledWith(
+        expect.objectContaining({ prefillQuantity: 4 })
+      )
+    );
+  });
+
+  it('forwards server-seeded defaults and timezone before config refresh completes', async () => {
+    nuqsState.invoiceType = 'subscription';
+    fetchMock.mockReturnValueOnce(new Promise(() => {}));
+
+    renderPage({
+      defaultCurrency: 'VND',
+      initialDefaultCategoryId: 'category-general-server',
+      initialDefaultSubscriptionCategoryId: 'category-subscription-server',
+      initialDefaultWalletId: 'wallet-server',
+      workspaceTimezone: 'Asia/Ho_Chi_Minh',
+    });
+
+    await waitFor(() =>
+      expect(invoiceMocks.SubscriptionInvoice).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          defaultCategoryId: 'category-subscription-server',
+          defaultCurrency: 'VND',
+          defaultWalletId: 'wallet-server',
+          workspaceTimezone: 'Asia/Ho_Chi_Minh',
+        })
+      )
+    );
+  });
+
+  it('falls subscription invoice category back to the transaction default', async () => {
+    nuqsState.invoiceType = 'subscription';
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        DEFAULT_CURRENCY: 'SGD',
+        DEFAULT_SUBSCRIPTION_CATEGORY_ID: null,
+        default_category_id: 'category-general',
+        default_wallet_id: 'wallet-1',
+      }),
+    });
+
+    renderPage();
+
+    await waitFor(() =>
+      expect(invoiceMocks.SubscriptionInvoice).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          defaultCategoryId: 'category-general',
+          defaultCurrency: 'SGD',
+          defaultWalletId: 'wallet-1',
         })
       )
     );

package/src/components/ui/finance/invoices/new-invoice-page.tsx

@@ -27,6 +27,7 @@ import { SubscriptionInvoice } from './subscription-invoice';
 
 const INVOICE_DEFAULT_CONFIG_IDS = [
   'default_wallet_id',
+  'default_category_id',
   'DEFAULT_SUBSCRIPTION_CATEGORY_ID',
   'DEFAULT_CURRENCY',
 ] as const;
@@ -40,7 +41,11 @@ interface Props {
   canReadInvoiceProductStock?: boolean;
   canReadGroupLinkedProducts?: boolean;
   defaultCurrency?: string;
+  initialDefaultCategoryId?: string | null;
+  initialDefaultSubscriptionCategoryId?: string | null;
+  initialDefaultWalletId?: string | null;
   permissionRequestUser?: FinancePermissionRequestUser | null;
+  workspaceTimezone?: string | null;
 }
 
 export default function NewInvoicePage({
@@ -52,7 +57,11 @@ export default function NewInvoicePage({
   canReadInvoiceProductStock = true,
   canReadGroupLinkedProducts = true,
   defaultCurrency: workspaceDefaultCurrency,
+  initialDefaultCategoryId,
+  initialDefaultSubscriptionCategoryId,
+  initialDefaultWalletId,
   permissionRequestUser,
+  workspaceTimezone,
 }: Props) {
   const t = useTranslations();
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -63,20 +72,44 @@ export default function NewInvoicePage({
     serialize: (value) => value,
   });
 
-  const [prefillAmount] = useQueryState('amount', {
+  const [billableQuantity] = useQueryState('billable_quantity', {
     parse: (value) => {
       const parsed = Number(value);
       return Number.isFinite(parsed) ? parsed : null;
     },
   });
+  const [legacyPrefillAmount] = useQueryState('amount', {
+    parse: (value) => {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    },
+  });
+  const [suggestedTotal] = useQueryState('suggested_total', {
+    parse: (value) => {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+    },
+  });
 
-  const { data: defaultConfigs = {} } = useWorkspaceConfigs(
+  const { data: refreshedDefaultConfigs = {} } = useWorkspaceConfigs(
     wsId,
     INVOICE_DEFAULT_CONFIG_IDS
   );
+  const defaultConfigs = {
+    DEFAULT_CURRENCY: workspaceDefaultCurrency ?? null,
+    DEFAULT_SUBSCRIPTION_CATEGORY_ID:
+      initialDefaultSubscriptionCategoryId ?? null,
+    default_category_id: initialDefaultCategoryId ?? null,
+    default_wallet_id: initialDefaultWalletId ?? null,
+    ...refreshedDefaultConfigs,
+  };
   const defaultWalletId = defaultConfigs.default_wallet_id ?? undefined;
-  const defaultCategoryId =
+  const defaultTransactionCategoryId =
+    defaultConfigs.default_category_id ?? undefined;
+  const defaultSubscriptionCategoryId =
     defaultConfigs.DEFAULT_SUBSCRIPTION_CATEGORY_ID ?? undefined;
+  const defaultCategoryId =
+    defaultSubscriptionCategoryId ?? defaultTransactionCategoryId;
   const defaultCurrency = resolveSupportedCurrency(
     defaultConfigs.DEFAULT_CURRENCY,
     resolveSupportedCurrency(workspaceDefaultCurrency)
@@ -231,6 +264,7 @@ export default function NewInvoicePage({
             <StandardInvoice
               wsId={wsId}
               defaultWalletId={defaultWalletId}
+              defaultCategoryId={defaultTransactionCategoryId}
               defaultCurrency={defaultCurrency}
               canChangeFinanceWallets={canChangeFinanceWallets}
               canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
@@ -247,10 +281,12 @@ export default function NewInvoicePage({
           {invoiceType === 'subscription' ? (
             <SubscriptionInvoice
               wsId={wsId}
-              prefillAmount={prefillAmount}
+              prefillQuantity={billableQuantity ?? legacyPrefillAmount}
+              suggestedTotal={suggestedTotal}
               defaultWalletId={defaultWalletId}
               defaultCategoryId={defaultCategoryId}
               defaultCurrency={defaultCurrency}
+              workspaceTimezone={workspaceTimezone}
               canChangeFinanceWallets={canChangeFinanceWallets}
               canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
               canReadInvoiceProducts={canReadInvoiceProducts}

package/src/components/ui/finance/invoices/pending-columns.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { buildPendingInvoiceCreateUrl } from './pending-columns';
+
+describe('buildPendingInvoiceCreateUrl', () => {
+  it('carries both the billable quantity and suggested monetary total', () => {
+    const url = new URL(
+      buildPendingInvoiceCreateUrl({
+        attendanceDays: 3,
+        financePrefix: '',
+        groupIds: ['group-1', 'group-2'],
+        month: '2026-07',
+        potentialTotal: 1_500_000,
+        useAttendanceBased: true,
+        userId: 'user-1',
+        wsId: 'ws-1',
+      }),
+      'https://finance.test'
+    );
+
+    expect(url.pathname).toBe('/ws-1/invoices/new');
+    expect(url.searchParams.get('billable_quantity')).toBe('3');
+    expect(url.searchParams.get('suggested_total')).toBe('1500000');
+    expect(url.searchParams.get('amount')).toBeNull();
+    expect(url.searchParams.get('group_ids')).toBe('group-1,group-2');
+  });
+});