Add Kundennummer/Nummernkreise settings and settings dialog.

Add number & setting API endpoints, StorageManager caches, and a Settings
dialog (tabs for settings keys and number ranges) reachable from the user
menu. Show Kundennummer and creation date in the Kunde list, and refactor
Neuer Kunde to show an auto-generated number with group select.

src/components/settings/SettingsDialog.jsx

@@ -0,0 +1,76 @@
+import { Component } from 'react';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import TuneIcon from '@mui/icons-material/Tune';
+import NumberSettingsPanel from './NumberSettingsPanel';
+import SettingsKeysPanel from './SettingsKeysPanel';
+
+const TAB_KEYS = {
+  keys: 'keys',
+  numbers: 'numbers',
+};
+
+const TABS = [
+  { id: TAB_KEYS.keys, label: 'Einstellungen', icon: <TuneIcon />, Panel: SettingsKeysPanel },
+  { id: TAB_KEYS.numbers, label: 'Nummernkreise', icon: <NumbersIcon />, Panel: NumberSettingsPanel },
+];
+
+export default class SettingsDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { tab: TAB_KEYS.keys };
+    this.handleTabChange = this.handleTabChange.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { open } = this.props;
+    if (!open && prevProps.open) {
+      this.setState({ tab: TAB_KEYS.keys });
+    }
+  }
+
+  handleTabChange(_event, value) {
+    this.setState({ tab: value });
+  }
+
+  render() {
+    const { open, onClose } = this.props;
+    const { tab } = this.state;
+
+    return (
+      <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+        <DialogTitle>Einstellungen</DialogTitle>
+        <Tabs
+          value={tab}
+          onChange={this.handleTabChange}
+          variant="fullWidth"
+          sx={{ px: 3 }}
+        >
+          {TABS.map((t) => (
+            <Tab key={t.id} icon={t.icon} iconPosition="start" label={t.label} value={t.id} />
+          ))}
+        </Tabs>
+        <DialogContent dividers>
+          <Box sx={{ display: 'grid' }}>
+            {TABS.map((t) => (
+              <Box
+                key={t.id}
+                sx={{
+                  gridArea: '1 / 1',
+                  visibility: t.id === tab ? undefined : 'hidden',
+                }}
+              >
+                <t.Panel />
+              </Box>
+            ))}
+          </Box>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+}