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

@@ -45,6 +45,7 @@ public class DashboardService {
         LocalDateTime today = LocalDateTime.now().withHour(0).withMinute(0).withSecond(1);
         String startDate1 = today.format(formatter);
         String endDate1 = LocalDateTime.now().withHour(23).withMinute(59).withSecond(59).format(formatter);
+        String forPreviousDate = LocalDateTime.now().minusDays(1).withHour(23).withMinute(59).withSecond(59).format(formatter);
 
         //set inventory accounts
         List<InventoryAccount> inventoryAccounts = inventoryAccountDAO.findAll();
@@ -72,12 +73,14 @@ 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);
-            approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT",stitchingOutIds);
+            remaininfQcAlterPieces = stitchingOfflineItemDAO.findByQCOperationDateAndIds(null, forPreviousDate, "REJECT", stitchingItemIds);
+            approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingOutIds);
 
         }
 
@@ -87,12 +90,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, forPreviousDate, "ALTER", finishing);
         }
 
         //set packaging details
@@ -118,7 +123,7 @@ public class DashboardService {
             efficiency = (float) approvedStitchingOfflineItems / shiftTargetMinutesWise;
         }
 
-        progress.put("Stitching", (float) approvedStitchingOfflineItems + qcReject + approvedStitchingOfflineItemsThenReject);
+        progress.put("Stitching", (float) approvedStitchingOfflineItems + qcReject);
         progress.put("totalWips", (float) stitchingItemIds.size() - qcReject);
         progress.put("Alteration", (float) qcReject + approvedStitchingOfflineItemsThenReject);
 
@@ -128,8 +133,11 @@ 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);
+        progress.put("Efficiency", efficiency);
         return progress;
     }
 

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

@@ -532,6 +532,7 @@ public class InventoryService {
                             long fromAccount = lastInvTransaction.getAccountId();
                             createInventoryTransactionLeg(transaction, preCreatedItem, fromAccount, InventoryTransactionLeg.Type.OUT.name(), InventoryArtifactType.FINISHED_ITEM.name());
                         }
+                        stitchingOfflineItem.setIsQa(true);
                         preCreatedItem.setIsQa(true);
                         finishedItemsForUlter.add(preCreatedItem);
                         // create IN in finishing Account Finished Item
@@ -543,8 +544,8 @@ public class InventoryService {
                         preCreatedItem.setIsQa(false);
                         finishedItemsForUlter.add(preCreatedItem);
                     }
-                }
                     stitchingOfflineItem.setIsQa(false);
+                }
                 stitchingOfflineItem.setQaStatus(qaStatus);
                 stitchingOfflineItem.setQcDoneAt(LocalDateTime.now());
                 updatedStitchedItems.add(stitchingOfflineItem);

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

@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
         return;
     }
 
-    function createGaugeChart(progress, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
+    function createGaugeChart(progress, color, divId, title, height, width, fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
         Highcharts.chart(divId, {
             chart: {
                 type: 'solidgauge',
@@ -54,12 +54,12 @@ document.addEventListener("DOMContentLoaded", function () {
                     style: {
                         fontSize: fontSize + 'px',
                         fontWeight: 'bold',
-                        color:fontColor
+                        color: fontColor
                     },
                     zIndex: 10
                 },
                 tooltip: {
-                    pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:'+actual
+                    pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:' + actual
                 },
                 color: color,
                 showInLegend: false
@@ -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;
@@ -94,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 labels: {
                     rotation: -45,
                     style: {
-                        fontSize: 10-fontSize,
+                        fontSize: 10 - fontSize,
                         fontWeight: 'bold'
                     }
                 }
@@ -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,20 +204,25 @@ 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) {
+
+    function createSingleBarChart(divId, height, width, title, Heading, Data, dates, fontSize, maxValue) {
         if (!document.getElementById(divId)) {
             return;
         }
@@ -210,7 +247,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 labels: {
                     rotation: -45,
                     style: {
-                           fontSize: 10-fontSize,
+                        fontSize: 10 - fontSize,
                         fontWeight: 'bold'
                     }
                 }
@@ -235,7 +272,7 @@ document.addEventListener("DOMContentLoaded", function () {
             },
             legend: {
                 itemStyle: {
-                       fontSize: 10-fontSize,
+                    fontSize: 10 - fontSize,
                     fontWeight: 'bold'
                 }
             },
@@ -250,6 +287,7 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     initializeGauges();
+
     function initializeGauges() {
 
         const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
@@ -296,16 +334,16 @@ document.addEventListener("DOMContentLoaded", function () {
             const maxValue = Number(div.getAttribute('data-totalProduction'));
             const aHeading = 'Cutting';
             const aData = JSON.parse(div.getAttribute('data-cutting'));
-           const bHeading='Stitching';
+            const bHeading = 'Stitching';
-           const bData =JSON.parse(div.getAttribute('data-stitching'));
+            const bData = JSON.parse(div.getAttribute('data-stitching'));
-           const cHeading='End Line Quality Checking';
+            const cHeading = 'End Line Quality Checking';
-           const cData =JSON.parse(div.getAttribute('data-quality'));
+            const cData = JSON.parse(div.getAttribute('data-quality'));
-           const dHeading="Finish Items";
+            const dHeading = "Finish Items";
-           const dData =JSON.parse(div.getAttribute('data-finishing'));
+            const dData = JSON.parse(div.getAttribute('data-finishing'));
             const dates = div.getAttribute('data-dates');
             const datesArray = dates.split(',');
             const divId = div.id;
-           createBarChart( divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
+            createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
         });
 
         const dashboardBarChart = document.querySelectorAll('.dashboardBarChart'); // fixed name
@@ -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
             );
         });
@@ -364,7 +404,7 @@ document.addEventListener("DOMContentLoaded", function () {
             const dates = div.getAttribute('data-dates');
             const datesArray = dates.split(',');
             const divId = div.id;
-           createSingleBarChart( divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
+            createSingleBarChart(divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
         });
     }
 });

src/main/resources/templates/_fragments.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
-    <head th:fragment="head (title)">
+<head th:fragment="head (title)">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="refresh" content="60" th:if="${refresh == true}">
@@ -32,10 +32,10 @@
             animation: blinker 1s linear infinite;
         }
     </style>
-    </head>
+</head>
-    <body>
+<body>
 
-        <header class="row page-header font-sm" th:fragment="page-header">
+<header class="row page-header font-sm" th:fragment="page-header">
     <!--<editor-fold desc="Description">-->
     <div class="col-sm">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
@@ -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"
@@ -117,15 +120,15 @@
             </div>
         </nav>
         <!--  second level purchase Order-->
-<!--                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
+        <!--                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
-<!--                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
+        <!--                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
-<!--                    <ul class="navbar-nav">-->
+        <!--                    <ul class="navbar-nav">-->
-<!--                        <li class="nav-item"-->
+        <!--                        <li class="nav-item"-->
-<!--                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
+        <!--                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
-<!--                            <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
+        <!--                            <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
-<!--                        </li>-->
+        <!--                        </li>-->
-<!--                    </ul>-->
+        <!--                    </ul>-->
-<!--                </nav>-->
+        <!--                </nav>-->
         <!--  second level job cards-->
         <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
              th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
@@ -215,10 +218,10 @@
                     th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}">
                     <a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
                 </li>
-<!--                        <li class="nav-item"-->
+                <!--                        <li class="nav-item"-->
-<!--                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
+                <!--                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
-<!--                            <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
+                <!--                            <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
-<!--                        </li>-->
+                <!--                        </li>-->
             </ul>
         </nav>
         <!--  second level stitching -->
@@ -254,9 +257,9 @@
             </ul>
         </nav>
     </div>
-        </header>
+</header>
-        <!-- table loading skeleton -->
+<!-- table loading skeleton -->
-        <div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
+<div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
     <div class="d-flex justify-content-between">
         <div>
             <div class="skeleton-box" style="width:35px;"></div>
@@ -273,11 +276,11 @@
             <div class="skeleton-box"></div>
         </div>
     </div>
-        </div>
+</div>
 
-        <div th:fragment="page-footer-scripts">
+<div th:fragment="page-footer-scripts">
     <script th:src="@{/js/vendor/lazyload-db.js}"></script>
     <script th:src="@{/js/main.js}"></script>
-        </div>
+</div>
-    </body>
+</body>
 </html>

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>
@@ -108,7 +109,7 @@
                         <div class="ps-2 text-center">
                             <h1 class="fw-bold m-0"
                                 th:text="${phases.get('finishing')?.intValue() ?: 0} + ' Pcs'"></h1>
-                            <h4 class="pt-2 fw-bold text-uppercase m-0" >Finishing</h4>
+                            <h4 class="pt-2 fw-bold text-uppercase m-0">Finishing</h4>
                         </div>
                     </div>
                     <div class="card-body p-0 text-center d-flex justify-content-center">
@@ -148,8 +149,60 @@
             </div>
         </div>
     </main>
-</div>
+    <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>