Index: templates/genres_per_customer.html
===================================================================
--- templates/genres_per_customer.html	(revision 17ed1daeee62a5359f4cac763228db2fbc1287c1)
+++ templates/genres_per_customer.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
@@ -21,7 +21,7 @@
 </form>
 
-<h4>First Name&nbsp;&nbsp;Last Name&nbsp;&nbsp;-&nbsp;&nbsp;Genre - Num of Tracks</h4>
 
 <ol>
+    <h4>First Name&nbsp;&nbsp;Last Name&nbsp;&nbsp;-&nbsp;&nbsp;Genre - Num of Tracks</h4>
     {% for row in data %}
         <li>
Index: templates/invoices_per_customer_after_date.html
===================================================================
--- templates/invoices_per_customer_after_date.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
+++ templates/invoices_per_customer_after_date.html	(revision 611686e81670ba9e8f1d5a0aaffcb2d604f86584)
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"
+            crossorigin="anonymous"></script>
+    <title>Number of Tracks per Customer</title>
+</head>
+<body class="bg-light">
+
+<div class="container mt-5">
+    <h1 class="mb-4 text-center">Invoice Created by Customer</h1>
+
+    <form method="GET" action="" class="row g-3 mb-4">
+        <div class="col-md-4">
+            <label for="customer_id" class="form-label">Select Customer:</label>
+            <select name="customer_id" id="customer_id" class="form-select">
+                <option value="">All Customers</option>
+                {% for customer in customers %}
+                    <option value="{{ customer.customer_id }}"
+                            {% if request.GET.customer_id == customer.0|stringformat:'s' %}selected{% endif %}>
+                        {{ customer.first_name }} {{ customer.last_name }}
+                    </option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="col-md-4">
+            <label for="invoice_date" class="form-label">Select Date:</label>
+            <input type="date" id="invoice_date" name="invoice_date" value="{{ request.GET.invoice_date }}"
+                   class="form-control">
+        </div>
+
+        <div class="col-md-4 d-flex align-items-end">
+            <button type="submit" class="btn btn-primary w-100">Filter</button>
+        </div>
+    </form>
+
+    {% if not selected_customer_id %}
+        <div class="alert alert-warning" role="alert">
+            Please select a customer to see the results.
+        </div>
+    {% elif not data %}
+        <div class="alert alert-danger" role="alert">
+            No invoice found.
+        </div>
+    {% else %}
+        <div class="container">
+            <div class="row col-3 justify-content-between mb-3">
+                <div class="col-6 font-weight-bold">
+                    Date of Invoice
+                </div>
+                <div class="col-6 text-end font-weight-bold px-4">
+                    Price
+                </div>
+            </div>
+            <ul class="row list-group col-3">
+                {% for row in data %}
+                    <li class="list-group-item d-flex justify-content-between align-items-center">
+                        <div class="col-6">
+                            {{ row.invoice_date }}
+                        </div>
+                        <div class="col-6 text-end ">
+                            <span class="badge bg-success rounded-pill">${{ row.total }}</span>
+                        </div>
+                    </li>
+                {% empty %}
+                    <li class="list-group-item">No invoices found for this customer and date.</li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="col-3 my-3">
+            <div class="alert alert-success" role="alert">
+                Total money spend: ${{ total_sum }}
+            </div>
+        </div>
+    {% endif %}
+</div>
+
+</body>
+</html>
