Project Init

apps/backoffice/src/app/layouts/AuthLayout.tsx

@@ -0,0 +1,12 @@
+import { Center, Box } from '@mantine/core';
+import { Outlet } from 'react-router-dom';
+
+export function AuthLayout() {
+  return (
+    <Center h="100vh" bg="gray.0">
+      <Box w={420}>
+        <Outlet />
+      </Box>
+    </Center>
+  );
+}

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -0,0 +1,27 @@
+import { AppShell } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { Outlet } from 'react-router-dom';
+import { AppHeader } from './components/AppHeader';
+import { AppSidebar } from './components/AppSidebar';
+
+export function BackofficeLayout() {
+  const [opened, { toggle }] = useDisclosure();
+
+  return (
+    <AppShell
+      header={{ height: 60 }}
+      navbar={{ width: 240, breakpoint: 'sm', collapsed: { mobile: !opened } }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <AppHeader onToggle={toggle} />
+      </AppShell.Header>
+      <AppShell.Navbar>
+        <AppSidebar />
+      </AppShell.Navbar>
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
+    </AppShell>
+  );
+}

apps/backoffice/src/app/layouts/components/AppHeader.tsx

@@ -0,0 +1,32 @@
+import { Group, Text, ActionIcon, Burger } from '@mantine/core';
+import { IconLogout } from '@tabler/icons-react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../features/auth/hooks/useAuth';
+
+interface AppHeaderProps {
+  onToggle: () => void;
+}
+
+export function AppHeader({ onToggle }: AppHeaderProps) {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  return (
+    <Group h="100%" px="md" justify="space-between">
+      <Group>
+        <Burger onClick={onToggle} size="sm" hiddenFrom="sm" />
+        <Text fw={700} size="lg">
+          EMA Backoffice
+        </Text>
+      </Group>
+      <ActionIcon variant="subtle" onClick={handleLogout} title="Logout">
+        <IconLogout size={18} />
+      </ActionIcon>
+    </Group>
+  );
+}

apps/backoffice/src/app/layouts/components/AppSidebar.tsx

@@ -0,0 +1,27 @@
+import { NavLink, Stack } from '@mantine/core';
+import { IconDashboard, IconBox } from '@tabler/icons-react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+const NAV_ITEMS = [
+  { label: 'Dashboard', icon: IconDashboard, path: '/dashboard' },
+  { label: 'Items', icon: IconBox, path: '/items' },
+];
+
+export function AppSidebar() {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  return (
+    <Stack p="xs" gap={4}>
+      {NAV_ITEMS.map(({ label, icon: Icon, path }) => (
+        <NavLink
+          key={path}
+          label={label}
+          leftSection={<Icon size={18} />}
+          active={pathname.startsWith(path)}
+          onClick={() => navigate(path)}
+        />
+      ))}
+    </Stack>
+  );
+}