akashbhome/Client-Billing-software
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ddf38f6bc35ade0a554d16883be04de99f3d7090
Client-Billing-software/app/templates/tasks_display.html

322 lines
10 KiB
HTML
Raw Normal View History

Client billing code push
2026-04-15 10:32:46 +05:30
<!DOCTYPE html>
<html lang="en">
<head>
updated code
2026-04-27 10:18:10 +05:30
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasks</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #f1f5f9;
}
/* Sidebar */
.sidebar {
width: 240px;
height: 100vh;
position: fixed;
background: linear-gradient(180deg, #0f172a, #1e293b);
padding: 20px;
}
.sidebar .logo {
width: 60px;
display: block;
margin: 0 auto 20px;
}
.sidebar a {
display: block;
color: #cbd5f5;
text-decoration: none;
padding: 10px;
border-radius: 8px;
margin-bottom: 8px;
}
.sidebar a:hover {
background: rgba(59,130,246,0.2);
color: white;
}
/* Header */
.header {
margin-left: 270px;
height: 60px;
background: white;
display: flex;
align-items: center;
padding-left: 20px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Main */
.main {
margin-left: 280px;
padding: 20px;
}
/* Card */
.card {
background: white;
padding: 0px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.card-item{
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
/* Buttons */
.btn {
padding: 10px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
margin-right: 10px;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-success {
background: #22c55e;
color: white;
}
.btn-danger {
background: #ef4444;
color: white;
}
/* Search */
.search-box {
width: 300px;
padding: 10px;
border-radius: 8px;
border: 1px solid #ddd;
margin-bottom: 15px;
}
/* Table */
.table-wrapper {
overflow-x: auto;
}
table {
Client billing code push
2026-04-15 10:32:46 +05:30
width: 100%;
updated code
2026-04-27 10:18:10 +05:30
border-collapse: collapse;
font-size: 13px;
}
th {
background: #3b82f6;
Client billing code push
2026-04-15 10:32:46 +05:30
color: white;
updated code
2026-04-27 10:18:10 +05:30
padding: 10px;
}
td {
padding: 8px;
border-bottom: 1px solid #eee;
}
.main-task-row {
background: #e0f2fe;
font-weight: 600;
}
.subtask-row {
background: #fafafa;
}
/* Editable */
.static-text {
display: inline-block;
}
.edit-field {
display: none;
width: 100%;
}
/* Loader */
.spinner {
border: 4px solid #eee;
border-top: 4px solid #3b82f6;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 0.8s linear infinite;
margin: auto;
display: none;
}
@keyframes spin {
100% { transform: rotate(360deg); }
Client billing code push
2026-04-15 10:32:46 +05:30
}
updated code
2026-04-27 10:18:10 +05:30
.sidebar .logo {
width: 60px;
margin: 0 auto 20px;
}
.table-wrapper {
max-height: 670px; /* scroll area height */
overflow-y: auto;
}
thead th {
position: sticky;
top: 0;
background: #3b82f6;
z-index: 10;
}
</style>
Client billing code push
2026-04-15 10:32:46 +05:30
</head>
<body>
updated code
2026-04-27 10:18:10 +05:30
<!-- Sidebar -->
<div class="sidebar">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA+CAYAAAB3NHh5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4JpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NkEzOEVGMzEwQTQxMUU4QUFBQkY0QTA2QzlEM0MxNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QUQzQTIzRDE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QUQzQTIzQzE4NTkxMUU4ODE2Q0IwMTY0RjgxQTVGNyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNS41IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmJhNmE4ZTBmLTI5ZWItNDBlMy05ZWFhLTYzNTdiYjdkMzcwNCIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRhMjgyMWMwLTYwYmQtMTE3Yi04ZGU3LWNjZmQ1MDgzNjUxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrVd/GcAAASESURBVHja7FtrSBRRFL7rrg9MMjUzspTSSqUg6GFBmohh9SeIMOhXhBX0KzL80YN+SBD+qJ+RBhFEQogV0RMLKyuiqIig6GlZRmlRavl2O8c9I7dtZ2adM3d9zB742GHuzpn7zZl7zrnn3nF5vV7hJHEh4aLKaxfgeAXAjee0NoDX7ziCjl2yDsANwHbAsQD3mALYA3ii04e9gEZAP6BM5z9nAA2AKos8FwK+1pcX53noxCJAMuPBzQLEATbotEfpnMeHfIiuSzK4vhnw2KA9GJkryGIoz5hvyjlAr0F7e4BzuYBbdPwG8Mvg+m+APmYfh/qgWbiXqWzQpN3fUSyj19hj8gbYKV7Zwsp9hXS8BHBXIhsqiQglYTf9LgbcGQWywxKqG7cAssiy0aMVkWQLpzGVoYfvMWjvBlQwyKKPiWT2MU628DZACkPZa0CGQXs00zHOBnwBrLF4fTbgnb+X7mJ0qN/EH3iZYUVLfKz2sQMwSSZ8kkKFVTkKOKxw/KF1Zkhx26rUaFb5xFTUpjiWRtmQeHSGMiyNGQkTdgrhVKaeJBvycbM4zE2S/vHSpTRv7beo7CEgXiFh7GwTTSetCE5/f8iEMdOaajJFM5KtgHyFhDcC/gBeMfKEeJnwAcDyMTz0FgAqmTowG6zWxnCrA/zVc9lp9TmAcEgLAOE4HCY8zgoAZuI28RPdiuO45umHw9LuIKoWHPlOiY1RNeIETfI5gkWM6YABv/MZFMeHCWONOAFwWRFhrKjkEPFAshMwB/CReZ9LZn/QCM8ErBe+ZQ9VUid8JdpAclH4llO40kmFjBdmTmsXYL4NFQWzIkGXDt7adA8cGlgZzQrGS+OMpABwW2HVwkrbSAWH5gNBa0nBhCUk3TjOQ9BkIp0phyQ9wl6a+dwb56QTiEOmkNa2IgzyzpWA+zZ2oMNiG0eSydLp/l5aj/Qq4VsLyrXh5jgJz9NpK1Bo6UQqHuCCfbVZ2aSP5smbBW+pYx5gh4FDRM+6D/BZEWksQf2ULVxC5g80L8YqyFPx/xrvSOQUjaUSnfYyevWyFVr6t0wY92AsVXizJJNximnfFuFbAVElGHnyNKfVothjDpr4iyjNAgqlVfbSA+GKR7gAMLEIexzA1SMTjnUA4VjZspsAMQxluGqxVqhbFMetjQcB7xk6umXChUZzyCCkFnBcIeGblI3tZ+h4if3UCJczE49EoXbLA87VcWNLBUMHLvjVamO42YZqxljf8tAcjsNOIuxyGuEMGyoLPQr72SP4Ww/T5LBURZ226rweyWUUC+I2mW9jZ3GTeCnjHk0y4fOCNl8yvHQO4/oBYbzJPIaszKmmdsiEa4R+vSkYwe0IRyxee0X4PkEoNPgPfiKQSsmDVcHaXL5HshBH2i2OsauAdXRstNgWacOcvU12WtyPl6xcf53yb01Ub7sIeQHA6zcZKJ7IiYdMth5QNNpxOJ2pZ5rJGMZcGOvbuEq4WifZSWHoD0bSZS99FvCB6QHRcdXptONOuNP0KuuN+wYiZkV/MPJg6Ck77WPLvwIMAHzX4zyhUFlrAAAAAElFTkSuQmCC"
alt="LCEPL Logo"
class="logo"
/>
Client billing code push
2026-04-15 10:32:46 +05:30
<a href="/">Dashboard</a>
<a href="/upload_excel">Upload Excel</a>
<a href="/generate_report_page">Print Report</a>
<a href="/filter_tasks">Filter Tasks</a>
updated code
2026-04-27 10:18:10 +05:30
</div>
<!-- Header -->
<div class="header">
LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.
</div>
<div class="main">
<!-- Buttons -->
<div class="card-item">
<button class="btn btn-success" onclick="window.location.href='/generate_report_page'">
Print Report
</button>
<button class="btn btn-primary" onclick="toggleEditMode()">Edit</button>
<button class="btn btn-danger" onclick="cancelEditMode()" id="cancelBtn" style="display:none;">Cancel</button>
<button class="btn btn-primary" onclick="submitChangedFields()">Save</button>
</div>
<!-- Search -->
<input type="text" id="searchBox" class="search-box" placeholder="Search tasks...">
<!-- Table -->
<div class="card table-wrapper">
<div class="spinner" id="loader"></div>
<form id="task-form">
<table>
<thead>
<tr>
<th>Task</th>
<th>Unit</th>
<th>Qty</th>
<th>Rate</th>
<th>BOQ</th>
<th>Prev Qty</th>
<th>Prev Amt</th>
<th>RA Qty</th>
<th>RA Amt</th>
<th>Cum Qty</th>
<th>Cum Amt</th>
<th>Var Qty</th>
<th>Var Amt</th>
</tr>
</thead>
<tbody>
{% for group in grouped_tasks %}
<tr class="main-task-row">
{% for field in ["task_name","unit","qty","rate","boq_amount","previous_billed_qty","previous_billing_amount","in_this_ra_bill_qty","in_this_ra_billing_amount","cumulative_billed_qty","cumulative_billed_amount","variation_qty","variation_amount"] %}
<td>
<span class="static-text">{{ group[field] }}</span>
<input type="text" class="edit-field" name="{{ field }}_{{ group.id }}" value="{{ group[field] }}" data-original-value="{{ group[field] }}">
</td>
{% endfor %}
</tr>
{% for sub in group.subtasks %}
<tr class="subtask-row">
{% for field in ["task_name","unit","qty","rate","boq_amount","previous_billed_qty","previous_billing_amount","in_this_ra_bill_qty","in_this_ra_billing_amount","cumulative_billed_qty","cumulative_billed_amount","variation_qty","variation_amount"] %}
<td>
<span class="static-text">{{ sub[field] }}</span>
<input type="text" class="edit-field" name="{{ field }}_{{ sub.id }}" value="{{ sub[field] }}" data-original-value="{{ sub[field] }}">
</td>
{% endfor %}
</tr>
Client billing code push
2026-04-15 10:32:46 +05:30
{% endfor %}
{% endfor %}
updated code
2026-04-27 10:18:10 +05:30
</tbody>
</table>
</form>
</div>
</div>
<script>
function toggleEditMode() {
document.querySelectorAll('.static-text').forEach(e => e.style.display = 'none');
document.querySelectorAll('.edit-field').forEach(e => e.style.display = 'block');
document.getElementById('cancelBtn').style.display = 'inline-block';
}
function cancelEditMode() {
document.querySelectorAll('.static-text').forEach(e => e.style.display = 'inline');
document.querySelectorAll('.edit-field').forEach(e => {
e.style.display = 'none';
e.value = e.dataset.originalValue;
});
document.getElementById('cancelBtn').style.display = 'none';
}
function submitChangedFields() {
const updates = {};
document.querySelectorAll('.edit-field').forEach(input => {
if (input.value !== input.dataset.originalValue) {
updates[input.name] = input.value;
Client billing code push
2026-04-15 10:32:46 +05:30
}
updated code
2026-04-27 10:18:10 +05:30
});
Client billing code push
2026-04-15 10:32:46 +05:30
updated code
2026-04-27 10:18:10 +05:30
if (!Object.keys(updates).length) return alert("No changes");
Client billing code push
2026-04-15 10:32:46 +05:30
updated code
2026-04-27 10:18:10 +05:30
fetch('/update_tasks', {
Client billing code push
2026-04-15 10:32:46 +05:30
method: 'POST',
updated code
2026-04-27 10:18:10 +05:30
headers: {'Content-Type':'application/json'},
Client billing code push
2026-04-15 10:32:46 +05:30
body: JSON.stringify(updates)
updated code
2026-04-27 10:18:10 +05:30
}).then(res => res.json())
.then(() => location.reload());
}
/* Search */
document.getElementById("searchBox").addEventListener("input", function () {
const term = this.value.toLowerCase();
document.querySelectorAll("tbody tr").forEach(row => {
row.style.display = row.innerText.toLowerCase().includes(term) ? "" : "none";
Client billing code push
2026-04-15 10:32:46 +05:30
});
updated code
2026-04-27 10:18:10 +05:30
});
</script>
Client billing code push
2026-04-15 10:32:46 +05:30
</body>
updated code
2026-04-27 10:18:10 +05:30
</html>
Reference in New Issue Copy Permalink