✅ Refactor website localization structure

Author: Eric-Wahl

package-lock.json

@@ -17,6 +17,8 @@
     "clsx": "^2.1.1",
     "i18next": "^24.2.2",
     "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-http-backend": "^3.0.2",
+    "i18next-resources-to-backend": "^1.2.1",
     "motion": "^12.5.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.3",

package.json

@@ -34,22 +34,22 @@ export interface MenuItem {
 export const getStaffMenuItems = (t: TFunction): MenuItem[] => [
   {
     id: "home",
-    label: t("navigation.staff.home"),
+    label: t("navigation:dock:home"),
     icon: "pi pi-home",
     color: "#F2C94C", // Jaune miel
     Component: HomePage,
   },
   {
     id: "catalogs",
-    label: t("navigation.staff.catalogs"),
+    label: t("navigation:dock:catalogs"),
     icon: "pi pi-server",
     color: "#8D6E33", // Ambre foncé
     Component: CatalogsPage,
     showInMenu: (user: User) => !user.blocked,
   },
   {
     id: "scopes",
-    label: t("navigation.staff.scopes"),
+    label: t("navigation:dock:scopes"),
     icon: "pi pi-building",
     color: "#4F3A1B", // Brun foncé
     Component: ScopesPage,
@@ -58,7 +58,7 @@ export const getStaffMenuItems = (t: TFunction): MenuItem[] => [
   },
   {
     id: "roles",
-    label: t("navigation.staff.roles"),
+    label: t("navigation:dock:roles"),
     icon: "pi pi-shield",
     color: "#E0A800", // Ambre doré
     Component: RolesPage,
@@ -67,23 +67,23 @@ export const getStaffMenuItems = (t: TFunction): MenuItem[] => [
   },
   {
     id: "groups",
-    label: t("navigation.staff.groups"),
+    label: t("navigation:dock:groups"),
     icon: "pi pi-users", // Icône de groupe (plusieurs personnes)
     color: "#7D6608", // Brun miel
     Component: GroupsPage,
     showInMenu: (user: User) => !user.blocked,
   },
   {
     id: "users",
-    label: t("navigation.staff.users"),
+    label: t("navigation:dock:users"),
     icon: "pi pi-user", // Changé pour une icône d'utilisateur individuel
     color: "#BF8F30", // Ambre clair
     Component: UsersPage,
     showInMenu: (user: User) => !user.blocked,
   },
   {
     id: "competitions",
-    label: t("navigation.staff.competitions"),
+    label: t("navigation:dock:competitions"),
     icon: "pi pi-graduation-cap",
     color: "#5A3E28", // Brun foncé
     Component: CompetitionsPage,

src/app/admin/MenuItem.tsx

@@ -19,7 +19,7 @@ interface AppDockProps {
 
 export default function AppDock({ setPage }: AppDockProps) {
   const { user } = useAuth();
-  const { i18n, t } = useTranslation();
+  const { i18n, t } = useTranslation(["common", "navigation"]);
   const { logout } = useAuth();
   const [displayTerminal, setDisplayTerminal] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -57,7 +57,7 @@ export default function AppDock({ setPage }: AppDockProps) {
 
   const dockItems = [
     {
-      label: t("navigation.staff.terminal"),
+      label: t("navigation:dock:terminal"),
       icon: () => createIconContainer("pi pi-angle-right", "#262626"),
       command: () => {
         setDisplayTerminal(true);

src/app/admin/components/AppDock/AppDock.tsx

@@ -7,7 +7,7 @@ import AppDock from "@admin/components/AppDock/AppDock";
 import { useActivePage } from "@contexts/ActivePageContext";
 
 export default function Admin() {
-  const { t } = useTranslation();
+  const { t } = useTranslation(["common", "navigation"]);
   const { activePage, setActivePage } = useActivePage();
   const [isSticky, setIsSticky] = useState(false);
 
@@ -60,7 +60,7 @@ export default function Admin() {
               <div className="p-4 min-h-screen mb-28">
                 <div className="mb-6">
                   <h1 className="text-3xl font-bold text-white mb-2">
-                    {t("navigation.staff." + activePage)}
+                    {t("navigation:staff." + activePage)}
                   </h1>
                   <div className="w-20 h-1 bg-amber-500 rounded"></div>
                 </div>

src/app/admin/pages/AdminLayout.tsx

@@ -29,7 +29,7 @@ export default function CatalogsPage() {
         const data = await ServiceManager.catalogs.fetchCatalogs();
         setCatalogs(data);
       } catch (err) {
-        setError(t("staff.catalogs.errorFetchingCatalogs"));
+        setError(t("admin:catalogs:errorFetchingCatalogs"));
         console.error(err);
       } finally {
         setLoading(false);
@@ -52,7 +52,7 @@ export default function CatalogsPage() {
       {loading && (
         <div className="flex flex-col items-center justify-center p-6">
           <ProgressSpinner style={{ width: "50px", height: "50px" }} />
-          <p className="mt-4 text-gray-600">{t("staff.catalogs.loading")}</p>
+          <p className="mt-4 text-gray-600">{t("common:states.loading")}</p>
         </div>
       )}
 
@@ -69,7 +69,7 @@ export default function CatalogsPage() {
         <div className="flex flex-col items-center justify-center p-12 rounded-lg shadow">
           <i className="pi pi-inbox text-5xl text-gray-400 mb-4"></i>
           <p className="text-gray-600 text-xl">
-            {t("staff.catalogs.noCatalogs")}
+            {t("admion:catalogs:noCatalogs")}
           </p>
         </div>
       )}
@@ -78,7 +78,7 @@ export default function CatalogsPage() {
         <>
           <div className="flex items-center justify-between mb-10">
             <p className="font-semibold text-white-800">
-              {t("staffTabs.catalogs.description")}
+              {t("admin:catalogs:description")}
             </p>
           </div>
 

src/app/admin/pages/catalogs/CatalogsPage.tsx

@@ -37,7 +37,7 @@ export const CatalogDetails = ({
         );
         setThemes(data);
       } catch (err) {
-        setError(t("staff.catalogs.errorFetchingCatalogs"));
+        setError(t("admin:catalogs:errorFetchingCatalogs"));
         console.error(err);
       } finally {
         setLoading(false);
@@ -72,7 +72,7 @@ export const CatalogDetails = ({
         icon="pi pi-eye"
         className="p-button-rounded p-button-outlined p-button-sm"
         onClick={() => setSelectedPuzzle(puzzle)}
-        tooltip={t("staff.catalogs.viewPuzzle")}
+        tooltip={t("admin:catalogs:viewPuzzle")}
       />
     );
   };
@@ -99,7 +99,7 @@ export const CatalogDetails = ({
         </div>
         <Button
           icon="pi pi-arrow-left"
-          label={t("staff.catalogs.back")}
+          label={t("admin:catalogs:back")}
           className="p-button-primary"
           onClick={onBack}
         />
@@ -110,13 +110,13 @@ export const CatalogDetails = ({
       <Divider />
 
       <h3 className="text-xl font-semibold text-gray-800 mb-4">
-        {t("staff.catalogs.themes")}
+        {t("admin:catalogs:themes")}
       </h3>
 
       {loading && (
         <div className="flex flex-col items-center justify-center p-6">
           <ProgressSpinner style={{ width: "50px", height: "50px" }} />
-          <p className="mt-4 text-gray-600">{t("staff.catalogs.loading")}</p>
+          <p className="mt-4 text-gray-600">{t("admin:catalogs:loading")}</p>
         </div>
       )}
 
@@ -132,7 +132,7 @@ export const CatalogDetails = ({
       {!loading && !error && (!themes || themes.length === 0) && (
         <div className="flex flex-col items-center justify-center p-6 bg-gray-50 rounded">
           <i className="pi pi-folder-open text-5xl text-gray-400 mb-4"></i>
-          <p className="text-gray-600">{t("staff.catalogs.noThemes")}</p>
+          <p className="text-gray-600">{t("admin:catalogs:noThemes")}</p>
         </div>
       )}
 
@@ -146,7 +146,7 @@ export const CatalogDetails = ({
                   <span>{theme.name}</span>
                   <Tag
                     value={`${theme.enigmes_count} ${t(
-                      "staff.catalogs.puzzlesCount"
+                      "admin:catalogs:puzzlesCount"
                     )}`}
                     className="ml-2"
                   />
@@ -159,32 +159,32 @@ export const CatalogDetails = ({
                 rows={5}
                 rowsPerPageOptions={[5, 10, 25]}
                 tableStyle={{ minWidth: "50rem" }}
-                emptyMessage={t("staff.catalogs.notFound")}
+                emptyMessage={t("admin:catalogs:notFound")}
               >
                 <Column
                   field="name"
-                  header={t("common.fields.name")}
+                  header={t("common:fields.name")}
                   sortable
                 />
                 <Column
                   field="author"
-                  header={t("staff.catalogs.author")}
+                  header={t("admin:catalogs:author")}
                   sortable
                 />
                 <Column
                   field="difficulty"
-                  header={t("staff.catalogs.difficulty")}
+                  header={t("admin:catalogs:difficulty")}
                   body={difficultyTemplate}
                   sortable
                 />
                 <Column
                   field="language"
-                  header={t("staff.catalogs.language")}
+                  header={t("admin:catalogs:language")}
                   sortable
                 />
                 <Column
                   field="createdAt"
-                  header={t("staff.catalogs.createdAt")}
+                  header={t("admin:catalogs:createdAt")}
                   body={(rowData) => dateTemplate(rowData, "createdAt")}
                   sortable
                 />

src/app/admin/pages/catalogs/components/CatalogDetails.tsx

@@ -42,7 +42,7 @@ export const CatalogsList = ({
 
             <div className="mt-auto">
               <Button
-                label={t("staffTabs.catalogs.details")}
+                label={t("admin:catalogs:details")}
                 icon="pi pi-arrow-right"
                 iconPos="right"
                 className="p-button-rounded p-button-outlined w-full"