Add version display to admin settings page

Set frontend version to 1.0.0, inject it as a build-time constant
via Vite define, and show both frontend and API versions in a new
System Information card on the admin settings page.

eslint.config.js

@@ -15,7 +15,7 @@ export default defineConfig([
     ],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: { ...globals.browser, __APP_VERSION__: 'readonly' },
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "apartment-dashboard",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/pages/admin/AdminSettings.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { Settings, AlertTriangle, RefreshCw, Save, Clock } from 'lucide-react';
+import { Settings, AlertTriangle, RefreshCw, Save, Clock, Info } from 'lucide-react';
 
 const API_BASE = 'https://apartments.maverickapplications.com/api';
 
@@ -11,6 +11,7 @@ const AdminSettings = () => {
   const [error, setError] = useState(null);
   const [saveError, setSaveError] = useState(null);
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [apiVersion, setApiVersion] = useState(null);
 
   // Form state
   const [retentionDays, setRetentionDays] = useState(90);
@@ -53,6 +54,14 @@ const AdminSettings = () => {
     }
   }, []);
 
+  // Fetch API version from health endpoint
+  useEffect(() => {
+    fetch(`${API_BASE}/health`)
+      .then(res => res.json())
+      .then(data => setApiVersion(data.version || 'unknown'))
+      .catch(() => setApiVersion('unavailable'));
+  }, []);
+
   // Fetch on mount
   useEffect(() => {
     fetchSettings();
@@ -287,6 +296,24 @@ const AdminSettings = () => {
         </div>
       )}
 
+      {/* System Information */}
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <div className="flex items-center space-x-2 mb-6">
+          <Info className="w-5 h-5 text-violet-600" />
+          <h2 className="text-lg font-semibold text-gray-900">System Information</h2>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-lg">
+          <div className="bg-gray-50 rounded-md p-3">
+            <p className="text-sm text-gray-500">Frontend Version</p>
+            <p className="text-lg font-semibold text-gray-900">{__APP_VERSION__}</p>
+          </div>
+          <div className="bg-gray-50 rounded-md p-3">
+            <p className="text-sm text-gray-500">API Version</p>
+            <p className="text-lg font-semibold text-gray-900">{apiVersion ?? '...'}</p>
+          </div>
+        </div>
+      </div>
+
       {/* Warning Dialog */}
       {showWarningDialog && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">

vite.config.js

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { readFileSync } from 'fs'
+
+const pkg = JSON.parse(readFileSync('./package.json', 'utf-8'))
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version)
+  },
 })