Client billing code push
This commit is contained in:
Pooja Fulari
516
app/templates/index.html
Normal file
516
app/templates/index.html
Normal file
@@ -0,0 +1,516 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
<title>LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
/* display: flex; */
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar .logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
margin: 10px 0;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 100px 20px 20px 330px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
width: calc(100% - 270px);
|
||||
max-width: 1500px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin: 20px auto;
|
||||
width: 100%;
|
||||
max-height: calc(18 * 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: sticky; /* Ensures the header stays on top */
|
||||
top: 0; /* Keeps the header fixed at the top */
|
||||
z-index: 1; /* Ensures it's above the content */
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.total-row {
|
||||
position: -webkit-sticky; /* For Safari */
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: #007bff !important;
|
||||
font-weight: bold;
|
||||
border-top: 2px solid #ddd;
|
||||
z-index: 10;
|
||||
color: #ddd;
|
||||
display: table-row; /* Ensures row alignment is maintained */
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
/* Style for the filter and search inputs */
|
||||
.filter-container,
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-container label,
|
||||
.search-container label {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#blockSelect,
|
||||
#search-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box; /* Ensures padding is included in width */
|
||||
}
|
||||
|
||||
#blockSelect {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
#blockSelect:focus,
|
||||
#search-input:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
/* Adjust layout for mobile responsiveness */
|
||||
.filter-container,
|
||||
.search-container {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#blockSelect,
|
||||
#search-input {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
/* Smaller dropdown container */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 180px; /* reduced width */
|
||||
font-size: 14px; /* smaller font */
|
||||
}
|
||||
|
||||
/* Smaller dropdown button */
|
||||
.dropdown-btn {
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
padding: 6px 8px; /* smaller padding */
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 14px; /* smaller font */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Smaller dropdown content */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
min-width: 180px; /* match button width */
|
||||
border: 1px solid #ccc;
|
||||
z-index: 1;
|
||||
max-height: 150px; /* slightly smaller max height */
|
||||
overflow-y: auto;
|
||||
font-size: 13px; /* smaller font */
|
||||
}
|
||||
|
||||
/* Smaller checkbox labels */
|
||||
.dropdown-content label {
|
||||
display: block;
|
||||
padding: 4px 8px; /* reduced padding */
|
||||
cursor: pointer;
|
||||
font-size: 13px; /* reduced font size */
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.dropdown-content label:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Show the dropdown content when clicked */
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
color:#ddd;
|
||||
background-color: #007bff;
|
||||
padding: 5px 8px 5px 8px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #007bff;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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"
|
||||
/>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/upload_excel">Upload Excel</a>
|
||||
<a href="/generate_report_page">Print Report</a>
|
||||
<!--<a href="/tasks">Show Tasks</a>-->
|
||||
<a href="/filter_tasks">Filter Tasks</a>
|
||||
<a href="/activity_log">Activity Logs</a>
|
||||
<a href="{{ url_for('main.logout') }}" style="margin-top:auto; color: #fff; background-color: #dc3545;">Logout</a>
|
||||
|
||||
</div>
|
||||
<div class="header">LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.</div>
|
||||
<div class="container">
|
||||
<h1 class="summary-title">Dashboard</h1>
|
||||
<!-- Block Selection Dropdown -->
|
||||
<form method="get" action="{{ url_for('main.dashboard') }}">
|
||||
<div class="filter-container">
|
||||
<label>Select Blocks:</label>
|
||||
<div class="dropdown-container">
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-btn" onclick="toggleDropdown()">Select Blocks</div>
|
||||
<div id="dropdownContent" class="dropdown-content">
|
||||
{% for block in blocks %}
|
||||
<label>
|
||||
<input class="input-style" type="checkbox" name="block[]" value="{{ block }}"
|
||||
{% if block in selected_blocks %}checked{% endif %}>
|
||||
{{ block }}
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="search-container">
|
||||
<br><label for="search-input">Search Village:</label>
|
||||
<input class="input-style" type="text" id="search-input" placeholder="Enter village name..." onkeyup="filterVillages()">
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sr. No.</th>
|
||||
<th>Block</th>
|
||||
<th>Village Name</th>
|
||||
<th>Total BOQ Amount</th>
|
||||
<th>Claimed Amount (Rs.)</th>
|
||||
<th>To be Claimed Amount (Rs.)</th>
|
||||
<th>Cumulative Amount (Rs.)</th>
|
||||
<th>Total Variation Amount</th>
|
||||
<th>Balance against BOQ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="village-table-body">
|
||||
{% for village in villages %}
|
||||
<tr>
|
||||
<td>{{ loop.index }}</td>
|
||||
<td>{{ village.block_name }}</td>
|
||||
<td>{{ village.village_name }}</td>
|
||||
<td class="amount" data-amount="{{ village.total_boq_amount | default(0) }}">
|
||||
{{ village.total_boq_amount | round(2) }}
|
||||
</td>
|
||||
<!-- Claimed Amount -->
|
||||
<td class="amount" data-amount="{{ village.prev_billed_amount | default(0) }}">
|
||||
{{ village.prev_billed_amount | round(2) }}
|
||||
</td>
|
||||
<!-- To Be Claimed Amount -->
|
||||
<td class="amount" data-amount="{{ village.to_be_claimed_amount }}">
|
||||
{{ village.to_be_claimed_amount | round(2) }}
|
||||
</td>
|
||||
<!-- Cumulative = prev billed + to be claimed -->
|
||||
<td class="amount" data-amount="{{ village.cumulative_billed_amount | default(0) | float }}">
|
||||
{{ village.cumulative_billed_amount | default(0) | float | round(2) }}
|
||||
</td>
|
||||
<!-- Total Variation Amount -->
|
||||
<td class="amount" data-amount="{{ village.total_variation_amount | default(0) }}">
|
||||
{{ village.total_variation_amount | round(2) }}
|
||||
</td>
|
||||
<!-- Balance against BOQ -->
|
||||
<td class="amount" data-amount="{{ (village.total_boq_amount | default(0) | float) - (village.cumulative_billed_amount | default(0) | float) - (village.total_variation_amount | default(0) | float) }}">
|
||||
{{ ((village.total_boq_amount | default(0) | float) - (village.cumulative_billed_amount | default(0) | float) - (village.total_variation_amount | default(0) | float)) | round(2) }}
|
||||
</td>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="9" style="text-align: center">No data available.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr class="total-row">
|
||||
<td colspan="3"><strong>Total</strong></td>
|
||||
<td class="amount" id="total-boq"></td>
|
||||
<td class="amount" id="total-billed"></td>
|
||||
<td class="amount" id="total-to-be-claimed"></td>
|
||||
<td class="amount" id="total-cumulative"></td>
|
||||
<td class="amount" id="total-variation"></td>
|
||||
<td class="amount" id="total-balance-against-boq"></td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
function formatAmount(amount) {
|
||||
return parseFloat(amount).toFixed(2);
|
||||
}
|
||||
|
||||
|
||||
// Apply formatting to all cells on load
|
||||
window.onload = function () {
|
||||
// Format all amount cells
|
||||
document.querySelectorAll('.amount').forEach(function (cell) {
|
||||
var amount = parseFloat(cell.getAttribute('data-amount'));
|
||||
if (!isNaN(amount)) {
|
||||
cell.textContent = formatAmount(amount);
|
||||
}
|
||||
});
|
||||
|
||||
// Totals
|
||||
let totalBOQ = 0;
|
||||
let totalBilled = 0;
|
||||
let totalToBeClaimed = 0;
|
||||
let totalCumulative = 0;
|
||||
let totalVariation = 0;
|
||||
let totalBalanceAgainstBOQ = 0;
|
||||
|
||||
const rows = document.querySelectorAll('tbody tr:not(.total-row)');
|
||||
rows.forEach(row => {
|
||||
const cells = row.querySelectorAll('td');
|
||||
|
||||
const boq = parseFloat(cells[3]?.getAttribute('data-amount') || 0); // Total BOQ Amount
|
||||
const billed = parseFloat(cells[4]?.getAttribute('data-amount') || 0); // Claimed Amount
|
||||
const toBeClaimed = parseFloat(cells[5]?.getAttribute('data-amount') || 0); // To Be Claimed
|
||||
const cumulative = parseFloat(cells[6]?.getAttribute('data-amount') || 0); // Cumulative
|
||||
const variation = parseFloat(cells[7]?.getAttribute('data-amount') || 0); // Total Variation
|
||||
const balanceAgainstBOQ = parseFloat(cells[8]?.getAttribute('data-amount') || 0); // Balance BOQ
|
||||
|
||||
totalBOQ += boq;
|
||||
totalBilled += billed;
|
||||
totalToBeClaimed += toBeClaimed;
|
||||
totalCumulative += cumulative;
|
||||
totalVariation += variation;
|
||||
totalBalanceAgainstBOQ += balanceAgainstBOQ;
|
||||
});
|
||||
|
||||
document.getElementById('total-boq').textContent = formatAmount(totalBOQ);
|
||||
document.getElementById('total-billed').textContent = formatAmount(totalBilled);
|
||||
document.getElementById('total-to-be-claimed').textContent = formatAmount(totalToBeClaimed);
|
||||
document.getElementById('total-cumulative').textContent = formatAmount(totalCumulative);
|
||||
document.getElementById('total-variation').textContent = formatAmount(totalVariation);
|
||||
document.getElementById('total-balance-against-boq').textContent = formatAmount(totalBalanceAgainstBOQ);
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function filterVillages() {
|
||||
const searchInput = document.getElementById("search-input").value.toLowerCase();
|
||||
const tableBody = document.getElementById("village-table-body");
|
||||
const rows = tableBody.getElementsByTagName("tr");
|
||||
|
||||
Array.from(rows).forEach((row) => {
|
||||
const villageNameCell = row.getElementsByTagName("td")[2]; // 3rd column (Village Name)
|
||||
|
||||
if (villageNameCell) {
|
||||
const villageName = villageNameCell.textContent || villageNameCell.innerText;
|
||||
row.style.display = villageName.toLowerCase().indexOf(searchInput) > -1 ? "" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleDropdown() {
|
||||
var dropdown = document.getElementById("dropdownContent");
|
||||
dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
|
||||
}
|
||||
|
||||
document.getElementById("dropdownContent").addEventListener("click", function (event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
// Convert number to Cr-Lakh-Rs format
|
||||
function formatAmountCRL(amount) {
|
||||
if (amount >= 10000000) { // 1 Crore
|
||||
let crore = Math.floor(amount / 10000000);
|
||||
let lakh = Math.floor((amount % 10000000) / 100000);
|
||||
let rupees = Math.floor(amount % 100000);
|
||||
return `${crore} Cr ${lakh} Lakh ${rupees} Rs`;
|
||||
} else if (amount >= 100000) { // 1 Lakh
|
||||
let lakh = Math.floor(amount / 100000);
|
||||
let rupees = Math.floor(amount % 100000);
|
||||
return `${lakh} Lakh ${rupees} Rs`;
|
||||
} else {
|
||||
return `${amount.toFixed(2)} Rs`;
|
||||
}
|
||||
}
|
||||
// Convert number to Cr or Lakh dynamically
|
||||
function formatAmountCRL(amount) {
|
||||
if (amount >= 10000000) { // 1 Crore
|
||||
return (amount / 10000000).toFixed(2) + ' Cr';
|
||||
} else if (amount >= 100000) { // 1 Lakh
|
||||
return (amount / 100000).toFixed(2) + ' Lakh';
|
||||
} else {
|
||||
return amount.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply formatting to total row on load
|
||||
window.onload = function () {
|
||||
// Calculate totals
|
||||
let totalBOQ = 0;
|
||||
let totalBilled = 0;
|
||||
let totalToBeClaimed = 0;
|
||||
let totalCumulative = 0;
|
||||
let totalVariation = 0;
|
||||
let totalBalanceAgainstBOQ = 0;
|
||||
|
||||
const rows = document.querySelectorAll('tbody tr:not(.total-row)');
|
||||
rows.forEach(row => {
|
||||
const cells = row.querySelectorAll('td');
|
||||
|
||||
totalBOQ += parseFloat(cells[3]?.getAttribute('data-amount') || 0);
|
||||
totalBilled += parseFloat(cells[4]?.getAttribute('data-amount') || 0);
|
||||
totalToBeClaimed += parseFloat(cells[5]?.getAttribute('data-amount') || 0);
|
||||
totalCumulative += parseFloat(cells[6]?.getAttribute('data-amount') || 0);
|
||||
totalVariation += parseFloat(cells[7]?.getAttribute('data-amount') || 0);
|
||||
totalBalanceAgainstBOQ += parseFloat(cells[8]?.getAttribute('data-amount') || 0);
|
||||
});
|
||||
|
||||
document.getElementById('total-boq').textContent = formatAmountCRL(totalBOQ);
|
||||
document.getElementById('total-billed').textContent = formatAmountCRL(totalBilled);
|
||||
document.getElementById('total-to-be-claimed').textContent = formatAmountCRL(totalToBeClaimed);
|
||||
document.getElementById('total-cumulative').textContent = formatAmountCRL(totalCumulative);
|
||||
document.getElementById('total-variation').textContent = formatAmountCRL(totalVariation);
|
||||
document.getElementById('total-balance-against-boq').textContent = formatAmountCRL(totalBalanceAgainstBOQ);
|
||||
};
|
||||
|
||||
|
||||
window.onclick = function (e) {
|
||||
if (!e.target.matches('.dropdown-btn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
for (var i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user