dashboarded added
This commit is contained in:
@@ -4,17 +4,6 @@
|
||||
<div class="container-fluid mt-4">
|
||||
<h2 class="mb-4">Client File Reports</h2>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="card p-4 shadow-sm mb-5">
|
||||
<form method="POST">
|
||||
<label class="form-label fw-bold">RA Bill No</label>
|
||||
@@ -40,19 +29,20 @@
|
||||
<ul class="nav nav-tabs" id="reportTabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" id="tr-tab" data-bs-toggle="tab" data-bs-target="#tr"
|
||||
type="button">Tr.Ex </button>
|
||||
type="button">Tr.Ex Comparison</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="mh-tab" data-bs-toggle="tab" data-bs-target="#mh" type="button">Mh.Ex
|
||||
</button>
|
||||
Comparison</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="dc-tab" data-bs-toggle="tab" data-bs-target="#dc" type="button">MH & DC
|
||||
</button>
|
||||
Comparison</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="laying-tab" data-bs-toggle="tab" data-bs-target="#laying" type="button">Laying
|
||||
& Bedding </button>
|
||||
<button class="nav-link" id="laying-tab" data-bs-toggle="tab" data-bs-target="#laying"
|
||||
type="button">Laying
|
||||
& Bedding Comparison</button>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content mt-3" id="reportTabsContent">
|
||||
@@ -76,9 +66,9 @@
|
||||
{{ tables.laying|safe }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,87 +1,118 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid px-2 px-md-4">
|
||||
<h4 class="mb-3 text-center text-md-start">Comparison Software Solapur (UGD) - Live Dashboard</h4>
|
||||
|
||||
<h4 class="mb-3 text-center text-md-start">Comparison Software Solapur(UGD) </h4>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
|
||||
<!-- Total Work -->
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card text-white bg-primary shadow h-100">
|
||||
<div class="card-body text-center text-md-start">
|
||||
<h6>Test Total Work</h6>
|
||||
<h3 class="fw-bold">30%</h3>
|
||||
<h6>Trenching Units</h6>
|
||||
<h3 class="fw-bold" id="card-trench">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completed -->
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card text-white bg-success shadow h-100">
|
||||
<div class="card-body text-center text-md-start">
|
||||
<h6>test Completed</h6>
|
||||
<h3 class="fw-bold">35%</h3>
|
||||
<h6>Manhole Units</h6>
|
||||
<h3 class="fw-bold" id="card-manhole">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending -->
|
||||
<div class="col-12 col-md-4">
|
||||
<div class="card text-dark bg-warning shadow h-100">
|
||||
<div class="card-body text-center text-md-start">
|
||||
<h6>Pending</h6>
|
||||
<h3 class="fw-bold">35%</h3>
|
||||
<h6>Laying Units</h6>
|
||||
<h3 class="fw-bold" id="card-laying">0</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Charts -->
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Bar Chart -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-dark text-white text-center text-md-start">
|
||||
Work Category Bar Chart
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid" style="max-height:300px;">
|
||||
<div class="card-header bg-dark text-white">Live Category Bar Chart</div>
|
||||
<div class="card-body">
|
||||
<canvas id="liveBarChart" style="max-height:300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pie Chart -->
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-dark text-white text-center text-md-start">
|
||||
Project Status Pie Chart
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid" style="max-height:300px;">
|
||||
<div class="card-header bg-dark text-white">Location Distribution Pie Chart</div>
|
||||
<div class="card-body">
|
||||
<canvas id="livePieChart" style="max-height:300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Histogram -->
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-dark text-white text-center text-md-start">
|
||||
Daily Work Histogram
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<img src="data:image/png;base64,{{ histogram }}" class="img-fluid" style="max-height:350px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<script>
|
||||
// 2. Initialize the Bar Chart
|
||||
const barCtx = document.getElementById('liveBarChart').getContext('2d');
|
||||
let liveBarChart = new Chart(barCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Trenching', 'Manholes', 'Laying'],
|
||||
datasets: [{
|
||||
label: 'Units Completed',
|
||||
data: [0, 0, 0],
|
||||
backgroundColor: ['#0d6efd', '#198754', '#ffc107']
|
||||
}]
|
||||
},
|
||||
options: { responsive: true, maintainAspectRatio: false }
|
||||
});
|
||||
|
||||
// 3. Initialize the Pie Chart
|
||||
const pieCtx = document.getElementById('livePieChart').getContext('2d');
|
||||
let livePieChart = new Chart(pieCtx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [], // Will be filled from SQL
|
||||
datasets: [{
|
||||
data: [],
|
||||
backgroundColor: ['#0d6efd', '#198754', '#ffc107', '#6f42c1', '#fd7e14']
|
||||
}]
|
||||
},
|
||||
options: { responsive: true, maintainAspectRatio: false }
|
||||
});
|
||||
|
||||
// 4. Function to Fetch Live Data from your Python API
|
||||
function fetchLiveData() {
|
||||
fetch('/dashboard/api/live-stats') // This matches the route we created in the "Kitchen"
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Update the Summary Cards
|
||||
document.getElementById('card-trench').innerText = data.summary.trench;
|
||||
document.getElementById('card-manhole').innerText = data.summary.manhole;
|
||||
document.getElementById('card-laying').innerText = data.summary.laying;
|
||||
|
||||
// Update Bar Chart
|
||||
liveBarChart.data.datasets[0].data = [
|
||||
data.summary.trench,
|
||||
data.summary.manhole,
|
||||
data.summary.laying
|
||||
];
|
||||
liveBarChart.update();
|
||||
|
||||
// Update Pie Chart (Location stats)
|
||||
livePieChart.data.labels = Object.keys(data.locations);
|
||||
livePieChart.data.datasets[0].data = Object.values(data.locations);
|
||||
livePieChart.update();
|
||||
})
|
||||
.catch(err => console.error("Error fetching live data:", err));
|
||||
}
|
||||
|
||||
// 5. Check for updates every 10 seconds (Real-time effect)
|
||||
setInterval(fetchLiveData, 10000);
|
||||
fetchLiveData(); // Load immediately on page open
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Contact Person</label>
|
||||
<label class="form-label">Contact Person Name</label>
|
||||
<input type="text" class="form-control" name="contact_person">
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user