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:
soroush.asadi
+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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import { useAuth } from '../store/auth'
|
||||
|
||||
async function request<T>(method: string, url: string, body?: unknown): Promise<T> {
|
||||
const token = useAuth.getState().token
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
})
|
||||
|
||||
if (response.status === 401) {
|
||||
useAuth.getState().logout()
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text()
|
||||
throw new Error(`${response.status} ${response.statusText}${text ? `: ${text}` : ''}`)
|
||||
}
|
||||
|
||||
const contentType = response.headers.get('content-type') ?? ''
|
||||
return contentType.includes('application/json') ? ((await response.json()) as T) : (undefined as T)
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: <T>(url: string) => request<T>('GET', url),
|
||||
post: <T>(url: string, body?: unknown) => request<T>('POST', url, body),
|
||||
patch: <T>(url: string, body?: unknown) => request<T>('PATCH', url, body),
|
||||
}
|
||||
@@ -1,10 +1,13 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -0,0 +1,248 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { api } from '../lib/api'
|
||||
import { useAuth } from '../store/auth'
|
||||
|
||||
const COLUMNS = ['Backlog', 'InProgress', 'InReview', 'Done'] as const
|
||||
|
||||
interface Team {
|
||||
id: string
|
||||
organizationId: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
teamId: string
|
||||
title: string
|
||||
status: string
|
||||
assigneeKind: string
|
||||
assigneeId?: string | null
|
||||
}
|
||||
|
||||
interface Board {
|
||||
teamId: string
|
||||
columns: { status: string; items: Task[] }[]
|
||||
}
|
||||
|
||||
export function BoardPage() {
|
||||
const memberId = useAuth((s) => s.memberId)
|
||||
const organizationId = useAuth((s) => s.organizationId)
|
||||
const logout = useAuth((s) => s.logout)
|
||||
|
||||
const [orgName, setOrgName] = useState('')
|
||||
const [teams, setTeams] = useState<Team[]>([])
|
||||
const [teamId, setTeamId] = useState<string | null>(null)
|
||||
const [board, setBoard] = useState<Board | null>(null)
|
||||
const [cartable, setCartable] = useState<Task[]>([])
|
||||
const [newTeam, setNewTeam] = useState('')
|
||||
const [newTask, setNewTask] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const loadTeams = useCallback(async () => {
|
||||
if (!organizationId) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const result = await api.get<Team[]>(`/api/orgboard/teams?organizationId=${organizationId}`)
|
||||
setTeams(result)
|
||||
if (!teamId && result.length > 0) {
|
||||
setTeamId(result[0].id)
|
||||
}
|
||||
} catch (err) {
|
||||
setError((err as Error).message)
|
||||
}
|
||||
}, [organizationId, teamId])
|
||||
|
||||
const loadBoard = useCallback(async (id: string) => {
|
||||
try {
|
||||
setBoard(await api.get<Board>(`/api/orgboard/board?teamId=${id}`))
|
||||
setCartable(await api.get<Task[]>('/api/orgboard/cartable'))
|
||||
} catch (err) {
|
||||
setError((err as Error).message)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
void loadTeams()
|
||||
}, [loadTeams])
|
||||
|
||||
useEffect(() => {
|
||||
if (teamId) {
|
||||
void loadBoard(teamId)
|
||||
}
|
||||
}, [teamId, loadBoard])
|
||||
|
||||
async function run(action: () => Promise<unknown>) {
|
||||
setError(null)
|
||||
try {
|
||||
await action()
|
||||
} catch (err) {
|
||||
setError((err as Error).message)
|
||||
}
|
||||
}
|
||||
|
||||
const saveOrg = () =>
|
||||
run(async () => {
|
||||
await api.post('/api/orgboard/organizations', { organizationId, name: orgName })
|
||||
})
|
||||
|
||||
const createTeam = () =>
|
||||
run(async () => {
|
||||
const team = await api.post<Team>('/api/orgboard/teams', { organizationId, name: newTeam })
|
||||
setNewTeam('')
|
||||
await loadTeams()
|
||||
setTeamId(team.id)
|
||||
})
|
||||
|
||||
const createTask = () =>
|
||||
run(async () => {
|
||||
if (!teamId) {
|
||||
return
|
||||
}
|
||||
await api.post('/api/orgboard/tasks', { teamId, title: newTask, type: 'Story' })
|
||||
setNewTask('')
|
||||
await loadBoard(teamId)
|
||||
})
|
||||
|
||||
const move = (id: string, status: string) =>
|
||||
run(async () => {
|
||||
await api.patch(`/api/orgboard/tasks/${id}/move`, { status })
|
||||
if (teamId) {
|
||||
await loadBoard(teamId)
|
||||
}
|
||||
})
|
||||
|
||||
const assignToMe = (id: string) =>
|
||||
run(async () => {
|
||||
await api.patch(`/api/orgboard/tasks/${id}/assign`, { memberId })
|
||||
if (teamId) {
|
||||
await loadBoard(teamId)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 text-slate-900">
|
||||
<header className="flex items-center justify-between border-b border-slate-200 bg-indigo-950 px-6 py-3 text-slate-100">
|
||||
<span className="font-bold tracking-tight">TeamUp.AI</span>
|
||||
<button type="button" onClick={logout} className="text-sm text-indigo-300 hover:text-indigo-100">
|
||||
Sign out
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-6xl px-6 py-6">
|
||||
{error && <p className="mb-4 rounded-lg bg-rose-100 px-3 py-2 text-sm text-rose-700">{error}</p>}
|
||||
|
||||
<section className="mb-6 flex flex-wrap items-end gap-3">
|
||||
<Inline label="Organization name" value={orgName} onChange={setOrgName} onSubmit={saveOrg} cta="Save" />
|
||||
<Inline label="New team" value={newTeam} onChange={setNewTeam} onSubmit={createTeam} cta="Create team" />
|
||||
<label className="text-sm">
|
||||
<span className="block text-slate-500">Team</span>
|
||||
<select
|
||||
value={teamId ?? ''}
|
||||
onChange={(e) => setTeamId(e.target.value || null)}
|
||||
className="mt-1 rounded-lg border border-slate-300 px-3 py-2"
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{teams.map((team) => (
|
||||
<option key={team.id} value={team.id}>
|
||||
{team.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
{teamId && (
|
||||
<section className="mb-6 flex items-end gap-3">
|
||||
<Inline label="New task" value={newTask} onChange={setNewTask} onSubmit={createTask} cta="Add task" />
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
|
||||
{COLUMNS.map((column) => {
|
||||
const items = board?.columns.find((c) => c.status === column)?.items ?? []
|
||||
return (
|
||||
<div key={column} className="rounded-xl border border-slate-200 bg-white p-3">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
{column} <span className="text-slate-400">({items.length})</span>
|
||||
</h2>
|
||||
<ul className="space-y-2">
|
||||
{items.map((task) => (
|
||||
<li key={task.id} className="rounded-lg border border-slate-200 p-2 text-sm">
|
||||
<div className="font-medium">{task.title}</div>
|
||||
<div className="mt-1 text-xs text-slate-500">
|
||||
{task.assigneeKind === 'Member' ? 'assigned' : 'unassigned'}
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
<select
|
||||
value={task.status}
|
||||
onChange={(e) => move(task.id, e.target.value)}
|
||||
className="rounded border border-slate-300 px-1 py-0.5 text-xs"
|
||||
>
|
||||
{COLUMNS.map((status) => (
|
||||
<option key={status} value={status}>
|
||||
{status}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => assignToMe(task.id)}
|
||||
className="rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700 hover:bg-indigo-200"
|
||||
>
|
||||
Assign to me
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<section className="mt-8">
|
||||
<h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||
My cartable ({cartable.length})
|
||||
</h2>
|
||||
<ul className="space-y-1 text-sm">
|
||||
{cartable.map((task) => (
|
||||
<li key={task.id} className="rounded-lg border border-slate-200 bg-white px-3 py-2">
|
||||
{task.title} <span className="text-slate-400">· {task.status}</span>
|
||||
</li>
|
||||
))}
|
||||
{cartable.length === 0 && <li className="text-slate-400">Nothing assigned to you yet.</li>}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Inline(props: {
|
||||
label: string
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
onSubmit: () => void
|
||||
cta: string
|
||||
}) {
|
||||
return (
|
||||
<label className="text-sm">
|
||||
<span className="block text-slate-500">{props.label}</span>
|
||||
<span className="mt-1 flex gap-2">
|
||||
<input
|
||||
value={props.value}
|
||||
onChange={(e) => props.onChange(e.target.value)}
|
||||
className="rounded-lg border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onSubmit}
|
||||
className="rounded-lg bg-indigo-600 px-3 py-2 text-white hover:bg-indigo-500"
|
||||
>
|
||||
{props.cta}
|
||||
</button>
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import { type FormEvent, useState } from 'react'
|
||||
import { api } from '../lib/api'
|
||||
import { useAuth } from '../store/auth'
|
||||
|
||||
interface AuthResponse {
|
||||
token: string
|
||||
memberId: string
|
||||
}
|
||||
|
||||
interface BootstrapResponse {
|
||||
token: string
|
||||
memberId: string
|
||||
organizationId: string
|
||||
}
|
||||
|
||||
interface MeResponse {
|
||||
memberships: { scopeType: string; scopeId: string; role: string }[]
|
||||
}
|
||||
|
||||
export function LoginPage() {
|
||||
const setAuth = useAuth((state) => state.setAuth)
|
||||
const [mode, setMode] = useState<'login' | 'bootstrap'>('login')
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [displayName, setDisplayName] = useState('')
|
||||
const [orgName, setOrgName] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
async function submit(event: FormEvent) {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
if (mode === 'bootstrap') {
|
||||
const result = await api.post<BootstrapResponse>('/api/identity/bootstrap', {
|
||||
organizationName: orgName,
|
||||
ownerEmail: email,
|
||||
ownerDisplayName: displayName,
|
||||
ownerPassword: password,
|
||||
})
|
||||
setAuth(result.token, result.memberId, result.organizationId)
|
||||
} else {
|
||||
const result = await api.post<AuthResponse>('/api/identity/auth/login', { email, password })
|
||||
setAuth(result.token, result.memberId, null)
|
||||
const me = await api.get<MeResponse>('/api/identity/me')
|
||||
const org = me.memberships.find((m) => m.scopeType === 'Organization')
|
||||
setAuth(result.token, result.memberId, org?.scopeId ?? null)
|
||||
}
|
||||
} catch (err) {
|
||||
setError((err as Error).message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-indigo-950 text-slate-100 grid place-items-center px-6">
|
||||
<form onSubmit={submit} className="w-full max-w-sm rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-6">
|
||||
<h1 className="text-2xl font-bold tracking-tight">TeamUp.AI</h1>
|
||||
<p className="mt-1 text-sm text-indigo-300">
|
||||
{mode === 'login' ? 'Sign in' : 'Create the first owner'}
|
||||
</p>
|
||||
|
||||
<div className="mt-5 space-y-3">
|
||||
{mode === 'bootstrap' && (
|
||||
<Field label="Organization" value={orgName} onChange={setOrgName} />
|
||||
)}
|
||||
{mode === 'bootstrap' && (
|
||||
<Field label="Display name" value={displayName} onChange={setDisplayName} />
|
||||
)}
|
||||
<Field label="Email" type="email" value={email} onChange={setEmail} />
|
||||
<Field label="Password" type="password" value={password} onChange={setPassword} />
|
||||
</div>
|
||||
|
||||
{error && <p className="mt-3 text-sm text-rose-400">{error}</p>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
className="mt-5 w-full rounded-lg bg-indigo-500 px-4 py-2 font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
|
||||
>
|
||||
{busy ? '…' : mode === 'login' ? 'Sign in' : 'Bootstrap'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode(mode === 'login' ? 'bootstrap' : 'login')}
|
||||
className="mt-3 w-full text-sm text-indigo-300 hover:text-indigo-200"
|
||||
>
|
||||
{mode === 'login' ? 'First run? Bootstrap the owner →' : '← Back to sign in'}
|
||||
</button>
|
||||
</form>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
function Field(props: {
|
||||
label: string
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
type?: string
|
||||
}) {
|
||||
return (
|
||||
<label className="block text-sm">
|
||||
<span className="text-indigo-200">{props.label}</span>
|
||||
<input
|
||||
type={props.type ?? 'text'}
|
||||
value={props.value}
|
||||
onChange={(e) => props.onChange(e.target.value)}
|
||||
required
|
||||
className="mt-1 w-full rounded-lg border border-indigo-700 bg-indigo-950/60 px-3 py-2 text-slate-100 outline-none focus:border-indigo-400"
|
||||
/>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
interface AuthState {
|
||||
token: string | null
|
||||
memberId: string | null
|
||||
organizationId: string | null
|
||||
setAuth: (token: string, memberId: string, organizationId: string | null) => void
|
||||
logout: () => void
|
||||
}
|
||||
|
||||
export const useAuth = create<AuthState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
token: null,
|
||||
memberId: null,
|
||||
organizationId: null,
|
||||
setAuth: (token, memberId, organizationId) => set({ token, memberId, organizationId }),
|
||||
logout: () => set({ token: null, memberId: null, organizationId: null }),
|
||||
}),
|
||||
{ name: 'teamup-auth' },
|
||||
),
|
||||
)
|
||||
Reference in New Issue
Block a user