forked from uncloud/uncloud
124 lines
8.6 KiB
HTML
124 lines
8.6 KiB
HTML
{% 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 %} |