k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Karli
2025-09-23 19:22:40 +03:00
parent f0853409c8
commit 3212b52b02
13 changed files with 102 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/admin/_components/admin-menu-navigation.tsx Normal file
View File

@@ -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>
);
}

69
app/admin/_components/admin-sidebar.tsx
View File

@@ -1,72 +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 { AppLogo } from '@kit/shared/components/app-logo';
import { ProfileAccountDropdownContainer } from '@kit/shared/components/personal-account-dropdown-container';
import { adminNavigationConfig } from '@kit/shared/config';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
useSidebar,
SidebarNavigation,
} from '@kit/ui/shadcn-sidebar';
export function AdminSidebar({
accounts,
}: {
accounts: UserWorkspace['accounts'];
}) {
const path = usePathname();
const { open } = useSidebar();
export function AdminSidebar() {
const collapsible = adminNavigationConfig.sidebarCollapsedStyle;
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>
);
}

28
app/admin/layout.tsx
View File

@@ -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={'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>
);
}

2
app/admin/page.tsx
View File

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

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

@@ -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} />;
}

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

@@ -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 userId = user.id;
const { account, accounts } = props;
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">
<div className="flex items-center justify-between gap-x-3">
<TeamAccountAccountsSelector
userId={userId}
selectedAccount={account}
accounts={accounts}
/>
<div className="group-data-[minimized=true]:hidden">
<TeamAccountNotifications
userId={userId}
accountId={props.accountId}
/>
</div>
<SidebarHeader className="h-24 justify-center">
<div className="mt-24 flex items-center">
<h5>{accountName}</h5>
</div>
</SidebarHeader>
<SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
<TeamAccountLayoutSidebarNavigation config={config} />
<SidebarContent>
<SidebarNavigation config={config} />
</SidebarContent>
<SidebarFooter>
<SidebarContent>
<ProfileAccountDropdownContainer
user={props.user}
accounts={accounts}
/>
</SidebarContent>
</SidebarFooter>
</Sidebar>
);
}

19
app/home/[account]/layout.tsx
View File

@@ -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>

33
packages/shared/src/config/admin-navigation.config.tsx Normal file
View File

@@ -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',
});

2
packages/shared/src/config/index.ts
View File

@@ -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,

7
packages/shared/src/config/team-account-navigation.config.tsx
View File

@@ -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),

1
public/locales/en/common.json
View File

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

1
public/locales/et/common.json
View File

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

1
public/locales/ru/common.json
View File

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