forked from uncloud/uncloud
190 lines
12 KiB
HTML
190 lines
12 KiB
HTML
{% extends "nextcloud/base.html" %}
|
|
|
|
{% load static i18n compress mathfilters %}
|
|
|
|
{% block title %} Bills {% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="bg-white shadow-md rounded p-4 my-4">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
|
|
<li class="nav-item"> <a class="nav-link" id="first-tab" href="{% url 'uncloud_pay:billing' %}">{% trans "Transaction History"%}</a> </li>
|
|
<li class="nav-item"> <a class="nav-link active" id="second-tab" href="{% url 'uncloud_pay:bills' %}">{% trans "Bills"%}</a> </li>
|
|
<li class="nav-item"> <a class="nav-link" id="fourth-tab" href="{% url 'uncloud_pay:cards' %}">{% trans "Payment Methods"%}</a> </li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="tab-content" id="myTabContentVertical">
|
|
<div class="tab-pane fade show active" id="bills" role="tabpanel" aria-labelledby="bills">
|
|
<div class="">
|
|
<!-- Filter
|
|
============================================= -->
|
|
<div class="row">
|
|
<div class="col mb-2">
|
|
<form id="filterBills" method="post">
|
|
<div class="form-row">
|
|
<!-- Date Range
|
|
========================= -->
|
|
<div class="col-sm-6 col-md-6 form-group">
|
|
<h3 class="text-5 font-weight-400 d-flex align-items-center px-4 mb-4">{% trans "Bills"%}</h3>
|
|
<!-- <input id="dateRange" type="text" class="form-control" placeholder="Date Range">
|
|
<span class="icon-inside"><i class="fas fa-calendar-alt"></i></span> -->
|
|
</div>
|
|
<div class="col col-sm-6 text-right text-2">
|
|
<div class="featured-box float-right style-3">
|
|
<div class="featured-box-icon text-9 text-light"> <i class="fas fa-wallet"></i> </div>
|
|
<h3 class="text-6 font-weight-400 text-dark">{{balance}} CHF</h3>
|
|
<p class="text-muted text-3 opacity-8">{% trans "Available Balance"%}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Filter End -->
|
|
|
|
<!-- All Transactions
|
|
============================================= -->
|
|
<div class="px-2 py-4 mb-4">
|
|
<!-- Title
|
|
=============================== -->
|
|
<div class="transaction-title mb-1 py-2">
|
|
<div class="row">
|
|
<div class="col-3 col-sm-3 text-center"><span class="">{% trans "Bill No."%}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"><span class="">{% trans "Creation Date"%}</span></div>
|
|
<div class="col-2 col-sm-2 text-center">{% trans "Amount"%}</div>
|
|
<div class="col-2 col-sm-2 text-center">{% trans "Due Date"%}</div>
|
|
<div class="col-2 col-sm-2 text-center">{% trans "Status"%}</div>
|
|
<div class="col-1 col-sm-1 text-center"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Title End -->
|
|
|
|
<!-- Transaction List
|
|
=============================== -->
|
|
<div class="bills-list">
|
|
<div class="accordion" id="accordionDefault">
|
|
{% for bill in object_list %}
|
|
<div class="card">
|
|
<div class="card-header" id="heading{{bill.id}}">
|
|
<a href="#" data-toggle="collapse" data-target="#collapse{{bill.id}}" aria-expanded="false" aria-controls="collapse{{bill.id}}" class="collapsed">
|
|
<div class="row align-items-center flex-row">
|
|
<div class="col-3 col-sm-3 text-center"> <span class="text-2 font-weight-400">#{{bill.id}}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"> <span class="text-2 font-weight-300">{{bill.creation_date|date:"Y-m-d"}}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"><span class="text-2 font-weight-300">{{bill.sum}}</span><span class="text-1 text-uppercase"> {{bill.currency}}</span></div>
|
|
<div class="col-2 col-sm-2 text-center"> <span class="text-2 font-weight-300">{{bill.due_date|date:"Y-m-d"}}</span> </div>
|
|
<div class="col-2 col-sm-2 text-center text-1">
|
|
<span class="px-2 py-1 text-white bill-{{bill.status}}" data-toggle="tooltip" data-original-title="{{bill.status}}">{{bill.get_status_display}}</span>
|
|
</div>
|
|
<div class="col-1 col-sm-1 text-center text-3">
|
|
<form method="get" action="{% url 'uncloud_pay:invoice_download' bill_id=bill.id %}">
|
|
<button class="download-bill border border-primary" type="submit"><span class="text-primary" data-toggle="tooltip" data-original-title="Download"><i class="text-primary fas fa-file-download"></i></span></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div id="collapse{{bill.id}}" class="collapse" aria-labelledby="{{bill.id}}" data-parent="#accordionDefault">
|
|
<div class="mt-n1 card-body">
|
|
<h6>Bill Lines:</h6>
|
|
<div class="table-responsive">
|
|
<table class="bg-white table table-bordered text-1">
|
|
<thead>
|
|
<tr>
|
|
<th>Order</th>
|
|
<th>Description</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>Subtotal</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for record in bill.bill_records.all %}
|
|
<tr>
|
|
<td>#{{record.order.id}}</td>
|
|
<td>{{record.description}}</td>
|
|
<td>{{record.starting_date|date:"Y-m-d"}}</td>
|
|
<td>{{record.ending_date|date:"Y-m-d"}}</td>
|
|
<td>{{record.subtotal}}</td>
|
|
<td>{{record.sum}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6"></div>
|
|
<div class="col-sm-6">
|
|
<div class="row text-1 text-right">
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><strong>{% trans "Subtotal" %}</strong></p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><strong class="pull-right">{{bill.subtotal}}</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="row text-right">
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><span>{{bill.billing_address.get_country_display}} VAT {{ bill.vat_rate|mul:100 }}%</span></p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><span class="pull-right" >{{bill.vat_amount}}</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6"></div>
|
|
<div class="col-sm-6">
|
|
<div class="row text-1 text-right">
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><strong>{% trans "Total" %}</strong></p>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6 col-xs-6">
|
|
<p><strong class="pull-right">{{bill.sum|floatformat:2}} CHF</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%endfor%}
|
|
</div>
|
|
</div>
|
|
<!-- Transaction List End -->
|
|
|
|
<!-- Pagination will handled later
|
|
============================================= -->
|
|
<ul class="pagination justify-content-center mt-4 mb-0" style="display: none;">
|
|
<li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a> </li>
|
|
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item active"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item d-flex align-content-center flex-wrap text-muted text-5 mx-1">......</li>
|
|
<li class="page-item"><a class="page-link" href="#">15</a></li>
|
|
<li class="page-item"> <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a> </li>
|
|
</ul>
|
|
<!-- Paginations end -->
|
|
|
|
</div>
|
|
<!-- All Transactions End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block js_extra %}
|
|
<script>
|
|
$('.download-bill').click(function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
$(e.target).closest("form").submit();
|
|
});
|
|
</script>
|
|
|
|
{% endblock js_extra %} |