UIND
/
cut-to-pack-service
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add second screen of dashboard

qa-report
usama.jameel 2025-05-23 17:30:47 +05:00
parent f365e30c3b
commit a11e150a42
4 changed files with 562 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main/java/com/utopiaindustries/service/DashboardService.java
View File

@ -72,12 +72,14 @@ public class DashboardService {
//set stitching related details //set stitching related details
Long approvedStitchingOfflineItems = 0L; Long approvedStitchingOfflineItems = 0L;
Long remaininfQcAlterPieces = 0L;
Long approvedStitchingOfflineItemsThenReject = 0L; Long approvedStitchingOfflineItemsThenReject = 0L;
long qcReject = 0L; long qcReject = 0L;
if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) { if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) {
approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED"); approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED");
qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds); qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds);
approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT",stitchingOutIds); 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 washFinishedItem = 0L;
Long approved = 0L; Long approved = 0L;
Long operationNotPerformed = 0L; Long operationNotPerformed = 0L;
Long remainingAlterationPieceFinish = 0L;
if (finishing != null && !finishing.isEmpty()) { if (finishing != null && !finishing.isEmpty()) {
approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing); approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing);
operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing); operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing);
rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing); rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing);
washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing); washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing);
alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing); alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing);
remainingAlterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(null, endDate1, "ALTER", finishing);
} }
//set packaging details //set packaging details
@ -128,8 +132,11 @@ public class DashboardService {
progress.put("wash", (float) washFinishedItem); progress.put("wash", (float) washFinishedItem);
progress.put("packaging", (float) packagingItems); 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; return progress;
} }

408
src/main/resources/static/js/charts.js
View File

@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
return; 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, { Highcharts.chart(divId, {
chart: { chart: {
type: 'solidgauge', type: 'solidgauge',
@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
name: 'Percentage', name: 'Percentage',
data: [progress], data: [progress],
dataLabels: { dataLabels: {
format: '{y}% ', format: '{y}% ',
y: fontYAxis, y: fontYAxis,
x: fontXAxis, x: fontXAxis,
borderWidth: 0, borderWidth: 0,
@ -54,12 +54,12 @@ document.addEventListener("DOMContentLoaded", function () {
style: { style: {
fontSize: fontSize + 'px', fontSize: fontSize + 'px',
fontWeight: 'bold', fontWeight: 'bold',
color:fontColor color: fontColor
}, },
zIndex: 10 zIndex: 10
}, },
tooltip: { 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, color: color,
showInLegend: false 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) { function createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, dates, fontSize, maxValue) {
if (!document.getElementById(divId)) { if (!document.getElementById(divId)) {
return; return;
@ -94,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
labels: { labels: {
rotation: -45, rotation: -45,
style: { style: {
fontSize: 10-fontSize, fontSize: 10 - fontSize,
fontWeight: 'bold' fontWeight: 'bold'
} }
} }
@ -136,177 +137,214 @@ document.addEventListener("DOMContentLoaded", function () {
}] }]
}); });
} }
function dashboardChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData,dates, fontSize, maxValue) {
function dashboardChart(
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,
style: {
fontSize: fontSize
}
},
xAxis: {
categories: dates,
labels: {
enabled: false
},
title: {
text: null
},
lineWidth: 2
},
yAxis: {
max: maxValue,
min: 0,
title: {
text: null,
align: 'high',
style: {
fontSize: fontSizeText
}
},
labels: {
style: {
fontSize: fontSizeText
}
},
gridLineWidth: 0
},
legend: {
itemStyle: {
fontSize: fontSizeText
}
},
plotOptions: {
bar: {
borderRadius: '50%',
dataLabels: {
enabled: true,
style: {
fontSize: fontSizeText
}
},
groupPadding: 0.1
}
},
credits: {
enabled: false
},
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)) { if (!document.getElementById(divId)) {
return; return;
} }
Highcharts.chart(divId, { Highcharts.chart(divId, {
chart: { chart: {
type: 'bar', type: 'column',
height: height,
width: width,
}, },
title: { title: {
text: title text: title,
}, align: 'center',
xAxis: { verticalAlign: 'top',
}, y: 30,
yAxis: { style: {
max: maxValue, fontSize: fontSize,
min: 0, fontWeight: 'bold',
title: { }
align: 'high' },
}, xAxis: {
labels: { categories: dates,
overflow: 'justify' labels: {
}, rotation: -45,
gridLineWidth: 0 style: {
}, fontSize: 10 - fontSize,
plotOptions: { fontWeight: 'bold'
bar: { }
borderRadius: '50%', }
dataLabels: { },
enabled: true yAxis: {
}, min: 0,
groupPadding: 0.1 max: maxValue,
softMax: maxValue,
softMin: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Total Progress',
style: {
fontSize: fontSize,
fontWeight: 'bold',
} }
}, },
credits: { labels: {
enabled: false format: '{value}%'
}, }
series: [{ },
name: aHeading, legend: {
data: aData itemStyle: {
}, { fontSize: 10 - fontSize,
name: bHeading, fontWeight: 'bold'
data: bData }
}, { },
name: cHeading, scrollbar: {
data: cData enabled: true
}] },
}); series: [{
name: Heading,
data: Data
}]
});
} }
function createSingleBarChart(divId, height, width, title,Heading, Data, dates, fontSize, maxValue) { initializeGauges();
if (!document.getElementById(divId)) {
return;
}
Highcharts.chart(divId, {
chart: {
type: 'column',
height: height,
width: width,
},
title: {
text: title,
align: 'center',
verticalAlign: 'top',
y: 30,
style: {
fontSize: fontSize,
fontWeight: 'bold',
}
},
xAxis: {
categories: dates,
labels: {
rotation: -45,
style: {
fontSize: 10-fontSize,
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
max: maxValue,
softMax: maxValue,
softMin: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Total Progress',
style: {
fontSize: fontSize,
fontWeight: 'bold',
}
},
labels: {
format: '{value}%'
}
},
legend: {
itemStyle: {
fontSize: 10-fontSize,
fontWeight: 'bold'
}
},
scrollbar: {
enabled: true
},
series: [{
name: Heading,
data: Data
}]
});
}
initializeGauges(); function initializeGauges() {
function initializeGauges() {
const gaugeDivs2 = document.querySelectorAll('.gauge-chart2'); const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
gaugeDivs2.forEach(function (div) { gaugeDivs2.forEach(function (div) {
const progress = div.getAttribute('data-progress'); const progress = div.getAttribute('data-progress');
const color = div.getAttribute('data-color'); const color = div.getAttribute('data-color');
const title = div.getAttribute('data-title'); const title = div.getAttribute('data-title');
const height = div.getAttribute('data-height'); const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width'); const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize'); const fontSize = div.getAttribute('data-fontSize');
const fontColor = div.getAttribute('data-fontColor'); const fontColor = div.getAttribute('data-fontColor');
const total = div.getAttribute('data-totalProduction'); const total = div.getAttribute('data-totalProduction');
const actual = div.getAttribute('data-actualProduction'); const actual = div.getAttribute('data-actualProduction');
const divId = div.id; const divId = div.id;
console.log(actual) console.log(actual)
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual); createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
}); });
const gaugeDivs = document.querySelectorAll('.gauge-chart'); const gaugeDivs = document.querySelectorAll('.gauge-chart');
gaugeDivs.forEach(function (div) { gaugeDivs.forEach(function (div) {
const progress = div.getAttribute('data-progress'); const progress = div.getAttribute('data-progress');
const color = div.getAttribute('data-color'); const color = div.getAttribute('data-color');
const title = div.getAttribute('data-title'); const title = div.getAttribute('data-title');
const height = div.getAttribute('data-height'); const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width'); const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize'); const fontSize = div.getAttribute('data-fontSize');
const fontColor = div.getAttribute('data-fontColor'); const fontColor = div.getAttribute('data-fontColor');
const total = div.getAttribute('data-totalProduction'); const total = div.getAttribute('data-totalProduction');
const actual = div.getAttribute('data-actualProduction'); const actual = div.getAttribute('data-actualProduction');
const aGrade = div.getAttribute('data-aGrade'); const aGrade = div.getAttribute('data-aGrade');
const bGrade = div.getAttribute('data-bGrade'); const bGrade = div.getAttribute('data-bGrade');
const cGrade = div.getAttribute('data-cGrade'); const cGrade = div.getAttribute('data-cGrade');
const divId = div.id; const divId = div.id;
createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade); createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade);
}); });
const barChart = document.querySelectorAll('.barChart'); const barChart = document.querySelectorAll('.barChart');
barChart.forEach(function (div) { barChart.forEach(function (div) {
const title = div.getAttribute('data-title'); const title = div.getAttribute('data-title');
const height = div.getAttribute('data-height'); const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width'); const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize'); const fontSize = div.getAttribute('data-fontSize');
const maxValue = Number(div.getAttribute('data-totalProduction')); const maxValue = Number(div.getAttribute('data-totalProduction'));
const aHeading = 'Cutting'; const aHeading = 'Cutting';
const aData = JSON.parse(div.getAttribute('data-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 dates = div.getAttribute('data-dates');
const datesArray = dates.split(','); const datesArray = dates.split(',');
const divId = div.id; 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 const dashboardBarChart = document.querySelectorAll('.dashboardBarChart'); // fixed name
dashboardBarChart.forEach(function (div) { dashboardBarChart.forEach(function (div) {
@ -314,25 +352,26 @@ document.addEventListener("DOMContentLoaded", function () {
const height = div.getAttribute('data-height'); const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width'); const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize'); const fontSize = div.getAttribute('data-fontSize');
const rawValue = div.getAttribute('data-totalProduction') || "0"; const rawValue = div.getAttribute('data-totalProduction') || "0";
const cleanValue = rawValue.replace(/[^0-9.-]+/g, ''); const cleanValue = rawValue.replace(/[^0-9.-]+/g, '');
const maxValue = Number(cleanValue); 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 aHeading = 'Stitching';
const aDataString = div.getAttribute('data-stitching'); const aDataString = div.getAttribute('data-stitching');
const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, ''); const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, '');
const aData = [Number(cleanValueStitch)]; 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 packaging = bDataString.replace(/[^0-9.-]+/g, '');
const bData = [Number(packaging)]; 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 dates = [div.getAttribute('data-dates')];
const divId = div.id; const divId = div.id;
dashboardChart( dashboardChart(
@ -348,23 +387,24 @@ document.addEventListener("DOMContentLoaded", function () {
cData, cData,
dates, dates,
fontSize, fontSize,
'20',
maxValue maxValue
); );
}); });
const cuttingBarChart = document.querySelectorAll('.singleBarChart'); const cuttingBarChart = document.querySelectorAll('.singleBarChart');
cuttingBarChart.forEach(function (div) { cuttingBarChart.forEach(function (div) {
const title = div.getAttribute('data-title'); const title = div.getAttribute('data-title');
const height = div.getAttribute('data-height'); const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width'); const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize'); const fontSize = div.getAttribute('data-fontSize');
const maxValue = Number(div.getAttribute('data-totalProduction')); const maxValue = Number(div.getAttribute('data-totalProduction'));
const Heading = div.getAttribute('data-barHeading'); const Heading = div.getAttribute('data-barHeading');
const Data = JSON.parse(div.getAttribute('data-barData')); const Data = JSON.parse(div.getAttribute('data-barData'));
const dates = div.getAttribute('data-dates'); const dates = div.getAttribute('data-dates');
const datesArray = dates.split(','); const datesArray = dates.split(',');
const divId = div.id; const divId = div.id;
createSingleBarChart( divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue); createSingleBarChart(divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
}); });
} }
}); });

541
src/main/resources/templates/_fragments.html
View File

@ -1,283 +1,286 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"> <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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="refresh" content="60" th:if="${refresh == true}"> <meta http-equiv="refresh" content="60" th:if="${refresh == true}">
<link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}"> <link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}">
<link rel="stylesheet" th:href="@{/css/style.css}"> <link rel="stylesheet" th:href="@{/css/style.css}">
<script th:src="@{/js/vendor/jquery-3.4.1.min.js}"></script> <script th:src="@{/js/vendor/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/vendor/bootstrap.bundle.js}"></script> <script th:src="@{/js/vendor/bootstrap.bundle.js}"></script>
<script th:src="@{/js/vendor/luxon.min.js}"></script> <script th:src="@{/js/vendor/luxon.min.js}"></script>
<script th:src="@{/js/vendor/datatables.min.js}"></script> <script th:src="@{/js/vendor/datatables.min.js}"></script>
<script th:src="@{/js/vendor/dataTables.fixedColumns.min.js}"></script> <script th:src="@{/js/vendor/dataTables.fixedColumns.min.js}"></script>
<script th:src="@{/js/vendor/jquery-ui.js}"></script> <script th:src="@{/js/vendor/jquery-ui.js}"></script>
<script th:src="@{/js/vendor/vue.js}"></script> <script th:src="@{/js/vendor/vue.js}"></script>
<script th:src="@{/js/vendor/select2.full.min.js}"></script> <script th:src="@{/js/vendor/select2.full.min.js}"></script>
<script th:src="@{/js/vendor/bignumber.min.js}"></script> <script th:src="@{/js/vendor/bignumber.min.js}"></script>
<script th:src="@{/js/vue-components.js}"></script> <script th:src="@{/js/vue-components.js}"></script>
<script th:src="@{/js/utils.js}"></script> <script th:src="@{/js/utils.js}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<title th:text="${#strings.concat(title, ' - CTP')}"></title> <title th:text="${#strings.concat(title, ' - CTP')}"></title>
<style> <style>
@keyframes blinker { @keyframes blinker {
50% { 50% {
opacity: 0; opacity: 0;
}
} }
}
.blink { .blink {
animation: blinker 1s linear infinite; animation: blinker 1s linear infinite;
} }
</style> </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">--> <!--<editor-fold desc="Description">-->
<div class="col-sm"> <div class="col-sm">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
<a class="navbar-brand text-white-50" th:href="@{/}"> <a class="navbar-brand text-white-50" th:href="@{/}">
<img th:src="@{/img/utopia-industries-white.svg}" class="page-header__logo" alt="Utopia Industries"> <img th:src="@{/img/utopia-industries-white.svg}" class="page-header__logo" alt="Utopia Industries">
</a> </a>
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')"> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')">
<a th:href="@{/purchase-order/}" class="nav-link" <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
</li> Order</a>
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')"> </li>
<a th:href="@{/job-cards/}" class="nav-link" <li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job Cards</a> <a th:href="@{/job-cards/}" class="nav-link"
</li> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')"> Cards</a>
<a th:href="@{/cutting/}" class="nav-link" </li>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting') ? 'active' : ''}">Cutting</a> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
</li> <a th:href="@{/cutting/}" class="nav-link"
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_STITCHING', 'ROLE_ADMIN')"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting') ? 'active' : ''}">Cutting</a>
<a th:href="@{/stitching/}" class="nav-link" </li>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching') ? 'active' : ''}">Stitching</a> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_STITCHING', 'ROLE_ADMIN')">
</li> <a th:href="@{/stitching/}" class="nav-link"
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching') ? 'active' : ''}">Stitching</a>
<a th:href="@{/quality-control/}" class="nav-link" </li>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality Control</a> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
</li> <a th:href="@{/quality-control/}" class="nav-link"
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality
<a th:href="@{/finishing/}" class="nav-link" Control</a>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing') ? 'active' : ''}">Finishing</a> </li>
</li> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PACKAGING', 'ROLE_ADMIN')"> <a th:href="@{/finishing/}" class="nav-link"
<a th:href="@{/packaging/}" class="nav-link" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing') ? 'active' : ''}">Finishing</a>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging') ? 'active' : ''}">Packaging</a> </li>
</li> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_PACKAGING', 'ROLE_ADMIN')">
<a th:href="@{/packaging/}" class="nav-link"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging') ? 'active' : ''}">Packaging</a>
</li>
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_REPORTING', 'ROLE_ADMIN')"> <li class="nav-item" sec:authorize="hasAnyRole('ROLE_REPORTING', 'ROLE_ADMIN')">
<a th:href="@{/reporting/summary}" class="nav-link" <a th:href="@{/reporting/summary}" class="nav-link"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting') ? 'active' : ''}">Reporting</a> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting') ? 'active' : ''}">Reporting</a>
</li> </li>
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')"> <li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Admin</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Admin</a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<!-- Add Inventory Accounts--> <!-- Add Inventory Accounts-->
<a th:href="@{/inventory-accounts}" <a th:href="@{/inventory-accounts}"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
class="dropdown-item">Inventory Accounts</a> class="dropdown-item">Inventory Accounts</a>
<a th:href="@{/processes}" <a th:href="@{/processes}"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/processes') ? 'active' : ''}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/processes') ? 'active' : ''}"
class="dropdown-item">Processes</a> class="dropdown-item">Processes</a>
<!-- User and Roles --> <!-- User and Roles -->
<a th:href="@{/users}" <a th:href="@{/users}"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/users') ? 'active' : ''}" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/users') ? 'active' : ''}"
class="dropdown-item">User And Roles</a> class="dropdown-item">User And Roles</a>
</div>
</li>
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_INVENTORY_ACCOUNT')">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Inventory Accounts</a>
<div class="dropdown-menu">
<!-- Add Inventory Accounts-->
<a th:href="@{/inventory-accounts}"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
class="dropdown-item">Inventory Accounts</a>
</div>
</li>
</ul>
<div class="dropdown page-header__user-menu">
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-toggle="dropdown">
<i class="bi bi-person"></i>
<span sec:authentication="name"></span>
</a>
<div class="dropdown-menu">
<form th:action="@{/logout}" method="POST" class="page-header__logout">
<button type="submit">Logout</button>
</form>
</div> </div>
</li>
<li class="nav-item dropdown" sec:authorize="hasRole('ROLE_INVENTORY_ACCOUNT')">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Inventory Accounts</a>
<div class="dropdown-menu">
<!-- Add Inventory Accounts-->
<a th:href="@{/inventory-accounts}"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
class="dropdown-item">Inventory Accounts</a>
</div> </div>
</nav> </li>
<!-- second level purchase Order--> </ul>
<!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"--> <div class="dropdown page-header__user-menu">
<!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">--> <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-toggle="dropdown">
<!-- <ul class="navbar-nav">--> <i class="bi bi-person"></i>
<!-- <li class="nav-item"--> <span sec:authentication="name"></span>
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">--> </a>
<!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>--> <div class="dropdown-menu">
<!-- </li>--> <form th:action="@{/logout}" method="POST" class="page-header__logout">
<!-- </ul>--> <button type="submit">Logout</button>
<!-- </nav>--> </form>
<!-- second level job cards--> </div>
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between" </div>
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}"> </nav>
<ul class="navbar-nav"> <!-- second level purchase Order-->
<li class="nav-item" <!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}"> <!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
<a th:href="@{/job-cards/}" class="nav-link">Cards</a> <!-- <ul class="navbar-nav">-->
</li> <!-- <li class="nav-item"-->
</ul> <!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
</nav> <!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
<!-- second level cutting --> <!-- </li>-->
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between" <!-- </ul>-->
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting')}"> <!-- </nav>-->
<ul class="navbar-nav"> <!-- second level job cards-->
<li class="nav-item" <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/receive-inventory') ? 'active' : ''}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
<a th:href="@{/cutting/receive-inventory}" class="nav-link">Receive Inventory</a> <ul class="navbar-nav">
</li> <li class="nav-item"
<li class="nav-item" th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/inventory-accounts') ? 'active' : ''}"> <a th:href="@{/job-cards/}" class="nav-link">Cards</a>
<a th:href="@{/cutting/inventory-accounts}" class="nav-link">Inventory Accounts</a> </li>
</li> </ul>
<li class="nav-item" </nav>
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/bundles') ? 'active' : ''}"> <!-- second level cutting -->
<a th:href="@{/cutting/bundles}" class="nav-link">Bundles</a> <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
</li> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting')}">
<li class="nav-item" <ul class="navbar-nav">
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/generate-master-barcode') ? 'active' : ''}"> <li class="nav-item"
<a th:href="@{/cutting/generate-master-barcode}" class="nav-link">Generate Master Barcode</a> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/receive-inventory') ? 'active' : ''}">
</li> <a th:href="@{/cutting/receive-inventory}" class="nav-link">Receive Inventory</a>
</li>
<li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/inventory-accounts') ? 'active' : ''}">
<a th:href="@{/cutting/inventory-accounts}" class="nav-link">Inventory Accounts</a>
</li>
<li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/bundles') ? 'active' : ''}">
<a th:href="@{/cutting/bundles}" class="nav-link">Bundles</a>
</li>
<li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/generate-master-barcode') ? 'active' : ''}">
<a th:href="@{/cutting/generate-master-barcode}" class="nav-link">Generate Master Barcode</a>
</li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/master-bundles') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/master-bundles') ? 'active' : ''}">
<a th:href="@{/cutting/master-bundles}" class="nav-link">Master Bundles</a> <a th:href="@{/cutting/master-bundles}" class="nav-link">Master Bundles</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!--Second level of reporting--> <!--Second level of reporting-->
<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/reporting')}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/po-report') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/po-report') ? 'active' : ''}">
<a th:href="@{/reporting/po-report}" class="nav-link">PO Report</a> <a th:href="@{/reporting/po-report}" class="nav-link">PO Report</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/job-card-report') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/job-card-report') ? 'active' : ''}">
<a th:href="@{/reporting/job-card-report}" class="nav-link">Job Card Report</a> <a th:href="@{/reporting/job-card-report}" class="nav-link">Job Card Report</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/cutting-report') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/cutting-report') ? 'active' : ''}">
<a th:href="@{/reporting/cutting-report}" class="nav-link">Cutting Tables Report</a> <a th:href="@{/reporting/cutting-report}" class="nav-link">Cutting Tables Report</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/stitching-report') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/stitching-report') ? 'active' : ''}">
<a th:href="@{/reporting/stitching-report}" class="nav-link">Stitching Line Report</a> <a th:href="@{/reporting/stitching-report}" class="nav-link">Stitching Line Report</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/summary') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting/summary') ? 'active' : ''}">
<a th:href="@{/reporting/summary}" class="nav-link">Summary</a> <a th:href="@{/reporting/summary}" class="nav-link">Summary</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- second level stitching --> <!-- second level stitching -->
<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/stitching')}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/receive-inventory') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/receive-inventory') ? 'active' : ''}">
<a th:href="@{/stitching/receive-inventory}" class="nav-link">Receive Inventory</a> <a th:href="@{/stitching/receive-inventory}" class="nav-link">Receive Inventory</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/inventory-accounts') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/inventory-accounts') ? 'active' : ''}">
<a th:href="@{/stitching/inventory-accounts}" class="nav-link">Inventory Accounts</a> <a th:href="@{/stitching/inventory-accounts}" class="nav-link">Inventory Accounts</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/stitching-offline-items') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/stitching-offline-items') ? 'active' : ''}">
<a th:href="@{/stitching/stitching-offline-items}" class="nav-link">Stitching Offline Items</a> <a th:href="@{/stitching/stitching-offline-items}" class="nav-link">Stitching Offline Items</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- second level quality control--> <!-- second level quality control-->
<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/quality-control')}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}"> 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> <a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
</li> </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> </ul>
</nav> </nav>
<!-- second level stitching --> <!-- second level stitching -->
<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/finishing')}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/finished-items') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/finished-items') ? 'active' : ''}">
<a th:href="@{/finishing/finished-items}" class="nav-link">Finished Items</a> <a th:href="@{/finishing/finished-items}" class="nav-link">Finished Items</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/inventory-accounts') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/inventory-accounts') ? 'active' : ''}">
<a th:href="@{/finishing/inventory-accounts}" class="nav-link">Inventory Accounts</a> <a th:href="@{/finishing/inventory-accounts}" class="nav-link">Inventory Accounts</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/segregate-inventory') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/segregate-inventory') ? 'active' : ''}">
<a th:href="@{/finishing/segregate-inventory}" class="nav-link">Segregate Inventory</a> <a th:href="@{/finishing/segregate-inventory}" class="nav-link">Segregate Inventory</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- second level packaging --> <!-- second level packaging -->
<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/packaging')}"> th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging')}">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/receive-inventory') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/receive-inventory') ? 'active' : ''}">
<a th:href="@{/packaging/receive-inventory}" class="nav-link">Receive Inventory</a> <a th:href="@{/packaging/receive-inventory}" class="nav-link">Receive Inventory</a>
</li> </li>
<li class="nav-item" <li class="nav-item"
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/inventory-accounts') ? 'active' : ''}"> th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/inventory-accounts') ? 'active' : ''}">
<a th:href="@{/packaging/inventory-accounts}" class="nav-link">Inventory Accounts</a> <a th:href="@{/packaging/inventory-accounts}" class="nav-link">Inventory Accounts</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </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 class="d-flex justify-content-between">
<div> <div>
<div class="skeleton-box" style="width:35px;"></div> <div class="skeleton-box" style="width:35px;"></div>
</div>
<div>
<div class="skeleton-box" style="width:200px;"></div>
</div>
</div>
<div th:each="i: ${#numbers.sequence(0, 15)}" class="row">
<div class="col-sm-2">
<div class="skeleton-box"></div>
</div>
<div class="col-sm-1" th:each="j: ${#numbers.sequence(0, 9)}">
<div class="skeleton-box"></div>
</div>
</div>
</div> </div>
<div>
<div class="skeleton-box" style="width:200px;"></div>
</div>
</div>
<div th:each="i: ${#numbers.sequence(0, 15)}" class="row">
<div class="col-sm-2">
<div class="skeleton-box"></div>
</div>
<div class="col-sm-1" th:each="j: ${#numbers.sequence(0, 9)}">
<div class="skeleton-box"></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/vendor/lazyload-db.js}"></script>
<script th:src="@{/js/main.js}"></script> <script th:src="@{/js/main.js}"></script>
</div> </div>
</body> </body>
</html> </html>

61
src/main/resources/templates/dashboard.html
View File

@ -19,7 +19,7 @@
</div> </div>
</header> </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="row page-main g-4 p-3">
<div class="col-lg-6"> <div class="col-lg-6">
<!-- Title Row --> <!-- Title Row -->
@ -71,7 +71,8 @@
<div class="px-4" style="height: 150px"> <div class="px-4" style="height: 150px">
<h1 class="card-text text-danger fw-bold blink" style="font-size: 4rem;" <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> 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>
</div> </div>
@ -108,7 +109,7 @@
<div class="ps-2 text-center"> <div class="ps-2 text-center">
<h1 class="fw-bold m-0" <h1 class="fw-bold m-0"
th:text="${phases.get('finishing')?.intValue() ?: 0} + ' Pcs'"></h1> 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> </div>
<div class="card-body p-0 text-center d-flex justify-content-center"> <div class="card-body p-0 text-center d-flex justify-content-center">
@ -148,8 +149,60 @@
</div> </div>
</div> </div>
</main> </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> <script th:src="@{/js/charts.js}"></script>
</body> </body>
</html> </html>