changes of ui mobile view of dashboard

This commit is contained in:
2026-01-13 15:22:53 +05:30
parent a73d8e5ed1
commit d46c7c0936
2 changed files with 68 additions and 60 deletions

View File

@@ -1,76 +1,84 @@
{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">Dashboard</h2>
<!-- Summary Cards -->
<div class="row mb-4">
<div class="col-md-4">
<div class="card text-white bg-primary shadow">
<div class="card-body">
<h5>Total Work</h5>
<h3>410</h3>
<div class="container-fluid px-2 px-md-4">
<h4 class="mb-3 text-center text-md-start">Dashboard</h4>
<!-- Summary Cards -->
<div class="row g-3 mb-4">
<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>Total Work</h6>
<h3 class="fw-bold">410</h3>
</div>
</div>
</div>
<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>Completed</h6>
<h3 class="fw-bold">265</h3>
</div>
</div>
</div>
<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">145</h3>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-success shadow">
<div class="card-body">
<h5>Completed</h5>
<h3>265</h3>
<!-- 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>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-warning shadow">
<div class="card-body">
<h5>Pending</h5>
<h3>145</h3>
<!-- 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>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="row g-4">
<!-- Bar Chart -->
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header bg-dark text-white">
Work Category Bar Chart
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ bar_chart }}" class="img-fluid">
<!-- 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>
<!-- Pie Chart -->
<div class="col-md-6">
<div class="card shadow-sm">
<div class="card-header bg-dark text-white">
Project Status Pie Chart
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ pie_chart }}" class="img-fluid">
</div>
</div>
</div>
<!-- Histogram -->
<div class="col-md-12">
<div class="card shadow-sm">
<div class="card-header bg-dark text-white">
Daily Work Histogram
</div>
<div class="card-body text-center">
<img src="data:image/png;base64,{{ histogram }}" class="img-fluid">
</div>
</div>
</div>
</div>
{% endblock %}