feat(frontend): implement unified design system with 17 reusable template components, skeleton loading states, and golden-ratio-based layouts

frontend/src/pages/BestellungNeu.tsx

@@ -10,13 +10,13 @@ import {
   Tooltip,
 } from '@mui/material';
 import {
-  ArrowBack,
   Add as AddIcon,
   RemoveCircleOutline as RemoveIcon,
 } from '@mui/icons-material';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { PageHeader, FormLayout } from '../components/templates';
 import { useNotification } from '../contexts/NotificationContext';
 import { bestellungApi } from '../services/bestellung';
 import type { BestellungFormData, BestellpositionFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
@@ -75,16 +75,27 @@ export default function BestellungNeu() {
 
   return (
     <DashboardLayout>
-      {/* ── Header ── */}
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
-        <IconButton onClick={() => navigate('/bestellungen')}>
-          <ArrowBack />
-        </IconButton>
-        <Typography variant="h5" fontWeight={700}>Neue Bestellung</Typography>
-      </Box>
+      <PageHeader
+        title="Neue Bestellung"
+        breadcrumbs={[
+          { label: 'Bestellungen', href: '/bestellungen' },
+          { label: 'Neue Bestellung' },
+        ]}
+        backTo="/bestellungen"
+      />
 
-      {/* ── Form ── */}
-      <Paper sx={{ p: 3, display: 'flex', flexDirection: 'column', gap: 2.5 }}>
+      <FormLayout
+        actions={<>
+          <Button onClick={() => navigate('/bestellungen')}>Abbrechen</Button>
+          <Button
+            variant="contained"
+            onClick={handleSubmit}
+            disabled={!orderForm.bezeichnung.trim() || createOrder.isPending}
+          >
+            Erstellen
+          </Button>
+        </>}
+      >
         <TextField
           label="Bezeichnung"
           required
@@ -207,17 +218,7 @@ export default function BestellungNeu() {
         </Button>
 
         {/* ── Submit ── */}
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }}>
-          <Button onClick={() => navigate('/bestellungen')}>Abbrechen</Button>
-          <Button
-            variant="contained"
-            onClick={handleSubmit}
-            disabled={!orderForm.bezeichnung.trim() || createOrder.isPending}
-          >
-            Erstellen
-          </Button>
-        </Box>
-      </Paper>
+      </FormLayout>
     </DashboardLayout>
   );
 }