company.magico: Widok płatności

This commit is contained in:
2022-03-17 10:19:13 +01:00
parent 47224ace98
commit c421955c1a
17 changed files with 2148 additions and 111 deletions

View File

@@ -793,7 +793,7 @@
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Nr faktury</th>
<th>Nr dokumentu</th>
<th>Status</th>
<th>Kwota</th>
<th>Data wystawienia</th>
@@ -804,16 +804,18 @@
<tbody>
<tr>
<td><a href="#">03/03/2022/M</a></td>
<td><a href="#">03/03/2022</a></td>
<td><span class="badge bg-soft-warning text-warning">W toku</span></td>
<td>$264</td>
<td>22/04/2020</td>
<td><a class="btn btn-white btn-xs" href="./page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Szczegóły</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Szczegóły</a>
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountSelectMethod"><i class="bi-credit-card me-1"></i> Zapłać online</a></td>
</tr>
<tr>
<td><a href="#">02/03/2022/M</a></td>
<td><a href="#">02/03/2022</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2019</td>
@@ -822,7 +824,7 @@
</tr>
<tr>
<td><a href="#">01/03/2022/M</a></td>
<td><a href="#">01/03/2022</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2018</td>
@@ -1518,25 +1520,25 @@
<!-- Body -->
<div class="modal-body">
<div class="text-center mb-5">
<h3 class="mb-1">Invoice from Front</h3>
<span class="d-block">Invoice #3682303</span>
<h3 class="mb-1">Karczma Biesiada</h3>
<span class="d-block">Dokument 03/03/2022</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Amount paid:</small>
<small class="text-cap text-secondary mb-0">Kwota:</small>
<span class="text-dark">$316.8</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Date paid:</small>
<span class="text-dark">April 22, 2020</span>
<small class="text-cap text-secondary mb-0">Data płatności:</small>
<span class="text-dark">1 kwietnia 2022</span>
</div>
<!-- End Col -->
<div class="col-md-4">
<small class="text-cap text-secondary mb-0">Payment method:</small>
<small class="text-cap text-secondary mb-0">Płatność:</small>
<div class="d-flex align-items-center">
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/mastercard.svg" alt="Image Description">
<span class="text-dark">&bull;&bull;&bull;&bull; 4242</span>
@@ -1546,24 +1548,26 @@
</div>
<!-- End Row -->
<small class="text-cap mb-2">Summary</small>
<small class="text-cap mb-2">Podsumowanie</small>
<ul class="list-group mb-4">
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Payment to Front</span>
<span>$264.00</span>
<span>sms.magico</span>
<small class="text-muted">13 wiadomości</small>
<span>$4.00</span>
</div>
</li>
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Tax fee</span>
<span>gastro.magico</span>
<small class="text-muted">start plan</small>
<span>$52.8</span>
</div>
</li>
<li class="list-group-item list-group-item-light text-dark">
<div class="d-flex justify-content-between align-items-center">
<strong>Amount paid</strong>
<strong>Suma</strong>
<strong>$316.8</strong>
</div>
</li>
@@ -1571,7 +1575,7 @@
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white btn-xs" href="#"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a>
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Print Details</a>
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Drukuj szczegóły</a>
</div>
<hr class="my-5">
@@ -1584,6 +1588,107 @@
</div>
<!-- ========== END SECONDARY CONTENTS ========== -->
<div class="modal fade" id="accountSelectMethod" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-top-cover bg-primary text-center">
<figure class="position-absolute end-0 bottom-0 start-0" style="margin-bottom: -.125rem;">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
<div class="modal-close">
<button type="button" class="btn-close btn-close-light" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- End Header -->
<div class="modal-top-cover-avatar">
<img class="avatar avatar-lg avatar-circle avatar-centered border border-3 border-white shadow-sm" src="./assets/svg/brands/front.svg" alt="Logo">
</div>
<!-- Body -->
<div class="modal-body">
<div class="text-center mb-5">
<h3 class="mb-1">Wybierz operatora i metodę płatności</h3>
<span class="d-block">Dokument 03/03/2022</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Kwota:</small>
<span class="text-dark">$316.8</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Podatek:</small>
<span class="text-dark">$22</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Suma:</small>
<span class="text-dark">$350</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- List Group -->
<ul class="list-group mb-5">
<!-- Item -->
<li class="list-group-item">
<a href="">
<div class="mb-2">
<h5>Polskie e-Płatnosci <span class="badge bg-primary ms-1">Polecane</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="./assets/svg/brands/mastercard.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block text-dark">Księgowanie online</span>
<small class="d-block text-muted">Przelew, Google Pay, Apple Pay</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<button type="button" class="btn btn-white btn-xs">
<i class="bi-currency-exchange me-1"></i> Dalej
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<hr class="my-5">
<p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- JS Global Compulsory hs-builder:build-delete -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

View File

@@ -350,7 +350,7 @@
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Nr faktury</th>
<th>Nr dokumentu</th>
<th>Status</th>
<th>Kwota</th>
<th>Data wystawienia</th>
@@ -361,16 +361,18 @@
<tbody>
<tr>
<td><a href="#">03/03/2022/M</a></td>
<td><a href="#">03/03/2022</a></td>
<td><span class="badge bg-soft-warning text-warning">W toku</span></td>
<td>$264</td>
<td>22/04/2020</td>
<td><a class="btn btn-white btn-xs" href="./page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Szczegóły</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Szczegóły</a>
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountSelectMethod"><i class="bi-credit-card me-1"></i> Zapłać online</a></td>
</tr>
<tr>
<td><a href="#">02/03/2022/M</a></td>
<td><a href="#">02/03/2022</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2019</td>
@@ -379,7 +381,7 @@
</tr>
<tr>
<td><a href="#">01/03/2022/M</a></td>
<td><a href="#">01/03/2022</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2018</td>
@@ -428,6 +430,107 @@
@@include("@@autopath/partials/modal/account-receipt-invoice.html")
<!-- ========== END SECONDARY CONTENTS ========== -->
<div class="modal fade" id="accountSelectMethod" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-top-cover bg-primary text-center">
<figure class="position-absolute end-0 bottom-0 start-0" style="margin-bottom: -.125rem;">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
<div class="modal-close">
<button type="button" class="btn-close btn-close-light" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- End Header -->
<div class="modal-top-cover-avatar">
<img class="avatar avatar-lg avatar-circle avatar-centered border border-3 border-white shadow-sm" src="@@autopath/assets/svg/brands/front.svg" alt="Logo">
</div>
<!-- Body -->
<div class="modal-body">
<div class="text-center mb-5">
<h3 class="mb-1">Wybierz operatora i metodę płatności</h3>
<span class="d-block">Dokument 03/03/2022</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Kwota:</small>
<span class="text-dark">$316.8</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Podatek:</small>
<span class="text-dark">$22</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Suma:</small>
<span class="text-dark">$350</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- List Group -->
<ul class="list-group mb-5">
<!-- Item -->
<li class="list-group-item">
<a href="">
<div class="mb-2">
<h5>Polskie e-Płatnosci <span class="badge bg-primary ms-1">Polecane</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="./assets/svg/brands/mastercard.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block text-dark">Księgowanie online</span>
<small class="d-block text-muted">Przelew, Google Pay, Apple Pay</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<button type="button" class="btn btn-white btn-xs">
<i class="bi-currency-exchange me-1"></i> Dalej
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<hr class="my-5">
<p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

View File

@@ -22,25 +22,25 @@
<!-- Body -->
<div class="modal-body">
<div class="text-center mb-5">
<h3 class="mb-1">Invoice from Front</h3>
<span class="d-block">Invoice #3682303</span>
<h3 class="mb-1">Karczma Biesiada</h3>
<span class="d-block">Dokument 03/03/2022</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Amount paid:</small>
<small class="text-cap text-secondary mb-0">Kwota:</small>
<span class="text-dark">$316.8</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Date paid:</small>
<span class="text-dark">April 22, 2020</span>
<small class="text-cap text-secondary mb-0">Data płatności:</small>
<span class="text-dark">1 kwietnia 2022</span>
</div>
<!-- End Col -->
<div class="col-md-4">
<small class="text-cap text-secondary mb-0">Payment method:</small>
<small class="text-cap text-secondary mb-0">Płatność:</small>
<div class="d-flex align-items-center">
<img class="avatar avatar-xss me-2" src="@@autopath/assets/svg/brands/mastercard.svg" alt="Image Description">
<span class="text-dark">&bull;&bull;&bull;&bull; 4242</span>
@@ -50,24 +50,26 @@
</div>
<!-- End Row -->
<small class="text-cap mb-2">Summary</small>
<small class="text-cap mb-2">Podsumowanie</small>
<ul class="list-group mb-4">
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Payment to Front</span>
<span>$264.00</span>
<span>sms.magico</span>
<small class="text-muted">13 wiadomości</small>
<span>$4.00</span>
</div>
</li>
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Tax fee</span>
<span>gastro.magico</span>
<small class="text-muted">start plan</small>
<span>$52.8</span>
</div>
</li>
<li class="list-group-item list-group-item-light text-dark">
<div class="d-flex justify-content-between align-items-center">
<strong>Amount paid</strong>
<strong>Suma</strong>
<strong>$316.8</strong>
</div>
</li>
@@ -75,7 +77,7 @@
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white btn-xs" href="#"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a>
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Print Details</a>
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Drukuj szczegóły</a>
</div>
<hr class="my-5">