Merge branch 'develop' into feature/MED-129

app/admin/_components/admin-menu-navigation.tsx

@@ -0,0 +1,24 @@
+import { SIDEBAR_WIDTH_PROPERTY } from '@/packages/ui/src/shadcn/constants';
+
+import { AppLogo } from '@kit/shared/components/app-logo';
+import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
+
+import type { UserWorkspace } from '../../home/(user)/_lib/server/load-user-workspace';
+
+export function AdminMenuNavigation(props: { workspace: UserWorkspace }) {
+  const { accounts } = props.workspace;
+
+  return (
+    <div className={'flex w-full flex-1 items-center justify-between gap-3'}>
+      <div className={`flex items-center ${SIDEBAR_WIDTH_PROPERTY}`}>
+        <AppLogo href={'/admin'} />
+      </div>
+
+      <div className="flex items-center justify-end gap-3">
+        <div>
+          <ProfileAccountDropdownContainer accounts={accounts} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/admin/_components/admin-sidebar.tsx

@@ -1,73 +1,25 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-
-import { UserWorkspace } from '@/app/home/(user)/_lib/server/load-user-workspace';
-import { LayoutDashboard, Users } from 'lucide-react';
-
+import { adminNavigationConfig } from '@kit/shared/config';
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  useSidebar,
+  SidebarNavigation,
 } from '@kit/ui/shadcn-sidebar';
 
-import { AppLogo } from '@kit/shared/components/app-logo';
-import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
+export function AdminSidebar() {
+  const collapsible = adminNavigationConfig.sidebarCollapsedStyle;
 
-export function AdminSidebar({
-  accounts,
-}: {
-  accounts: UserWorkspace['accounts'];
-}) {
-  const path = usePathname();
-  const { open } = useSidebar();
   return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader className={'m-2'}>
-        <AppLogo href={'/admin'} className="max-w-full" compact={!open} />
+    <Sidebar collapsible={collapsible}>
+      <SidebarHeader className="h-24 justify-center">
+        <div className="mt-24 flex items-center">
+          <h5>Superadmin</h5>
+        </div>
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Super Admin</SidebarGroupLabel>
-
-          <SidebarGroupContent>
-            <SidebarMenu>
-              <SidebarMenuButton isActive={path === '/admin'} asChild>
-                <Link className={'flex gap-2.5'} href={'/admin'}>
-                  <LayoutDashboard className={'h-4'} />
-                  <span>Dashboard</span>
-                </Link>
-              </SidebarMenuButton>
-
-              <SidebarMenuButton
-                isActive={path.includes('/admin/accounts')}
-                asChild
-              >
-                <Link
-                  className={'flex size-full gap-2.5'}
-                  href={'/admin/accounts'}
-                >
-                  <Users className={'h-4'} />
-                  <span>Accounts</span>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
+        <SidebarNavigation config={adminNavigationConfig} />
       </SidebarContent>
-
-      <SidebarFooter>
-        <ProfileAccountDropdownContainer accounts={accounts} />
-      </SidebarFooter>
     </Sidebar>
   );
 }

app/admin/accounts/[id]/page.tsx

@@ -2,6 +2,8 @@ import { cache } from 'react';
 
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
 import { getAccount } from '~/lib/services/account.service';
 
 interface Params {
@@ -26,6 +28,6 @@ async function AccountPage(props: Params) {
   return <AdminAccountPage account={account} />;
 }
 
-export default AdminGuard(AccountPage);
+export default withI18n(AdminGuard(AccountPage));
 
 const loadAccount = cache(getAccount);

app/admin/accounts/page.tsx

@@ -9,6 +9,8 @@ import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { Button } from '@kit/ui/button';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 interface SearchParams {
   page?: string;
   account_type?: 'all' | 'team' | 'personal';
@@ -30,7 +32,7 @@ async function AccountsPage(props: AdminAccountsPageProps) {
 
   return (
     <>
-      <PageHeader description={<AppBreadcrumbs />}>
+      <PageHeader description={<AppBreadcrumbs />} title="Accounts">
         <div className="flex justify-end gap-2">
           <AdminCreateUserDialog>
             <Button data-test="admin-create-user-button">
@@ -84,4 +86,4 @@ async function AccountsPage(props: AdminAccountsPageProps) {
   );
 }
 
-export default AdminGuard(AccountsPage);
+export default withI18n(AdminGuard(AccountsPage));

app/admin/layout.tsx

@@ -5,6 +5,7 @@ import { cookies } from 'next/headers';
 import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
+import { AdminMenuNavigation } from '~/admin/_components/admin-menu-navigation';
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
 
@@ -21,19 +22,24 @@ export default function AdminLayout(props: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
 
   return (
-    <SidebarProvider defaultOpen={state.open}>
-      <Page style={'sidebar'}>
-        <PageNavigation>
-          <AdminSidebar accounts={workspace.accounts} />
-        </PageNavigation>
+    <Page style={'header'}>
+      <PageNavigation>
+        <AdminMenuNavigation workspace={workspace} />
+      </PageNavigation>
 
-        <PageMobileNavigation>
-          <AdminMobileNavigation />
-        </PageMobileNavigation>
+      <PageMobileNavigation>
+        <AdminMobileNavigation />
+      </PageMobileNavigation>
 
-        {props.children}
-      </Page>
-    </SidebarProvider>
+      <SidebarProvider defaultOpen={state.open}>
+        <Page style={'sidebar'}>
+          <PageNavigation>
+            <AdminSidebar />
+          </PageNavigation>
+          {props.children}
+        </Page>
+      </SidebarProvider>
+    </Page>
   );
 }
 

app/admin/page.tsx

@@ -2,10 +2,12 @@ import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 function AdminPage() {
   return (
     <>
-      <PageHeader description={`Super Admin`} />
+      <PageHeader title={`Super Admin`} />
 
       <PageBody>
         <AdminDashboard />
@@ -14,4 +16,4 @@ function AdminPage() {
   );
 }
 
-export default AdminGuard(AdminPage);
+export default withI18n(AdminGuard(AdminPage));