feat(MED-97): fix /home/[account] and /admin* routes layout consistencies

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

@@ -0,0 +1,27 @@
+import { AppLogo } from '@kit/shared/components/app-logo';
+import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
+import { SIDEBAR_WIDTH_PROPERTY } from '@/packages/ui/src/shadcn/constants';
+
+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,72 +1,25 @@
-'use client';
+import { adminNavigationConfig } from '@kit/shared/config';
-
-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 { AppLogo } from '@kit/shared/components/app-logo';
-import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
-  SidebarMenu,
+  SidebarNavigation,
-  SidebarMenuButton,
-  useSidebar,
 } from '@kit/ui/shadcn-sidebar';
 
-export function AdminSidebar({
+export function AdminSidebar() {
-  accounts,
+  const collapsible = adminNavigationConfig.sidebarCollapsedStyle;
-}: {
+
-  accounts: UserWorkspace['accounts'];
-}) {
-  const path = usePathname();
-  const { open } = useSidebar();
   return (
-    <Sidebar collapsible="icon">
+    <Sidebar collapsible={collapsible}>
-      <SidebarHeader className={'m-2'}>
+      <SidebarHeader className="h-24 justify-center">
-        <AppLogo href={'/admin'} className="max-w-full" compact={!open} />
+        <div className="mt-24 flex items-center">
+          <h5>Superadmin</h5>
+        </div>
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarGroup>
+        <SidebarNavigation config={adminNavigationConfig} />
-          <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>
       </SidebarContent>
-
-      <SidebarFooter>
-        <ProfileAccountDropdownContainer accounts={accounts} />
-      </SidebarFooter>
     </Sidebar>
   );
 }

app/admin/layout.tsx

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

app/admin/page.tsx

@@ -5,7 +5,7 @@ import { PageBody, PageHeader } from '@kit/ui/page';
 function AdminPage() {
   return (
     <>
-      <PageHeader description={`Super Admin`} />
+      <PageHeader title={`Super Admin`} />
 
       <PageBody>
         <AdminDashboard />

app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx

@@ -1,12 +0,0 @@
-import { z } from 'zod';
-
-import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
-import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
-
-export function TeamAccountLayoutSidebarNavigation({
-  config,
-}: React.PropsWithChildren<{
-  config: z.infer<typeof NavigationConfigSchema>;
-}>) {
-  return <SidebarNavigation config={config} />;
-}

app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,20 +1,12 @@
-import type { User } from '@supabase/supabase-js';
-
 import { ApplicationRole } from '@kit/accounts/types/accounts';
-import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
 import { getTeamAccountSidebarConfig } from '@kit/shared/config';
 import {
   Sidebar,
   SidebarContent,
-  SidebarFooter,
   SidebarHeader,
+  SidebarNavigation,
 } from '@kit/ui/shadcn-sidebar';
 
-import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
-
-import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
-import { TeamAccountLayoutSidebarNavigation } from './team-account-layout-sidebar-navigation';
-
 type AccountModel = {
   label: string | null;
   value: string | null;
@@ -26,14 +18,12 @@ export function TeamAccountLayoutSidebar(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  user: User;
 }) {
   return (
     <SidebarContainer
       account={props.account}
       accountId={props.accountId}
       accounts={props.accounts}
-      user={props.user}
     />
   );
 }
@@ -42,45 +32,27 @@ function SidebarContainer(props: {
   account: string;
   accountId: string;
   accounts: AccountModel[];
-  user: User;
 }) {
-  const { account, accounts, user } = props;
+  const { account, accounts } = props;
-  const userId = user.id;
 
   const config = getTeamAccountSidebarConfig(account);
   const collapsible = config.sidebarCollapsedStyle;
 
+  const selectedAccount = accounts.find(({ value }) => value === account);
+  const accountName = selectedAccount?.label || account;
+
   return (
     <Sidebar collapsible={collapsible}>
-      <SidebarHeader className="h-16 justify-center">
+      <SidebarHeader className="h-24 justify-center">
-        <div className="flex items-center justify-between gap-x-3">
+        <div className="mt-24 flex items-center">
-          <TeamAccountAccountsSelector
+          <h5>{accountName}</h5>
-            userId={userId}
-            selectedAccount={account}
-            accounts={accounts}
-          />
-
-          <div className="group-data-[minimized=true]:hidden">
-            <TeamAccountNotifications
-              userId={userId}
-              accountId={props.accountId}
-            />
-          </div>
         </div>
       </SidebarHeader>
 
-      <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
+      <SidebarContent>
-        <TeamAccountLayoutSidebarNavigation config={config} />
+        <SidebarNavigation config={config} />
       </SidebarContent>
 
-      <SidebarFooter>
-        <SidebarContent>
-          <ProfileAccountDropdownContainer
-            user={props.user}
-            accounts={accounts}
-          />
-        </SidebarContent>
-      </SidebarFooter>
     </Sidebar>
   );
 }

app/home/[account]/layout.tsx

@@ -15,7 +15,6 @@ import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-// local imports
 import { TeamAccountLayoutMobileNavigation } from './_components/team-account-layout-mobile-navigation';
 import { TeamAccountLayoutSidebar } from './_components/team-account-layout-sidebar';
 import { TeamAccountNavigationMenu } from './_components/team-account-navigation-menu';
@@ -57,13 +56,12 @@ function SidebarLayout({
   return (
     <TeamAccountWorkspaceContextProvider value={data}>
       <SidebarProvider defaultOpen={state.open}>
-        <Page style={'sidebar'}>
+        <Page style={'header'}>
           <PageNavigation>
             <TeamAccountLayoutSidebar
               account={account}
               accountId={data.account.id}
               accounts={accounts}
-              user={data.user}
             />
           </PageNavigation>
 
@@ -129,23 +127,8 @@ function HeaderLayout({
                 account={account}
                 accountId={data.account.id}
                 accounts={accounts}
-                user={data.user}
               />
             </PageNavigation>
-
-            <PageMobileNavigation
-              className={'flex items-center justify-between'}
-            >
-              <AppLogo href={pathsConfig.app.home} />
-              <div className={'flex space-x-4'}>
-                <TeamAccountLayoutMobileNavigation
-                  userId={data.user.id}
-                  accounts={accounts}
-                  account={account}
-                />
-              </div>
-            </PageMobileNavigation>
-
             {children}
           </Page>
         </SidebarProvider>

packages/shared/src/config/admin-navigation.config.tsx

@@ -0,0 +1,33 @@
+import { LayoutDashboard, Users } from 'lucide-react';
+import { z } from 'zod';
+
+import { pathsConfig } from '@kit/shared/config';
+import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
+
+const iconClasses = 'w-4 stroke-[1.5px]';
+
+const routes = [
+  {
+    children: [
+      {
+        label: 'Dashboard',
+        path: pathsConfig.app.admin,
+        Icon: <LayoutDashboard className={iconClasses} />,
+        end: true,
+      },
+      {
+        label: 'Accounts',
+        path: `${pathsConfig.app.admin}/accounts`,
+        Icon: <Users className={iconClasses} />,
+        end: true,
+      },
+    ],
+  },
+] satisfies z.infer<typeof NavigationConfigSchema>['routes'];
+
+export const adminNavigationConfig = NavigationConfigSchema.parse({
+  routes,
+  style: 'custom',
+  sidebarCollapsed: false,
+  sidebarCollapsedStyle: 'icon',
+});

packages/shared/src/config/index.ts

@@ -1,6 +1,7 @@
 import appConfig from './app.config';
 import authConfig from './auth.config';
 import billingConfig from './billing.config';
+import { adminNavigationConfig } from './admin-navigation.config';
 import {
   DynamicAuthConfig,
   getCachedAuthConfig,
@@ -15,6 +16,7 @@ import {
 } from './team-account-navigation.config';
 
 export {
+  adminNavigationConfig,
   appConfig,
   authConfig,
   billingConfig,

packages/shared/src/config/team-account-navigation.config.tsx

@@ -7,7 +7,6 @@ const iconClasses = 'w-4';
 
 const getRoutes = (account: string) => [
   {
-    label: 'common:routes.application',
     children: [
       {
         label: 'common:routes.dashboard',
@@ -15,12 +14,6 @@ const getRoutes = (account: string) => [
         Icon: <LayoutDashboard className={iconClasses} />,
         end: true,
       },
-    ],
-  },
-  {
-    label: 'common:routes.settings',
-    collapsible: false,
-    children: [
       {
         label: 'common:routes.settings',
         path: createPath(pathsConfig.app.accountSettings, account),

public/locales/en/common.json

@@ -80,7 +80,6 @@
     "dashboard": "Dashboard",
     "settings": "Settings",
     "profile": "Profile",
-    "application": "Application",
     "pickTime": "Pick time",
     "preferences": "Preferences",
     "security": "Security"

public/locales/et/common.json

@@ -80,7 +80,6 @@
     "dashboard": "Ülevaade",
     "settings": "Seaded",
     "profile": "Profiil",
-    "application": "Rakendus",
     "pickTime": "Vali aeg",
     "preferences": "Eelistused",
     "security": "Turvalisus"

public/locales/ru/common.json

@@ -80,7 +80,6 @@
     "dashboard": "Обзор",
     "settings": "Настройки",
     "profile": "Профиль",
-    "application": "Приложение",
     "pickTime": "Выбрать время",
     "preferences": "Предпочтения",
     "security": "Безопасность"