Build core domain: orgs, users, jobs, locate points, auth, live map
Replaces the device-events demo with the actual product:
- Prisma + PostGIS data layer (postgis/postgis:17-3.5). Lat/lng decimals
are the source of truth; a generated geometry(Point,4326) column with
a GIST index backs bbox queries. Migrations apply on container boot.
- JWT auth (bcryptjs + httpOnly cookie) with public registration that
creates an org; per-org roles (ORG_ADMIN/MEMBER/VIEWER) enforced by
guards on all /orgs/:orgId routes.
- Scoped API keys (X-API-Key, sha256-hashed, shown once) for
programmatic access, manageable by org admins.
- REST API: jobs/tickets CRUD with filters, points query (time range,
recordedAt cursor, bbox), members, devices, api-keys.
- MQTT ingest: devices publish to devices/{username}/points and /jobs;
unknown tickets auto-create stub jobs (source=DEVICE); every message
is raw-logged to device_events; acks on devices/{username}/jobs/ack.
Broker gets a dedicated backend user; testuser is now a plain device.
- Realtime: plain-WS gateway at /api/ws (socket.io removed) with
cookie auth and per-job channels feeding the map live.
- Next.js frontend: login/register, jobs list with filters, job detail
with live Google map (APWA utility colors, polylines per run) behind
a provider-neutral JobMap abstraction for a future Esri swap, and
settings pages for members/devices/api-keys.
- Seed: Umagul org, admin user, testuser device, demo job with RTK
points. Sample publisher updated to the new topic contract.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
65
web/components/Layout.tsx
Normal file
65
web/components/Layout.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { ReactNode } from 'react';
|
||||
import { useAuth } from '../lib/auth-context';
|
||||
|
||||
export default function Layout({ children, title }: { children: ReactNode; title?: string }) {
|
||||
const { user, memberships, activeOrg, setActiveOrgId, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{title ? `${title} · UlHub` : 'UlHub'}</title>
|
||||
</Head>
|
||||
<header
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '1.5rem',
|
||||
padding: '0.75rem 1.5rem',
|
||||
borderBottom: '1px solid #ddd',
|
||||
fontFamily: 'sans-serif',
|
||||
}}
|
||||
>
|
||||
<Link href="/" style={{ fontWeight: 700, fontSize: '1.1rem', textDecoration: 'none', color: '#111' }}>
|
||||
UlHub
|
||||
</Link>
|
||||
{user && (
|
||||
<>
|
||||
<nav style={{ display: 'flex', gap: '1rem' }}>
|
||||
<Link href="/">Jobs</Link>
|
||||
<Link href="/settings/devices">Devices</Link>
|
||||
<Link href="/settings/members">Members</Link>
|
||||
<Link href="/settings/api-keys">API Keys</Link>
|
||||
</nav>
|
||||
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
||||
{memberships.length > 1 ? (
|
||||
<select value={activeOrg?.org.id ?? ''} onChange={(e) => setActiveOrgId(e.target.value)}>
|
||||
{memberships.map((m) => (
|
||||
<option key={m.org.id} value={m.org.id}>
|
||||
{m.org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span style={{ color: '#555' }}>{activeOrg?.org.name}</span>
|
||||
)}
|
||||
<span style={{ color: '#888', fontSize: '0.9rem' }}>{user.email}</span>
|
||||
<button
|
||||
onClick={async () => {
|
||||
await logout();
|
||||
router.push('/login');
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</header>
|
||||
<main style={{ fontFamily: 'sans-serif', padding: '1.5rem', maxWidth: 1100, margin: '0 auto' }}>{children}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user