Add Scanned Tickets progress bar to event overview page

src/main/resources/templates/admin/events/overview.html

@@ -45,12 +45,34 @@ <h1>Ticket [[${event.getTitle()}]]</h1>
 
             <div th:replace="fragments/messages :: messages"></div>
 
-            <div class="row  my-2">
+            <div class="row mb-4">
                 <div class="col-auto">
                     <a th:href="@{'/administrator/events/overview/csv/' + ${event.getKey()} + '/'}" class="btn btn-secondary btn-block">export to csv</a>
                 </div>
             </div>
 
+            <div class="row">
+                <div class="col">
+                    <div class="card mb-4">
+                        <h6 class="card-header">Scanned Tickets</h6>
+                        <div class="card-body text-primary">
+                            <h4 class="card-title">
+                                [[${attendance.getScannedCount()}]] <small>out of [[${attendance.getTicketsCount()}]]</small>
+                            </h4>
+                            <div class="progress mb-2">
+                                <div class="progress-bar" role="progressbar"
+                                     th:aria-valuenow="${attendance.getPercentageScanned()}"
+                                     aria-valuemin="0" aria-valuemax="100"
+                                     th:style="'width: ' + ${attendance.getPercentageScanned()} + '%;'"
+                                     th:text="${attendance.getPercentageScanned()} + '%'">
+                                    59%
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="table-responsive">
                 <table id="soldProductTable" class="table table-hover">
                     <thead class="thead-dark bg-primary">