Translate admin pages - Create admin.json files and translate all admin pages

- Create admin.json translation files for es, en, ca with all admin strings
- Update IntlProvider to include admin namespace
- Translate admin/invites/page.tsx - all strings now use translations
- Translate admin/trades/page.tsx - all strings now use translations
- Translate admin/price-history/page.tsx - all strings now use translations
- Translate admin/availability/page.tsx - all strings now use translations
- Add 'saving' key to common.json for all languages
- Fix linting errors: add t to useCallback dependencies
- All admin pages now fully multilingual

frontend/app/admin/invites/page.tsx

@@ -7,6 +7,7 @@ import { Header } from "../../components/Header";
 import { StatusBadge } from "../../components/StatusBadge";
 import { useRequireAuth } from "../../hooks/useRequireAuth";
 import { useMutation } from "../../hooks/useMutation";
+import { useTranslation } from "../../hooks/useTranslation";
 import { components } from "../../generated/api";
 import constants from "../../../../shared/constants.json";
 import {
@@ -27,6 +28,8 @@ type PaginatedInvites = components["schemas"]["PaginatedResponse_InviteResponse_
 type UserOption = components["schemas"]["AdminUserResponse"];
 
 export default function AdminInvitesPage() {
+  const t = useTranslation("admin");
+  const tCommon = useTranslation("common");
   const [data, setData] = useState<PaginatedInvites | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [page, setPage] = useState(1);
@@ -47,16 +50,19 @@ export default function AdminInvitesPage() {
     }
   }, []);
 
-  const fetchInvites = useCallback(async (page: number, status: string) => {
-    setError(null);
-    try {
-      const data = await adminApi.getInvites(page, 10, status || undefined);
-      setData(data);
-    } catch (err) {
-      setData(null);
-      setError(err instanceof Error ? err.message : "Failed to load invites");
-    }
-  }, []);
+  const fetchInvites = useCallback(
+    async (page: number, status: string) => {
+      setError(null);
+      try {
+        const data = await adminApi.getInvites(page, 10, status || undefined);
+        setData(data);
+      } catch (err) {
+        setData(null);
+        setError(err instanceof Error ? err.message : t("invites.errors.loadFailed"));
+      }
+    },
+    [t]
+  );
 
   useEffect(() => {
     if (user && isAuthorized) {
@@ -91,7 +97,7 @@ export default function AdminInvitesPage() {
         fetchInvites(page, statusFilter);
       },
       onError: (err) => {
-        setError(err instanceof Error ? err.message : "Failed to revoke invite");
+        setError(err instanceof Error ? err.message : t("invites.errors.revokeFailed"));
       },
     }
   );
@@ -135,7 +141,7 @@ export default function AdminInvitesPage() {
   if (isLoading) {
     return (
       <main style={layoutStyles.main}>
-        <div style={layoutStyles.loader}>Loading...</div>
+        <div style={layoutStyles.loader}>{tCommon("loading")}</div>
       </main>
     );
   }
@@ -152,16 +158,16 @@ export default function AdminInvitesPage() {
         <div style={styles.pageContainer}>
           {/* Create Invite Section */}
           <div style={styles.createCard}>
-            <h2 style={styles.createTitle}>Create Invite</h2>
+            <h2 style={styles.createTitle}>{t("invites.createInvite")}</h2>
             <div style={styles.createForm}>
               <div style={formStyles.field}>
-                <label style={styles.inputLabel}>Godfather (user who can share this invite)</label>
+                <label style={styles.inputLabel}>{t("invites.godfatherLabel")}</label>
                 <select
                   value={newGodfatherId}
                   onChange={(e) => setNewGodfatherId(e.target.value)}
                   style={{ ...formStyles.select, maxWidth: "400px" }}
                 >
-                  <option value="">Select a user...</option>
+                  <option value="">{t("invites.selectUser")}</option>
                   {users.map((u) => (
                     <option key={u.id} value={u.id}>
                       {u.email}
@@ -169,9 +175,7 @@ export default function AdminInvitesPage() {
                   ))}
                 </select>
                 {users.length === 0 && (
-                  <span style={formStyles.hint}>
-                    No users loaded yet. Create at least one invite to populate the list.
-                  </span>
+                  <span style={formStyles.hint}>{t("invites.noUsersHint")}</span>
                 )}
               </div>
               {createError && <div style={styles.createError}>{createError}</div>}
@@ -184,7 +188,7 @@ export default function AdminInvitesPage() {
                   ...(!newGodfatherId ? buttonStyles.buttonDisabled : {}),
                 }}
               >
-                {isCreating ? "Creating..." : "Create Invite"}
+                {isCreating ? t("invites.creating") : t("invites.createInvite")}
               </button>
             </div>
           </div>
@@ -192,7 +196,7 @@ export default function AdminInvitesPage() {
           {/* Invites Table */}
           <div style={cardStyles.tableCard}>
             <div style={tableStyles.tableHeader}>
-              <h2 style={tableStyles.tableTitle}>All Invites</h2>
+              <h2 style={tableStyles.tableTitle}>{t("invites.allInvites")}</h2>
               <div style={utilityStyles.filterGroup}>
                 <select
                   value={statusFilter}
@@ -202,12 +206,14 @@ export default function AdminInvitesPage() {
                   }}
                   style={styles.filterSelect}
                 >
-                  <option value="">All statuses</option>
-                  <option value={READY}>Ready</option>
-                  <option value={SPENT}>Spent</option>
-                  <option value={REVOKED}>Revoked</option>
+                  <option value="">{t("invites.allStatuses")}</option>
+                  <option value={READY}>{t("invites.statusReady")}</option>
+                  <option value={SPENT}>{t("invites.statusSpent")}</option>
+                  <option value={REVOKED}>{t("invites.statusRevoked")}</option>
                 </select>
-                <span style={tableStyles.totalCount}>{data?.total ?? 0} invites</span>
+                <span style={tableStyles.totalCount}>
+                  {t("invites.invitesCount", { count: data?.total ?? 0 })}
+                </span>
               </div>
             </div>
 
@@ -215,12 +221,12 @@ export default function AdminInvitesPage() {
               <table style={tableStyles.table}>
                 <thead>
                   <tr>
-                    <th style={tableStyles.th}>Code</th>
-                    <th style={tableStyles.th}>Godfather</th>
-                    <th style={tableStyles.th}>Status</th>
-                    <th style={tableStyles.th}>Used By</th>
-                    <th style={tableStyles.th}>Created</th>
-                    <th style={tableStyles.th}>Actions</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.code")}</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.godfather")}</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.status")}</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.usedBy")}</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.created")}</th>
+                    <th style={tableStyles.th}>{t("invites.tableHeaders.actions")}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -249,7 +255,7 @@ export default function AdminInvitesPage() {
                               onClick={() => handleRevoke(record.id)}
                               style={buttonStyles.dangerButton}
                             >
-                              Revoke
+                              {t("invites.revoke")}
                             </button>
                           )}
                         </td>
@@ -258,7 +264,7 @@ export default function AdminInvitesPage() {
                   {!error && (!data || data.records.length === 0) && (
                     <tr>
                       <td colSpan={6} style={tableStyles.emptyRow}>
-                        No invites yet
+                        {t("invites.noInvites")}
                       </td>
                     </tr>
                   )}