UL/ulweb
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Build core domain: orgs, users, jobs, locate points, auth, live map

Browse Source 
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
2026-07-14 12:43:25 +00:00
parent cbe0cc6da2
commit eae4075265
79 changed files with 10215 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/components/Layout.tsx Normal file
View 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>
</>
);
}

10
web/components/map/JobMap.tsx Normal file
View File

@@ -0,0 +1,10 @@
import dynamic from 'next/dynamic';
import type { JobMapProps } from './types';
// Provider dispatcher. Google is the only implementation for now; an Esri
// implementation would be selected here (e.g. via NEXT_PUBLIC_MAP_PROVIDER).
const GoogleJobMap = dynamic(() => import('./google/GoogleJobMap'), { ssr: false });
export default function JobMap(props: JobMapProps) {
return <GoogleJobMap {...props} />;
}

120
web/components/map/google/GoogleJobMap.tsx Normal file
View File

@@ -0,0 +1,120 @@
/// <reference types="google.maps" />
import { APIProvider, Map as GoogleMap, useMap } from '@vis.gl/react-google-maps';
import { useEffect, useRef } from 'react';
import { JobMapProps, MapPoint, UTILITY_COLORS } from '../types';
const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '';
const DEFAULT_CENTER = { lat: 39.5, lng: -98.35 }; // continental US
const DEFAULT_ZOOM = 4;
function colorFor(utilityType: string): string {
return UTILITY_COLORS[utilityType] ?? UTILITY_COLORS.UNKNOWN;
}
function orderKey(p: MapPoint): number {
return p.sequence ?? new Date(p.recordedAt).getTime();
}
// Draws points as colored circles plus one polyline per utility run.
// Imperative overlays (google.maps.Marker/Polyline) are used because
// @vis.gl/react-google-maps has no polyline component.
function PointsLayer({ points, fitBounds }: { points: MapPoint[]; fitBounds: boolean }) {
const map = useMap();
const overlaysRef = useRef<{ setMap: (m: google.maps.Map | null) => void }[]>([]);
const fittedCountRef = useRef(0);
useEffect(() => {
if (!map) {
return;
}
overlaysRef.current.forEach((o) => o.setMap(null));
overlaysRef.current = [];
if (points.length === 0) {
return;
}
const byUtility = new Map<string, MapPoint[]>();
for (const p of points) {
const group = byUtility.get(p.utilityType) ?? [];
group.push(p);
byUtility.set(p.utilityType, group);
}
for (const [utility, group] of byUtility) {
const sorted = [...group].sort((a, b) => orderKey(a) - orderKey(b));
const color = colorFor(utility);
const line = new google.maps.Polyline({
path: sorted.map((p) => ({ lat: p.lat, lng: p.lng })),
strokeColor: color,
strokeOpacity: 0.8,
strokeWeight: 3,
map,
});
overlaysRef.current.push(line);
for (const p of sorted) {
const marker = new google.maps.Marker({
position: { lat: p.lat, lng: p.lng },
map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: color,
fillOpacity: 1,
strokeColor: '#ffffff',
strokeWeight: 1.5,
},
title: `${p.utilityType} · ${p.fixType}${p.depth != null ? ` · depth ${p.depth}m` : ''}\n${new Date(p.recordedAt).toLocaleString()}`,
});
overlaysRef.current.push(marker);
}
}
if (fitBounds && points.length !== fittedCountRef.current) {
fittedCountRef.current = points.length;
const bounds = new google.maps.LatLngBounds();
points.forEach((p) => bounds.extend({ lat: p.lat, lng: p.lng }));
map.fitBounds(bounds, 48);
}
}, [map, points, fitBounds]);
return null;
}
export default function GoogleJobMap({ points, fitBounds = true, heightPx = 480 }: JobMapProps) {
if (!API_KEY) {
return (
<div
style={{
height: heightPx,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px dashed #999',
borderRadius: 8,
color: '#666',
}}
>
Set NEXT_PUBLIC_GOOGLE_MAPS_API_KEY in .env to enable the map.
</div>
);
}
return (
<div style={{ height: heightPx, borderRadius: 8, overflow: 'hidden' }}>
<APIProvider apiKey={API_KEY}>
<GoogleMap
defaultCenter={points[0] ? { lat: points[0].lat, lng: points[0].lng } : DEFAULT_CENTER}
defaultZoom={points[0] ? 18 : DEFAULT_ZOOM}
mapTypeId="hybrid"
gestureHandling="greedy"
>
<PointsLayer points={points} fitBounds={fitBounds} />
</GoogleMap>
</APIProvider>
</div>
);
}

34
web/components/map/types.ts Normal file
View File

@@ -0,0 +1,34 @@
// Provider-neutral mapping types. Pages import only these and <JobMap>;
// swapping Google for Esri later means adding a new provider implementation
// of JobMapProps under components/map/esri/ and switching the dispatcher.
export interface MapPoint {
id: string;
lat: number;
lng: number;
utilityType: string;
fixType: string;
depth: number | null;
sequence: number | null;
recordedAt: string;
}
export interface JobMapProps {
points: MapPoint[];
// Pan/zoom to fit all points whenever their count changes
fitBounds?: boolean;
heightPx?: number;
}
// APWA uniform color code for marking underground utilities
export const UTILITY_COLORS: Record<string, string> = {
ELECTRIC: '#d32f2f', // red
GAS: '#fbc02d', // yellow
WATER: '#1976d2', // blue
SEWER: '#388e3c', // green
TELECOM: '#f57c00', // orange
CATV: '#f57c00', // orange
FIBER: '#f57c00', // orange
STEAM: '#fbc02d', // yellow
UNKNOWN: '#e91e8c', // pink (unknown/proposed)
};