M1: minimal board UI (login, board, cartable)
A functional React/Vite SPA exercising the M1 API end-to-end: - Zustand auth store (persisted JWT) + a small fetch client that attaches the bearer token and logs out on 401. - LoginPage: sign in, or bootstrap the first owner on first run. - BoardPage: set org name, create/select a team, create tasks, move them across the backlog -> in progress -> in review -> done columns, assign to me, and a cartable panel. - React Router guards routes on the presence of a token. Mirrors the integration-tested API contracts exactly. Compiles clean (tsc + vite); still needs a manual click-through (run the web host + Postgres, or `docker compose up --build`). dnd-kit drag, TanStack Query, and an orval-generated typed client are M1+ polish — buttons/selects drive task moves for now. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+10
-77
@@ -1,83 +1,16 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
const MODULES = [
|
||||
'identity',
|
||||
'orgboard',
|
||||
'skills',
|
||||
'integrations',
|
||||
'memory',
|
||||
'assembler',
|
||||
'governance',
|
||||
] as const
|
||||
|
||||
type Status = boolean | null // null = checking
|
||||
|
||||
function StatusDot({ ok }: { ok: Status }) {
|
||||
const color = ok === null ? 'bg-amber-400' : ok ? 'bg-teal-400' : 'bg-rose-500'
|
||||
return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} aria-hidden />
|
||||
}
|
||||
import { Navigate, Route, Routes } from 'react-router'
|
||||
import { BoardPage } from './pages/BoardPage'
|
||||
import { LoginPage } from './pages/LoginPage'
|
||||
import { useAuth } from './store/auth'
|
||||
|
||||
export default function App() {
|
||||
const [health, setHealth] = useState<Status>(null)
|
||||
const [modules, setModules] = useState<Record<string, Status>>(
|
||||
Object.fromEntries(MODULES.map((m) => [m, null])),
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/health')
|
||||
.then((r) => setHealth(r.ok))
|
||||
.catch(() => setHealth(false))
|
||||
|
||||
MODULES.forEach((m) => {
|
||||
fetch(`/api/${m}/ping`)
|
||||
.then((r) => setModules((s) => ({ ...s, [m]: r.ok })))
|
||||
.catch(() => setModules((s) => ({ ...s, [m]: false })))
|
||||
})
|
||||
}, [])
|
||||
const token = useAuth((state) => state.token)
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-indigo-950 text-slate-100">
|
||||
<div className="mx-auto flex min-h-screen max-w-3xl flex-col justify-center px-6 py-16">
|
||||
<p className="text-sm font-medium uppercase tracking-widest text-indigo-300">
|
||||
A product of AliaSaaS
|
||||
</p>
|
||||
<h1 className="mt-2 text-5xl font-bold tracking-tight">TeamUp.AI</h1>
|
||||
<p className="mt-3 text-lg text-indigo-200">
|
||||
Build human + AI teams. A live org chart that does work.
|
||||
</p>
|
||||
|
||||
<div className="mt-10 rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">API health</span>
|
||||
<span className="flex items-center gap-2 text-sm text-indigo-200">
|
||||
<StatusDot ok={health} />
|
||||
{health === null ? 'checking…' : health ? 'healthy' : 'unreachable'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="mt-10 text-sm font-semibold uppercase tracking-widest text-indigo-300">
|
||||
Modules
|
||||
</h2>
|
||||
<ul className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{MODULES.map((m) => (
|
||||
<li
|
||||
key={m}
|
||||
className="flex items-center justify-between rounded-lg border border-indigo-800/50 bg-indigo-900/30 px-4 py-2.5"
|
||||
>
|
||||
<span className="capitalize">{m}</span>
|
||||
<span className="flex items-center gap-2 text-sm text-indigo-200">
|
||||
<StatusDot ok={modules[m]} />
|
||||
{modules[m] === null ? '…' : modules[m] ? 'ok' : 'down'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p className="mt-12 text-xs text-indigo-400">
|
||||
Pre-M1 skeleton · web + worker on one modular monolith · PostgreSQL 17 + pgvector
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<Routes>
|
||||
<Route path="/login" element={token ? <Navigate to="/" replace /> : <LoginPage />} />
|
||||
<Route path="/" element={token ? <BoardPage /> : <Navigate to="/login" replace />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user