dashboarded added

Reviewed-on: #10

.env

@@ -20,7 +20,7 @@ DB_HOST=127.0.0.1
 DB_PORT=3306
 DB_NAME=comparisondb
 DB_USER=root
-DB_PASSWORD=root
+DB_PASSWORD=admin
 
 # DATABASE_URL=mysql+pymysql://root:root@localhost/comparisondb
 

app/routes/dashboard.py

@@ -1,87 +1,136 @@
-import matplotlib
+# import matplotlib
-matplotlib.use("Agg")
+# matplotlib.use("Agg")
 
-from flask import Blueprint, render_template, session, redirect, url_for
+# from flask import Blueprint, render_template, session, redirect, url_for
-import matplotlib.pyplot as plt
+# import matplotlib.pyplot as plt
-import io
+# import io
-import base64
+# import base64
-from app.utils.plot_utils import plot_to_base64
+# from app.utils.plot_utils import plot_to_base64
-from app.services.dashboard_service import DashboardService
+# from app.services.dashboard_service import DashboardService
+
+# dashboard_bp = Blueprint("dashboard", __name__, url_prefix="/dashboard")
+
+# # dashboard_bp = Blueprint("dashboard", __name__)
+
+# # charts 
+# # def plot_to_base64():
+# #     img = io.BytesIO()
+# #     plt.savefig(img, format="png", bbox_inches="tight")
+# #     plt.close()
+# #     img.seek(0)
+# #     return base64.b64encode(img.getvalue()).decode()
+
+# # bar chart
+# def bar_chart():
+#     categories = ["Trench", "Manhole", "Pipe Laying", "Restoration"]
+#     values = [120, 80, 150, 60]
+
+#     plt.figure()
+#     plt.bar(categories, values)
+#     plt.title("Work Category Report")
+#     plt.xlabel("test Category")
+#     plt.ylabel("test Quantity")
+
+
+#     return plot_to_base64(plt)
+
+# # Pie chart
+# def pie_chart():
+#     labels = ["Completed", "In Progress", "Pending"]
+#     sizes = [55, 20, 25]
+
+#     plt.figure()
+#     plt.pie(sizes, labels=labels, autopct="%1.1f%%", startangle=140)
+#     plt.title("Project Status")
+
+#     return plot_to_base64(plt)
+
+# # Histogram chart
+# def histogram_chart():
+#     daily_work = [5, 10, 15, 20, 20, 25, 30, 35, 40, 45, 50]
+
+#     plt.figure()
+#     plt.hist(daily_work, bins=5)
+#     plt.title("Daily Work Distribution")
+#     plt.xlabel("Work Units")
+#     plt.ylabel("Frequency")
+
+#     return plot_to_base64(plt)
+
+# # Dashboaed page
+# @dashboard_bp.route("/")
+# def dashboard():
+#     if not session.get("user_id"):
+#         return redirect(url_for("auth.login"))
+
+#     return render_template(
+#         "dashboard.html",
+#         title="Dashboard",
+#         bar_chart=bar_chart(),
+#         pie_chart=pie_chart(),
+#         histogram=histogram_chart()
+#     )
+
+# # subcontractor dashboard
+# @dashboard_bp.route("/subcontractor_dashboard", methods=["GET", "POST"])
+# def subcontractor_dashboard():
+#     if not session.get("user_id"):
+#         return redirect(url_for("auth.login"))
+
+#     tr_dash = DashboardService().bar_chart_of_tr_ex
+    
+    
+#     return render_template(
+#         "subcontractor_dashboard.html",
+#         title="Dashboard",
+#         bar_chart=tr_dash
+#     )
+
+from flask import Blueprint, render_template, session, redirect, url_for, jsonify
+from sqlalchemy import func
+from app import db
+from app.models.trench_excavation_model import TrenchExcavation
+from app.models.manhole_excavation_model import ManholeExcavation
+from app.models.laying_model import Laying
 
 dashboard_bp = Blueprint("dashboard", __name__, url_prefix="/dashboard")
 
-# dashboard_bp = Blueprint("dashboard", __name__)
+@dashboard_bp.route("/api/live-stats")
+def live_stats():
+    try:
+        # 1. Overall Volume
+        t_count = TrenchExcavation.query.count()
+        m_count = ManholeExcavation.query.count()
+        l_count = Laying.query.count()
 
-# charts 
+        # 2. Location Distribution (Business reach)
-# def plot_to_base64():
+        loc_results = db.session.query(
-#     img = io.BytesIO()
+            TrenchExcavation.Location, 
-#     plt.savefig(img, format="png", bbox_inches="tight")
+            func.count(TrenchExcavation.id)
-#     plt.close()
+        ).group_by(TrenchExcavation.Location).all()
-#     img.seek(0)
-#     return base64.b64encode(img.getvalue()).decode()
 
-# bar chart
+        # 3. Work Timeline (Business productivity trend)
-def bar_chart():
+        # Assuming your models have a 'created_at' field
-    categories = ["Trench", "Manhole", "Pipe Laying", "Restoration"]
+        timeline_results = db.session.query(
-    values = [120, 80, 150, 60]
+            func.date(TrenchExcavation.created_at), 
+            func.count(TrenchExcavation.id)
+        ).group_by(func.date(TrenchExcavation.created_at)).order_by(func.date(TrenchExcavation.created_at)).all()
 
-    plt.figure()
+        return jsonify({
-    plt.bar(categories, values)
+            "summary": {
-    plt.title("Work Category Report")
+                "trench": t_count,
-    plt.xlabel("test Category")
+                "manhole": m_count,
-    plt.ylabel("test Quantity")
+                "laying": l_count,
+                "total": t_count + m_count + l_count
+            },
+            "locations": {row[0]: row[1] for row in loc_results if row[0]},
+            "timeline": {str(row[0]): row[1] for row in timeline_results}
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
 
-
-    return plot_to_base64(plt)
-
-# Pie chart
-def pie_chart():
-    labels = ["Completed", "In Progress", "Pending"]
-    sizes = [55, 20, 25]
-
-    plt.figure()
-    plt.pie(sizes, labels=labels, autopct="%1.1f%%", startangle=140)
-    plt.title("Project Status")
-
-    return plot_to_base64(plt)
-
-# Histogram chart
-def histogram_chart():
-    daily_work = [5, 10, 15, 20, 20, 25, 30, 35, 40, 45, 50]
-
-    plt.figure()
-    plt.hist(daily_work, bins=5)
-    plt.title("Daily Work Distribution")
-    plt.xlabel("Work Units")
-    plt.ylabel("Frequency")
-
-    return plot_to_base64(plt)
-
-# Dashboaed page
 @dashboard_bp.route("/")
 def dashboard():
     if not session.get("user_id"):
         return redirect(url_for("auth.login"))
-
+    return render_template("dashboard.html", title="Business Intelligence Dashboard")
-    return render_template(
-        "dashboard.html",
-        title="Dashboard",
-        bar_chart=bar_chart(),
-        pie_chart=pie_chart(),
-        histogram=histogram_chart()
-    )
-
-# subcontractor dashboard
-@dashboard_bp.route("/subcontractor_dashboard", methods=["GET", "POST"])
-def subcontractor_dashboard():
-    if not session.get("user_id"):
-        return redirect(url_for("auth.login"))
-
-    tr_dash = DashboardService().bar_chart_of_tr_ex
-    
-    
-    return render_template(
-        "subcontractor_dashboard.html",
-        title="Dashboard",
-        bar_chart=tr_dash
-    )

app/templates/dashboard.html

@@ -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>
+                    <h6>Trenching Units</h6>
-                    <h3 class="fw-bold">30%</h3>
+                    <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>
+                    <h6>Manhole Units</h6>
-                    <h3 class="fw-bold">35%</h3>
+                    <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>
+                    <h6>Laying Units</h6>
-                    <h3 class="fw-bold">35%</h3>
+                    <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">
+                <div class="card-header bg-dark text-white">Live Category Bar Chart</div>
-                    Work Category Bar Chart
+                <div class="card-body">
-                </div>
+                    <canvas id="liveBarChart" style="max-height:300px;"></canvas>
-                <div class="card-body text-center">
-                    <img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid" style="max-height:300px;">
                 </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">
+                <div class="card-header bg-dark text-white">Location Distribution Pie Chart</div>
-                    Project Status Pie Chart
+                <div class="card-body">
-                </div>
+                    <canvas id="livePieChart" style="max-height:300px;"></canvas>
-                <div class="card-body text-center">
-                    <img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid" style="max-height:300px;">
                 </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 %}