@tuturuuu/ui 0.9.0 → 0.11.0

package/src/components/ui/custom/settings/task-settings.tsx

@@ -1,6 +1,13 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  TASK_NAVIGATION_GOALS_CONFIG_ID,
+  TASK_NAVIGATION_IMPORT_CONFIG_ID,
+  TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID,
+  TASK_NAVIGATION_PROGRESS_CONFIG_ID,
+  TASK_NAVIGATION_STATS_CONFIG_ID,
+} from '@tuturuuu/internal-api/users';
 import type { Workspace } from '@tuturuuu/types';
 import { SettingItemTab } from '@tuturuuu/ui/custom/settings-item-tab';
 import {
@@ -85,6 +92,36 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     isLoading: showReviewDueDatesLoading,
     isPending: showReviewDueDatesPending,
   } = useUserBooleanConfig(TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID, false);
+  const {
+    value: showTaskProgressNavigation,
+    setValue: setShowTaskProgressNavigation,
+    isLoading: showTaskProgressNavigationLoading,
+    isPending: showTaskProgressNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_PROGRESS_CONFIG_ID, false);
+  const {
+    value: showTaskGoalsNavigation,
+    setValue: setShowTaskGoalsNavigation,
+    isLoading: showTaskGoalsNavigationLoading,
+    isPending: showTaskGoalsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_GOALS_CONFIG_ID, false);
+  const {
+    value: showTaskStatsNavigation,
+    setValue: setShowTaskStatsNavigation,
+    isLoading: showTaskStatsNavigationLoading,
+    isPending: showTaskStatsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_STATS_CONFIG_ID, false);
+  const {
+    value: showTaskLeaderboardsNavigation,
+    setValue: setShowTaskLeaderboardsNavigation,
+    isLoading: showTaskLeaderboardsNavigationLoading,
+    isPending: showTaskLeaderboardsNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID, false);
+  const {
+    value: showTaskImportNavigation,
+    setValue: setShowTaskImportNavigation,
+    isLoading: showTaskImportNavigationLoading,
+    isPending: showTaskImportNavigationPending,
+  } = useUserBooleanConfig(TASK_NAVIGATION_IMPORT_CONFIG_ID, false);
   const {
     value: soundEffectsEnabled,
     setValue: setSoundEffectsEnabled,
@@ -346,6 +383,73 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           />
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('navigation_progress')}
+          description={t('navigation_progress_description')}
+        >
+          <Switch
+            checked={showTaskProgressNavigation}
+            onCheckedChange={setShowTaskProgressNavigation}
+            disabled={
+              showTaskProgressNavigationLoading ||
+              showTaskProgressNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_goals')}
+          description={t('navigation_goals_description')}
+        >
+          <Switch
+            checked={showTaskGoalsNavigation}
+            onCheckedChange={setShowTaskGoalsNavigation}
+            disabled={
+              showTaskGoalsNavigationLoading || showTaskGoalsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_stats')}
+          description={t('navigation_stats_description')}
+        >
+          <Switch
+            checked={showTaskStatsNavigation}
+            onCheckedChange={setShowTaskStatsNavigation}
+            disabled={
+              showTaskStatsNavigationLoading || showTaskStatsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_leaderboards')}
+          description={t('navigation_leaderboards_description')}
+        >
+          <Switch
+            checked={showTaskLeaderboardsNavigation}
+            onCheckedChange={setShowTaskLeaderboardsNavigation}
+            disabled={
+              showTaskLeaderboardsNavigationLoading ||
+              showTaskLeaderboardsNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
+        <SettingItemTab
+          title={t('navigation_import')}
+          description={t('navigation_import_description')}
+        >
+          <Switch
+            checked={showTaskImportNavigation}
+            onCheckedChange={setShowTaskImportNavigation}
+            disabled={
+              showTaskImportNavigationLoading || showTaskImportNavigationPending
+            }
+          />
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('submit_shortcut')}
           description={t('submit_shortcut_description')}

package/src/components/ui/custom/settings-dialog-search-loader.d.ts

@@ -0,0 +1,5 @@
+import type { createSettingsSearchEngine } from './settings-dialog-search';
+
+export function loadSettingsSearchEngine(): Promise<{
+  createSettingsSearchEngine: typeof createSettingsSearchEngine;
+}>;

package/src/components/ui/custom/settings-dialog-search-loader.js

@@ -0,0 +1,3 @@
+export function loadSettingsSearchEngine() {
+  return import('./settings-dialog-search');
+}

package/src/components/ui/custom/settings-dialog-search.ts

@@ -0,0 +1,75 @@
+import { removeAccents } from '@tuturuuu/utils/text-helper';
+import type {
+  SettingsNavGroup,
+  SettingsNavItem,
+} from './settings-dialog-shell';
+
+type IndexedSettingsNavItem = {
+  groupLabel: string;
+  item: SettingsNavItem;
+  normalizedSearchText: string;
+};
+
+function normalizeSearchText(value: string) {
+  return removeAccents(value.toLowerCase());
+}
+
+function getItemSearchText(groupLabel: string, item: SettingsNavItem) {
+  return [
+    groupLabel,
+    item.name,
+    item.label,
+    item.description,
+    ...(item.keywords ?? []),
+    ...(item.aliases ?? []),
+    ...(item.searchLabels ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function createSettingsSearchEngine(navItems: SettingsNavGroup[]) {
+  const indexedItems: IndexedSettingsNavItem[] = navItems.flatMap((group) =>
+    group.items.map((item) => ({
+      groupLabel: group.label,
+      item,
+      normalizedSearchText: normalizeSearchText(
+        getItemSearchText(group.label, item)
+      ),
+    }))
+  );
+
+  const allItems = indexedItems.map(({ item }) => item);
+
+  function search(query: string) {
+    const normalizedQuery = normalizeSearchText(query.trim());
+    if (!normalizedQuery) return navItems;
+
+    const matchesByName = new Set(
+      indexedItems
+        .filter(({ normalizedSearchText }) =>
+          normalizedSearchText.includes(normalizedQuery)
+        )
+        .map(({ item }) => item.name)
+    );
+
+    return navItems
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => matchesByName.has(item.name)),
+      }))
+      .filter((group) => group.items.length > 0);
+  }
+
+  function getEnabledItems(query = '') {
+    return search(query)
+      .flatMap((group) => group.items)
+      .filter((item) => !item.disabled);
+  }
+
+  return {
+    allItems,
+    getEnabledItems,
+    search,
+  };
+}

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) => {
@@ -305,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>
@@ -403,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/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

@@ -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),
@@ -438,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/finance/invoices/components/subscription-attendance-summary.tsx

@@ -54,6 +54,8 @@ interface SubscriptionAttendanceSummaryProps {
   };
   totalSessions: number;
   attendanceRate: number;
+  coverageRangeLabel: string;
+  prepaidMonthCount: number;
 }
 
 export function SubscriptionAttendanceSummary({
@@ -73,6 +75,8 @@ export function SubscriptionAttendanceSummary({
   attendanceStats,
   totalSessions,
   attendanceRate,
+  coverageRangeLabel,
+  prepaidMonthCount,
 }: SubscriptionAttendanceSummaryProps): React.ReactElement {
   const t = useTranslations();
 
@@ -82,6 +86,8 @@ export function SubscriptionAttendanceSummary({
     ? selectedMonth
     : (availableMonths[0]?.value ?? selectedMonth);
   const monthLabel = formatMonthLabel(resolvedSelectedMonth, locale);
+  const displayedRangeLabel =
+    prepaidMonthCount > 1 ? coverageRangeLabel : monthLabel;
 
   return (
     <Card>
@@ -98,17 +104,25 @@ export function SubscriptionAttendanceSummary({
           <CardDescription className="flex flex-col gap-1">
             {selectedGroupIds.length === 1
               ? t('ws-invoices.attendance_for_month', {
-                  month: monthLabel,
+                  month: displayedRangeLabel,
                 })
               : t('ws-invoices.combined_attendance_for_month', {
                   count: selectedGroupIds.length,
-                  month: monthLabel,
-                  default: `Combined attendance from ${selectedGroupIds.length} groups for ${monthLabel}`,
+                  month: displayedRangeLabel,
+                  default: `Combined attendance from ${selectedGroupIds.length} groups for ${displayedRangeLabel}`,
                 })}
             <span className="text-muted-foreground text-xs">
               {isSelectedMonthPaid
-                ? t('ws-invoices.all_groups_paid_for_month')
-                : t('ws-invoices.some_groups_unpaid_for_month')}
+                ? t(
+                    prepaidMonthCount > 1
+                      ? 'ws-invoices.all_groups_paid_for_range'
+                      : 'ws-invoices.all_groups_paid_for_month'
+                  )
+                : t(
+                    prepaidMonthCount > 1
+                      ? 'ws-invoices.some_groups_unpaid_for_range'
+                      : 'ws-invoices.some_groups_unpaid_for_month'
+                  )}
             </span>
           </CardDescription>
         </div>

package/src/components/ui/finance/invoices/components/subscription-prepaid-controls.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SubscriptionPrepaidControls } from './subscription-prepaid-controls';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) => {
+    const messages: Record<string, string> = {
+      'ws-invoices.coverage_range': 'Coverage',
+      'ws-invoices.prepaid_month_count': 'Months to cover',
+      'ws-invoices.prepaid_month_count_many': '{count} months',
+      'ws-invoices.prepaid_month_count_one': '1 month',
+      'ws-invoices.prepaid_months': 'Prepaid months',
+      'ws-invoices.prepaid_months_description':
+        'Choose how many months this subscription invoice should cover.',
+      'ws-invoices.valid_until': 'Valid until',
+    };
+
+    return (messages[key] ?? key).replace(
+      '{count}',
+      String(values?.count ?? '')
+    );
+  },
+}));
+
+describe('SubscriptionPrepaidControls', () => {
+  it('renders the prepaid count selector and coverage summary', () => {
+    render(
+      <SubscriptionPrepaidControls
+        coverageRangeLabel="June 2026 - August 2026"
+        prepaidMonthCount={3}
+        validUntilLabel="September 2026"
+        onPrepaidMonthCountChange={vi.fn()}
+      />
+    );
+
+    expect(screen.getByText('Prepaid months')).toBeInTheDocument();
+    expect(screen.getByText('Months to cover')).toBeInTheDocument();
+    expect(screen.getByText('June 2026 - August 2026')).toBeInTheDocument();
+    expect(screen.getByText('September 2026')).toBeInTheDocument();
+  });
+});

package/src/components/ui/finance/invoices/components/subscription-prepaid-controls.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@tuturuuu/ui/card';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { useTranslations } from 'next-intl';
+import type React from 'react';
+import { MAX_PREPAID_MONTH_COUNT } from '../utils';
+
+interface SubscriptionPrepaidControlsProps {
+  coverageRangeLabel: string;
+  onPrepaidMonthCountChange: (monthCount: number) => void;
+  prepaidMonthCount: number;
+  validUntilLabel: string;
+}
+
+const PREPAID_MONTH_OPTIONS = Array.from(
+  { length: MAX_PREPAID_MONTH_COUNT },
+  (_, index) => index + 1
+);
+
+export function SubscriptionPrepaidControls({
+  coverageRangeLabel,
+  onPrepaidMonthCountChange,
+  prepaidMonthCount,
+  validUntilLabel,
+}: SubscriptionPrepaidControlsProps): React.ReactElement {
+  const t = useTranslations();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('ws-invoices.prepaid_months')}</CardTitle>
+        <CardDescription>
+          {t('ws-invoices.prepaid_months_description')}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="prepaid-month-count">
+            {t('ws-invoices.prepaid_month_count')}
+          </Label>
+          <Select
+            value={String(prepaidMonthCount)}
+            onValueChange={(value) => onPrepaidMonthCountChange(Number(value))}
+          >
+            <SelectTrigger id="prepaid-month-count">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PREPAID_MONTH_OPTIONS.map((monthCount) => (
+                <SelectItem key={monthCount} value={String(monthCount)}>
+                  {monthCount === 1
+                    ? t('ws-invoices.prepaid_month_count_one')
+                    : t('ws-invoices.prepaid_month_count_many', {
+                        count: monthCount,
+                      })}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="grid gap-3 rounded-lg border bg-muted/30 p-3 text-sm">
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-muted-foreground">
+              {t('ws-invoices.coverage_range')}
+            </span>
+            <span className="text-right font-medium">{coverageRangeLabel}</span>
+          </div>
+          <div className="flex items-center justify-between gap-3">
+            <span className="text-muted-foreground">
+              {t('ws-invoices.valid_until')}
+            </span>
+            <span className="text-right font-medium">{validUntilLabel}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}