major fixes

project/assets/controllers/customer-show_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    allCardsDiv;
+    connect() {
+        this.allCardsDiv = $('#allCardsReport .report-one');
+    }
+
+    showModal(){
+        const reportId = event.params.reportid, date = event.params.date;
+        $("#showReportModal").find('.modal-body').html(
+            this.findReport(reportId)
+        );
+        $("#showReportModal").find('.modal-title').html(date)
+        $("#showReportModal").modal('show');
+    }
+
+    findReport(id) {
+        for (const allCardsDivKey of this.allCardsDiv) {
+            const tmp = $(allCardsDivKey);
+            if (tmp.data('report_id') === id) {
+                return tmp;
+            }
+        }
+    }
+}

project/assets/styles/main.less

@@ -5,50 +5,50 @@ body {
   .col {
     margin-bottom: 20px;
   }
-  .report-one {
-    .card-header {
-      display: flex;
-      .card-title {
-        margin: auto;
-      }
-    }
-    &.complete {
-      .card-header {
-        min-height: 52px;
-      }
-    }
-    margin-bottom: 10px;
-    .fa{
+}
+.report-one {
+  .card-header {
+    display: flex;
+    .card-title {
       margin: auto;
-      font-size: 20px;
-      padding: 5px 20px;
     }
-    .btn-group {
-      width: 100%;
+  }
+  &.complete {
+    .card-header {
+      min-height: 52px;
     }
-    .report-number {
-      position: absolute;
-      right: 3px;
-      width: 25px;
-      height: 25px;
-      .badge {
-        font-size: 15px;
-      }
+  }
+  margin-bottom: 10px;
+  .fa{
+    margin: auto;
+    font-size: 20px;
+    padding: 5px 20px;
+  }
+  .btn-group {
+    width: 100%;
+  }
+  .report-number {
+    position: absolute;
+    right: 3px;
+    width: 25px;
+    height: 25px;
+    .badge {
+      font-size: 15px;
     }
-    .report-mark-uncompleted {
-      width: 25px;
-      height: 25px;
-      cursor: pointer;
-      font-size: 12px;
-      position: absolute;
-      right: 2px;
-      top:26px;
-      .fa {
-        padding: 0;
-      }
-      .badge {
-        border: none;
-      }
+  }
+  .report-mark-uncompleted {
+    width: 25px;
+    height: 25px;
+    cursor: pointer;
+    font-size: 12px;
+    position: absolute;
+    right: 2px;
+    top:26px;
+    .fa {
+      padding: 0;
+    }
+    .badge {
+      border: none;
     }
   }
 }
@@ -66,3 +66,17 @@ a {
   top: 2px;
   right: 2px;
 }
+.card-footer {
+  .edit-client-group {
+    display: inline-flex;
+    margin: auto;
+    >div {
+      padding: 10px;
+    }
+  }
+}
+
+#allCardsReport{
+  display: none;
+  opacity: 0;
+}