frontend/_src/app/settings/page.tsx

'use client'

import { Sidebar } from '@/components/sidebar'
import { Server, Database, Shield } from 'lucide-react'

export default function SettingsPage() {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <main className="flex-1 flex flex-col">
        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6">
          <h1 className="text-base font-medium">Settings</h1>
        </header>
        <div className="flex-1 p-6 space-y-4 overflow-auto">
          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
            <div className="flex items-center gap-3 mb-4"><Server className="w-5 h-5 text-accent-cyan" /><h3 className="text-sm font-medium">System</h3></div>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between"><span className="text-text-muted">Version</span><span>1.0.0</span></div>
              <div className="flex justify-between"><span className="text-text-muted">Data Dir</span><span className="font-mono">/data</span></div>
            </div>
          </div>
          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
            <div className="flex items-center gap-3 mb-4"><Database className="w-5 h-5 text-accent-green" /><h3 className="text-sm font-medium">Database</h3></div>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between"><span className="text-text-muted">Engine</span><span>SQLite</span></div>
              <div className="flex justify-between"><span className="text-text-muted">Path</span><span className="font-mono">/data/platform.db</span></div>
            </div>
          </div>
          <div className="bg-bg-tertiary border border-border rounded-xl p-5">
            <div className="flex items-center gap-3 mb-4"><Shield className="w-5 h-5 text-accent-amber" /><h3 className="text-sm font-medium">Security</h3></div>
            <div className="space-y-3 text-sm">
              <div className="flex justify-between"><span className="text-text-muted">Auth</span><span>JWT (HS256)</span></div>
              <div className="flex justify-between"><span className="text-text-muted">Vault</span><span>AES-256-GCM</span></div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}