Skip to content
This repository has been archived by the owner on Sep 9, 2024. It is now read-only.

Commit

Permalink
Improve Admin dashboard user interface (#31)
Browse files Browse the repository at this point in the history 
* Add new message functionality

* Address pull request review comments

---------

Co-authored-by: Afrar Malakooth <mmafrar@gmail.com>
  • Loading branch information
@Maimymai @mmafrar
Maimymai and mmafrar authored May 27, 2024
1 parent ef3639a commit 0b05cc7
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 88 deletions.
63 changes: 63 additions & 0 deletions dashboard/static/css/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
.dashboard-container {
padding: 20px;
background-color: #f5f5f5;
}

.dashboard-header {
margin-bottom: 20px;
}

.dashboard-stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

.stat-block {
background: white;
border-radius: 8px;
padding: 20px;
text-align: center;
flex: 1;
margin: 0 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-block h4 {
margin-bottom: 10px;
font-size: 16px;
color: #333;
}

.stat-block p {
font-size: 24px;
color: #333;
}

.dashboard-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dashboard-section h4 {
margin-bottom: 10px;
font-size: 18px;
color: #333;
}

#popularItems {
list-style: none;
padding: 0;
}

#popularItems li {
margin-bottom: 5px;
}

.chart-container {
position: relative;
height: 600px;
}
11 changes: 1 addition & 10 deletions dashboard/static/js/dashboard-chart.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@

// Dummy data for demonstration purposes
const totalOrders = 100;
const acceptedOrders = 90;
const rejectedOrders = 10;
const totalRevenue = 5000.00;
const popularItems = ['TUNA SAN', 'BERRY GRAPEFUL', 'PEANUT BUTTER COCONUT OATMEAL']; // Dummy popular items

const monthlyRevenueData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
Expand All @@ -22,14 +21,6 @@ document.getElementById('acceptedOrders').innerText = acceptedOrders;
document.getElementById('rejectedOrders').innerText = rejectedOrders;
document.getElementById('totalRevenue').innerText = totalRevenue.toFixed(2);

// Populate popular items
const popularItemsList = document.getElementById('popularItems');
popularItems.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
popularItemsList.appendChild(li);
});

// Render revenue chart
const ctx = document.getElementById('revenueChart').getContext('2d');
const revenueChart = new Chart(ctx, {
Expand Down
91 changes: 49 additions & 42 deletions dashboard/templates/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,64 @@
{% load static %}

{% block content %}
<div class="container">
<div class="section">
<h4 style="color: black;">Total Orders</h4>
<p>
Total number of orders: <span id="totalOrders">0</span>
</p>
<div class="container" style="padding: 20px; background-color: #f5f5f5;">
<div class="section" style="margin-bottom: 20px;">
<h1 style="font-size: 24px; color: #333;">Dashboard</h1>
<p style="color: #555;">Hi, Admin. Welcome back!</p>
</div>

<div class="section">
<h4>Total Accepted Orders</h4>
<p>
Total number of accepted orders: <span id="acceptedOrders">0</span>
</p>
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<div
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Orders</h4>
<p style="font-size: 24px; color: #333;"><span id="totalOrders">0</span></p>
</div>
<div
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Accepted</h4>
<p style="font-size: 24px; color: #333;"><span id="acceptedOrders">0</span></p>
</div>
<div
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Rejected</h4>
<p style="font-size: 24px; color: #333;"><span id="rejectedOrders">0</span></p>
</div>
<div
style="background: white; border-radius: 8px; padding: 20px; text-align: center; flex: 1; margin: 0 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 16px; color: #333;">Total Revenue</h4>
<p style="font-size: 24px; color: #333;">RM <span id="totalRevenue">0.00</span></p>
</div>
</div>

<div class="section">
<h4>Total Rejected Orders</h4>
<p>
Total number of rejected orders: <span id="rejectedOrders">0</span>
</p>
<div class="section"
style="background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Popular Menu Items</h4>
<ul id="popularItems" style="list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px;">
<li
style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
TUNA SAN</li>
<li
style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
BERRY GRAPEFUL</li>
<li
style="flex: 1 1 calc(33.333% - 10px); background: #f9f9f9; border-radius: 8px; padding: 10px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
PEANUT BUTTER COCONUT OATMEAL</li>
</ul>
</div>

<div class="section">
<h4>Total Revenue</h4>
<p>
Total revenue: RM
<span id="totalRevenue">0.00</span>
</p>
<!-- Revenue Chart Section -->
<div class="section"
style="background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Revenue Chart (Monthly)</h4>
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>

<div class="section">
<h4>Popular Menu Items</h4>
<ul id="popularItems">
<!-- Populate with popular menu items -->
<li>TUNA SAN</li>
<li>BERRY GRAPEFUL</li>
<li>EANUT BUTTER COCONUT OATMEAL</li>
<!-- Add more items here -->
</ul>
</div>
<div class="section">
<h4>Revenue Chart (Monthly)</h4>
<div class="chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
<!-- End Revenue Chart Section -->
</div>
{% endblock %}

{% block script %}

<script src="{% static 'js/chart.js' %}"></script>
<script src="{% static 'js/dashboard-chart.js' %}"></script>
{% endblock %}
{% endblock %}
54 changes: 18 additions & 36 deletions static/assets/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,29 @@ body {
margin: 0;
padding: 0;
color: black;
background-color: #fff; /* Set background color to white */
}
header {
background-color: #333; /* Dark gray background for the header */
background-color: #fff;
/* Set background color to white */
}

header {
background-color: #333;
/* Dark gray background for the header */
color: #fff;
padding: 20px;
text-align: center;
}
.container {
}

.container {
margin: 100px;
}
.section {
}

.section {
margin-bottom: 40px;
background-color: #f2f2f2;
background-color: #f2f2f2;
padding: 10px;
}
.chart-container {
}

.chart-container {
width: 80%;
margin: auto;
}
canvas {
display: block;
margin: auto;
}

/* h4 {
border-bottom: 1px solid black;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 8px;
text-align: left;
}
th {
background-color: black;
color: white;
} */
}

0 comments on commit 0b05cc7

Please sign in to comment.