164 lines
9.7 KiB
HTML
164 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml"
|
|
xmlns:ctp="http://www.w3.org/1999/xhtml">
|
|
|
|
<head th:replace="_fragments :: head('Job Card Report')"></head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<header class="row page-header" th:replace="_fragments :: page-header"></header>
|
|
<main class="row page-main">
|
|
<aside class="col-sm-2" th:replace="/reporting/job-card-report-sidebar :: sidebar"></aside>
|
|
<div class="col-lg-10">
|
|
<div th:if="${jobCardProgress == null}" class="text-center my-5">
|
|
<h2 class="fs-1">Please Select Job Card</h2>
|
|
</div>
|
|
|
|
<div th:if="${jobCardProgress != null}">
|
|
<div class="border rounded-3 pt-4 ">
|
|
<h1 class="text-center mb-5">Job Card Report</h1>
|
|
|
|
<div class="row justify-content-center align-items-start">
|
|
<div class="text-center">
|
|
<div class="gauge-chart2"
|
|
th:id="'gauge-chart2'"
|
|
th:data-progress="${jobCardProgress.get('Job Card Progress')}"
|
|
th:data-title="'Job Card Progress'"
|
|
th:data-width="350"
|
|
th:data-height="350"
|
|
th:data-totalProduction="${totalProduction}"
|
|
th:data-actualProduction="${completeProduction.get('Job Card Progress')}"
|
|
th:data-fontSize="30"
|
|
th:data-fontColor="'#17202a'"
|
|
th:data-color="'#566573'">
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap justify-content-center gap-2 " style="margin-top: 70px;">
|
|
<div th:each="title, index : ${jobCardProgress.keySet()}"
|
|
th:if="${title != 'Job Card Progress'}" class="text-center">
|
|
<div class="gauge-chart"
|
|
th:id="'gauge-chart-' + ${index}"
|
|
th:data-progress="${jobCardProgress.get(title)}"
|
|
th:data-totalProduction="${totalProduction}"
|
|
th:data-actualProduction="${completeProduction.get(title)}"
|
|
th:data-title="${title}"
|
|
th:data-width="230"
|
|
th:data-height="230"
|
|
th:data-fontSize="20"
|
|
th:data-aGrade="${segregateItems.get('A GRADE') == null ? 0 : segregateItems.get('A GRADE')}"
|
|
th:data-bGrade="${segregateItems.get('B GRADE') == null ? 0 : segregateItems.get('B GRADE')}"
|
|
th:data-cGrade="${segregateItems.get('C GRADE') == null ? 0 : segregateItems.get('C GRADE')}"
|
|
th:data-fontColor="'#17202a'"
|
|
th:data-color="'#95a5a6'">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div th:if="${phasesTimes != null}" class="d-flex flex-column align-items-center my-2">
|
|
<div class="d-flex flex-wrap gap-3">
|
|
<div th:each="phase, index : ${phasesTimes.keySet()}"
|
|
class="border rounded-3 text-center p-3 mr-3">
|
|
<h6 th:text="${phase}"></h6>
|
|
<h6 th:text="${phasesTimes.get(phase)}"></h6>
|
|
<h6 th:if="${pendingStatus.get(phase) != null}" th:text="${pendingStatus.get(phase)}"></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="my-5">
|
|
<div class="row g-4">
|
|
<div class="col-md-6"
|
|
th:if="${cuttingDetails != null && cuttingDetails.get('accounts') != null}">
|
|
<div class="bg-dark text-white text-center py-2 rounded-3 mb-3">
|
|
Cutting Detail
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Cutting</th>
|
|
<th>Cutting Date</th>
|
|
<th>Descriptions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="detail, index : ${cuttingDetails.get('accounts').keySet()}">
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).id}"></td>
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).title}"></td>
|
|
<td th:text="${cuttingDetails.get('personName').get(detail)}"></td>
|
|
<td>
|
|
<span th:text="${#temporals.format(cuttingDetails.get('date').get(detail), 'E')}"></span>
|
|
<span ctp:formatdate="${cuttingDetails.get('date').get(detail)}"></span>
|
|
</td>
|
|
<td th:text="${cuttingDetails.get('accounts').get(detail).notes}"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6"
|
|
th:if="${stitchingDetails != null && stitchingDetails.get('accounts') != null}">
|
|
<div class="bg-dark text-white text-center py-2 rounded-3 mb-3">
|
|
Stitching Detail
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Stitching</th>
|
|
<th>Stitching Day</th>
|
|
<th>Descriptions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="detail : ${stitchingDetails.get('accounts').keySet()}">
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).id}"></td>
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).title}"></td>
|
|
<td th:text="${stitchingDetails.get('personName') != null ? stitchingDetails.get('personName').get(detail) : ''}"></td>
|
|
<td>
|
|
<span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}"
|
|
th:text="${#temporals.format(stitchingDetails.get('date').get(detail), 'E')}"></span>
|
|
<span th:if="${stitchingDetails.get('date') != null and stitchingDetails.get('date').get(detail) != null}"
|
|
ctp:formatdate="${stitchingDetails.get('date').get(detail)}"></span>
|
|
</td>
|
|
<td th:text="${stitchingDetails.get('accounts').get(detail).notes}"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div th:if="${dailyProgress != null}" class="d-flex justify-content-center my-5">
|
|
<div class="border rounded-3 p-3 w-75 overflow-auto" style="height: 560px;">
|
|
<div id="barChart" class="barChart" style="height: 500px; width: 1600px;"
|
|
th:data-width="1600"
|
|
th:data-height="500"
|
|
th:data-title="'Days Wise Progress'"
|
|
th:data-dates="${dailyProgress.get('dates')}"
|
|
th:data-cutting="${dailyProgress.get('cutting')}"
|
|
th:data-stitching="${dailyProgress.get('stitching')}"
|
|
th:data-quality="${dailyProgress.get('quality')}"
|
|
th:data-finishing="${dailyProgress.get('finishing')}"
|
|
th:data-totalProduction="${completeProduction.get('Cutting Progress')}"
|
|
th:data-fontSize="30">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Load JavaScript file -->
|
|
<script th:src="@{/js/charts.js}"></script>
|
|
</body>
|
|
</html> |