From ecde4b3da0cc243b41982720c55f94dcc4ec276b Mon Sep 17 00:00:00 2001
From: Pravin030399 <irpravin@gmail.com>
Date: Sat, 25 May 2024 12:00:34 +0800
Subject: [PATCH] add css and improve UI

---
 dashboard/static/css/dashboard.css | 41 ++++++++++++++++++++++++++++++
 dashboard/templates/dashboard.html | 16 +++++++-----
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/dashboard/static/css/dashboard.css b/dashboard/static/css/dashboard.css
index 4958490..9749eed 100644
--- a/dashboard/static/css/dashboard.css
+++ b/dashboard/static/css/dashboard.css
@@ -1,3 +1,44 @@
+/* dashboard.css */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.card {
+    background-color: #191313;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin: 3.5 auto;
+    background-color: #171111;
+    background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
+    border: 1px solid #e0e0e0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+#popularItems {
+    list-style: none;
+    padding: 0;
+}
+
+#popularItems li {
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 16px;
+    color: #555555;
+}
+
+#popularItems li:last-child {
+    border-bottom: none;
+}
+
 .dashboard-container {
     padding: 20px;
     background-color: #f5f5f5;
diff --git a/dashboard/templates/dashboard.html b/dashboard/templates/dashboard.html
index b8a12a2..ae12061 100644
--- a/dashboard/templates/dashboard.html
+++ b/dashboard/templates/dashboard.html
@@ -2,6 +2,10 @@
 
 {% load static %}
 
+{% block css_files %}
+<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
+{% endblock %}
+
 {% block content %}
 <div class="container" style="padding: 20px; background-color: #f5f5f5;">
     <div class="section" style="margin-bottom: 20px;">
@@ -10,29 +14,29 @@ <h1 style="font-size: 24px; color: #333;">Dashboard</h1>
     </div>
 
     <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
-        <div
+        <div class="section card" id="totalOrdersSection"
             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
+        <div class="section card" id="acceptedOrdersSection"
             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
+        <div class="section card" id="rejectedOrdersSection"
             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
+        <div class="section card" id="revenueSection"
             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"
+    <div class="section card" id="popularItemsSection"
         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;">
@@ -49,7 +53,7 @@ <h4 style="margin-bottom: 10px; font-size: 18px; color: #333;">Popular Menu Item
     </div>
 
     <!-- Revenue Chart Section -->
-    <div class="section"
+    <div class="section card" id="revenueChartSection"
         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">