init projectmycelium
This commit is contained in:
mik-tf
210
src/views/marketplace/order_invoice.html
Normal file
210
src/views/marketplace/order_invoice.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Order Invoice - Project Mycelium</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: #f8f9fa; }
|
||||
.navbar-brand img { height: 30px; }
|
||||
.invoice-header {
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||||
border: 2px solid #2196f3;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.invoice-details {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.invoice-number { font-size: 1.5rem; font-weight: bold; color: #2196f3; }
|
||||
.card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||||
.btn-primary { background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%); border: none; }
|
||||
.btn-primary:hover { background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%); }
|
||||
.invoice-table th { background-color: #f8f9fa; border-top: none; }
|
||||
.total-amount { font-size: 2rem; font-weight: bold; color: #2196f3; }
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
body { background-color: white !important; }
|
||||
.card, .invoice-details { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark no-print">
|
||||
<div class="container">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
<img src="/static/images/logo_dark.png" alt="ThreeFold Logo" class="me-2">
|
||||
<span>Project Mycelium</span>
|
||||
</a>
|
||||
<div class="navbar-nav ms-auto">
|
||||
<a class="nav-link" href="/marketplace">
|
||||
<i class="bi bi-shop me-1"></i>Marketplace
|
||||
</a>
|
||||
<a class="nav-link" href="/orders">
|
||||
<i class="bi bi-list-ul me-1"></i>My Orders
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-4 no-print">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/" class="text-decoration-none">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="/marketplace" class="text-decoration-none">Marketplace</a></li>
|
||||
<li class="breadcrumb-item"><a href="/orders" class="text-decoration-none">Orders</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Order Invoice</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{% if order %}
|
||||
<!-- Invoice Header -->
|
||||
<div class="invoice-header p-4 mb-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
<h1 class="h2 mb-2">
|
||||
<i class="bi bi-receipt me-2"></i>THREEFOLD MARKETPLACE INVOICE
|
||||
</h1>
|
||||
<div class="invoice-number">INV-{{ order.order_id }}</div>
|
||||
</div>
|
||||
<div class="col-md-4 text-md-end">
|
||||
<div class="mb-2"><strong>Invoice Date:</strong> {{ invoice_date }}</div>
|
||||
<div><strong>Due Date:</strong> {{ due_date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Invoice Details -->
|
||||
<div class="col-lg-8">
|
||||
<div class="invoice-details p-4 mb-4">
|
||||
<!-- Seller and Bill To -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">SOLD BY:</h6>
|
||||
<div class="fw-bold">Project Mycelium</div>
|
||||
<div>support@threefold.io</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">BILL TO:</h6>
|
||||
{% if user %}
|
||||
<div class="fw-bold">{{ user.email }}</div>
|
||||
{% if user.name %}<div>{{ user.name }}</div>{% endif %}
|
||||
{% if user.country %}<div>{{ user.country }}</div>{% endif %}
|
||||
{% else %}
|
||||
<div class="fw-bold">Account Holder</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Items Table -->
|
||||
<div class="mb-4">
|
||||
<h6 class="text-muted mb-3">ITEMS:</h6>
|
||||
<table class="table invoice-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th class="text-center">Qty</th>
|
||||
<th class="text-center">Unit Price</th>
|
||||
<th class="text-end">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in order.items %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ item.product_name }}</div>
|
||||
<small class="text-muted">{{ item.provider_name }} • {{ item.product_category|title }}</small>
|
||||
</td>
|
||||
<td class="text-center">{{ item.quantity }}</td>
|
||||
<td class="text-center">{{ item.unit_price }}</td>
|
||||
<td class="text-end">{{ item.total_price }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Totals -->
|
||||
<div class="border-top pt-4 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-3">PAYMENT DETAILS:</h6>
|
||||
<p class="mb-2">Payment Method: <strong>{{ order.payment_method }}</strong></p>
|
||||
<p class="mb-2">Currency: <strong>{{ order.currency }}</strong></p>
|
||||
<p class="mb-0">Invoice generated: <small class="text-muted">{{ generated_date }}</small></p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="text-md-end">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Subtotal:</span>
|
||||
<span>{{ order.subtotal }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="text-muted">Platform fee:</span>
|
||||
<span class="text-muted">Free</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="fw-bold fs-5">TOTAL AMOUNT:</span>
|
||||
<span class="total-amount">{{ order.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions Sidebar -->
|
||||
<div class="col-lg-4 no-print">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-gear me-2"></i>Invoice Actions</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/orders/{{ order.order_id }}" class="btn btn-primary">
|
||||
<i class="bi bi-arrow-left me-2"></i>Back to Order
|
||||
</a>
|
||||
<button class="btn btn-success js-print">
|
||||
<i class="bi bi-printer me-2"></i>Print Invoice
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
<h6 class="mb-3">Need Help?</h6>
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/docs" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-book me-1"></i>Documentation
|
||||
</a>
|
||||
<a href="https://threefoldfaq.crisp.help/en/" class="btn btn-sm btn-outline-success" target="_blank">
|
||||
<i class="bi bi-chat-dots me-1"></i>Live Chat
|
||||
</a>
|
||||
<a href="mailto:support@threefold.io" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-envelope me-1"></i>Email Support
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-exclamation-triangle fs-1 text-warning mb-3"></i>
|
||||
<h3>Order Not Found</h3>
|
||||
<p class="text-muted">The requested order could not be found.</p>
|
||||
<a href="/orders" class="btn btn-primary">View All Orders</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="application/json" id="invoice-data">{}</script>
|
||||
<script src="/static/js/print-utils.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user