chore: heygermany customer project

apps/website/views/localized/app/backoffice/layout.tsx

@@ -0,0 +1,81 @@
+import { AppShell, Flex, Button, Box, Container } from '@pikku/mantine/core';
+import '@/styles/datatable.css';
+import { Link, useLocation, useNavigate, useParams } from '@tanstack/react-router';
+import { IconArrowLeft } from '@tabler/icons-react';
+import LanguageSelector from '@/components/ui/LanguageSelector';
+import Logo from '@/components/ui/Logo';
+import { useI18n } from '@/context/i18n-provider';
+import { asI18n } from '@pikku/react';
+
+interface BackOfficeLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function BackOfficeLayout({ children }: BackOfficeLayoutProps) {
+  const t = useI18n();
+  const pathname = useLocation({ select: (l) => l.pathname });
+  const navigate = useNavigate();
+  const params = useParams({ strict: false });
+  const lang = params.lang as string;
+  const isDetailPage = pathname.includes('/backoffice/candidate/');
+
+  // Don't apply AppShell to auth pages
+  if (pathname.includes('/backoffice/auth')) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AppShell
+      padding="md"
+      header={{ height: 80 }}
+      styles={{
+        main: {
+          backgroundColor: 'var(--mantine-color-gray-0)',
+        }
+      }}
+    >
+      <AppShell.Header>
+        {isDetailPage ? (
+          <Box style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', height: '100%' }}>
+            <Container size="xl" h="100%">
+              <Flex align="center" justify="space-between" h="100%">
+                <Button
+                  variant="default"
+                  leftSection={<IconArrowLeft size={16} />}
+                  onClick={() => navigate({ to: `/${lang}/backoffice/candidates` })}
+                >
+                  {t('backoffice.navigation.backtocandidates')}
+                </Button>
+                <LanguageSelector />
+              </Flex>
+            </Container>
+          </Box>
+        ) : (
+          <Flex align="center" justify="space-between" h="100%" px="md">
+            <Logo size="sm" type={t('backoffice.navigation.adminbadge')} />
+
+            <Flex gap="sm" align="center">
+              <Button
+                component={Link}
+                to={`/${lang}/backoffice/candidates`}
+                variant={pathname.includes('/backoffice/candidates') ? 'filled' : 'default'}
+              >
+                {asI18n('Candidates')}
+              </Button>
+              <Button
+                component={Link}
+                to={`/${lang}/backoffice/translations`}
+                variant={pathname.includes('/backoffice/translations') ? 'filled' : 'default'}
+              >
+                {asI18n('Translations')}
+              </Button>
+              <LanguageSelector />
+            </Flex>
+          </Flex>
+        )}
+      </AppShell.Header>
+
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
+  );
+}