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/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}