updated new dashboard

public/js/pages/DashboardNew/DashboardNew.css

@@ -4,12 +4,6 @@
     margin: 0 auto;
 }
 
-.dashboard-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
 .filter-section,
 .campaign-section {
     width: 100%;
@@ -28,14 +22,29 @@
 }
 
 
+
 @media (min-width: 768px) {
-    .dashboard-content {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 1rem;
+    .dashboard-cards {
+        grid-template-columns: repeat(3, 1fr);
     }
 }
 
+@media (min-width: 1000px) {
+    .dashboard-cards {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (min-width: 1332px) {
+    .dashboard-cards {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+#app > div.card > div > div > div:nth-child(4) {
+    grid-template-columns: repeat(3, 1fr);
+}
+
 @media (max-width: 767px) {
     .filter-section,
     .campaign-section {
@@ -46,7 +55,6 @@
         grid-template-columns: repeat(2, 1fr);
     }
 
-
     .dashboard-data-selector {
         grid-template-columns: repeat(1, 1fr);
     }

public/js/pages/DashboardNew/DashboardNew.js

@@ -134,35 +134,35 @@ Vue.component('dashboard-new', {
               icon="fas fa-road"
               :text="dashboardData.baufortschritt_140 + ' / ' + dashboardData.order_actual_order"
               :subHeaders="[]"
-              color="#6c757d"
+              color="#28a745"
             />
             <tt-dashboard-display-card
               header="Installationspaket erhalten"
               icon="fas fa-box-open"
               :text="dashboardData.installationspaket_erhalten + ' / ' + dashboardData.order_efh"
               :subHeaders="[]"
-              color="#007bff"
+              color="#17a2b8"
             />
             <tt-dashboard-display-card
               header="Leerrohr im Haus"
               icon="fas fa-house-user"
               :text="dashboardData.lehrrohr_im_haus + ' / ' + dashboardData.order_efh"
               :subHeaders="[]"
-              color="#ffc107"
+              color="#dbab1a"
             />
             <tt-dashboard-display-card
               header="Inhauskabel verlegt EFH"
               icon="fas fa-plug"
               :text="dashboardData.inhouse_kabel_verlegt_efh + ' / ' + dashboardData.order_efh"
               :subHeaders="[]"
-              color="#28a745"
+              color="#007bff"
             />
             <tt-dashboard-display-card
               header="Inhauskabel verlegt MPH"
               icon="fas fa-building-user"
               :text="dashboardData.inhouse_kabel_verlegt_mph + ' / ' + dashboardData.order_mph"
               :subHeaders="[]"
-              color="#17a2b8"
+              color="#0bb36c"
             />
           </div>
           <hr>
@@ -173,37 +173,35 @@ Vue.component('dashboard-new', {
               icon="fas fa-tools"
               :text="dashboardData.installationsfortschritt_245 + ' / ' + dashboardData.order_actual_order"
               :subHeaders="[]"
-              color="#6c757d"
+              color="#28a745"
             />
             <tt-dashboard-display-card
               header="300 - ONT installiert"
               icon="fas fa-wifi"
               :text="dashboardData.ont_installiert_300 + ' / ' + dashboardData.order_actual_order"
               :subHeaders="[]"
-              color="#007bff"
+              color="#17a2b8"
             />
             <tt-dashboard-display-card
               header="350 - Vollanschluss dokumentiert (Vollanschluss)"
               icon="fas fa-file-alt"
               :text="dashboardData.vollanschluss_dokumentiert_350 + ' / ' + (parseInt(dashboardData.order_efh_vollanschluss) + parseInt(dashboardData.order_mph_vollanschluss))"
-              :subHeaders="[ 
-                '' // Add any additional info if needed.
-               ] "
-                color="#ffc107"
+              :subHeaders="[]"
+                color="#dbab1a"
             />
             <tt-dashboard-display-card
                 header="351 - Vorsorgeanschluss dokumentiert (Vorsorgeanschluss)"
                 icon="fas fa-file-alt"
                 :text="dashboardData.vorsorge_dokumentiert_351 + ' / ' + (parseInt(dashboardData.order_efh_vorsorge) + parseInt(dashboardData.order_mph_vorsorge))"
-                :subHeaders="[]"
-                color="#ffc107"
+                :subHeaders="['']"
+                color="#007bff"
             />
             <tt-dashboard-display-card
                 header="500 - Provider bestellt"
                 icon="fas fa-shopping-cart"
                 :text="dashboardData.provider_bestellt_500 + ' / ' + dashboardData.order_actual_order"
                 :subHeaders="[]"
-                color="#28a745"
+                color="#0bb36c"
             />
           </div>
         </div>