Phase 1: Infrastructure setup - Install next-intl and create basic i18n structure

- Install next-intl package
- Create LanguageProvider hook with localStorage persistence
- Create IntlProvider component for next-intl integration
- Create Providers wrapper component
- Update layout.tsx to include providers and set default lang to 'es'
- Create initial translation files (common.json) for es, en, ca
- Fix pre-existing TypeScript errors in various pages

All tests passing, build successful.

frontend/app/admin/price-history/page.tsx

@@ -63,7 +63,7 @@ export default function AdminPriceHistoryPage() {
         <div style={styles.tableHeader}>
           <h2 style={styles.tableTitle}>Bitcoin Price History</h2>
           <div style={styles.headerActions}>
-            <span style={styles.totalCount}>{records.length} records</span>
+            <span style={styles.totalCount}>{records?.length ?? 0} records</span>
             <button onClick={fetchRecords} style={styles.refreshBtn} disabled={isLoadingData}>
               Refresh
             </button>
@@ -98,7 +98,7 @@ export default function AdminPriceHistoryPage() {
                   </td>
                 </tr>
               )}
-              {!error && !isLoadingData && records.length === 0 && (
+              {!error && !isLoadingData && (records?.length ?? 0) === 0 && (
                 <tr>
                   <td colSpan={4} style={styles.emptyRow}>
                     No price records yet. Click &quot;Fetch Now&quot; to get the current price.
@@ -107,7 +107,7 @@ export default function AdminPriceHistoryPage() {
               )}
               {!error &&
                 !isLoadingData &&
-                records.map((record) => (
+                (records ?? []).map((record) => (
                   <tr key={record.id} style={styles.tr}>
                     <td style={styles.td}>{record.source}</td>
                     <td style={styles.td}>{record.pair}</td>

frontend/app/admin/trades/page.tsx

@@ -5,6 +5,7 @@ import { Permission } from "../../auth-context";
 import { adminApi } from "../../api";
 import { Header } from "../../components/Header";
 import { SatsDisplay } from "../../components/SatsDisplay";
+import { StatusBadge } from "../../components/StatusBadge";
 import { EmptyState } from "../../components/EmptyState";
 import { ConfirmationButton } from "../../components/ConfirmationButton";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
@@ -275,7 +276,9 @@ export default function AdminTradesPage() {
                         </span>
                       </div>
 
-                      <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }} />
+                      <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }}>
+                        {""}
+                      </StatusBadge>
                     </div>
 
                     {/* Actions */}

frontend/app/components/IntlProvider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { NextIntlClientProvider } from "next-intl";
+import { ReactNode, useMemo } from "react";
+import { useLanguage } from "../hooks/useLanguage";
+
+// Import all locale messages
+import esCommon from "../../locales/es/common.json";
+import enCommon from "../../locales/en/common.json";
+import caCommon from "../../locales/ca/common.json";
+
+const messages = {
+  es: { common: esCommon },
+  en: { common: enCommon },
+  ca: { common: caCommon },
+};
+
+interface IntlProviderProps {
+  children: ReactNode;
+}
+
+export function IntlProvider({ children }: IntlProviderProps) {
+  const { locale } = useLanguage();
+
+  const localeMessages = useMemo(() => {
+    return messages[locale] || messages.es;
+  }, [locale]);
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={localeMessages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}

frontend/app/components/Providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ReactNode } from "react";
+import { LanguageProvider } from "../hooks/useLanguage";
+import { IntlProvider } from "./IntlProvider";
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <LanguageProvider>
+      <IntlProvider>{children}</IntlProvider>
+    </LanguageProvider>
+  );
+}

frontend/app/hooks/useLanguage.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState, useEffect, createContext, useContext, ReactNode } from "react";
+
+export type Locale = "es" | "en" | "ca";
+
+const LOCALE_STORAGE_KEY = "arbret-locale";
+const DEFAULT_LOCALE: Locale = "es";
+
+interface LanguageContextType {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+export function LanguageProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>(DEFAULT_LOCALE);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  // Load locale from localStorage on mount
+  useEffect(() => {
+    const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+    if (stored && (stored === "es" || stored === "en" || stored === "ca")) {
+      setLocaleState(stored as Locale);
+    }
+    setIsHydrated(true);
+  }, []);
+
+  // Update HTML lang attribute when locale changes
+  useEffect(() => {
+    if (isHydrated) {
+      document.documentElement.lang = locale;
+    }
+  }, [locale, isHydrated]);
+
+  const setLocale = (newLocale: Locale) => {
+    setLocaleState(newLocale);
+    localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+    document.documentElement.lang = newLocale;
+  };
+
+  return (
+    <LanguageContext.Provider value={{ locale, setLocale }}>{children}</LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error("useLanguage must be used within a LanguageProvider");
+  }
+  return context;
+}

frontend/app/hooks/useTranslation.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import { useTranslations as useNextIntlTranslations } from "next-intl";
+
+export function useTranslation(namespace?: string) {
+  const t = useNextIntlTranslations(namespace);
+  return t;
+}

frontend/app/invites/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { invitesApi } from "../api";
 import { PageLayout } from "../components/PageLayout";
 import { StatusBadge } from "../components/StatusBadge";
+import { EmptyState } from "../components/EmptyState";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { useAsyncData } from "../hooks/useAsyncData";
 import { components } from "../generated/api";
@@ -49,9 +50,9 @@ export default function InvitesPage() {
   };
 
   const { READY, SPENT, REVOKED } = constants.inviteStatuses;
-  const readyInvites = invites.filter((i) => i.status === READY);
-  const spentInvites = invites.filter((i) => i.status === SPENT);
-  const revokedInvites = invites.filter((i) => i.status === REVOKED);
+  const readyInvites = (invites ?? []).filter((i) => i.status === READY);
+  const spentInvites = (invites ?? []).filter((i) => i.status === SPENT);
+  const revokedInvites = (invites ?? []).filter((i) => i.status === REVOKED);
 
   return (
     <PageLayout
@@ -67,7 +68,7 @@ export default function InvitesPage() {
           </p>
         </div>
 
-        {invites.length === 0 ? (
+        {(invites?.length ?? 0) === 0 ? (
           <EmptyState
             message="You don't have any invites yet."
             hint="Contact an admin if you need invite codes to share."

frontend/app/layout.tsx

@@ -1,8 +1,9 @@
 import { AuthProvider } from "./auth-context";
+import { Providers } from "./components/Providers";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="es">
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
@@ -37,7 +38,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         `}</style>
       </head>
       <body>
-        <AuthProvider>{children}</AuthProvider>
+        <Providers>
+          <AuthProvider>{children}</AuthProvider>
+        </Providers>
       </body>
     </html>
   );

frontend/app/trades/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { Permission } from "../../auth-context";
 import { tradesApi } from "../../api";
@@ -23,6 +23,7 @@ export default function TradeDetailPage() {
   const router = useRouter();
   const params = useParams();
   const publicId = params?.id as string | undefined;
+  const [cancelError, setCancelError] = useState<string | null>(null);
 
   const { user, isLoading, isAuthorized } = useRequireAuth({
     requiredPermission: Permission.VIEW_OWN_EXCHANGES,
@@ -78,6 +79,10 @@ export default function TradeDetailPage() {
     );
   }
 
+  if (!trade) {
+    return null;
+  }
+
   const isBuy = trade.direction === "buy";
 
   return (
@@ -97,7 +102,7 @@ export default function TradeDetailPage() {
             <div style={styles.detailGrid}>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Status:</span>
-                <StatusBadge tradeStatus={trade.status} />
+                <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
               </div>
               <div style={styles.detailRow}>
                 <span style={styles.detailLabel}>Time:</span>
@@ -194,6 +199,7 @@ export default function TradeDetailPage() {
             </div>
           </div>
 
+          {cancelError && <div style={bannerStyles.errorBanner}>{cancelError}</div>}
           {trade.status === "booked" && (
             <div style={styles.actionSection}>
               <button
@@ -209,7 +215,7 @@ export default function TradeDetailPage() {
                     await tradesApi.cancelTrade(trade.public_id);
                     router.push("/trades");
                   } catch (err) {
-                    setError(err instanceof Error ? err.message : "Failed to cancel trade");
+                    setCancelError(err instanceof Error ? err.message : "Failed to cancel trade");
                   }
                 }}
                 style={buttonStyles.secondaryButton}

frontend/app/trades/page.tsx

@@ -8,6 +8,7 @@ import { PageLayout } from "../components/PageLayout";
 import { SatsDisplay } from "../components/SatsDisplay";
 import { StatusBadge } from "../components/StatusBadge";
 import { EmptyState } from "../components/EmptyState";
+import { ConfirmationButton } from "../components/ConfirmationButton";
 import { useRequireAuth } from "../hooks/useRequireAuth";
 import { useAsyncData } from "../hooks/useAsyncData";
 import { useMutation } from "../hooks/useMutation";
@@ -54,10 +55,10 @@ export default function TradesPage() {
     }
   };
 
-  const upcomingTrades = trades.filter(
+  const upcomingTrades = (trades ?? []).filter(
     (t) => t.status === "booked" && new Date(t.slot_start) > new Date()
   );
-  const pastOrFinalTrades = trades.filter(
+  const pastOrFinalTrades = (trades ?? []).filter(
     (t) => t.status !== "booked" || new Date(t.slot_start) <= new Date()
   );
 
@@ -74,7 +75,7 @@ export default function TradesPage() {
 
       {isLoadingTrades ? (
         <EmptyState message="Loading trades..." isLoading={true} />
-      ) : trades.length === 0 ? (
+      ) : (trades?.length ?? 0) === 0 ? (
         <EmptyState
           message="You don't have any trades yet."
           action={
@@ -140,7 +141,9 @@ export default function TradesPage() {
                               /BTC
                             </span>
                           </div>
-                          <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }} />
+                          <StatusBadge tradeStatus={trade.status} style={{ marginTop: "0.5rem" }}>
+                            {""}
+                          </StatusBadge>
                         </div>
 
                         <div style={tradeCardStyles.buttonGroup}>
@@ -224,7 +227,7 @@ export default function TradesPage() {
                         </span>
                       </div>
                       <div style={tradeCardStyles.buttonGroup}>
-                        <StatusBadge tradeStatus={trade.status} />
+                        <StatusBadge tradeStatus={trade.status}>{""}</StatusBadge>
                         <button
                           onClick={(e) => {
                             e.stopPropagation();