Updating system page to match styling

static/css/system.css

@@ -1,85 +1,201 @@
 body {
-	font-family: Arial, sans-serif;
-	padding: 20px;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+	background-color: var(--bg-primary);
+	color: var(--text-primary);
+	margin: 0;
+	min-height: 100vh;
+}
+
+.system-page {
+	padding: var(--spacing-xl);
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.system-header {
+	margin-bottom: var(--spacing-xl);
+}
+
+.system-header h1 {
+	font-size: 1.8rem;
+	color: var(--text-primary);
+	margin-top: var(--spacing-md);
+}
+
+.back-link {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+	color: var(--primary-color);
+	text-decoration: none;
+	font-size: 0.9rem;
+}
+
+.back-link:hover {
+	text-decoration: underline;
+}
+
+.tab-container {
+	background: var(--bg-secondary);
+	border-radius: 12px;
+	border: 1px solid var(--border-color);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - 160px); /* Account for header space */
 }
 
 .tab-bar {
-	margin-bottom: 20px;
+	display: flex;
+	gap: 2px;
+	padding: var(--spacing-md);
+	background: var(--bg-tertiary);
+	border-bottom: 1px solid var(--border-color);
+	flex-shrink: 0;
 }
 
 .tab-button {
-	padding: 10px 20px;
-	border: none;
-	background: #f0f0f0;
+	padding: var(--spacing-md) var(--spacing-lg);
+	background: var(--bg-primary);
+	border: 1px solid var(--border-color);
+	border-radius: 8px;
+	color: var(--text-secondary);
+	font-size: 0.9rem;
 	cursor: pointer;
-	margin-right: 5px;
-	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+	transition: all var(--transition-fast);
+}
+
+.tab-button:hover {
+	background: var(--bg-secondary);
 }
 
 .tab-button.active {
-	background: #007bff;
+	background: var(--primary-color);
 	color: white;
+	border-color: var(--primary-color);
 }
 
 .tab-content {
 	display: none;
+	padding: var(--spacing-lg);
+	overflow-y: auto;
+	flex: 1;
 }
 
 .tab-content.active {
 	display: block;
 }
 
-/* Health status styles */
-.status-ok {
-	color: green;
+.status-card {
+	background: var(--bg-primary);
+	border-radius: 8px;
+	padding: var(--spacing-lg);
 }
 
-.status-error {
-	color: red;
+.status-content {
+	display: grid;
+	gap: var(--spacing-md);
 }
 
 .component {
-	margin: 10px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-md);
+	background: var(--bg-secondary);
+	border-radius: 6px;
+	border: 1px solid var(--border-color);
+}
+
+.collections-grid {
+	display: grid;
+	gap: var(--spacing-lg);
+	margin-bottom: var(--spacing-lg);
 }
 
-/* Database status styles */
 .collection {
-	margin: 20px 0;
-	padding: 15px;
-	border: 1px solid #ddd;
-	border-radius: 4px;
+	background: var(--bg-secondary);
+	border-radius: 8px;
+	padding: var(--spacing-lg);
+	border: 1px solid var(--border-color);
 }
 
 .collection h2 {
-	margin-top: 0;
-	color: #333;
+	color: var(--text-primary);
+	font-size: 1.2rem;
+	margin-bottom: var(--spacing-md);
 }
 
-.stats {
-	color: #666;
+.collection .stats {
+	color: var(--text-secondary);
+	font-size: 0.9rem;
+	margin-bottom: var(--spacing-md);
 }
 
-.timestamp {
-	color: #888;
-	font-style: italic;
+.collection .fields {
+	background: var(--bg-tertiary);
+	border-radius: 6px;
+	padding: var(--spacing-md);
 }
 
-.fields {
-	margin-top: 15px;
+.collection .fields h3 {
+	color: var(--text-secondary);
+	font-size: 0.9rem;
+	margin-bottom: var(--spacing-sm);
 }
 
-.fields h3 {
-	color: #444;
-	margin-bottom: 10px;
+.collection .fields ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: grid;
+	gap: 4px;
 }
 
-.fields ul {
-	list-style-type: none;
-	padding-left: 20px;
+.collection .fields li {
+	color: var(--text-primary);
+	font-size: 0.85rem;
+	font-family: monospace;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
 }
 
-.fields li {
-	color: #555;
-	margin: 3px 0;
-	font-family: monospace;
+@media (max-width: 768px) {
+	.system-page {
+		padding: var(--spacing-md);
+	}
+
+	.tab-container {
+		height: calc(100vh - 140px);
+	}
+
+	.tab-bar {
+		flex-direction: column;
+	}
+
+	.collection {
+		padding: var(--spacing-md);
+	}
+}
+
+/* Scrollbar styling to match main theme */
+.tab-content::-webkit-scrollbar {
+	width: 6px;
+}
+
+.tab-content::-webkit-scrollbar-track {
+	background: var(--bg-secondary);
+}
+
+.tab-content::-webkit-scrollbar-thumb {
+	background: var(--border-color);
+	border-radius: 3px;
+}
+
+.tab-content::-webkit-scrollbar-thumb:hover {
+	background: var(--border-hover);
 }

static/js/system.js

@@ -50,19 +50,19 @@ async function updateDatabase() {
 }
 
 function displayDatabaseStatus(data) {
-	document.getElementById('db-timestamp').textContent = `Last updated: ${data.timestamp}`;
+	document.getElementById('db-timestamp').textContent = `Last updated: ${new Date(data.timestamp).toLocaleString()}`;
 
 	const collectionsDiv = document.getElementById('collections');
 	collectionsDiv.innerHTML = '';
 
 	Object.entries(data.collections).forEach(([name, info]) => {
 		const collectionDiv = document.createElement('div');
-		collectionDiv.className = 'collection';
+		collectionDiv.className = 'collection fade-in';
 
 		const html = `
 			<h2>${name}</h2>
 			<div class="stats">
-				<p>Document count: ${info.document_count}</p>
+				<p><i class="fas fa-file-alt"></i> Document count: ${info.document_count}</p>
 			</div>
 			<div class="fields">
 				<h3>Document Fields:</h3>
@@ -71,10 +71,10 @@ function displayDatabaseStatus(data) {
 						const indexInfo = info.indexes.find(idx =>
 							idx.keys.some(([key]) => key === field)
 						);
-						const indexDetails = indexInfo ?
-							` (Index: ${indexInfo.keys.map(([key, direction]) =>
-								`${direction === 1 ? '↑' : '↓'}`).join('')})` : '';
-						return `<li>${field}${indexDetails}</li>`;
+						const indexIcon = indexInfo ?
+							`<i class="fas fa-bolt" title="Indexed"></i>` :
+							`<i class="fas fa-minus" title="Not indexed"></i>`;
+						return `<li>${indexIcon} ${field}</li>`;
 					}).join('')}
 				</ul>
 			</div>

static/system.html

@@ -1,23 +1,48 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-	<title>System Status</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>System Status - Medical AI Assistant</title>
+	<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
+	<link rel="stylesheet" href="/static/css/styles.css">
 	<link rel="stylesheet" href="/static/css/system.css">
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 </head>
 <body>
-	<h1>System Status</h1>
-	<div class="tab-bar">
-		<button class="tab-button active" data-tab="health">Health Status</button>
-		<button class="tab-button" data-tab="database">Database Status</button>
-	</div>
+	<div class="app-container">
+		<div class="main-content system-page">
+			<div class="system-header">
+				<a href="/" class="back-link"><i class="fas fa-arrow-left"></i> Back to Chat</a>
+				<h1>System Status</h1>
+			</div>
 
-	<div id="health" class="tab-content active">
-		<div id="health-status"></div>
-	</div>
+			<div class="tab-container">
+				<div class="tab-bar">
+					<button class="tab-button active" data-tab="health">
+						<i class="fas fa-heartbeat"></i>
+						Health Status
+					</button>
+					<button class="tab-button" data-tab="database">
+						<i class="fas fa-database"></i>
+						Database Status
+					</button>
+				</div>
+
+				<div id="health" class="tab-content active">
+					<div class="status-card">
+						<div id="health-status" class="status-content"></div>
+					</div>
+				</div>
 
-	<div id="database" class="tab-content">
-		<div id="db-timestamp" class="timestamp"></div>
-		<div id="collections"></div>
+				<div id="database" class="tab-content">
+					<div class="status-card">
+						<div id="db-timestamp" class="timestamp"></div>
+						<div id="collections" class="collections-grid"></div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 
 	<script src="/static/js/system.js"></script>