Modified the table for order view. Added css accordingly.

blizzardblast/static/css/styles.css

@@ -127,7 +127,7 @@ header {
     margin-left: 5rem;
 }
 
-/* ======== ORDER.HTML ============ */
+/* ======== ORDER.HTML and RECEIPT.HTML ============ */
 .button-container {
     display: flex;
     justify-content: space-evenly;
@@ -152,13 +152,6 @@ header {
     justify-content: center;
 }
 
-#filter-area>button {
-    padding: 0.5rem 7rem;
-    background-color: #BFCDE0;
-    color: #3B3355;
-    border-radius: 2rem;
-}
-
 .search-bar {
     border:none;
     padding: 12px;
@@ -169,8 +162,8 @@ header {
     border: none;
     background-color: #BFCDE0;
     color: #3B3355;
-    margin: 0.3rem 4rem;
-    padding: 0.5rem 8rem;
+    margin: 0.3rem;
+    padding: 0.5rem;
     border-radius: 2rem;
 }
 
@@ -194,22 +187,49 @@ header {
     padding: 10px;
 }
 
-#CRUD-features>button {
+.crud-button, .filter-button {
     border: none;
     background-color: #BFCDE0;
     color: #3B3355;
-    margin: 0.3rem 4rem;
-    padding: 0.5rem 8rem;
+    margin: 0.3rem;
+    padding: 0.5rem;
     border-radius: 2rem;
 }
 
-#CRUD-features>button:hover {
+.filter-button:hover {
     text-decoration: underline;
     cursor: pointer;
     background-color: #3B3355;
     color:#FEFCFD;
 }
 
+.crud-button:hover {
+    text-decoration: underline;
+    cursor: pointer;
+    background-color: #3B3355;
+    color:#FEFCFD;
+}
+
+#order-table, #receipt-table {
+    display: flex;
+    justify-content: center;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+table, th {
+    border: 1px solid black;
+    padding: 10px;
+    border-collapse: separate;
+}
+
 
 /* ============ REPORT.HTML =============== */
 #report-area {

blizzardblast/templates/order.html

@@ -9,20 +9,56 @@
 {% block content %}
 
 <h1 class='view-title'>Order</h1>
-<!-- SEARCH BOX -->
+<!-- SEARCH AREA-->
 <div id="filter-area">
-    <select name="search-filter" id="search-filter">
-        <option selected="selected">Filter</option>
-        <option value="total-sales-monthly">Total Monthly Sales</option>
-        <option value="Receipt">Individual Receipt</option>
-    </select>
+    <button class="filter-button"><a href="{% url 'order' %}">Order Slip</a></button>
+    <button class="filter-button"><a href="{% url 'receipt' %}">Receipt</a></button>
+    
     <input class="search-bar" size=60 type="text" placeholder="Search..">
     <button class="search-button">Search</button>
 </div>
 
 <div id="CRUD-features">
-    <button id="addorder">Add Order</button>
-    <button id="deleteorder">Delete Order</button>
-    <button id="update">Refresh</button>
+    <button class="crud-button">Add Order</button>
+    <button class="crud-button">Delete Order</button>
+    <button class="crud-button">Refresh</button>
+</div>
+
+<div id="order-table">
+    <table>
+        <!-- TABLE HEADER -->
+        <tr>
+            <th>customer_no</th>
+            <th>customer_name</th>
+            <th>date</th>
+            <th>size</th>
+            <th>base_receipe</th>
+            <th>add_on_qty</th>
+            <th>add_on_name</th>
+        </tr>
+        
+        <!-- TABLE ROW WITH INFO -->
+        <tr>
+            <th>customer_no</th>
+            <th>customer_name</th>
+            <th>date</th>
+            <th>size</th>
+            <th>base_receipe</th>
+            <th>add_on_qty</th>
+            <th>add_on_name</th>
+        </tr>
+
+        <!-- TABLE ROW WITHOUT INFO -->
+        <tr>
+            <th>customer_no</th>
+            <th>customer_name</th>
+            <th>date</th>
+            <th>size</th>
+            <th>base_receipe</th>
+            <th>add_on_qty</th>
+            <th>add_on_name</th>
+        </tr>
+
+    </table>
 </div>
 {% endblock %}