417 lines
14 KiB
HTML
417 lines
14 KiB
HTML
{{template "base.html" .}}
|
|
|
|
{{define "title"}}Dash{{end}}
|
|
{{define "style"}}
|
|
.map-container {
|
|
height: 300px;
|
|
background-color: #e9ecef;
|
|
border-radius: 4px;
|
|
}
|
|
.technician-card {
|
|
transition: all 0.2s;
|
|
}
|
|
.technician-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.calendar-container {
|
|
min-height: 300px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 4px;
|
|
}
|
|
.status-active {
|
|
background-color: #d4edda;
|
|
}
|
|
.status-break {
|
|
background-color: #fff3cd;
|
|
}
|
|
.status-transit {
|
|
background-color: #cce5ff;
|
|
}
|
|
.trap-increase {
|
|
color: #dc3545;
|
|
}
|
|
.trap-decrease {
|
|
color: #28a745;
|
|
}
|
|
{{end}}
|
|
{{define "content"}}
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-flex align-items-center" href="#">
|
|
<img src="https://via.placeholder.com/50" alt="{{.DistrictName}} Logo" class="me-2">
|
|
<span>{{.DistrictName}} Mosquito Abatement District</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#"><i class="bi bi-house-door"></i> Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="bi bi-people"></i> Residents</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="bi bi-clipboard-data"></i> Reports</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#"><i class="bi bi-gear"></i> Settings</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid py-4">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Quick Search</h5>
|
|
<form action="/phone-call/search-results" method="GET">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="Search by ID (e.g., easy twin jazz cats), address, GPS, name or phone..." aria-label="Search">
|
|
<button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Search</button>
|
|
</div>
|
|
<small class="form-text text-muted">Search for anything: request ID, address, coordinates, contact name, or phone number</small>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">Service Request Lookup</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="/phone-call/search-results" method="GET">
|
|
<div class="mb-3">
|
|
<label for="requestId" class="form-label">Request ID</label>
|
|
<input type="text" class="form-control" id="requestId" placeholder="e.g., easy twin jazz cats">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="phoneNumber" class="form-label">Phone Number</label>
|
|
<input type="tel" class="form-control" id="phoneNumber" placeholder="(555) 123-4567">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="address" class="form-label">Address</label>
|
|
<input type="text" class="form-control" id="address" placeholder="123 Main St, Anytown">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100"><i class="bi bi-search"></i> Find Request</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Mosquito Activity & Relief</h5>
|
|
<a href="/phone-call/service-request" class="btn btn-light btn-sm"><i class="bi bi-plus-circle"></i> New Service Request</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<label class="form-label">Location of Concern</label>
|
|
<div class="map-container d-flex justify-content-center align-items-center">
|
|
<div class="text-center text-muted">
|
|
<i class="bi bi-map fs-1"></i>
|
|
<p>Interactive map will be loaded here</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h6>Recent Trap Counts</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-bordered">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Trap Location</th>
|
|
<th>Current</th>
|
|
<th>Week Δ</th>
|
|
<th>Month Δ</th>
|
|
<th>YoY</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Elmwood Park</td>
|
|
<td>47</td>
|
|
<td class="trap-decrease">-12%</td>
|
|
<td class="trap-decrease">-23%</td>
|
|
<td class="trap-increase">+5%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Riverside Dr</td>
|
|
<td>32</td>
|
|
<td class="trap-increase">+8%</td>
|
|
<td class="trap-decrease">-5%</td>
|
|
<td class="trap-decrease">-10%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Oakdale Creek</td>
|
|
<td>53</td>
|
|
<td class="trap-increase">+15%</td>
|
|
<td class="trap-increase">+22%</td>
|
|
<td class="trap-increase">+17%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h6>Nearby Service Requests</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm table-bordered">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
<th>Type</th>
|
|
<th>Distance</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>10/15/23</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
<td>Green Pool</td>
|
|
<td>0.2 mi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>10/18/23</td>
|
|
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
|
<td>Mosquito Nuisance</td>
|
|
<td>0.3 mi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>10/19/23</td>
|
|
<td><span class="badge bg-info text-dark">Accepted</span></td>
|
|
<td>Previous Source</td>
|
|
<td>0.5 mi</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0">Today's Technician Roster</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card technician-card status-active">
|
|
<div class="card-body text-center">
|
|
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
|
|
<h6 class="card-title">Sarah Johnson</h6>
|
|
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 8</p>
|
|
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 5</p>
|
|
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 234-5678</p>
|
|
<span class="badge bg-success">Servicing Request</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card technician-card status-break">
|
|
<div class="card-body text-center">
|
|
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
|
|
<h6 class="card-title">Mark Williams</h6>
|
|
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 7</p>
|
|
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 3</p>
|
|
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 345-6789</p>
|
|
<span class="badge bg-warning text-dark">On Break</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card technician-card status-transit">
|
|
<div class="card-body text-center">
|
|
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
|
|
<h6 class="card-title">Lisa Rodriguez</h6>
|
|
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 9</p>
|
|
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 6</p>
|
|
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 456-7890</p>
|
|
<span class="badge bg-primary">In Transit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card technician-card status-active">
|
|
<div class="card-body text-center">
|
|
<img src="https://avatar.iran.liara.run/public?size=100" class="rounded-circle mb-2 avatar" width="100" alt="Technician Photo">
|
|
<h6 class="card-title">Carlos Martinez</h6>
|
|
<p class="card-text mb-1"><i class="bi bi-list-check"></i> Scheduled: 6</p>
|
|
<p class="card-text mb-1"><i class="bi bi-check-circle"></i> Completed: 4</p>
|
|
<p class="card-text mb-1"><i class="bi bi-telephone"></i> (555) 567-8901</p>
|
|
<span class="badge bg-success">Servicing Request</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-dark text-white">
|
|
<h5 class="mb-0">Calendar</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="calendar-container p-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-left"></i></button>
|
|
<h6 class="mb-0">October 2023</h6>
|
|
<button class="btn btn-sm btn-outline-secondary"><i class="bi bi-chevron-right"></i></button>
|
|
</div>
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-muted">1</td>
|
|
<td class="text-muted">2</td>
|
|
<td class="text-muted">3</td>
|
|
<td class="text-muted">4</td>
|
|
<td class="text-muted">5</td>
|
|
<td class="text-muted">6</td>
|
|
<td class="text-muted">7</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">8</td>
|
|
<td class="text-muted">9</td>
|
|
<td class="text-muted">10</td>
|
|
<td class="text-muted">11</td>
|
|
<td class="text-muted">12</td>
|
|
<td class="text-muted">13</td>
|
|
<td class="text-muted">14</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">15</td>
|
|
<td class="text-muted">16</td>
|
|
<td class="text-muted">17</td>
|
|
<td class="text-muted">18</td>
|
|
<td class="text-muted">19</td>
|
|
<td class="text-muted">20</td>
|
|
<td class="text-muted">21</td>
|
|
</tr>
|
|
<tr>
|
|
<td>22</td>
|
|
<td class="bg-primary text-white rounded">23</td>
|
|
<td>24</td>
|
|
<td>25</td>
|
|
<td>26</td>
|
|
<td>27</td>
|
|
<td>28</td>
|
|
</tr>
|
|
<tr>
|
|
<td>29</td>
|
|
<td>30</td>
|
|
<td>31</td>
|
|
<td class="text-muted">1</td>
|
|
<td class="text-muted">2</td>
|
|
<td class="text-muted">3</td>
|
|
<td class="text-muted">4</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">Today's Schedule - October 23, 2023</h5>
|
|
<button class="btn btn-light btn-sm"><i class="bi bi-calendar-plus"></i> Schedule Appointment</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Address</th>
|
|
<th>Type</th>
|
|
<th>Resident</th>
|
|
<th>Technician</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>8:00 AM</td>
|
|
<td>123 Maple St, Anytown</td>
|
|
<td>Mosquito Nuisance</td>
|
|
<td>John Smith</td>
|
|
<td>Sarah Johnson</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>9:30 AM</td>
|
|
<td>456 Oak Ave, Anytown</td>
|
|
<td>Green Pool</td>
|
|
<td>Emily Davis</td>
|
|
<td>Mark Williams</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<td>11:00 AM</td>
|
|
<td>789 Pine Ln, Anytown</td>
|
|
<td>Previous Source</td>
|
|
<td>Robert Jones</td>
|
|
<td>Lisa Rodriguez</td>
|
|
<td><span class="badge bg-primary">In Progress</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>1:30 PM</td>
|
|
<td>101 Cedar Blvd, Anytown</td>
|
|
<td>Mosquito Nuisance</td>
|
|
<td>Maria Garcia</td>
|
|
<td>Carlos Martinez</td>
|
|
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3:00 PM</td>
|
|
<td>202 Birch Dr, Anytown</td>
|
|
<td>Green Pool</td>
|
|
<td>David Wilson</td>
|
|
<td>Sarah Johnson</td>
|
|
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|