add second screen of dashboard

src/main/java/com/utopiaindustries/service/DashboardService.java

@@ -72,11 +72,13 @@ public class DashboardService {
 
         //set stitching related details
         Long approvedStitchingOfflineItems = 0L;
+        Long remaininfQcAlterPieces = 0L;
         Long approvedStitchingOfflineItemsThenReject = 0L;
         long qcReject = 0L;
         if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) {
             approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED");
             qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds);
+            remaininfQcAlterPieces = stitchingOfflineItemDAO.findByQCOperationDateAndIds(null, endDate1, "REJECT", stitchingItemIds);
             approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingOutIds);
 
         }
@@ -87,12 +89,14 @@ public class DashboardService {
         Long washFinishedItem = 0L;
         Long approved = 0L;
         Long operationNotPerformed = 0L;
+        Long remainingAlterationPieceFinish = 0L;
         if (finishing != null && !finishing.isEmpty()) {
             approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing);
             operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing);
             rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing);
             washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing);
             alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing);
+            remainingAlterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(null, endDate1, "ALTER", finishing);
         }
 
         //set packaging details
@@ -128,6 +132,9 @@ public class DashboardService {
         progress.put("wash", (float) washFinishedItem);
 
         progress.put("packaging", (float) packagingItems);
+        progress.put("totalPackaging", (float) packagingItemIDs.size());
+        progress.put("remainingFinishAlter", (float) remainingAlterationPieceFinish);
+        progress.put("remainingQCAlter", (float) remaininfQcAlterPieces);
 
         progress.put("Efficiency", efficiency);
         return progress;

src/main/resources/static/js/charts.js

@@ -69,6 +69,7 @@ document.addEventListener("DOMContentLoaded", function () {
             }
         });
     }
+
     function createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, dates, fontSize, maxValue) {
         if (!document.getElementById(divId)) {
             return;
@@ -136,35 +137,66 @@ document.addEventListener("DOMContentLoaded", function () {
             }]
         });
     }
- function dashboardChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData,dates, fontSize, maxValue) {
+
-        if (!document.getElementById(divId)) {
+    function dashboardChart(
-            return;
+        divId, height, width, title,
-        }
+        aHeading, aData, bHeading, bData, cHeading, cData,
+        dates, fontSize, fontSizeText, maxValue
+    ) {
+        if (!document.getElementById(divId)) return;
+
         Highcharts.chart(divId, {
             chart: {
                 type: 'bar',
+                height: height,
+                width: width
             },
             title: {
-                    text: title
+                text: title,
+                style: {
+                    fontSize: fontSize
+                }
             },
             xAxis: {
+                categories: dates,
+                labels: {
+                    enabled: false
+                },
+                title: {
+                    text: null
+                },
+                lineWidth: 2
             },
             yAxis: {
                 max: maxValue,
                 min: 0,
                 title: {
-                        align: 'high'
+                    text: null,
+                    align: 'high',
+                    style: {
+                        fontSize: fontSizeText
+                    }
                 },
                 labels: {
-                        overflow: 'justify'
+                    style: {
+                        fontSize: fontSizeText
+                    }
                 },
                 gridLineWidth: 0
             },
+            legend: {
+                itemStyle: {
+                    fontSize: fontSizeText
+                }
+            },
             plotOptions: {
                 bar: {
                     borderRadius: '50%',
                     dataLabels: {
-                            enabled: true
+                        enabled: true,
+                        style: {
+                            fontSize: fontSizeText
+                        }
                     },
                     groupPadding: 0.1
                 }
@@ -172,19 +204,24 @@ document.addEventListener("DOMContentLoaded", function () {
             credits: {
                 enabled: false
             },
-                series: [{
+            series: [
+                {
                     name: aHeading,
                     data: aData
-                }, {
+                },
+                {
                     name: bHeading,
                     data: bData
-                }, {
+                },
+                {
                     name: cHeading,
                     data: cData
-                }]
+                }
+            ]
         });
     }
 
+
     function createSingleBarChart(divId, height, width, title, Heading, Data, dates, fontSize, maxValue) {
         if (!document.getElementById(divId)) {
             return;
@@ -250,6 +287,7 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     initializeGauges();
+
     function initializeGauges() {
 
         const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
@@ -314,25 +352,26 @@ document.addEventListener("DOMContentLoaded", function () {
             const height = div.getAttribute('data-height');
             const width = div.getAttribute('data-width');
             const fontSize = div.getAttribute('data-fontSize');
+
             const rawValue = div.getAttribute('data-totalProduction') || "0";
             const cleanValue = rawValue.replace(/[^0-9.-]+/g, '');
             const maxValue = Number(cleanValue);
 
-            const cHeading = 'Achieved';
-            const cDataString = div.getAttribute('data-achieved');
-            const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
-            const cData = [Number(cleanValueAchieved)];
-
             const aHeading = 'Stitching';
             const aDataString = div.getAttribute('data-stitching');
             const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, '');
             const aData = [Number(cleanValueStitch)];
 
-            const bHeading = 'Packaging';
+            const bHeading = 'Finishing';
-            const bDataString =div.getAttribute('data-packaging');
+            const bDataString = div.getAttribute('data-finishing');
             const packaging = bDataString.replace(/[^0-9.-]+/g, '');
             const bData = [Number(packaging)];
 
+            const cHeading = 'Packaging';
+            const cDataString = div.getAttribute('data-packaging');
+            const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
+            const cData = [Number(cleanValueAchieved)];
+
             const dates = [div.getAttribute('data-dates')];
             const divId = div.id;
             dashboardChart(
@@ -348,6 +387,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 cData,
                 dates,
                 fontSize,
+                '20',
                 maxValue
             );
         });

src/main/resources/templates/_fragments.html

@@ -45,11 +45,13 @@
             <ul class="navbar-nav">
                 <li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')">
                     <a th:href="@{/purchase-order/}" class="nav-link"
-                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase Order</a>
+                       th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase
+                        Order</a>
                 </li>
                 <li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
                     <a th:href="@{/job-cards/}" class="nav-link"
-                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job Cards</a>
+                       th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job
+                        Cards</a>
                 </li>
                 <li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
                     <a th:href="@{/cutting/}" class="nav-link"
@@ -61,7 +63,8 @@
                 </li>
                 <li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
                     <a th:href="@{/quality-control/}" class="nav-link"
-                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality Control</a>
+                       th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality
+                        Control</a>
                 </li>
                 <li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
                     <a th:href="@{/finishing/}" class="nav-link"

src/main/resources/templates/dashboard.html

@@ -19,7 +19,7 @@
         </div>
     </header>
 
-    <main class="container-fluid main-content">
+    <main id="main1" class="container-fluid main-content">
         <div class="row page-main g-4 p-3">
             <div class="col-lg-6">
                 <!-- Title Row -->
@@ -71,7 +71,8 @@
                         <div class="px-4" style="height: 150px">
                             <h1 class="card-text text-danger fw-bold blink" style="font-size: 4rem;"
                                 th:text="${(phases.get('Alteration') != null ? phases.get('Alteration').intValue() : 0) + ' Pcs'}"></h1>
-                            <h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">ALTERATION</h2>
+                            <h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">
+                                ALTERATION</h2>
 
                         </div>
                     </div>
@@ -148,8 +149,60 @@
             </div>
         </div>
     </main>
+    <main id="main2" class="container-fluid main-content" style="display: none;">
+        <div class="row page-main g-4 p-3">
+            <div class="col-lg-12 d-flex border border-black-50">
+                <div id="dashboardBarChart" class="dashboardBarChart w-100"
+                     style="min-height: 476px;"
+                     th:data-title="${detail.get('articleName')} + ' (' + ${date} + ')'"
+                     th:data-dates="${date}"
+                     th:data-stitching="${phases.get('Stitching')?.intValue() ?: 0}"
+                     th:data-finishing="${phases.get('finishing')?.intValue() ?: 0}"
+                     th:data-packaging="${phases.get('packaging')?.intValue() ?: 0}"
+                     th:data-totalProduction="${detail.get('Shift Target')}"
+                     th:data-fontSize="35">
+                </div>
+            </div>
         </div>
 
+        <div class="row page-main g-4 p-3">
+            <div class="col-lg-4">
+                <div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
+                     style="background-color: #516ec4;">
+                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
+                        th:text="${phases.get('remainingQCAlter')?.intValue()}">0%</h1>
+                    <h4 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining QC Alter Pcs</h4>
+                </div>
+            </div>
+
+            <div class="col-lg-4">
+                <div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
+                     style="background-color: #72788a;">
+                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
+                        th:text="${phases.get('remainingFinishAlter')?.intValue()}">0</h1>
+                    <h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining Finish Alter Pcs </h1>
+                </div>
+            </div>
+
+            <div class="col-lg-4">
+                <div class="h-100 border border-black-50 p-5 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
+                     style="background-color: #4bb85f;">
+                    <h1 class="fw-bold pt-5 pb-2" style="font-size: 7rem;"
+                        th:text="${phases.get('totalPackaging')?.intValue()}">0</h1>
+                    <h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">OverAll Packing</h1>
+                </div>
+            </div>
+        </div>
+
+
+    </main>
+</div>
+<script>
+    setTimeout(function () {
+        document.getElementById("main1").style.display = "none";
+        document.getElementById("main2").style.display = "block";
+    }, 30000);
+</script>
 <script th:src="@{/js/charts.js}"></script>
 </body>
 </html>