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

frontend/src/pages/MitgliedDetail.tsx

@@ -61,6 +61,7 @@ import {
   UpdateMemberProfileData,
 } from '../types/member.types';
 import type { Befoerderung, Untersuchung, Fahrgenehmigung, Ausbildung } from '../types/member.types';
+import { StatusChip, TabPanel, PageHeader } from '../components/templates';
 import type { AtemschutzUebersicht } from '../types/atemschutz.types';
 import { UntersuchungErgebnisLabel } from '../types/atemschutz.types';
 
@@ -77,23 +78,6 @@ function useCurrentUserId(): string | undefined {
   return (user as any)?.id;
 }
 
-// ----------------------------------------------------------------
-// Tab panel helper
-// ----------------------------------------------------------------
-interface TabPanelProps {
-  children?: React.ReactNode;
-  value: number;
-  index: number;
-}
-
-function TabPanel({ children, value, index }: TabPanelProps) {
-  return (
-    <div role="tabpanel" hidden={value !== index} aria-labelledby={`tab-${index}`}>
-      {value === index && <Box sx={{ pt: 3 }}>{children}</Box>}
-    </div>
-  );
-}
-
 // ----------------------------------------------------------------
 // Rank history timeline component
 // ----------------------------------------------------------------
@@ -432,14 +416,10 @@ function MitgliedDetail() {
   return (
     <DashboardLayout>
       <Container maxWidth="lg">
-        {/* Back button */}
-        <Button
-          variant="text"
-          onClick={() => navigate('/mitglieder')}
-          sx={{ mb: 2 }}
-        >
-          ← Mitgliederliste
-        </Button>
+        <PageHeader
+          title={displayName}
+          backTo="/mitglieder"
+        />
 
         {/* Header card */}
         <Card sx={{ mb: 3 }}>
@@ -459,10 +439,10 @@ function MitgliedDetail() {
                     {displayName}
                   </Typography>
                   {profile?.status && (
-                    <Chip
-                      label={STATUS_LABELS[profile.status]}
-                      size="small"
-                      color={STATUS_COLORS[profile.status]}
+                    <StatusChip
+                      status={profile.status}
+                      labelMap={STATUS_LABELS}
+                      colorMap={STATUS_COLORS}
                     />
                   )}
                 </Box>
@@ -694,7 +674,7 @@ function MitgliedDetail() {
                       />
                       <FieldRow label="Status" value={
                         profile?.status
-                          ? <Chip label={STATUS_LABELS[profile.status]} size="small" color={STATUS_COLORS[profile.status]} />
+                          ? <StatusChip status={profile.status} labelMap={STATUS_LABELS} colorMap={STATUS_COLORS} />
                           : null
                       } />
                       <FieldRow