feat(admin-ui): runtime terminology customization for admin UI

web/apps/admin/configs.dev.json

@@ -0,0 +1,32 @@
+{
+  "title": "Frontier Admin",
+  "app_url": "localhost:5173",
+  "token_product_id": "token",
+  "organization_types": [],
+  "webhooks": {
+    "enable_delete": false
+  },
+  "terminology": {
+    "organization": {
+      "singular": "Workspace",
+      "plural": "Workspaces"
+    },
+    "project": {
+      "singular": "Project",
+      "plural": "Projects"
+    },
+    "team": {
+      "singular": "Team",
+      "plural": "Teams"
+    },
+    "member": {
+      "singular": "Member",
+      "plural": "Members"
+    },
+    "user": {
+      "singular": "User",
+      "plural": "Users"
+    },
+    "appName": "Frontier Admin"
+  }
+}

web/apps/admin/src/components/Sidebar/index.tsx

@@ -26,6 +26,7 @@ import CpuChipIcon from "~/assets/icons/cpu-chip.svg?react";
 import { AppContext } from "~/contexts/App";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { Link, useLocation } from "react-router-dom";
+import { useAdminTerminology, useAdminPaths } from "@raystack/frontier/admin";
 
 export type NavigationItemsTypes = {
   to?: string;
@@ -36,90 +37,96 @@ export type NavigationItemsTypes = {
 
 const BRAND_NAME = "Frontier";
 
-const navigationItems: NavigationItemsTypes[] = [
-  {
-    name: "Organizations",
-    to: `/organizations`,
-    icon: <OrganizationIcon />,
-  },
-  {
-    name: "Users",
-    to: `/users`,
-    icon: <UserIcon />,
-  },
-  {
-    name: "Audit Logs",
-    to: `/audit-logs`,
-    icon: <CpuChipIcon />,
-  },
-  {
-    name: "Invoices",
-    to: `/invoices`,
-    icon: <InvoicesIcon />,
-  },
-  {
-    name: "Authorization",
-    subItems: [
-      {
-        name: "Roles",
-        to: `/roles`,
-        icon: <RolesIcon />,
-      },
-    ],
-  },
-  {
-    name: "Billing",
-    subItems: [
-      {
-        name: "Products",
-        to: `/products`,
-        icon: <ProductsIcon />,
-      },
-      {
-        name: "Plans",
-        to: `/plans`,
-        icon: <PlansIcon />,
-      },
-    ],
-  },
-  {
-    name: "Features",
-    subItems: [
-      {
-        name: "Webhooks",
-        to: `/webhooks`,
-        icon: <WebhooksIcon />,
-      },
-    ],
-  },
-  {
-    name: "Settings",
-    subItems: [
-      {
-        name: "Preferences",
-        to: `/preferences`,
-        icon: <PreferencesIcon />,
-      },
-      {
-        name: "Admins",
-        to: `/super-admins`,
-        icon: <AdminsIcon />,
-      },
-    ],
-  },
-  // {
-  //   name: "Projects",
-  //   to: `/projects`,
-  // },
+const useNavigationItems = (): NavigationItemsTypes[] => {
+  const t = useAdminTerminology();
+  const paths = useAdminPaths();
 
-  // {
-  //   name: "Groups",
-  //   to: `/groups`,
-  // },
-];
+  return [
+    {
+      name: t.organization({ plural: true, case: "capital" }),
+      to: `/${paths.organizations}`,
+      icon: <OrganizationIcon />,
+    },
+    {
+      name: t.user({ plural: true, case: "capital" }),
+      to: `/${paths.users}`,
+      icon: <UserIcon />,
+    },
+    {
+      name: "Audit Logs",
+      to: `/audit-logs`,
+      icon: <CpuChipIcon />,
+    },
+    {
+      name: "Invoices",
+      to: `/invoices`,
+      icon: <InvoicesIcon />,
+    },
+    {
+      name: "Authorization",
+      subItems: [
+        {
+          name: "Roles",
+          to: `/roles`,
+          icon: <RolesIcon />,
+        },
+      ],
+    },
+    {
+      name: "Billing",
+      subItems: [
+        {
+          name: "Products",
+          to: `/products`,
+          icon: <ProductsIcon />,
+        },
+        {
+          name: "Plans",
+          to: `/plans`,
+          icon: <PlansIcon />,
+        },
+      ],
+    },
+    {
+      name: "Features",
+      subItems: [
+        {
+          name: "Webhooks",
+          to: `/webhooks`,
+          icon: <WebhooksIcon />,
+        },
+      ],
+    },
+    {
+      name: "Settings",
+      subItems: [
+        {
+          name: "Preferences",
+          to: `/preferences`,
+          icon: <PreferencesIcon />,
+        },
+        {
+          name: "Admins",
+          to: `/super-admins`,
+          icon: <AdminsIcon />,
+        },
+      ],
+    },
+    // {
+    //   name: t.project({ plural: true, case: "capital" }),
+    //   to: `/projects`,
+    // },
+
+    // {
+    //   name: t.team({ plural: true, case: "capital" }),
+    //   to: `/groups`,
+    // },
+  ];
+};
 
 export default function IAMSidebar() {
   const location = useLocation();
+  const navigationItems = useNavigationItems();
 
   const isActive = (navlink?: string) => {
     const firstPathPart = location.pathname.split("/")[1];

web/apps/admin/src/contexts/App.tsx

@@ -11,6 +11,7 @@ import {
   type User,
 } from "@raystack/proton/frontier";
 import { Config, defaultConfig } from "~/utils/constants";
+import { AdminConfigProvider } from "@raystack/frontier/admin";
 
 interface AppContextValue {
   isAdmin: boolean;
@@ -62,7 +63,9 @@ export const AppContextProvider: React.FC<PropsWithChildren> = function ({
         config,
         user,
       }}>
-      {children}
+      <AdminConfigProvider config={config}>
+        {children}
+      </AdminConfigProvider>
     </AppContext.Provider>
   );
 };

web/apps/admin/src/pages/admins/AdminsPage.tsx

@@ -1,12 +1,13 @@
-import { AdminsView } from "@raystack/frontier/admin";
+import { AdminsView, useAdminPaths } from "@raystack/frontier/admin";
 import { useNavigate } from "react-router-dom";
 
 export function AdminsPage() {
   const navigate = useNavigate();
+  const paths = useAdminPaths();
 
   return (
     <AdminsView
-      onNavigateToOrg={(orgId: string) => navigate(`/organizations/${orgId}`)}
+      onNavigateToOrg={(orgId: string) => navigate(`/${paths.organizations}/${orgId}`)}
     />
   );
 }

web/apps/admin/src/pages/organizations/list/index.tsx

@@ -1,5 +1,6 @@
 import {
   OrganizationListView,
+  useAdminPaths,
 } from "@raystack/frontier/admin";
 import { useCallback, useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -17,15 +18,16 @@ async function loadCountries(): Promise<string[]> {
 export function OrganizationListPage() {
   const navigate = useNavigate();
   const { config } = useContext(AppContext);
+  const paths = useAdminPaths();
   const [countries, setCountries] = useState<string[]>([]);
 
   useEffect(() => {
     loadCountries().then(setCountries);
   }, []);
 
   const onNavigateToOrg = useCallback(
-    (id: string) => navigate(`/organizations/${id}`),
-    [navigate],
+    (id: string) => navigate(`/${paths.organizations}/${id}`),
+    [navigate, paths.organizations],
   );
 
   const onExportCsv = useCallback(async () => {

web/apps/admin/src/pages/users/UsersPage.tsx

@@ -1,4 +1,4 @@
-import { UsersView } from "@raystack/frontier/admin";
+import { UsersView, useAdminPaths } from "@raystack/frontier/admin";
 import { useCallback } from "react";
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { clients } from "~/connect/clients";
@@ -10,22 +10,23 @@ export function UsersPage() {
   const { userId } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
+  const paths = useAdminPaths();
 
   const onExportUsers = useCallback(async () => {
     await exportCsvFromStream(adminClient.exportUsers, {}, "users.csv");
   }, []);
 
   const onNavigateToUser = useCallback(
     (id: string) => {
-      navigate(`/users/${id}/security`);
+      navigate(`/${paths.users}/${id}/security`);
     },
-    [navigate],
+    [navigate, paths.users],
   );
 
   return (
     <UsersView
       selectedUserId={userId}
-      onCloseDetail={() => navigate("/users")}
+      onCloseDetail={() => navigate(`/${paths.users}`)}
       onExportUsers={onExportUsers}
       onNavigateToUser={onNavigateToUser}
       currentPath={location.pathname}

web/apps/admin/src/routes.tsx

@@ -31,6 +31,7 @@ import {
   OrganizationInvoicesView,
   OrganizationTokensView,
   OrganizationApisView,
+  useAdminPaths,
 } from "@raystack/frontier/admin";
 
 import { UsersPage } from "./pages/users/UsersPage";
@@ -40,6 +41,7 @@ import { AuditLogsPage } from "./pages/audit-logs/AuditLogsPage";
 
 export default memo(function AppRoutes() {
   const { isAdmin, isLoading, user } = useContext(AppContext);
+  const paths = useAdminPaths();
 
   const isUserEmpty = R.either(R.isEmpty, R.isNil)(user);
 
@@ -58,20 +60,20 @@ export default memo(function AppRoutes() {
   ) : isAdmin ? (
     <Routes>
       <Route path="/" element={<App />}>
-        <Route index element={<Navigate to="/organizations" />} />
-        <Route path="organizations" element={<OrganizationListPage />} />
+        <Route index element={<Navigate to={`/${paths.organizations}`} />} />
+        <Route path={paths.organizations} element={<OrganizationListPage />} />
         <Route
-          path="organizations/:organizationId"
+          path={`${paths.organizations}/:organizationId`}
           element={<OrganizationDetailsPage />}>
-          <Route index element={<Navigate to="members" replace />} />
-          <Route path="members" element={<OrganizationMembersView />} />
+          <Route index element={<Navigate to={paths.members} replace />} />
+          <Route path={paths.members} element={<OrganizationMembersView />} />
           <Route path="security" element={<OrganizationSecurity />} />
-          <Route path="projects" element={<OrganizationProjectsView />} />
+          <Route path={paths.projects} element={<OrganizationProjectsView />} />
           <Route path="invoices" element={<OrganizationInvoicesView />} />
           <Route path="tokens" element={<OrganizationTokensView />} />
           <Route path="apis" element={<OrganizationApisView />} />
         </Route>
-        <Route path="users" element={<UsersPage />}>
+        <Route path={paths.users} element={<UsersPage />}>
           <Route path=":userId" element={<UsersPage />} />
           <Route path=":userId/security" element={<UsersPage />} />
         </Route>
@@ -85,7 +87,7 @@ export default memo(function AppRoutes() {
         <Route path="roles" element={<RolesPage />}>
           <Route path=":roleId" element={<RolesPage />} />
         </Route>
-        
+
         <Route path="products" element={<ProductsPage />}>
           <Route path=":productId" element={<ProductsPage />} />
         </Route>
@@ -102,7 +104,7 @@ export default memo(function AppRoutes() {
           <Route path="create" element={<WebhooksPage />} />
           <Route path=":webhookId" element={<WebhooksPage />} />
         </Route>
-        <Route path="*" element={<Navigate to="/organizations" />} />
+        <Route path="*" element={<Navigate to={`/${paths.organizations}`} />} />
       </Route>
     </Routes>
   ) : (