@carlonicora/nextjs-jsonapi 4.1.2 → 4.2.1

package/src/features/billing/stripe-usage/components/details/UsageSummaryCard.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Activity } from "lucide-react";
 import { Card, CardContent, CardHeader } from "../../../../../shadcnui";
+import { type BillingFormatOptions, formatFixed, useBillingFormatOptions } from "../../../components/utils";
 import { MeterInterface, MeterSummaryInterface } from "../../data/stripe-usage.interface";
 
 type UsageSummaryCardProps = {
@@ -22,20 +24,22 @@ function getProgressColor(percentage: number | null): string {
 /**
  * Format a Unix timestamp to readable date
  */
-function formatDate(date: Date | undefined): string {
-  if (!date) return "N/A";
+function formatDate(date: Date | undefined, { locale, t }: Required<BillingFormatOptions>): string {
+  if (!date) return t("billing.ui.not_available");
 
   try {
-    return new Intl.DateTimeFormat("en-US", {
+    return new Intl.DateTimeFormat(locale, {
       month: "short",
       day: "numeric",
     }).format(new Date(date));
   } catch (_error) {
-    return "Invalid Date";
+    return t("billing.ui.invalid_date");
   }
 }
 
 export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   const currentUsage = summary?.aggregatedValue ?? 0;
   const limit = (meter as any).limit; // Meters may have optional limit field
   const percentage = limit && limit > 0 ? (currentUsage / limit) * 100 : null;
@@ -60,8 +64,12 @@ export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
       <CardContent className="flex flex-col gap-y-4">
         {/* Current Usage */}
         <div>
-          <p className="text-3xl font-bold">{currentUsage.toLocaleString()}</p>
-          {hasLimit && <p className="text-muted-foreground text-sm">of {limit.toLocaleString()} used</p>}
+          <p className="text-3xl font-bold">{currentUsage.toLocaleString(fmt.locale)}</p>
+          {hasLimit && (
+            <p className="text-muted-foreground text-sm">
+              {t("billing.ui.usage.of_limit_used", { limit: limit.toLocaleString(fmt.locale) })}
+            </p>
+          )}
         </div>
 
         {/* Progress Bar */}
@@ -70,17 +78,24 @@ export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
             <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
               <div className={`h-full transition-all ${progressColor}`} style={{ width: `${progressWidth}%` }} />
             </div>
-            <p className="text-muted-foreground text-sm">{percentage?.toFixed(1)}% used</p>
+            <p className="text-muted-foreground text-sm">
+              {t("billing.ui.usage.percent_used", {
+                value: percentage !== null ? formatFixed(percentage, fmt.locale, 1) : "",
+              })}
+            </p>
           </div>
         ) : (
-          <p className="text-muted-foreground text-sm">No limit set</p>
+          <p className="text-muted-foreground text-sm">{t("billing.ui.usage.no_limit")}</p>
         )}
 
         {/* Period Information */}
         {summary && summary.start && summary.end && (
           <div className="border-t pt-3">
             <p className="text-muted-foreground text-xs">
-              Period: {formatDate(summary.start)} - {formatDate(summary.end)}
+              {t("billing.ui.usage.period", {
+                start: formatDate(summary.start, fmt),
+                end: formatDate(summary.end, fmt),
+              })}
             </p>
           </div>
         )}

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
 import { SectionHeader } from "../../../../../components/typography";
+import { type BillingFormatOptions, useBillingFormatOptions } from "../../../components/utils";
 import { StripeUsageInterface } from "../../data/stripe-usage.interface";
 
 type UsageHistoryTableProps = {
@@ -11,13 +13,13 @@ type UsageHistoryTableProps = {
 /**
  * Format a date with time for usage history
  */
-function formatDateTime(date: Date | string | undefined): string {
-  if (!date) return "N/A";
+function formatDateTime(date: Date | string | undefined, { locale, t }: Required<BillingFormatOptions>): string {
+  if (!date) return t("billing.ui.not_available");
 
   const dateObj = typeof date === "string" ? new Date(date) : date;
 
   try {
-    return new Intl.DateTimeFormat("en-US", {
+    return new Intl.DateTimeFormat(locale, {
       month: "short",
       day: "numeric",
       year: "numeric",
@@ -25,36 +27,38 @@ function formatDateTime(date: Date | string | undefined): string {
       minute: "2-digit",
     }).format(dateObj);
   } catch (_error) {
-    return "Invalid Date";
+    return t("billing.ui.invalid_date");
   }
 }
 
 export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
+  const t = useTranslations();
+  const fmt = useBillingFormatOptions();
   if (usageRecords.length === 0) {
     return (
       <div className="rounded-lg border p-8 text-center">
-        <p className="text-muted-foreground">No usage history available.</p>
+        <p className="text-muted-foreground">{t("billing.ui.usage.history_empty")}</p>
       </div>
     );
   }
 
   return (
     <div className="flex w-full flex-col gap-y-4">
-      <SectionHeader level={2}>Usage History</SectionHeader>
+      <SectionHeader level={2}>{t("billing.ui.usage.history_title")}</SectionHeader>
       <div className="overflow-clip rounded-lg border">
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>
-              <TableHead>Date & Time</TableHead>
-              <TableHead>Meter Event</TableHead>
-              <TableHead className="text-end">Quantity</TableHead>
-              <TableHead>Event ID</TableHead>
+              <TableHead>{t("billing.ui.columns.date_time")}</TableHead>
+              <TableHead>{t("billing.ui.columns.meter_event")}</TableHead>
+              <TableHead className="text-end">{t("billing.ui.columns.quantity")}</TableHead>
+              <TableHead>{t("billing.ui.columns.event_id")}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {usageRecords.map((record) => {
-              const dateTime = formatDateTime(record.timestamp);
-              const quantity = record.quantity.toLocaleString();
+              const dateTime = formatDateTime(record.timestamp, fmt);
+              const quantity = record.quantity.toLocaleString(fmt.locale);
 
               return (
                 <TableRow key={record.id}>

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 
 import { cn } from "@/lib/utils";
 import { useTranslations } from "next-intl";
+import { useI18nLocale } from "../../../../i18n";
 import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from "../../../../shadcnui";
 import { useCurrentUserContext } from "../../../user/contexts";
 
@@ -30,7 +31,7 @@ interface TokenStatusIndicatorProps {
  * which overstates the debt. trunc keeps it at -1 and matches floor for
  * non-negative values.
  */
-const asWholeCredits = (value: number): string => Math.trunc(value).toLocaleString();
+const asWholeCredits = (value: number, locale: string): string => Math.trunc(value).toLocaleString(locale);
 
 /**
  * TokenStatusIndicator displays the current status of available monthly and extra pages
@@ -50,6 +51,7 @@ export function TokenStatusIndicator({
 }: TokenStatusIndicatorProps) {
   const { company } = useCurrentUserContext();
   const t = useTranslations();
+  const locale = useI18nLocale();
 
   // Don't render if no company data
   if (!company) return null;
@@ -114,7 +116,7 @@ export function TokenStatusIndicator({
             {t("billing.tokens.monthly", { defaultValue: "Monthly Pages" })}:
           </span>
           <span className={cn("font-medium", getStatusColor())}>
-            {asWholeCredits(availableMonthlyCredits)} / {asWholeCredits(monthlyCredits)}
+            {asWholeCredits(availableMonthlyCredits, locale)} / {asWholeCredits(monthlyCredits, locale)}
           </span>
         </div>
         <div className="flex items-center justify-between gap-4">
@@ -131,7 +133,7 @@ export function TokenStatusIndicator({
           <span className="text-muted-foreground">
             {t("billing.tokens.available_extra", { defaultValue: "Extra Pages" })}:
           </span>
-          <span className="font-medium text-blue-500">{asWholeCredits(availableExtraCredits)}</span>
+          <span className="font-medium text-blue-500">{asWholeCredits(availableExtraCredits, locale)}</span>
         </div>
         <Link href="/settings/billing?action=subscribe" className="w-full flex justify-end my-4">
           <Button variant="outline" size="sm">
@@ -146,13 +148,13 @@ export function TokenStatusIndicator({
     <>
       {getBatteryIcon()}
       <span className={cn(textSize, "text-muted-foreground font-medium leading-none")}>
-        {asWholeCredits(availableMonthlyCredits)}
+        {asWholeCredits(availableMonthlyCredits, locale)}
       </span>
       {showExtraPages && availableExtraCredits > 0 && (
         <span className="inline-flex items-center gap-0.5">
           <PlusCircle className={cn(smallIconSize, "text-blue-500")} />
           <span className={cn(textSize, "text-blue-500 font-medium leading-none")}>
-            {asWholeCredits(availableExtraCredits)}
+            {asWholeCredits(availableExtraCredits, locale)}
           </span>
         </span>
       )}

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -182,7 +182,7 @@ function CompanyEditorInternal({
         }
 
         if (fiscalRef.current && !fiscalRef.current.validate()) {
-          throw new Error("Fiscal data validation failed");
+          throw new Error(t("company.fiscal_data_invalid"));
         }
 
         const payload: CompanyInput = {
@@ -230,7 +230,7 @@ function CompanyEditorInternal({
                   {file || company?.logo ? (
                     <Image
                       src={file ? URL.createObjectURL(file) : company?.logo || ""}
-                      alt="Company Logo"
+                      alt={t("company.logo_alt")}
                       width={200}
                       height={200}
                       unoptimized={isRemoteImageSrc(file ? undefined : company?.logo)}

package/src/features/help/components/HelpArticleBody.tsx

@@ -24,7 +24,7 @@ export function HelpArticleBody(props: {
   return (
     <article className="prose dark:prose-invert max-w-none">
       <nav className="text-muted-foreground mb-2 text-xs">
-        <Link href={generateUrl({ page: "/help" })}>Help</Link>
+        <Link href={generateUrl({ page: "/help" })}>{t("help.title")}</Link>
         {" · "}
         <Link href={generateUrl({ page: `/help/${howToType}` })}>{t(`help.modes.${howToType}`)}</Link>
       </nav>

package/src/features/help/components/HelpHeader.tsx

@@ -12,7 +12,7 @@ export function HelpHeader() {
   const { currentUser } = useCurrentUserContext();
   const { brand } = useHelp();
   const logo = brand?.logo;
-  const label = brand?.label ?? "Help";
+  const label = brand?.label ?? t("help.title");
   const appHref = brand?.appHref ?? "/";
 
   return (

package/src/features/help/components/HelpSideNav.tsx

@@ -56,7 +56,7 @@ export function HelpSideNav() {
   const isActive = (mode: string, slug: string) => pathname.endsWith(`/help/${mode}/${slug}`);
 
   return (
-    <nav aria-label="Help navigation" className="flex h-full flex-col gap-3 overflow-y-auto p-4">
+    <nav aria-label={t("help.sideNav.label")} className="flex h-full flex-col gap-3 overflow-y-auto p-4">
       <input
         type="search"
         value={query}

package/src/features/help/i18n-keys.ts

@@ -3,12 +3,14 @@
  * Consuming apps must define each entry in their messages/<locale>.json.
  */
 export const HELP_I18N_KEYS = [
+  "help.title",
   "help.modes.tutorial",
   "help.modes.how-to",
   "help.modes.reference",
   "help.modes.explanation",
   "help.sideNav.filterPlaceholder",
   "help.sideNav.noMatches",
+  "help.sideNav.label",
   "help.toc.title",
   "help.article.lastUpdated",
   "help.article.previous",

package/src/features/notification/components/common/NotificationErrorBoundary.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import React, { Component, ReactNode } from "react";
 
 interface Props {
@@ -12,6 +13,21 @@ interface State {
   error?: Error;
 }
 
+// Class components cannot call hooks, so the default fallback is a function component.
+function NotificationErrorFallback({ onRetry }: { onRetry: () => void }) {
+  const t = useTranslations();
+  return (
+    <div className="flex items-center justify-center p-4 text-center">
+      <div className="text-muted-foreground text-sm">
+        <p>{t("notification.ui.error_boundary.message")}</p>
+        <button onClick={onRetry} className="text-primary mt-2">
+          {t("notification.ui.error_boundary.retry")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export class NotificationErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -29,18 +45,7 @@ export class NotificationErrorBoundary extends Component<Props, State> {
 
   render() {
     if (this.state.hasError) {
-      return (
-        this.props.fallback || (
-          <div className="flex items-center justify-center p-4 text-center">
-            <div className="text-muted-foreground text-sm">
-              <p>Something went wrong with notifications.</p>
-              <button onClick={() => this.setState({ hasError: false })} className="text-primary mt-2">
-                Try again
-              </button>
-            </div>
-          </div>
-        )
-      );
+      return this.props.fallback || <NotificationErrorFallback onRetry={() => this.setState({ hasError: false })} />;
     }
 
     return this.props.children;

package/src/features/notification/components/containers/NotificationsListContainer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { RoundPageContainer } from "../../../../components/containers/RoundPageContainer";
@@ -10,6 +11,7 @@ import { NotificationsList } from "../lists/NotificationsList";
 import { Modules } from "../../../../core";
 
 function NotificationsListContainerContent() {
+  const t = useTranslations();
   const searchParams = useSearchParams();
   const { error } = useNotificationContext();
 
@@ -20,8 +22,8 @@ function NotificationsListContainerContent() {
     return (
       <div className="flex items-center justify-center p-8 text-center">
         <div className="text-destructive text-xs/relaxed">
-          <p>Error loading notifications: {error}</p>
-          <p className="text-muted-foreground mt-2">Please try refreshing the page.</p>
+          <p>{t("notification.ui.list.error_loading", { error })}</p>
+          <p className="text-muted-foreground mt-2">{t("notification.ui.list.refresh_hint")}</p>
         </div>
       </div>
     );

package/src/features/notification/components/notifications/Notification.tsx

@@ -4,7 +4,8 @@ import { useTranslations } from "next-intl";
 import { ReactElement, useEffect, useState } from "react";
 import { usePageUrlGenerator } from "../../../../hooks";
 import { Link } from "../../../../shadcnui";
-import { formatDate } from "../../../../utils";
+import { useI18nLocale } from "../../../../i18n";
+import { dateFormatLocale, formatDate } from "../../../../utils";
 import { UserInterface } from "../../../user";
 import { UserAvatar } from "../../../user/components";
 import { NotificationInterface } from "../../data";
@@ -36,6 +37,7 @@ export function NotificationToast(
   t: any,
   generateUrl: any,
   reouter: any,
+  locale?: string,
 ): {
   title: string;
   description: string | ReactElement<any>;
@@ -67,7 +69,7 @@ export function NotificationToast(
             })}
           </p>
           <div className="text-muted-foreground mt-1 w-full text-xs">
-            {formatDate(new Date(notification.createdAt), "dateTime")}
+            {formatDate(new Date(notification.createdAt), "dateTime", dateFormatLocale(locale))}
           </div>
         </div>
       </div>
@@ -87,6 +89,7 @@ export function NotificationMenuItem({ notification, closePopover }: TaskComment
   const generateUrl = usePageUrlGenerator();
   const [isRead, setIsRead] = useState<boolean>(false);
   const t = useTranslations();
+  const dateLocale = dateFormatLocale(useI18nLocale());
 
   useEffect(() => {
     setIsRead(notification.isRead);
@@ -112,7 +115,7 @@ export function NotificationMenuItem({ notification, closePopover }: TaskComment
           })}
         </p>
         <div className="text-muted-foreground mt-0.5 text-xs">
-          {formatDate(new Date(notification.createdAt), "default")}
+          {formatDate(new Date(notification.createdAt), "default", dateLocale)}
         </div>
       </div>
       {!isRead && <span className="bg-primary mt-1.5 size-2 shrink-0 rounded-full" aria-hidden />}

package/src/features/notification/contexts/NotificationContext.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 import React, { createContext, ReactElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { SharedProvider } from "../../../contexts";
 import { Modules } from "../../../core";
-import { useI18nRouter } from "../../../i18n";
+import { useI18nLocale, useI18nRouter } from "../../../i18n";
 import { BreadcrumbItemData } from "../../../interfaces";
 import { NotificationMenuItem, NotificationToast } from "../components/notifications/Notification";
 import { getRoleId, isRolesConfigured } from "../../../roles";
@@ -47,6 +47,11 @@ type NotificationContextProviderProps = {
 
 export const NotificationContextProvider = ({ children }: NotificationContextProviderProps) => {
   const t = useTranslations();
+  const locale = useI18nLocale();
+  // A ref, not a dependency: the translator only words the fallback errors and must
+  // not re-create loadNotifications, whose identity drives the initial-load effect.
+  const tRef = useRef(t);
+  tRef.current = t;
   const router = useI18nRouter();
 
   const [notifications, setNotifications] = useState<NotificationInterface[]>([]);
@@ -105,7 +110,7 @@ export const NotificationContextProvider = ({ children }: NotificationContextPro
         setNotifications(fetchedNotifications);
         setLastLoaded(Date.now());
       } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : "Failed to load notifications";
+        const errorMessage = error instanceof Error ? error.message : tRef.current("notification.ui.errors.load");
         setError(errorMessage);
       } finally {
         setIsLoading(false);
@@ -156,7 +161,7 @@ export const NotificationContextProvider = ({ children }: NotificationContextPro
       setNotifications(allNotifications);
       setLastLoaded(Date.now());
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Failed to mark notifications as read";
+      const errorMessage = error instanceof Error ? error.message : tRef.current("notification.ui.errors.mark_read");
       setError(errorMessage);
       throw error;
     } finally {
@@ -176,7 +181,7 @@ export const NotificationContextProvider = ({ children }: NotificationContextPro
       onClick: () => void;
     };
   } => {
-    return NotificationToast(notification, t, generateUrl, router);
+    return NotificationToast(notification, t, generateUrl, router, locale);
   };
 
   const generateNotification = (notification: NotificationInterface, closePopover: () => void) => {

package/src/features/notification/contexts/__tests__/NotificationContext.spec.tsx

@@ -125,6 +125,19 @@ describe("NotificationContextProvider failed load", () => {
     expect(result.current.notifications).toEqual([]);
     expect(result.current.error).toBe("500:");
   });
+
+  it("words a failure without a message through the translator, not an English literal", async () => {
+    vi.mocked(NotificationService.findMany).mockRejectedValue("offline");
+
+    const { result } = renderHook(() => useNotificationContext(), { wrapper });
+
+    await act(async () => {
+      await result.current.loadNotifications();
+    });
+
+    // The suite's next-intl mock returns the key itself.
+    expect(result.current.error).toBe("notification.ui.errors.load");
+  });
 });
 
 describe("NotificationContextProvider first render", () => {

package/src/features/notification/hooks/useNotificationTableStructure.tsx

@@ -6,7 +6,8 @@ import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../../../shadcnui";
-import { formatDate } from "../../../utils";
+import { useI18nLocale } from "../../../i18n";
+import { dateFormatLocale, formatDate } from "../../../utils";
 import { generateNotificationData } from "../components/notifications/Notification";
 import { useNotificationContext } from "../contexts/NotificationContext";
 import { NotificationIcon } from "../components/notifications/NotificationIcon";
@@ -32,6 +33,7 @@ export const useNotificationTableStructure: UseTableStructureHook<NotificationIn
   params,
 ) => {
   const t = useTranslations();
+  const dateLocale = dateFormatLocale(useI18nLocale());
   const generateUrl = usePageUrlGenerator();
   const { loadNotifications } = useNotificationContext();
 
@@ -123,7 +125,7 @@ export const useNotificationTableStructure: UseTableStructureHook<NotificationIn
            shows how long ago it arrived. The two must match. */
         return (
           <span className="text-muted-foreground text-xs">
-            {formatDate(new Date(notification.createdAt), "default")}
+            {formatDate(new Date(notification.createdAt), "default", dateLocale)}
           </span>
         );
       },

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { formatDistanceToNow } from "date-fns";
+import { useI18nDateFnsLocale } from "../../../i18n";
 import { Key, MoreVertical, Pencil, Trash2 } from "lucide-react";
 import {
   Badge,
@@ -32,13 +34,15 @@ export interface OAuthClientCardProps {
  * Card component for displaying an OAuth client in a list
  */
 export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClientCardProps) {
+  const t = useTranslations();
+  const dateFnsLocale = useI18nDateFnsLocale();
   // Truncate client ID for display
   const truncatedId =
     client.clientId.length > 12 ? `${client.clientId.slice(0, 8)}...${client.clientId.slice(-4)}` : client.clientId;
 
   const createdAgo = client.createdAt
-    ? formatDistanceToNow(new Date(client.createdAt), { addSuffix: true })
-    : "Unknown";
+    ? formatDistanceToNow(new Date(client.createdAt), { addSuffix: true, locale: dateFnsLocale })
+    : t("oauth.ui.card.unknown");
 
   return (
     <Card
@@ -52,7 +56,9 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
             <CardTitle className="text-lg">{client.name}</CardTitle>
           </div>
           <div className="flex items-center gap-2">
-            <Badge variant={client.isActive ? "default" : "secondary"}>{client.isActive ? "Active" : "Inactive"}</Badge>
+            <Badge variant={client.isActive ? "default" : "secondary"}>
+              {client.isActive ? t("oauth.ui.card.active") : t("oauth.ui.card.inactive")}
+            </Badge>
             {(onEdit || onDelete) && (
               <DropdownMenu>
                 <DropdownMenuTrigger onClick={(e) => e.stopPropagation()}>
@@ -69,7 +75,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                       }}
                     >
                       <Pencil className="h-4 w-4 me-2" />
-                      Edit
+                      {t("ui.buttons.edit")}
                     </DropdownMenuItem>
                   )}
                   {onDelete && (
@@ -81,7 +87,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                       className="text-destructive"
                     >
                       <Trash2 className="h-4 w-4 me-2" />
-                      Delete
+                      {t("ui.buttons.delete")}
                     </DropdownMenuItem>
                   )}
                 </DropdownMenuContent>
@@ -94,8 +100,8 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
       <CardContent>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
           <span className="tabular-nums">{truncatedId}</span>
-          <span>Created {createdAgo}</span>
-          <span>{client.isConfidential ? "Confidential" : "Public"}</span>
+          <span>{t("oauth.ui.card.created", { ago: createdAgo })}</span>
+          <span>{client.isConfidential ? t("oauth.ui.card.confidential") : t("oauth.ui.card.public")}</span>
         </div>
       </CardContent>
     </Card>