| `, persists widths to localStorage by table key. Re-attaches on every `htmx:afterSwap`.
+- **CSS port** — `app.css` is a full lift of the React design tokens + components, adapted to HTMX class names. Mobile `@media (max-width: 768px)` makes floating windows + map fullscreen.
+- **SVG icons** — header buttons use the React-source SVGs (filter, personnel, search, settings, timeline, map, refresh, auto-route bolt). Bigger touch targets (34×34 icon, 30px min-height regular).
+- **Thicker splitters** — 9px with centered grip bar, accent on hover/drag. Jobs↔Timeline splitter hidden when the timeline pane is collapsed.
+- **Grid horizontal scroll** — `.grid { min-width: 720px }` so narrow panes get a horizontal scrollbar instead of column-shrunk-to-nothing.
+- **Hidden filter selects** — Jobs pane dropped its inline status/type/tech/route bar; dash-cell clicks drive a single hidden `[name='status']` input, Filter window covers multi-select.
+- **Cache-bust** — `app.css?v= {msg} '
+ )
+ resp = HTMLResponse(html)
+ # Tell htmx to re-fetch panels on the page.
+ resp.headers["HX-Trigger"] = "refreshAll"
+ return resp
+
+
+@router.post("/unassign", response_class=HTMLResponse)
+async def unassign(job_id: int = Form(...), db: AsyncSession = Depends(get_db)):
+ blocked = _demo_lock_block()
+ if blocked:
+ return blocked
+ from backend.logic import assignments as assign_logic
+ ok = await assign_logic.unassign_job(db, job_id)
+ if not ok:
+ return _toast_response("Job not assigned", "warning")
+ return _toast_response(f"Job #{job_id} unassigned", "success")
+
+
+@router.get("/map", response_class=HTMLResponse)
+async def map_window(request: Request):
+ """Standalone map page — opened in a popup window from the main dashboard."""
+ return templates.TemplateResponse("map_window.html", {"request": request})
+
+
+# ── Floating window contents ────────────────────────────────────────────────
+
+@router.get("/window/personnel", response_class=HTMLResponse)
+async def personnel_window(request: Request, db: AsyncSession = Depends(get_db)):
+ from backend.database.models import TechnicianStatus
+ techs = (await db.execute(select(Technician).order_by(Technician.name))).scalars().all()
+ by_status = {s.value: [t for t in techs if t.status == s] for s in TechnicianStatus}
+ return templates.TemplateResponse(
+ "_win_personnel.html",
+ {"request": request, "techs": techs, "by_status": by_status},
+ )
+
+
+@router.get("/window/search", response_class=HTMLResponse)
+async def search_window(
+ request: Request,
+ q: str = "",
+ date_from: str = "",
+ date_to: str = "",
+ job_id: str = "",
+ tech_id: str = "",
+ customer: str = "",
+ status: str = "",
+ job_type: str = "",
+ route: str = "",
+ db: AsyncSession = Depends(get_db),
+):
+ """Job search with full criteria. Empty form = no results yet."""
+ from sqlalchemy import or_
+ from backend.database.models import Assignment, JobType
+ any_criteria = any([q, date_from, date_to, job_id, tech_id, customer, status, job_type, route])
+ jobs = []
+ if any_criteria:
+ query = select(Job)
+ if q:
+ query = query.where(or_(
+ Job.job_number.ilike(f"%{q}%"),
+ Job.customer_name.ilike(f"%{q}%"),
+ Job.service_address.ilike(f"%{q}%"),
+ ))
+ if date_from:
+ query = query.where(Job.scheduled_date >= datetime.fromisoformat(date_from).replace(tzinfo=timezone.utc))
+ if date_to:
+ query = query.where(Job.scheduled_date < datetime.fromisoformat(date_to).replace(tzinfo=timezone.utc) + timedelta(days=1))
+ if job_id:
+ try: query = query.where(Job.id == int(job_id))
+ except ValueError: pass
+ if customer:
+ query = query.where(Job.customer_name.ilike(f"%{customer}%"))
+ if status:
+ query = query.where(Job.status == JobStatus(status))
+ if job_type:
+ query = query.where(Job.job_type == JobType(job_type))
+ if route:
+ query = query.where(Job.route_criteria == route)
+ if tech_id:
+ try: query = query.where(Job.id.in_(select(Assignment.job_id).where(Assignment.technician_id == int(tech_id))))
+ except ValueError: pass
+ query = query.order_by(Job.scheduled_date.desc().nullslast(), Job.id.desc()).limit(200)
+ jobs = list((await db.execute(query)).scalars().all())
+
+ techs = (await db.execute(select(Technician).order_by(Technician.name))).scalars().all()
+ return templates.TemplateResponse(
+ "_win_search.html",
+ {
+ "request": request, "jobs": jobs,
+ "q": q, "date_from": date_from, "date_to": date_to,
+ "job_id": job_id, "tech_id": tech_id, "customer": customer,
+ "status": status, "job_type": job_type, "route": route,
+ "techs": techs,
+ "statuses": [s.value for s in JobStatus],
+ "job_types": [t.value for t in JobType],
+ "any_criteria": any_criteria,
+ },
+ )
+
+
+@router.get("/qualified/{job_id}")
+async def qualified_techs(job_id: int, db: AsyncSession = Depends(get_db)):
+ """Return list of techs qualified for a job, partitioned by skill match.
+
+ Used by the job context menu's Assign-To submenu.
+ """
+ job = (await db.execute(select(Job).where(Job.id == job_id))).scalar_one_or_none()
+ if not job:
+ return {"qualified": [], "missing_skills": []}
+ techs = (await db.execute(
+ select(Technician).where(Technician.is_active == True).order_by(Technician.name)
+ )).scalars().all()
+ required = set(job.required_skills or [])
+ qualified = []
+ unqualified = []
+ for t in techs:
+ if t.status.value == "off_duty":
+ continue
+ tech_skills = set(t.skills or [])
+ missing = required - tech_skills
+ entry = {"id": t.id, "name": t.name, "status": t.status.value, "missing": list(missing)}
+ (qualified if not missing else unqualified).append(entry)
+ return {"qualified": qualified, "unqualified": unqualified, "required": list(required)}
+
+
+@router.get("/window/job/{job_id}", response_class=HTMLResponse)
+async def job_detail_window(request: Request, job_id: int, db: AsyncSession = Depends(get_db)):
+ job = (await db.execute(select(Job).where(Job.id == job_id))).scalar_one_or_none()
+ if not job:
+ return HTMLResponse('Job not found. ', status_code=404)
+ return templates.TemplateResponse(
+ "_win_job_detail.html",
+ {"request": request, "job": job},
+ )
+
+
+@router.get("/window/tech/{tech_id}", response_class=HTMLResponse)
+async def tech_detail_window(request: Request, tech_id: int, db: AsyncSession = Depends(get_db)):
+ tech = (await db.execute(select(Technician).where(Technician.id == tech_id))).scalar_one_or_none()
+ if not tech:
+ return HTMLResponse('Tech not found. ', status_code=404)
+ # Today's assignments for context
+ now = clock.now()
+ day_start = datetime.combine(now.date(), time.min, tzinfo=timezone.utc)
+ day_end = day_start + timedelta(days=1)
+ from backend.database.models import Assignment
+ assignments = list((await db.execute(
+ select(Assignment).join(Job, Assignment.job_id == Job.id)
+ .where(Assignment.technician_id == tech_id, Job.scheduled_date >= day_start, Job.scheduled_date < day_end)
+ .order_by(Assignment.estimated_arrival.nullsfirst())
+ )).scalars().all())
+ return templates.TemplateResponse(
+ "_win_tech_detail.html",
+ {"request": request, "tech": tech, "assignments": assignments},
+ )
+
+
+@router.get("/window/settings", response_class=HTMLResponse)
+async def settings_window(request: Request):
+ return templates.TemplateResponse(
+ "_win_settings.html",
+ {"request": request, "sim": _sim_state()},
+ )
+
+
+@router.get("/window/filter", response_class=HTMLResponse)
+async def filter_window(request: Request, db: AsyncSession = Depends(get_db)):
+ from backend.database.models import JobType
+ techs = (await db.execute(select(Technician).order_by(Technician.name))).scalars().all()
+ jobs = await _todays_jobs(db)
+ routes = sorted({j.route_criteria for j in jobs if j.route_criteria})
+ return templates.TemplateResponse(
+ "_win_filter.html",
+ {
+ "request": request,
+ "techs": techs,
+ "routes": routes,
+ "statuses": [s.value for s in JobStatus],
+ "job_types": [t.value for t in JobType],
+ },
+ )
+
+
+@router.get("/map/markers")
+async def map_markers(db: AsyncSession = Depends(get_db)):
+ """JSON markers + per-tech route polylines for the Leaflet map."""
+ from backend.database.models import Assignment
+ jobs = await _todays_jobs(db)
+ techs = (
+ await db.execute(select(Technician).where(Technician.is_active == True))
+ ).scalars().all()
+
+ # Build routes: per tech, [home → job1 → job2 → ...] ordered by ETA
+ now = clock.now()
+ day_start = datetime.combine(now.date(), time.min, tzinfo=timezone.utc)
+ day_end = day_start + timedelta(days=1)
+ all_assigns = list((await db.execute(
+ select(Assignment).join(Job, Assignment.job_id == Job.id)
+ .where(Job.scheduled_date >= day_start, Job.scheduled_date < day_end)
+ )).scalars().all())
+
+ by_tech: dict[int, list] = {}
+ for a in all_assigns:
+ by_tech.setdefault(a.technician_id, []).append(a)
+ for tid in by_tech:
+ by_tech[tid].sort(key=lambda a: (a.estimated_arrival or a.job.scheduled_date or datetime.max.replace(tzinfo=timezone.utc)))
+
+ routes = []
+ for t in techs:
+ assigns = by_tech.get(t.id, [])
+ if not assigns:
+ continue
+ path = [[t.current_latitude or t.home_latitude, t.current_longitude or t.home_longitude]]
+ path.extend([[a.job.latitude, a.job.longitude] for a in assigns])
+ # Count done so the rendered route grays the completed legs
+ done_count = sum(1 for a in assigns if a.job.status.value in ("completed", "cancelled"))
+ routes.append({"tech_id": t.id, "tech_name": t.name, "path": path, "done_count": done_count})
+
+ return {
+ "jobs": [
+ {"id": j.id, "job_number": j.job_number or j.id, "customer": j.customer_name,
+ "address": j.service_address, "status": j.status.value,
+ "lat": j.latitude, "lng": j.longitude}
+ for j in jobs
+ ],
+ "techs": [
+ {"id": t.id, "name": t.name, "status": t.status.value,
+ "lat": t.current_latitude or t.home_latitude,
+ "lng": t.current_longitude or t.home_longitude}
+ for t in techs
+ if (t.current_latitude or t.home_latitude) is not None
+ ],
+ "routes": routes,
+ }
+
+
+@router.get("/timeline", response_class=HTMLResponse)
+async def timeline_fragment(
+ request: Request,
+ selected: str = "",
+ db: AsyncSession = Depends(get_db),
+):
+ rows = await _timeline_rows(db)
+ if selected:
+ try:
+ sel_ids = {int(x) for x in selected.split(",") if x.strip()}
+ rows = [r for r in rows if r["tech"].id in sel_ids]
+ except ValueError:
+ pass
+ now = clock.now()
+ now_offset = (now.hour - TIMELINE_START_HOUR) * 60 + now.minute
+ return templates.TemplateResponse(
+ "_timeline.html",
+ {
+ "request": request,
+ "rows": rows,
+ "now_offset_min": max(0, now_offset),
+ "start_hour": TIMELINE_START_HOUR,
+ "end_hour": TIMELINE_END_HOUR,
+ "total_min": (TIMELINE_END_HOUR - TIMELINE_START_HOUR) * 60,
+ "hours": list(range(TIMELINE_START_HOUR, TIMELINE_END_HOUR + 1)),
+ },
+ )
+
+
+# ── Sim bar + controls ──────────────────────────────────────────────────────
+
+@router.get("/sim/bar", response_class=HTMLResponse)
+async def sim_bar(request: Request):
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.post("/sim/start", response_class=HTMLResponse)
+async def sim_start(request: Request, speed: float = Form(500.0)):
+ _require_demo()
+ from backend.database.connection import reset_db, AsyncSessionLocal
+ from backend.database.seeds.seed_data import seed_all
+ from backend.logic.routing.auto_router import auto_route_jobs
+
+ dispatch_loop.stop()
+ await reset_db()
+ await seed_all()
+ # Pre-route all today's jobs so the demo plays a fully-routed day.
+ async with AsyncSessionLocal() as db:
+ await auto_route_jobs(db)
+ virtual_start = datetime.now(timezone.utc).replace(hour=8, minute=0, second=0, microsecond=0)
+ clock.start_simulation(virtual_start, speed=speed)
+ dispatch_loop.start(MLStrategy(), on_events=manager.broadcast_events)
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.post("/sim/pause", response_class=HTMLResponse)
+async def sim_pause(request: Request):
+ _require_demo()
+ clock.pause()
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.post("/sim/resume", response_class=HTMLResponse)
+async def sim_resume(request: Request):
+ _require_demo()
+ clock.resume()
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.post("/sim/stop", response_class=HTMLResponse)
+async def sim_stop(request: Request):
+ _require_demo()
+ dispatch_loop.stop()
+ clock.use_real_time()
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.post("/sim/speed", response_class=HTMLResponse)
+async def sim_speed(request: Request, speed: float = Form(...)):
+ _require_demo()
+ if clock.mode != ClockMode.SIMULATED:
+ raise HTTPException(status_code=400, detail="Simulation not running")
+ clock.set_speed(speed)
+ return templates.TemplateResponse("_sim_bar.html", {"request": request, "sim": _sim_state()})
+
+
+@router.get("/sim/stream")
+async def sim_stream():
+ """SSE stream of clock ticks. One event per wall-second."""
+
+ async def event_gen():
+ try:
+ while True:
+ payload = {
+ "hms": clock.now().strftime("%H:%M:%S"),
+ "speed": clock.speed,
+ "paused": clock.is_paused,
+ "mode": clock.mode.value,
+ }
+ yield f"event: tick\ndata: {json.dumps(payload)}\n\n"
+ await asyncio.sleep(1.0)
+ except asyncio.CancelledError:
+ return
+
+ return StreamingResponse(
+ event_gen(),
+ media_type="text/event-stream",
+ headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
+ )
diff --git a/backend/api/routes/simulation.py b/backend/api/routes/simulation.py
index 099e96b..b9f903f 100644
--- a/backend/api/routes/simulation.py
+++ b/backend/api/routes/simulation.py
@@ -54,11 +54,16 @@ class SpeedRequest(BaseModel):
async def sim_start(req: StartRequest):
_require_demo()
# Always reset + reseed — demo starts from a clean state every time
- from backend.database.connection import reset_db
+ from backend.database.connection import reset_db, AsyncSessionLocal
from backend.database.seeds.seed_data import seed_all
+ from backend.logic.routing.auto_router import auto_route_jobs
dispatch_loop.stop()
await reset_db()
await seed_all()
+ # Pre-route every today's job so the demo shows a fully-routed day.
+ # Niche-skill jobs that ML would leave PENDING get assigned upfront here.
+ async with AsyncSessionLocal() as db:
+ await auto_route_jobs(db)
virtual_start = req.virtual_start or datetime.now(timezone.utc).replace(
hour=8, minute=0, second=0, microsecond=0
)
diff --git a/backend/config.py b/backend/config.py
index ad31b2d..d11741a 100644
--- a/backend/config.py
+++ b/backend/config.py
@@ -14,7 +14,7 @@ class Settings(BaseSettings):
# Application
APP_NAME: str = "FieldOpt"
- APP_VERSION: str = "0.0.8"
+ APP_VERSION: str = "0.0.9"
DEBUG: bool = True
ENVIRONMENT: str = "development"
IS_DEMO: bool = False # Enable simulation engine and /simulation/* endpoints
diff --git a/backend/logic/assignments.py b/backend/logic/assignments.py
index 0aef92e..1dd4505 100644
--- a/backend/logic/assignments.py
+++ b/backend/logic/assignments.py
@@ -58,9 +58,10 @@ async def create_assignment(
)
job.status = JobStatus.ASSIGNED
- # Mark tech busy so the strategy stops picking them on subsequent jobs.
- # Step 2 of the sim tick flips them to ON_JOB on arrival; step 3 back to AVAILABLE on complete.
- if tech.status == TechnicianStatus.AVAILABLE:
+ # Only flip to EN_ROUTE for *live* assigns (now=given). Pre-routing assigns
+ # a full day at once — tech state stays AVAILABLE so the loop can stamp
+ # departures one job at a time, honoring each time_slot_start.
+ if now is not None and tech.status == TechnicianStatus.AVAILABLE:
tech.status = TechnicianStatus.EN_ROUTE
db.add(assignment)
diff --git a/backend/requirements.txt b/backend/requirements.txt
deleted file mode 100644
index 66f6f60..0000000
--- a/backend/requirements.txt
+++ /dev/null
@@ -1,22 +0,0 @@
-# FieldOpt v0.0.2 Backend Requirements
-
-# Core Framework
-fastapi==0.104.1
-uvicorn[standard]==0.24.0
-pydantic==2.5.0
-pydantic-settings==2.1.0
-
-# Database
-sqlalchemy==2.0.23
-alembic==1.13.0
-
-# CORS
-python-multipart==0.0.6
-
-# Development
-pytest==7.4.3
-pytest-asyncio==0.21.1
-httpx==0.25.2
-
-# Optional: For PostgreSQL support
-# psycopg2-binary==2.9.9
diff --git a/backend/simulation/loop.py b/backend/simulation/loop.py
index 1165900..e7c25d1 100644
--- a/backend/simulation/loop.py
+++ b/backend/simulation/loop.py
@@ -106,16 +106,62 @@ async def _run(self) -> None:
async def _tick(db: AsyncSession, now: datetime, strategy: DispatchStrategy, sim_start: datetime | None = None) -> list[DispatchEvent]:
events: list[DispatchEvent] = []
- # ── 1. Stamp estimated_arrival on newly-assigned jobs ──────────────────
- result = await db.execute(
- select(Assignment).join(Job, Assignment.job_id == Job.id).where(
+ # ── 1. Stamp estimated_arrival sequentially — one job per tech per tick ──
+ # Pre-route assigns a whole day's worth of jobs to each tech. We don't want
+ # them all firing simultaneously; instead the tech works the queue earliest
+ # time_slot first. A tech is ready for the *next* job when:
+ # - status is AVAILABLE or EN_ROUTE, AND
+ # - none of their ASSIGNED jobs already has an arrival pending.
+ candidate_techs = (await db.execute(
+ select(Technician)
+ .distinct()
+ .join(Assignment, Assignment.technician_id == Technician.id)
+ .join(Job, Assignment.job_id == Job.id)
+ .where(
+ Technician.status.in_([TechnicianStatus.AVAILABLE, TechnicianStatus.EN_ROUTE]),
Job.status == JobStatus.ASSIGNED,
Assignment.estimated_arrival.is_(None),
)
- )
- for assignment in result.scalars().all():
- travel = assignment.estimated_travel_time or 0
- assignment.estimated_arrival = now + timedelta(minutes=travel)
+ )).scalars().all()
+ for tech in candidate_techs:
+ # Skip if this tech already has an EN_ROUTE assignment ticking down.
+ pending = (await db.execute(
+ select(Assignment.id).join(Job, Assignment.job_id == Job.id).where(
+ Assignment.technician_id == tech.id,
+ Job.status == JobStatus.ASSIGNED,
+ Assignment.estimated_arrival.is_not(None),
+ ).limit(1)
+ )).scalar_one_or_none()
+ if pending is not None:
+ continue
+ next_a = (await db.execute(
+ select(Assignment).join(Job, Assignment.job_id == Job.id).where(
+ Assignment.technician_id == tech.id,
+ Job.status == JobStatus.ASSIGNED,
+ Assignment.estimated_arrival.is_(None),
+ ).order_by(Job.time_slot_start.nullsfirst(), Job.id).limit(1)
+ )).scalar_one_or_none()
+ if next_a is None:
+ continue
+ travel = next_a.estimated_travel_time or 0
+ # Honor the customer time slot: don't arrive before slot_start. Tech idles
+ # at base (AVAILABLE) until depart_time = slot_start - travel.
+ slot_str = next_a.job.time_slot_start
+ if slot_str:
+ try:
+ h, m = int(slot_str[:2]), int(slot_str[3:5])
+ slot_dt = now.replace(hour=h, minute=m, second=0, microsecond=0)
+ depart_dt = slot_dt - timedelta(minutes=travel)
+ if now < depart_dt:
+ continue # too early — wait
+ arrival_dt = max(now + timedelta(minutes=travel), slot_dt)
+ except (ValueError, IndexError):
+ arrival_dt = now + timedelta(minutes=travel)
+ else:
+ arrival_dt = now + timedelta(minutes=travel)
+ next_a.estimated_arrival = arrival_dt
+ if tech.status == TechnicianStatus.AVAILABLE:
+ tech.status = TechnicianStatus.EN_ROUTE
await db.commit()
# ── 2. ASSIGNED → IN_PROGRESS when arrival passes ──────────────────────
@@ -234,7 +280,23 @@ async def _tick(db: AsyncSession, now: datetime, strategy: DispatchStrategy, sim
)
)
active_today = count_result.scalar() or 0
- if active_today == 0:
+ # Day ends when all jobs terminal OR virtual clock passes 18:00 (post-shift).
+ # Time-based stop prevents the sim from rolling forever when ML intentionally
+ # leaves niche-skill jobs (T. Monk, Sun Ra, Tim Berne) unassigned.
+ past_shift = now.hour >= 18
+ if active_today == 0 or past_shift:
+ # Cancel any still-active jobs so they don't sit pending forever.
+ if past_shift and active_today > 0:
+ await db.execute(
+ Job.__table__.update()
+ .where(
+ Job.status.in_([JobStatus.PENDING, JobStatus.ASSIGNED]),
+ Job.scheduled_date >= day_start,
+ Job.scheduled_date < day_end,
+ )
+ .values(status=JobStatus.CANCELLED)
+ )
+ await db.commit()
events.append(DispatchEvent(event_type="day_complete", timestamp=now))
elapsed_min = int((now - sim_start).total_seconds() / 60) if sim_start else 0
diff --git a/frontend/src/styles/index.css b/backend/static/app.css
similarity index 57%
rename from frontend/src/styles/index.css
rename to backend/static/app.css
index 041770f..baa3b9d 100644
--- a/frontend/src/styles/index.css
+++ b/backend/static/app.css
@@ -1,11 +1,9 @@
/* ================================================================
- FieldOpt v0.0.8 — Enterprise Dispatch Console
- Design System & Global Styles
+ FieldOpt — HTMX UI styles. Ported from React index.css for parity.
================================================================ */
-/* --- CSS Custom Properties --- */
:root {
- /* Surface colors — neutral, professional grays */
+ /* Surface colors */
--surface-app: #1a1d23;
--surface-header: #22262e;
--surface-panel: #2a2e37;
@@ -16,13 +14,13 @@
--surface-input: #1e2128;
--surface-overlay: rgba(0, 0, 0, 0.6);
- /* Text colors */
+ /* Text */
--text-primary: #e0e2e7;
--text-secondary: #9a9da4;
--text-muted: #6b6f78;
--text-inverse: #1a1d23;
- /* Accent / Status colors — functional, not decorative */
+ /* Accent / status */
--color-accent: #4a9eff;
--color-accent-dim: #345e8a;
--color-success: #4caf6a;
@@ -37,7 +35,7 @@
--color-purple-dim: rgba(155, 126, 216, 0.15);
--color-on-hold: #7a7e88;
- /* Priority colors */
+ /* Priority */
--priority-1: #e05555;
--priority-2: #e5a834;
--priority-3: #5b9bd5;
@@ -62,31 +60,26 @@
--space-2xl: 24px;
/* Layout */
- --header-height: 40px;
- --dashboard-bar-height: 32px;
- --divider-size: 5px;
+ --header-height: 38px;
+ --sim-bar-height: 28px;
+ --dashboard-bar-height: 28px;
+ --divider-size: 9px;
--border-radius: 3px;
-
- /* Borders */
--border-color: #3a3f4a;
--border-light: #2f333b;
}
-/* --- Reset & Base --- */
-*,
-*::before,
-*::after {
+/* --- Reset --- */
+*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
-
-html, body, #root {
+html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
-
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
@@ -96,8 +89,18 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
+.mono { font-family: var(--font-mono); }
+.muted { color: var(--text-muted); }
+
+/* --- Scrollbars --- */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--surface-panel); }
+::-webkit-scrollbar-thumb { background: var(--surface-divider); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+::-webkit-scrollbar-corner { background: var(--surface-panel); }
+html, body { scrollbar-color: var(--surface-divider) var(--surface-panel); scrollbar-width: thin; }
-/* --- App Shell --- */
+/* --- App shell --- */
.app-shell {
display: flex;
flex-direction: column;
@@ -105,7 +108,7 @@ body {
overflow: hidden;
}
-/* --- Header Bar --- */
+/* --- Header bar --- */
.header-bar {
height: var(--header-height);
min-height: var(--header-height);
@@ -119,7 +122,6 @@ body {
overflow-x: auto;
overflow-y: hidden;
}
-
.header-brand {
display: flex;
align-items: center;
@@ -129,7 +131,6 @@ body {
color: var(--text-primary);
letter-spacing: -0.01em;
}
-
.header-brand-icon {
width: 18px;
height: 18px;
@@ -137,14 +138,12 @@ body {
border-radius: 3px;
flex-shrink: 0;
}
-
.header-version {
font-size: var(--font-size-xs);
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
}
-
.header-real-clock {
font-size: var(--font-size-xs);
color: var(--text-muted);
@@ -152,18 +151,15 @@ body {
margin-left: 8px;
letter-spacing: 0.03em;
}
-
.header-divider {
width: 1px;
height: 20px;
background: var(--border-color);
}
-
.header-actions {
display: flex;
align-items: center;
- gap: var(--space-md);
- margin-left: auto;
+ gap: var(--space-sm);
flex-shrink: 0;
white-space: nowrap;
}
@@ -172,8 +168,10 @@ body {
.btn {
display: inline-flex;
align-items: center;
+ justify-content: center;
gap: var(--space-sm);
- padding: 4px 10px;
+ padding: 7px 14px;
+ min-height: 30px;
font-family: var(--font-family);
font-size: var(--font-size-sm);
font-weight: 500;
@@ -186,51 +184,189 @@ body {
white-space: nowrap;
transition: background 0.1s, border-color 0.1s;
}
-
.btn:hover {
background: var(--surface-row-hover);
border-color: #4a4f5a;
}
-
-.btn:active {
- background: var(--surface-divider);
-}
-
+.btn:active { background: var(--surface-divider); }
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
-
.btn--primary {
background: var(--color-accent-dim);
border-color: var(--color-accent);
color: var(--color-accent);
}
-
-.btn--primary:hover {
- background: rgba(74, 158, 255, 0.25);
-}
-
+.btn--primary:hover { background: rgba(74, 158, 255, 0.25); }
.btn--warning {
background: var(--color-warning-dim);
border-color: var(--color-warning);
color: var(--color-warning);
}
-
-.btn--warning:hover {
- background: rgba(229, 168, 52, 0.25);
+.btn--warning:hover { background: rgba(229, 168, 52, 0.25); }
+.btn--danger {
+ background: var(--color-danger-dim);
+ border-color: var(--color-danger);
+ color: var(--color-danger);
}
-
-.btn--icon {
- padding: 4px 6px;
+.btn--danger:hover { background: rgba(224, 85, 85, 0.25); }
+.btn--success {
+ background: var(--color-success-dim);
+ border-color: var(--color-success);
+ color: var(--color-success);
+}
+.btn--success:hover { background: rgba(76, 175, 106, 0.25); }
+.btn--stop { background: var(--color-danger-dim); border-color: var(--color-danger); color: var(--color-danger); }
+.btn--sm {
+ height: 22px;
+ padding: 0 8px;
+ font-size: var(--font-size-xs);
}
-
.btn svg {
width: 14px;
height: 14px;
}
+.icon-btn,
+.btn.icon-btn,
+.btn--icon {
+ width: 34px;
+ min-width: 34px;
+ height: 34px;
+ min-height: 34px;
+ padding: 0;
+ font-size: 16px;
+}
+.icon-btn svg,
+.btn--icon svg {
+ width: 16px;
+ height: 16px;
+ display: block;
+}
+
+/* --- Day picker --- */
+.day-picker {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+.day-picker .icon-btn {
+ width: 26px;
+ min-width: 26px;
+ height: 26px;
+ min-height: 26px;
+ font-size: 12px;
+ color: var(--text-muted);
+ background: none;
+ border: 1px solid transparent;
+}
+.day-picker .icon-btn:hover {
+ background: var(--surface-row-hover);
+ color: var(--text-primary);
+ border-color: var(--border-color);
+}
+.day-btn {
+ padding: 4px 14px;
+ min-height: 26px;
+ background: rgba(74, 158, 255, 0.08);
+ border: 1px solid var(--color-accent-dim);
+ border-radius: var(--border-radius);
+ color: var(--color-accent);
+ cursor: pointer;
+ font-family: var(--font-family);
+ font-size: var(--font-size-sm);
+ font-weight: 600;
+ min-width: 110px;
+ text-align: center;
+ line-height: 1;
+}
+.day-btn:hover {
+ background: rgba(74, 158, 255, 0.16);
+ color: var(--color-accent);
+}
+
+/* --- Calendar picker --- */
+.cal-picker {
+ position: fixed;
+ z-index: 9999;
+ background: var(--surface-panel);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 10px;
+ box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+ min-width: 220px;
+}
+.cal-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+}
+.cal-month-label {
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ color: var(--text-primary);
+}
+.cal-nav {
+ background: none;
+ border: none;
+ color: var(--text-secondary);
+ cursor: pointer;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-size: 11px;
+ line-height: 1;
+}
+.cal-nav:hover {
+ background: var(--surface-row-hover);
+ color: var(--text-primary);
+}
+.cal-grid {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 2px;
+}
+.cal-dow {
+ font-size: 10px;
+ color: var(--text-muted);
+ text-align: center;
+ padding: 2px 0 4px;
+}
+.cal-day {
+ background: none;
+ border: none;
+ border-radius: 3px;
+ color: var(--text-secondary);
+ cursor: pointer;
+ font-size: var(--font-size-xs);
+ padding: 4px 2px;
+ text-align: center;
+ line-height: 1;
+}
+.cal-day:hover { background: var(--surface-row-hover); color: var(--text-primary); }
+.cal-day--today { color: var(--color-accent); font-weight: 600; }
+.cal-day--selected {
+ background: var(--color-accent);
+ color: #fff;
+ font-weight: 600;
+}
+.cal-day--selected:hover { background: var(--color-accent); }
+.cal-footer {
+ margin-top: 8px;
+ text-align: center;
+}
+.cal-today-btn {
+ background: none;
+ border: 1px solid var(--border-color);
+ border-radius: 3px;
+ color: var(--text-secondary);
+ cursor: pointer;
+ font-size: 10px;
+ padding: 3px 10px;
+}
+.cal-today-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
-/* --- Dashboard Indicator Bar --- */
+/* --- Dashboard bar --- */
.dashboard-bar {
height: var(--dashboard-bar-height);
min-height: var(--dashboard-bar-height);
@@ -244,7 +380,7 @@ body {
overflow-x: auto;
overflow-y: hidden;
}
-
+.dash-cell,
.dash-indicator {
display: inline-flex;
align-items: center;
@@ -259,27 +395,13 @@ body {
font-family: var(--font-family);
transition: background 0.1s, border-color 0.1s;
}
-
-.dash-indicator:hover {
- background: var(--surface-row-hover);
-}
-
+.dash-cell:hover,
+.dash-indicator:hover { background: var(--surface-row-hover); }
+.dash-cell.active,
.dash-indicator--active {
background: var(--surface-row-selected);
border-color: var(--color-accent);
}
-
-.dash-indicator--clear {
- color: var(--text-muted);
- font-size: var(--font-size-xs);
- gap: 3px;
-}
-
-.dash-indicator--clear:hover {
- color: var(--color-danger);
- background: var(--color-danger-dim);
-}
-
.dash-count {
font-weight: 700;
font-size: var(--font-size-sm);
@@ -287,19 +409,18 @@ body {
min-width: 16px;
text-align: center;
}
-
.dash-count--danger { color: var(--color-danger); }
.dash-count--warning { color: var(--color-warning); }
.dash-count--info { color: var(--color-info); }
.dash-count--success { color: var(--color-success); }
.dash-count--muted { color: var(--text-muted); }
-
.dash-label {
color: var(--text-muted);
font-size: var(--font-size-xs);
}
-/* --- Split Pane Container --- */
+/* --- Vertical stack body + splitters --- */
+.stack,
.split-container {
flex: 1;
display: flex;
@@ -307,14 +428,18 @@ body {
overflow: hidden;
min-height: 0;
}
-
-/* --- Pane --- */
.pane {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 80px;
}
+.pane-techs { flex: 0 0 38%; }
+.pane-jobs { flex: 1 1 auto; }
+.pane-timeline { flex: 1 1 220px; min-height: 100px; border-top: 1px solid var(--border-color); }
+.pane-timeline[hidden] { display: none; }
+/* Hide the Jobs↔Timeline splitter when timeline is collapsed. */
+.stack:has(.pane-timeline[hidden]) .row-splitter[data-resize="jobs"] { display: none; }
.pane-header {
height: 28px;
@@ -327,7 +452,6 @@ body {
gap: var(--space-md);
user-select: none;
}
-
.pane-title {
font-size: var(--font-size-sm);
font-weight: 600;
@@ -335,863 +459,244 @@ body {
text-transform: uppercase;
letter-spacing: 0.04em;
}
-
.pane-count {
font-size: var(--font-size-xs);
color: var(--text-muted);
font-family: var(--font-mono);
}
-
+.pane-sel-count {
+ font-size: var(--font-size-xs);
+ color: var(--color-accent);
+ font-weight: 600;
+ font-family: var(--font-family);
+}
.pane-body {
flex: 1;
- overflow: hidden;
+ overflow: auto;
min-height: 0;
}
-
-.pane-selection {
- font-size: var(--font-size-xs);
- color: var(--color-accent);
- font-weight: 500;
+.pane-actions {
margin-left: auto;
+ display: inline-flex;
+ gap: var(--space-sm);
}
-/* --- Day Picker --- */
-.day-picker {
- display: flex;
- align-items: center;
- gap: 2px;
-}
-
-.day-picker-btn {
+.row-splitter,
+.split-divider {
+ height: var(--divider-size);
+ min-height: var(--divider-size);
+ background: var(--surface-divider);
+ cursor: row-resize;
display: flex;
align-items: center;
justify-content: center;
- width: 22px;
- height: 22px;
- background: none;
- border: 1px solid transparent;
- border-radius: var(--border-radius);
- color: var(--text-muted);
- cursor: pointer;
- font-size: 11px;
- font-family: var(--font-family);
+ user-select: none;
+ transition: background 0.15s;
+ flex-shrink: 0;
+ position: relative;
}
-
-.day-picker-btn:hover {
- background: var(--surface-row-hover);
- color: var(--text-primary);
- border-color: var(--border-color);
+/* Visible grip — three short bars centered */
+.row-splitter::after,
+.split-divider::after {
+ content: '';
+ display: block;
+ width: 40px;
+ height: 3px;
+ border-radius: 2px;
+ background: var(--text-muted);
+ opacity: 0.5;
+ transition: opacity 0.15s, background 0.15s;
+}
+.row-splitter:hover,
+.row-splitter.dragging,
+.split-divider:hover,
+.split-divider--active { background: var(--color-accent-dim); }
+.row-splitter:hover::after,
+.row-splitter.dragging::after,
+.split-divider:hover::after,
+.split-divider--active::after {
+ opacity: 1;
+ background: var(--color-accent);
}
-.day-picker-date {
- padding: 2px 10px;
- background: none;
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
+/* --- Grids (tech + job + personnel) --- */
+.grid {
+ width: 100%;
+ min-width: 720px;
+ border-collapse: separate;
+ border-spacing: 0;
+ font-size: var(--font-size-sm);
+ user-select: none;
+ -webkit-user-select: none;
+ table-layout: auto;
+}
+.grid th, .grid td {
+ padding: 5px var(--space-md);
+ text-align: left;
+ border-bottom: 1px solid var(--border-light);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ position: relative;
+}
+.grid th {
color: var(--text-secondary);
- cursor: pointer;
- font-family: var(--font-family);
font-size: var(--font-size-xs);
- font-weight: 500;
- min-width: 80px;
- text-align: center;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ background: var(--surface-panel-alt);
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ border-bottom: 1px solid var(--border-color);
+ user-select: none;
}
-
-.day-picker-date:hover {
- background: var(--surface-row-hover);
- color: var(--text-primary);
+.grid th.col-resizable {
+ resize: horizontal;
+ overflow: auto;
}
-
-.day-picker-date--today {
- color: var(--color-accent);
- border-color: var(--color-accent-dim);
-}
-
-.day-picker-date--locked {
- cursor: default;
- opacity: 0.75;
- pointer-events: none;
-}
-
-/* --- Calendar Picker --- */
-.cal-picker {
- z-index: 9999;
- background: var(--surface-panel);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 10px;
- box-shadow: 0 8px 24px rgba(0,0,0,0.4);
- min-width: 220px;
-}
-.cal-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 8px;
-}
-.cal-month-label {
- font-size: var(--font-size-xs);
- font-weight: 600;
- color: var(--text-primary);
-}
-.cal-nav {
- background: none;
- border: none;
- color: var(--text-secondary);
- cursor: pointer;
- padding: 2px 6px;
- border-radius: 3px;
- font-size: 11px;
- line-height: 1;
-}
-.cal-nav:hover { background: var(--surface-row-hover); color: var(--text-primary); }
-.cal-grid {
- display: grid;
- grid-template-columns: repeat(7, 1fr);
- gap: 2px;
-}
-.cal-dow {
- font-size: 10px;
- color: var(--text-muted);
- text-align: center;
- padding: 2px 0 4px;
-}
-.cal-day {
- background: none;
- border: none;
- border-radius: 3px;
- color: var(--text-secondary);
- cursor: pointer;
- font-size: var(--font-size-xs);
- padding: 4px 2px;
- text-align: center;
- line-height: 1;
-}
-.cal-day:hover { background: var(--surface-row-hover); color: var(--text-primary); }
-.cal-day--today { color: var(--color-accent); font-weight: 600; }
-.cal-day--selected {
- background: var(--color-accent);
- color: #fff;
- font-weight: 600;
-}
-.cal-day--selected:hover { background: var(--color-accent); }
-.cal-footer {
- margin-top: 8px;
- text-align: center;
-}
-.cal-today-btn {
- background: none;
- border: 1px solid var(--border-color);
- border-radius: 3px;
- color: var(--text-secondary);
- cursor: pointer;
- font-size: 10px;
- padding: 3px 10px;
-}
-.cal-today-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
-
-/* --- Row Selection Enhancement --- */
-.ag-theme-fieldopt .ag-row-selected {
- border-left: 2px solid var(--color-accent) !important;
-}
-
-/* --- Tech Timeline --- */
-.timeline-container {
- height: 100%;
- overflow: auto;
- background: var(--surface-panel);
-}
-
-.timeline-empty {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- color: var(--text-muted);
- font-size: var(--font-size-sm);
- font-style: italic;
-}
-
-.timeline-header {
- display: flex;
- align-items: center;
- height: 24px;
- border-bottom: 1px solid var(--border-color);
- position: sticky;
- top: 0;
- z-index: 2;
- background: var(--surface-panel-alt);
-}
-
-.timeline-body {
- position: relative;
-}
-
-.timeline-label-col {
- width: 140px;
- min-width: 140px;
- padding: 0 var(--space-md);
- font-size: var(--font-size-xs);
- font-weight: 600;
- color: var(--text-muted);
- text-transform: uppercase;
- letter-spacing: 0.03em;
- display: flex;
- align-items: center;
-}
-
-.timeline-tech-name {
- color: var(--text-primary);
- font-weight: 500;
- text-transform: none;
- letter-spacing: 0;
- font-size: var(--font-size-sm);
-}
-
-.timeline-hour-header {
- font-size: 10px;
- color: var(--text-muted);
- text-align: left;
- padding-left: 4px;
- border-left: 1px solid var(--border-light);
-}
-
-.timeline-row {
- display: flex;
- align-items: stretch;
- border-bottom: 1px solid var(--border-light);
-}
-
-.timeline-track {
- position: relative;
- flex: 1;
-}
-
-.timeline-gridline {
- position: absolute;
- top: 0;
- width: 1px;
- background: var(--border-light);
-}
-
-.timeline-shift {
- position: absolute;
- background: rgba(74, 158, 255, 0.06);
- border-radius: 2px;
-}
-
-.timeline-job {
- position: absolute;
- border-radius: 2px;
- opacity: 0.85;
- display: flex;
- align-items: center;
- padding: 0 4px;
- overflow: hidden;
- cursor: default;
- transition: opacity 0.1s;
-}
-
-.timeline-job:hover {
- opacity: 1;
- z-index: 1;
-}
-
-.timeline-job-label {
- font-size: 10px;
- font-weight: 600;
- color: var(--text-inverse);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.timeline-job-slot {
- font-size: 9px;
- font-weight: 400;
- color: rgba(255, 255, 255, 0.7);
- white-space: nowrap;
- margin-left: auto;
- padding-left: 4px;
-}
-
-/* --- Draggable Divider --- */
-.split-divider {
- height: var(--divider-size);
- min-height: var(--divider-size);
- background: var(--surface-divider);
- cursor: row-resize;
- display: flex;
- align-items: center;
- justify-content: center;
- user-select: none;
- transition: background 0.15s;
-}
-
-.split-divider:hover,
-.split-divider--active {
- background: var(--color-accent-dim);
-}
-
-.split-divider-grip {
- width: 32px;
- height: 2px;
- background: var(--text-muted);
- border-radius: 1px;
- opacity: 0.5;
-}
-
-.split-divider:hover .split-divider-grip,
-.split-divider--active .split-divider-grip {
- opacity: 0.9;
- background: var(--color-accent);
-}
-
-/* --- AG Grid Theme Overrides --- */
-.ag-theme-fieldopt {
- --ag-background-color: var(--surface-panel);
- --ag-header-background-color: var(--surface-panel-alt);
- --ag-odd-row-background-color: var(--surface-panel);
- --ag-row-hover-color: var(--surface-row-hover);
- --ag-selected-row-background-color: var(--surface-row-selected);
- --ag-header-foreground-color: var(--text-secondary);
- --ag-foreground-color: var(--text-primary);
- --ag-border-color: var(--border-light);
- --ag-secondary-border-color: var(--border-light);
- --ag-row-border-color: transparent;
- --ag-font-family: var(--font-family);
- --ag-font-size: var(--font-size-sm);
- --ag-header-height: 28px;
- --ag-row-height: 26px;
- --ag-cell-horizontal-padding: 8px;
- --ag-header-column-separator-display: none;
- --ag-icon-size: 12px;
- --ag-wrapper-border-radius: 0;
- --ag-borders: none;
-}
-
-.ag-theme-fieldopt .ag-header-cell-label {
- font-size: var(--font-size-xs);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.03em;
-}
-
-.ag-theme-fieldopt .ag-cell {
- line-height: 26px;
- border-right: none;
-}
-
-.ag-theme-fieldopt .ag-row {
- border-bottom: 1px solid var(--border-light);
-}
-
-/* --- Status Badges (used in grid cells) --- */
-.status-badge {
- display: inline-block;
- padding: 1px 6px;
- border-radius: 2px;
- font-size: var(--font-size-xs);
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.02em;
- line-height: 1.6;
-}
-
-.status-badge--pending {
- background: var(--color-warning-dim);
- color: var(--color-warning);
-}
-
-.status-badge--assigned {
- background: var(--color-info-dim);
- color: var(--color-info);
-}
-
-.status-badge--in_progress {
- background: var(--color-purple-dim);
- color: var(--color-purple);
-}
-
-.status-badge--completed {
- background: var(--color-success-dim);
- color: var(--color-success);
-}
-
-.status-badge--cancelled {
- background: var(--color-danger-dim);
- color: var(--color-danger);
-}
-
-.status-badge--on_hold {
- background: rgba(122, 126, 136, 0.15);
- color: var(--color-on-hold);
-}
-
-/* Tech statuses */
-.status-badge--available {
- background: var(--color-success-dim);
- color: var(--color-success);
-}
-
-.status-badge--on_job {
- background: var(--color-purple-dim);
- color: var(--color-purple);
-}
-
-.status-badge--en_route {
- background: var(--color-info-dim);
- color: var(--color-info);
-}
-
-.status-badge--on_break {
- background: var(--color-warning-dim);
- color: var(--color-warning);
-}
-
-.status-badge--off_duty {
- background: rgba(122, 126, 136, 0.15);
- color: var(--color-on-hold);
-}
-
-/* --- Priority indicators --- */
-.priority-cell {
- font-weight: 700;
- font-family: var(--font-mono);
- font-size: var(--font-size-xs);
-}
-
-.priority-cell--1 { color: var(--priority-1); }
-.priority-cell--2 { color: var(--priority-2); }
-.priority-cell--3 { color: var(--priority-3); }
-.priority-cell--4 { color: var(--priority-4); }
-.priority-cell--5 { color: var(--priority-5); }
-
-/* --- Skills chips in grid --- */
-.skills-cell {
- display: flex;
- flex-wrap: nowrap;
- gap: 3px;
- overflow: hidden;
-}
-
-.skill-chip {
- display: inline-block;
- padding: 0 5px;
- background: rgba(74, 158, 255, 0.1);
- color: var(--color-accent);
- border-radius: 2px;
- font-size: 10px;
- font-weight: 500;
- line-height: 18px;
- white-space: nowrap;
-}
-
-/* --- Floating Map Window --- */
-.map-window {
- position: fixed;
- z-index: 1000;
- background: var(--surface-panel);
- border: 1px solid var(--border-color);
- border-radius: 4px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-.map-window-titlebar {
- height: 30px;
- min-height: 30px;
- background: var(--surface-header);
- border-bottom: 1px solid var(--border-color);
- display: flex;
- align-items: center;
- padding: 0 var(--space-md) 0 var(--space-lg);
- cursor: move;
- user-select: none;
-}
-
-.map-window-title {
- font-size: var(--font-size-sm);
- font-weight: 600;
- color: var(--text-secondary);
- flex: 1;
-}
-
-.map-window-close {
- width: 22px;
- height: 22px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: none;
- border: none;
- color: var(--text-muted);
- cursor: pointer;
- border-radius: 2px;
- font-size: 16px;
- line-height: 1;
-}
-
-.map-window-close:hover {
- background: var(--color-danger-dim);
- color: var(--color-danger);
-}
-
-.map-window-body {
- flex: 1;
- min-height: 0;
-}
-
-/* Leaflet dark adjustments */
-.map-window .leaflet-container {
- background: #1a1d23;
-}
-
-/* --- Loading State --- */
-.loading-screen {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- background: var(--surface-app);
- color: var(--text-secondary);
- font-size: var(--font-size-lg);
- gap: var(--space-md);
-}
-
-.loading-spinner {
- width: 18px;
- height: 18px;
- border: 2px solid var(--border-color);
- border-top-color: var(--color-accent);
- border-radius: 50%;
- animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
- to { transform: rotate(360deg); }
-}
-
-/* --- Context Menu --- */
-.ctx-menu {
- position: fixed;
- z-index: 2000;
- min-width: 200px;
- background: var(--surface-header);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
- padding: 4px 0;
- font-size: var(--font-size-sm);
-}
-
-.ctx-menu-header {
- padding: 4px 12px;
- font-size: var(--font-size-xs);
- font-weight: 600;
- color: var(--text-secondary);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.ctx-menu-status {
- padding: 2px 12px 4px;
-}
-
-.ctx-menu-label {
- padding: 4px 12px 2px;
- font-size: 10px;
- font-weight: 600;
- color: var(--text-muted);
- text-transform: uppercase;
- letter-spacing: 0.05em;
-}
-
-.ctx-menu-sep {
- height: 1px;
- margin: 3px 0;
- background: var(--border-light);
-}
-
-.ctx-menu-item {
- display: flex;
- align-items: center;
- width: 100%;
- padding: 5px 12px;
- border: none;
- background: none;
- color: var(--text-primary);
- font-family: var(--font-family);
- font-size: var(--font-size-sm);
- cursor: pointer;
- text-align: left;
- gap: 6px;
- white-space: nowrap;
- position: relative;
-}
-
-.ctx-menu-item:hover {
- background: var(--surface-row-hover);
-}
-
-.ctx-menu-item:disabled {
- opacity: 0.35;
- cursor: not-allowed;
-}
-
-.ctx-menu-item:disabled:hover {
- background: none;
-}
-
-.ctx-menu-item--danger {
- color: var(--color-danger);
-}
-
-.ctx-menu-item--danger:hover {
- background: var(--color-danger-dim);
-}
-
-.ctx-menu-item--parent {
- justify-content: space-between;
+/* Column resize handle */
+.grid th .col-resizer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 6px;
+ height: 100%;
+ cursor: col-resize;
+ z-index: 2;
+ user-select: none;
}
-
-.ctx-arrow {
- color: var(--text-muted);
- font-size: 10px;
- margin-left: auto;
+.grid th .col-resizer:hover {
+ background: var(--color-accent);
+ opacity: 0.4;
}
-
-.ctx-dot {
- display: inline-block;
- width: 7px;
- height: 7px;
- border-radius: 50%;
- flex-shrink: 0;
+.grid tbody tr {
+ height: 26px;
}
-
-.ctx-dot--success { background: var(--color-success); }
-.ctx-dot--warning { background: var(--color-warning); }
-.ctx-dot--muted { background: var(--text-muted); }
-.ctx-dot--purple { background: var(--color-purple); }
-.ctx-dot--info { background: var(--color-info); }
-
-/* --- Context Submenu --- */
-.ctx-submenu {
- position: absolute;
- left: 100%;
- top: -4px;
- min-width: 200px;
- max-height: 320px;
- overflow-y: auto;
- background: var(--surface-header);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
- padding: 4px 0;
+.grid tbody tr:hover { background: var(--surface-row-hover); }
+.grid td.num { font-family: var(--font-mono); text-align: right; }
+.grid td.addr, .grid td.routes {
+ color: var(--text-secondary);
}
-
-.ctx-menu-empty {
- padding: 8px 12px;
+.grid td.empty {
+ text-align: center;
color: var(--text-muted);
- font-size: var(--font-size-xs);
+ padding: 16px;
font-style: italic;
}
-/* --- Drop Target Indicator --- */
-.drop-target-active .ag-row:hover {
- outline: 1px solid var(--color-accent);
- outline-offset: -1px;
- background: var(--surface-row-selected) !important;
-}
-
-/* --- Drag ghost styling --- */
-.drag-ghost {
- position: fixed;
- z-index: 3000;
- padding: 4px 10px;
- background: var(--surface-header);
- border: 1px solid var(--color-accent);
- border-radius: var(--border-radius);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
- font-size: var(--font-size-xs);
- color: var(--color-accent);
- white-space: nowrap;
- pointer-events: none;
- font-weight: 500;
-}
-
-/* --- Scrollbar styling --- */
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-::-webkit-scrollbar-track {
- background: var(--surface-panel);
-}
-
-::-webkit-scrollbar-thumb {
- background: var(--surface-divider);
- border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: var(--text-muted);
-}
-
-/* --- Row Status Tinting --- */
-.ag-theme-fieldopt .ag-row[row-status="pending"] {
- background: rgba(229, 168, 52, 0.04);
-}
-
-.ag-theme-fieldopt .ag-row[row-status="in_progress"] {
- background: rgba(155, 126, 216, 0.04);
-}
-
-.ag-theme-fieldopt .ag-row[row-status="completed"] {
- background: rgba(76, 175, 106, 0.04);
-}
-
-.ag-theme-fieldopt .ag-row[row-status="cancelled"] {
- background: rgba(224, 85, 85, 0.04);
-}
-
-/* --- Map Window Resize Handle --- */
-.map-window-resize {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 16px;
- height: 16px;
- cursor: nwse-resize;
- z-index: 10;
-}
-
-.map-window-resize::after {
- content: '';
- position: absolute;
- right: 3px;
- bottom: 3px;
- width: 8px;
- height: 8px;
- border-right: 2px solid var(--text-muted);
- border-bottom: 2px solid var(--text-muted);
- opacity: 0.5;
-}
-
-.map-window-resize:hover::after {
- opacity: 1;
- border-color: var(--color-accent);
-}
+.grid-row { cursor: pointer; transition: background 0.1s; }
+.grid-row.selected { background: var(--surface-row-selected) !important; }
+.grid-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }
+.grid-row.related { background: rgba(74, 158, 255, 0.06); }
+.grid-row.related td:first-child { box-shadow: inset 2px 0 0 var(--color-info); }
-/* --- Toast Notifications --- */
-.toast-container {
- position: fixed;
- bottom: 16px;
- right: 16px;
- z-index: 3000;
- display: flex;
- flex-direction: column-reverse;
- gap: 6px;
- pointer-events: none;
-}
+/* Row status tinting */
+.grid-row[data-job-status="pending"] { background: rgba(229, 168, 52, 0.04); }
+.grid-row[data-job-status="in_progress"] { background: rgba(155, 126, 216, 0.04); }
+.grid-row[data-job-status="completed"] { background: rgba(76, 175, 106, 0.04); }
+.grid-row[data-job-status="cancelled"] { background: rgba(224, 85, 85, 0.04); }
-.toast {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 14px;
- background: var(--surface-header);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
- font-size: var(--font-size-sm);
- color: var(--text-primary);
- opacity: 0;
- transform: translateY(8px);
- transition: opacity 0.2s, transform 0.2s;
- white-space: nowrap;
+.job-row { cursor: grab; }
+.job-row.dragging { opacity: 0.4; }
+.job-row--overdue {
+ box-shadow: inset 3px 0 0 var(--color-danger);
+ background: rgba(224, 85, 85, 0.08) !important;
}
+.job-row--overdue:hover { background: rgba(224, 85, 85, 0.14) !important; }
-.toast--visible {
- opacity: 1;
- transform: translateY(0);
-}
+.row--overrun-yellow { background: var(--color-warning-dim) !important; }
+.row--overrun-yellow:hover { background: rgba(229, 168, 52, 0.22) !important; }
+.row--overrun-red { background: var(--color-danger-dim) !important; }
+.row--overrun-red:hover { background: rgba(224, 85, 85, 0.22) !important; }
-.toast-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- font-size: 10px;
+/* --- Priority indicators --- */
+.pri, .priority-cell {
font-weight: 700;
- flex-shrink: 0;
-}
-
-.toast--success .toast-icon {
- background: var(--color-success-dim);
- color: var(--color-success);
-}
-
-.toast--error .toast-icon {
- background: var(--color-danger-dim);
- color: var(--color-danger);
-}
-
-.toast--warning .toast-icon {
- background: var(--color-warning-dim);
- color: var(--color-warning);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-xs);
}
+.pri--1, .priority-cell--1 { color: var(--priority-1); }
+.pri--2, .priority-cell--2 { color: var(--priority-2); }
+.pri--3, .priority-cell--3 { color: var(--priority-3); }
+.pri--4, .priority-cell--4 { color: var(--priority-4); }
+.pri--5, .priority-cell--5 { color: var(--priority-5); }
-.toast--info .toast-icon {
- background: var(--color-info-dim);
- color: var(--color-info);
+/* --- Status pills --- */
+.pill, .status-badge {
+ display: inline-block;
+ padding: 1px 6px;
+ border-radius: 2px;
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+ line-height: 1.6;
}
-
-/* --- Status Bar (footer) --- */
-.status-bar {
- height: 22px;
- min-height: 22px;
- background: var(--surface-panel-alt);
- border-top: 1px solid var(--border-color);
- display: flex;
- align-items: center;
- padding: 0 var(--space-lg);
- gap: var(--space-xl);
+.pill--pending, .status-badge--pending { background: var(--color-warning-dim); color: var(--color-warning); }
+.pill--assigned, .status-badge--assigned { background: var(--color-info-dim); color: var(--color-info); }
+.pill--in_progress, .status-badge--in_progress { background: var(--color-purple-dim); color: var(--color-purple); }
+.pill--completed, .status-badge--completed { background: var(--color-success-dim); color: var(--color-success); }
+.pill--cancelled, .status-badge--cancelled { background: var(--color-danger-dim); color: var(--color-danger); }
+.pill--on_hold, .status-badge--on_hold { background: rgba(122, 126, 136, 0.15); color: var(--color-on-hold); }
+.pill--available, .pill--AVAILABLE, .status-badge--available { background: var(--color-success-dim); color: var(--color-success); }
+.pill--on_job, .status-badge--on_job { background: var(--color-purple-dim); color: var(--color-purple); }
+.pill--en_route, .status-badge--en_route { background: var(--color-info-dim); color: var(--color-info); }
+.pill--on_break, .status-badge--on_break { background: var(--color-warning-dim); color: var(--color-warning); }
+.pill--off_duty, .status-badge--off_duty { background: rgba(122, 126, 136, 0.15); color: var(--color-on-hold); }
+.pill { transition: background 0.15s ease, color 0.15s ease; }
+
+/* --- Skill chips --- */
+.skill-chip {
+ display: inline-block;
+ padding: 0 5px;
+ background: rgba(74, 158, 255, 0.1);
+ color: var(--color-accent);
+ border-radius: 2px;
font-size: 10px;
- color: var(--text-muted);
- user-select: none;
+ font-weight: 500;
+ line-height: 18px;
+ white-space: nowrap;
}
-
-.status-bar-item {
+.skills-cell {
display: flex;
- align-items: center;
- gap: var(--space-sm);
+ flex-wrap: nowrap;
+ gap: 3px;
+ overflow: hidden;
}
-.status-bar kbd {
- display: inline-block;
- padding: 0 4px;
+/* --- Timeline (SVG) --- */
+.timeline-wrap {
+ padding: var(--space-md);
+ height: 100%;
+ overflow: auto;
background: var(--surface-panel);
- border: 1px solid var(--border-light);
- border-radius: 2px;
+}
+.timeline {
+ display: block;
font-family: var(--font-mono);
- font-size: 9px;
- line-height: 1.5;
}
-
-/* ================================================================
- v0.0.7 — Floating Windows, Filter, Personnel, Job Search, Detail
- ================================================================ */
-
-/* --- Floating Window Base --- */
+.tl-grid { stroke: var(--border-light); }
+.tl-rowline { stroke: var(--border-light); }
+.tl-hour { fill: var(--text-muted); font-size: 9px; }
+.tl-name { fill: var(--text-primary); font-size: var(--font-size-xs); }
+.tl-now { stroke: var(--color-danger); stroke-width: 1.5; stroke-dasharray: 3 2; }
+.tl-block rect { stroke: rgba(0,0,0,0.5); stroke-width: 0.5; cursor: pointer; }
+.tl-block:hover rect { stroke: var(--color-accent); stroke-width: 1; }
+.tl-block-label { fill: var(--text-inverse); font: 600 9px var(--font-family); pointer-events: none; }
+.tl-block--pending rect { fill: var(--color-warning); }
+.tl-block--assigned rect { fill: var(--color-info); }
+.tl-block--in_progress rect { fill: var(--color-success); }
+.tl-block--completed rect { fill: var(--text-muted); }
+.tl-block--cancelled rect { fill: var(--color-danger); }
+.tl-block--on_hold rect { fill: var(--color-purple); }
+
+/* --- Floating windows --- */
+.float-win,
.fw-window {
position: fixed;
+ z-index: 700;
display: flex;
flex-direction: column;
background: var(--surface-panel);
@@ -1199,8 +704,11 @@ body {
border-radius: var(--border-radius);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
+ min-width: 320px;
+ min-height: 200px;
+ resize: both;
}
-
+.float-win-head,
.fw-titlebar {
height: 30px;
min-height: 30px;
@@ -1209,10 +717,11 @@ body {
display: flex;
align-items: center;
padding: 0 var(--space-md) 0 var(--space-lg);
+ gap: var(--space-md);
cursor: move;
user-select: none;
}
-
+.float-win-title,
.fw-title {
font-size: var(--font-size-sm);
font-weight: 600;
@@ -1222,7 +731,7 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
-
+.float-win-close,
.fw-close {
width: 22px;
height: 22px;
@@ -1237,12 +746,12 @@ body {
font-size: 16px;
line-height: 1;
}
-
+.float-win-close:hover,
.fw-close:hover {
background: var(--color-danger-dim);
color: var(--color-danger);
}
-
+.float-win-body,
.fw-body {
flex: 1;
min-height: 0;
@@ -1250,8 +759,8 @@ body {
flex-direction: column;
overflow: hidden;
}
-
-.fw-resize {
+.fw-resize,
+.float-win-resize {
position: absolute;
right: 0;
bottom: 0;
@@ -1260,8 +769,8 @@ body {
cursor: nwse-resize;
z-index: 10;
}
-
-.fw-resize::after {
+.fw-resize::after,
+.float-win-resize::after {
content: '';
position: absolute;
right: 3px;
@@ -1272,150 +781,73 @@ body {
border-bottom: 2px solid var(--text-muted);
opacity: 0.5;
}
-
-.fw-resize:hover::after {
+.fw-resize:hover::after,
+.float-win-resize:hover::after {
opacity: 1;
- border-color: var(--color-accent);
-}
-
-/* --- Filter Window --- */
-.filter-grid {
- flex: 1;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 1px;
- background: var(--border-light);
- min-height: 0;
- overflow: hidden;
-}
-
-.filter-col {
- display: flex;
- flex-direction: column;
- background: var(--surface-panel);
- min-height: 0;
-}
-
-.filter-col-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 5px 8px;
- background: var(--surface-panel-alt);
- border-bottom: 1px solid var(--border-light);
-}
-
-.filter-col-label {
- font-size: var(--font-size-xs);
- font-weight: 600;
- color: var(--text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.04em;
-}
-
-.filter-col-count {
- font-size: 10px;
- color: var(--text-muted);
- font-family: var(--font-mono);
-}
-
-.filter-col-list {
- flex: 1;
- overflow-y: auto;
- padding: 2px 0;
+ border-color: var(--color-accent);
}
-.filter-item {
+/* --- Filter window inner --- */
+.filter-section { margin-bottom: 16px; padding: 0 14px; }
+.filter-section:first-child { margin-top: 14px; }
+.filter-section-head {
display: flex;
+ justify-content: space-between;
align-items: center;
- width: 100%;
- padding: 3px 8px;
- border: none;
+ padding-bottom: 4px;
+ border-bottom: 1px solid var(--border-light);
+ margin-bottom: 6px;
+}
+.filter-section-head > span:first-child {
+ font-size: var(--font-size-xs);
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+}
+.filter-section-actions { display: inline-flex; gap: 4px; }
+.filter-section-actions button {
background: none;
- color: var(--text-primary);
- font-family: var(--font-family);
+ border: none;
+ color: var(--text-muted);
font-size: var(--font-size-xs);
+ font-family: var(--font-family);
cursor: pointer;
- text-align: left;
- gap: 5px;
+ padding: 2px 6px;
+ border-radius: 2px;
}
-
-.filter-item:hover {
+.filter-section-actions button:hover {
+ color: var(--color-accent);
background: var(--surface-row-hover);
}
-
-.filter-item--selected {
- background: var(--surface-row-selected);
+.filter-checks {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ gap: 4px 12px;
+ max-height: 180px;
+ overflow-y: auto;
+ padding: 4px 0;
}
-
-.filter-check {
- width: 14px;
- height: 14px;
- border: 1px solid var(--border-color);
- border-radius: 2px;
+.filter-checks label {
display: flex;
align-items: center;
- justify-content: center;
- font-size: 9px;
- color: transparent;
- flex-shrink: 0;
- background: var(--surface-input);
-}
-
-.filter-check--on {
- background: var(--color-accent);
- border-color: var(--color-accent);
- color: #fff;
-}
-
-.filter-item-label {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- text-transform: capitalize;
-}
-
-.filter-col-actions {
- display: flex;
- gap: 8px;
- padding: 4px 8px;
- border-top: 1px solid var(--border-light);
-}
-
-.filter-link {
- border: none;
- background: none;
- color: var(--color-accent);
- font-size: 10px;
+ gap: 6px;
+ font-size: var(--font-size-sm);
+ color: var(--text-primary);
cursor: pointer;
- font-family: var(--font-family);
- padding: 0;
-}
-
-.filter-link:hover {
- text-decoration: underline;
}
+.filter-checks input[type="checkbox"] { accent-color: var(--color-accent); }
-.filter-actions {
+/* --- Window toolbar (personnel) --- */
+.win-toolbar {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 6px var(--space-lg);
- border-top: 1px solid var(--border-color);
background: var(--surface-panel-alt);
-}
-
-/* --- Personnel Window --- */
-.personnel-search {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: 6px var(--space-lg);
border-bottom: 1px solid var(--border-color);
- background: var(--surface-panel-alt);
}
-
-.personnel-input {
+.win-input {
flex: 1;
height: 24px;
padding: 0 var(--space-md);
@@ -1427,141 +859,47 @@ body {
font-size: var(--font-size-sm);
outline: none;
}
-
-.personnel-input:focus {
- border-color: var(--color-accent);
-}
-
-.personnel-clear {
- border: none;
- background: none;
- color: var(--text-muted);
- cursor: pointer;
- font-size: 12px;
- padding: 0 2px;
-}
-
-.personnel-count {
- font-size: 10px;
- color: var(--text-muted);
- font-family: var(--font-mono);
- white-space: nowrap;
-}
-
-.personnel-list {
- flex: 1;
- overflow-y: auto;
-}
-
-.personnel-header {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: 3px var(--space-lg);
- border-bottom: 1px solid var(--border-color);
- font-size: 10px;
- font-weight: 600;
- color: var(--text-muted);
- text-transform: uppercase;
- letter-spacing: 0.04em;
- background: var(--surface-panel);
-}
-
-.personnel-status-col {
- width: 80px;
- flex-shrink: 0;
-}
-
-.personnel-row {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- padding: 4px var(--space-lg);
- border-bottom: 1px solid var(--border-light);
- font-size: var(--font-size-xs);
-}
-
-.personnel-row:hover {
- background: var(--surface-row-hover);
-}
-
-.personnel-id {
- font-family: var(--font-mono);
- color: var(--text-muted);
- width: 50px;
- flex-shrink: 0;
-}
-
-.personnel-name {
- flex: 1;
- color: var(--text-primary);
- font-weight: 500;
-}
-
-.personnel-routes {
- color: var(--text-muted);
- font-family: var(--font-mono);
- font-size: 10px;
- max-width: 120px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.personnel-skills {
- color: var(--text-muted);
- font-size: 10px;
- white-space: nowrap;
-}
-
-.personnel-locate {
- border: none;
- background: none;
- color: var(--color-accent);
- cursor: pointer;
- font-size: 14px;
- padding: 0 2px;
- opacity: 0.5;
-}
-
-.personnel-locate:hover {
- opacity: 1;
-}
-
-.personnel-empty {
+.win-input:focus { border-color: var(--color-accent); }
+.win-empty {
padding: 24px;
text-align: center;
color: var(--text-muted);
- font-size: var(--font-size-sm);
+ font-style: italic;
+}
+.win-body {
+ flex: 1;
+ overflow: auto;
+ min-height: 0;
}
-/* --- Job Search Window --- */
-.js-criteria {
- padding: 6px var(--space-lg);
- border-bottom: 1px solid var(--border-color);
+/* --- Search criteria form --- */
+.search-criteria {
+ padding: 8px var(--space-lg);
background: var(--surface-panel-alt);
+ border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 4px;
}
-
-.js-row {
+.cr-row {
display: flex;
- align-items: center;
- gap: 6px;
+ align-items: flex-end;
+ gap: 8px;
}
-
-.js-label {
+.cr-row label {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
- letter-spacing: 0.04em;
- white-space: nowrap;
+ letter-spacing: 0.05em;
+ min-width: 0;
}
-
-.js-input,
-.js-select {
+.cr-row input,
+.cr-row select {
height: 22px;
padding: 0 6px;
background: var(--surface-input);
@@ -1573,84 +911,68 @@ body {
outline: none;
min-width: 0;
}
-
-.js-input { width: 100px; }
-.js-input--sm { width: 55px; }
-.js-input--lg { flex: 1; min-width: 100px; }
-
-.js-select {
- width: 100px;
- cursor: pointer;
-}
-
-.js-input:focus,
-.js-select:focus {
- border-color: var(--color-accent);
-}
-
-.js-placeholder {
- flex: 1;
+.cr-row input:focus,
+.cr-row select:focus { border-color: var(--color-accent); }
+.cr-actions {
display: flex;
align-items: center;
- justify-content: center;
- color: var(--text-muted);
- font-size: var(--font-size-sm);
+ gap: 8px;
+ padding-top: 6px;
}
-.js-result-header {
+/* --- Settings --- */
+.settings-group {
display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 4px var(--space-lg);
- border-bottom: 1px solid var(--border-light);
+ flex-direction: column;
+ gap: 6px;
+ margin-bottom: 14px;
+ padding: 0 14px;
}
-
-.js-result-count {
+.settings-group:first-child { padding-top: 14px; }
+.settings-group label {
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
}
-
-.js-result-hint {
- font-size: 10px;
- color: var(--text-muted);
-}
-
-.js-grid {
- width: 100%;
+.settings-group select,
+.settings-group input[type="text"] {
+ background: var(--surface-input);
+ color: var(--text-primary);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ font-size: var(--font-size-sm);
+ font-family: var(--font-family);
+ padding: 5px 8px;
}
-/* --- Job Detail Panel --- */
+/* --- Job/Tech detail panel --- */
.jd-content {
padding: var(--space-lg);
overflow-y: auto;
flex: 1;
}
-
.jd-header-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
+ padding-bottom: 10px;
+ border-bottom: 1px solid var(--border-light);
}
-
.jd-type {
text-transform: capitalize;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
-
.jd-priority {
font-family: var(--font-mono);
- font-size: var(--font-size-xs);
- color: var(--text-muted);
+ font-size: var(--font-size-sm);
+ font-weight: 600;
margin-left: auto;
}
-
-.jd-section {
- margin-bottom: var(--space-lg);
-}
-
+.jd-section { margin-bottom: var(--space-lg); }
.jd-section-title {
font-size: 10px;
font-weight: 600;
@@ -1661,129 +983,172 @@ body {
padding-bottom: 2px;
border-bottom: 1px solid var(--border-light);
}
-
.jd-field {
display: flex;
align-items: baseline;
gap: var(--space-md);
padding: 2px 0;
}
-
.jd-label {
font-size: var(--font-size-xs);
color: var(--text-muted);
- width: 65px;
+ width: 90px;
flex-shrink: 0;
}
-
.jd-value {
font-size: var(--font-size-sm);
color: var(--text-primary);
}
-
-.jd-mono {
- font-family: var(--font-mono);
- font-size: var(--font-size-xs);
-}
-
-.jd-muted {
- color: var(--text-muted);
- font-size: var(--font-size-xs);
-}
-
+.jd-mono { font-family: var(--font-mono); font-size: var(--font-size-xs); }
+.jd-muted { color: var(--text-muted); font-size: var(--font-size-xs); }
.jd-skills {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 2px 0;
}
-
.jd-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.4;
padding: 2px 0;
}
-
-.jd-text--warning {
- color: var(--color-warning);
-}
-
+.jd-text--warning { color: var(--color-warning); }
.jd-timestamps {
opacity: 0.7;
+ padding-top: 8px;
+ border-top: 1px dashed var(--border-light);
}
-/* --- Small button variant --- */
-.btn--sm {
- height: 22px;
- padding: 0 8px;
- font-size: var(--font-size-xs);
-}
-
-/* --- Override Warning Modal --- */
-.override-overlay {
+/* --- Context menu --- */
+.ctx-menu {
position: fixed;
- inset: 0;
- background: var(--surface-overlay);
- z-index: 2500;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.override-modal {
- background: var(--surface-panel);
+ z-index: 2000;
+ min-width: 200px;
+ background: var(--surface-header);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
- box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
- padding: var(--space-xl);
- max-width: 400px;
- width: 90%;
+ box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+ padding: 4px 0;
+ font-size: var(--font-size-sm);
}
-
-.override-title {
- font-size: var(--font-size-lg);
+.ctx-menu-header {
+ padding: 4px 12px;
+ font-size: var(--font-size-xs);
font-weight: 600;
- color: var(--color-warning);
- margin-bottom: var(--space-md);
-}
-
-.override-body {
- font-size: var(--font-size-sm);
color: var(--text-secondary);
- line-height: 1.5;
- margin-bottom: var(--space-xl);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-
-.override-issue {
+.ctx-menu-status { padding: 2px 12px 4px; }
+.ctx-menu-label {
+ padding: 4px 12px 2px;
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+.ctx-menu-sep {
+ height: 1px;
+ margin: 3px 0;
+ background: var(--border-light);
+}
+.ctx-menu-item {
display: flex;
align-items: center;
- gap: var(--space-md);
- padding: 3px 0;
- font-size: var(--font-size-xs);
+ width: 100%;
+ padding: 5px 12px;
+ border: none;
+ background: none;
+ color: var(--text-primary);
+ font-family: var(--font-family);
+ font-size: var(--font-size-sm);
+ cursor: pointer;
+ text-align: left;
+ gap: 6px;
+ white-space: nowrap;
+ position: relative;
}
-
-.override-x {
- color: var(--color-danger);
- font-weight: 700;
+.ctx-menu-item:hover { background: var(--surface-row-hover); }
+.ctx-menu-item:disabled { opacity: 0.35; cursor: not-allowed; }
+.ctx-menu-item:disabled:hover { background: none; }
+.ctx-menu-item--danger { color: var(--color-danger); }
+.ctx-menu-item--danger:hover { background: var(--color-danger-dim); }
+.ctx-menu-item--parent { justify-content: space-between; }
+.ctx-arrow {
+ color: var(--text-muted);
+ font-size: 10px;
+ margin-left: auto;
}
-
-.override-check {
- color: var(--color-success);
+.ctx-dot {
+ display: inline-block;
+ width: 7px;
+ height: 7px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.ctx-dot--success { background: var(--color-success); }
+.ctx-dot--warning { background: var(--color-warning); }
+.ctx-dot--muted { background: var(--text-muted); }
+.ctx-dot--purple { background: var(--color-purple); }
+.ctx-dot--info { background: var(--color-info); }
+.ctx-dot--danger { background: var(--color-danger); }
+.ctx-submenu {
+ position: absolute;
+ left: 100%;
+ top: -4px;
+ min-width: 200px;
+ max-height: 320px;
+ overflow-y: auto;
+ background: var(--surface-header);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+ padding: 4px 0;
+}
+.ctx-menu-empty {
+ padding: 8px 12px;
+ color: var(--text-muted);
+ font-size: var(--font-size-xs);
+ font-style: italic;
}
-.override-actions {
- display: flex;
- justify-content: flex-end;
- gap: var(--space-md);
+/* --- Drag --- */
+body.dragging-active { user-select: none; cursor: grabbing !important; }
+body.dragging-active * { cursor: grabbing !important; }
+.drag-ghost {
+ position: fixed;
+ z-index: 3000;
+ padding: 4px 10px;
+ background: var(--surface-header);
+ border: 1px solid var(--color-accent);
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+ font-size: var(--font-size-xs);
+ color: var(--color-accent);
+ white-space: nowrap;
+ pointer-events: none;
+ font-weight: 500;
+}
+.drop-target-hover,
+.drop-target.drag-over {
+ outline: 1px solid var(--color-accent) !important;
+ outline-offset: -1px;
+ background: var(--surface-row-selected) !important;
}
-/* --- Simulation Bar --- */
-.sim-bar {
- height: 32px;
- min-height: 32px;
+/* --- Sim bar --- */
+.sim-bar-row {
+ height: var(--sim-bar-height);
+ min-height: var(--sim-bar-height);
background: var(--surface-panel-alt);
border-bottom: 1px solid var(--border-color);
+}
+.sim-row,
+.sim-bar {
+ height: 100%;
display: flex;
align-items: center;
padding: 0 var(--space-lg);
@@ -1793,8 +1158,10 @@ body {
overflow-y: hidden;
scrollbar-width: none;
}
+.sim-row::-webkit-scrollbar,
.sim-bar::-webkit-scrollbar { display: none; }
+.demo-badge,
.sim-demo-badge {
font-size: 9px;
font-weight: 800;
@@ -1808,6 +1175,7 @@ body {
flex-shrink: 0;
}
+.sim-state,
.sim-status {
font-size: 10px;
font-weight: 700;
@@ -1816,18 +1184,25 @@ body {
border-radius: 3px;
font-family: var(--font-mono);
flex-shrink: 0;
+ border: 1px solid transparent;
}
+.sim-state--simulated,
.sim-status--running {
color: var(--color-success);
background: var(--color-success-dim);
+ border-color: var(--color-success);
}
+.sim-state--paused,
.sim-status--paused {
color: var(--color-warning);
background: var(--color-warning-dim);
+ border-color: var(--color-warning);
}
+.sim-state--real,
.sim-status--stopped {
color: var(--text-muted);
background: rgba(122, 126, 136, 0.12);
+ border-color: var(--border-color);
}
.sim-clock {
@@ -1839,14 +1214,12 @@ body {
min-width: 50px;
flex-shrink: 0;
}
-
.sim-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
-
.sim-speed {
display: flex;
align-items: center;
@@ -1854,13 +1227,13 @@ body {
margin-left: auto;
flex-shrink: 0;
}
-
.sim-speed-label {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
-
-.sim-speed-select {
+.sim-speed select,
+.sim-speed-select,
+.status-filter {
background: var(--surface-input);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
@@ -1870,48 +1243,145 @@ body {
padding: 2px 6px;
cursor: pointer;
}
+.sim-speed select:disabled,
.sim-speed-select:disabled {
opacity: 0.4;
cursor: not-allowed;
}
-/* --- Overrun row colors --- */
-.ag-theme-fieldopt .row--overrun-yellow {
- background: var(--color-warning-dim) !important;
+/* --- Modals (override warning + autoroute confirm) --- */
+.modal-backdrop,
+.override-overlay {
+ position: fixed;
+ inset: 0;
+ background: var(--surface-overlay);
+ z-index: 2500;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.modal,
+.override-modal {
+ background: var(--surface-panel);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+ padding: var(--space-xl);
+ max-width: 440px;
+ width: 90%;
+}
+.modal h3 {
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-warning);
+ margin-bottom: var(--space-md);
+}
+.modal p {
+ font-size: var(--font-size-sm);
+ color: var(--text-secondary);
+ line-height: 1.5;
+ margin-bottom: var(--space-md);
+}
+.modal .issues { list-style: none; margin: 12px 0; }
+.modal .issues li {
+ padding: 4px 0;
+ font-family: var(--font-mono);
+ font-size: var(--font-size-sm);
+}
+.modal .issues li.ok { color: var(--color-success); }
+.modal .issues li.fail { color: var(--color-danger); }
+.modal-actions,
+.override-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--space-md);
+ margin-top: 12px;
}
-.ag-theme-fieldopt .row--overrun-yellow:hover {
- background: rgba(229, 168, 52, 0.22) !important;
+.override-title {
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ color: var(--color-warning);
+ margin-bottom: var(--space-md);
}
-.ag-theme-fieldopt .row--overrun-red {
- background: var(--color-danger-dim) !important;
+.override-body {
+ font-size: var(--font-size-sm);
+ color: var(--text-secondary);
+ line-height: 1.5;
+ margin-bottom: var(--space-xl);
}
-.ag-theme-fieldopt .row--overrun-red:hover {
- background: rgba(224, 85, 85, 0.22) !important;
+.override-issue {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ padding: 3px 0;
+ font-size: var(--font-size-xs);
}
+.override-x { color: var(--color-danger); font-weight: 700; }
+.override-check { color: var(--color-success); }
-/* Past-time-frame indicator: job's customer window has closed and the
- job isn't completed/cancelled yet. Distinct from overrun (which is
- in-progress past estimated_duration). */
-.ag-theme-fieldopt .row--overdue {
- box-shadow: inset 3px 0 0 var(--color-danger);
- background: rgba(224, 85, 85, 0.08) !important;
+/* --- Toasts --- */
+#toast-host {
+ position: fixed;
+ bottom: 16px;
+ right: 16px;
+ z-index: 3000;
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 6px;
+ pointer-events: none;
+}
+.toast {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 14px;
+ background: var(--surface-header);
+ border: 1px solid var(--border-color);
+ border-left: 3px solid var(--color-accent);
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+ font-size: var(--font-size-sm);
+ color: var(--text-primary);
+ white-space: nowrap;
+ animation: toast-in 0.2s ease, toast-out 0.3s ease 3s forwards;
+}
+.toast--success { border-left-color: var(--color-success); }
+.toast--warning { border-left-color: var(--color-warning); }
+.toast--error,
+.toast--danger { border-left-color: var(--color-danger); }
+.toast--info { border-left-color: var(--color-info); }
+@keyframes toast-in {
+ from { transform: translateY(8px); opacity: 0; }
}
-.ag-theme-fieldopt .row--overdue:hover {
- background: rgba(224, 85, 85, 0.14) !important;
+@keyframes toast-out {
+ to { transform: translateY(8px); opacity: 0; }
}
-/* Demo playback lock — only blocks assignment-changing UI. Tech/job grids,
- timeline, map, refresh stay interactive so the dispatcher can watch.
- Block list (handled via `disabled` props + handler guards):
- - Filter / Personnel / Job Search / Auto-Route buttons
- - Drag-drop assign + context-menu assign + override-warning confirm
-*/
-.app-shell.demo-locked::after {
+/* --- Map popup (legacy in-page; primary map opens in own window) --- */
+.map-dot span {
+ display: block;
+ border-radius: 50%;
+ border: 1.5px solid #0f1115;
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
+}
+.leaflet-tooltip { font-size: var(--font-size-xs); }
+.map-window .leaflet-container { background: #1a1d23; }
+
+/* --- Density modes --- */
+body[data-density="compact"] .grid th,
+body[data-density="compact"] .grid td { padding: 3px 8px; font-size: var(--font-size-xs); }
+body[data-density="comfortable"] .grid th,
+body[data-density="comfortable"] .grid td { padding: 9px 14px; font-size: var(--font-size-base); }
+
+/* --- Demo playback lock --- */
+body.demo-locked .job-row { cursor: not-allowed; }
+.app-shell.demo-locked::after,
+body.demo-locked::after {
content: 'DEMO PLAYING — controls locked';
position: fixed;
bottom: 12px;
right: 12px;
- background: var(--color-warning, #d99a00);
+ background: var(--color-warning);
color: #000;
padding: 6px 12px;
border-radius: 6px;
@@ -1922,45 +1392,37 @@ body {
pointer-events: none;
}
-/* btn--success + btn--danger variants */
-.btn--success {
- border-color: var(--color-success);
- color: var(--color-success);
-}
-.btn--success:hover {
- background: var(--color-success-dim);
+/* --- Loading --- */
+.loading-screen {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ background: var(--surface-app);
+ color: var(--text-secondary);
+ font-size: var(--font-size-lg);
+ gap: var(--space-md);
}
-.btn--danger {
- border-color: var(--color-danger);
- color: var(--color-danger);
+.loading-spinner {
+ width: 18px;
+ height: 18px;
+ border: 2px solid var(--border-color);
+ border-top-color: var(--color-accent);
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
}
-.btn--danger:hover {
- background: var(--color-danger-dim);
+@keyframes spin {
+ to { transform: rotate(360deg); }
}
/* ================================================================
- Mobile / Touch Responsive
+ Mobile / Touch (≤768px)
================================================================ */
-
@media (max-width: 768px) {
- /* Bigger touch targets on buttons */
- .btn {
- padding: 8px 12px;
- min-height: 40px;
- font-size: var(--font-size-sm);
- }
-
- /* Hide text labels — icons only */
- .btn-label {
- display: none;
- }
-
- /* Hide version badge */
- .header-version {
- display: none;
- }
+ .btn { padding: 8px 12px; min-height: 40px; font-size: var(--font-size-sm); }
+ .btn-label { display: none; }
+ .header-version { display: none; }
- /* Header: reduce padding, allow wrap */
.header-bar {
padding: 4px var(--space-md);
gap: var(--space-sm);
@@ -1968,14 +1430,8 @@ body {
height: auto;
min-height: var(--header-height);
}
+ .header-actions { gap: var(--space-sm); flex-wrap: wrap; margin-left: 0; }
- .header-actions {
- gap: var(--space-sm);
- flex-wrap: wrap;
- margin-left: 0;
- }
-
- /* Dashboard bar — scrollable row on mobile */
.dashboard-bar {
overflow-x: auto;
overflow-y: hidden;
@@ -1986,54 +1442,27 @@ body {
}
.dashboard-bar::-webkit-scrollbar { display: none; }
- /* Larger status badge touch area in grids */
- .status-badge {
- padding: 2px 8px;
- font-size: 10px;
- }
-
- /* Day picker buttons bigger */
- .day-picker-btn {
- width: 32px;
- height: 32px;
- font-size: 14px;
- }
+ .status-badge, .pill { padding: 2px 8px; font-size: 10px; }
- .day-picker-date {
+ .day-btn {
padding: 6px 10px;
font-size: var(--font-size-sm);
min-height: 32px;
}
- /* Pane headers bigger for touch */
- .pane-header {
- height: 36px;
- min-height: 36px;
- padding: 0 var(--space-md);
- }
+ .pane-header { height: 36px; min-height: 36px; padding: 0 var(--space-md); }
- /* Divider — taller touch target */
- .split-divider {
+ .row-splitter, .split-divider {
height: 10px;
min-height: 10px;
}
- /* Calendar picker — wider on phone */
- .cal-picker {
- min-width: 280px;
- }
-
- .cal-day {
- padding: 6px 2px;
- font-size: var(--font-size-sm);
- }
-
- .cal-today-btn {
- padding: 6px 16px;
- font-size: var(--font-size-xs);
- }
+ .cal-picker { min-width: 280px; }
+ .cal-day { padding: 6px 2px; font-size: var(--font-size-sm); }
+ .cal-today-btn { padding: 6px 16px; font-size: var(--font-size-xs); }
- /* All floating windows — full screen on mobile */
+ /* Floating windows + map → full screen */
+ .float-win,
.fw-window,
.map-window {
position: fixed !important;
@@ -2041,16 +1470,19 @@ body {
left: 0 !important;
width: 100dvw !important;
height: 100dvh !important;
+ min-width: 0 !important;
+ min-height: 0 !important;
+ max-width: none !important;
+ max-height: none !important;
border-radius: 0 !important;
+ resize: none !important;
}
- /* Disable resize handle on mobile */
.fw-resize,
- .map-window-resize {
- display: none;
- }
+ .float-win-resize,
+ .map-window-resize { display: none; }
- /* Bigger close buttons for touch */
+ .float-win-close,
.fw-close,
.map-window-close {
width: 36px;
@@ -2058,7 +1490,7 @@ body {
font-size: 20px;
}
- /* Taller titlebars */
+ .float-win-head,
.fw-titlebar,
.map-window-titlebar {
height: 44px;
@@ -2066,15 +1498,16 @@ body {
padding: 0 var(--space-md);
}
- /* Override modal — full width */
- .override-modal {
- width: 95%;
- max-width: none;
- }
+ .modal,
+ .override-modal { width: 95%; max-width: none; }
+
+ /* Search criteria: stack rows on narrow */
+ .cr-row { flex-wrap: wrap; }
+ .cr-row label { flex: 1 1 45%; min-width: 0; }
- /* Autoroute confirm modal */
- .autoroute-confirm {
- width: 95%;
- max-width: none;
+ /* Filter checks: single column */
+ .filter-checks {
+ grid-template-columns: 1fr;
+ max-height: none;
}
}
diff --git a/backend/static/vendor/README.md b/backend/static/vendor/README.md
new file mode 100644
index 0000000..f4198d9
--- /dev/null
+++ b/backend/static/vendor/README.md
@@ -0,0 +1,26 @@
+# Vendored static deps
+
+These files are vendored on purpose — no npm, no CDN at runtime.
+Pin a known-good version + SHA. Verify before committing.
+
+## htmx.min.js
+
+Path: `backend/static/vendor/htmx.min.js`
+
+Download (verify the URL on https://htmx.org before running):
+
+```bash
+curl -fsSL https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js -o backend/static/vendor/htmx.min.js
+```
+
+Verify SHA-256 against https://htmx.org/docs/#installing or the npm registry's reported integrity for that exact version:
+
+```bash
+shasum -a 256 backend/static/vendor/htmx.min.js
+```
+
+Commit the file. Future upgrades = bump version + re-verify SHA. No build step ever touches `node_modules`.
+
+## leaflet.js / leaflet.css
+
+Add when the map view is ported (later slice). Same pattern: download + SHA verify + commit.
diff --git a/backend/static/vendor/htmx.min.js b/backend/static/vendor/htmx.min.js
new file mode 100644
index 0000000..59937d7
--- /dev/null
+++ b/backend/static/vendor/htmx.min.js
@@ -0,0 +1 @@
+var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=cn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",inlineStyleNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0.4"};Q.onLoad=j;Q.process=kt;Q.on=ye;Q.off=be;Q.trigger=he;Q.ajax=Rn;Q.find=u;Q.findAll=x;Q.closest=g;Q.remove=z;Q.addClass=K;Q.removeClass=G;Q.toggleClass=W;Q.takeClass=Z;Q.swap=$e;Q.defineExtension=Fn;Q.removeExtension=Bn;Q.logAll=V;Q.logNone=_;Q.parseInterval=d;Q._=e;const n={addTriggerHandler:St,bodyContains:le,canAccessLocalStorage:B,findThisElement:Se,filterValues:hn,swap:$e,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:o,getExpressionVars:En,getHeaders:fn,getInputValues:cn,getInternalData:ie,getSwapSpecification:gn,getTriggerSpecs:st,getTarget:Ee,makeFragment:P,mergeObjects:ce,makeSettleInfo:xn,oobSwap:He,querySelectorExt:ae,settleImmediately:Kt,shouldCancel:ht,triggerEvent:he,triggerErrorEvent:fe,withExtensions:Ft};const r=["get","post","put","delete","patch"];const H=r.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function c(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function m(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function o(e,t){while(e&&!t(e)){e=c(e)}return e||null}function i(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;o(t,function(e){return!!(r=i(t,ue(e),n))});if(r!=="unset"){return r}}function h(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function T(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function q(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function L(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function A(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function N(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function I(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(N(e)){const t=A(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){O(e)}finally{e.remove()}}})}function P(e){const t=e.replace(/{{ counts.pending }} Unassigned
+
+
+
+{{ counts.assigned }} Assigned
+
+
+{{ counts.in_progress }} In Progress
+
+
+{{ counts.completed }} Completed
+
+
+{{ on_hold }} On Hold
+
+
+
+{{ failed }} Failed
+
+
+{{ counts.tech_available }} Techs Active
+
+
diff --git a/backend/templates/_job_table.html b/backend/templates/_job_table.html
new file mode 100644
index 0000000..08af989
--- /dev/null
+++ b/backend/templates/_job_table.html
@@ -0,0 +1,40 @@
+{{ counts.tech_off }} Off Duty
+
+
diff --git a/backend/templates/_sim_bar.html b/backend/templates/_sim_bar.html
new file mode 100644
index 0000000..e7b2abd
--- /dev/null
+++ b/backend/templates/_sim_bar.html
@@ -0,0 +1,39 @@
+{% if sim.is_demo %}
+
+
+
+
+ Override CanDo check?+Job #{{ job.job_number or job.id }} ({{ job.customer_name }}) → {{ tech.name }} +
+
+
+
+
+ DEMO
+
+ {% if sim.is_paused %}■ PAUSED
+ {% elif sim.mode == 'real' %}■ STOPPED
+ {% else %}● RUNNING{% endif %}
+
+ {% if sim.mode == 'real' %}--:--:--{% else %}{{ sim.hms }}{% endif %}
+
+ {% if sim.mode == 'real' %}
+
+ {% else %}
+ {% if sim.is_paused %}
+
+ {% else %}
+
+ {% endif %}
+
+ {% endif %}
+
+
+{% else %}
+
+{% endif %}
diff --git a/backend/templates/_tech_list.html b/backend/templates/_tech_list.html
new file mode 100644
index 0000000..a32be71
--- /dev/null
+++ b/backend/templates/_tech_list.html
@@ -0,0 +1,33 @@
+
+ Speed
+
+
+
+
+
diff --git a/backend/templates/_win_filter.html b/backend/templates/_win_filter.html
new file mode 100644
index 0000000..5e93cd8
--- /dev/null
+++ b/backend/templates/_win_filter.html
@@ -0,0 +1,71 @@
+
+
diff --git a/backend/templates/_win_job_detail.html b/backend/templates/_win_job_detail.html
new file mode 100644
index 0000000..7dafafa
--- /dev/null
+++ b/backend/templates/_win_job_detail.html
@@ -0,0 +1,59 @@
++ Filters apply live to the Jobs grid. Multi-select with checkboxes. + + +
+
+
+
+ Status
+
+
+
+
+
+
+ {% for s in statuses %}
+
+ {% endfor %}
+
+
+
+
+
+ Job type
+
+
+
+
+
+
+ {% for t in job_types %}
+
+ {% endfor %}
+
+
+
+
+
+ Route
+
+
+
+
+
+
+ {% for r in routes %}
+
+ {% endfor %}
+
+
+
+
+
+ Technician
+
+
+
+
+
+
+
+ {% for t in techs %}
+
+ {% endfor %}
+
+
+
+
+
+
+
diff --git a/backend/templates/_win_personnel.html b/backend/templates/_win_personnel.html
new file mode 100644
index 0000000..94a1df4
--- /dev/null
+++ b/backend/templates/_win_personnel.html
@@ -0,0 +1,30 @@
+
+
+ {{ job.status.value|upper|replace('_', ' ') }}
+ {{ job.job_type.value }}
+ Priority {{ job.priority }}
+
+
+
+
+
+ Customer
+ Name{{ job.customer_name }}
+ {% if job.customer_phone %}Phone{{ job.customer_phone }} {% endif %}
+ {% if job.customer_email %}Email{{ job.customer_email }} {% endif %}
+
+
+
+ Service Location
+ Address{{ job.service_address }}
+ City / Zip{{ (job.service_city or '') }} {{ job.service_zip or '' }}
+ Route{{ job.route_criteria or '—' }}
+ Lat / Lon{{ "%.4f"|format(job.latitude) }}, {{ "%.4f"|format(job.longitude) }}
+
+
+
+ Schedule
+ Date{{ job.scheduled_date.strftime('%Y-%m-%d') if job.scheduled_date else '—' }}
+ Time Slot{% if job.time_slot_start and job.time_slot_end %}{{ job.time_slot_start }}–{{ job.time_slot_end }}{% else %}—{% endif %}
+ Duration{{ job.estimated_duration }} min
+
+
+
+ Assignment
+
+ Tech
+ {{ job.assignment.technician.name if job.assignment else 'Unassigned' }}
+
+ {% if job.assignment %}
+ ETA{{ job.assignment.estimated_arrival.strftime('%H:%M') if job.assignment.estimated_arrival else '—' }}
+ Travel{{ job.assignment.estimated_travel_time or '—' }} min · {{ "%.1f"|format(job.assignment.estimated_distance or 0) }} mi
+ {% if job.assignment.actual_duration_minutes %}Sim duration{{ job.assignment.actual_duration_minutes }} min {% endif %}
+ {% endif %}
+
+
+
+ {% if job.description %}Required Skills
+
+ {% for s in (job.required_skills or []) %}{{ s }}{% else %}None{% endfor %}
+
+ Description {{ job.description }} Special Instructions {{ job.special_instructions }} Notes {{ job.notes }}
+
diff --git a/backend/templates/_win_search.html b/backend/templates/_win_search.html
new file mode 100644
index 0000000..4545ee5
--- /dev/null
+++ b/backend/templates/_win_search.html
@@ -0,0 +1,71 @@
+
+
+ {% if jobs %}
+
diff --git a/backend/templates/_win_settings.html b/backend/templates/_win_settings.html
new file mode 100644
index 0000000..57ad439
--- /dev/null
+++ b/backend/templates/_win_settings.html
@@ -0,0 +1,59 @@
+
No matches.
+ {% else %}
+ Enter criteria above and click Search.
+ {% endif %}
+Searches across all dates (limit 200).
+
diff --git a/backend/templates/_win_tech_detail.html b/backend/templates/_win_tech_detail.html
new file mode 100644
index 0000000..1238b48
--- /dev/null
+++ b/backend/templates/_win_tech_detail.html
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ sim.mode|upper }}{% if sim.is_demo %} · DEMO build{% endif %}
+
+
+
+
+
+
+
+
+
+
+
+ ⌘/Ctrl+A Select all (in hovered pane)
+ Esc Clear selection / close modal
+ D Complete selected jobs
+ S Start selected jobs
+ C Cancel selected jobs
+ H Hold selected jobs
+ U Unassign selected jobs
+ R Refresh all panes
+ / Open Job Search
+ F Open Filter
+ P Open Personnel
+
+
diff --git a/backend/templates/base.html b/backend/templates/base.html
new file mode 100644
index 0000000..be18069
--- /dev/null
+++ b/backend/templates/base.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ {{ tech.status.value|upper|replace('_', ' ') }}
+ {{ tech.employee_id or '#' ~ tech.id }}
+
+
+
+
+
+ Identity
+ Name{{ tech.name }}
+ {% if tech.phone %}Phone{{ tech.phone }} {% endif %}
+ {% if tech.email %}Email{{ tech.email }} {% endif %}
+
+
+
+ Schedule
+ Shift{{ tech.shift_start }}–{{ tech.shift_end }}
+ Max jobs/day{{ tech.max_jobs_per_day }}
+
+
+
+ Home Base
+ Address{{ tech.home_address or '—' }}
+ Lat / Lon{{ "%.4f"|format(tech.home_latitude) }}, {{ "%.4f"|format(tech.home_longitude) }}
+
+
+
+ Skills
+
+ {% for s in (tech.skills or []) %}{{ s }}{% else %}None{% endfor %}
+
+
+
+
+ Assigned Routes
+
+ {% for r in (tech.assigned_routes or []) %}{{ r }}{% else %}None{% endfor %}
+
+
+
+Today's Assignments ({{ assignments|length }})
+ {% if assignments %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/backend/templates/map_window.html b/backend/templates/map_window.html
new file mode 100644
index 0000000..f79dd96
--- /dev/null
+++ b/backend/templates/map_window.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+ FieldOpt
+
+ --:--:--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Technicians
+ {{ techs|length }}
+
+
+
+ {% include "_tech_list.html" %}
+
+
+ Jobs
+ {{ jobs|length }}
+
+
+ {# Hidden status input — driven by dash-bar status cells. Filter window covers type/tech/route client-side. #}
+
+
+ {% include "_job_table.html" %}
+
+
+ Timeline
+
+
+
+
+
+
+
+ Loading…
+
' || api.html_escape(coalesce(t.employee_id, t.id::text)) || ' | '
+ || '' || api.html_escape(t.name) || ' | '
+ || ''
+ || replace(t.status::text, '_', ' ') || ' | '
+ || '' || coalesce(t.shift_start, '') || '–' || coalesce(t.shift_end, '') || ' | '
+ || '' || cnt.assigned || ':' || cnt.completed || ' | '
+ || '' || coalesce(
+ (select string_agg(api.html_escape(value), ', ')
+ from jsonb_array_elements_text(t.assigned_routes)), '') || ' | '
+ || ''
+ || ' '
+ || '' || jc.pending || ' Unassigned '
+ || ''
+ || ' '
+ || '' || jc.assigned || ' Assigned '
+ || ''
+ || ' '
+ || '' || jc.in_progress || ' In Progress '
+ || ''
+ || ' '
+ || '' || jc.completed || ' Completed '
+ || ''
+ || ' '
+ || '' || jc.on_hold || ' On Hold '
+ || ''
+ || ' '
+ || ''
+ || '' || jc.cancelled || ' Failed '
+ || ''
+ || ' '
+ || '' || tc.tech_available || ' Techs Active '
+ || ''
+ || ' '
+ from jc, tc;
+$$;
+
+grant execute on function api.dash_bar() to web_anon;
diff --git a/db/functions/12_job_table.sql b/db/functions/12_job_table.sql
new file mode 100644
index 0000000..43539cd
--- /dev/null
+++ b/db/functions/12_job_table.sql
@@ -0,0 +1,85 @@
+-- Port of backend/templates/_job_table.html — the polled jobs grid.
+-- Mirrors FastAPI /jobs (jobs_fragment + _todays_jobs in api/routes/htmx.py):
+-- today's jobs (sim-clock day) with optional status/job_type/tech_id/route filters,
+-- ordered by time_slot_start (nulls first), id. One assignment per job (job_id UNIQUE).
+-- `overdue` row flag: slot_end passed vs sim now-minutes, unless completed/cancelled.
+-- DB enum columns are UPPERCASE; template emits lowercase .value for classes/attrs and
+-- upper+space for the status pill text. Jinja autoescape is ON -> html_escape mirrors it.
+create or replace function api.job_table(
+ p_status text default '',
+ p_job_type text default '',
+ p_tech_id text default '',
+ p_route text default ''
+)
+returns "text/html" language sql stable as $$
+ with clk as (
+ select api.sim_now() as t
+ ),
+ d as (
+ select
+ date_trunc('day', t) as day_start,
+ extract(hour from (t at time zone 'UTC')) * 60
+ + extract(minute from (t at time zone 'UTC')) as now_min
+ from clk
+ ),
+ rows as (
+ select
+ j.time_slot_start as ord_slot,
+ j.id as ord_id,
+ '' || tc.tech_off || ' Off Duty '
+ || '' || j.id || ' | '
+ || '' || lower(j.job_type::text) || ' | '
+ || ''
+ || replace(j.status::text, '_', ' ') || ' | '
+ || '' || case when a.id is null then '—' else api.html_escape(t.name) end || ' | '
+ || '' || j.priority || ' | '
+ || '' || api.html_escape(j.customer_name) || ' | '
+ || '' || coalesce(api.html_escape(nullif(j.route_criteria, '')), '—') || ' | '
+ || '' || api.html_escape(j.service_address) || ' | '
+ || '' || coalesce(nullif(j.time_slot_start, ''), '—')
+ || case when nullif(j.time_slot_end, '') is not null
+ then '–' || j.time_slot_end else '' end || ' | '
+ || '
'
+ || ' '
+ from nrows, d;
+$$;
+
+grant execute on function api.timeline(text) to web_anon;
diff --git a/db/functions/14_win_personnel.sql b/db/functions/14_win_personnel.sql
new file mode 100644
index 0000000..904e4c4
--- /dev/null
+++ b/db/functions/14_win_personnel.sql
@@ -0,0 +1,46 @@
+-- Port of backend/templates/_win_personnel.html — the Personnel floating window.
+-- Mirrors FastAPI /window/personnel: all technicians ordered by name, read-only.
+-- DB enum columns UPPERCASE; template emits lowercase .value for pill class + data attrs.
+-- Jinja autoescape ON -> html_escape mirrors it. skills/assigned_routes are jsonb arrays
+-- joined with ', ' (array order preserved by jsonb_array_elements_text).
+create or replace function api.personnel_window()
+returns "text/html" language sql stable as $$
+ with rows as (
+ select
+ t.name,
+ '' || api.html_escape(coalesce(nullif(t.employee_id, ''), t.id::text)) || ' | '
+ || '' || api.html_escape(t.name) || ' | '
+ || ''
+ || replace(t.status::text, '_', ' ') || ' | '
+ || '' || coalesce(t.shift_start, '') || '–' || coalesce(t.shift_end, '') || ' | '
+ || ''
+ || ''
+ || '
'
+ || ' '
+ from technicians t
+ cross join lateral (
+ select
+ count(*) as cnt,
+ string_agg(
+ ''
+ || ''
+ || replace(t.status::text, '_', ' ') || ''
+ || ''
+ || api.html_escape(coalesce(nullif(t.employee_id, ''), '#' || t.id)) || ''
+ || ' '
+ -- Identity
+ || 'Identity '
+ || 'Name'
+ || api.html_escape(t.name) || ' '
+ || case when nullif(t.phone, '') is not null then
+ 'Phone'
+ || api.html_escape(t.phone) || ' ' else '' end
+ || case when nullif(t.email, '') is not null then
+ 'Email'
+ || api.html_escape(t.email) || ' ' else '' end
+ || 'Schedule '
+ || 'Shift'
+ || coalesce(t.shift_start, '') || '–' || coalesce(t.shift_end, '') || ' '
+ || 'Max jobs/day'
+ || t.max_jobs_per_day || ' '
+ || 'Home Base '
+ || 'Address'
+ || coalesce(api.html_escape(nullif(t.home_address, '')), '—') || ' '
+ || 'Lat / Lon'
+ || to_char(t.home_latitude, 'FM9990.0000') || ', '
+ || to_char(t.home_longitude, 'FM9990.0000') || ' '
+ || 'Skills '
+ || coalesce((select string_agg('' || api.html_escape(value) || '', '' order by ord)
+ from jsonb_array_elements_text(t.skills) with ordinality x(value, ord)),
+ 'None')
+ || ' Assigned Routes '
+ || coalesce((select string_agg('' || api.html_escape(value) || '', '' order by ord)
+ from jsonb_array_elements_text(t.assigned_routes) with ordinality x(value, ord)),
+ 'None')
+ || ' Today''s Assignments ('
+ || asg.cnt || ') '
+ || case when asg.cnt > 0 then
+ '
' || api.html_escape(coalesce(nullif(j.job_number, ''), j.id::text)) || ' | '
+ || '' || coalesce(to_char(a.estimated_arrival at time zone 'UTC', 'HH24:MI'), '—') || ' | '
+ || ''
+ || replace(j.status::text, '_', ' ') || ' | '
+ || '' || api.html_escape(j.customer_name) || ' | '
+ || 'Tech not found. ');
+$$;
+
+grant execute on function api.tech_detail(integer) to web_anon;
diff --git a/db/functions/16_win_job_detail.sql b/db/functions/16_win_job_detail.sql
new file mode 100644
index 0000000..9c55c40
--- /dev/null
+++ b/db/functions/16_win_job_detail.sql
@@ -0,0 +1,100 @@
+-- Port of backend/templates/_win_job_detail.html — Job Detail floating window.
+-- Mirrors FastAPI /window/job/{job_id}: one job + its (0..1) assignment/tech.
+-- Missing job -> not-found body (FastAPI 404 / PostgREST 200+body; status is proxy-layer).
+-- Conditional sections render only when the field is truthy (non-null AND non-empty/non-zero,
+-- matching Jinja truthiness): phone/email/desc/notes/timestamps, travel-time `or '—'` (0 -> '—').
+-- Python "%.4f"/"%.1f" -> to_char FM990.0000/FM990.0 (the forced 0 before '.' keeps leading zero).
+create or replace function api.job_detail(p_job_id integer)
+returns "text/html" language sql stable as $$
+ select coalesce(
+ (select
+ ''
+ || ' '
+ from jobs j
+ left join assignments a on a.job_id = j.id
+ left join technicians tk on tk.id = a.technician_id
+ where j.id = p_job_id),
+ ''
+ || ''
+ || replace(j.status::text, '_', ' ') || ''
+ || '' || lower(j.job_type::text) || ''
+ || 'Priority ' || j.priority || ''
+ || ' '
+ -- Customer
+ || 'Customer '
+ || 'Name'
+ || api.html_escape(j.customer_name) || ' '
+ || case when nullif(j.customer_phone, '') is not null then
+ 'Phone'
+ || api.html_escape(j.customer_phone) || ' ' else '' end
+ || case when nullif(j.customer_email, '') is not null then
+ 'Email'
+ || api.html_escape(j.customer_email) || ' ' else '' end
+ || 'Service Location '
+ || 'Address'
+ || api.html_escape(j.service_address) || ' '
+ || 'City / Zip'
+ || api.html_escape(coalesce(j.service_city, '')) || ' ' || api.html_escape(coalesce(j.service_zip, '')) || ' '
+ || 'Route'
+ || coalesce(api.html_escape(nullif(j.route_criteria, '')), '—') || ' '
+ || 'Lat / Lon'
+ || to_char(j.latitude, 'FM9990.0000') || ', ' || to_char(j.longitude, 'FM9990.0000') || ' '
+ || 'Schedule '
+ || 'Date'
+ || coalesce(to_char(j.scheduled_date at time zone 'UTC', 'YYYY-MM-DD'), '—') || ' '
+ || 'Time Slot'
+ || case when nullif(j.time_slot_start, '') is not null and nullif(j.time_slot_end, '') is not null
+ then j.time_slot_start || '–' || j.time_slot_end else '—' end || ' '
+ || 'Duration'
+ || j.estimated_duration || ' min '
+ || 'Assignment '
+ || 'Tech'
+ || case when a.id is null then 'Unassigned' else api.html_escape(tk.name) end || ' '
+ || case when a.id is not null then
+ 'ETA'
+ || coalesce(to_char(a.estimated_arrival at time zone 'UTC', 'HH24:MI'), '—') || ' '
+ || 'Travel'
+ || case when coalesce(a.estimated_travel_time, 0) = 0 then '—' else a.estimated_travel_time::text end
+ || ' min · ' || to_char(coalesce(a.estimated_distance, 0), 'FM990.0') || ' mi '
+ || case when coalesce(a.actual_duration_minutes, 0) <> 0 then
+ 'Sim duration'
+ || a.actual_duration_minutes || ' min ' else '' end
+ else '' end
+ || 'Required Skills '
+ || coalesce((select string_agg('' || api.html_escape(value) || '', '' order by ord)
+ from jsonb_array_elements_text(j.required_skills) with ordinality x(value, ord)),
+ 'None')
+ || ' Description '
+ || api.html_escape(j.description) || ' Special Instructions '
+ || '' || api.html_escape(j.special_instructions) || ' Notes '
+ || api.html_escape(j.notes) || ' Job not found. ');
+$$;
+
+grant execute on function api.job_detail(integer) to web_anon;
diff --git a/db/functions/17_win_filter.sql b/db/functions/17_win_filter.sql
new file mode 100644
index 0000000..edacd90
--- /dev/null
+++ b/db/functions/17_win_filter.sql
@@ -0,0 +1,69 @@
+-- Port of backend/templates/_win_filter.html — Filter floating window.
+-- Mirrors FastAPI /window/filter: status/job_type from enum .value lists (enum_range gives
+-- definition order == Python enum iteration order; lower() == .value), routes = distinct
+-- route_criteria over TODAY's jobs sorted asc, techs all by name. All checkboxes checked.
+create or replace function api.filter_window()
+returns "text/html" language sql stable as $$
+ with d as (select date_trunc('day', api.sim_now()) as day_start)
+ select
+ ''
+ || ' ';
+$$;
+
+grant execute on function api.filter_window() to web_anon;
diff --git a/db/functions/18_win_search.sql b/db/functions/18_win_search.sql
new file mode 100644
index 0000000..422a916
--- /dev/null
+++ b/db/functions/18_win_search.sql
@@ -0,0 +1,120 @@
+-- Port of backend/templates/_win_search.html — Search floating window.
+-- Mirrors FastAPI /window/search: a criteria form (echoes the 9 params back into inputs/
+-- selects) + a results table shown only when any criterion is set. Query filters mirror
+-- search_window(): q -> ilike over job_number/customer/address; date_from/to; job_id/tech_id
+-- (non-int -> no filter, matching Python's ValueError pass); status/job_type via enum upper;
+-- route exact. Order scheduled_date desc nulls last, id desc, limit 200.
+create or replace function api.search_window(
+ p_q text default '',
+ p_date_from text default '',
+ p_date_to text default '',
+ p_job_id text default '',
+ p_tech_id text default '',
+ p_customer text default '',
+ p_status text default '',
+ p_job_type text default '',
+ p_route text default ''
+)
+returns "text/html" language sql stable as $$
+ with flags as (
+ select (p_q <> '' or p_date_from <> '' or p_date_to <> '' or p_job_id <> ''
+ or p_tech_id <> '' or p_customer <> '' or p_status <> '' or p_job_type <> ''
+ or p_route <> '') as anyc
+ ),
+ res as (
+ select j.scheduled_date as sd, j.id as jid,
+ '' + || 'Filters apply live to the Jobs grid. Multi-select with checkboxes. ' + -- Status + || 'Status'
+ || ''
+ || ' '
+ || ''
+ || (select string_agg(
+ '',
+ '' order by ord)
+ from unnest(enum_range(null::public.jobstatus)) with ordinality e(s, ord),
+ lateral (select lower(s::text) as v) lv)
+ || ' Job type'
+ || ''
+ || ' '
+ || ''
+ || (select string_agg(
+ '',
+ '' order by ord)
+ from unnest(enum_range(null::public.jobtype)) with ordinality e(t, ord),
+ lateral (select lower(t::text) as v) lv)
+ || ' Route'
+ || ''
+ || ' '
+ || ''
+ || coalesce((select string_agg(
+ '',
+ '' order by rc)
+ from (
+ select distinct j.route_criteria as rc
+ from jobs j, d
+ where j.scheduled_date >= d.day_start
+ and j.scheduled_date < d.day_start + interval '1 day'
+ and nullif(j.route_criteria, '') is not null
+ ) r), '')
+ || ' Technician'
+ || ''
+ || ' '
+ || ''
+ || ''
+ || coalesce((select string_agg(
+ '',
+ '' order by tk.name)
+ from technicians tk), '')
+ || ' '
+ || ''
+ || ''
+ || ' '
+ || '' || j.id || ' | '
+ || '' || coalesce(to_char(j.scheduled_date at time zone 'UTC', 'YYYY-MM-DD'), '—') || ' | '
+ || ''
+ || replace(j.status::text, '_', ' ') || ' | '
+ || '' || lower(j.job_type::text) || ' | '
+ || '' || j.priority || ' | '
+ || '' || api.html_escape(j.customer_name) || ' | '
+ || '' || coalesce(api.html_escape(nullif(j.route_criteria, '')), '—') || ' | '
+ || '' || api.html_escape(j.service_address) || ' | '
+ || ''
+ || case
+ when agg.cnt > 0 then
+ ' '
+ from flags, agg;
+$$;
+
+grant execute on function api.search_window(text, text, text, text, text, text, text, text, text) to web_anon;
diff --git a/db/functions/19_map_markers.sql b/db/functions/19_map_markers.sql
new file mode 100644
index 0000000..015c0cd
--- /dev/null
+++ b/db/functions/19_map_markers.sql
@@ -0,0 +1,76 @@
+-- Port of FastAPI /map/markers — native JSON (no text/html domain). Consumed by the
+-- Leaflet map JS, so the contract is the JSON STRUCTURE/VALUES, not byte layout.
+-- Uses json (not jsonb) to keep float8 shortest-repr for coords.
+-- jobs: today's jobs (ordered like _todays_jobs). techs: active techs, lat/lng =
+-- current_* or home_* (Python `or` -> non-null AND non-zero, else home; home is NOT NULL).
+-- routes: per active tech WITH assignments, path = [tech point] + job points ordered by ETA;
+-- done_count = completed/cancelled legs. job_number is str when set else the int id (mixed type).
+create or replace function api.map_markers()
+returns json language sql stable as $$
+ with d as (select date_trunc('day', api.sim_now()) as day_start),
+ tj as (
+ select j.* from jobs j, d
+ where j.scheduled_date >= d.day_start
+ and j.scheduled_date < d.day_start + interval '1 day'
+ ),
+ active as (select * from technicians where is_active),
+ asg as (
+ select a.technician_id, a.estimated_arrival,
+ j2.latitude as jlat, j2.longitude as jlng, j2.scheduled_date as jsd, j2.status as jstatus
+ from assignments a join jobs j2 on j2.id = a.job_id, d
+ where j2.scheduled_date >= d.day_start
+ and j2.scheduled_date < d.day_start + interval '1 day'
+ )
+ select json_build_object(
+ 'jobs', coalesce((
+ select json_agg(json_build_object(
+ 'id', j.id,
+ 'job_number', case when nullif(j.job_number, '') is not null
+ then to_json(j.job_number) else to_json(j.id) end,
+ 'customer', j.customer_name,
+ 'address', j.service_address,
+ 'status', lower(j.status::text),
+ 'lat', j.latitude,
+ 'lng', j.longitude
+ ) order by j.time_slot_start asc nulls first, j.id)
+ from tj j), '[]'::json),
+ 'techs', coalesce((
+ select json_agg(json_build_object(
+ 'id', t.id,
+ 'name', t.name,
+ 'status', lower(t.status::text),
+ 'lat', case when t.current_latitude is not null and t.current_latitude <> 0
+ then t.current_latitude else t.home_latitude end,
+ 'lng', case when t.current_longitude is not null and t.current_longitude <> 0
+ then t.current_longitude else t.home_longitude end
+ ))
+ from active t
+ where (case when t.current_latitude is not null and t.current_latitude <> 0
+ then t.current_latitude else t.home_latitude end) is not null), '[]'::json),
+ 'routes', coalesce((
+ select json_agg(json_build_object(
+ 'tech_id', t.id,
+ 'tech_name', t.name,
+ 'path', (
+ select json_agg(pt order by ord)
+ from (
+ select 0 as ord, json_build_array(
+ case when t.current_latitude is not null and t.current_latitude <> 0
+ then t.current_latitude else t.home_latitude end,
+ case when t.current_longitude is not null and t.current_longitude <> 0
+ then t.current_longitude else t.home_longitude end) as pt
+ union all
+ select row_number() over (order by coalesce(a.estimated_arrival, a.jsd)) as ord,
+ json_build_array(a.jlat, a.jlng) as pt
+ from asg a where a.technician_id = t.id
+ ) pts
+ ),
+ 'done_count', (select count(*) from asg a
+ where a.technician_id = t.id and lower(a.jstatus::text) in ('completed', 'cancelled'))
+ ))
+ from active t
+ where exists (select 1 from asg a where a.technician_id = t.id)), '[]'::json)
+ );
+$$;
+
+grant execute on function api.map_markers() to web_anon;
diff --git a/db/functions/20_assign.sql b/db/functions/20_assign.sql
new file mode 100644
index 0000000..5596289
--- /dev/null
+++ b/db/functions/20_assign.sql
@@ -0,0 +1,122 @@
+-- Port of POST /assign (backend/api/routes/htmx.py:260) — the assignment write path.
+-- SLICE 1 (this file, current): candoo skill/route checks + override modal (deterministic,
+-- byte-verifiable) AND the mutation (reassign/create + toast + HX-Trigger refreshAll).
+-- Deferred (Phase 4, flagged): demo-lock (needs sim clock mode/paused) — skipped = real mode,
+-- matches non-demo app; actual_duration_minutes = sample_duration (numpy PCG64 lognormal on
+-- Python tuple-hash seed) is NOT reproducible in SQL and is sim-internal -> stored NULL here,
+-- Phase 4 sim owns duration. estimated_arrival uses api.sim_now() (live -> not byte-comparable,
+-- but not in any response). haversine + travel_time are deterministic and match Python.
+-- _candoo_issues: skill missing = required_skills not in tech.skills (order preserved);
+-- route pass = job has NO route_criteria (advisory-permissive, mirrors Slice-6 backend).
+-- Toast msg is raw (FastAPI f-string, NOT autoescaped); modal IS autoescaped (template).
+-- SECURITY DEFINER: the write runs as the function owner (owns the tables); web_anon gets
+-- only EXECUTE, never direct table writes. search_path pinned to avoid definer hijack.
+create or replace function api.assign(p_job_id integer, p_tech_id integer, p_override integer default 0)
+returns "text/html" language plpgsql volatile
+security definer set search_path = api, public as $fn$
+declare
+ j jobs%rowtype;
+ t technicians%rowtype;
+ missing text[];
+ skill_pass boolean;
+ route_pass boolean;
+ skill_label text;
+ route_label text;
+ num text;
+ existing_tid integer;
+ olat double precision;
+ olon double precision;
+ dist double precision;
+ travel integer;
+begin
+ select * into j from jobs where id = p_job_id;
+ if not found then raise exception 'Job or tech not found' using errcode = 'P0002'; end if;
+ select * into t from technicians where id = p_tech_id;
+ if not found then raise exception 'Job or tech not found' using errcode = 'P0002'; end if;
+
+ num := coalesce(nullif(j.job_number, ''), j.id::text);
+
+ -- ── CanDo checks ────────────────────────────────────────────────────────
+ missing := array(
+ select s from jsonb_array_elements_text(coalesce(j.required_skills, '[]'::jsonb)) s
+ where s not in (select jsonb_array_elements_text(coalesce(t.skills, '[]'::jsonb)))
+ );
+ skill_pass := array_length(missing, 1) is null;
+ skill_label := 'Skill' || case when not skill_pass
+ then ' (missing: ' || array_to_string(missing, ', ') || ')' else '' end;
+ route_pass := nullif(j.route_criteria, '') is null;
+ route_label := 'Route' || case when route_pass then '' else ' (' || j.route_criteria || ')' end;
+
+ -- ── Not overriding + issues -> return override modal (no write) ──────────
+ if p_override = 0 and (not skill_pass or not route_pass) then
+ return
+ $html$
No matches. '
+ else 'Enter criteria above and click Search. '
+ end
+ || 'Searches across all dates (limit 200). Override CanDo check?Job #$html$ + || api.html_escape(num) || $html$ ($html$ || api.html_escape(j.customer_name) + || $html$) → $html$ || api.html_escape(t.name) || $html$
' || msg || ' ';
+$$;
+
+-- Port of POST /unassign (htmx.py:313) — unassign_job + toast. Note the toast uses the
+-- job_id param (NOT job_number, unlike assign's success toast). Demo-lock deferred (Phase 4).
+create or replace function api.unassign(p_job_id integer)
+returns "text/html" language plpgsql volatile
+security definer set search_path = api, public as $fn$
+begin
+ delete from assignments where job_id = p_job_id;
+ if not found then
+ return api.toast('Job not assigned', 'warning');
+ end if;
+ update jobs set status = 'PENDING' where id = p_job_id;
+ perform set_config('response.headers', '[{"HX-Trigger": "refreshAll"}]', true);
+ return api.toast('Job #' || p_job_id || ' unassigned', 'success');
+end;
+$fn$;
+
+grant execute on function api.assign(integer, integer, integer) to web_anon;
+grant execute on function api.unassign(integer) to web_anon;
+grant execute on function api.toast(text, text) to web_anon;
diff --git a/db/functions/21_sim.sql b/db/functions/21_sim.sql
new file mode 100644
index 0000000..d471d67
--- /dev/null
+++ b/db/functions/21_sim.sql
@@ -0,0 +1,136 @@
+-- Phase 4 sim UI + controls. Ports _sim_bar.html, _win_settings.html, and the /sim/* POSTs.
+-- NOTE the clock is REDESIGNED (stepped, see 02_clock.sql), so sim_bar's simulated/running
+-- states are NOT byte-comparable to FastAPI's live-interpolated clock — only the deterministic
+-- states (is_demo=false -> empty; real/STOPPED -> --:--:-- ) byte-match. Controls write clock
+-- state only; the reseed + auto_route + dispatch-loop that /sim/start also does are the sim
+-- ENGINE (deferred — needs strategy.py->PL/pgSQL). is_demo gates whether the bar renders at all.
+
+-- ── Render: sim bar ─────────────────────────────────────────────────────────
+create or replace function api.sim_bar()
+returns "text/html" language sql stable as $$
+ select case when not api.is_demo() then ''
+ else (
+ select
+ 'DEMO'
+ || ''
+ || case when s.is_paused then '■ PAUSED'
+ when s.mode = 'real' then '■ STOPPED'
+ else '● RUNNING' end
+ || ''
+ || ''
+ || case when s.mode = 'real' then '--:--:--'
+ else to_char(api.sim_now() at time zone 'UTC', 'HH24:MI:SS') end
+ || ''
+ || case when s.mode = 'real' then
+ ''
+ else
+ case when s.is_paused then
+ ''
+ else
+ ''
+ end
+ || ''
+ end
+ || ' '
+ from api.sim_state s limit 1
+ ) end;
+$$;
+
+-- ── Render: settings window ─────────────────────────────────────────────────
+create or replace function api.settings_window()
+returns "text/html" language sql stable as $$
+ select
+ 'Speed'
+ || ' '
+ || ''
+ || ' ';
+$$;
+
+-- ── Controls (write clock state, return the bar). SECURITY DEFINER for the writes. ──
+-- DEFERRED vs FastAPI: /sim/start also reseeds + auto_routes + starts dispatch loop (the sim
+-- ENGINE). Here start only sets clock state; engine port is separate (strategy.py->PL/pgSQL).
+create or replace function api.sim_start(p_speed double precision default 500)
+returns "text/html" language plpgsql volatile security definer set search_path = api, public as $$
+begin
+ update api.sim_state set mode = 'simulated', is_paused = false, speed = p_speed,
+ virtual_now = date_trunc('day', now()) + interval '8 hours';
+ return api.sim_bar();
+end $$;
+
+create or replace function api.sim_pause()
+returns "text/html" language plpgsql volatile security definer set search_path = api, public as $$
+begin update api.sim_state set is_paused = true; return api.sim_bar(); end $$;
+
+create or replace function api.sim_resume()
+returns "text/html" language plpgsql volatile security definer set search_path = api, public as $$
+begin update api.sim_state set is_paused = false; return api.sim_bar(); end $$;
+
+create or replace function api.sim_stop()
+returns "text/html" language plpgsql volatile security definer set search_path = api, public as $$
+begin
+ update api.sim_state set mode = 'real', is_paused = false, speed = 1.0, virtual_now = null;
+ return api.sim_bar();
+end $$;
+
+create or replace function api.sim_speed(p_speed double precision)
+returns "text/html" language plpgsql volatile security definer set search_path = api, public as $$
+begin
+ if (select mode from api.sim_state limit 1) <> 'simulated' then
+ raise exception 'Simulation not running' using errcode = 'P0001';
+ end if;
+ update api.sim_state set speed = p_speed;
+ return api.sim_bar();
+end $$;
+
+grant execute on function api.sim_bar() to web_anon;
+grant execute on function api.settings_window() to web_anon;
+grant execute on function api.sim_start(double precision) to web_anon;
+grant execute on function api.sim_pause() to web_anon;
+grant execute on function api.sim_resume() to web_anon;
+grant execute on function api.sim_stop() to web_anon;
+grant execute on function api.sim_speed(double precision) to web_anon;
diff --git a/db/postgrest/00_bootstrap.sql b/db/postgrest/00_bootstrap.sql
new file mode 100644
index 0000000..4cd9a50
--- /dev/null
+++ b/db/postgrest/00_bootstrap.sql
@@ -0,0 +1,20 @@
+-- PostgREST bootstrap: exposed schema + anonymous web role.
+-- Additive only — does not touch the app's existing tables.
+-- The `api` schema holds RPC functions (HTML fragments + JSON) that PostgREST exposes.
+-- Functions read the app-owned `public` tables; nothing here writes.
+
+create schema if not exists api;
+
+-- Anonymous role PostgREST authenticates as for unauthenticated requests.
+do $$
+begin
+ if not exists (select from pg_roles where rolname = 'web_anon') then
+ create role web_anon nologin;
+ end if;
+end
+$$;
+
+grant usage on schema api to web_anon;
+grant usage on schema public to web_anon;
+grant select on all tables in schema public to web_anon;
+alter default privileges in schema public grant select on tables to web_anon;
diff --git a/db/schema/schema.sql b/db/schema/schema.sql
new file mode 100644
index 0000000..546fa6c
--- /dev/null
+++ b/db/schema/schema.sql
@@ -0,0 +1,335 @@
+--
+-- PostgreSQL database dump
+--
+
+\restrict KEZmDKpq7KbQOfa7xkmovd66aKbLPXaAkpxd4Vnr5JTbleGGJSYrdO4YxHF1SyQ
+
+-- Dumped from database version 15.18
+-- Dumped by pg_dump version 15.18
+
+SET statement_timeout = 0;
+SET lock_timeout = 0;
+SET idle_in_transaction_session_timeout = 0;
+SET client_encoding = 'UTF8';
+SET standard_conforming_strings = on;
+SELECT pg_catalog.set_config('search_path', '', false);
+SET check_function_bodies = false;
+SET xmloption = content;
+SET client_min_messages = warning;
+SET row_security = off;
+
+--
+-- Name: jobstatus; Type: TYPE; Schema: public; Owner: -
+--
+
+CREATE TYPE public.jobstatus AS ENUM (
+ 'PENDING',
+ 'ASSIGNED',
+ 'IN_PROGRESS',
+ 'COMPLETED',
+ 'CANCELLED',
+ 'ON_HOLD'
+);
+
+
+--
+-- Name: jobtype; Type: TYPE; Schema: public; Owner: -
+--
+
+CREATE TYPE public.jobtype AS ENUM (
+ 'INSTALL',
+ 'REPAIR',
+ 'MAINTENANCE',
+ 'INSPECTION',
+ 'DISCONNECT',
+ 'SERVICE_CHANGE'
+);
+
+
+--
+-- Name: technicianstatus; Type: TYPE; Schema: public; Owner: -
+--
+
+CREATE TYPE public.technicianstatus AS ENUM (
+ 'AVAILABLE',
+ 'ON_JOB',
+ 'EN_ROUTE',
+ 'ON_BREAK',
+ 'OFF_DUTY'
+);
+
+
+SET default_tablespace = '';
+
+SET default_table_access_method = heap;
+
+--
+-- Name: assignments; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.assignments (
+ id integer NOT NULL,
+ job_id integer NOT NULL,
+ technician_id integer NOT NULL,
+ assigned_at timestamp with time zone NOT NULL,
+ sequence integer,
+ estimated_travel_time integer,
+ estimated_distance double precision,
+ estimated_arrival timestamp with time zone,
+ actual_travel_time integer,
+ actual_arrival timestamp with time zone,
+ actual_completion timestamp with time zone,
+ actual_duration_minutes integer,
+ created_at timestamp with time zone NOT NULL,
+ updated_at timestamp with time zone NOT NULL
+);
+
+
+--
+-- Name: assignments_id_seq; Type: SEQUENCE; Schema: public; Owner: -
+--
+
+CREATE SEQUENCE public.assignments_id_seq
+ AS integer
+ START WITH 1
+ INCREMENT BY 1
+ NO MINVALUE
+ NO MAXVALUE
+ CACHE 1;
+
+
+--
+-- Name: assignments_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: -
+--
+
+ALTER SEQUENCE public.assignments_id_seq OWNED BY public.assignments.id;
+
+
+--
+-- Name: jobs; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.jobs (
+ id integer NOT NULL,
+ job_number character varying(50),
+ job_type public.jobtype NOT NULL,
+ status public.jobstatus NOT NULL,
+ customer_name character varying(100) NOT NULL,
+ customer_phone character varying(20),
+ customer_email character varying(100),
+ service_address character varying(255) NOT NULL,
+ service_city character varying(100),
+ service_zip character varying(10),
+ latitude double precision NOT NULL,
+ longitude double precision NOT NULL,
+ required_skills jsonb NOT NULL,
+ route_criteria character varying(50),
+ priority integer NOT NULL,
+ scheduled_date timestamp with time zone,
+ time_slot_start character varying(5),
+ time_slot_end character varying(5),
+ estimated_duration integer NOT NULL,
+ description text,
+ notes text,
+ special_instructions text,
+ created_at timestamp with time zone NOT NULL,
+ updated_at timestamp with time zone NOT NULL,
+ started_at timestamp with time zone,
+ completed_at timestamp with time zone
+);
+
+
+--
+-- Name: jobs_id_seq; Type: SEQUENCE; Schema: public; Owner: -
+--
+
+CREATE SEQUENCE public.jobs_id_seq
+ AS integer
+ START WITH 1
+ INCREMENT BY 1
+ NO MINVALUE
+ NO MAXVALUE
+ CACHE 1;
+
+
+--
+-- Name: jobs_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: -
+--
+
+ALTER SEQUENCE public.jobs_id_seq OWNED BY public.jobs.id;
+
+
+--
+-- Name: technicians; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.technicians (
+ id integer NOT NULL,
+ name character varying(100) NOT NULL,
+ employee_id character varying(50),
+ phone character varying(20),
+ email character varying(100),
+ status public.technicianstatus NOT NULL,
+ is_active boolean NOT NULL,
+ current_latitude double precision,
+ current_longitude double precision,
+ last_location_update timestamp with time zone,
+ home_latitude double precision NOT NULL,
+ home_longitude double precision NOT NULL,
+ home_address character varying(255),
+ skills jsonb NOT NULL,
+ assigned_routes jsonb NOT NULL,
+ speed_factor double precision NOT NULL,
+ skill_bonuses jsonb NOT NULL,
+ shift_start character varying(5),
+ shift_end character varying(5),
+ max_jobs_per_day integer NOT NULL,
+ created_at timestamp with time zone NOT NULL,
+ updated_at timestamp with time zone NOT NULL
+);
+
+
+--
+-- Name: technicians_id_seq; Type: SEQUENCE; Schema: public; Owner: -
+--
+
+CREATE SEQUENCE public.technicians_id_seq
+ AS integer
+ START WITH 1
+ INCREMENT BY 1
+ NO MINVALUE
+ NO MAXVALUE
+ CACHE 1;
+
+
+--
+-- Name: technicians_id_seq; Type: SEQUENCE OWNED BY; Schema: public; Owner: -
+--
+
+ALTER SEQUENCE public.technicians_id_seq OWNED BY public.technicians.id;
+
+
+--
+-- Name: assignments id; Type: DEFAULT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.assignments ALTER COLUMN id SET DEFAULT nextval('public.assignments_id_seq'::regclass);
+
+
+--
+-- Name: jobs id; Type: DEFAULT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.jobs ALTER COLUMN id SET DEFAULT nextval('public.jobs_id_seq'::regclass);
+
+
+--
+-- Name: technicians id; Type: DEFAULT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.technicians ALTER COLUMN id SET DEFAULT nextval('public.technicians_id_seq'::regclass);
+
+
+--
+-- Name: assignments assignments_job_id_key; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.assignments
+ ADD CONSTRAINT assignments_job_id_key UNIQUE (job_id);
+
+
+--
+-- Name: assignments assignments_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.assignments
+ ADD CONSTRAINT assignments_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: jobs jobs_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.jobs
+ ADD CONSTRAINT jobs_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: technicians technicians_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.technicians
+ ADD CONSTRAINT technicians_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: ix_assignments_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX ix_assignments_id ON public.assignments USING btree (id);
+
+
+--
+-- Name: ix_jobs_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX ix_jobs_id ON public.jobs USING btree (id);
+
+
+--
+-- Name: ix_jobs_job_number; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE UNIQUE INDEX ix_jobs_job_number ON public.jobs USING btree (job_number);
+
+
+--
+-- Name: ix_jobs_route_criteria; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX ix_jobs_route_criteria ON public.jobs USING btree (route_criteria);
+
+
+--
+-- Name: ix_jobs_status; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX ix_jobs_status ON public.jobs USING btree (status);
+
+
+--
+-- Name: ix_technicians_employee_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE UNIQUE INDEX ix_technicians_employee_id ON public.technicians USING btree (employee_id);
+
+
+--
+-- Name: ix_technicians_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX ix_technicians_id ON public.technicians USING btree (id);
+
+
+--
+-- Name: assignments assignments_job_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.assignments
+ ADD CONSTRAINT assignments_job_id_fkey FOREIGN KEY (job_id) REFERENCES public.jobs(id);
+
+
+--
+-- Name: assignments assignments_technician_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.assignments
+ ADD CONSTRAINT assignments_technician_id_fkey FOREIGN KEY (technician_id) REFERENCES public.technicians(id);
+
+
+--
+-- PostgreSQL database dump complete
+--
+
+\unrestrict KEZmDKpq7KbQOfa7xkmovd66aKbLPXaAkpxd4Vnr5JTbleGGJSYrdO4YxHF1SyQ
+
diff --git a/deploy/nginx.conf b/deploy/nginx.conf
deleted file mode 100644
index a1fc42a..0000000
--- a/deploy/nginx.conf
+++ /dev/null
@@ -1,41 +0,0 @@
-server {
- listen 80;
- server_name _;
- return 301 https://$host$request_uri;
-}
-
-server {
- listen 443 ssl http2;
- server_name _;
-
- ssl_certificate /etc/letsencrypt/live/demo.fieldopt.dev/fullchain.pem;
- ssl_certificate_key /etc/letsencrypt/live/demo.fieldopt.dev/privkey.pem;
-
- ssl_protocols TLSv1.2 TLSv1.3;
- ssl_ciphers HIGH:!aNULL:!MD5;
-
- root /usr/share/nginx/html;
- index index.html;
-
- location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
- expires 30d;
- add_header Cache-Control "public, immutable";
- }
-
- location /api/ {
- proxy_pass http://backend:8000;
- proxy_http_version 1.1;
- proxy_set_header Host $host;
- proxy_set_header X-Real-IP $remote_addr;
- proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
- proxy_set_header X-Forwarded-Proto $scheme;
- }
-
- location / {
- try_files $uri /index.html;
- }
-
- location ~ /\. {
- deny all;
- }
-}
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
deleted file mode 100644
index 4fa125d..0000000
--- a/frontend/eslint.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
- globalIgnores(['dist']),
- {
- files: ['**/*.{js,jsx}'],
- extends: [
- js.configs.recommended,
- reactHooks.configs.flat.recommended,
- reactRefresh.configs.vite,
- ],
- languageOptions: {
- ecmaVersion: 2020,
- globals: globals.browser,
- parserOptions: {
- ecmaVersion: 'latest',
- ecmaFeatures: { jsx: true },
- sourceType: 'module',
- },
- },
- rules: {
- 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
- },
- },
-])
diff --git a/frontend/index.html b/frontend/index.html
deleted file mode 100644
index 7ccbabc..0000000
--- a/frontend/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
- '
+ || ' '
+ || ''
+ || ' '
+ || ''
+ || ''
+ || ' '
+ || '' || upper((select mode from api.sim_state limit 1))
+ || case when api.is_demo() then ' · DEMO build' else '' end || ' '
+ || ''
+ || ' '
+ || ''
+ || ' '
+ || ' ⌘/Ctrl+A Select all (in hovered pane) '
+ || 'Esc Clear selection / close modal '
+ || 'D Complete selected jobs '
+ || 'S Start selected jobs '
+ || 'C Cancel selected jobs '
+ || 'H Hold selected jobs '
+ || 'U Unassign selected jobs '
+ || 'R Refresh all panes '
+ || '/ Open Job Search '
+ || 'F Open Filter '
+ || 'P Open Personnel '
+ || '
-
- );
- }
-
- const pendingJobs = jobs.filter(j => j.status === 'pending');
- const activeTechs = technicians.filter(t => t.status === 'available' || t.status === 'on_job').length;
-
- return (
-
-
-
- Loading FieldOpt...
-
- {/* Modern Header with Gradient */}
-
- );
-}
diff --git a/frontend/src.bak/components/JobList.jsx b/frontend/src.bak/components/JobList.jsx
deleted file mode 100644
index 6cdfd0f..0000000
--- a/frontend/src.bak/components/JobList.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Clock, MapPin, AlertCircle } from 'lucide-react';
-
-const statusColors = {
- pending: 'bg-yellow-100 text-yellow-800',
- assigned: 'bg-blue-100 text-blue-800',
- in_progress: 'bg-purple-100 text-purple-800',
- completed: 'bg-green-100 text-green-800',
- cancelled: 'bg-red-100 text-red-800',
- on_hold: 'bg-gray-100 text-gray-800',
-};
-
-const priorityColors = {
- 1: 'text-red-600 font-bold',
- 2: 'text-orange-600 font-semibold',
- 3: 'text-yellow-600',
- 4: 'text-blue-600',
- 5: 'text-gray-600',
-};
-
-export default function JobList({ jobs, onJobClick }) {
- return (
-
-
-
-
-
-
-
-
-
-
-
- FieldOpt-Intelligent Field Service Dispatch -
-
-
-
-
-
-
- )}
-
- {/* Main Content Area */}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {activeTechs}
- of {technicians.length}
- Active Technicians
-
-
-
-
-
-
-
-
-
- {summary.pending}
- unassigned
- Pending Jobs
-
-
-
-
-
-
-
-
-
- {summary.in_progress}
- active now
- In Progress
-
-
-
-
-
-
-
-
- {summary.completed}
- today
- Completed
-
- {/* Map Section */}
-
-
- {technicians.length === 0 && jobs.length === 0 ? (
-
-
- {/* Sidebar */}
-
-
- ) : (
-
- )}
-
-
- No Data Yet-- Run the seed script to populate technicians and jobs: - -
- python3 quick_seed.py
-
-
-
-
-
- - Jobs ({jobs.length}) -- {jobs.length > 0 && ( -- {pendingJobs.length} pending • {summary?.in_progress || 0} active - - )} -
-
-
- {jobs.length === 0 ? (
-
- );
-}
diff --git a/frontend/src.bak/components/Map.jsx b/frontend/src.bak/components/Map.jsx
deleted file mode 100644
index e0746f1..0000000
--- a/frontend/src.bak/components/Map.jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
-import { Icon } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import { useEffect } from 'react';
-
-// Fix for default marker icons in React-Leaflet
-import icon from 'leaflet/dist/images/marker-icon.png';
-import iconShadow from 'leaflet/dist/images/marker-shadow.png';
-let DefaultIcon = Icon.Default;
-DefaultIcon.prototype.options.iconUrl = icon;
-DefaultIcon.prototype.options.shadowUrl = iconShadow;
-
-const techIcon = new Icon({
- iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
- shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
- iconSize: [25, 41],
- iconAnchor: [12, 41],
- popupAnchor: [1, -34],
- shadowSize: [41, 41]
-});
-
-const jobIcon = new Icon({
- iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
- shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
- iconSize: [25, 41],
- iconAnchor: [12, 41],
- popupAnchor: [1, -34],
- shadowSize: [41, 41]
-});
-
-function AutoZoom({ technicians, jobs }) {
- const map = useMap();
-
- useEffect(() => {
- if (technicians.length > 0 || jobs.length > 0) {
- const bounds = [];
-
- technicians.forEach(tech => {
- if (tech.current_latitude && tech.current_longitude) {
- bounds.push([tech.current_latitude, tech.current_longitude]);
- }
- });
-
- jobs.forEach(job => {
- if (job.latitude && job.longitude) {
- bounds.push([job.latitude, job.longitude]);
- }
- });
-
- if (bounds.length > 0) {
- map.fitBounds(bounds, { padding: [50, 50] });
- }
- }
- }, [technicians, jobs, map]);
-
- return null;
-}
-
-export default function Map({ technicians = [], jobs = [] }) {
- const center = [40.7128, -74.0060]; // NYC default
-
- return (
-
-
- ) : (
- jobs.map(job => (
- No jobs found - onJobClick && onJobClick(job)}
- className="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer border-l-4"
- style={{ borderLeftColor: job.priority === 1 ? '#dc2626' : '#3b82f6' }}
- >
-
- ))
- )}
-
-
-
- {job.customer_name}- - {job.status.replace('_', ' ').toUpperCase()} - -
-
-
- {job.description && (
-
-
-
- {job.scheduled_date && (
-
-
- )}
-
-
-
- - {job.description} - - )} - - {job.required_skills.length > 0 && ( -
- {job.required_skills.map(skill => (
-
- {skill}
-
- ))}
-
- )}
-
-
- {tech.name}-Status: {tech.status} -Skills: {tech.skills.join(', ')} -
-
- {job.customer_name}-{job.service_address} -Type: {job.job_type} -Status: {job.status} -Priority: {job.priority} -
- ,
- document.body
- );
-}
diff --git a/frontend/src/components/ContextMenu.jsx b/frontend/src/components/ContextMenu.jsx
deleted file mode 100644
index 7e8db5e..0000000
--- a/frontend/src/components/ContextMenu.jsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-
-export default function ContextMenu({
- x, y, type, data, technicians,
- selectedJobIds = [],
- selectedTechIds = [],
- onJobAction, onTechAction, onAssignToTech,
-}) {
- const [submenu, setSubmenu] = useState(null);
- const menuRef = useRef(null);
-
- // Reposition if menu would overflow viewport
- useEffect(() => {
- if (!menuRef.current) return;
- const rect = menuRef.current.getBoundingClientRect();
- const el = menuRef.current;
- if (rect.right > window.innerWidth) el.style.left = `${window.innerWidth - rect.width - 4}px`;
- if (rect.bottom > window.innerHeight) el.style.top = `${window.innerHeight - rect.height - 4}px`;
- }, [x, y]);
-
- /* ── Tech context menu ────────────────────────────────── */
- if (type === 'tech') {
- const hasMulti = selectedTechIds.length > 1 && selectedTechIds.includes(data.id);
- return (
-
-
- {MONTHS[cursor.getMonth()]} {cursor.getFullYear()}
-
-
-
- {DAYS.map((d) => {d})}
- {cells.map((d, i) => {
- if (!d) return ;
- const isSelected = sameDay(d, value);
- const isToday = sameDay(d, today);
- return (
-
- );
- })}
-
-
-
-
- e.stopPropagation()}>
- {hasMulti ? (
-
- );
- }
-
- /* ── Job context menu ─────────────────────────────────── */
- if (type === 'job') {
- const isAssigned = data.status === 'assigned';
- const isInProgress = data.status === 'in_progress';
- const isCompleted = data.status === 'completed';
- const isCancelled = data.status === 'cancelled';
- const hasMultiSelect = selectedJobIds.length > 1 && selectedJobIds.includes(data.id);
- const multiAssignedIds = hasMultiSelect ? selectedJobIds : [];
-
- return (
- {selectedTechIds.length} techs selected
- ) : (
- Tech #{data.id} — {data.name}
- )}
-
- {hasMulti ? 'Set All Status' : 'Set Status'}
-
-
-
- e.stopPropagation()}>
- {/* Header */}
- {hasMultiSelect ? (
-
- );
- }
-
- return null;
-}
diff --git a/frontend/src/components/Dashboard.jsx b/frontend/src/components/Dashboard.jsx
deleted file mode 100644
index a587b2a..0000000
--- a/frontend/src/components/Dashboard.jsx
+++ /dev/null
@@ -1,813 +0,0 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { api } from '../api/client';
-import TechGrid from './TechGrid';
-import JobGrid from './JobGrid';
-import MapWindow from './MapWindow';
-import ContextMenu from './ContextMenu';
-import Toast from './Toast';
-import TechTimeline from './TechTimeline';
-import FilterWindow from './FilterWindow';
-import PersonnelWindow from './PersonnelWindow';
-import JobSearchWindow from './JobSearchWindow';
-import JobDetailPanel from './JobDetailPanel';
-import CalendarPicker from './CalendarPicker';
-import SimBar from './SimBar';
-import { useSimEvents } from '../hooks/useSimEvents';
-
-/* ── Helpers ─────────────────────────────────────────────── */
-function fmtDate(d) {
- return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-}
-function fmtUTCDate(d) {
- return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
-}
-function fmtDateDisplay(d) {
- const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
- const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
- return `${days[d.getDay()]} ${months[d.getMonth()]} ${d.getDate()}`;
-}
-function sameDay(a, b) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
-
-export default function Dashboard() {
- /* ── Data ─────────────────────────────────────────────── */
- const [techs, setTechs] = useState([]);
- const [jobs, setJobs] = useState([]);
- const [summary, setSummary] = useState(null);
- const [loading, setLoading] = useState(true);
-
- /* ── Day ──────────────────────────────────────────────── */
- const [viewDate, setViewDate] = useState(() => new Date());
- const [calOpen, setCalOpen] = useState(false);
- const calAnchorRef = useRef(null);
- const isToday = sameDay(viewDate, new Date());
-
- /* ── UI ───────────────────────────────────────────────── */
- const [splitRatio, setSplitRatio] = useState(0.4);
- const [dividerDrag, setDividerDrag] = useState(false);
- const [mapOpen, setMapOpen] = useState(false);
- const [timelineOpen, setTimelineOpen] = useState(false);
- const [autoRouting, setAutoRouting] = useState(false);
- const [refreshing, setRefreshing] = useState(false);
- const splitRef = useRef(null);
- const [timelineHeight, setTimelineHeight] = useState(180);
- const [tlDrag, setTlDrag] = useState(false);
-
- /* ── v0.0.8 Windows ───────────────────────────────────── */
- const [filterOpen, setFilterOpen] = useState(false);
- const [personnelOpen, setPersonnelOpen] = useState(false);
- const [jobSearchOpen, setJobSearchOpen] = useState(false);
- const [detailJob, setDetailJob] = useState(null);
-
- /* ── v0.0.8 Display Filter state ─────────────────────── */
- const [displayFilter, setDisplayFilter] = useState(null);
- // displayFilter shape: { timeSlots: [], jobTypes: [], routeCriteria: [], techIds: [] } or null
-
- /* ── v0.0.8 Override Warning ──────────────────────────── */
- const [overrideWarning, setOverrideWarning] = useState(null);
- // shape: { jobIds, techId, techName, issues: [{label, pass}] }
-
- /* ── Autoroute confirmation ───────────────────────────── */
- const [autoRouteConfirm, setAutoRouteConfirm] = useState(false);
-
- /* ── Context menu ─────────────────────────────────────── */
- const [ctxMenu, setCtxMenu] = useState(null);
-
- /* ── Selection ────────────────────────────────────────── */
- const [selJobs, setSelJobs] = useState([]);
- const [selTechs, setSelTechs] = useState([]);
-
- /* ── Drag ─────────────────────────────────────────────── */
- const [dragJob, setDragJob] = useState(null);
- const techPaneRef = useRef(null);
- const techGridRef = useRef(null);
- const jobGridRef = useRef(null);
- const focusedGridRef = useRef('jobs'); // 'techs' | 'jobs'
- const dragJobRef = useRef(null);
- const dragGhostRef = useRef(null);
- const selJobsRef = useRef(selJobs);
- useEffect(() => { dragJobRef.current = dragJob; }, [dragJob]);
- useEffect(() => { selJobsRef.current = selJobs; }, [selJobs]);
-
- /* ── Demo mode ───────────────────────────────────────── */
- const [isDemo, setIsDemo] = useState(false);
- useEffect(() => {
- api.simStatus().then((r) => {
- if (r.data.is_demo) { setIsDemo(true); setViewDate(new Date()); }
- }).catch(() => {});
- }, []);
-
- /* ── Simulation state ────────────────────────────────── */
- const [simElapsed, setSimElapsed] = useState(null); // elapsed minutes since 08:00 virtual
- const [overrunMap, setOverrunMap] = useState(() => new Map());
- const [demoLocked, setDemoLocked] = useState(false);
-
- /* ── Real clock ───────────────────────────────────────── */
- const [realClock, setRealClock] = useState(() => new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
- useEffect(() => {
- const i = setInterval(() => setRealClock(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })), 10000);
- return () => clearInterval(i);
- }, []);
- // Refs so handleSimEvent never goes stale without re-registering the WS listener
- const loadDataRef = useRef(null);
- const toastRef = useRef(null);
- const techsRef = useRef([]);
- const fJobsRef = useRef([]);
-
- /* ── Filters (dashboard bar) ─────────────────────────── */
- const [jobFilter, setJobFilter] = useState(null);
- const [techFilter, setTechFilter] = useState(null);
-
- /* ── Toasts ───────────────────────────────────────────── */
- const [toasts, setToasts] = useState([]);
- const tid = useRef(0);
- const toast = useCallback((msg, type = 'info') => {
- const id = ++tid.current;
- setToasts((p) => [...p, { id, msg, type }]);
- setTimeout(() => setToasts((p) => p.filter((t) => t.id !== id)), 3000);
- }, []);
-
- /* ── Data loading ─────────────────────────────────────── */
- const loadData = useCallback(async (showRefresh = false) => {
- if (showRefresh) setRefreshing(true);
- // Demo seeds use UTC date; use UTC to match regardless of local timezone
- const d = isDemo ? fmtUTCDate(new Date()) : fmtDate(viewDate);
- try {
- const [tr, jr, sr] = await Promise.all([
- api.getTechnicians(),
- api.getJobs({ scheduled_date: d }),
- api.getJobsSummary({ target_date: d }),
- ]);
- setTechs(tr.data);
- setJobs(jr.data);
- setSummary(sr.data);
- } catch (e) {
- console.error('Load error:', e);
- toast('Failed to load data', 'error');
- } finally {
- setLoading(false);
- setRefreshing(false);
- }
- }, [viewDate, toast, isDemo]);
-
- useEffect(() => { setLoading(true); loadData(); }, [viewDate]); // eslint-disable-line
- useEffect(() => { const i = setInterval(() => loadData(), 30000); return () => clearInterval(i); }, [loadData]);
-
- // Keep refs current so the stable WS handler always calls latest versions
- useEffect(() => { loadDataRef.current = loadData; }, [loadData]);
- useEffect(() => { toastRef.current = toast; }, [toast]);
- useEffect(() => { techsRef.current = techs; }, [techs]);
-
- /* ── Sim event handler (stable ref — never re-registers WS) ── */
- const handleSimEvent = useCallback((ev) => {
- if (ev.event_type === 'clock_tick') {
- setSimElapsed(ev.details?.elapsed_minutes ?? null);
- } else if (ev.event_type === 'job_assigned' || ev.event_type === 'job_started') {
- loadDataRef.current?.();
- } else if (ev.event_type === 'job_completed') {
- setOverrunMap((prev) => { const next = new Map(prev); next.delete(ev.job_id); return next; });
- loadDataRef.current?.();
- } else if (ev.event_type === 'overrun_warning') {
- setOverrunMap((prev) => { const next = new Map(prev); next.set(ev.job_id, ev.details?.severity ?? 'yellow'); return next; });
- } else if (ev.event_type === 'scripted_beat') {
- toastRef.current?.(ev.details?.description ?? 'Scripted event fired', 'info');
- loadDataRef.current?.();
- } else if (ev.event_type === 'day_complete') {
- toastRef.current?.('Demo day complete — all jobs finished', 'success');
- loadDataRef.current?.();
- }
- }, []); // stable — reads latest via refs
-
- useSimEvents(handleSimEvent);
-
- /* ── Close context menu ───────────────────────────────── */
- useEffect(() => { const c = () => setCtxMenu(null); document.addEventListener('click', c); return () => document.removeEventListener('click', c); }, []);
-
- /* ── Keyboard shortcuts ───────────────────────────────── */
- useEffect(() => {
- const h = (e) => {
- if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
- // Don't process shortcuts if inside a floating window
- if (e.target.closest('.fw-window') || e.target.closest('.fw-filter') || e.target.closest('.fw-personnel') || e.target.closest('.fw-job-search') || e.target.closest('.fw-job-detail')) return;
- if (e.key === 'Escape') { setCtxMenu(null); setMapOpen(false); setDetailJob(null); setFilterOpen(false); setPersonnelOpen(false); setJobSearchOpen(false); }
- if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
- e.preventDefault();
- if (focusedGridRef.current === 'techs') {
- setSelTechs((techsRef.current || []).map((t) => t.id));
- techGridRef.current?.selectAll();
- } else {
- setSelJobs((fJobsRef.current || []).map((j) => j.id));
- jobGridRef.current?.selectAll();
- }
- return;
- }
- if (e.key === 'r' && !e.ctrlKey && !e.metaKey) loadData(true);
- if (e.key === 'm' && !e.ctrlKey && !e.metaKey) setMapOpen((p) => !p);
- if (e.key === 't' && !e.ctrlKey && !e.metaKey) setTimelineOpen((p) => !p);
- if (e.key === 'f' && !e.ctrlKey && !e.metaKey) setFilterOpen((p) => !p);
- if (e.key === 'p' && !e.ctrlKey && !e.metaKey) setPersonnelOpen((p) => !p);
- if (e.key === 'j' && !e.ctrlKey && !e.metaKey) setJobSearchOpen((p) => !p);
- if (e.key === 'a' && !e.ctrlKey && !e.metaKey) setAutoRouteConfirm(true);
- };
- document.addEventListener('keydown', h);
- return () => document.removeEventListener('keydown', h);
- }, [loadData]);
-
- /* ── Day nav ──────────────────────────────────────────── */
- const goDay = useCallback((n) => setViewDate((p) => { const d = new Date(p); d.setDate(d.getDate() + n); return d; }), []);
-
- /* ── Drag system ─────────────────────────────────────── */
- useEffect(() => {
- if (!dragJob) return;
- const ghost = dragGhostRef.current;
-
- const updateGhost = (clientX, clientY) => {
- if (!ghost) return;
- const currentJob = dragJobRef.current;
- const currentSel = selJobsRef.current;
- ghost.style.left = `${clientX + 12}px`;
- ghost.style.top = `${clientY - 10}px`;
- ghost.style.display = 'block';
- ghost.textContent = currentSel.length > 1 && currentJob && currentSel.includes(currentJob.id)
- ? `${currentSel.length} jobs`
- : currentJob ? `Job #${currentJob.job_number || currentJob.id} — ${currentJob.customer_name}` : '';
- };
-
- const dropAt = (clientX, clientY) => {
- const job = dragJobRef.current;
- if (job && techGridRef.current) {
- const pane = techPaneRef.current;
- const el = document.elementFromPoint(clientX, clientY);
- if (pane?.contains(el)) {
- const techId = techGridRef.current.getTechIdAtPoint(clientX, clientY);
- if (techId != null) {
- const currentSel = selJobsRef.current;
- const ids = currentSel.length > 0 && currentSel.includes(job.id) ? currentSel : [job.id];
- doAssignWithCheck(ids, techId);
- }
- }
- }
- if (ghost) ghost.style.display = 'none';
- setDragJob(null);
- document.body.style.userSelect = '';
- document.body.style.cursor = '';
- };
-
- // Mouse handlers
- const onMove = (e) => updateGhost(e.clientX, e.clientY);
- const onUp = (e) => dropAt(e.clientX, e.clientY);
-
- // Touch handlers
- const onTouchMove = (e) => {
- e.preventDefault();
- const t = e.touches[0];
- updateGhost(t.clientX, t.clientY);
- };
- const onTouchEnd = (e) => {
- const t = e.changedTouches[0];
- dropAt(t.clientX, t.clientY);
- };
-
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.addEventListener('touchmove', onTouchMove, { passive: false });
- document.addEventListener('touchend', onTouchEnd);
- return () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.removeEventListener('touchmove', onTouchMove);
- document.removeEventListener('touchend', onTouchEnd);
- if (ghost) ghost.style.display = 'none';
- document.body.style.userSelect = '';
- document.body.style.cursor = '';
- };
- }, [dragJob]); // eslint-disable-line
-
- /* ── Assign with CanDo override check ────────────────── */
- // Block any assignment path while the demo is playing — drag-drop, context
- // menu, override modal all funnel through doAssignWithCheck.
- const demoLockedRef = useRef(false);
- useEffect(() => { demoLockedRef.current = demoLocked; }, [demoLocked]);
-
- const doAssignWithCheck = useCallback(async (jobIds, techId) => {
- if (demoLockedRef.current) {
- toastRef.current?.('Stop the demo to assign jobs', 'warning');
- return;
- }
- const tech = techs.find((t) => t.id === techId);
- if (!tech) return;
-
- // For single job, check CanDo and warn if issues
- if (jobIds.length === 1) {
- const job = jobs.find((j) => j.id === jobIds[0]);
- if (job) {
- const issues = [];
- // Skill check
- const missingSkills = (job.required_skills || []).filter((s) => !tech.skills?.includes(s));
- issues.push({ label: `Skill${missingSkills.length > 0 ? ` (missing: ${missingSkills.join(', ')})` : ''}`, pass: missingSkills.length === 0 });
- // Route check
- const routeMatch = !job.route_criteria || (tech.assigned_routes || []).includes(job.route_criteria);
- issues.push({ label: `Route${!routeMatch ? ` (job: ${job.route_criteria}, tech: ${(tech.assigned_routes || []).join(', ') || 'none'})` : ''}`, pass: routeMatch });
-
- const hasIssue = issues.some((i) => !i.pass);
- if (hasIssue) {
- setOverrideWarning({ jobIds, techId, techName: tech.name, issues });
- return;
- }
- }
- }
-
- await doBatchAssign(jobIds, techId);
- }, [techs, jobs]); // eslint-disable-line
-
- /* ── Batch assign (single API call) ───────────────────── */
- const doBatchAssign = useCallback(async (jobIds, techId) => {
- const tech = techs.find((t) => t.id === techId);
- if (!tech) return;
- try {
- const res = await api.batchAssign(jobIds, techId);
- const n = res.data.assigned ?? 0;
- toast(`${n} job${n !== 1 ? 's' : ''} → ${tech.name}`, n > 0 ? 'success' : 'warning');
- await loadData(true);
- } catch (e) {
- toast('Assignment failed', 'error');
- }
- }, [techs, loadData, toast]);
-
- /* ── Override confirm ─────────────────────────────────── */
- const handleOverrideConfirm = useCallback(async () => {
- if (!overrideWarning) return;
- const { jobIds, techId } = overrideWarning;
- setOverrideWarning(null);
- await doBatchAssign(jobIds, techId);
- }, [overrideWarning, doBatchAssign]);
-
- /* ── Batch unassign ───────────────────────────────────── */
- const doBatchUnassign = useCallback(async (jobIds) => {
- try {
- const res = await api.batchUnassign(jobIds);
- const n = res.data.unassigned ?? 0;
- toast(`${n} job${n !== 1 ? 's' : ''} unassigned`, n > 0 ? 'success' : 'warning');
- setSelJobs([]);
- await loadData(true);
- } catch (e) {
- toast('Unassign failed', 'error');
- }
- }, [loadData, toast]);
-
- /* ── Auto-route ───────────────────────────────────────── */
- const handleAutoRoute = useCallback(async () => {
- setAutoRouting(true);
- try {
- const res = await api.autoRoute({ target_date: fmtDate(viewDate) });
- const a = res.data.jobs_assigned ?? 0;
- const u = res.data.jobs_unassigned ?? 0;
- toast(`Routed ${a} job${a !== 1 ? 's' : ''}${u > 0 ? ` · ${u} unassigned` : ''}`, a > 0 ? 'success' : 'warning');
- await loadData(true);
- } catch { toast('Auto-route failed', 'error'); }
- finally { setAutoRouting(false); }
- }, [loadData, toast, viewDate]);
-
- /* ── Job actions ───────────────────────────────────────── */
- const handleJobAction = useCallback(async (action, job) => {
- setCtxMenu(null);
- const labels = { start: 'Started', complete: 'Completed', cancel: 'Cancelled', unassign: 'Unassigned', hold: 'On hold' };
- try {
- if (action === 'start') await api.startJob(job.id);
- else if (action === 'complete') await api.completeJob(job.id);
- else if (action === 'cancel') await api.cancelJob(job.id);
- else if (action === 'unassign') await api.unassignJob(job.id);
- else if (action === 'hold') await api.updateJobStatus(job.id, 'on_hold');
- else if (action === 'batch_unassign') { await doBatchUnassign(selJobs); return; }
- else return;
- toast(`Job #${job.id} — ${labels[action]}`, 'success');
- await loadData(true);
- } catch { toast(`Failed to ${action} job #${job.id}`, 'error'); }
- }, [loadData, toast, doBatchUnassign, selJobs]);
-
- /* ── Tech actions ──────────────────────────────────────── */
- const handleTechAction = useCallback(async (action, tech) => {
- setCtxMenu(null);
- const map = { set_available: 'available', set_on_break: 'on_break', set_off_duty: 'off_duty' };
- const status = map[action];
- if (!status) return;
-
- const techIds = selTechs.length > 1 && selTechs.includes(tech.id) ? selTechs : [tech.id];
- let successCount = 0;
- for (const tid of techIds) {
- try {
- await api.updateTechStatus(tid, status);
- successCount++;
- } catch (e) {
- console.error(`Failed to update tech ${tid}:`, e);
- }
- }
- if (successCount > 0) {
- const label = status.replace(/_/g, ' ');
- toast(
- techIds.length > 1
- ? `${successCount} tech${successCount !== 1 ? 's' : ''} → ${label}`
- : `${tech.name} → ${label}`,
- 'success'
- );
- await loadData(true);
- } else {
- toast('Failed to update status', 'error');
- }
- }, [loadData, toast, selTechs]);
-
- /* ── Context menu assign (with check) ────────────────── */
- const handleAssignToTech = useCallback(async (jobId, techId) => {
- setCtxMenu(null);
- const ids = selJobs.length > 0 && selJobs.includes(jobId) ? selJobs : [jobId];
- await doAssignWithCheck(ids, techId);
- }, [selJobs, doAssignWithCheck]);
-
- /* ── Selection (independent per grid) ─────────────────── */
- const handleJobClick = useCallback((id, e, displayedIds) => {
- setSelJobs((prev) => {
- if (e.metaKey || e.ctrlKey) return prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
- if (e.shiftKey && prev.length > 0 && displayedIds) {
- const lastSelected = prev[prev.length - 1];
- const a = displayedIds.indexOf(lastSelected);
- const b = displayedIds.indexOf(id);
- if (a === -1 || b === -1) return [id];
- const [start, end] = a < b ? [a, b] : [b, a];
- return [...new Set([...prev, ...displayedIds.slice(start, end + 1)])];
- }
- return prev.length === 1 && prev[0] === id ? [] : [id];
- });
- }, []);
-
- const handleTechClick = useCallback((id, e, displayedIds) => {
- setSelTechs((prev) => {
- if (e.metaKey || e.ctrlKey) return prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
- if (e.shiftKey && prev.length > 0 && displayedIds) {
- const lastSelected = prev[prev.length - 1];
- const a = displayedIds.indexOf(lastSelected);
- const b = displayedIds.indexOf(id);
- if (a === -1 || b === -1) return [id];
- const [start, end] = a < b ? [a, b] : [b, a];
- return [...new Set([...prev, ...displayedIds.slice(start, end + 1)])];
- }
- return prev.length === 1 && prev[0] === id ? [] : [id];
- });
- }, []);
-
- /* ── Double-click job for detail ─────────────────────── */
- const handleJobDoubleClick = useCallback((job) => {
- setDetailJob(job);
- }, []);
-
- /* ── Personnel locate ─────────────────────────────────── */
- const handleLocateTech = useCallback((techId) => {
- setSelTechs([techId]);
- setPersonnelOpen(false);
- toast(`Located tech #${techId}`, 'info');
- }, [toast]);
-
- /* ── Filter toggles (dashboard bar) ───────────────────── */
- const toggleJF = useCallback((s) => { setJobFilter((p) => p === s ? null : s); setTechFilter(null); }, []);
- const toggleTF = useCallback((s) => { setTechFilter((p) => p === s ? null : s); setJobFilter(null); }, []);
-
- /* ── Display filter apply ─────────────────────────────── */
- const handleDisplayFilterApply = useCallback((filter) => {
- setDisplayFilter(filter);
- if (filter) toast('Filter applied', 'info');
- else toast('Filter cleared', 'info');
- }, [toast]);
-
- /* ── Divider ─────────────────────────────────────────── */
- useEffect(() => {
- if (!dividerDrag) return;
- const onMove = (e) => {
- if (!splitRef.current) return;
- const r = splitRef.current.getBoundingClientRect();
- setSplitRatio(Math.min(Math.max((e.clientY - r.top) / r.height, 0.1), 0.85));
- };
- const onUp = () => setDividerDrag(false);
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'row-resize';
- document.body.style.userSelect = 'none';
- return () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- };
- }, [dividerDrag]);
-
- /* ── Timeline divider ─────────────────────────────────── */
- useEffect(() => {
- if (!tlDrag) return;
- const onMove = (e) => {
- if (!splitRef.current) return;
- const r = splitRef.current.getBoundingClientRect();
- const bottomY = r.bottom - e.clientY;
- setTimelineHeight(Math.min(Math.max(bottomY, 100), 500));
- };
- const onUp = () => setTlDrag(false);
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'row-resize';
- document.body.style.userSelect = 'none';
- return () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- };
- }, [tlDrag]);
-
- /* ── Computed: apply display filter + dashboard filter ── */
- const active = useMemo(() => techs.filter((t) => ['available', 'on_job', 'en_route'].includes(t.status)).length, [techs]);
- const offDuty = useMemo(() => techs.filter((t) => t.status === 'off_duty').length, [techs]);
-
- const fJobs = useMemo(() => {
- let result = jobs;
- if (displayFilter) {
- result = result.filter((j) => {
- const slot = j.time_slot_start && j.time_slot_end ? `${j.time_slot_start}–${j.time_slot_end}` : null;
- if (slot && displayFilter.timeSlots.length > 0 && !displayFilter.timeSlots.includes(slot)) return false;
- if (j.job_type && displayFilter.jobTypes.length > 0 && !displayFilter.jobTypes.includes(j.job_type)) return false;
- if (j.route_criteria && displayFilter.routeCriteria.length > 0 && !displayFilter.routeCriteria.includes(j.route_criteria)) return false;
- return true;
- });
- }
- if (jobFilter) result = result.filter((j) => j.status === jobFilter);
- return result;
- }, [jobs, displayFilter, jobFilter]);
-
- useEffect(() => { fJobsRef.current = fJobs; }, [fJobs]);
-
- const fTechs = useMemo(() => {
- let result = techs;
- if (displayFilter?.techIds?.length > 0) result = result.filter((t) => displayFilter.techIds.includes(t.id));
- if (techFilter === 'active') result = result.filter((t) => ['available', 'on_job', 'en_route'].includes(t.status));
- else if (techFilter === 'off_duty') result = result.filter((t) => t.status === 'off_duty');
- return result;
- }, [techs, displayFilter, techFilter]);
-
- const timelineTechs = useMemo(() => selTechs.length > 0 ? techs.filter((t) => selTechs.includes(t.id)) : [], [selTechs, techs]);
-
- /* ── Loading ──────────────────────────────────────────── */
- if (loading && techs.length === 0) return {selectedJobIds.length} jobs selected
- ) : (
- <>
- Job #{data.id} — {data.customer_name}
-
-
- {data.status.replace(/_/g, ' ')}
-
-
-
- )}
-
-
- {/* Assign / Reassign submenu */}
- {!isCompleted && !isCancelled && (
- setSubmenu('assign')}
- onMouseLeave={() => setSubmenu(null)}
- >
- {hasMultiSelect
- ? `Assign ${selectedJobIds.length} Jobs To`
- : (isAssigned || isInProgress ? 'Reassign To' : 'Assign To')
- }
- ▸
-
- {submenu === 'assign' && (
-
- )}
-
- {/* Unassign — single or batch */}
- {hasMultiSelect ? (
-
- ) : (
- (isAssigned || isInProgress) && (
-
- )
- )}
-
- {/* Single-job actions only when not multi-selected */}
- {!hasMultiSelect && (
- <>
-
- {isAssigned && (
-
- )}
- {isInProgress && (
-
- )}
- {!isCompleted && !isCancelled && (
-
- )}
- {!isCompleted && !isCancelled && (
- <>
-
-
-
- )}
-
- )}
-
- {(() => {
- const requiredSkills = hasMultiSelect ? [] : (data.required_skills || []);
- const available = technicians.filter((t) => t.status !== 'off_duty');
-
- // Only filter by skills for single job assignment
- const qualified = requiredSkills.length > 0
- ? available.filter((t) => requiredSkills.every((s) => t.skills?.includes(s)))
- : available;
- const unqualified = requiredSkills.length > 0
- ? available.filter((t) => !requiredSkills.every((s) => t.skills?.includes(s)))
- : [];
-
- if (available.length === 0) return
- )}
- No techs available ;
-
- return (
- <>
- {qualified.length > 0 && requiredSkills.length > 0 && (
- Qualified
- )}
- {qualified.map((tech) => (
-
- ))}
- {unqualified.length > 0 && (
- <>
-
- Missing Skills
-
- )}
- {unqualified.map((tech) => {
- const missing = requiredSkills.filter((s) => !tech.skills?.includes(s));
- return (
-
- );
- })}
-
- );
- })()}
- Loading FieldOpt... ;
-
- const s = summary ?? {};
- const pending = s.pending ?? 0, assigned = s.assigned ?? 0, inProg = s.in_progress ?? 0;
- const completed = s.completed ?? 0, onHold = s.on_hold ?? 0;
-
- return (
-
- {/* ══ Header ══ */}
-
- );
-}
-
-/* ── Dashboard Indicator ─────────────────────────────────── */
-function DI({ active, onClick, count, color, label }) {
- return (
-
- );
-}
-
-/* ── Icons ─────────────────────────────────────────────── */
-function MapIcon() { return ; }
-function RefreshIcon({ spinning }) { return ; }
-function BoltIcon() { return ; }
-function TimelineIcon() { return ; }
-function FilterIcon() { return ; }
-function PersonnelIcon() { return ; }
-function SearchIcon() { return ; }
diff --git a/frontend/src/components/FilterWindow.jsx b/frontend/src/components/FilterWindow.jsx
deleted file mode 100644
index f4aa7fe..0000000
--- a/frontend/src/components/FilterWindow.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import FloatingWindow from './FloatingWindow';
-
-/**
- * FilterWindow — WFX-style sub-filter for the R&D.
- * Filters both grids by time slot, job type, route criteria, and technician.
- *
- * Props:
- * jobs — full unfiltered jobs array (to derive available options)
- * technicians — full unfiltered techs array
- * activeFilter — current filter state { timeSlots, jobTypes, routeCriteria, techIds }
- * onApply — callback with new filter object
- * onClose — close handler
- */
-export default function FilterWindow({ jobs, technicians, activeFilter, onApply, onClose }) {
- // Derive available options from loaded data
- const options = useMemo(() => {
- const timeSlots = new Set();
- const jobTypes = new Set();
- const routeCriteria = new Set();
-
- jobs.forEach((j) => {
- if (j.time_slot_start && j.time_slot_end) {
- timeSlots.add(`${j.time_slot_start}–${j.time_slot_end}`);
- }
- if (j.job_type) jobTypes.add(j.job_type);
- if (j.route_criteria) routeCriteria.add(j.route_criteria);
- });
-
- return {
- timeSlots: [...timeSlots].sort(),
- jobTypes: [...jobTypes].sort(),
- routeCriteria: [...routeCriteria].sort(),
- techs: technicians.map((t) => ({ id: t.id, name: t.name, employeeId: t.employee_id })),
- };
- }, [jobs, technicians]);
-
- // Local selection state — initialize from activeFilter or select all
- const [selTimeSlots, setSelTimeSlots] = useState(
- activeFilter?.timeSlots ?? [...options.timeSlots]
- );
- const [selJobTypes, setSelJobTypes] = useState(
- activeFilter?.jobTypes ?? [...options.jobTypes]
- );
- const [selRouteCriteria, setSelRouteCriteria] = useState(
- activeFilter?.routeCriteria ?? [...options.routeCriteria]
- );
- const [selTechIds, setSelTechIds] = useState(
- activeFilter?.techIds ?? options.techs.map((t) => t.id)
- );
-
- /* ── Toggle helpers ───────────────────────────────────── */
- const toggle = useCallback((set, setter, item) => {
- setter((prev) => prev.includes(item) ? prev.filter((x) => x !== item) : [...prev, item]);
- }, []);
-
- const selectAll = useCallback((allItems, setter) => setter([...allItems]), []);
- const selectNone = useCallback((setter) => setter([]), []);
-
- /* ── Apply / Reset ────────────────────────────────────── */
- const handleApply = useCallback(() => {
- onApply({
- timeSlots: selTimeSlots,
- jobTypes: selJobTypes,
- routeCriteria: selRouteCriteria,
- techIds: selTechIds,
- });
- }, [selTimeSlots, selJobTypes, selRouteCriteria, selTechIds, onApply]);
-
- const handleReset = useCallback(() => {
- setSelTimeSlots([...options.timeSlots]);
- setSelJobTypes([...options.jobTypes]);
- setSelRouteCriteria([...options.routeCriteria]);
- setSelTechIds(options.techs.map((t) => t.id));
- onApply(null); // null = no filter active
- }, [options, onApply]);
-
- return (
- FieldOptv{__APP_VERSION__}
- {realClock}
-
-
- {!isDemo && }
-
- {!isDemo && }
- {!isDemo && calOpen && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* ══ Split Panes ══ */}
- 0Failed
-
- {techs.length}Total
- {(jobFilter || techFilter || displayFilter) && (
- <>
-
-
-
- )}
-
- {/* Tech pane */}
-
-
- {/* ══ Drag Ghost — position written via ref to avoid re-renders ══ */}
-
-
- {/* ══ Map ══ */}
- {mapOpen && { focusedGridRef.current = 'techs'; }} onTouchStart={() => { focusedGridRef.current = 'techs'; }}>
-
-
-
- Technicians
- {fTechs.length}{(techFilter || displayFilter) ? ` / ${techs.length}` : ''}
- {selTechs.length > 0 && {selTechs.length} selected}
-
-
-
- { e.preventDefault(); setDividerDrag(true); }}>
-
-
-
- {/* Job pane */}
- { focusedGridRef.current = 'jobs'; }} onTouchStart={() => { focusedGridRef.current = 'jobs'; }}>
-
-
- {/* Timeline pane */}
- {timelineOpen && (
- <>
-
- Jobs
- {fJobs.length}{(jobFilter || displayFilter) ? ` / ${jobs.length}` : ''}
- {selJobs.length > 0 && {selJobs.length} selected}
-
-
-
- { e.preventDefault(); setTlDrag(true); }}>
-
-
-
-
-
- )}
-
- Timeline
- {timelineTechs.length > 0 && {timelineTechs.map((t) => t.name).join(', ')}}
-
- setAutoRouteConfirm(false)}>
-
- )}
-
- {/* ══ Override Warning ══ */}
- {overrideWarning && (
- e.stopPropagation()}>
-
- Auto-Route Confirmation
-
- Auto-route will assign {pending} pending job{pending !== 1 ? 's' : ''} to available technicians based on skill, route criteria, and distance.
-
-
-
-
-
- setOverrideWarning(null)}>
-
- )}
-
- {/* ══ Toasts ══ */}
- e.stopPropagation()}>
-
- Assignment Warning
-
- Assigning {overrideWarning.jobIds.length === 1 ? `job #${overrideWarning.jobIds[0]}` : `${overrideWarning.jobIds.length} jobs`} to {overrideWarning.techName}:
- {overrideWarning.issues.map((issue, i) => (
-
-
-
- {issue.pass ? '✓' : '✕'}
-
- {issue.label}
-
- ))}
-
-
-
-
-
- {toasts.map((t) =>
-
- {/* Time Slots */}
-
-
- {/* Action buttons */}
-
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/components/FloatingWindow.jsx b/frontend/src/components/FloatingWindow.jsx
deleted file mode 100644
index 7059f7a..0000000
--- a/frontend/src/components/FloatingWindow.jsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-
-/**
- * FloatingWindow — reusable draggable/resizable floating panel.
- * Used by FilterWindow, PersonnelWindow, JobSearchWindow, JobDetailPanel.
- *
- * Props:
- * title — window title text
- * onClose — close handler
- * defaultPos — { x, y } initial position
- * defaultSize — { w, h } initial size
- * minSize — { w, h } minimum dimensions
- * children — window body content
- * className — optional extra class on the wrapper
- * zIndex — optional z-index override
- * resizable — whether corner resize is enabled (default true)
- */
-export default function FloatingWindow({
- title,
- onClose,
- defaultPos = { x: 120, y: 80 },
- defaultSize = { w: 500, h: 400 },
- minSize = { w: 300, h: 200 },
- children,
- className = '',
- zIndex = 1500,
- resizable = true,
-}) {
- const [pos, setPos] = useState(defaultPos);
- const [size, setSize] = useState(defaultSize);
- const dragRef = useRef(false);
- const offsetRef = useRef({ x: 0, y: 0 });
-
- /* ── Titlebar drag ────────────────────────────────────── */
- const handleTitleMouseDown = useCallback((e) => {
- if (e.target.closest('.fw-close')) return; // don't drag on close button
- e.preventDefault();
- offsetRef.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
- dragRef.current = true;
-
- const onMove = (ev) => {
- if (!dragRef.current) return;
- setPos({
- x: Math.max(0, ev.clientX - offsetRef.current.x),
- y: Math.max(0, ev.clientY - offsetRef.current.y),
- });
- };
- const onUp = () => {
- dragRef.current = false;
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'move';
- document.body.style.userSelect = 'none';
- }, [pos]);
-
- /* ── Corner resize ────────────────────────────────────── */
- const handleResizeMouseDown = useCallback((e) => {
- e.preventDefault();
- e.stopPropagation();
- const startX = e.clientX;
- const startY = e.clientY;
- const startW = size.w;
- const startH = size.h;
-
- const onMove = (ev) => {
- setSize({
- w: Math.max(minSize.w, startW + (ev.clientX - startX)),
- h: Math.max(minSize.h, startH + (ev.clientY - startY)),
- });
- };
- const onUp = () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'nwse-resize';
- document.body.style.userSelect = 'none';
- }, [size, minSize]);
-
- /* ── Escape to close ──────────────────────────────────── */
- useEffect(() => {
- const h = (e) => {
- if (e.key === 'Escape') onClose?.();
- };
- document.addEventListener('keydown', h);
- return () => document.removeEventListener('keydown', h);
- }, [onClose]);
-
- return (
-
- {label}
- {selected.length}/{items.length}
-
-
- {items.map((item) => (
-
- ))}
-
-
-
-
-
-
-
- );
-}
diff --git a/frontend/src/components/JobDetailPanel.jsx b/frontend/src/components/JobDetailPanel.jsx
deleted file mode 100644
index ee86513..0000000
--- a/frontend/src/components/JobDetailPanel.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import FloatingWindow from './FloatingWindow';
-
-/**
- * JobDetailPanel — displays full job information.
- * Opened by double-clicking a job in the main grid or job search.
- *
- * Props:
- * job — the full job object
- * onClose — close handler
- */
-export default function JobDetailPanel({ job, onClose }) {
- if (!job) return null;
-
- const fmtDt = (iso) => {
- if (!iso) return '—';
- const d = new Date(iso);
- return `${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getDate().toString().padStart(2, '0')}/${d.getFullYear()} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
- };
-
- return (
-
- {title}
-
-
-
- {children}
-
- {resizable && (
-
- )}
-
- {/* Status + Type header */}
-
-
-
- {job.status.replace(/_/g, ' ')}
-
- {job.job_type?.replace(/_/g, ' ')}
- Pri {job.priority}
-
-
- {/* Customer */}
-
-
-
- {/* Location */}
- Customer
- Name{job.customer_name}
- {job.customer_phone && Phone{job.customer_phone} }
- {job.customer_email && Email{job.customer_email} }
-
-
-
- {/* Schedule */}
- Service Location
- Address{job.service_address}
-
- City / Zip
- {[job.service_city, job.service_zip].filter(Boolean).join(' ') || '—'}
-
- Route{job.route_criteria || '—'}
-
- Lat / Lon
- {job.latitude?.toFixed(4)}, {job.longitude?.toFixed(4)}
-
-
-
-
- {/* Assignment */}
- Schedule
- Date{fmtDt(job.scheduled_date)?.split(' ')[0]}
-
- Time Slot
-
- {job.time_slot_start && job.time_slot_end ? `${job.time_slot_start}–${job.time_slot_end}` : '—'}
-
-
- Duration{job.estimated_duration} min
-
-
-
- {/* Skills */}
- Assignment
-
- Tech
- {job.assigned_tech_name || 'Unassigned'}
-
-
-
-
- {/* Description / Notes */}
- {job.description && (
- Required Skills
-
- {job.required_skills?.length > 0
- ? job.required_skills.map((s) => {s})
- : None
- }
-
-
-
- )}
- {job.special_instructions && (
- Description
- {job.description}
-
-
- )}
- {job.notes && (
- Special Instructions
- {job.special_instructions}
-
-
- )}
-
- {/* Timestamps */}
- Notes
- {job.notes}
-
-
- Created{fmtDt(job.created_at)}
- {job.started_at && Started{fmtDt(job.started_at)} }
- {job.completed_at && Completed{fmtDt(job.completed_at)} }
-
-
- );
-});
-
-export default JobGrid;
diff --git a/frontend/src/components/JobSearchWindow.jsx b/frontend/src/components/JobSearchWindow.jsx
deleted file mode 100644
index 29ae600..0000000
--- a/frontend/src/components/JobSearchWindow.jsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import { useState, useCallback, useRef, useMemo } from 'react';
-import { AgGridReact } from 'ag-grid-react';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-import FloatingWindow from './FloatingWindow';
-import { api } from '../api/client';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
-
-/**
- * JobSearchWindow — WFX-style Job Search.
- * Opens with search criteria form. User fills criteria, hits Search.
- * Results display in a grid. Can modify criteria and re-search.
- * Double-click a result to open job detail.
- * Right-click for context actions (assign, status change).
- * Drag from results onto a tech in the main R&D.
- *
- * Props:
- * viewDate — current R&D view date (for drag date validation)
- * onClose — close handler
- * onJobDetail — callback(job) to open detail view
- * onDragStart — callback(job) to initiate drag into main R&D
- * onContextMenu — callback(event, job) to show context menu
- */
-
-function fmtDate(d) {
- return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
-}
-
-export default function JobSearchWindow({ viewDate, onClose, onJobDetail, onDragStart, onContextMenu }) {
- /* ── Search criteria state ────────────────────────────── */
- const [dateFrom, setDateFrom] = useState(fmtDate(viewDate));
- const [dateTo, setDateTo] = useState(fmtDate(viewDate));
- const [jobId, setJobId] = useState('');
- const [techId, setTechId] = useState('');
- const [customerName, setCustomerName] = useState('');
- const [status, setStatus] = useState('');
- const [jobType, setJobType] = useState('');
- const [routeCriteria, setRouteCriteria] = useState('');
-
- /* ── Results state ────────────────────────────────────── */
- const [results, setResults] = useState(null); // null = not yet searched
- const [searching, setSearching] = useState(false);
- const [resultCount, setResultCount] = useState(0);
- const gridRef = useRef(null);
-
- /* ── Search ───────────────────────────────────────────── */
- const handleSearch = useCallback(async () => {
- setSearching(true);
- try {
- const params = {};
- if (dateFrom) params.date_from = dateFrom;
- if (dateTo) params.date_to = dateTo;
- if (jobId.trim()) params.job_id = Number(jobId);
- if (techId.trim()) params.tech_id = Number(techId);
- if (customerName.trim()) params.customer_name = customerName.trim();
- if (status) params.status = status;
- if (jobType) params.job_type = jobType;
- if (routeCriteria.trim()) params.route_criteria = routeCriteria.trim();
-
- const res = await api.searchJobs(params);
- setResults(res.data);
- setResultCount(res.data.length);
- } catch (e) {
- console.error('Job search failed:', e);
- setResults([]);
- setResultCount(0);
- } finally {
- setSearching(false);
- }
- }, [dateFrom, dateTo, jobId, techId, customerName, status, jobType, routeCriteria]);
-
- /* ── Clear ────────────────────────────────────────────── */
- const handleClear = useCallback(() => {
- setDateFrom(fmtDate(viewDate));
- setDateTo(fmtDate(viewDate));
- setJobId('');
- setTechId('');
- setCustomerName('');
- setStatus('');
- setJobType('');
- setRouteCriteria('');
- setResults(null);
- setResultCount(0);
- }, [viewDate]);
-
- /* ── Double-click for detail ──────────────────────────── */
- const handleRowDoubleClicked = useCallback((p) => {
- if (p.data && onJobDetail) onJobDetail(p.data);
- }, [onJobDetail]);
-
- /* ── Drag initiation from search results ─────────────── */
- const handleMouseDown = useCallback((e) => {
- if (e.button !== 0) return;
- if (e.target.closest('.ag-header')) return;
- const rowEl = e.target.closest('.ag-row');
- if (!rowEl) return;
-
- const startX = e.clientX;
- const startY = e.clientY;
- let fired = false;
-
- const onMove = (ev) => {
- if (fired) return;
- if (Math.abs(ev.clientX - startX) + Math.abs(ev.clientY - startY) > 8) {
- fired = true;
- const idx = Number(rowEl.getAttribute('row-index'));
- const node = gridRef.current?.api?.getDisplayedRowAtIndex(idx);
- if (node?.data && onDragStart) {
- document.body.style.userSelect = 'none';
- document.body.style.cursor = 'grabbing';
- onDragStart(node.data);
- }
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- }
- };
- const onUp = () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- }, [onDragStart]);
-
- /* ── Column definitions (matches main job grid) ──────── */
- const columnDefs = useMemo(() => [
- {
- headerName: 'Job ID', width: 70,
- valueGetter: (p) => p.data?.job_number || String(p.data?.id),
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' },
- },
- {
- field: 'job_type', headerName: 'Type', width: 90,
- valueFormatter: (p) => p.value?.replace(/_/g, ' ') || '',
- cellStyle: { textTransform: 'capitalize', fontSize: 'var(--font-size-xs)' },
- },
- {
- field: 'status', headerName: 'Status', width: 90,
- cellStyle: (p) => ({
- fontSize: 'var(--font-size-xs)',
- fontWeight: 500,
- color: p.value === 'pending' ? 'var(--color-warning)'
- : p.value === 'completed' ? 'var(--color-success)'
- : p.value === 'cancelled' ? 'var(--color-danger)'
- : p.value === 'in_progress' ? 'var(--color-purple)'
- : 'var(--text-primary)',
- }),
- valueFormatter: (p) => p.value?.replace(/_/g, ' ') || '',
- },
- {
- field: 'assigned_tech_name', headerName: 'Tech', width: 100,
- valueFormatter: (p) => p.value || '—',
- cellStyle: { fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- },
- {
- field: 'priority', headerName: 'Pri', width: 45,
- cellStyle: (p) => ({
- fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)',
- color: p.value === 1 ? 'var(--color-danger)' : p.value === 2 ? 'var(--color-warning)' : 'var(--text-muted)',
- }),
- },
- { field: 'customer_name', headerName: 'Customer', minWidth: 120, flex: 1 },
- {
- field: 'route_criteria', headerName: 'RteC', width: 85,
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- valueFormatter: (p) => p.value || '—',
- },
- {
- field: 'service_address', headerName: 'Address', minWidth: 140, flex: 1,
- cellStyle: { fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- },
- {
- field: 'service_city', headerName: 'City', width: 85,
- cellStyle: { fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- },
- {
- field: 'service_zip', headerName: 'Zip', width: 60,
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)' },
- },
- {
- headerName: 'Time Slot', width: 95,
- valueGetter: (p) => p.data?.time_slot_start ? `${p.data.time_slot_start}–${p.data.time_slot_end}` : '',
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' },
- },
- {
- field: 'estimated_duration', headerName: 'Dur', width: 55,
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- valueFormatter: (p) => {
- if (!p.value) return '';
- const hrs = Math.floor(p.value / 60);
- const mins = p.value % 60;
- return hrs > 0 ? `${hrs}h${mins > 0 ? ` ${mins}m` : ''}` : `${mins}m`;
- },
- },
- {
- field: 'required_skills', headerName: 'Skills', minWidth: 120, flex: 1,
- valueFormatter: (p) => p.value?.join(', ') ?? '',
- cellStyle: { fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)' },
- },
- ], []);
-
- const defaultColDef = useMemo(() => ({ sortable: true, resizable: true }), []);
-
- /* ── Right-click on search results ────────────────────── */
- const onCellContextMenu = useCallback((p) => {
- if (p.event && p.data && onContextMenu) onContextMenu(p.event, p.data);
- }, [onContextMenu]);
-
- /* ── Enter key to search ──────────────────────────────── */
- const handleKeyDown = useCallback((e) => {
- if (e.key === 'Enter') handleSearch();
- }, [handleSearch]);
-
- return (
-
-
-
- {/* Results */}
- {results === null ? (
-
-
- setDateFrom(e.target.value)} />
-
- setDateTo(e.target.value)} />
-
- setJobId(e.target.value)} placeholder="#" />
-
-
-
- setCustomerName(e.target.value)} placeholder="Name..." />
-
- setTechId(e.target.value)} placeholder="#" />
-
- setRouteCriteria(e.target.value)} placeholder="MN-..." />
-
-
-
-
-
-
-
-
-
-
-
- Enter search criteria and click Search
-
- ) : (
- <>
-
- {resultCount} job{resultCount !== 1 ? 's' : ''} found
- Double-click for details · Drag to assign
-
-
-
-
- )}
-
-
- {tech.name}-Status: {tech.status} -Skills: {tech.skills.join(', ')} -
-
- {job.customer_name}-{job.service_address} -Type: {job.job_type} -Status: {job.status} -Priority: {job.priority} -FieldOpt Map \u2014
-
-
-
-
-`;
-}
-
-
-/* ── Fallback in-page floating map ────────────────────── */
-function InPageMap({ technicians, jobs, onClose }) {
- const [pos, setPos] = useState({ x: 80, y: 80 });
- const [size, setSize] = useState({ w: 620, h: 460 });
- const dragRef = useRef(null);
- const offsetRef = useRef({ x: 0, y: 0 });
- const mapContainerRef = useRef(null);
-
- const handleTitleMouseDown = useCallback((e) => {
- e.preventDefault();
- offsetRef.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
- dragRef.current = true;
- const onMove = (ev) => {
- if (!dragRef.current) return;
- setPos({
- x: Math.max(0, ev.clientX - offsetRef.current.x),
- y: Math.max(0, ev.clientY - offsetRef.current.y),
- });
- };
- const onUp = () => {
- dragRef.current = false;
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'move';
- document.body.style.userSelect = 'none';
- }, [pos]);
-
- const handleResizeMouseDown = useCallback((e) => {
- e.preventDefault();
- e.stopPropagation();
- const startX = e.clientX;
- const startY = e.clientY;
- const startW = size.w;
- const startH = size.h;
- const onMove = (ev) => {
- setSize({
- w: Math.max(320, startW + (ev.clientX - startX)),
- h: Math.max(240, startH + (ev.clientY - startY)),
- });
- };
- const onUp = () => {
- document.removeEventListener('mousemove', onMove);
- document.removeEventListener('mouseup', onUp);
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- if (mapContainerRef.current) {
- setTimeout(() => mapContainerRef.current?.invalidateSize?.(), 50);
- }
- };
- document.addEventListener('mousemove', onMove);
- document.addEventListener('mouseup', onUp);
- document.body.style.cursor = 'nwse-resize';
- document.body.style.userSelect = 'none';
- }, [size]);
-
- const center = [40.7128, -74.006];
-
- return (
-
-
- );
-}
diff --git a/frontend/src/components/PersonnelWindow.jsx b/frontend/src/components/PersonnelWindow.jsx
deleted file mode 100644
index 04506db..0000000
--- a/frontend/src/components/PersonnelWindow.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import FloatingWindow from './FloatingWindow';
-
-/**
- * PersonnelWindow — WFX-style staff list.
- * Shows ALL techs (including off-shift), searchable by name/ID.
- *
- * Props:
- * technicians — full tech array from API
- * onLocateTech — callback(techId) to scroll main grid to this tech and select
- * onContextMenu — callback(event, tech) to show tech context menu
- * onTechDetail — callback(tech) to open tech info panel
- * onClose — close handler
- */
-export default function PersonnelWindow({ technicians, onLocateTech, onContextMenu, onTechDetail, onClose }) {
- const [search, setSearch] = useState('');
- const inputRef = useRef(null);
-
- // Focus input after a delay so the P keystroke doesn't land in the input
- useEffect(() => {
- const t = setTimeout(() => inputRef.current?.focus(), 80);
- return () => clearTimeout(t);
- }, []);
-
- const filtered = useMemo(() => {
- if (!search.trim()) return technicians;
- const q = search.toLowerCase().trim();
- return technicians.filter((t) =>
- t.name.toLowerCase().includes(q) ||
- (t.employee_id && t.employee_id.toLowerCase().includes(q)) ||
- String(t.id).includes(q)
- );
- }, [technicians, search]);
-
- const handleLocate = useCallback((techId) => {
- onLocateTech?.(techId);
- }, [onLocateTech]);
-
- const handleRightClick = useCallback((e, tech) => {
- e.preventDefault();
- onContextMenu?.(e, tech);
- }, [onContextMenu]);
-
- const handleDoubleClick = useCallback((tech) => {
- onTechDetail?.(tech);
- }, [onTechDetail]);
-
- return (
-
-
- Map — {technicians.length} techs · {jobs.length} jobs
-
-
-
-
-
-
- - Status: {tech.status} - Routes: {tech.assigned_routes?.join(', ') || '—'} - Skills: {tech.skills?.join(', ') || '—'} - - {job.service_address} - {job.job_type} — {job.status} - Route: {job.route_criteria || '—'} · Pri: {job.priority} -
- setSearch(e.target.value)}
- ref={inputRef}
- />
- {search && (
-
- )}
- {filtered.length} / {technicians.length}
-
-
- {/* Column headers */}
-
- ID
- Name
- Status
- Routes
- Skills
-
-
-
- {/* Tech list */}
-
- {filtered.map((tech) => (
-
- handleRightClick(e, tech)}
- onDoubleClick={() => handleDoubleClick(tech)}
- >
- {tech.employee_id || tech.id}
- {tech.name}
-
-
- {tech.status.replace(/_/g, ' ')}
-
-
-
- {tech.assigned_routes?.join(', ') || '—'}
-
-
- {tech.skills?.join(', ') || '—'}
-
-
-
- ))}
- {filtered.length === 0 && (
-
- {search ? `No techs matching "${search}"` : 'No technicians loaded'}
-
- )}
-
- DEMO
-
-
- {running ? '● LIVE' : paused ? '⏸ PAUSED' : '◼ STOPPED'}
-
-
- {fmtClock(displayElapsed)}
-
-
- );
-}
diff --git a/frontend/src/components/TechGrid.jsx b/frontend/src/components/TechGrid.jsx
deleted file mode 100644
index a2113ad..0000000
--- a/frontend/src/components/TechGrid.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useMemo, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
-import { AgGridReact } from 'ag-grid-react';
-import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
-
-ModuleRegistry.registerModules([AllCommunityModule]);
-
-function StatusCellRenderer({ value }) {
- if (!value) return null;
- return {value.replace(/_/g, ' ')};
-}
-
-function SkillsCellRenderer({ value }) {
- if (!value || value.length === 0) return —;
- return (
-
- {value.map((skill) => {skill})}
-
- );
-}
-
-function ShiftCellRenderer({ data }) {
- if (!data?.shift_start || !data?.shift_end) return —;
- return (
-
- {data.shift_start}–{data.shift_end}
-
- );
-}
-
-function JobCountCellRenderer({ data }) {
- if (!data) return null;
- const assigned = data.assigned_jobs ?? 0;
- const completed = data.completed_jobs ?? 0;
- return (
-
- {assigned}:{completed}
-
- );
-}
-
-const TechGrid = forwardRef(function TechGrid({ technicians, selectedIds = [], onRowClicked, onContextMenu, isDragTarget }, ref) {
- const gridRef = useRef(null);
- const containerRef = useRef(null);
-
- // Expose a point-to-tech-id lookup so Dashboard can resolve drop targets without
- // stamping data-tech-id on every scroll frame.
- useImperativeHandle(ref, () => ({
- getTechIdAtPoint: (x, y) => {
- const el = document.elementFromPoint(x, y);
- const row = el?.closest('.ag-row');
- if (!row) return null;
- const idx = Number(row.getAttribute('row-index'));
- const node = gridRef.current?.api?.getDisplayedRowAtIndex(idx);
- return node?.data?.id ?? null;
- },
- selectAll: () => {
- gridRef.current?.api?.selectAll();
- },
- }), []);
-
- const columnDefs = useMemo(() => [
- {
- headerName: 'Tech ID', width: 85, pinned: 'left', sort: 'asc',
- valueGetter: (p) => p.data?.employee_id || String(p.data?.id),
- comparator: (a, b) => {
- // Numeric prefix sort: "MD001" → split letters/digits; pure numbers → numeric
- const na = parseInt(a, 10), nb = parseInt(b, 10);
- if (!isNaN(na) && !isNaN(nb)) return na - nb;
- return a.localeCompare(b);
- },
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)' },
- },
- { field: 'name', headerName: 'Name', minWidth: 150, flex: 1, pinned: 'left' },
- { field: 'status', headerName: 'Status', width: 110, cellRenderer: StatusCellRenderer },
- {
- headerName: 'Shift', width: 110, cellRenderer: ShiftCellRenderer,
- valueGetter: (p) => p.data?.shift_start ? `${p.data.shift_start}-${p.data.shift_end}` : '',
- },
- {
- headerName: 'Jobs A:C', width: 85, cellRenderer: JobCountCellRenderer,
- valueGetter: (p) => (p.data?.assigned_jobs ?? 0) + (p.data?.completed_jobs ?? 0),
- },
- {
- field: 'assigned_routes', headerName: 'Routes', width: 120,
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: '10px', color: 'var(--text-muted)' },
- valueFormatter: (p) => p.value?.join(', ') ?? '—',
- },
- {
- field: 'max_jobs_per_day', headerName: 'Max', width: 55,
- cellStyle: { fontFamily: 'var(--font-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--text-muted)' },
- },
- {
- field: 'skills', headerName: 'Skills', minWidth: 180, flex: 1,
- cellRenderer: SkillsCellRenderer,
- valueFormatter: (p) => p.value?.join(', ') ?? '',
- },
- {
- field: 'phone', headerName: 'Phone', width: 120,
- cellStyle: { fontSize: 'var(--font-size-xs)', color: 'var(--text-secondary)' },
- },
- ], []);
-
- const defaultColDef = useMemo(() => ({ sortable: true, resizable: true, suppressMovable: false }), []);
-
- const rowSelection = useMemo(() => ({
- mode: 'multiRow',
- checkboxes: false,
- headerCheckbox: false,
- enableClickSelection: false,
- }), []);
-
- // Sync AG Grid selection — O(1) per selected ID via getRowNode hash lookup
- useEffect(() => {
- const gridApi = gridRef.current?.api;
- if (!gridApi) return;
- gridApi.deselectAll();
- selectedIds.forEach((id) => {
- gridApi.getRowNode(String(id))?.setSelected(true, false, 'api');
- });
- }, [selectedIds, technicians]);
-
- const onCellContextMenu = useCallback((p) => {
- if (p.event && p.data && onContextMenu) onContextMenu(p.event, p.data);
- }, [onContextMenu]);
-
- const handleRowClicked = useCallback((p) => {
- if (p.data && onRowClicked) {
- // Get the current displayed order from AG Grid (respects sorting)
- const displayedIds = [];
- gridRef.current?.api?.forEachNodeAfterFilterAndSort((node) => {
- if (node.data) displayedIds.push(node.data.id);
- });
- onRowClicked(p.data.id, p.event, displayedIds);
- }
- }, [onRowClicked]);
-
- return (
-
- {stopped && (
-
- )}
- {running && (
-
- )}
- {paused && (
-
- )}
- {!stopped && (
-
- )}
-
-
-
- Speed
-
-
-
-
- );
-});
-
-export default TechGrid;
diff --git a/frontend/src/components/TechTimeline.jsx b/frontend/src/components/TechTimeline.jsx
deleted file mode 100644
index 30c710c..0000000
--- a/frontend/src/components/TechTimeline.jsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { useMemo } from 'react';
-
-const HOURS = Array.from({ length: 13 }, (_, i) => i + 6); // 6 AM to 6 PM
-const HOUR_WIDTH = 80;
-const JOB_HEIGHT = 24;
-const JOB_GAP = 2;
-const ROW_PADDING = 6;
-
-function parseTime(timeStr) {
- if (!timeStr) return null;
- const [h, m] = timeStr.split(':').map(Number);
- return h + m / 60;
-}
-
-function etaToHour(iso) {
- if (!iso) return null;
- const d = new Date(iso);
- if (isNaN(d.getTime())) return null;
- // Demo virtual day is UTC-based (08:00 start). Use UTC getters so the timeline
- // matches the seeded virtual clock regardless of viewer timezone.
- return d.getUTCHours() + d.getUTCMinutes() / 60 + d.getUTCSeconds() / 3600;
-}
-
-function fmtSlot(start, end) {
- if (!start || !end) return '';
- return `${start}–${end}`;
-}
-
-const STATUS_COLORS = {
- pending: 'var(--color-warning)',
- assigned: 'var(--color-info)',
- in_progress: 'var(--color-purple)',
- completed: 'var(--color-success)',
- cancelled: 'var(--color-danger)',
- on_hold: 'var(--color-on-hold)',
-};
-
-// Assign vertical lanes to overlapping jobs
-function assignLanes(jobs) {
- const sorted = [...jobs].sort((a, b) => a.startHour - b.startHour);
- const lanes = []; // each lane is the endHour of the last job in that lane
-
- return sorted.map((job) => {
- const endHour = job.startHour + job.durationHours;
- // Find first lane where this job doesn't overlap
- let lane = lanes.findIndex((laneEnd) => job.startHour >= laneEnd);
- if (lane === -1) {
- lane = lanes.length;
- lanes.push(endHour);
- } else {
- lanes[lane] = endHour;
- }
- return { ...job, lane, totalLanes: 0 }; // totalLanes set after
- }).map((job) => ({ ...job, totalLanes: lanes.length }));
-}
-
-export default function TechTimeline({ technicians, jobs }) {
- const timelineData = useMemo(() => {
- return technicians.map((tech) => {
- const techJobs = jobs
- .filter((j) => j.assigned_tech_id === tech.id)
- .map((job) => {
- // Prefer actual ETA + sampled duration so the block reflects when
- // the tech is really there. Fall back to the customer time slot
- // for jobs that haven't been picked up by the dispatcher yet.
- const etaHour = etaToHour(job.estimated_arrival);
- const startHour = etaHour ?? parseTime(job.time_slot_start) ?? 8;
- const minutes = job.actual_duration_minutes ?? job.estimated_duration ?? 60;
- const durationHours = Math.max(minutes / 60, 0.25); // floor 15min so block is visible
- return {
- ...job,
- startHour,
- durationHours,
- };
- });
-
- const lanedJobs = assignLanes(techJobs);
- const maxLanes = lanedJobs.length > 0 ? Math.max(...lanedJobs.map((j) => j.totalLanes)) : 1;
- const rowHeight = ROW_PADDING * 2 + maxLanes * (JOB_HEIGHT + JOB_GAP);
-
- return {
- tech,
- jobs: lanedJobs,
- maxLanes,
- rowHeight: Math.max(rowHeight, 36),
- shiftStart: parseTime(tech.shift_start) ?? 8,
- shiftEnd: parseTime(tech.shift_end) ?? 17,
- };
- });
- }, [technicians, jobs]);
-
- const totalWidth = HOURS.length * HOUR_WIDTH;
-
- if (technicians.length === 0) {
- return (
-
- Select a technician to view their timeline
-
- );
- }
-
- return (
-
- {/* Hour headers */}
-
- );
-}
diff --git a/frontend/src/components/Toast.jsx b/frontend/src/components/Toast.jsx
deleted file mode 100644
index f8c4731..0000000
--- a/frontend/src/components/Toast.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export default function Toast({ message, type = 'info' }) {
- const [visible, setVisible] = useState(false);
-
- useEffect(() => {
- // Trigger enter animation
- requestAnimationFrame(() => setVisible(true));
- const timer = setTimeout(() => setVisible(false), 2600);
- return () => clearTimeout(timer);
- }, []);
-
- return (
-
-
-
- {/* Tech rows */}
- Tech
- {HOURS.map((hour) => (
-
- {hour === 12 ? '12 PM' : hour > 12 ? `${hour - 12} PM` : `${hour} AM`}
-
- ))}
-
- {timelineData.map(({ tech, jobs: techJobs, rowHeight, shiftStart, shiftEnd }) => (
-
-
-
- ))}
-
- {tech.name}
-
-
-
- {HOURS.map((hour) => (
-
- ))}
-
- {/* Shift background */}
-
-
- {/* Job blocks — stacked by lane */}
- {techJobs.map((job) => (
-
-
-
- {job.customer_name?.split(' ')[0]}
-
-
- {fmtSlot(job.time_slot_start, job.time_slot_end)}
-
-
- ))}
-
-
- {type === 'success' && '✓'}
- {type === 'error' && '✕'}
- {type === 'warning' && '!'}
- {type === 'info' && 'i'}
-
- {message}
-
- );
-}
diff --git a/frontend/src/hooks/useSimEvents.js b/frontend/src/hooks/useSimEvents.js
deleted file mode 100644
index da91a51..0000000
--- a/frontend/src/hooks/useSimEvents.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-/**
- * Connects to the simulation WebSocket and calls onEvent for each DispatchEvent.
- * Reconnects automatically with exponential backoff (max 30s).
- * No-ops when onEvent is null/undefined.
- */
-export function useSimEvents(onEvent) {
- const onEventRef = useRef(onEvent);
- useEffect(() => { onEventRef.current = onEvent; }, [onEvent]);
-
- useEffect(() => {
- let ws = null;
- let attempt = 0;
- let stopped = false;
-
- const connect = () => {
- if (stopped) return;
- const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
- ws = new WebSocket(`${proto}//${location.host}/api/v1/simulation/ws`);
-
- ws.onopen = () => { attempt = 0; };
-
- ws.onmessage = (e) => {
- try {
- const events = JSON.parse(e.data);
- if (Array.isArray(events) && onEventRef.current) {
- events.forEach(onEventRef.current);
- }
- } catch { /* ignore malformed */ }
- };
-
- ws.onclose = () => {
- if (!stopped) {
- const delay = Math.min(1000 * 2 ** attempt++, 30000);
- setTimeout(connect, delay);
- }
- };
- };
-
- connect();
- return () => {
- stopped = true;
- ws?.close();
- };
- }, []); // stable — reconnect logic handles server restarts
-}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
deleted file mode 100644
index cd80839..0000000
--- a/frontend/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './styles/index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
- |
|---|---|---|---|---|---|---|---|---|