206 lines
7.2 KiB
HTML
206 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Purchase Order Report</title>
|
||
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/subcontractor_report.css') }}">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||
|
|
<style>
|
||
|
|
h2.report-title {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #1a73e8;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 20px;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
.filter-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 20px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
select {
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
#downloadBtn, #searchBtn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
background-color: #4CAF50;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
#downloadBtn:hover, #searchBtn:hover {
|
||
|
|
background-color: #45a049;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 30px;
|
||
|
|
border-collapse: collapse;
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
padding: 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h2 class="report-title">Purchase Order Report</h2>
|
||
|
|
|
||
|
|
<div class="filter-section">
|
||
|
|
<div>
|
||
|
|
<label for="supplier_name">Select Supplier Name:</label>
|
||
|
|
<select id="supplier_name" name="supplier_name" style="width: 300px;"></select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label for="purchase_order_no">Select Purchase Order Number:</label>
|
||
|
|
<select id="purchase_order_no" name="purchase_order_no" style="width: 300px;"></select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button id="searchBtn">Search</button>
|
||
|
|
<button id="downloadBtn" style="display: none;">Download Report</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table border="1" id="purchaseorderTable" style="display: none;">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Purchase ID</th>
|
||
|
|
<th>Purchase Date</th>
|
||
|
|
<th>Supplier Name</th>
|
||
|
|
<th>Purchase Order No</th>
|
||
|
|
<th>Item Name</th>
|
||
|
|
<th>Quantity</th>
|
||
|
|
<th>Unit</th>
|
||
|
|
<th>Rate</th>
|
||
|
|
<th>Amount</th>
|
||
|
|
<th>GST Amount</th>
|
||
|
|
<th>TDS</th>
|
||
|
|
<th>Final Amount</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- JS Scripts -->
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
// Initialize Select2 for supplier_name
|
||
|
|
$('#supplier_name').select2({
|
||
|
|
placeholder: 'Search Supplier Name',
|
||
|
|
ajax: {
|
||
|
|
url: '/get_supplier_names',
|
||
|
|
data: function (params) {
|
||
|
|
return { q: params.term };
|
||
|
|
},
|
||
|
|
processResults: function (data) {
|
||
|
|
return {
|
||
|
|
results: data.map(name => ({ id: name, text: name }))
|
||
|
|
};
|
||
|
|
},
|
||
|
|
delay: 250,
|
||
|
|
cache: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize Select2 for purchase_order_no
|
||
|
|
$('#purchase_order_no').select2({
|
||
|
|
placeholder: 'Search Purchase Order No',
|
||
|
|
ajax: {
|
||
|
|
url: '/get_purchase_order_numbers',
|
||
|
|
data: function (params) {
|
||
|
|
return {
|
||
|
|
q: params.term,
|
||
|
|
supplier_name: $('#supplier_name').val()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
processResults: function (data) {
|
||
|
|
return {
|
||
|
|
results: data.map(no => ({ id: no, text: no }))
|
||
|
|
};
|
||
|
|
},
|
||
|
|
delay: 250,
|
||
|
|
cache: true
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Search button click
|
||
|
|
$('#searchBtn').click(function () {
|
||
|
|
let supplier = $('#supplier_name').val();
|
||
|
|
let poNumber = $('#purchase_order_no').val();
|
||
|
|
|
||
|
|
if (!supplier && !poNumber) {
|
||
|
|
alert("Please select Supplier or Purchase Order No or both.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: '/get_purchase_order_data',
|
||
|
|
data: {
|
||
|
|
supplier_name: supplier,
|
||
|
|
purchase_order_no: poNumber
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
let tbody = $('#purchaseorderTable tbody');
|
||
|
|
tbody.empty();
|
||
|
|
|
||
|
|
if (data.length > 0) {
|
||
|
|
$('#purchaseorderTable').show();
|
||
|
|
$('#downloadBtn').show();
|
||
|
|
|
||
|
|
data.forEach(function (row) {
|
||
|
|
tbody.append(`
|
||
|
|
<tr>
|
||
|
|
<td>${row.purchase_id}</td>
|
||
|
|
<td>${row.purchase_date}</td>
|
||
|
|
<td>${row.supplier_name}</td>
|
||
|
|
<td>${row.purchase_order_no}</td>
|
||
|
|
<td>${row.item_name}</td>
|
||
|
|
<td>${row.quantity}</td>
|
||
|
|
<td>${row.unit}</td>
|
||
|
|
<td>${row.rate}</td>
|
||
|
|
<td>${row.amount}</td>
|
||
|
|
<td>${row.GST_Amount}</td>
|
||
|
|
<td>${row.TDS}</td>
|
||
|
|
<td>${row.final_amount}</td>
|
||
|
|
</tr>
|
||
|
|
`);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
alert("No matching purchase orders found.");
|
||
|
|
$('#purchaseorderTable').hide();
|
||
|
|
$('#downloadBtn').hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Download report
|
||
|
|
$('#downloadBtn').click(function () {
|
||
|
|
let supplier = $('#supplier_name').val();
|
||
|
|
let poNumber = $('#purchase_order_no').val();
|
||
|
|
|
||
|
|
if (!supplier && !poNumber) {
|
||
|
|
alert("Please select filters before downloading.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
let url = '/download_purchase_order_report?';
|
||
|
|
if (supplier) url += 'supplier_name=' + encodeURIComponent(supplier);
|
||
|
|
if (poNumber) url += '&purchase_order_no=' + encodeURIComponent(poNumber);
|
||
|
|
|
||
|
|
window.location.href = url;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|