feat: tenant portal — all 5 pages (dashboard, license, OIDC, team, settings)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/tenant/SettingsPage.tsx

@@ -1 +1,80 @@
-export function SettingsPage() { return <div>SettingsPage (TODO)</div>; }
+import {
+  Alert,
+  Badge,
+  Card,
+  Spinner,
+} from '@cameleer/design-system';
+import { useTenantSettings } from '../../api/tenant-hooks';
+import { tierColor } from '../../utils/tier';
+import styles from '../../styles/platform.module.css';
+
+function statusColor(status: string): 'success' | 'error' | 'warning' | 'auto' {
+  switch (status?.toUpperCase()) {
+    case 'ACTIVE': return 'success';
+    case 'SUSPENDED': return 'warning';
+    case 'PROVISIONING': return 'auto';
+    case 'ERROR': return 'error';
+    default: return 'auto';
+  }
+}
+
+export function SettingsPage() {
+  const { data, isLoading, isError } = useTenantSettings();
+
+  if (isLoading) {
+    return (
+      <div style={{ display: 'flex', justifyContent: 'center', padding: 64 }}>
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (isError || !data) {
+    return (
+      <div style={{ padding: 24 }}>
+        <Alert variant="error" title="Failed to load settings">
+          Could not fetch settings. Please refresh.
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Settings</h1>
+
+      <Card title="Tenant Details">
+        <div className={styles.dividerList}>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Name</span>
+            <span className={styles.kvValue}>{data.name}</span>
+          </div>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Slug</span>
+            <span className={styles.kvValueMono}>{data.slug}</span>
+          </div>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Tier</span>
+            <Badge label={data.tier} color={tierColor(data.tier)} />
+          </div>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Status</span>
+            <Badge label={data.status} color={statusColor(data.status)} />
+          </div>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Server Endpoint</span>
+            <span className={styles.kvValueMono}>{data.serverEndpoint ?? '—'}</span>
+          </div>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Created</span>
+            <span className={styles.kvValue}>{new Date(data.createdAt).toLocaleDateString()}</span>
+          </div>
+        </div>
+
+        <p className={styles.description} style={{ marginTop: 16 }}>
+          To change your tier or other billing-related settings, please contact support.
+        </p>
+      </Card>
+    </div>
+  );
+}