public/front
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

company.magico: Widok rozliczcenia

Browse Source
This commit is contained in:
Bartek PC-KADR
2022-03-16 15:39:35 +01:00
parent 6d2da690e0
commit 47224ace98
3 changed files with 912 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/.tmp/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

654
src/.tmp/magico-company-payments.html
View File

@@ -555,42 +555,289 @@
</div>
<!-- Body -->
<div class="card-body">
<div class="card-body mx-0 px-0">
<div class="row">
<div class="col-md mb-4 mb-md-0">
<div class="mb-4">
<span class="card-subtitle">Aktualny okres rozliczeniowy:</span>
<h5>1-31 marca 2022</h5>
</div>
<div>
<span class="card-subtitle">Szacowane rozliczenie</span>
<h3 class="text-primary">250 zł</h3>
<small class="d-block text-muted">Następna płatność: 01.04.2022</small>
<div class="container">
<div class="alert alert-primary mb-5" role="alert">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-exclamation-triangle-fill"></i>
</div>
<div class="flex-grow-1 ms-2">
Dokonaj płatności aby zachować subskrybcję. Usługi pozostaną aktywne do 31.30.2022.
</div>
</div>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-md-flex gap-3">
<a class="btn btn-white btn-sm" href="#">Cancel subscription</a>
<a class="btn btn-primary btn-sm btn-transition" href="./page-pricing.html">Update plan</a>
<div class="row">
<div class="col-md mb-4 mb-md-0">
<div class="mb-4">
<span class="card-subtitle">Aktualny okres rozliczeniowy:</span>
<h5>1-31 marca 2022</h5>
</div>
<div>
<span class="card-subtitle">Szacowane rozliczenie</span>
<h3 class="text-primary">250 zł</h3>
<small class="d-block text-muted">Następna płatność: 01.04.2022</small>
</div>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-md-flex gap-3">
<a class="btn btn-white btn-sm" href="#">Anuluj subskrybcję</a>
<a class="btn btn-primary btn-sm btn-transition" href="./page-pricing.html">Zmień plan</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Col -->
<!-- End Row -->
</div>
<!-- End Row -->
</div>
<!-- End Body -->
<hr class="my-3">
<div class="card-body mx-0 px-0">
<div class="container">
<div class="row align-items-center flex-grow-1 mb-2">
<div class="col">
<h4 class="card-header-title">Statystyki powierzchni</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-dark fw-semi-bold">4.27 GB</span> z 6 GB
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Progress -->
<div class="progress rounded-pill mb-3">
<div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar" role="progressbar" style="width: 25%; opacity: .6" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
<!-- Legend Indicators -->
<div class="list-inline">
<div class="list-inline-item">
<span class="legend-indicator bg-primary"></span>Firma i zasoby ludzkie
</div>
<div class="list-inline-item">
<span class="legend-indicator bg-primary opacity"></span>Sync
</div>
<div class="list-inline-item">
<span class="legend-indicator"></span>Wolna przestrzeń
</div>
</div>
<!-- End Legend Indicators -->
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<div class="d-flex align-items-center">
<h5 class="card-header-title">Metoda płatności</h5>
<span class="badge bg-soft-danger text-danger ms-2">Płatności automatyczne wyłączone</span>
</div>
</div>
<!-- Body -->
<div class="card-body mx-0 px-0">
<div class="container">
<div class="mb-4">
<p>Aktualnie korzystasz z płatności na podstawie rachunku lub faktury z określonym terminem płatności. Możesz również wprowadzić dane karty płatniczej i skorzystać z płatności automatycznych obsługiwanych przez Polskie e-Platnosci.</p>
</div>
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Płatności cykliczne</h6>
<span class="d-block small text-body">Aktywuj automatyczne płatności cykliczne</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts1">
<label class="form-check-label" for="connectedAccounts1"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- List Group -->
<ul class="list-group my-5">
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="badge bg-primary ms-1">Primary</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">MasterCard &bull;&bull;&bull;&bull; 4242</span>
<small class="d-block text-muted">Checking - Expires 12/22</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="text-danger small ms-1">Expired</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="./assets/svg/brands/visa.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">Visa &bull;&bull;&bull;&bull; 9016</span>
<small class="d-block text-muted">Debit - Expires 04/20</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<!-- Card -->
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddCardModal">
<div class="card-body card-dashed-body py-8">
<img class="avatar avatar-lg avatar-4x3 mb-2" src="./assets/svg/illustrations/oc-add-card.svg" alt="Image Description">
<span class="d-block"><i class="bi-plus"></i> Add a new card</span>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Historia płatności</h5>
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Nr faktury</th>
<th>Status</th>
<th>Kwota</th>
<th>Data wystawienia</th>
<th>Faktura</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">03/03/2022/M</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>
</tr>
<tr>
<td><a href="#">02/03/2022/M</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2019</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>
</tr>
<tr>
<td><a href="#">01/03/2022/M</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2018</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>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
</div>
</div>
<!-- End Col -->
@@ -696,7 +943,6 @@
</footer>
<!-- ========== END FOOTER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Sign Up -->
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
@@ -968,6 +1214,374 @@
}'>
<i class="bi-chevron-up"></i>
</a>
<!-- Offcanvas Search -->
<div class="offcanvas offcanvas-top offcanvas-navbar-search bg-light" tabindex="-1" id="offcanvasNavbarSearch">
<div class="offcanvas-body">
<div class="container">
<div class="w-lg-75 mx-lg-auto">
<div class="d-flex justify-content-end mb-3">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="mb-7">
<!-- Form -->
<form>
<!-- Input Card -->
<div class="input-card">
<div class="input-card-form">
<input type="text" class="form-control form-control-lg" placeholder="Search Front" aria-label="Search Front">
</div>
<button type="button" class="btn btn-primary btn-lg">Search</button>
</div>
<!-- End Input Card -->
</form>
<!-- End Form -->
</div>
<div class="d-none d-md-block">
<div class="row">
<div class="col-sm-6">
<div class="mb-3">
<h5>Quick Links</h5>
</div>
<div class="row">
<div class="col-6">
<!-- List -->
<ul class="list-pointer list-pointer-primary mb-0">
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Search Results List</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Search Results Grid</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">About</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Services</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Invoice</a>
</li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
<div class="col-6">
<!-- List -->
<ul class="list-pointer list-pointer-primary mb-0">
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Profile</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">User Contacts</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Reviews</a>
</li>
<li class="list-pointer-item">
<a class="link-sm link-secondary" href="#">Settings</a>
</li>
</ul>
<!-- End List -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Card -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<img class="img-fluid" src="./assets/img/mockups/img1.png" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-6">
<div class="mb-4">
<h5>Featured Item</h5>
<p>Create astonishing web sites and pages.</p>
</div>
<a class="btn btn-outline-primary btn-xs btn-transition" href="#">Apply now <i class="bi-chevron-right small ms-1"></i></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
</div>
</div>
<!-- Edit Card Modal -->
<div class="modal fade" id="accountEditCardModal" tabindex="-1" aria-labelledby="accountEditCardModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="accountEditCardModalLabel">Edit card</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="mb-4">
<label for="editCardNameLabel" class="form-label">Name on card</label>
<input type="text" class="form-control" id="editCardNameLabel" placeholder="Maria Williams" aria-label="Maria Williams" value="Maria Williams">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label for="editCardNumberLabel" class="form-label">Card number</label>
<input type="text" class="js-input-mask form-control" name="cardNumber" id="editCardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx" value="5200 7084 8243 4242"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="editCardEexpirationDateLabel" class="form-label">Expiration date</label>
<input type="text" class="js-input-mask form-control" name="expirationDate" id="editCardEexpirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx" value="12/2022"
data-hs-mask-options='{
"mask": "00/0000"
}'>
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="editCardSecurityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="password" class="js-input-mask form-control" name="securityCode" id="editCardSecurityCodeLabel" placeholder="xxx" aria-label="xxx" value="789"
data-hs-mask-options='{
"mask": "000"
}'>
</div>
<!-- End Form -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="editCardMakePrimaryCheckbox2" checked>
<label class="form-check-label" for="editCardMakePrimaryCheckbox2">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end gap-3">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- Add Card Modal -->
<div class="modal fade" id="accountAddCardModal" tabindex="-1" aria-labelledby="accountAddCardModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="accountAddCardModalLabel">Add card</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form>
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment d-flex mb-4" role="group" aria-label="Account add card radio button group">
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption1" autocomplete="off" checked>
<label class="btn btn-sm" for="accountAddCardBtnRadioOption1">Credit or Debit card</label>
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption2" autocomplete="off" disabled>
<label class="btn btn-sm" for="accountAddCardBtnRadioOption2">PayPal <span class="badge bg-soft-primary text-primary">Coming soon</label>
</div>
<!-- End Radio Button Group -->
<!-- Form -->
<div class="mb-4">
<label for="cardNameLabel" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cardNameLabel" placeholder="Payoneer" aria-label="Payoneer">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label for="cardNumberLabel" class="form-label">Card number</label>
<input type="text" class="js-input-mask form-control" name="cardNumber" id="cardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="expirationDateLabel" class="form-label">Expiration date</label>
<input type="text" class="js-input-mask form-control" name="expirationDate" id="expirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx"
data-hs-mask-options='{
"mask": "00/0000"
}'>
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="securityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="text" class="js-input-mask form-control" name="securityCode" id="securityCodeLabel" placeholder="xxx" aria-label="xxx"
data-hs-mask-options='{
"mask": "000"
}'>
</div>
<!-- End Form -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="makePrimaryCheckbox1">
<label class="form-check-label" for="makePrimaryCheckbox1">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end gap-3">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- Receipt Invoice Modal -->
<div class="modal fade" id="accountInvoiceReceiptModal" 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">Invoice from Front</h3>
<span class="d-block">Invoice #3682303</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>
<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>
</div>
<!-- End Col -->
<div class="col-md-4">
<small class="text-cap text-secondary mb-0">Payment method:</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>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<small class="text-cap mb-2">Summary</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>
</div>
</li>
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Tax fee</span>
<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>$316.8</strong>
</div>
</li>
</ul>
<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>
</div>
<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>
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory hs-builder:build-delete -->

298
src/magico-company-payments.html
View File

@@ -112,42 +112,289 @@
</div>
<!-- Body -->
<div class="card-body">
<div class="card-body mx-0 px-0">
<div class="row">
<div class="col-md mb-4 mb-md-0">
<div class="mb-4">
<span class="card-subtitle">Aktualny okres rozliczeniowy:</span>
<h5>1-31 marca 2022</h5>
</div>
<div>
<span class="card-subtitle">Szacowane rozliczenie</span>
<h3 class="text-primary">250 zł</h3>
<small class="d-block text-muted">Następna płatność: 01.04.2022</small>
<div class="container">
<div class="alert alert-primary mb-5" role="alert">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-exclamation-triangle-fill"></i>
</div>
<div class="flex-grow-1 ms-2">
Dokonaj płatności aby zachować subskrybcję. Usługi pozostaną aktywne do 31.30.2022.
</div>
</div>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-md-flex gap-3">
<a class="btn btn-white btn-sm" href="#">Cancel subscription</a>
<a class="btn btn-primary btn-sm btn-transition" href="@@autopath/page-pricing.html">Update plan</a>
<div class="row">
<div class="col-md mb-4 mb-md-0">
<div class="mb-4">
<span class="card-subtitle">Aktualny okres rozliczeniowy:</span>
<h5>1-31 marca 2022</h5>
</div>
<div>
<span class="card-subtitle">Szacowane rozliczenie</span>
<h3 class="text-primary">250 zł</h3>
<small class="d-block text-muted">Następna płatność: 01.04.2022</small>
</div>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-md-flex gap-3">
<a class="btn btn-white btn-sm" href="#">Anuluj subskrybcję</a>
<a class="btn btn-primary btn-sm btn-transition" href="@@autopath/page-pricing.html">Zmień plan</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Col -->
<!-- End Row -->
</div>
<!-- End Row -->
</div>
<!-- End Body -->
<hr class="my-3">
<div class="card-body mx-0 px-0">
<div class="container">
<div class="row align-items-center flex-grow-1 mb-2">
<div class="col">
<h4 class="card-header-title">Statystyki powierzchni</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-dark fw-semi-bold">4.27 GB</span> z 6 GB
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Progress -->
<div class="progress rounded-pill mb-3">
<div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar" role="progressbar" style="width: 25%; opacity: .6" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
<!-- Legend Indicators -->
<div class="list-inline">
<div class="list-inline-item">
<span class="legend-indicator bg-primary"></span>Firma i zasoby ludzkie
</div>
<div class="list-inline-item">
<span class="legend-indicator bg-primary opacity"></span>Sync
</div>
<div class="list-inline-item">
<span class="legend-indicator"></span>Wolna przestrzeń
</div>
</div>
<!-- End Legend Indicators -->
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<div class="d-flex align-items-center">
<h5 class="card-header-title">Metoda płatności</h5>
<span class="badge bg-soft-danger text-danger ms-2">Płatności automatyczne wyłączone</span>
</div>
</div>
<!-- Body -->
<div class="card-body mx-0 px-0">
<div class="container">
<div class="mb-4">
<p>Aktualnie korzystasz z płatności na podstawie rachunku lub faktury z określonym terminem płatności. Możesz również wprowadzić dane karty płatniczej i skorzystać z płatności automatycznych obsługiwanych przez Polskie e-Platnosci.</p>
</div>
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Płatności cykliczne</h6>
<span class="d-block small text-body">Aktywuj automatyczne płatności cykliczne</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts1">
<label class="form-check-label" for="connectedAccounts1"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- List Group -->
<ul class="list-group my-5">
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="badge bg-primary ms-1">Primary</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="@@autopath/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">MasterCard &bull;&bull;&bull;&bull; 4242</span>
<small class="d-block text-muted">Checking - Expires 12/22</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="text-danger small ms-1">Expired</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="@@autopath/assets/svg/brands/visa.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">Visa &bull;&bull;&bull;&bull; 9016</span>
<small class="d-block text-muted">Debit - Expires 04/20</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<!-- Card -->
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddCardModal">
<div class="card-body card-dashed-body py-8">
<img class="avatar avatar-lg avatar-4x3 mb-2" src="@@autopath/assets/svg/illustrations/oc-add-card.svg" alt="Image Description">
<span class="d-block"><i class="bi-plus"></i> Add a new card</span>
</div>
</a>
<!-- End Card -->
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Historia płatności</h5>
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Nr faktury</th>
<th>Status</th>
<th>Kwota</th>
<th>Data wystawienia</th>
<th>Faktura</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">03/03/2022/M</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>
</tr>
<tr>
<td><a href="#">02/03/2022/M</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2019</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>
</tr>
<tr>
<td><a href="#">01/03/2022/M</a></td>
<td><span class="badge bg-soft-success text-success">Rozliczona</span></td>
<td>$264</td>
<td>22/04/2018</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>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
</div>
</div>
<!-- End Col -->
@@ -161,13 +408,24 @@
<!-- ========== FOOTER ========== -->
@@include("@@autopath/magico_partials/magico-footer.html")
<!-- ========== END FOOTER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Sign Up -->
@@include("@@autopath/partials/modal/signup.html")
<!-- Go To -->
@@include("@@autopath/partials/layouts-components/go-to.html")
<!-- Offcanvas Search -->
@@include("@@autopath/partials/layouts-components/offcanvas-search.html")
<!-- Edit Card Modal -->
@@include("@@autopath/partials/modal/account-edit-card.html")
<!-- Add Card Modal -->
@@include("@@autopath/partials/modal/account-add-card.html")
<!-- Receipt Invoice Modal -->
@@include("@@autopath/partials/modal/account-receipt-invoice.html")
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->