Hugging Face's logo

Spaces:
lokeshloki143
/
lokesh143
Sleeping

App Files Community
lokesh143 / templates /combined_summary.html
lokeshloki143's picture
lokeshloki143
Update templates/combined_summary.html
ac923cc verified
raw
history blame contribute delete
11.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Summary and Invoice</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
.invoice-section {
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 24px;
margin-bottom: 24px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.invoice-section.hidden {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
.invoice-header {
text-align: center;
margin-bottom: 24px;
}
.invoice-header h1 {
font-size: 1.75rem;
font-weight: 700;
color: #1F2937;
}
.invoice-header p {
color: #6B7280;
font-size: 0.875rem;
}
.invoice-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.invoice-details p {
font-size: 0.875rem;
color: #1F2937;
}
.invoice-details p span {
font-weight: 600;
}
.invoice-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
.invoice-table th, .invoice-table td {
border: 1px solid #E5E7EB;
padding: 8px;
text-align: left;
font-size: 0.875rem;
}
.invoice-table th {
background: #F9FAFB;
font-weight: 600;
color: #1F2937;
}
.invoice-table td {
color: #1F2937;
}
.invoice-table .total-row {
font-weight: 600;
background: #FFF7ED;
}
.invoice-footer {
text-align: center;
color: #6B7280;
font-size: 0.875rem;
margin-top: 16px;
}
.invoice-footer p {
margin: 4px 0;
}
.invoice-toggle-btn, .invoice-download-btn {
display: inline-block;
padding: 10px 20px;
background-color: #FFB347;
color: #FFFFFF;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
margin: 10px;
transition: background-color 0.3s ease;
}
.invoice-toggle-btn:hover, .invoice-download-btn:hover {
background-color: #FF9E2C;
}
.back-to-menu {
display: flex;
align-items: center;
padding: 14px 24px;
background: linear-gradient(45deg, #FFA07A, #FFB347);
color: #FFFFFF;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.back-to-menu:hover {
background: linear-gradient(45deg, #FF8C61, #FF9E2C);
transform: translateY(-1px);
}
@media (max-width: 768px) {
.invoice-details {
grid-template-columns: 1fr;
}
.invoice-table th, .invoice-table td {
font-size: 0.75rem;
padding: 6px;
}
.invoice-toggle-btn, .invoice-download-btn {
padding: 8px 16px;
font-size: 0.875rem;
}
}
</style>
</head>
<body class="bg-gray-50">
<a href="{{ url_for('menu.menu') }}" class="back-to-menu" aria-label="Go back to menu">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6"></path>
</svg>
Back to Menu
</a>
<div class="container mx-auto p-6 pt-20">
<!-- Invoice Toggle and Download Buttons -->
<div class="text-center mb-6">
<button id="toggleInvoiceBtn" class="invoice-toggle-btn" onclick="toggleInvoice()">View Invoice</button>
<button id="downloadInvoiceBtn" class="invoice-download-btn" onclick="downloadInvoice()">Download Invoice as PDF</button>
</div>
<!-- Invoice Section -->
<div id="invoiceSection" class="invoice-section hidden">
<div class="invoice-header">
<h1>Tax Invoice</h1>
<p>ORIGINAL FOR RECIPIENT</p>
</div>
<div class="invoice-details">
<div>
<p><span>Restaurant Name:</span> {{ restaurant.name | default('Pista House') }}</p>
<p><span>Legal Entity:</span> {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}</p>
<p><span>Address:</span> {{ restaurant.address | default('52 To 57, 69 & 70, 5-5-162 & 5-5-163, 5-5-164 & 5-5-165, Plot 1, Vanasthali Hills, Saheb Nagar, LB Nagar Circle 4, Vanasthalipuram, Hyderabad') }}</p>
<p><span>GSTIN:</span> {{ restaurant.gstin | default('36AATFD1209K1Z9') }}</p>
<p><span>FSSAI:</span> {{ restaurant.fssai | default('13622012000022') }}</p>
</div>
<div>
<p><span>Invoice No:</span> {{ order.id | default('247JD92F00043965') }}</p>
<p><span>Invoice Date:</span> {{ order.created_date | default('2024-12-12') }}</p>
<p><span>Customer Name:</span> {{ customer.name | default('SATHVIK GANTA') }}</p>
<p><span>Customer Email:</span> {{ customer.email | default('sathvik@example.com') }}</p>
<p><span>Customer Phone:</span> {{ customer.phone | default('9876543210') }}</p>
</div>
</div>
<table class="invoice-table">
<thead>
<tr>
<th>Item Name</th>
<th>Price (INR)</th>
</tr>
</thead>
<tbody>
{% for item in order_items %}
<tr>
<td>{{ item.name | escape }}</td>
<td>₹{{ "%.2f"|format(item.price | default(0)) }}</td>
</tr>
{% endfor %}
<tr class="total-row">
<td>Total</td>
<td>₹{{ "%.2f"|format(total_amount) }}</td>
</tr>
</tbody>
</table>
<div class="invoice-footer">
<p>Amount (in words): {{ total_amount_in_words | default('Three Hundred Eighty Seven Rupees And Forty Five Paisa Only') }}</p>
<p>Order ID: {{ order.id | default('247JD92F00043965') }}</p>
<p>Order Date: {{ order.created_date | default('2024-12-12') }}</p>
<p>For {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}</p>
<p>Authorized Signatory</p>
</div>
</div>
</div>
<script>
function toggleInvoice() {
const invoiceSection = document.getElementById('invoiceSection');
const toggleBtn = document.getElementById('toggleInvoiceBtn');
const isHidden = invoiceSection.classList.contains('hidden');
invoiceSection.classList.toggle('hidden');
toggleBtn.textContent = isHidden ? 'Hide Invoice' : 'View Invoice';
}
function downloadInvoice() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
let y = 20;
// Header
doc.setFontSize(16);
doc.text('Tax Invoice', 105, y, { align: 'center' });
y += 10;
doc.setFontSize(10);
doc.text('ORIGINAL FOR RECIPIENT', 105, y, { align: 'center' });
y += 20;
// Restaurant and Customer Details
doc.setFontSize(10);
doc.text('Restaurant Name: {{ restaurant.name | default('Pista House') }}', 10, y);
y += 10;
doc.text('Legal Entity: {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}', 10, y);
y += 10;
doc.text('Address: {{ restaurant.address | default('52 To 57, 69 & 70, 5-5-162 & 5-5-163, 5-5-164 & 5-5-165, Plot 1, Vanasthali Hills, Saheb Nagar, LB Nagar Circle 4, Vanasthalipuram, Hyderabad') }}', 10, y, { maxWidth: 90 });
y += 20;
doc.text('GSTIN: {{ restaurant.gstin | default('36AATFD1209K1Z9') }}', 10, y);
y += 10;
doc.text('FSSAI: {{ restaurant.fssai | default('13622012000022') }}', 10, y);
y -= 50;
doc.text('Invoice No: {{ order.id | default('247JD92F00043965') }}', 110, y);
y += 10;
doc.text('Invoice Date: {{ order.created_date | default('2024-12-12') }}', 110, y);
y += 10;
doc.text('Customer Name: {{ customer.name | default('SATHVIK GANTA') }}', 110, y);
y += 10;
doc.text('Customer Email: {{ customer.email | default('sathvik@example.com') }}', 110, y);
y += 10;
doc.text('Customer Phone: {{ customer.phone | default('9876543210') }}', 110, y);
y += 20;
// Table Header
doc.setFontSize(10);
const headers = ['Item Name', 'Price (INR)'];
const colWidths = [150, 40];
let x = 10;
headers.forEach((header, i) => {
doc.text(header, x, y, { maxWidth: colWidths[i] });
x += colWidths[i];
});
y += 10;
// Table Rows
{% for item in order_items %}
x = 10;
doc.text('{{ item.name | escape }}', x, y, { maxWidth: colWidths[0] });
x += colWidths[0];
doc.text('₹{{ "%.2f"|format(item.price | default(0)) }}', x, y);
y += 10;
{% endfor %}
// Total Row
x = 10;
doc.setFont('helvetica', 'bold');
doc.text('Total', x, y, { maxWidth: colWidths[0] });
x += colWidths[0];
doc.text('₹{{ "%.2f"|format(total_amount) }}', x, y);
doc.setFont('helvetica', 'normal');
y += 20;
// Footer
doc.setFontSize(10);
doc.text('Amount (in words): {{ total_amount_in_words | default('Three Hundred Eighty Seven Rupees And Forty Five Paisa Only') }}', 10, y, { maxWidth: 190 });
y += 10;
doc.text('Order ID: {{ order.id | default('247JD92F00043965') }}', 10, y);
y += 10;
doc.text('Order Date: {{ order.created_date | default('2024-12-12') }}', 10, y);
y += 10;
doc.text('For {{ restaurant.legal_name | default('DOUBLE TREE BY KVP HOSPITALITY LLP') }}', 10, y);
y += 10;
doc.text('Authorized Signatory', 10, y);
// Save PDF
doc.save('invoice_{{ order.id | default('247JD92F00043965') }}.pdf');
}
</script>
</body>
</html>