amal/uncloud
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

NextCloud Integration

Browse source
This commit is contained in:
amalelshihaby 2021-09-10 09:58:42 +02:00
commit 5f4b10cb82
113 changed files with 18992 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

190
nextcloud/templates/uncloud_pay/bills.html Normal file
View file

@ -0,0 +1,190 @@
{% 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 %}

210
nextcloud/templates/uncloud_pay/cards.html Normal file
View file

@ -0,0 +1,210 @@
{% extends "nextcloud/base.html" %}
{% load static i18n compress %}
{% block title %} Payment Methods {% 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" id="second-tab" href="{% url 'uncloud_pay:bills' %}">{% trans "Bills"%}</a> </li>
<li class="nav-item"> <a class="nav-link active" id="fourth-tab" href="{% url 'uncloud_pay:cards' %}">{% trans "Payment Methods"%}</a> </li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content my-3" id="myTabContentVertical">
<div class="tab-pane fade show active" id="cards" role="tabpanel" aria-labelledby="cards">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="featured-box style-3 float-right mb-4">
<div class="featured-box-icon text-17 text-light"> <i class="fas fa-wallet"></i> </div>
<h3 class="text-7 font-weight-400">{{balance}} CHF</h3>
<a href="" data-target="#make-deposit" data-toggle="modal">{% trans "Make a deposit"%}</a>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-4 mx-n8">
<div class="row">
<div class="col-12">
<h3 class="text-4 font-weight-400 mb-4">{% trans "Credit or Debit Cards"%} <span class="text-muted text-3">({% trans "for payments"%})</span></h3>
<div class="row">
{% for card in object_list %}
<div class="col-12 col-sm-6 col-lg-4 mt-2">
<div class="account-card {% if card.active %}account-card-primary{%endif%} text-white rounded p-3 mb-4 mb-lg-0">
<p class="text-4">XXXX-XXXX-XXXX-{{card.last4}}</p>
<p class="d-flex align-items-center"> <span class="account-card-expire text-uppercase d-inline-block opacity-7 mr-2">Valid<br>
thru<br>
</span> <span class="text-4 opacity-9">{{card.expiry_date|date:"m"}}/{{card.expiry_date|date:"y"}}</span> {% if card.active %}<span class="badge badge-warning text-0 font-weight-500 rounded-pill px-2 ml-auto">{% trans "Primary"%}</span>{%endif%} </p>
<p class="d-flex align-items-center m-0"> <span class="text-uppercase font-weight-500">{{card.card_name}}</span> <img class="ml-auto" src="{% static 'nextcloud/images/' %}{{card.brand}}.png" alt="visa" title=""> </p>
<div class="account-card-overlay rounded" data-card="{{card.id}}"> <a href="#" data-href="{% url 'payments:card_activate'%}" class="activate-btn text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-edit"></i></span>{% trans "Set As Primary"%}</a> <a href="#" data-href="{% url 'stripecreditcard-detail' card.id %}" class="delete-card text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-minus-circle"></i></span>{% trans "Delete"%}</a> </div>
</div>
</div>
{% endfor %}
<div class="col-12 col-sm-6 col-lg-4 mt-2"> <a href="" data-target="#add-new-card-details" data-toggle="modal" class="account-card-new d-flex align-items-center rounded h-100 p-3 mb-4 mb-lg-0">
<p class="w-100 text-center line-height-4 m-0"> <span class="text-3"><i class="fas fa-plus-circle"></i></span> <span class="d-block text-body text-3">Add New Card</span> </p>
</a> </div>
</div>
</div>
</div>
</div>
<div id="make-deposit" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-400">{% trans "Make a deposit"%}</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body p-4">
<form id="make_deposit" method="post" action="{% url 'payment-list' %}">
{% csrf_token %}
<input id="type" name="type" type="hidden" value="deposit">
<input id="currency" name="currency" type="hidden" value="CHF">
<div class="form-group">
<label for="amount">{% trans "Amount *"%}</label>
<input id="amount" name="amount" class="form-control" required type="number" min={{min_amount}} value="">
</div>
<div class="form-group">
<label for="notes">{% trans "Notes"%}</label>
<textarea id="notes" name="notes" class="form-control"></textarea>
</div>
<button class="btn btn-primary float-right mt-2" id="deposit-button" type="submit">
{% trans "Confirm"%}
</button>
</form>
</div>
</div>
</div>
</div>
<div id="add-new-card-details" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-400">{% trans "Add a Card"%}</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body p-4">
<form id="addCard" method="post" data-secret="{{ client_secret }}">
<div id="card-element"></div>
<div id="card-errors"></div>
<div class="form-group">
<label for="cardNumber">{% trans "Card Number"%}</label>
<div id="card-number-element" class="field my-input form-control"></div>
</div>
<div class="form-row">
<div class="col-lg-6">
<div class="form-group">
<label for="expiryDate">{% trans "Expiry Date"%}</label>
<div id="card-expiry-element" class="field my-input form-control"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="cvvNumber">{% trans "CVV"%} <span class="text-info ml-1" data-toggle="tooltip" data-original-title="For Visa/Mastercard, the three-digit CVV number is printed on the signature panel on the back of the card immediately after the card's account number. For American Express, the four-digit CVV number is printed on the front of the card above the card account number."><i class="fas fa-question-circle"></i></span></label>
<div id="card-cvc-element" class="field my-input form-control"></div> </div>
</div>
</div>
<div class="form-group">
<label for="cardHolderName">{% trans "Card Holder Name"%}</label>
<input type="text" class="form-control" data-bv-field="cardholdername" id="cardholder-name" required="" value="" placeholder="Card Holder Name">
</div>
<div class="card-element brand text-6">
<i class="fab fa-credit-card" id="brand-icon"></i>
</div>
<button class="btn btn-primary float-right mt-2" id="card-button" type="submit">{% trans "Add Card"%}</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js_extra %}
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('{{ stripe_pk }}');
var setupForm = document.getElementById('addCard');
var clientSecret = setupForm.dataset.secret;
window.cardNumberElement = loadStripe(stripe);
var cardholderName = document.getElementById('cardholder-name');
var messageContainer = document.getElementById('card-errors');
setupForm.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardSetup(
clientSecret,
{
payment_method: {
card: window.cardNumberElement,
billing_details: {
name: cardholderName.value,
},
},
}
).then(function(result) {
if (result.error) {
var message = document.createTextNode('Error:' + result.error.message);
messageContainer.appendChild(message);
} else {
location.reload();
}
});
});
$('.activate-btn').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'POST',
url: url,
data: {card_id: card_id, csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$('.delete-card').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'DELETE',
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
},
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$("#make_deposit").submit(function(e){
var form = $(this);
$('#deposit-button').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
success: function(response) {
location.reload();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseJSON);
$('#deposit-button').html("{% trans 'Confirm'%}").attr('disabled', false);
}
});
return false;
});
</script>
{% endblock js_extra %}

51
nextcloud/templates/uncloud_pay/order_success.html Normal file
View file

@ -0,0 +1,51 @@
{% extends "nextcloud/base.html" %}
{% load static i18n %}
{% block title %} Request Details {% endblock %}
{% block content %}
<div class="row mt-3 mb-4">
<div class="col-lg-12 mx-auto mb-4">
<div class="row widget-steps">
<div class="col-4 step complete">
<div class="step-name">{%trans "Details" %}</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a href="#" class="step-dot"></a>
</div>
<div class="col-4 step complete">
<div class="step-name">{%trans "Confirm" %}</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a href="#" class="step-dot"></a>
</div>
<div class="col-4 step complete">
<div class="step-name">{%trans "Success" %}</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a href="#" class="step-dot"></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
<div class="bg-white text-center shadow-sm rounded p-3 pt-sm-4 pb-sm-5 px-sm-5 mb-4">
<div class="my-4">
<p class="text-success text-20 line-height-07"><i class="fas fa-check-circle"></i></p>
<p class="text-success text-8 font-weight-500 line-height-07">{%trans "Success!" %}</p>
<p class="lead">{%trans "Order has been successfully added. Your VM will be up and running in a few moments. " %}</p>
</div>
<p class="text-3 mb-4">{%trans "We will send you a confirmation email as soon as it is ready." %} {%trans "Go to your dashboard" %} <a class="btn-link" href="{% url 'uncloud_pay:bills' %}">{%trans "Billing" %}</a>.</p>
<a href="{% url 'uncloud_pay:invoice_download' bill_id=bill_id %}" class="btn btn-white border border-success text-success" role="button"><i class="fas fa-print"></i> {%trans "Download Invoice" %}</a>
</div>
</div>
</div>
{% endblock %}
{% block js_extra %}
{% endblock js_extra %}

124
nextcloud/templates/uncloud_pay/payments.html Normal file
View file

@ -0,0 +1,124 @@
{% extends "nextcloud/base.html" %}
{% load static i18n compress %}
{% block title %} Payments {% 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 active" id="first-tab" href="{% url 'uncloud_pay:billing' %}">{% trans "Transaction History"%}</a> </li>
<li class="nav-item"> <a class="nav-link" 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 my-3" id="myTabContentVertical">
<div class="tab-pane fade show active" id="transactions" role="tabpanel" aria-labelledby="transactions">
<div class="">
<!-- Filter
============================================= -->
<div class="row">
<div class="col mb-2">
<form id="filterTransactions" method="post">
<div class="form-row">
<!-- Date Range
========================= -->
<div class="col-sm-6 col-md-6 form-group">
<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>
<!-- All Filters
================================ -->
<div class="col-12 mb-3" id="allFilters">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="allTransactions" name="filter" data-url="{% url 'uncloud_pay:billing' %}" class="custom-control-input" value="all" {% if not type %} checked=""{% endif %}>
<label class="custom-control-label" for="allTransactions">{% trans "All"%}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="withdrawal" name="filter" class="custom-control-input" data-url="{% url 'uncloud_pay:billing' %}?type=withdraw" value="withdraw" {% if type == 'withdraw' %} checked=""{% endif %}>
<label class="custom-control-label" for="withdrawal">{% trans "Withdrawal"%}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="deposit" name="filter" class="custom-control-input" data-url="{% url 'uncloud_pay:billing' %}?type=deposit" value="deposit" {% if type == 'deposit' %} checked=""{% endif %}>
<label class="custom-control-label" for="deposit">{% trans "Deposit"%}</label>
</div>
</div>
<!-- All Filters End -->
</div>
</form>
</div>
</div>
<!-- Filter End -->
<!-- All Transactions
============================================= -->
<div class="bg-white shadow-sm border border-light rounded py-4 mb-4">
<h3 class="text-5 font-weight-400 d-flex align-items-center px-4 mb-4">{% trans "Payment Moves"%}</h3>
<!-- Title
=============================== -->
<div class="transaction-title py-2 px-4">
<div class="row">
<div class="col-1 col-sm-1 text-center"><span class="">{% trans "ID"%}</span></div>
<div class="col-2 col-sm-2 text-center"><span class="">{% trans "Date"%}</span></div>
<div class="col col-sm-4">{% trans "Description" %}</div>
<div class="col-auto col-sm-2 d-none d-sm-block text-center">{% trans "Type"%}</div>
<div class="col-3 col-sm-3 text-right">{% trans "Amount"%}</div>
</div>
</div>
<!-- Title End -->
<!-- Transaction List
=============================== -->
<div class="transaction-list">
{% for payment in object_list %}
<div class="transaction-item px-4 py-3" data-id={{payment.id}}>
<div class="row align-items-center flex-row">
<div class="col-1 col-sm-1 text-center"> <span class="d-block text-3 font-weight-400">#{{payment.id}}</span></div>
<div class="col-2 col-sm-2 text-center"> <span class="d-block text-3 font-weight-300">{{payment.timestamp|date:"Y-m-d"}}</span> <span class="d-block text-1 font-weight-300 text-uppercase">{{payment.timestamp|date:"H:i"}}</span> </div>
<div class="col col-sm-4"> <span class="d-block text-muted text-3">{{payment.notes}}</span></div>
<div class="col-auto col-sm-2 d-none d-sm-block text-center text-2"> <span class=" text-uppercase">{{payment.type}}</span> </div>
<div class="col-3 col-sm-3 text-right text-3"> <span class="text-nowrap">{% if payment.type == 'withdraw' %}- {%else%}+ {%endif%}{{payment.amount}}</span> <span class="text-1 text-uppercase">({{payment.currency}})</span> </div>
</div>
</div>
{%endfor%}
</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 %}
{% compress js %}
<script type="text/javascript" src="{% static 'nextcloud/js/table.js' %}"></script>
{% endcompress %}
{% endblock js_extra %}