first commit

2026-03-14 20:49:11 -04:00
commit 08768723bc
31 changed files with 8984 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,29 @@
 # Dependencies
 node_modules/
 # Build output
 dist/
 build/
 # Environment files
 .env
 .env.local
 .env.*.local
 # Logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor / OS
 .DS_Store
 .vscode/
 .idea/
 *.swp
 *.swo
 Thumbs.db
 # TypeScript
 *.tsbuildinfo
--- a/15
+++ b/15
@@ -0,0 +1,15 @@
 FROM node:20-alpine as builder
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 COPY . .
 RUN cp node_modules/maplibre-gl/dist/maplibre-gl-csp.js public/maplibre-gl.js \
 && cp node_modules/maplibre-gl/dist/maplibre-gl-csp-worker.js public/maplibre-gl-csp-worker.js \
 && cp node_modules/maplibre-gl/dist/maplibre-gl.css public/maplibre-gl.css
 RUN npm run build
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 5173
 CMD ["nginx", "-g", "daemon off;"]
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -0,0 +1,6 @@
 FROM node:20-alpine
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 # source code is bind-mounted at runtime — node_modules come from this image layer
 CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173"]
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 # TruckNet Frontend
 React + TypeScript + Vite frontend for TruckNet.
 ## Stack
 - React 19
 - TypeScript
 - Vite
 - Tailwind CSS
 - MapLibre GL + PMTiles (Protomaps)
 ## Development
 ```bash
 npm install
 npm run dev
 ```
 ## Build
 ```bash
 npm run build
 ```
--- a/index.html
+++ b/index.html
@@ -0,0 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#1a1a2e" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>TruckNet</title>
    <link rel="icon" type="image/svg+xml" href="/truck.svg" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="stylesheet" href="/maplibre-gl.css" />
    <script src="/maplibre-gl.js"></script>
    <script type="importmap">{"imports":{"maplibre-gl":"/maplibre-gl-wrapper.js"}}</script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,31 @@
 server {
    listen 5173;
    root /usr/share/nginx/html;
    index index.html;
    location /auth/ {
        proxy_pass http://auth-api:3001/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /api/ {
        proxy_pass http://main-api:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /tiles/ {
        alias /var/www/tiles/;
        add_header Accept-Ranges bytes;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers Range;
        add_header Access-Control-Expose-Headers Content-Range,Content-Length;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,34 @@
 {
  "name": "trucknet-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@protomaps/basemaps": "^5.7.2",
    "@radix-ui/react-dialog": "^1.1.0",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-toast": "^1.2.0",
    "clsx": "^2.1.0",
    "idb": "^8.0.0",
    "maplibre-gl": "^5.0.0",
    "pmtiles": "^3.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^2.5.0"
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@vitejs/plugin-react": "^4.3.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.0",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.6.0",
    "vite": "^6.0.0",
    "vite-plugin-pwa": "^0.21.0"
  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
 module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
 }
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,22 @@
 {
  "name": "TruckNet",
  "short_name": "TruckNet",
  "description": "The Modern CB Radio for Truck Drivers",
  "theme_color": "#1a1a2e",
  "background_color": "#1a1a2e",
  "display": "fullscreen",
  "orientation": "any",
  "start_url": "/",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
 }
--- a/public/maplibre-gl-wrapper.js
+++ b/public/maplibre-gl-wrapper.js
@@ -0,0 +1 @@
 export default window.maplibregl;
--- a/public/sw.js
+++ b/public/sw.js
@@ -0,0 +1,4 @@
 // This file is a placeholder. The real service worker is generated by vite-plugin-pwa at build time.
 // During development, this file is served as-is and the PWA plugin registers its own sw.
 self.addEventListener('install', () => self.skipWaiting());
 self.addEventListener('activate', () => self.clients.claim());
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,181 @@
 import { useState, useCallback, useRef } from 'react'
 import { MapComponent } from './components/MapComponent'
 import { BottomSheet } from './components/BottomSheet'
 import { FeedCard } from './components/FeedCard'
 import { ReportForm } from './components/ReportForm'
 import { ServiceDashboard } from './components/ServiceDashboard'
 import { useAuth } from './hooks/useAuth'
 import { useReports } from './hooks/useReports'
 import { BoundingBox, ReportType, UserRole } from './types'
 import { clsx } from 'clsx'
 type Tab = 'feed' | 'service'
 function LoginScreen({ onLogin, onRegister }: {
  onLogin: (h: string, p: string) => Promise<boolean>
  onRegister: (h: string, p: string, r: UserRole) => Promise<boolean>
 }) {
  const [mode, setMode] = useState<'login' | 'register'>('login')
  const [handle, setHandle] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState<UserRole>('driver')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError('')
    setLoading(true)
    if (mode === 'login') {
      const ok = await onLogin(handle, password)
      if (!ok) setError('Invalid credentials')
    } else {
      const ok = await onRegister(handle, password, role)
      if (!ok) setError('Registration failed — handle may be taken')
      else setMode('login')
    }
    setLoading(false)
  }
  return (
    <div className="min-h-screen bg-trucker-bg flex items-center justify-center p-6">
      <div className="w-full max-w-sm">
        <div className="text-center mb-8">
          <div className="text-5xl mb-3">🚛</div>
          <h1 className="text-3xl font-black text-white">TruckNet</h1>
          <p className="text-gray-400 mt-1">The Modern CB Radio</p>
        </div>
        <div className="bg-trucker-card rounded-2xl p-6">
          <div className="flex gap-2 mb-6">
            {(['login', 'register'] as const).map(m => (
              <button key={m} onClick={() => setMode(m)}
                className={clsx('flex-1 py-2 rounded-lg text-sm font-semibold capitalize transition-colors',
                  mode === m ? 'bg-trucker-accent text-black' : 'text-gray-400 hover:text-white')}>
                {m}
              </button>
            ))}
          </div>
          <form onSubmit={handleSubmit} className="space-y-4">
            <input value={handle} onChange={e => setHandle(e.target.value)}
              placeholder="Handle (e.g. BigRig42)" required minLength={3} maxLength={30}
              className="w-full bg-trucker-bg border border-gray-600 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-trucker-accent" />
            <input value={password} onChange={e => setPassword(e.target.value)}
              type="password" placeholder="Password" required minLength={8}
              className="w-full bg-trucker-bg border border-gray-600 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-trucker-accent" />
            {mode === 'register' && (
              <select value={role} onChange={e => setRole(e.target.value as UserRole)}
                className="w-full bg-trucker-bg border border-gray-600 rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:border-trucker-accent">
                <option value="driver">Driver</option>
                <option value="mechanic_shop">Mechanic Shop</option>
                <option value="mobile_mechanic">Mobile Mechanic</option>
              </select>
            )}
            {error && <p className="text-red-400 text-sm">{error}</p>}
            <button type="submit" disabled={loading}
              className="w-full py-3 bg-trucker-accent text-black font-bold rounded-xl disabled:opacity-50">
              {loading ? '...' : mode === 'login' ? 'Sign In' : 'Create Account'}
            </button>
          </form>
        </div>
      </div>
    </div>
  )
 }
 export default function App() {
  const { user, login, register, logout } = useAuth()
  const { reports, fetchNear, createReport } = useReports()
  const [tab, setTab] = useState<Tab>('feed')
  const [reportOpen, setReportOpen] = useState(false)
  const mapCenterRef = useRef<{ lat: number; lng: number }>({ lat: 39, lng: -98 })
  const handleBoundsChange = useCallback((bbox: BoundingBox) => {
    mapCenterRef.current = {
      lat: (bbox.min_lat + bbox.max_lat) / 2,
      lng: (bbox.min_lng + bbox.max_lng) / 2,
    }
    fetchNear(bbox)
  }, [fetchNear])
  const handleSubmitReport = useCallback(async (type: ReportType, text: string) => {
    const { lat, lng } = mapCenterRef.current
    await createReport(lat, lng, type, text)
    setReportOpen(false)
  }, [createReport])
  if (!user) {
    return <LoginScreen onLogin={login} onRegister={register} />
  }
  const isDriver = user.role === 'driver'
  const mechanicRole = user.role === 'mechanic_shop' || user.role === 'mobile_mechanic'
  return (
    <div className="h-screen w-screen bg-trucker-bg relative overflow-hidden">
      {/* Full-screen map */}
      <div className="absolute inset-0">
        <MapComponent
          reports={reports}
          onBoundsChange={handleBoundsChange}
        />
      </div>
      {/* Top bar */}
      <div className="absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 pt-safe pb-2 bg-gradient-to-b from-black/60 to-transparent">
        <div className="flex items-center gap-2">
          <span className="text-2xl">🚛</span>
          <span className="text-white font-black text-lg">TruckNet</span>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-gray-300 text-sm">@{user.handle}</span>
          <button onClick={logout} className="text-gray-400 hover:text-white text-sm">Sign out</button>
        </div>
      </div>
      {/* Driver: report button bottom-right */}
      {isDriver && (
        <button
          onClick={() => setReportOpen(true)}
          className="absolute bottom-32 right-4 z-20 w-14 h-14 bg-trucker-accent text-black text-3xl font-bold rounded-full shadow-lg flex items-center justify-center"
          aria-label="New report"
        >
          +
        </button>
      )}
      {/* Report form */}
      {reportOpen && (
        <ReportForm
          lat={mapCenterRef.current.lat}
          lng={mapCenterRef.current.lng}
          onSubmit={handleSubmitReport}
          onCancel={() => setReportOpen(false)}
        />
      )}
      {/* Bottom sheet */}
      <BottomSheet title={mechanicRole ? 'Service Dashboard' : 'Recent Reports'}>
        {mechanicRole ? (
          <>
            <div className="flex gap-2 mb-4">
              {(['feed', 'service'] as Tab[]).map(t => (
                <button key={t} onClick={() => setTab(t)}
                  className={clsx('flex-1 py-2 rounded-lg text-sm font-semibold capitalize transition-colors',
                    tab === t ? 'bg-trucker-accent text-black' : 'text-gray-400')}>
                  {t === 'feed' ? 'Feed' : 'Service Requests'}
                </button>
              ))}
            </div>
            {tab === 'feed' ? (
              reports.map(r => <FeedCard key={r.id} report={r} />)
            ) : (
              <ServiceDashboard />
            )}
          </>
        ) : (
          reports.map(r => <FeedCard key={r.id} report={r} />)
        )}
      </BottomSheet>
    </div>
  )
 }
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@@ -0,0 +1,56 @@
 import { useState, useRef } from 'react'
 import { clsx } from 'clsx'
 interface BottomSheetProps {
  children: React.ReactNode
  title?: string
 }
 type SheetState = 'peek' | 'half' | 'full'
 const HEIGHT: Record<SheetState, string> = {
  peek: '80px',
  half: '50vh',
  full: '90vh',
 }
 export function BottomSheet({ children, title }: BottomSheetProps) {
  const [state, setState] = useState<SheetState>('peek')
  const startY = useRef<number>(0)
  const handleTouchStart = (e: React.TouchEvent) => {
    startY.current = e.touches[0].clientY
  }
  const handleTouchEnd = (e: React.TouchEvent) => {
    const delta = startY.current - e.changedTouches[0].clientY
    if (delta > 50) {
      setState(s => s === 'peek' ? 'half' : 'full')
    } else if (delta < -50) {
      setState(s => s === 'full' ? 'half' : 'peek')
    }
  }
  return (
    <div
      className="fixed bottom-0 left-0 right-0 bg-trucker-card rounded-t-2xl shadow-2xl z-10 transition-all duration-300 overflow-hidden"
      style={{ height: HEIGHT[state] }}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      <div
        className="flex flex-col items-center pt-3 pb-2 cursor-pointer"
        onClick={() => setState(s => s === 'peek' ? 'half' : s === 'half' ? 'full' : 'peek')}
      >
        <div className="w-10 h-1 rounded-full bg-gray-500 mb-2" />
        {title && <span className="text-white font-semibold text-sm">{title}</span>}
      </div>
      <div
        className={clsx('overflow-y-auto px-4 pb-8', state === 'peek' ? 'hidden' : 'block')}
        style={{ height: 'calc(100% - 48px)' }}
      >
        {children}
      </div>
    </div>
  )
 }
--- a/src/components/FeedCard.tsx
+++ b/src/components/FeedCard.tsx
@@ -0,0 +1,74 @@
 import { Report } from '../types'
 import apiFetch from '../lib/api'
 import { useState } from 'react'
 import { clsx } from 'clsx'
 const TYPE_COLORS: Record<string, string> = {
  police: 'bg-blue-600',
  dot: 'bg-purple-600',
  hazard: 'bg-yellow-500',
  road_condition: 'bg-cyan-600',
  breakdown_request: 'bg-red-600',
  other: 'bg-gray-600',
 }
 const TYPE_LABELS: Record<string, string> = {
  police: '🚔 Police',
  dot: '🔍 DOT',
  hazard: '⚠️ Hazard',
  road_condition: '🌧️ Road',
  breakdown_request: '🔧 Breakdown',
  other: '📍 Other',
 }
 interface FeedCardProps {
  report: Report
  onVote?: (id: string, votes: number) => void
 }
 export function FeedCard({ report, onVote }: FeedCardProps) {
  const [upvotes, setUpvotes] = useState(report.upvotes)
  const [voted, setVoted] = useState(false)
  async function handleUpvote() {
    if (voted) return
    await apiFetch(`/reports/${report.id}/upvote`, { method: 'POST' })
    setUpvotes(v => v + 1)
    setVoted(true)
    onVote?.(report.id, upvotes + 1)
  }
  const timeAgo = (() => {
    const diff = Date.now() - new Date(report.created_at).getTime()
    const mins = Math.floor(diff / 60000)
    if (mins < 1) return 'just now'
    if (mins < 60) return `${mins}m ago`
    return `${Math.floor(mins / 60)}h ago`
  })()
  return (
    <div className="bg-trucker-bg border border-gray-700 rounded-xl p-4 mb-3">
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <span className={clsx('text-xs font-bold px-2 py-1 rounded-full text-white', TYPE_COLORS[report.report_type])}>
            {TYPE_LABELS[report.report_type]}
          </span>
          <span className="text-gray-400 text-xs">@{report.handle}</span>
        </div>
        <span className="text-gray-500 text-xs">{timeAgo}</span>
      </div>
      <p className="text-white text-sm mb-3">{report.text}</p>
      <div className="flex items-center gap-4">
        <button
          onClick={handleUpvote}
          disabled={voted}
          className={clsx('flex items-center gap-1 text-xs transition-colors',
            voted ? 'text-trucker-accent' : 'text-gray-400 hover:text-trucker-accent')}
        >
          👍 {upvotes}
        </button>
        <span className="text-gray-600 text-xs">🚩 {report.flags}</span>
      </div>
    </div>
  )
 }
--- a/src/components/MapComponent.tsx
+++ b/src/components/MapComponent.tsx
@@ -0,0 +1,228 @@
 import { useEffect, useRef } from 'react'
 import maplibregl from 'maplibre-gl'
 import { Protocol } from 'pmtiles'
 import { layers, namedFlavor } from '@protomaps/basemaps'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { Report, BoundingBox } from '../types'
 // Both Rollup (prod) and esbuild (dev) mangle the inline worker blob — always use the CSP worker.
 // Dev: served from node_modules by the Vite plugin in vite.config.ts
 // Prod: copied to public/ by the production Dockerfile
 maplibregl.setWorkerUrl('/maplibre-gl-csp-worker.js')
 const TILES_URL = import.meta.env.VITE_TILES_URL ?? '/tiles/north-america.pmtiles'
 // Register once at module level — not inside a component/effect
 const _protocol = new Protocol()
 maplibregl.addProtocol('pmtiles', _protocol.tile)
 const REPORT_ICONS: Record<string, string> = {
  police: '🚔',
  dot: '🔍',
  hazard: '⚠️',
  road_condition: '🌧️',
  breakdown_request: '🔧',
  other: '📍',
 }
 interface MapComponentProps {
  reports: Report[]
  onBoundsChange: (bbox: BoundingBox) => void
 }
 export function MapComponent({ reports, onBoundsChange }: MapComponentProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const mapRef = useRef<maplibregl.Map | null>(null)
  // Initialize map
  useEffect(() => {
    if (!containerRef.current || mapRef.current) return
    const map = new maplibregl.Map({
      container: containerRef.current,
      style: {
        version: 8,
        glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
        sprite: 'https://protomaps.github.io/basemaps-assets/sprites/v4/light',
        sources: {
          protomaps: {
            type: 'vector',
            url: `pmtiles://${TILES_URL}`,
            attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>',
          },
        },
        layers: layers('protomaps', namedFlavor('light'), { lang: 'en' }),
      },
      center: [-98, 39],
      zoom: 4,
    })
    // Zoom to user's location (~250 mile radius = zoom 7) on first load
    navigator.geolocation?.getCurrentPosition(
      (pos) => {
        map.flyTo({ center: [pos.coords.longitude, pos.coords.latitude], zoom: 7, duration: 1500 })
      },
      () => { /* permission denied — stay on default view */ },
      { timeout: 5000 },
    )
    map.addControl(new maplibregl.NavigationControl(), 'top-right')
    map.addControl(new maplibregl.GeolocateControl({
      positionOptions: { enableHighAccuracy: true },
      trackUserLocation: true,
    }), 'top-right')
    // Emit bbox on move
    const handleMoveEnd = () => {
      const bounds = map.getBounds()
      onBoundsChange({
        min_lat: bounds.getSouth(),
        min_lng: bounds.getWest(),
        max_lat: bounds.getNorth(),
        max_lng: bounds.getEast(),
      })
    }
    map.on('moveend', handleMoveEnd)
    map.on('load', handleMoveEnd)
    mapRef.current = map
    return () => {
      map.remove()
      mapRef.current = null
    }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps
  // Add/update report markers
  useEffect(() => {
    const map = mapRef.current
    if (!map || !map.isStyleLoaded()) return
    const markerLayer = 'reports-layer'
    const markerSource = 'reports-source'
    const geojson: GeoJSON.FeatureCollection = {
      type: 'FeatureCollection',
      features: reports.map(r => ({
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [r.lng, r.lat] },
        properties: {
          id: r.id,
          handle: r.handle,
          report_type: r.report_type,
          text: r.text,
          upvotes: r.upvotes,
          flags: r.flags,
          created_at: r.created_at,
          icon: REPORT_ICONS[r.report_type] ?? '📍',
        },
      })),
    }
    if (map.getSource(markerSource)) {
      (map.getSource(markerSource) as maplibregl.GeoJSONSource).setData(geojson)
    } else {
      map.addSource(markerSource, {
        type: 'geojson',
        data: geojson,
        cluster: true,
        clusterMaxZoom: 14,
        clusterRadius: 50,
      })
      // Cluster circles
      map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: markerSource,
        filter: ['has', 'point_count'],
        paint: {
          'circle-color': ['step', ['get', 'point_count'], '#f59e0b', 10, '#ef4444', 30, '#7c3aed'],
          'circle-radius': ['step', ['get', 'point_count'], 20, 10, 30, 30, 40],
          'circle-opacity': 0.85,
        },
      })
      map.addLayer({
        id: 'cluster-count',
        type: 'symbol',
        source: markerSource,
        filter: ['has', 'point_count'],
        layout: {
          'text-field': '{point_count_abbreviated}',
          'text-size': 14,
          'text-font': ['Noto Sans Regular'],
        },
        paint: { 'text-color': '#ffffff' },
      })
      // Individual markers
      map.addLayer({
        id: markerLayer,
        type: 'circle',
        source: markerSource,
        filter: ['!', ['has', 'point_count']],
        paint: {
          'circle-color': [
            'match', ['get', 'report_type'],
            'police', '#3b82f6',
            'dot', '#8b5cf6',
            'hazard', '#f59e0b',
            'road_condition', '#06b6d4',
            'breakdown_request', '#ef4444',
            '#6b7280',
          ],
          'circle-radius': 10,
          'circle-stroke-width': 2,
          'circle-stroke-color': '#ffffff',
        },
      })
      // Popups on click
      map.on('click', markerLayer, (e) => {
        const feature = e.features?.[0]
        if (!feature || feature.geometry.type !== 'Point') return
        const props = feature.properties
        const coords = feature.geometry.coordinates as [number, number]
        const timeAgo = getTimeAgo(props.created_at)
        new maplibregl.Popup({ closeButton: true, maxWidth: '300px' })
          .setLngLat(coords)
          .setHTML(`
            <div style="font-family: sans-serif; padding: 8px;">
              <div style="font-weight: bold; margin-bottom: 4px;">@${props.handle}</div>
              <div style="font-size: 0.85em; color: #888; margin-bottom: 8px;">${props.report_type.replace('_', ' ').toUpperCase()} · ${timeAgo}</div>
              <div style="margin-bottom: 8px;">${props.text}</div>
              <div style="font-size: 0.8em; color: #666;">👍 ${props.upvotes} · 🚩 ${props.flags}</div>
            </div>
          `)
          .addTo(map)
      })
      map.on('mouseenter', markerLayer, () => { map.getCanvas().style.cursor = 'pointer' })
      map.on('mouseleave', markerLayer, () => { map.getCanvas().style.cursor = '' })
      // Zoom into cluster on click
      map.on('click', 'clusters', async (e) => {
        const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] })
        if (!features.length) return
        const clusterId = features[0].properties.cluster_id
        const source = map.getSource(markerSource) as maplibregl.GeoJSONSource
        const zoom = await source.getClusterExpansionZoom(clusterId)
        const coords = (features[0].geometry as GeoJSON.Point).coordinates as [number, number]
        map.easeTo({ center: coords, zoom })
      })
    }
  }, [reports])
  return <div ref={containerRef} className="w-full h-full" />
 }
 function getTimeAgo(isoDate: string): string {
  const diff = Date.now() - new Date(isoDate).getTime()
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return 'just now'
  if (mins < 60) return `${mins}m ago`
  const hrs = Math.floor(mins / 60)
  if (hrs < 24) return `${hrs}h ago`
  return `${Math.floor(hrs / 24)}d ago`
 }
--- a/src/components/ReportForm.tsx
+++ b/src/components/ReportForm.tsx
@@ -0,0 +1,88 @@
 import { useState } from 'react'
 import { ReportType } from '../types'
 import { clsx } from 'clsx'
 const REPORT_TYPES: { value: ReportType; label: string; icon: string }[] = [
  { value: 'police', label: 'Police', icon: '🚔' },
  { value: 'dot', label: 'DOT Checkpoint', icon: '🔍' },
  { value: 'hazard', label: 'Hazard', icon: '⚠️' },
  { value: 'road_condition', label: 'Road Condition', icon: '🌧️' },
  { value: 'breakdown_request', label: 'Need Help', icon: '🔧' },
  { value: 'other', label: 'Other', icon: '📍' },
 ]
 interface ReportFormProps {
  lat: number
  lng: number
  onSubmit: (type: ReportType, text: string) => Promise<void>
  onCancel: () => void
 }
 export function ReportForm({ lat, lng, onSubmit, onCancel }: ReportFormProps) {
  const [type, setType] = useState<ReportType>('hazard')
  const [text, setText] = useState('')
  const [loading, setLoading] = useState(false)
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!text.trim()) return
    setLoading(true)
    await onSubmit(type, text)
    setLoading(false)
  }
  return (
    <div className="fixed inset-0 bg-black/70 flex items-end z-50">
      <div className="bg-trucker-card w-full rounded-t-2xl p-6 pb-10">
        <h2 className="text-white font-bold text-lg mb-1">New Report</h2>
        <p className="text-gray-400 text-xs mb-4">
          {lat.toFixed(5)}, {lng.toFixed(5)}
        </p>
        <form onSubmit={handleSubmit}>
          <div className="grid grid-cols-3 gap-2 mb-4">
            {REPORT_TYPES.map(rt => (
              <button
                key={rt.value}
                type="button"
                onClick={() => setType(rt.value)}
                className={clsx(
                  'flex flex-col items-center justify-center py-3 rounded-xl text-xs font-medium transition-colors',
                  type === rt.value
                    ? 'bg-trucker-accent text-black'
                    : 'bg-trucker-bg text-gray-300 hover:bg-gray-700'
                )}
              >
                <span className="text-xl mb-1">{rt.icon}</span>
                {rt.label}
              </button>
            ))}
          </div>
          <textarea
            value={text}
            onChange={e => setText(e.target.value)}
            placeholder="Describe what you're seeing..."
            maxLength={500}
            rows={3}
            className="w-full bg-trucker-bg border border-gray-600 rounded-xl p-3 text-white text-sm resize-none focus:outline-none focus:border-trucker-accent"
          />
          <div className="flex gap-3 mt-4">
            <button
              type="button"
              onClick={onCancel}
              className="flex-1 py-3 rounded-xl border border-gray-600 text-gray-300 text-sm"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading || !text.trim()}
              className="flex-1 py-3 rounded-xl bg-trucker-accent text-black font-bold text-sm disabled:opacity-50"
            >
              {loading ? 'Posting...' : 'Post Report'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
 }
--- a/src/components/ServiceDashboard.tsx
+++ b/src/components/ServiceDashboard.tsx
@@ -0,0 +1,58 @@
 import { useState, useEffect } from 'react'
 import apiFetch from '../lib/api'
 import { ServiceRequest } from '../types'
 import { clsx } from 'clsx'
 export function ServiceDashboard() {
  const [requests, setRequests] = useState<ServiceRequest[]>([])
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    apiFetch('/service-requests/open')
      .then(r => r.json())
      .then(data => setRequests(data))
      .finally(() => setLoading(false))
  }, [])
  async function handleClaim(id: string) {
    const res = await apiFetch(`/service-requests/${id}/claim`, { method: 'PATCH' })
    if (res.ok) {
      setRequests(prev => prev.filter(r => r.id !== id))
    }
  }
  if (loading) return <div className="text-gray-400 text-center py-8">Loading...</div>
  if (!requests.length) return <div className="text-gray-400 text-center py-8">No open service requests</div>
  return (
    <div className="space-y-3">
      {requests.map(req => (
        <div key={req.id} className="bg-trucker-bg border border-gray-700 rounded-xl p-4">
          <div className="flex items-start justify-between mb-2">
            <span className="text-red-400 font-bold text-sm">🔧 Service Request</span>
            <span className={clsx(
              'text-xs px-2 py-1 rounded-full',
              req.status === 'open' ? 'bg-green-800 text-green-300' : 'bg-gray-700 text-gray-400'
            )}>
              {req.status}
            </span>
          </div>
          <p className="text-white text-sm mb-2">{req.description}</p>
          {req.truck_details && Object.keys(req.truck_details).length > 0 && (
            <pre className="text-gray-400 text-xs bg-black/30 rounded p-2 mb-3 overflow-auto">
              {JSON.stringify(req.truck_details, null, 2)}
            </pre>
          )}
          {req.status === 'open' && (
            <button
              onClick={() => handleClaim(req.id)}
              className="w-full py-2 bg-trucker-accent text-black font-bold text-sm rounded-lg"
            >
              Claim Job
            </button>
          )}
        </div>
      ))}
    </div>
  )
 }
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -0,0 +1,71 @@
 import { useState, useCallback } from 'react'
 import { authFetch } from '../lib/api'
 import { setAccessToken, setUser, clearAuth, getUser, getAccessToken } from '../lib/auth'
 import { User, UserRole } from '../types'
 interface AuthState {
  user: User | null
  token: string | null
  loading: boolean
  error: string | null
 }
 export function useAuth() {
  const [state, setState] = useState<AuthState>({
    user: getUser(),
    token: getAccessToken(),
    loading: false,
    error: null,
  })
  const login = useCallback(async (handle: string, password: string) => {
    setState(s => ({ ...s, loading: true, error: null }))
    try {
      const res = await authFetch('/login', {
        method: 'POST',
        body: JSON.stringify({ handle, password }),
      })
      if (!res.ok) {
        const err = await res.json()
        setState(s => ({ ...s, loading: false, error: err.error ?? 'Login failed' }))
        return false
      }
      const data = await res.json()
      const user: User = { user_id: data.user_id, handle: data.handle, role: data.role }
      setAccessToken(data.access_token)
      setUser(user)
      setState({ user, token: data.access_token, loading: false, error: null })
      return true
    } catch {
      setState(s => ({ ...s, loading: false, error: 'Network error' }))
      return false
    }
  }, [])
  const register = useCallback(async (handle: string, password: string, role: UserRole) => {
    setState(s => ({ ...s, loading: true, error: null }))
    try {
      const res = await authFetch('/register', {
        method: 'POST',
        body: JSON.stringify({ handle, password, role }),
      })
      if (!res.ok) {
        const err = await res.json()
        setState(s => ({ ...s, loading: false, error: err.error ?? 'Registration failed' }))
        return false
      }
      return true
    } catch {
      setState(s => ({ ...s, loading: false, error: 'Network error' }))
      return false
    }
  }, [])
  const logout = useCallback(async () => {
    await authFetch('/logout', { method: 'POST' })
    clearAuth()
    setState({ user: null, token: null, loading: false, error: null })
  }, [])
  return { ...state, login, register, logout }
 }
--- a/src/hooks/useReports.ts
+++ b/src/hooks/useReports.ts
@@ -0,0 +1,88 @@
 import { useState, useCallback } from 'react'
 import apiFetch from '../lib/api'
 import { queueReport, getPendingReports, removePendingReport } from '../lib/db'
 import { Report, BoundingBox, ReportType } from '../types'
 export function useReports() {
  const [reports, setReports] = useState<Report[]>([])
  const [loading, setLoading] = useState(false)
  const fetchNear = useCallback(async (bbox: BoundingBox) => {
    setLoading(true)
    try {
      const params = new URLSearchParams({
        min_lat: bbox.min_lat.toString(),
        min_lng: bbox.min_lng.toString(),
        max_lat: bbox.max_lat.toString(),
        max_lng: bbox.max_lng.toString(),
      })
      const res = await apiFetch(`/reports/near?${params}`)
      if (res.ok) {
        const data: Report[] = await res.json()
        setReports(data)
      }
    } finally {
      setLoading(false)
    }
  }, [])
  const createReport = useCallback(async (
    lat: number,
    lng: number,
    report_type: ReportType,
    text: string,
  ) => {
    try {
      const res = await apiFetch('/reports', {
        method: 'POST',
        body: JSON.stringify({ lat, lng, report_type, text }),
      })
      if (res.ok) {
        const report: Report = await res.json()
        setReports(prev => [report, ...prev])
        return report
      }
    } catch {
      // Offline: queue locally
      const pending: Report = {
        id: crypto.randomUUID(),
        user_id: '',
        handle: 'you',
        report_type,
        lat,
        lng,
        text,
        upvotes: 0,
        flags: 0,
        created_at: new Date().toISOString(),
      }
      await queueReport(pending)
      setReports(prev => [pending, ...prev])
    }
    return null
  }, [])
  const syncPending = useCallback(async () => {
    const pending = await getPendingReports()
    for (const report of pending) {
      try {
        const res = await apiFetch('/reports', {
          method: 'POST',
          body: JSON.stringify({
            lat: report.lat,
            lng: report.lng,
            report_type: report.report_type,
            text: report.text,
          }),
        })
        if (res.ok) {
          await removePendingReport(report.id)
        }
      } catch {
        break // still offline
      }
    }
  }, [])
  return { reports, loading, fetchNear, createReport, syncPending }
 }
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,31 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    color-scheme: dark;
  }
  * {
    box-sizing: border-box;
  }
  html, body, #root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0f0f23;
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
 }
@layer utilities {
  .pt-safe {
    padding-top: env(safe-area-inset-top, 12px);
  }
 }
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -0,0 +1,37 @@
 import { getAccessToken, setAccessToken, clearAuth, isTokenExpired } from './auth'
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE ?? '/auth'
 const API_BASE = import.meta.env.VITE_API_BASE ?? '/api'
 async function refreshAccessToken(): Promise<string | null> {
  const res = await fetch(`${AUTH_BASE}/refresh`, { method: 'POST', credentials: 'include' })
  if (!res.ok) { clearAuth(); return null }
  const data = await res.json()
  setAccessToken(data.access_token)
  return data.access_token
 }
 async function apiFetch(path: string, options: RequestInit = {}): Promise<Response> {
  let token = getAccessToken()
  if (token && isTokenExpired(token)) {
    token = await refreshAccessToken()
  }
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
    ...(options.headers as Record<string, string> ?? {}),
  }
  if (token) headers['Authorization'] = `Bearer ${token}`
  return fetch(`${API_BASE}${path}`, { ...options, headers, credentials: 'include' })
 }
 export async function authFetch(path: string, options: RequestInit = {}): Promise<Response> {
  return fetch(`${AUTH_BASE}${path}`, {
    ...options,
    headers: { 'Content-Type': 'application/json', ...(options.headers ?? {}) },
    credentials: 'include',
  })
 }
 export default apiFetch
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -0,0 +1,37 @@
 import { User } from '../types'
 const ACCESS_TOKEN_KEY = 'trucknet_access_token'
 const USER_KEY = 'trucknet_user'
 export function getAccessToken(): string | null {
  return sessionStorage.getItem(ACCESS_TOKEN_KEY)
 }
 export function setAccessToken(token: string): void {
  sessionStorage.setItem(ACCESS_TOKEN_KEY, token)
 }
 export function getUser(): User | null {
  const raw = sessionStorage.getItem(USER_KEY)
  if (!raw) return null
  try { return JSON.parse(raw) } catch { return null }
 }
 export function setUser(user: User): void {
  sessionStorage.setItem(USER_KEY, JSON.stringify(user))
 }
 export function clearAuth(): void {
  sessionStorage.removeItem(ACCESS_TOKEN_KEY)
  sessionStorage.removeItem(USER_KEY)
 }
 export function isTokenExpired(token: string): boolean {
  try {
    const [, payload] = token.split('.')
    const decoded = JSON.parse(atob(payload))
    return decoded.exp * 1000 < Date.now()
  } catch {
    return true
  }
 }
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -0,0 +1,37 @@
 import { openDB, DBSchema, IDBPDatabase } from 'idb'
 import { Report } from '../types'
 interface TruckNetDB extends DBSchema {
  pending_reports: {
    key: string
    value: Report & { pending: true }
  }
 }
 let db: IDBPDatabase<TruckNetDB> | null = null
 async function getDB() {
  if (!db) {
    db = await openDB<TruckNetDB>('trucknet', 1, {
      upgrade(database) {
        database.createObjectStore('pending_reports', { keyPath: 'id' })
      },
    })
  }
  return db
 }
 export async function queueReport(report: Report): Promise<void> {
  const database = await getDB()
  await database.put('pending_reports', { ...report, pending: true })
 }
 export async function getPendingReports(): Promise<(Report & { pending: true })[]> {
  const database = await getDB()
  return database.getAll('pending_reports')
 }
 export async function removePendingReport(id: string): Promise<void> {
  const database = await getDB()
  await database.delete('pending_reports', id)
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
 )
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,52 @@
 export type UserRole = 'driver' | 'mechanic_shop' | 'mobile_mechanic'
 export type ReportType =
  | 'police'
  | 'dot'
  | 'hazard'
  | 'road_condition'
  | 'breakdown_request'
  | 'other'
 export type ServiceStatus = 'open' | 'claimed' | 'resolved'
 export interface User {
  user_id: string
  handle: string
  role: UserRole
 }
 export interface AuthTokens {
  access_token: string
  user: User
 }
 export interface Report {
  id: string
  user_id: string
  handle: string
  report_type: ReportType
  lat: number
  lng: number
  text: string
  upvotes: number
  flags: number
  created_at: string
 }
 export interface ServiceRequest {
  id: string
  user_id: string
  description: string
  truck_details: Record<string, unknown>
  status: ServiceStatus
  claimed_by: string | null
  created_at: string
 }
 export interface BoundingBox {
  min_lat: number
  min_lng: number
  max_lat: number
  max_lng: number
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,11 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
  readonly VITE_API_BASE: string
  readonly VITE_AUTH_BASE: string
  readonly VITE_TILES_URL: string
 }
 interface ImportMeta {
  readonly env: ImportMetaEnv
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,19 @@
 import type { Config } from 'tailwindcss'
 export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        trucker: {
          bg: '#0f0f23',
          card: '#1a1a35',
          accent: '#f59e0b',
          danger: '#ef4444',
          safe: '#22c55e',
        },
      },
    },
  },
  plugins: [],
 } satisfies Config
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
 {
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,69 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import { VitePWA } from 'vite-plugin-pwa'
 import { createReadStream } from 'fs'
 import { resolve } from 'path'
 // Serve maplibre CSP worker from node_modules in dev (production Dockerfile copies it to public/)
 const serveMaplibreWorker = {
  name: 'serve-maplibre-csp-worker',
  configureServer(server: { middlewares: { use: (path: string, handler: (req: unknown, res: { setHeader: (k: string, v: string) => void }, next: () => void) => void) => void } }) {
    server.middlewares.use('/maplibre-gl-csp-worker.js', (_req, res) => {
      res.setHeader('Content-Type', 'application/javascript')
      createReadStream(resolve('node_modules/maplibre-gl/dist/maplibre-gl-csp-worker.js')).pipe(res as unknown as NodeJS.WritableStream)
    })
  },
 }
 export default defineConfig({
  plugins: [
    react(),
    serveMaplibreWorker,
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        runtimeCaching: [
          {
            urlPattern: /^\/tiles\//,
            handler: 'CacheFirst',
            options: {
              cacheName: 'pmtiles-cache',
              expiration: { maxEntries: 10, maxAgeSeconds: 7 * 24 * 60 * 60 },
            },
          },
          {
            urlPattern: /^\/api\//,
            handler: 'NetworkFirst',
            options: { cacheName: 'api-cache' },
          },
        ],
      },
      manifest: {
        name: 'TruckNet',
        short_name: 'TruckNet',
        description: 'The Modern CB Radio for Truck Drivers',
        theme_color: '#1a1a2e',
        background_color: '#1a1a2e',
        display: 'fullscreen',
        orientation: 'any',
        icons: [
          { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
        ],
      },
    }),
  ],
  build: {
    rollupOptions: {
      external: ['maplibre-gl'],
    },
  },
  server: {
    proxy: {
      '/api':   { target: `http://${process.env.API_HOST  ?? 'localhost'}:3000`, rewrite: (p) => p.replace(/^\/api/, '') },
      '/auth':  { target: `http://${process.env.AUTH_HOST ?? 'localhost'}:3001`, rewrite: (p) => p.replace(/^\/auth/, '') },
      '/tiles': { target: `http://${process.env.TILES_HOST ?? 'localhost'}:80` },
    },
  },
 })