603 lines
16 KiB
HTML
603 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Daily Progress Report</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 20px auto;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header {
|
|
background: #49bf3c;
|
|
color: #fff;
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 22px;
|
|
margin: 0;
|
|
}
|
|
|
|
.header .project-info {
|
|
font-size: 14px;
|
|
text-align: right;
|
|
}
|
|
|
|
.status-note {
|
|
font-size: 12px;
|
|
color: #555;
|
|
padding: 15px 20px 0 20px;
|
|
}
|
|
|
|
.status-cards {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
background: #fff;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
/* <-- added shadow */
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
border-top: 1px solid #e63946;
|
|
|
|
}
|
|
|
|
.card-link {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
color: #49bf3c;
|
|
/* arrow color */
|
|
background: #f5f5f5;
|
|
/* badge background */
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
.card-link:hover {
|
|
background: #ececec;
|
|
}
|
|
|
|
.card-link:focus {
|
|
outline: 2px solid #9ca3af;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.card-link .arrow {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.card:hover .card-link {
|
|
display: inline-flex;
|
|
/* <— show only on this card */
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 14px;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.card p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.card .value {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.attendance {
|
|
color: #49bf3c;
|
|
}
|
|
|
|
.tasks {
|
|
color: #007bff;
|
|
}
|
|
|
|
.completion {
|
|
color: #28a745;
|
|
}
|
|
|
|
.activities {
|
|
padding: 20px;
|
|
}
|
|
|
|
.activities h2 {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.table th {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.footer {
|
|
/* background: #b10000; */
|
|
background: #49bf3c;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 15px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.footer a {
|
|
color: #fff;
|
|
margin: 0 8px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.header .project-info {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.status-cards {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.legend {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #555;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.legend-red {
|
|
background: #49bf3c;
|
|
}
|
|
|
|
.legend-blue {
|
|
background: #007bff;
|
|
}
|
|
|
|
.legend-green {
|
|
background: #28a745;
|
|
}
|
|
|
|
.legend-gray {
|
|
background: #ccc;
|
|
}
|
|
|
|
|
|
|
|
.donut {
|
|
--percentage: 0;
|
|
/* Change this per chart */
|
|
--danger: #e63946;
|
|
--primary: #007bff;
|
|
--warning: #ffc107;
|
|
--success: #198754;
|
|
/* Fill color */
|
|
--track: #e9ecef;
|
|
/* Background track */
|
|
--size: 120px;
|
|
/* Default size */
|
|
--thickness: 20px;
|
|
/* Default thickness */
|
|
|
|
width: var(--size);
|
|
height: var(--size);
|
|
border-radius: 50%;
|
|
/* background: conic-gradient(var(--danger) calc(var(--percentage) * 1%),
|
|
var(--track) 0); */
|
|
background: conic-gradient(var(--track) 100%);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.donut::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: calc(var(--size) - var(--thickness));
|
|
height: calc(var(--size) - var(--thickness));
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
/* Inner cut-out */
|
|
}
|
|
|
|
.donut span {
|
|
position: absolute;
|
|
font-size: calc(var(--size) / 6);
|
|
}
|
|
|
|
/* Variants */
|
|
.donut.thin {
|
|
--size: 80px;
|
|
--thickness: 12px;
|
|
}
|
|
|
|
.donut.medium {
|
|
--size: 120px;
|
|
--thickness: 25px;
|
|
}
|
|
|
|
.donut.large {
|
|
--size: 180px;
|
|
--thickness: 35px;
|
|
}
|
|
|
|
/* Color variants */
|
|
.donut-success {
|
|
background: conic-gradient(var(--success) calc(var(--percentage) * 1%),
|
|
var(--track) 0);
|
|
color: var(--success)
|
|
}
|
|
|
|
.donut-warning {
|
|
background: conic-gradient(var(--warning) calc(var(--percentage) * 1%),
|
|
var(--track) 0);
|
|
color: var(--warning)
|
|
}
|
|
|
|
.donut-danger {
|
|
background: conic-gradient(var(--danger) calc(var(--percentage) * 1%),
|
|
var(--track) 0);
|
|
color: var(--danger)
|
|
}
|
|
|
|
.donut-primary {
|
|
background: conic-gradient(var(--primary) calc(var(--percentage) * 1%),
|
|
var(--track) 0);
|
|
color: var(--primary)
|
|
}
|
|
|
|
.values {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.values p {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<h1>Daily Progress Report</h1>
|
|
<div class="project-info">
|
|
<strong>Project:</strong>{{projectName}}<br>
|
|
<strong>Date:</strong> {{date}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Note -->
|
|
<div class="status-note">
|
|
* Project Status Reported - Generated at {{timeStamp}} UTC
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<div class="status-cards">
|
|
<div class="card">
|
|
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
|
|
rel="noopener">
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
<h4 class="card-title">TODAY'S ATTENDANCE</h4>
|
|
<div style="display:flex; flex-wrap:wrap;">
|
|
|
|
<!-- Left Column -->
|
|
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
|
|
<!-- Medium -->
|
|
<div class="donut thin donut-primary" style="--percentage: {{attendancePercentage}};">
|
|
<span class="values">
|
|
<p style="color:#007bff;">{{todaysAttendances}}</p> / <p style="color:#ccc;">{{totalEmployees}}</p>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
|
|
<span class="legend-color legend-blue"></span> Today's Attendance
|
|
</div>
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
|
|
<span class="legend-color legend-gray"></span> Total Employees
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
|
|
rel="noopener">
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
<h4 class="card-title">DAILY TASKS COMPLETED</h4>
|
|
<div style="display:flex; flex-wrap:wrap;">
|
|
|
|
<!-- Left Column -->
|
|
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
|
|
<!-- Medium -->
|
|
<div class="donut thin donut-primary" style="--percentage: {{taskPercentage}};">
|
|
<span class="values">
|
|
<p style="color:#007bff;">{{totalCompletedTask}}</p> / <p style="color:#ccc;">{{totalPlannedTask}}</p>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
|
|
<span class="legend-color legend-blue"></span> Completed Work
|
|
</div>
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
|
|
<span class="legend-color legend-gray"></span> Planned Work
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p style="font-size: xx-small;">*Today's total work</p>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="card">
|
|
<h4 class="card-title">DAILY TASKS COMPLETED</h4>
|
|
<p class="value tasks">20 / 30</p>
|
|
<p>Team member present</p>
|
|
<div class="legend">
|
|
<div class="legend-item"><span class="legend-color legend-blue"></span> Completed</div>
|
|
<div class="legend-item"><span class="legend-color legend-green"></span> In Progress</div>
|
|
<div class="legend-item"><span class="legend-color legend-gray"></span> Pending</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="card">
|
|
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
|
|
rel="noopener">
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
<h4 class="card-title">PROJECT COMPLETION STATUS</h4>
|
|
<div style="display:flex; flex-wrap:wrap;">
|
|
|
|
<!-- Left Column -->
|
|
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
|
|
<!-- Medium -->
|
|
<div class="donut thin donut-primary" style="--percentage: {{completionStatus}};">
|
|
<span {% if totalCompletedWork <= 100 %} class="values" {% endif %}>
|
|
<p style="color:#007bff;">{{totalCompletedWork}}</p> / <p style="color:#ccc;">{{totalPlannedWork}}</p>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
|
|
<span class="legend-color legend-blue"></span> Completed Work
|
|
</div>
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
|
|
<span class="legend-color legend-gray"></span> Planned Work
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p style="font-size: xx-small;">*Project's total work</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
|
|
rel="noopener">
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
<h4 class="card-title">Regularization Pending</h4>
|
|
<p class="value tasks">{{regularizationPending}}</p>
|
|
|
|
<h4 class="card-title">Checkout Pending</h4>
|
|
<p class="value tasks">{{checkoutPending}}</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<a class="card-link" href={{webUrl}} aria-label="Open original website" title="Open website" target="_blank"
|
|
rel="noopener">
|
|
<span class="arrow">↗</span>
|
|
</a>
|
|
<h4 class="card-title">Activity Report Pending</h4>
|
|
<div style="display:flex; flex-wrap:wrap;">
|
|
|
|
<!-- Left Column -->
|
|
<div style="width:50%; box-sizing:border-box;display:flex; justify-content:center; align-items:center;">
|
|
<!-- Medium -->
|
|
<span class="values">
|
|
<p style="color:#007bff;">{{reportPending}}</p> / <p style="color:#ccc;">{{todaysAssignTasks}}</p>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="legend" style="width:50%; padding:15px; box-sizing:border-box;">
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px;text-align: left; display:left; justify-content:left; align-items:left!important;; ">
|
|
<span class="legend-color legend-blue"></span> Total Pending Tasks
|
|
</div>
|
|
<div class="legend-item"
|
|
style="margin-bottom:10px; text-align: left; display:left; justify-content:left; align-items:left!important;;">
|
|
<span class="legend-color legend-gray"></span> Today's Assigned Tasks
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if teamOnSite and teamOnSite|length > 0 %}
|
|
<div class="card">
|
|
<!-- Row 1: Header -->
|
|
<div>
|
|
<h4 class="card-title">Team Strength on Site</h4>
|
|
</div>
|
|
<table style="width: 100%;">
|
|
{% for a in teamOnSite %}
|
|
<tr>
|
|
<td style="text-align: left;">{{a.roleName}}</td>
|
|
<td style="text-align: right;">{{a.numberofEmployees}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Activities
|
|
{% if performedTasks and performedTasks|length > 0 %}
|
|
<div class="activities">
|
|
<h2>Activities (Tasks) Performed {{date}}</h2>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Activity/Location</th>
|
|
<th>Assigned Today/Pending</th>
|
|
<th>Completed Today</th>
|
|
<th>Date</th>
|
|
<th>Team Members</th>
|
|
<th>Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for a in performedTasks %}
|
|
<tr>
|
|
<td>{{a.activity}} {{a.location}}</td>
|
|
<td>{{a.assignedToday}} / {{a.pending}}</td>
|
|
<td>{{a.completedToday}}</td>
|
|
<td>{{date}}</td>
|
|
<td></td>
|
|
<td>{{a.comment}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %} -->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<div class="footer" style="display:flex; flex-wrap:wrap;">
|
|
<div style="width: 50%;text-align: left;">
|
|
Contact Us: contact[at]marcoaiot.com<br>
|
|
Marco AIoT technologies Pvt. Ltd. ©2025 All Rights Reserved
|
|
</div>
|
|
|
|
<div style="width: 50%; text-align: right;">
|
|
<!-- <a href="#">Instagram</a> | -->
|
|
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/google.png" style="height: 15px;" /></a> |
|
|
|
|
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/twitter.png" style="height: 15px;" /></a> |
|
|
|
|
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/facebook.png" style="height: 15px;" /></a> |
|
|
<a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/instagram.png" style="height: 15px;" /></a>
|
|
<!-- <a href="#"><img src="https://cdn.marcoaiot.com/icons/brands/youtube.png" style="height: 15px;" /></a> | <a
|
|
href="#">LinkedIn</a> |
|
|
<a href="#">YouTube</a> -->
|
|
</div>
|
|
|
|
</div>
|
|
<div style="text-align: center;width: 100%;background-color: #fff;margin:10px;font-size: small;color: #6c757d ;">
|
|
You have received this email because it contains important information about your Marco PMS Account account.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |