u

src/components/settings/SettingsDialog.jsx

@@ -13,6 +13,8 @@ import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import authAutomat from '../../automats/authAutomat';
 import CompanySettingsPanel from './CompanySettingsPanel';
 import NumberSettingsPanel from './NumberSettingsPanel';
 import PrinterSettingsPanel from './PrinterSettingsPanel';
@@ -54,15 +56,31 @@ const TABS = [
 export default class SettingsDialog extends Component {
   constructor(props) {
     super(props);
-    this.state = { tab: TAB_KEYS.health };
+    this.state = {
+      tab: TAB_KEYS.health,
+      schemaVersion: authAutomat.state.schemaVersion,
+    };
     this.handleTabChange = this.handleTabChange.bind(this);
   }
 
+  componentDidMount() {
+    this.unsubAuth = authAutomat.subscribe(this, ['schemaVersion']);
+  }
+
+  componentWillUnmount() {
+    this.unsubAuth?.();
+  }
+
   componentDidUpdate(prevProps) {
     const { open } = this.props;
     if (!open && prevProps.open) {
       this.setState({ tab: TAB_KEYS.health });
     }
+    if (open && !prevProps.open) {
+      if (this.state.schemaVersion !== authAutomat.state.schemaVersion) {
+        this.setState({ schemaVersion: authAutomat.state.schemaVersion });
+      }
+    }
   }
 
   handleTabChange(_event, value) {
@@ -71,7 +89,7 @@ export default class SettingsDialog extends Component {
 
   render() {
     const { open, onClose } = this.props;
-    const { tab } = this.state;
+    const { tab, schemaVersion } = this.state;
 
     const paperSx = {
       height: '85vh',
@@ -120,6 +138,9 @@ export default class SettingsDialog extends Component {
               borderColor: 'divider',
               bgcolor: SURFACE_BASE,
               py: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
               overflowY: 'auto',
             }}
           >
@@ -172,6 +193,13 @@ export default class SettingsDialog extends Component {
                 />
               ))}
             </Tabs>
+            {schemaVersion != null && (
+              <Box sx={{ px: 2.5, py: 1.5, mt: 'auto', borderTop: '1px solid', borderColor: 'divider' }}>
+                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', px: 0.5 }}>
+                  DB-Version: {schemaVersion}
+                </Typography>
+              </Box>
+            )}
           </Box>
 
           {/* Right content panel */}