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:
ulhub
115
web/pages/jobs/[jobId].tsx
Normal file
115
web/pages/jobs/[jobId].tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Layout from '../../components/Layout';
|
||||
import JobMap from '../../components/map/JobMap';
|
||||
import type { MapPoint } from '../../components/map/types';
|
||||
import { api } from '../../lib/api';
|
||||
import { useRequireAuth } from '../../lib/auth-context';
|
||||
import { useJobStream } from '../../lib/use-job-stream';
|
||||
|
||||
interface JobDetail {
|
||||
id: string;
|
||||
ticketNumber: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
address: string | null;
|
||||
status: string;
|
||||
source: string;
|
||||
dueAt: string | null;
|
||||
createdAt: string;
|
||||
assignedTo: { id: string; name: string; email: string } | null;
|
||||
_count: { points: number };
|
||||
}
|
||||
|
||||
const STATUSES = ['OPEN', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'];
|
||||
|
||||
export default function JobDetailPage() {
|
||||
const { user, activeOrg, loading } = useRequireAuth();
|
||||
const router = useRouter();
|
||||
const jobId = typeof router.query.jobId === 'string' ? router.query.jobId : null;
|
||||
const orgId = activeOrg?.org.id ?? null;
|
||||
|
||||
const [job, setJob] = useState<JobDetail | null>(null);
|
||||
const [points, setPoints] = useState<MapPoint[]>([]);
|
||||
const [live, setLive] = useState(0);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!orgId || !jobId) {
|
||||
return;
|
||||
}
|
||||
api
|
||||
.get<JobDetail>(`/api/orgs/${orgId}/jobs/${jobId}`)
|
||||
.then(setJob)
|
||||
.catch((err) => setError(err.message));
|
||||
api
|
||||
.get<{ points: MapPoint[] }>(`/api/orgs/${orgId}/jobs/${jobId}/points`)
|
||||
.then((res) => setPoints(res.points))
|
||||
.catch((err) => setError(err.message));
|
||||
}, [orgId, jobId]);
|
||||
|
||||
const onLivePoints = useCallback((incoming: MapPoint[]) => {
|
||||
setPoints((prev) => {
|
||||
const seen = new Set(prev.map((p) => p.id));
|
||||
const fresh = incoming.filter((p) => !seen.has(p.id));
|
||||
return fresh.length > 0 ? [...prev, ...fresh] : prev;
|
||||
});
|
||||
setLive((n) => n + incoming.length);
|
||||
}, []);
|
||||
|
||||
useJobStream(jobId, onLivePoints);
|
||||
|
||||
const updateStatus = async (status: string) => {
|
||||
if (!orgId || !jobId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setJob(await api.patch<JobDetail>(`/api/orgs/${orgId}/jobs/${jobId}`, { status }));
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout title={job ? job.ticketNumber : 'Job'}>
|
||||
{error && <p style={{ color: '#c62828' }}>{error}</p>}
|
||||
{job && (
|
||||
<>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<h1 style={{ margin: 0 }}>{job.ticketNumber}</h1>
|
||||
<span style={{ fontSize: '1.1rem' }}>{job.title}</span>
|
||||
<select value={job.status} onChange={(e) => updateStatus(e.target.value)} style={{ marginLeft: 'auto' }}>
|
||||
{STATUSES.map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{s}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<p style={{ color: '#666' }}>
|
||||
{job.address && <>{job.address} · </>}
|
||||
source {job.source} · created {new Date(job.createdAt).toLocaleString()}
|
||||
{job.assignedTo && <> · assigned to {job.assignedTo.name}</>}
|
||||
{job.dueAt && <> · locate by {new Date(job.dueAt).toLocaleString()}</>}
|
||||
</p>
|
||||
{job.description && <p>{job.description}</p>}
|
||||
|
||||
<div style={{ margin: '1rem 0', display: 'flex', gap: '1rem', color: '#555' }}>
|
||||
<span>
|
||||
<strong>{points.length}</strong> points
|
||||
</span>
|
||||
<span style={{ color: live > 0 ? '#388e3c' : '#999' }}>
|
||||
● live{live > 0 ? ` (+${live} this session)` : ''}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<JobMap points={points} heightPx={520} />
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
74
web/pages/jobs/new.tsx
Normal file
74
web/pages/jobs/new.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { FormEvent, useState } from 'react';
|
||||
import Layout from '../../components/Layout';
|
||||
import { api } from '../../lib/api';
|
||||
import { useRequireAuth } from '../../lib/auth-context';
|
||||
|
||||
export default function NewJobPage() {
|
||||
const { user, activeOrg, loading } = useRequireAuth();
|
||||
const router = useRouter();
|
||||
const [form, setForm] = useState({ ticketNumber: '', title: '', address: '', description: '', dueAt: '' });
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const set = (key: keyof typeof form) => (e: { target: { value: string } }) =>
|
||||
setForm((f) => ({ ...f, [key]: e.target.value }));
|
||||
|
||||
const onSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!activeOrg) {
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const job = await api.post<{ id: string }>(`/api/orgs/${activeOrg.org.id}/jobs`, {
|
||||
ticketNumber: form.ticketNumber,
|
||||
title: form.title,
|
||||
address: form.address || undefined,
|
||||
description: form.description || undefined,
|
||||
dueAt: form.dueAt ? new Date(form.dueAt).toISOString() : undefined,
|
||||
});
|
||||
router.push(`/jobs/${job.id}`);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Failed to create job');
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || !user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout title="New job">
|
||||
<h1>New job</h1>
|
||||
<form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: 480 }}>
|
||||
<label>
|
||||
Ticket number *
|
||||
<input value={form.ticketNumber} onChange={set('ticketNumber')} required style={{ width: '100%', padding: '0.5rem' }} />
|
||||
</label>
|
||||
<label>
|
||||
Title *
|
||||
<input value={form.title} onChange={set('title')} required style={{ width: '100%', padding: '0.5rem' }} />
|
||||
</label>
|
||||
<label>
|
||||
Address / dig site
|
||||
<input value={form.address} onChange={set('address')} style={{ width: '100%', padding: '0.5rem' }} />
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<textarea value={form.description} onChange={set('description')} rows={4} style={{ width: '100%', padding: '0.5rem' }} />
|
||||
</label>
|
||||
<label>
|
||||
Locate-by date
|
||||
<input type="datetime-local" value={form.dueAt} onChange={set('dueAt')} style={{ width: '100%', padding: '0.5rem' }} />
|
||||
</label>
|
||||
{error && <p style={{ color: '#c62828', margin: 0 }}>{error}</p>}
|
||||
<button type="submit" disabled={submitting} style={{ padding: '0.6rem' }}>
|
||||
{submitting ? 'Creating…' : 'Create job'}
|
||||
</button>
|
||||
</form>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user