Initial commit
This commit is contained in:
369
templates/add_invoice.html
Normal file
369
templates/add_invoice.html
Normal file
@@ -0,0 +1,369 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block content %}
|
||||
<head xmlns="http://www.w3.org/1999/html">
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Add Invoice</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/invoice.css') }}">
|
||||
<script src="{{ url_for('static', filename='js/invoice.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/holdAmount.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% if success == 'true' %}
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
|
||||
✅ Invoice added successfully!
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Flash Messages -->
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-messages">
|
||||
{% for category, message in messages %}
|
||||
<div class="alert {{ category }}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="button-container">
|
||||
<button id="addButton" class="action-button">Add</button>
|
||||
<button id="displayButton" class="action-button">Display</button>
|
||||
</div>
|
||||
|
||||
<div id="addForm" style="display: none;">
|
||||
<h2>Add Invoice</h2>
|
||||
|
||||
<form id="invoiceForm" action="{{ url_for('add_invoice') }}" method="POST">
|
||||
<div class="row1">
|
||||
<div>
|
||||
<label for="subcontractor">Subcontractor Name:</label>
|
||||
<input type="text" id="subcontractor" name="subcontractor" required autocomplete="off"/>
|
||||
<input type="hidden" id="subcontractor_id" name="subcontractor_id"/>
|
||||
<div id="subcontractor_list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div>
|
||||
<label for="village">Village Name:</label>
|
||||
<select id="village" name="village" required>
|
||||
<option value="">-- Select Village --</option>
|
||||
{% for village in villages %}
|
||||
<option value="{{ village.Village_Name }}">{{ village.Village_Name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="pmc_no">PMC No:</label>
|
||||
<input type="text" id="pmc_no" name="pmc_no" required/>
|
||||
<div id="pmc_no_list" class="autocomplete-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div>
|
||||
<label for="work_type">Work Type:</label>
|
||||
<input type="text" id="work_type" name="work_type" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="invoice_details">Invoice Details:</label>
|
||||
<textarea id="invoice_details" name="invoice_details" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div>
|
||||
<label for="invoice_no">Invoice No:</label>
|
||||
<input type="text" id="invoice_no" name="invoice_no" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="invoice_date">Invoice Date:</label>
|
||||
<input type="date" id="invoice_date" name="invoice_date" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row3">
|
||||
<div>
|
||||
<label for="basic_amount">Basic Amount:</label>
|
||||
<input type="number" step="0.01" id="basic_amount" name="basic_amount" placeholder="₹ - 00.00" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="debit_amount">Debit Amount:</label>
|
||||
<input type="number" step="0.01" id="debit_amount" name="debit_amount" placeholder="₹ - 00.00" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="after_debit_amount">After Debit Amount:</label>
|
||||
<input type="number" step="0.01" id="after_debit_amount" name="after_debit_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row3">
|
||||
<div class="percentage-field">
|
||||
<label for="gst_percentage">GST %:</label>
|
||||
<input type="number" step="0.01" id="gst_percentage" name="gst_percentage" placeholder="%"/>
|
||||
<label for="gst_amount">GST Amount:</label>
|
||||
<input type="number" step="0.01" id="gst_amount" name="gst_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="amount">Amount:</label>
|
||||
<input type="number" step="0.01" id="amount" name="amount" placeholder="₹ - 00.00" readonly required/>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="tds_percentage">TDS %:</label>
|
||||
<input type="number" step="0.01" id="tds_percentage" name="tds_percentage" placeholder="%"/>
|
||||
<label for="tds_amount">TDS Amount:</label>
|
||||
<input type="number" step="0.01" id="tds_amount" name="tds_amount" placeholder="₹ - 00.00" readonly required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row3">
|
||||
<div class="percentage-field">
|
||||
<label for="sd_percentage">SD %:</label>
|
||||
<input type="number" step="0.01" id="sd_percentage" name="sd_percentage" placeholder="%"/>
|
||||
<label for="sd_amount">SD Amount:</label>
|
||||
<input type="number" step="0.01" id="sd_amount" name="sd_amount" placeholder="₹ - 00.00" readonly required>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="commission_percentage">On Commission %:</label>
|
||||
<input type="number" step="0.01" id="commission_percentage" name="commission_percentage" placeholder="%"/>
|
||||
<label for="on_commission">On Commission:</label>
|
||||
<input type="number" step="0.01" id="on_commission" name="on_commission" placeholder="₹ - 00.00" readonly required>
|
||||
</div>
|
||||
<div class="percentage-field">
|
||||
<label for="hydro_percentage">Hydro Testing %:</label>
|
||||
<input type="number" step="0.01" id="hydro_percentage" name="hydro_percentage" placeholder="%"/>
|
||||
<label for="hydro_testing">Hydro Testing:</label>
|
||||
<input type="number" step="0.01" id="hydro_testing" name="hydro_testing" placeholder="₹ - 00.00" readonly required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hold-row">
|
||||
<button type="button" id="add_hold_amount" class="button">+ Add Hold Amount</button>
|
||||
</div>
|
||||
|
||||
<!-- Dynamically added hold amount fields -->
|
||||
<div id="hold_amount_container"></div>
|
||||
|
||||
<div class="row2">
|
||||
<div>
|
||||
<label for="gst_sd_amount">GST SD Amount:</label>
|
||||
<input type="number" step="0.01" id="gst_sd_amount" name="gst_sd_amount" placeholder="₹ - 00.00" required/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="final_amount">Final Amount:</label>
|
||||
<input type="number" step="0.01" id="final_amount" name="final_amount" placeholder="₹ - 00.00" required/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="button">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="addTable" style="display: none;">
|
||||
<!-- Invoice Table Section -->
|
||||
<div class="search-container">
|
||||
<h2>Invoice List</h2>
|
||||
<input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()">
|
||||
{% if invoices %}
|
||||
<table class="invoice-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Invoice Id</th>
|
||||
<th>SubContractor Name</th>
|
||||
<th>PMC No</th>
|
||||
<th>Village</th>
|
||||
<th>Work Type</th>
|
||||
<th>Invoice Details</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Invoice No</th>
|
||||
<th>Basic Amount</th>
|
||||
<th>Debit Amount</th>
|
||||
<th>After Debit Amount</th>
|
||||
<th>Amount</th>
|
||||
<th>GST Amount</th>
|
||||
<th>TDS Amount</th>
|
||||
<th>SD Amount</th>
|
||||
<th>On Commission</th>
|
||||
<th>Hydro Testing</th>
|
||||
<th>GST SD Amount</th>
|
||||
<th>Final Amount</th>
|
||||
<th>Update</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for invoice in invoices %}
|
||||
<tr>
|
||||
<td>{{ invoice.Invoice_Id }}</td>
|
||||
<td>{{ invoice.Contractor_Name }}</td>
|
||||
<td>{{ invoice.PMC_No }}</td>
|
||||
<td>{{ invoice.Village_Name or 'N/A' }}</td>
|
||||
<td>{{ invoice.Work_Type }}</td>
|
||||
<td>{{ invoice.Invoice_Details }}</td>
|
||||
<td>{{ invoice.Invoice_Date }}</td>
|
||||
<td>{{ invoice.Invoice_No }}</td>
|
||||
<td>{{ invoice.Basic_Amount }}</td>
|
||||
<td>{{ invoice.Debit_Amount }}</td>
|
||||
<td>{{ invoice.After_Debit_Amount }}</td>
|
||||
<td>{{ invoice.Amount }}</td>
|
||||
<td>{{ invoice.GST_Amount }}</td>
|
||||
<td>{{ invoice.TDS_Amount }}</td>
|
||||
<td>{{ invoice.SD_Amount }}</td>
|
||||
<td>{{ invoice.On_Commission }}</td>
|
||||
<td>{{ invoice.Hydro_Testing }}</td>
|
||||
<td>{{ invoice.GST_SD_Amount }}</td>
|
||||
<td>{{ invoice.Final_Amount }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('edit_invoice', invoice_id=invoice.Invoice_Id) }}">
|
||||
<img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" alt="Edit" class="icon">
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('delete_invoice', invoice_id=invoice.Invoice_Id) }}"
|
||||
onclick="return confirm('Are you sure?')">
|
||||
<img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" alt="Delete" class="icon">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<p>No invoices found.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Get all the input fields
|
||||
const basicAmount = document.getElementById('basic_amount');
|
||||
const debitAmount = document.getElementById('debit_amount');
|
||||
const afterDebitAmount = document.getElementById('after_debit_amount');
|
||||
const amount = document.getElementById('amount');
|
||||
|
||||
// Percentage fields
|
||||
const gstPercentage = document.getElementById('gst_percentage');
|
||||
const gstAmount = document.getElementById('gst_amount');
|
||||
const tdsPercentage = document.getElementById('tds_percentage');
|
||||
const tdsAmount = document.getElementById('tds_amount');
|
||||
const sdPercentage = document.getElementById('sd_percentage');
|
||||
const sdAmountInput = document.getElementById('sd_amount');
|
||||
const commissionPercentage = document.getElementById('commission_percentage');
|
||||
const onCommission = document.getElementById('on_commission');
|
||||
const hydroPercentage = document.getElementById('hydro_percentage');
|
||||
const hydroTesting = document.getElementById('hydro_testing');
|
||||
const gstSdAmount = document.getElementById('gst_sd_amount');
|
||||
const finalAmount = document.getElementById('final_amount');
|
||||
|
||||
// Calculate after debit amount when basic or debit amount changes
|
||||
function calculateAfterDebitAmount() {
|
||||
const basic = parseFloat(basicAmount.value) || 0;
|
||||
const debit = parseFloat(debitAmount.value) || 0;
|
||||
const afterDebit = basic - debit;
|
||||
afterDebitAmount.value = afterDebit.toFixed(2);
|
||||
calculateGST();
|
||||
}
|
||||
|
||||
// Calculate GST and Amount
|
||||
function calculateGST() {
|
||||
const baseAmount = parseFloat(afterDebitAmount.value) || 0;
|
||||
|
||||
if (gstPercentage.value) {
|
||||
const gstPerc = parseFloat(gstPercentage.value) || 0;
|
||||
const gstAmt = (baseAmount * gstPerc) / 100;
|
||||
gstAmount.value = gstAmt.toFixed(2);
|
||||
gstSdAmount.value = gstAmt.toFixed(2);
|
||||
|
||||
// Calculate Amount (After Debit + GST)
|
||||
amount.value = (baseAmount + gstAmt).toFixed(2);
|
||||
} else {
|
||||
amount.value = baseAmount.toFixed(2);
|
||||
}
|
||||
|
||||
calculateOtherDeductions();
|
||||
}
|
||||
|
||||
// Calculate other deductions (TDS, SD, Commission, Hydro)
|
||||
function calculateOtherDeductions() {
|
||||
const baseAmount = parseFloat(afterDebitAmount.value) || 0;
|
||||
|
||||
// Calculate TDS
|
||||
if (tdsPercentage.value) {
|
||||
const tdsPerc = parseFloat(tdsPercentage.value) || 0;
|
||||
const tdsAmt = (baseAmount * tdsPerc) / 100;
|
||||
tdsAmount.value = tdsAmt.toFixed(2);
|
||||
}
|
||||
|
||||
// Calculate SD
|
||||
if (sdPercentage.value) {
|
||||
const sdPerc = parseFloat(sdPercentage.value) || 0;
|
||||
const sdAmt = (baseAmount * sdPerc) / 100;
|
||||
sdAmountInput.value = sdAmt.toFixed(2);
|
||||
}
|
||||
|
||||
// Calculate Commission
|
||||
if (commissionPercentage.value) {
|
||||
const commPerc = parseFloat(commissionPercentage.value) || 0;
|
||||
const commAmt = (baseAmount * commPerc) / 100;
|
||||
onCommission.value = commAmt.toFixed(2);
|
||||
}
|
||||
|
||||
// Calculate Hydro Testing
|
||||
if (hydroPercentage.value) {
|
||||
const hydroPerc = parseFloat(hydroPercentage.value) || 0;
|
||||
const hydroAmt = (baseAmount * hydroPerc) / 100;
|
||||
hydroTesting.value = hydroAmt.toFixed(2);
|
||||
}
|
||||
|
||||
calculateFinalAmount();
|
||||
}
|
||||
|
||||
// Calculate final amount
|
||||
function calculateFinalAmount() {
|
||||
const amt = parseFloat(amount.value) || 0;
|
||||
const tds = parseFloat(tdsAmount.value) || 0;
|
||||
const sd = parseFloat(sdAmountInput.value) || 0;
|
||||
const commission = parseFloat(onCommission.value) || 0;
|
||||
const hydro = parseFloat(hydroTesting.value) || 0;
|
||||
const gstSd = parseFloat(gstSdAmount.value) || 0;
|
||||
|
||||
// Get hold amounts
|
||||
let totalHold = 0;
|
||||
document.querySelectorAll('input[name="hold_amount[]"]').forEach(input => {
|
||||
totalHold += parseFloat(input.value) || 0;
|
||||
});
|
||||
|
||||
// Final Amount = Amount - TDS - SD - Commission - Hydro - GST SD - Hold Amounts
|
||||
const final = amt - tds - sd - commission - hydro - gstSd - totalHold;
|
||||
finalAmount.value = final.toFixed(2);
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
basicAmount.addEventListener('input', calculateAfterDebitAmount);
|
||||
debitAmount.addEventListener('input', calculateAfterDebitAmount);
|
||||
|
||||
// Percentage fields
|
||||
gstPercentage.addEventListener('input', calculateGST);
|
||||
tdsPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
sdPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
commissionPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
hydroPercentage.addEventListener('input', calculateOtherDeductions);
|
||||
|
||||
// Listen for changes in hold amounts
|
||||
document.addEventListener('holdAmountChanged', calculateFinalAmount);
|
||||
});
|
||||
|
||||
// Optional JS for auto-hiding flash
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.alert').forEach(el => el.style.display = 'none');
|
||||
}, 5000);
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user