@astratra/saas-kit-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Astratra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @astratra/saas-kit-ui
+
+Interface React reutilisable pour demarrer rapidement un dashboard SaaS
+Astratra. Le package expose une application dashboard complete et quelques
+primitives (`AuthProvider`, `useAuth`, `apiFetch`) pour composer une interface
+plus specifique.
+
+## Installation
+
+```bash
+npm install @astratra/saas-kit-ui react react-dom
+```
+
+Dans le repo Astratra, `examples/dashboard-ui` montre son integration avec un
+backend `@astratra/saas-kit`.
+
+## Utilisation
+
+```jsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { AstratraDashboardApp } from '@astratra/saas-kit-ui';
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <AstratraDashboardApp />
+  </React.StrictMode>
+);
+```
+
+Par defaut, l'interface appelle `http://localhost:4000`. Avec Vite, definis
+`VITE_API_URL` pour pointer vers ton backend :
+
+```bash
+VITE_API_URL=http://localhost:4000 npm run dev
+```
+
+## Surface exportee
+
+- `AstratraDashboardApp` : dashboard complet login/users/settings/overview.
+- `AuthProvider` et `useAuth` : session bearer token en memoire.
+- `apiFetch` et `ApiError` : client minimal compatible avec les reponses
+  `apiResponse` d'`@astratra/core`.
+
+Le package ne contient pas de serveur Express et ne fixe aucun domaine metier.
+Le backend reste fourni par `@astratra/saas-kit` ou par ton application.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@astratra/saas-kit-ui",
+  "version": "0.1.0",
+  "description": "Reusable React dashboard shell for Astratra SaaS applications.",
+  "type": "module",
+  "main": "src/index.jsx",
+  "module": "src/index.jsx",
+  "exports": {
+    ".": "./src/index.jsx",
+    "./api": "./src/lib/api.js",
+    "./styles.css": "./src/styles/global.css"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "node --test __tests__/*.test.js"
+  },
+  "keywords": [
+    "astratra",
+    "react",
+    "dashboard",
+    "saas"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
+}

package/src/App.jsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import { AuthProvider, useAuth } from './auth/AuthContext.jsx';
+import Layout from './components/Layout.jsx';
+import Dashboard from './screens/Dashboard.jsx';
+import Login from './screens/Login.jsx';
+import Settings from './screens/Settings.jsx';
+import Users from './screens/Users.jsx';
+import './styles/global.css';
+
+const VIEWS = {
+  dashboard: Dashboard,
+  users: Users,
+  settings: Settings
+};
+
+function GuardedApp() {
+  const [view, setView] = useState('dashboard');
+  const auth = useAuth();
+
+  if (!auth.isAuthenticated) {
+    return <Login onLoggedIn={() => setView('dashboard')} />;
+  }
+
+  const Screen = VIEWS[view] || Dashboard;
+  return (
+    <Layout activeView={view} onNavigate={setView}>
+      <Screen />
+    </Layout>
+  );
+}
+
+export default function AstratraDashboardApp() {
+  return (
+    <AuthProvider>
+      <GuardedApp />
+    </AuthProvider>
+  );
+}

package/src/assets/logo.svg

@@ -0,0 +1,9 @@
+<svg width="256" height="256" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Astratra">
+  <rect width="48" height="48" fill="#17201b" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M24 8 L6 40 L42 40 Z M24 19 L16 31 L32 31 Z"
+    fill="#d9ff66"
+  />
+</svg>

package/src/auth/AuthContext.jsx

@@ -0,0 +1,49 @@
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { apiFetch } from '../lib/api.js';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [token, setToken] = useState(null);
+  const [user, setUser] = useState(null);
+
+  const logout = useCallback(() => {
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  const login = useCallback(async ({ email, password }) => {
+    const data = await apiFetch('/auth/login', {
+      method: 'POST',
+      body: { email, password }
+    });
+    setToken(data.token);
+    setUser(data.user);
+    return data.user;
+  }, []);
+
+  const request = useCallback((path, options = {}) => apiFetch(path, {
+    ...options,
+    token,
+    onUnauthorized: logout
+  }), [logout, token]);
+
+  const value = useMemo(() => ({
+    isAuthenticated: Boolean(token),
+    token,
+    user,
+    login,
+    logout,
+    request
+  }), [login, logout, request, token, user]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const value = useContext(AuthContext);
+  if (!value) {
+    throw new Error('useAuth must be used inside AuthProvider.');
+  }
+  return value;
+}

package/src/components/Layout.jsx

@@ -0,0 +1,53 @@
+import { useAuth } from '../auth/AuthContext.jsx';
+import logoUrl from '../assets/logo.svg';
+import styles from './Layout.module.css';
+
+const NAV_ITEMS = [
+  { id: 'dashboard', index: '01', label: 'Dashboard' },
+  { id: 'users', index: '02', label: 'Users' },
+  { id: 'settings', index: '03', label: 'Settings' }
+];
+
+export default function Layout({ activeView, children, onNavigate }) {
+  const { logout, user } = useAuth();
+
+  return (
+    <div className={styles.shell}>
+      <aside className={styles.sidebar}>
+        <div className={styles.brand}>
+          <img src={logoUrl} alt="Astratra" className={styles.brandMark} />
+          <span>
+            <strong>Astratra</strong>
+            <small>saas_starter@v0.1.0</small>
+          </span>
+        </div>
+
+        <nav className={styles.nav} aria-label="Primary">
+          {NAV_ITEMS.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className={item.id === activeView ? styles.activeNavItem : styles.navItem}
+              onClick={() => onNavigate(item.id)}
+            >
+              <span className={styles.navIndex}>{item.index}</span>
+              {item.label}
+            </button>
+          ))}
+        </nav>
+
+        <div className={styles.status}>
+          <span className={styles.statusDot} aria-hidden="true" />
+          session active
+        </div>
+
+        <div className={styles.account}>
+          <span>{user?.email}</span>
+          <small>role: {user?.role}</small>
+          <button type="button" onClick={logout}>[ logout ]</button>
+        </div>
+      </aside>
+      <main className={styles.content}>{children}</main>
+    </div>
+  );
+}

package/src/components/Layout.module.css

@@ -0,0 +1,196 @@
+.shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  background: transparent;
+  color: var(--cream);
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 20px;
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.brandMark {
+  width: 38px;
+  height: 38px;
+  flex: none;
+}
+
+.brand strong,
+.brand small,
+.account span,
+.account small {
+  display: block;
+}
+
+.brand strong {
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+}
+
+.brand small,
+.account small {
+  color: var(--muted);
+  margin-top: 3px;
+  font-size: 0.72rem;
+}
+
+.nav {
+  display: grid;
+  gap: 4px;
+}
+
+.navItem,
+.activeNavItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  border: 0;
+  border-left: 2px solid transparent;
+  padding: 0 12px;
+  text-align: left;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+
+.navIndex {
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.navItem {
+  background: transparent;
+  color: var(--muted);
+}
+
+.navItem:hover {
+  color: var(--cream);
+  background: var(--panel-raised);
+}
+
+.activeNavItem {
+  background: var(--panel-raised);
+  color: var(--lime);
+  border-left-color: var(--lime);
+}
+
+.activeNavItem .navIndex {
+  color: var(--lime-dim);
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.statusDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--lime);
+  box-shadow: 0 0 0 0 rgba(217, 255, 102, 0.6);
+  animation: pulse 2.2s ease-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(217, 255, 102, 0.5);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(217, 255, 102, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(217, 255, 102, 0);
+  }
+}
+
+.account {
+  margin-top: auto;
+  display: grid;
+  gap: 10px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+  font-size: 0.82rem;
+}
+
+.account span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account button {
+  text-align: left;
+  border: 1px solid var(--line-bright);
+  background: transparent;
+  color: var(--muted);
+  padding: 8px 10px;
+  font: inherit;
+  font-size: 0.8rem;
+}
+
+.account button:hover {
+  color: var(--error);
+  border-color: var(--error);
+}
+
+.content {
+  min-width: 0;
+  padding: 40px;
+}
+
+@media (max-width: 760px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: static;
+    gap: 16px;
+  }
+
+  .nav {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .navItem,
+  .activeNavItem {
+    border-left: 0;
+    border-bottom: 2px solid transparent;
+    justify-content: center;
+  }
+
+  .activeNavItem {
+    border-bottom-color: var(--lime);
+  }
+
+  .status {
+    display: none;
+  }
+
+  .content {
+    padding: 20px;
+  }
+}

package/src/components/Notice.jsx

@@ -0,0 +1,6 @@
+import styles from './Notice.module.css';
+
+export default function Notice({ tone = 'neutral', children }) {
+  if (!children) return null;
+  return <div className={`${styles.notice} ${styles[tone]}`}>{children}</div>;
+}

package/src/components/Notice.module.css

@@ -0,0 +1,43 @@
+.notice {
+  position: relative;
+  padding: 12px 14px 12px 34px;
+  border: 1px solid var(--line-bright);
+  background: var(--panel);
+  color: var(--cream);
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.notice::before {
+  content: "!";
+  position: absolute;
+  top: 12px;
+  left: 14px;
+  color: var(--muted);
+}
+
+.error {
+  border-color: var(--error);
+  background: var(--error-bg);
+  color: var(--cream);
+}
+
+.error::before {
+  content: "x";
+  color: var(--error);
+}
+
+.success {
+  border-color: var(--success);
+  background: var(--success-bg);
+  color: var(--cream);
+}
+
+.success::before {
+  content: ">";
+  color: var(--success);
+}
+
+.neutral {
+  border-color: var(--line-bright);
+}

package/src/index.jsx

@@ -0,0 +1,9 @@
+export { default, default as AstratraDashboardApp } from './App.jsx';
+export { AuthProvider, useAuth } from './auth/AuthContext.jsx';
+export { ApiError, apiFetch } from './lib/api.js';
+export { default as Layout } from './components/Layout.jsx';
+export { default as Notice } from './components/Notice.jsx';
+export { default as DashboardScreen } from './screens/Dashboard.jsx';
+export { default as LoginScreen } from './screens/Login.jsx';
+export { default as SettingsScreen } from './screens/Settings.jsx';
+export { default as UsersScreen } from './screens/Users.jsx';

package/src/lib/api.js

@@ -0,0 +1,65 @@
+const DEFAULT_API_URL = 'http://localhost:4000';
+
+export class ApiError extends Error {
+  constructor(message, { status, data, error } = {}) {
+    super(message);
+    this.name = 'ApiError';
+    this.status = status;
+    this.data = data;
+    this.error = error;
+  }
+}
+
+function joinUrl(apiUrl, path) {
+  const base = String(apiUrl || DEFAULT_API_URL).replace(/\/+$/, '');
+  const suffix = String(path || '').startsWith('/') ? path : `/${path}`;
+  return `${base}${suffix}`;
+}
+
+async function readPayload(response) {
+  const text = await response.text();
+  if (!text) return null;
+
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new ApiError('The API returned an invalid JSON response.', {
+      status: response.status,
+      data: text
+    });
+  }
+}
+
+export async function apiFetch(path, {
+  apiUrl = import.meta.env?.VITE_API_URL || DEFAULT_API_URL,
+  token,
+  method = 'GET',
+  body,
+  fetcher = fetch,
+  onUnauthorized
+} = {}) {
+  const headers = {};
+  if (body !== undefined) headers['content-type'] = 'application/json';
+  if (token) headers.authorization = `Bearer ${token}`;
+
+  const response = await fetcher(joinUrl(apiUrl, path), {
+    method,
+    headers,
+    body: body === undefined ? undefined : JSON.stringify(body)
+  });
+  const payload = await readPayload(response);
+
+  if (response.status === 401 && typeof onUnauthorized === 'function') {
+    onUnauthorized();
+  }
+
+  if (!response.ok || payload?.success === false) {
+    throw new ApiError(payload?.message || payload?.error || `Request failed with status ${response.status}.`, {
+      status: response.status,
+      data: payload?.data,
+      error: payload?.error
+    });
+  }
+
+  return payload?.data;
+}

package/src/screens/Dashboard.jsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../auth/AuthContext.jsx';
+import Notice from '../components/Notice.jsx';
+import styles from './Screen.module.css';
+
+export default function Dashboard() {
+  const { request } = useAuth();
+  const [summary, setSummary] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    request('/dashboard/summary')
+      .then((data) => {
+        if (active) setSummary(data);
+      })
+      .catch((apiError) => {
+        if (active) setError(apiError.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, [request]);
+
+  const roles = Object.entries(summary?.roleBreakdown || {});
+  const maxRoleCount = Math.max(1, ...roles.map(([, count]) => count));
+
+  return (
+    <section className={styles.screen}>
+      <header className={styles.header}>
+        <p>Overview</p>
+        <h1>Dashboard</h1>
+      </header>
+      <Notice tone="error">{error}</Notice>
+      {!summary && !error ? <p className={styles.muted}>Loading dashboard...</p> : null}
+      {summary ? (
+        <div className={styles.grid}>
+          <article className={styles.statCard}>
+            <span>Total users</span>
+            <strong>{summary.userCount}</strong>
+          </article>
+          <article className={styles.wideCard}>
+            <span>Role breakdown</span>
+            <div className={styles.bars}>
+              {roles.map(([role, count]) => (
+                <div key={role} className={styles.barRow}>
+                  <span>{role}</span>
+                  <div className={styles.track}>
+                    <div style={{ width: `${(count / maxRoleCount) * 100}%` }} />
+                  </div>
+                  <strong>{count}</strong>
+                </div>
+              ))}
+            </div>
+          </article>
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/screens/Login.jsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useAuth } from '../auth/AuthContext.jsx';
+import Notice from '../components/Notice.jsx';
+import styles from './Login.module.css';
+
+export default function Login({ onLoggedIn }) {
+  const { login } = useAuth();
+  const [email, setEmail] = useState('owner@example.test');
+  const [password, setPassword] = useState('password');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      await login({ email, password });
+      onLoggedIn();
+    } catch (apiError) {
+      setError(apiError.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <main className={styles.page}>
+      <section className={styles.panel} aria-labelledby="login-title">
+        <div className={styles.frame} aria-hidden="true" />
+        <div className={styles.identity}>
+          <span className={styles.tag}>astratra/saas-kit</span>
+          <span className={styles.tagMuted}>v0.1.0</span>
+        </div>
+        <h1 id="login-title">
+          <span className={styles.prompt}>&gt;</span> sign_in
+          <span className={styles.cursor} aria-hidden="true" />
+        </h1>
+        <p className={styles.copy}>
+          // authenticate with the seeded owner account to inspect the generic SaaS API screens
+        </p>
+        <Notice tone="error">{error}</Notice>
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <label>
+            email
+            <input value={email} onChange={(event) => setEmail(event.target.value)} type="email" required />
+          </label>
+          <label>
+            password
+            <input value={password} onChange={(event) => setPassword(event.target.value)} type="password" required />
+          </label>
+          <button type="submit" disabled={loading}>{loading ? 'authenticating...' : '[ sign in ]'}</button>
+        </form>
+      </section>
+    </main>
+  );
+}

package/src/screens/Login.module.css

@@ -0,0 +1,163 @@
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background:
+    radial-gradient(circle at 20% -10%, rgba(217, 255, 102, 0.08), transparent 40%),
+    var(--bg);
+}
+
+.panel {
+  position: relative;
+  width: min(440px, 100%);
+  display: grid;
+  gap: 18px;
+  padding: 40px;
+  background: var(--panel);
+  color: var(--cream);
+  border: 1px solid var(--line);
+  animation: rise 420ms ease both;
+}
+
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.frame {
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+}
+
+.frame::before,
+.frame::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--lime);
+}
+
+.frame::before {
+  top: -2px;
+  left: -2px;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.frame::after {
+  bottom: -2px;
+  right: -2px;
+  border-left: 0;
+  border-top: 0;
+}
+
+.identity {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 0.75rem;
+}
+
+.tag {
+  color: var(--lime);
+}
+
+.tagMuted {
+  color: var(--muted);
+}
+
+h1 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 2rem;
+  line-height: 1;
+  font-weight: 500;
+}
+
+.prompt {
+  color: var(--lime);
+  margin-right: 10px;
+}
+
+.cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.1em;
+  margin-left: 8px;
+  background: var(--lime);
+  animation: blink 1s steps(1) infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+  line-height: 1.6;
+}
+
+.form {
+  display: grid;
+  gap: 14px;
+}
+
+.form label {
+  display: grid;
+  gap: 6px;
+  font-size: 0.78rem;
+  color: var(--muted);
+  text-transform: lowercase;
+}
+
+.form input {
+  min-height: 42px;
+  border: 1px solid var(--line-bright);
+  background: var(--bg);
+  color: var(--cream);
+  padding: 0 12px;
+  font: inherit;
+}
+
+.form input:focus {
+  border-color: var(--lime);
+}
+
+.form button {
+  min-height: 44px;
+  border: 1px solid var(--lime);
+  background: var(--lime);
+  color: var(--bg);
+  font: inherit;
+  font-weight: 700;
+  margin-top: 6px;
+}
+
+.form button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+@media (max-width: 520px) {
+  .panel {
+    padding: 28px;
+  }
+
+  h1 {
+    font-size: 1.6rem;
+  }
+}

package/src/screens/Screen.module.css

@@ -0,0 +1,248 @@
+.screen {
+  display: grid;
+  gap: 24px;
+  animation: fadeUp 320ms ease both;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.header {
+  display: grid;
+  gap: 6px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.header p {
+  margin: 0;
+  color: var(--lime-dim);
+  font-size: 0.78rem;
+  letter-spacing: 0.03em;
+}
+
+.header p::before {
+  content: "// ";
+  color: var(--muted);
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 2.4rem;
+  line-height: 1;
+  font-weight: 500;
+  text-transform: lowercase;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
+  gap: 16px;
+}
+
+.statCard,
+.wideCard {
+  position: relative;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  padding: 22px;
+  animation: fadeUp 380ms ease both;
+}
+
+.statCard::before,
+.statCard::after,
+.wideCard::before,
+.wideCard::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--line-bright);
+}
+
+.statCard::before,
+.wideCard::before {
+  top: -1px;
+  left: -1px;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.statCard::after,
+.wideCard::after {
+  bottom: -1px;
+  right: -1px;
+  border-left: 0;
+  border-top: 0;
+}
+
+.wideCard {
+  animation-delay: 60ms;
+}
+
+.statCard span,
+.wideCard > span {
+  color: var(--muted);
+  font-size: 0.78rem;
+  text-transform: lowercase;
+}
+
+.statCard strong {
+  display: block;
+  margin-top: 14px;
+  font-size: 4rem;
+  line-height: 1;
+  font-weight: 500;
+  color: var(--lime);
+  font-variant-numeric: tabular-nums;
+}
+
+.bars {
+  display: grid;
+  gap: 14px;
+  margin-top: 20px;
+}
+
+.barRow {
+  display: grid;
+  grid-template-columns: 90px minmax(80px, 1fr) 30px;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.85rem;
+}
+
+.track {
+  height: 6px;
+  background: var(--line);
+  overflow: hidden;
+}
+
+.track div {
+  height: 100%;
+  background: var(--lime);
+}
+
+.inlineForm {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) 140px 160px auto;
+  gap: 10px;
+}
+
+.inlineForm input,
+.inlineForm select,
+.settingRow input {
+  min-height: 42px;
+  border: 1px solid var(--line-bright);
+  padding: 0 12px;
+  background: var(--panel);
+  color: var(--cream);
+  font: inherit;
+}
+
+.inlineForm input:focus,
+.inlineForm select:focus,
+.settingRow input:focus {
+  border-color: var(--lime);
+}
+
+.inlineForm button,
+.settingRow button {
+  min-height: 42px;
+  border: 1px solid var(--lime);
+  padding: 0 16px;
+  background: var(--lime);
+  color: var(--bg);
+  font: inherit;
+  font-weight: 700;
+}
+
+.inlineForm button:hover,
+.settingRow button:hover {
+  background: var(--cream);
+  border-color: var(--cream);
+}
+
+.inlineForm button:active,
+.settingRow button:active {
+  transform: translateY(1px);
+}
+
+.tableWrap {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  background: var(--panel);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+}
+
+th,
+td {
+  padding: 14px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--line);
+}
+
+tbody tr {
+  transition: background-color 120ms ease;
+}
+
+tbody tr:hover {
+  background: rgba(217, 255, 102, 0.05);
+}
+
+th {
+  color: var(--muted);
+  font-size: 0.72rem;
+  text-transform: lowercase;
+  font-weight: 400;
+}
+
+.settingsList {
+  display: grid;
+  gap: 10px;
+}
+
+.settingRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: end;
+  padding: 16px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+}
+
+.settingRow label {
+  display: grid;
+  gap: 6px;
+  font-size: 0.82rem;
+  color: var(--muted);
+}
+
+@media (max-width: 860px) {
+  .grid,
+  .inlineForm,
+  .settingRow {
+    grid-template-columns: 1fr;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+}

package/src/screens/Settings.jsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../auth/AuthContext.jsx';
+import Notice from '../components/Notice.jsx';
+import styles from './Screen.module.css';
+
+export default function Settings() {
+  const { request } = useAuth();
+  const [settings, setSettings] = useState({});
+  const [drafts, setDrafts] = useState({});
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  async function loadSettings() {
+    setError('');
+    try {
+      const data = await request('/settings');
+      setSettings(data || {});
+      setDrafts(Object.fromEntries(Object.entries(data || {}).map(([key, value]) => [key, JSON.stringify(value)])));
+    } catch (apiError) {
+      setError(apiError.status === 403 ? 'Not authorized to manage settings.' : apiError.message);
+    }
+  }
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  async function saveSetting(key) {
+    setError('');
+    setSuccess('');
+    let value = drafts[key];
+    try {
+      value = JSON.parse(drafts[key]);
+    } catch {
+      value = drafts[key];
+    }
+
+    try {
+      const updated = await request(`/settings/${encodeURIComponent(key)}`, {
+        method: 'PATCH',
+        body: { value }
+      });
+      setSettings({ ...settings, [updated.key]: updated.value });
+      setDrafts({ ...drafts, [updated.key]: JSON.stringify(updated.value) });
+      setSuccess(`${updated.key} saved.`);
+    } catch (apiError) {
+      setError(apiError.status === 403 ? 'Not authorized to update settings.' : apiError.message);
+    }
+  }
+
+  const rows = Object.entries(settings);
+
+  return (
+    <section className={styles.screen}>
+      <header className={styles.header}>
+        <p>Configuration</p>
+        <h1>Settings</h1>
+      </header>
+      <Notice tone="error">{error}</Notice>
+      <Notice tone="success">{success}</Notice>
+      {rows.length === 0 && !error ? <p className={styles.muted}>No settings yet.</p> : null}
+      <div className={styles.settingsList}>
+        {rows.map(([key]) => (
+          <div className={styles.settingRow} key={key}>
+            <label>
+              <span>{key}</span>
+              <input
+                value={drafts[key] ?? ''}
+                onChange={(event) => setDrafts({ ...drafts, [key]: event.target.value })}
+              />
+            </label>
+            <button type="button" onClick={() => saveSetting(key)}>Save</button>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/screens/Users.jsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import { useAuth } from '../auth/AuthContext.jsx';
+import Notice from '../components/Notice.jsx';
+import styles from './Screen.module.css';
+
+export default function Users() {
+  const { request } = useAuth();
+  const [users, setUsers] = useState([]);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [form, setForm] = useState({ email: '', role: 'member', password: 'password' });
+  const [loading, setLoading] = useState(true);
+
+  async function loadUsers() {
+    setLoading(true);
+    setError('');
+    try {
+      const data = await request('/users?limit=50&offset=0');
+      setUsers(data.items || []);
+    } catch (apiError) {
+      setError(apiError.status === 403 ? 'Not authorized to manage users.' : apiError.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  async function createUser(event) {
+    event.preventDefault();
+    setError('');
+    setSuccess('');
+    try {
+      await request('/users', { method: 'POST', body: form });
+      setForm({ email: '', role: 'member', password: 'password' });
+      setSuccess('User created.');
+      await loadUsers();
+    } catch (apiError) {
+      setError(apiError.status === 403 ? 'Not authorized to create users.' : apiError.message);
+    }
+  }
+
+  return (
+    <section className={styles.screen}>
+      <header className={styles.header}>
+        <p>Administration</p>
+        <h1>Users</h1>
+      </header>
+      <Notice tone="error">{error}</Notice>
+      <Notice tone="success">{success}</Notice>
+      <form className={styles.inlineForm} onSubmit={createUser}>
+        <input
+          aria-label="Email"
+          placeholder="email@example.test"
+          type="email"
+          value={form.email}
+          onChange={(event) => setForm({ ...form, email: event.target.value })}
+          required
+        />
+        <select
+          aria-label="Role"
+          value={form.role}
+          onChange={(event) => setForm({ ...form, role: event.target.value })}
+        >
+          <option value="member">member</option>
+          <option value="admin">admin</option>
+          <option value="owner">owner</option>
+        </select>
+        <input
+          aria-label="Password"
+          value={form.password}
+          onChange={(event) => setForm({ ...form, password: event.target.value })}
+          required
+        />
+        <button type="submit">Create user</button>
+      </form>
+      {loading ? <p className={styles.muted}>Loading users...</p> : null}
+      <div className={styles.tableWrap}>
+        <table>
+          <thead>
+            <tr>
+              <th>Email</th>
+              <th>Role</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((user) => (
+              <tr key={user.id}>
+                <td>{user.email}</td>
+                <td>{user.role || 'unknown'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

package/src/styles/global.css

@@ -0,0 +1,98 @@
+:root {
+  --bg: #0d1310;
+  --panel: #141b17;
+  --panel-raised: #1a231d;
+  --line: #2e3a31;
+  --line-bright: #46584c;
+  --lime: #d9ff66;
+  --lime-dim: #a8c94f;
+  --cream: #f4f1e6;
+  --muted: #7c8a7a;
+  --error: #ff6b5c;
+  --error-bg: #241512;
+  --success: #8ce99a;
+  --success-bg: #10201a;
+  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  font-family: var(--mono);
+  color: var(--cream);
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      rgba(217, 255, 102, 0.025),
+      rgba(217, 255, 102, 0.025) 1px,
+      transparent 1px,
+      transparent 3px
+    ),
+    var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button,
+input,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--lime);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--lime);
+  color: var(--bg);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--line-bright);
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--mono);
+  letter-spacing: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+  }
+}