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

frontend/src/pages/Ausruestung.tsx

@@ -9,11 +9,6 @@ import {
   Chip,
   CircularProgress,
   Container,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
   FormControl,
   FormControlLabel,
   Grid,
@@ -41,14 +36,12 @@ import {
   Add as AddIcon,
   Build,
   CheckCircle,
-  Close,
   Delete,
   Edit,
   Error as ErrorIcon,
   LinkRounded,
   PauseCircle,
   RemoveCircle,
-  Save,
   Search,
   Star,
   Warning,
@@ -68,6 +61,7 @@ import {
 import { usePermissions } from '../hooks/usePermissions';
 import { useNotification } from '../contexts/NotificationContext';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
+import { ConfirmDialog, FormDialog } from '../components/templates';
 
 // ── Status chip config ────────────────────────────────────────────────────────
 
@@ -416,18 +410,18 @@ function AusruestungTypenSettings() {
       )}
 
       {/* Add/Edit dialog */}
-      <Dialog open={dialogOpen} onClose={closeDialog} maxWidth="sm" fullWidth>
-        <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          {editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
-          <IconButton onClick={closeDialog} size="small"><Close /></IconButton>
-        </DialogTitle>
-        <DialogContent>
+      <FormDialog
+        open={dialogOpen}
+        onClose={closeDialog}
+        onSubmit={handleSave}
+        title={editingTyp ? 'Typ bearbeiten' : 'Neuen Typ erstellen'}
+        isSubmitting={isSaving}
+      >
           <TextField
             label="Name *"
             fullWidth
             value={formName}
             onChange={(e) => setFormName(e.target.value)}
-            sx={{ mt: 1, mb: 2 }}
             inputProps={{ maxLength: 100 }}
           />
           <TextField
@@ -437,7 +431,6 @@ function AusruestungTypenSettings() {
             rows={2}
             value={formBeschreibung}
             onChange={(e) => setFormBeschreibung(e.target.value)}
-            sx={{ mb: 2 }}
           />
           <TextField
             label="Icon (MUI Icon-Name)"
@@ -446,44 +439,19 @@ function AusruestungTypenSettings() {
             onChange={(e) => setFormIcon(e.target.value)}
             placeholder="z.B. Build, LocalFireDepartment"
           />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeDialog}>Abbrechen</Button>
-          <Button
-            variant="contained"
-            onClick={handleSave}
-            disabled={isSaving || !formName.trim()}
-            startIcon={isSaving ? <CircularProgress size={16} /> : <Save />}
-          >
-            Speichern
-          </Button>
-        </DialogActions>
-      </Dialog>
+      </FormDialog>
 
       {/* Delete confirmation dialog */}
-      <Dialog open={deleteDialogOpen} onClose={() => !deleteMutation.isPending && setDeleteDialogOpen(false)}>
-        <DialogTitle>Typ löschen</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen?
-            Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setDeleteDialogOpen(false)} disabled={deleteMutation.isPending}>
-            Abbrechen
-          </Button>
-          <Button
-            color="error"
-            variant="contained"
-            onClick={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
-            disabled={deleteMutation.isPending}
-            startIcon={deleteMutation.isPending ? <CircularProgress size={16} /> : undefined}
-          >
-            Löschen
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <ConfirmDialog
+        open={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        onConfirm={() => deletingTyp && deleteMutation.mutate(deletingTyp.id)}
+        title="Typ löschen"
+        message={<>Möchten Sie den Typ &quot;{deletingTyp?.name}&quot; wirklich löschen? Geräte, denen dieser Typ zugeordnet ist, verlieren die Zuordnung.</>}
+        confirmLabel="Löschen"
+        confirmColor="error"
+        isLoading={deleteMutation.isPending}
+      />
     </Box>
   );
 }