508 lines
14 KiB
HTML
508 lines
14 KiB
HTML
{{ template "sync/layout/authenticated.html" . }}
|
||
|
||
{{ define "title" }}Planning{{ end }}
|
||
{{ define "extraheader" }}
|
||
<script
|
||
type="text/javascript"
|
||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||
></script>
|
||
<script src="/static/js/map-aggregate.js"></script>
|
||
<script
|
||
defer
|
||
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
|
||
></script>
|
||
|
||
<script>
|
||
function workbench() {
|
||
return {
|
||
// Fake database - JSON data
|
||
signals: [
|
||
{
|
||
id: "sig-1",
|
||
type: "public_report",
|
||
title: "Public Report – Service Request #1024",
|
||
description: "Aedes aegypti • Standing Water Complaint",
|
||
species: "aedes_aegypti",
|
||
priority: 8,
|
||
created_at: "2024-01-15T10:30:00Z",
|
||
},
|
||
{
|
||
id: "sig-2",
|
||
type: "trap_spike",
|
||
title: "Trap Spike – H3 8828308281fffff",
|
||
description: "Culex pipiens • Adult Surge",
|
||
species: "culex_pipiens",
|
||
priority: 6,
|
||
created_at: "2024-01-15T09:15:00Z",
|
||
},
|
||
{
|
||
id: "sig-3",
|
||
type: "residual_expiring",
|
||
title: "Residual Expiring – Parcel 45-233-01",
|
||
description: "Reinspection Due",
|
||
species: null,
|
||
priority: 4,
|
||
created_at: "2024-01-14T14:20:00Z",
|
||
},
|
||
],
|
||
|
||
planFollowups: [
|
||
{
|
||
id: "plan-1",
|
||
type: "plan_followup",
|
||
title: "Plan Follow-Up – Greenway HOA Basin",
|
||
description: "Residential Section • Verification Required",
|
||
species: "aedes_aegypti",
|
||
badge: "Plan",
|
||
priority: 7,
|
||
created_at: "2024-01-14T08:00:00Z",
|
||
},
|
||
{
|
||
id: "plan-2",
|
||
type: "plan_followup",
|
||
title: "Plan Follow-Up – Ag Irrigation Canal 7B",
|
||
description: "Ag Section • Monitoring Window",
|
||
species: "culex_tarsalis",
|
||
badge: "Plan",
|
||
priority: 5,
|
||
created_at: "2024-01-13T16:45:00Z",
|
||
},
|
||
],
|
||
|
||
leads: [
|
||
{
|
||
id: "lead-1",
|
||
title: "Lead #L-204",
|
||
description: "3 Signals • Aedes aegypti",
|
||
},
|
||
{
|
||
id: "lead-2",
|
||
title: "Lead #L-198",
|
||
description: "2 Signals • Culex pipiens",
|
||
},
|
||
],
|
||
|
||
// State
|
||
selectedSignals: [],
|
||
|
||
filters: {
|
||
species: "",
|
||
type: "",
|
||
sort: "newest",
|
||
},
|
||
|
||
// Computed: Filtered signals
|
||
get filteredSignals() {
|
||
let filtered = [...this.signals];
|
||
|
||
// Apply species filter
|
||
if (this.filters.species) {
|
||
filtered = filtered.filter(
|
||
(s) => s.species === this.filters.species,
|
||
);
|
||
}
|
||
|
||
// Apply type filter
|
||
if (this.filters.type) {
|
||
filtered = filtered.filter((s) => s.type === this.filters.type);
|
||
}
|
||
|
||
// Apply sorting
|
||
if (this.filters.sort === "priority") {
|
||
filtered.sort((a, b) => b.priority - a.priority);
|
||
} else if (this.filters.sort === "newest") {
|
||
filtered.sort(
|
||
(a, b) => new Date(b.created_at) - new Date(a.created_at),
|
||
);
|
||
}
|
||
|
||
return filtered;
|
||
},
|
||
|
||
// Methods
|
||
isSelected(id) {
|
||
return this.selectedSignals.some((s) => s.id === id);
|
||
},
|
||
|
||
toggleSignal(signal) {
|
||
const index = this.selectedSignals.findIndex(
|
||
(s) => s.id === signal.id,
|
||
);
|
||
|
||
if (index > -1) {
|
||
// Deselect
|
||
this.selectedSignals.splice(index, 1);
|
||
} else {
|
||
// Select
|
||
this.selectedSignals.push(signal);
|
||
}
|
||
},
|
||
|
||
clearSelection() {
|
||
this.selectedSignals = [];
|
||
},
|
||
|
||
createLead() {
|
||
if (this.selectedSignals.length === 0) return;
|
||
|
||
alert(
|
||
`Creating new lead from ${this.selectedSignals.length} signal(s):\n` +
|
||
this.selectedSignals.map((s) => `- ${s.title}`).join("\n"),
|
||
);
|
||
|
||
// In a real app, you would make an API call here
|
||
// fetch('/api/leads', {
|
||
// method: 'POST',
|
||
// body: JSON.stringify({ signals: this.selectedSignals.map(s => s.id) })
|
||
// })
|
||
|
||
this.clearSelection();
|
||
},
|
||
};
|
||
}
|
||
</script>
|
||
{{ end }}
|
||
{{ define "content" }}
|
||
<div class="container-fluid py-3" x-data="workbench()">
|
||
<!-- Header -->
|
||
<div class="row mb-3">
|
||
<div class="col">
|
||
<h3 class="mb-1">Daily Planning Workbench</h3>
|
||
<div class="text-muted small">
|
||
Signals and leads enter from the left, are investigated in the center,
|
||
and transformed into structured field assignments using tools on the
|
||
right.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<!-- LEFT: Incoming Signals & Leads -->
|
||
<div class="col-xl-3">
|
||
<div class="card shadow-sm h-100">
|
||
<div class="card-header bg-white pane-header">
|
||
Incoming Signals & Leads
|
||
</div>
|
||
<div class="card-body scroll-pane">
|
||
<!-- FILTERS -->
|
||
<div class="mb-3">
|
||
<div class="filter-label mb-1">Species</div>
|
||
<select
|
||
class="form-select form-select-sm mb-2 disabled"
|
||
x-model="filters.species"
|
||
disabled
|
||
>
|
||
<option value="">All Species</option>
|
||
<option value="aedes_aegypti">Aedes aegypti</option>
|
||
<option value="aedes_albopictus">Aedes albopictus</option>
|
||
<option value="culex_pipiens">Culex pipiens</option>
|
||
<option value="culex_tarsalis">Culex tarsalis</option>
|
||
</select>
|
||
|
||
<div class="filter-label mb-1">Signal Type</div>
|
||
<select
|
||
class="form-select form-select-sm mb-2 disabled"
|
||
x-model="filters.type"
|
||
disabled
|
||
>
|
||
<option value="">All Types</option>
|
||
<option value="public_report">Public Report</option>
|
||
<option value="trap_spike">Trap Spike</option>
|
||
<option value="surveillance">Surveillance Observation</option>
|
||
<option value="residual_expiring">Residual Expiring</option>
|
||
<option value="plan_followup">Plan Follow-Up</option>
|
||
</select>
|
||
|
||
<div class="filter-label mb-1">Sort By</div>
|
||
<select
|
||
class="form-select form-select-sm disabled"
|
||
x-model="filters.sort"
|
||
disabled
|
||
>
|
||
<option value="newest">Newest First</option>
|
||
<option value="priority">Highest Priority</option>
|
||
<option value="linked">Most Signals Linked</option>
|
||
<option value="species_signal">Strongest Species Signal</option>
|
||
</select>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- Signals -->
|
||
<div class="mb-3">
|
||
<div class="fw-semibold mb-2">
|
||
Signals
|
||
<span
|
||
class="badge bg-primary"
|
||
x-show="selectedSignals.length > 0"
|
||
x-text="selectedSignals.length"
|
||
></span>
|
||
</div>
|
||
|
||
<template x-for="signal in filteredSignals" :key="signal.id">
|
||
<div
|
||
class="border rounded p-2 mb-2 signal-item"
|
||
:class="{ 'selected': isSelected(signal.id) }"
|
||
@click="toggleSignal(signal)"
|
||
>
|
||
<div class="small fw-semibold" x-text="signal.title"></div>
|
||
<div
|
||
class="text-muted small"
|
||
x-text="signal.description"
|
||
></div>
|
||
<template x-if="signal.badge">
|
||
<span
|
||
class="badge bg-secondary mt-1"
|
||
x-text="signal.badge"
|
||
></span>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- Mosquito Control Plan Followups -->
|
||
<div class="mb-3">
|
||
<div class="fw-semibold mb-2">
|
||
Mosquito Control Plan Follow-Ups
|
||
</div>
|
||
|
||
<template x-for="followup in planFollowups" :key="followup.id">
|
||
<div
|
||
class="border rounded p-2 mb-2 signal-item"
|
||
:class="{ 'selected': isSelected(followup.id) }"
|
||
@click="toggleSignal(followup)"
|
||
>
|
||
<div class="small fw-semibold" x-text="followup.title"></div>
|
||
<div
|
||
class="text-muted small"
|
||
x-text="followup.description"
|
||
></div>
|
||
<span class="badge bg-secondary">Plan</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<!-- Leads -->
|
||
<div>
|
||
<div class="fw-semibold mb-2">Existing Leads</div>
|
||
|
||
<template x-for="lead in leads" :key="lead.id">
|
||
<div class="border rounded p-2 mb-2 signal-item">
|
||
<div class="small fw-semibold" x-text="lead.title"></div>
|
||
<div class="text-muted small" x-text="lead.description"></div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER: Active Workbench -->
|
||
<div class="col-xl-6">
|
||
<div class="card shadow-sm mb-3">
|
||
<div class="card-header bg-white pane-header">
|
||
Active Investigation Workbench
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="workbench-map mb-3">
|
||
Map Placeholder<br />
|
||
H3 Cells • Parcels • Signal Density • Lead Clusters
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<div class="fw-semibold">Selected Signals</div>
|
||
<div
|
||
class="text-muted small"
|
||
x-text="`${selectedSignals.length} Signal${selectedSignals.length !== 1 ? 's' : ''} Selected`"
|
||
></div>
|
||
|
||
<template x-if="selectedSignals.length === 0">
|
||
<div class="text-muted small mt-2 fst-italic">
|
||
Click signals from the left panel to select them
|
||
</div>
|
||
</template>
|
||
|
||
<ul class="small mt-2" x-show="selectedSignals.length > 0">
|
||
<template
|
||
x-for="signal in selectedSignals"
|
||
:key="signal.id"
|
||
>
|
||
<li>
|
||
<span x-text="signal.title"></span>
|
||
<button
|
||
@click="toggleSignal(signal)"
|
||
class="btn btn-sm btn-link text-danger p-0 ms-1"
|
||
style="font-size: 0.7rem;"
|
||
>
|
||
✕
|
||
</button>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
|
||
<button
|
||
x-show="selectedSignals.length > 0"
|
||
@click="clearSelection()"
|
||
class="btn btn-sm btn-outline-secondary mt-2 w-100"
|
||
>
|
||
Clear Selection
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<div class="fw-semibold">Derived Lead Strength</div>
|
||
<div class="text-muted small">Signal Convergence Score</div>
|
||
<div class="mt-2">
|
||
<template x-if="selectedSignals.length === 0">
|
||
<span class="badge bg-secondary">No Selection</span>
|
||
</template>
|
||
<template x-if="selectedSignals.length === 1">
|
||
<span class="badge bg-info">Single Signal</span>
|
||
</template>
|
||
<template x-if="selectedSignals.length === 2">
|
||
<span class="badge bg-warning text-dark"
|
||
>Moderate Confidence</span
|
||
>
|
||
</template>
|
||
<template x-if="selectedSignals.length >= 3">
|
||
<span class="badge bg-danger">High Confidence</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<div class="fw-semibold">Related Communications</div>
|
||
<div class="text-muted small">
|
||
Inbound & outbound contact
|
||
</div>
|
||
<ul class="small mt-2">
|
||
<li>Resident follow-up requested</li>
|
||
<li>HOA notification sent</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card border">
|
||
<div class="card-body">
|
||
<div class="fw-semibold">Priority Context</div>
|
||
<div class="text-muted small">Risk synthesis</div>
|
||
<template
|
||
x-if="selectedSignals.some(s => s.species === 'aedes_aegypti')"
|
||
>
|
||
<span class="badge bg-warning text-dark"
|
||
>Elevated Aedes Risk</span
|
||
>
|
||
</template>
|
||
<template
|
||
x-if="!selectedSignals.some(s => s.species === 'aedes_aegypti')"
|
||
>
|
||
<span class="badge bg-secondary">Standard Priority</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: Transformation Tools -->
|
||
<div class="col-xl-3">
|
||
<div class="card shadow-sm h-100">
|
||
<div class="card-header bg-white pane-header">
|
||
Transformation Tools
|
||
</div>
|
||
<div class="card-body scroll-pane">
|
||
<div class="mb-3">
|
||
<div class="text-muted small mb-2">Signal → Lead</div>
|
||
<button
|
||
class="btn btn-outline-primary tool-button"
|
||
:disabled="selectedSignals.length === 0"
|
||
@click="createLead()"
|
||
>
|
||
Create New Lead from Selection
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-secondary tool-button disabled"
|
||
disabled
|
||
>
|
||
Add Signals to Existing Lead
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-secondary tool-button"
|
||
:disabled="selectedSignals.length === 0"
|
||
>
|
||
Mark Signal as Addressed
|
||
</button>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<div class="mb-3">
|
||
<div class="text-muted small mb-2">Lead → Field Assignment</div>
|
||
<button
|
||
class="btn btn-outline-success tool-button disabled"
|
||
disabled
|
||
>
|
||
Create Proposed Assignment
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-secondary tool-button disabled"
|
||
disabled
|
||
>
|
||
Add Leads to Existing Assignment
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-secondary tool-button disabled"
|
||
disabled
|
||
>
|
||
Split Lead
|
||
</button>
|
||
</div>
|
||
|
||
<hr />
|
||
|
||
<div class="mb-3">
|
||
<div class="text-muted small mb-2">Assignment Controls</div>
|
||
<button
|
||
class="btn btn-outline-dark tool-button disabled"
|
||
disabled
|
||
>
|
||
Set Priority
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-dark tool-button disabled"
|
||
disabled
|
||
>
|
||
Estimate Effort
|
||
</button>
|
||
<button
|
||
class="btn btn-outline-dark tool-button disabled"
|
||
disabled
|
||
>
|
||
Send to Operations
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{ end }}
|