backoffice

apps/backoffice/src/app/features/location/pages/LocationPage.tsx

@@ -1,23 +1,9 @@
 import { useState, useCallback } from 'react';
-import {
-  Stack,
-  Title,
-  Group,
-  Button,
-  Paper,
-  Text,
-  Grid,
-  Modal,
-  ActionIcon,
-  Tooltip,
-  Loader,
-  Center,
-  Alert,
-} from '@mantine/core';
+import {Stack, Group, Button, Paper, Text, Grid, Modal, ActionIcon, Tooltip, Loader, Center, Alert} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconSettings, IconMap, IconInfoCircle, IconPlus } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
-import { notify, useErrorHandler, ModalFooter, PageLoader } from '@ema-platform/ui';
+import { ModalFooter, notify, PageHeader, PageLoader, useErrorHandler } from '@ema-platform/ui';
 import { LocationTree } from '../components/LocationTree';
 import { LocationDetail } from '../components/LocationDetail';
 import { LocationForm } from '../components/LocationForm';
@@ -108,9 +94,11 @@ export function LocationPage() {
 
   return (
     <Stack gap="lg">
-      <Group justify="space-between">
-        <Title order={2}>{t('location.title')}</Title>
-        <Group gap="sm">
+      <PageHeader
+        title={t('location.title')}
+        noMargin
+        action={
+          <Group gap="sm">
           {locationTypes.length > 0 && (
             <Button
               variant="light"
@@ -135,8 +123,9 @@ export function LocationPage() {
               <IconSettings size={20} />
             </ActionIcon>
           </Tooltip>
-        </Group>
-      </Group>
+          </Group>
+        }
+      />
 
       {locationTypes.length === 0 && (
         <Alert