feat: initial commit - Band Management application

This commit is contained in:
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions

View File

@@ -0,0 +1,2 @@
# Register your models here.

View File

@@ -0,0 +1,6 @@
from django.apps import AppConfig
class EcommerceConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "apps.ecommerce"

View File

@@ -0,0 +1,2 @@
# Create your models here.

View File

@@ -0,0 +1,137 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Category List - Apps{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/quill/typography.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/quill/katex.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/quill/editor.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/quill/katex.js' %}"></script>
<script src="{% static 'vendor/libs/quill/quill.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-ecommerce.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-category-list.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="app-ecommerce-category">
<!-- Category List Table -->
<div class="card">
<div class="card-datatable">
<table class="datatables-category-list table">
<thead>
<tr>
<th></th>
<th></th>
<th>Categories</th>
<th class="text-nowrap text-sm-end">Total Products &nbsp;</th>
<th class="text-nowrap text-sm-end">Total Earning</th>
<th class="text-lg-center">Actions</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- Offcanvas to add new customer -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCategoryList" aria-labelledby="offcanvasEcommerceCategoryListLabel">
<!-- Offcanvas Header -->
<div class="offcanvas-header py-6">
<h5 id="offcanvasEcommerceCategoryListLabel" class="offcanvas-title">Add Category</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Offcanvas Body -->
<div class="offcanvas-body border-top">
<form class="pt-0" id="eCommerceCategoryListForm" onsubmit="return true">
<!-- Title -->
<div class="mb-6 form-control-validation">
<label class="form-label" for="ecommerce-category-title">Title</label>
<input type="text" class="form-control" id="ecommerce-category-title" placeholder="Enter category title" name="categoryTitle" aria-label="category title" />
</div>
<!-- Slug -->
<div class="mb-6 form-control-validation">
<label class="form-label" for="ecommerce-category-slug">Slug</label>
<input type="text" id="ecommerce-category-slug" class="form-control" placeholder="Enter slug" aria-label="slug" name="slug" />
</div>
<!-- Image -->
<div class="mb-6">
<label class="form-label" for="ecommerce-category-image">Attachment</label>
<input class="form-control" type="file" id="ecommerce-category-image" />
</div>
<!-- Parent category -->
<div class="mb-6 ecommerce-select2-dropdown">
<label class="form-label" for="ecommerce-category-parent-category">Parent category</label>
<select id="ecommerce-category-parent-category" class="select2 form-select" data-placeholder="Select parent category">
<option value="">Select parent Category</option>
<option value="Household">Household</option>
<option value="Management">Management</option>
<option value="Electronics">Electronics</option>
<option value="Office">Office</option>
<option value="Automotive">Automotive</option>
</select>
</div>
<!-- Description -->
<div class="mb-6">
<label class="form-label">Description</label>
<div class="form-control p-0 py-1">
<div class="comment-editor border-0" id="ecommerce-category-description"></div>
<div class="comment-toolbar border-0 rounded">
<div class="d-flex justify-content-end">
<span class="ql-formats me-0">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-link"></button>
<button class="ql-image"></button>
</span>
</div>
</div>
</div>
</div>
<!-- Status -->
<div class="mb-6 ecommerce-select2-dropdown">
<label class="form-label">Select category status</label>
<select id="ecommerce-category-status" class="select2 form-select" data-placeholder="Select category status">
<option value="">Select category status</option>
<option value="Scheduled">Scheduled</option>
<option value="Publish">Publish</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<!-- Submit and reset -->
<div class="mb-6">
<button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Add</button>
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,147 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Customer All - Apps{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-customer-all.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- customers List Table -->
<div class="card">
<div class="card-datatable table-responsive">
<table class="datatables-customers table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>Customer</th>
<th class="text-nowrap">Customer Id</th>
<th>Country</th>
<th>Order</th>
<th class="text-nowrap">Total Spent</th>
</tr>
</thead>
</table>
</div>
<!-- Offcanvas to add new customer -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEcommerceCustomerAdd" aria-labelledby="offcanvasEcommerceCustomerAddLabel">
<div class="offcanvas-header">
<h5 id="offcanvasEcommerceCustomerAddLabel" class="offcanvas-title">Add Customer</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body border-top mx-0 flex-grow-0">
<form class="ecommerce-customer-add pt-0" id="eCommerceCustomerAddForm" onsubmit="return false">
<div class="ecommerce-customer-add-basic mb-4">
<h6 class="mb-6">Basic Information</h6>
<div class="mb-6 form-control-validation">
<label class="form-label" for="ecommerce-customer-add-name">Name*</label>
<input type="text" class="form-control" id="ecommerce-customer-add-name" placeholder="John Doe" name="customerName" aria-label="John Doe" />
</div>
<div class="mb-6 form-control-validation">
<label class="form-label" for="ecommerce-customer-add-email">Email*</label>
<input type="text" id="ecommerce-customer-add-email" class="form-control" placeholder="john.doe@example.com" aria-label="john.doe@example.com" name="customerEmail" />
</div>
<div>
<label class="form-label" for="ecommerce-customer-add-contact">Mobile</label>
<input type="text" id="ecommerce-customer-add-contact" class="form-control phone-mask" placeholder="+(123) 456-7890" aria-label="+(123) 456-7890" name="customerContact" />
</div>
</div>
<div class="ecommerce-customer-add-shiping mb-6 pt-4">
<h6 class="mb-6">Shipping Information</h6>
<div class="mb-6">
<label class="form-label" for="ecommerce-customer-add-address">Address Line 1</label>
<input type="text" id="ecommerce-customer-add-address" class="form-control" placeholder="45 Roker Terrace" aria-label="45 Roker Terrace" name="customerAddress1" />
</div>
<div class="mb-6">
<label class="form-label" for="ecommerce-customer-add-address-2">Address Line 2</label>
<input type="text" id="ecommerce-customer-add-address-2" class="form-control" aria-label="address2" name="customerAddress2" />
</div>
<div class="mb-6">
<label class="form-label" for="ecommerce-customer-add-town">Town</label>
<input type="text" id="ecommerce-customer-add-town" class="form-control" placeholder="New York" aria-label="New York" name="customerTown" />
</div>
<div class="col-12 mb-6">
<label class="form-label" for="ecommerce-customer-add-state">State / Province</label>
<input type="text" id="ecommerce-customer-add-state" class="form-control" placeholder="Southern tip" aria-label="Southern tip" name="customerState" />
</div>
<div class="col-12 mb-6">
<label class="form-label" for="ecommerce-customer-add-post-code">Post Code</label>
<input type="text" id="ecommerce-customer-add-post-code" class="form-control" placeholder="734990" aria-label="734990" name="pin" pattern="[0-9]{8}" maxlength="8" />
</div>
<div>
<label class="form-label" for="ecommerce-customer-add-country">Country</label>
<select id="ecommerce-customer-add-country" class="select2 form-select">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
</div>
<div class="d-sm-flex mb-6">
<div class="me-auto mb-2 mb-md-0">
<h6 class="mb-1">Use as a billing address?</h6>
<small class="text-body-secondary">If you need more info, please check budget.</small>
</div>
<div class="form-check form-switch my-auto me-n2">
<input type="checkbox" class="form-check-input" checked />
</div>
</div>
<div>
<button type="submit" class="btn btn-primary me-sm-4 data-submit">Add</button>
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
</div>
</form>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,520 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Customer Details Address & Billing - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/modal-edit-user.js' %}"></script>
<script src="{% static 'js/modal-edit-cc.js' %}"></script>
<script src="{% static 'js/modal-add-new-cc.js' %}"></script>
<script src="{% static 'js/modal-add-new-address.js' %}"></script>
<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
<div class="mb-2 mb-sm-0">
<h4 class="mb-1">Customer ID #634759</h4>
<p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
</div>
<button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
</div>
<div class="row">
<!-- Customer-detail Sidebar -->
<div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
<!-- Customer-detail Card -->
<div class="card mb-6">
<div class="card-body pt-12">
<div class="customer-avatar-section">
<div class="d-flex align-items-center flex-column">
<img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png' %}" height="120" width="120" alt="User avatar" />
<div class="customer-info text-center mb-6">
<h5 class="mb-0">Lorine Hischke</h5>
<span>Customer ID #634759</span>
</div>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
<div class="d-flex align-items-center gap-4 me-5">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-shopping-cart icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">184</h5>
<span>Orders</span>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">$12,378</h5>
<span>Spent</span>
</div>
</div>
</div>
<div class="info-container">
<h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
<ul class="list-unstyled mb-6">
<li class="mb-2">
<span class="h6 me-1">Username:</span>
<span>lorine.hischke</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Email:</span>
<span>vafgot@vultukir.org</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Status:</span>
<span class="badge bg-label-success">Active</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Country:</span>
<span>USA</span>
</li>
</ul>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
</div>
</div>
</div>
</div>
<!-- /Customer-detail Card -->
<!-- Plan Card -->
<div class="card mb-4 bg-gradient-primary">
<div class="card-body">
<div class="row justify-content-between mb-4">
<div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
<h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
<p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
</div>
<span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
</div>
<button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
</div>
</div>
<!-- /Plan Card -->
</div>
<!--/ Customer Sidebar -->
<!-- Customer Content -->
<div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
<!-- Customer Pills -->
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-overview' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
</li>
</ul>
</div>
<!--/ Customer Pills -->
<!-- Address accordion -->
<div class="card card-action mb-6">
<div class="card-header align-items-center py-6">
<h5 class="card-action-title mb-0">Address Book</h5>
<div class="card-action-element">
<button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewAddress">Add new address</button>
</div>
</div>
<div class="card-body">
<div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionAddress">
<div class="accordion-item border-bottom">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingHome">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressHome" aria-expanded="false" aria-controls="headingHome" role="button">
<span>
<span class="d-flex gap-2 align-items-baseline">
<span class="h6 mb-1">Home</span>
<span class="badge bg-label-success">Default Address</span>
</span>
<span class="mb-0">23 Shatinon Mekalan</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingAddressHome" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionAddress">
<div class="accordion-body ps-6 ms-1">
<h6 class="mb-1">Violet Mendoza</h6>
<p class="mb-1">23 Shatinon Mekalan,</p>
<p class="mb-1">Melbourne, VIC 3000,</p>
<p class="mb-1">LondonUK</p>
</div>
</div>
</div>
<div class="accordion-item border-bottom border-top-0">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingOffice">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressOffice" aria-expanded="false" aria-controls="headingOffice" role="button">
<span class="d-flex flex-column">
<span class="h6 mb-0">Office</span>
<span class="mb-0">45 Roker Terrace</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingAddressOffice" class="accordion-collapse collapse" aria-labelledby="headingOffice" data-bs-parent="#ecommerceBillingAccordionAddress">
<div class="accordion-body ps-6 ms-1">
<h6 class="mb-1">Violet Mendoza</h6>
<p class="mb-1">45 Roker Terrace,</p>
<p class="mb-1">Latheronwheel,</p>
<p class="mb-1">KW5 8NW</p>
<p class="mb-1">LondonUK</p>
</div>
</div>
</div>
<div class="accordion-item border-top-0">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingFamily">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingAddressFamily" aria-expanded="false" aria-controls="headingFamily" role="button">
<span class="d-flex flex-column">
<span class="h6 mb-0">Family</span>
<span class="mb-0">512 Water Plant</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as default address</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingAddressFamily" class="accordion-collapse collapse" aria-labelledby="headingFamily" data-bs-parent="#ecommerceBillingAccordionAddress">
<div class="accordion-body ps-6 ms-1">
<h6 class="mb-1">Violet Mendoza</h6>
<p class="mb-1">512 Water Plant,</p>
<p class="mb-1">Melbourne, NY 10036,</p>
<p class="mb-1">New York,</p>
<p class="mb-1">United States</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Address accordion -->
<!-- payment accordion -->
<div class="card card-action mb-6">
<div class="card-header align-items-center py-6">
<h5 class="card-action-title mb-0">Payment Methods</h5>
<div class="card-action-element">
<button class="btn btn-sm btn-label-primary" type="button" data-bs-toggle="modal" data-bs-target="#addNewCCModal">Add payment methods</button>
</div>
</div>
<div class="card-body">
<div class="accordion accordion-flush accordion-arrow-left" id="ecommerceBillingAccordionPayment">
<div class="accordion-item border-bottom">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentMaster">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentMaster" aria-expanded="false" aria-controls="headingPaymentMaster" role="button">
<span class="accordion-button-information d-flex align-items-center gap-4">
<span class="accordion-button-image">
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
</span>
<span class="d-flex flex-column">
<span class="h6 mb-1">Mastercard</span>
<span class="mb-0">Expires Apr 2028</span>
</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingPaymentMaster" class="accordion-collapse collapse" data-bs-parent="#ecommerceBillingAccordionPayment">
<div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
<table class="table table-sm table-borderless text-nowrap small">
<tr>
<td class="w-50">Name</td>
<td class="fw-medium text-heading">Violet Mendoza</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">**** 4487</td>
</tr>
<tr>
<td>Expires</td>
<td class="fw-medium text-heading">04/2028</td>
</tr>
<tr>
<td>Type</td>
<td class="fw-medium text-heading">Visa credit card</td>
</tr>
<tr>
<td>Issuer</td>
<td class="fw-medium text-heading">VICBANK</td>
</tr>
<tr>
<td>ID</td>
<td class="fw-medium text-heading">id_w2r84jdy723</td>
</tr>
</table>
<table class="table table-sm table-borderless text-nowrap">
<tr>
<td class="w-50">Billing Phone</td>
<td class="fw-medium text-heading">USA</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">+7634 983 637</td>
</tr>
<tr>
<td>Email</td>
<td class="fw-medium text-heading">vafgot@vultukir.org</td>
</tr>
<tr>
<td>Origin</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
</tr>
<tr>
<td>CVC check</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">
Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="accordion-item border-bottom border-top-0">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentExpress">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentExpress" aria-expanded="false" aria-controls="headingPaymentExpress" role="button">
<span class="accordion-button-information d-flex align-items-center gap-4">
<span class="accordion-button-image">
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
</span>
<span>
<span class="d-flex gap-2 row-gap-0 flex-wrap align-items-baseline">
<span class="h6 mb-1 text-nowrap">American Express</span>
<span class="badge bg-label-success mb-2 mb-sm-0">Primary</span>
</span>
<span class="mb-0">45 Roker Terrace</span>
</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingPaymentExpress" class="accordion-collapse collapse" aria-labelledby="headingPaymentExpress" data-bs-parent="#ecommerceBillingAccordionPayment">
<div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
<table class="table table-sm table-borderless text-nowrap small">
<tr>
<td class="w-50">Name</td>
<td class="fw-medium text-heading">Violet Mendoza</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">**** 4487</td>
</tr>
<tr>
<td>Expires</td>
<td class="fw-medium text-heading">08/2028</td>
</tr>
<tr>
<td>Type</td>
<td class="fw-medium text-heading">Visa credit card</td>
</tr>
<tr>
<td>Issuer</td>
<td class="fw-medium text-heading">VICBANK</td>
</tr>
<tr>
<td>ID</td>
<td class="fw-medium text-heading">id_w2r84jdy723</td>
</tr>
</table>
<table class="table table-sm table-borderless text-nowrap">
<tr>
<td class="w-50">Billing Phone</td>
<td class="fw-medium text-heading">USA</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">+7634 983 637</td>
</tr>
<tr>
<td>Email</td>
<td class="fw-medium text-heading">vafgot@vultukir.org</td>
</tr>
<tr>
<td>Origin</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
</tr>
<tr>
<td>CVC check</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">
Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="accordion-item border-top-0">
<div class="accordion-header d-flex justify-content-between align-items-center flex-wrap flex-sm-nowrap" id="headingPaymentVisa">
<a class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#ecommerceBillingPaymentVisa" aria-expanded="false" aria-controls="headingPaymentVisa" role="button">
<span class="accordion-button-information d-flex align-items-center gap-4">
<span class="accordion-button-image">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
</span>
<span class="d-flex flex-column">
<span class="h6 mb-1">Visa</span>
<span class="mb-0">512 Water Plant</span>
</span>
</span>
</a>
<div class="d-flex gap-4 p-6 p-sm-0 pt-0 ms-1 ms-sm-0">
<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#editCCModal"><i class="icon-base ti tabler-edit text-body icon-md"></i></a>
<a href="javascript:void(0);"><i class="icon-base ti tabler-trash text-body icon-md"></i></a>
<button class="btn p-0" data-bs-toggle="dropdown" aria-expanded="false" role="button"><i class="icon-base ti tabler-dots-vertical text-body icon-md mt-1"></i></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Set as Primary</a></li>
</ul>
</div>
</div>
<div id="ecommerceBillingPaymentVisa" class="accordion-collapse collapse" aria-labelledby="headingPaymentVisa" data-bs-parent="#ecommerceBillingAccordionPayment">
<div class="accordion-body d-flex align-items-baseline flex-wrap flex-xl-nowrap flex-sm-nowrap flex-md-wrap">
<table class="table table-sm table-borderless text-nowrap small">
<tr>
<td class="w-50">Name</td>
<td class="fw-medium text-heading">Violet Mendoza</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">**** 5155</td>
</tr>
<tr>
<td>Expires</td>
<td class="fw-medium text-heading">02/2022</td>
</tr>
<tr>
<td>Type</td>
<td class="fw-medium text-heading">Visa credit card</td>
</tr>
<tr>
<td>Issuer</td>
<td class="fw-medium text-heading">VICBANK</td>
</tr>
<tr>
<td>ID</td>
<td class="fw-medium text-heading">id_w2r84jdy723</td>
</tr>
</table>
<table class="table table-sm table-borderless text-nowrap">
<tr>
<td class="w-50">Billing Phone</td>
<td class="fw-medium text-heading">USA</td>
</tr>
<tr>
<td>Number</td>
<td class="fw-medium text-heading">+7634 983 637</td>
</tr>
<tr>
<td>Email</td>
<td class="fw-medium text-heading">vafgot@vultukir.org</td>
</tr>
<tr>
<td>Origin</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">United States <i class="fis fi fi-us rounded-circle me-2 icon-sm"> </i></td>
</tr>
<tr>
<td>CVC check</td>
<td class="fw-medium text-heading d-flex align-items-center gap-2">
Passed <span class="badge bg-label-success rounded-pill p-0"><i class="icon-base ti tabler-check icon-xs"></i></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Customer Content -->
</div>
<!-- Modal -->
{% include "partials/_modals/modal_edit_user.html" %}
{% include "partials/_modals/modal_edit_cc.html" %}
{% include "partials/_modals/modal_add_new_address.html" %}
{% include "partials/_modals/modal_add_new_cc.html" %}
{% include "partials/_modals/modal_upgrade_plan.html" %}
<!-- /Modal -->
{% endblock %}

View File

@@ -0,0 +1,262 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Customer Details Notifications - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/modal-edit-user.js' %}"></script>
<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
<div class="mb-2 mb-sm-0">
<h4 class="mb-1">Customer ID #634759</h4>
<p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
</div>
<button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
</div>
<div class="row">
<!-- Customer-detail Sidebar -->
<div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
<!-- Customer-detail Card -->
<div class="card mb-6">
<div class="card-body pt-12">
<div class="customer-avatar-section">
<div class="d-flex align-items-center flex-column">
<img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png'%}" height="120" width="120" alt="User avatar" />
<div class="customer-info text-center mb-6">
<h5 class="mb-0">Lorine Hischke</h5>
<span>Customer ID #634759</span>
</div>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
<div class="d-flex align-items-center gap-4 me-5">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-shopping-cart icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">184</h5>
<span>Orders</span>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">$12,378</h5>
<span>Spent</span>
</div>
</div>
</div>
<div class="info-container">
<h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
<ul class="list-unstyled mb-6">
<li class="mb-2">
<span class="h6 me-1">Username:</span>
<span>lorine.hischke</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Email:</span>
<span>vafgot@vultukir.org</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Status:</span>
<span class="badge bg-label-success">Active</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Country:</span>
<span>USA</span>
</li>
</ul>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
</div>
</div>
</div>
</div>
<!-- /Customer-detail Card -->
<!-- Plan Card -->
<div class="card mb-4 bg-gradient-primary">
<div class="card-body">
<div class="row justify-content-between mb-4">
<div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
<h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
<p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
</div>
<span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
</div>
<button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
</div>
</div>
<!-- /Plan Card -->
</div>
<!--/ Customer Sidebar -->
<!-- Customer Content -->
<div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
<!-- Customer Pills -->
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-overview' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-billing' %}"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
</li>
</ul>
</div>
<!--/ Customer Pills -->
<!-- Project table -->
<div class="card mb-6">
<!-- Notifications -->
<div class="card-header">
<h5 class="card-title mb-1">Notifications</h5>
<span class="text-body">You will receive notification for the below selected items.</span>
</div>
<div>
<div class="table-responsive border-bottom">
<table class="table">
<thead>
<tr>
<th class="text-nowrap">Type</th>
<th class="text-nowrap text-center">Email</th>
<th class="text-nowrap text-center">Browser</th>
<th class="text-nowrap text-center">App</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-heading">New for you</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck1" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck2" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck3" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Account activity</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck4" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck5" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck6" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">A new browser used to sign in</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck7" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck8" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck9" />
</div>
</td>
</tr>
<tr class="border-transparent">
<td class="text-nowrap text-heading">A new device is linked</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck10" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck11" />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center mb-0">
<input class="form-check-input" type="checkbox" id="defaultCheck12" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-body pt-6">
<button type="submit" class="btn btn-primary me-3">Save changes</button>
<button type="reset" class="btn btn-label-secondary">Discard</button>
</div>
<!-- /Notifications -->
</div>
<!-- /Project table -->
</div>
<!--/ Customer Content -->
</div>
<!-- Modal -->
{% include "partials/_modals/modal_edit_user.html" %}
{% include "partials/_modals/modal_upgrade_plan.html" %}
<!-- /Modal -->
{% endblock %}

View File

@@ -0,0 +1,271 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Customer Details Overview - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/modal-edit-user.js' %}"></script>
<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
<script src="{% static 'js/app-ecommerce-customer-detail-overview.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
<div class="mb-2 mb-sm-0">
<h4 class="mb-1">Customer ID #634759</h4>
<p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
</div>
<button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
</div>
<div class="row">
<!-- Customer-detail Sidebar -->
<div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
<!-- Customer-detail Card -->
<div class="card mb-6">
<div class="card-body pt-12">
<div class="customer-avatar-section">
<div class="d-flex align-items-center flex-column">
<img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png' %}" height="120" width="120" alt="User avatar" />
<div class="customer-info text-center mb-6">
<h5 class="mb-0">Lorine Hischke</h5>
<span>Customer ID #634759</span>
</div>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
<div class="d-flex align-items-center gap-4 me-5">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-shopping-cart icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">184</h5>
<span>Orders</span>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">$12,378</h5>
<span>Spent</span>
</div>
</div>
</div>
<div class="info-container">
<h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
<ul class="list-unstyled mb-6">
<li class="mb-2">
<span class="h6 me-1">Username:</span>
<span>lorine.hischke</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Email:</span>
<span>vafgot@vultukir.org</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Status:</span>
<span class="badge bg-label-success">Active</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Country:</span>
<span>USA</span>
</li>
</ul>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
</div>
</div>
</div>
</div>
<!-- /Customer-detail Card -->
<!-- Plan Card -->
<div class="card mb-4 bg-gradient-primary">
<div class="card-body">
<div class="row justify-content-between mb-4">
<div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
<h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
<p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
</div>
<span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
</div>
<button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
</div>
</div>
<!-- /Plan Card -->
</div>
<!--/ Customer Sidebar -->
<!-- Customer Content -->
<div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
<!-- Customer Pills -->
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-security' %}"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-billing' %}"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
</li>
</ul>
</div>
<!--/ Customer Pills -->
<!-- / Customer cards -->
<div class="row text-nowrap">
<div class="col-md-6 mb-6">
<div class="card h-100">
<div class="card-body">
<div class="card-icon mb-2">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</div>
</div>
</div>
<div class="card-info">
<h5 class="card-title mb-2">Account Balance</h5>
<div class="d-flex align-items-baseline gap-1">
<h5 class="text-primary mb-0">$2345</h5>
<p class="mb-0">Credit Left</p>
</div>
<p class="mb-0 text-truncate">Account balance for next purchase</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6">
<div class="card">
<div class="card-body">
<div class="card-icon mb-2">
<div class="avatar">
<div class="avatar-initial rounded bg-label-success">
<i class="icon-base ti tabler-gift icon-lg"></i>
</div>
</div>
</div>
<div class="card-info">
<h5 class="card-title mb-2">Loyalty Program</h5>
<span class="badge bg-label-success mb-2">Platinum member</span>
<p class="mb-0">3000 points to next tier</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6">
<div class="card">
<div class="card-body">
<div class="card-icon mb-2">
<div class="avatar">
<div class="avatar-initial rounded bg-label-warning">
<i class="icon-base ti tabler-star icon-lg"></i>
</div>
</div>
</div>
<div class="card-info">
<h5 class="card-title mb-2">Wishlist</h5>
<div class="d-flex align-items-baseline gap-1">
<h5 class="text-warning mb-0">15</h5>
<p class="mb-0">Items in wishlist</p>
</div>
<p class="mb-0 text-truncate">Receive notification when items go on sale</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-6">
<div class="card">
<div class="card-body">
<div class="card-icon mb-2">
<div class="avatar">
<div class="avatar-initial rounded bg-label-info">
<i class="icon-base ti tabler-crown icon-lg"></i>
</div>
</div>
</div>
<div class="card-info">
<h5 class="card-title mb-2">Coupons</h5>
<div class="d-flex align-items-baseline gap-1">
<h5 class="text-info mb-0">21</h5>
<p class="mb-0">Coupons you win</p>
</div>
<p class="mb-0 text-truncate">Use coupon on next purchase</p>
</div>
</div>
</div>
</div>
</div>
<!-- / customer cards -->
<!-- Invoice table -->
<div class="card mb-6">
<div class="table-responsive mb-4">
<table class="table datatables-customer-order">
<thead>
<tr>
<th></th>
<th>Order</th>
<th>Date</th>
<th>Status</th>
<th>Spent</th>
<th class="text-md-center">Actions</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- /Invoice table -->
</div>
<!--/ Customer Content -->
</div>
<!-- Modal -->
{% include "partials/_modals/modal_edit_user.html" %}
{% include "partials/_modals/modal_upgrade_plan.html" %}
<!-- /Modal -->
{% endblock %}

View File

@@ -0,0 +1,264 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Customer Details Security - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/modal-edit-user.js' %}"></script>
<script src="{% static 'js/modal-enable-otp.js' %}"></script>
<script src="{% static 'js/app-ecommerce-customer-detail.js' %}"></script>
<script src="{% static 'js/app-user-view-security.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="d-flex flex-column flex-sm-row align-items-center justify-content-sm-between mb-6 text-center text-sm-start gap-2">
<div class="mb-2 mb-sm-0">
<h4 class="mb-1">Customer ID #634759</h4>
<p class="mb-0">Aug 17, 2020, 5:48 (ET)</p>
</div>
<button type="button" class="btn btn-label-danger delete-customer">Delete Customer</button>
</div>
<div class="row">
<!-- Customer-detail Sidebar -->
<div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
<!-- Customer-detail Card -->
<div class="card mb-6">
<div class="card-body pt-12">
<div class="customer-avatar-section">
<div class="d-flex align-items-center flex-column">
<img class="img-fluid rounded mb-4" src="{% static 'img/avatars/1.png' %}" height="120" width="120" alt="User avatar" />
<div class="customer-info text-center mb-6">
<h5 class="mb-0">Lorine Hischke</h5>
<span>Customer ID #634759</span>
</div>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap mb-6 gap-0 gap-md-3 gap-lg-4">
<div class="d-flex align-items-center gap-4 me-5">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-shopping-cart icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">184</h5>
<span>Orders</span>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar">
<div class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">$12,378</h5>
<span>Spent</span>
</div>
</div>
</div>
<div class="info-container">
<h5 class="pb-4 border-bottom text-capitalize mt-6 mb-4">Details</h5>
<ul class="list-unstyled mb-6">
<li class="mb-2">
<span class="h6 me-1">Username:</span>
<span>lorine.hischke</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Email:</span>
<span>vafgot@vultukir.org</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Status:</span>
<span class="badge bg-label-success">Active</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="mb-2">
<span class="h6 me-1">Country:</span>
<span>USA</span>
</li>
</ul>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-primary w-100" data-bs-target="#editUser" data-bs-toggle="modal">Edit Details</a>
</div>
</div>
</div>
</div>
<!-- /Customer-detail Card -->
<!-- Plan Card -->
<div class="card mb-4 bg-gradient-primary">
<div class="card-body">
<div class="row justify-content-between mb-4">
<div class="col-md-12 col-lg-7 col-xl-12 col-xxl-7 text-center text-lg-start text-xl-center text-xxl-start order-1 order-lg-0 order-xl-1 order-xxl-0">
<h5 class="card-title text-white text-nowrap mb-4">Upgrade to premium</h5>
<p class="card-text text-white">Upgrade customer to premium membership to access pro features.</p>
</div>
<span class="col-md-12 col-lg-5 col-xl-12 col-xxl-5 text-center mx-auto mx-md-0 mb-2"><img src="{% static 'img/illustrations/rocket.png' %}" class="w-px-75 m-2" alt="3dRocket" /></span>
</div>
<button class="btn btn-white text-primary w-100 fw-medium shadow-xs" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">Upgrade to premium</button>
</div>
</div>
<!-- /Plan Card -->
</div>
<!--/ Customer Sidebar -->
<!-- Customer Content -->
<div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
<!-- Customer Pills -->
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2 flex-wrap">
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-overview' %}"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"><i class="icon-base ti tabler-lock icon-sm me-1_5"></i>Security</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-billing' %}"><i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>Address & Billing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-customer-details-notifications' %}"><i class="icon-base ti tabler-bell icon-sm me-1_5"></i>Notifications</a>
</li>
</ul>
</div>
<!--/ Customer Pills -->
<!-- Change Password -->
<div class="card mb-6">
<h5 class="card-header">Change Password</h5>
<div class="card-body">
<form id="formChangePassword" method="POST" onsubmit="return false">
<div class="alert alert-warning alert-dismissible py-3" role="alert">
<h5 class="alert-heading mb-1">Ensure that these requirements are met</h5>
<span>Minimum 8 characters long, uppercase & symbol</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="row gy-4 gx-6">
<div class="col-12 col-sm-6 form-password-toggle form-control-validation">
<label class="form-label" for="newPassword">New Password</label>
<div class="input-group input-group-merge">
<input class="form-control" type="password" id="newPassword" name="newPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye icon-xs"></i></span>
</div>
</div>
<div class="col-12 col-sm-6 form-password-toggle form-control-validation">
<label class="form-label" for="confirmPassword">Confirm Password</label>
<div class="input-group input-group-merge">
<input class="form-control" type="password" name="confirmPassword" id="confirmPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye icon-xs"></i></span>
</div>
</div>
<div>
<button type="submit" class="btn btn-primary me-2">Change Password</button>
</div>
</div>
</form>
</div>
</div>
<!--/ Change Password -->
<!-- Two-steps verification -->
<div class="card mb-6">
<div class="card-header">
<h5 class="mb-0">Two-steps verification</h5>
<span class="card-subtitle">Keep your account secure with authentication step.</span>
</div>
<div class="card-body">
<h6 class="mb-1">SMS</h6>
<div class="mb-4">
<div class="d-flex w-100 action-icons">
<input id="defaultInput" class="form-control me-4 phone-number-mask" type="text" placeholder="+1(968) 945-8832" />
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill" data-bs-target="#enableOTP" data-bs-toggle="modal"><i class="icon-base ti tabler-edit icon-md text-heading"></i></a>
<a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-user-plus icon-md text-heading"></i></a>
</div>
</div>
<p class="mb-0">
Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in.
<a href="javascript:void(0);" class="text-primary">Learn more.</a>
</p>
</div>
</div>
<!--/ Two-steps verification -->
<!-- Recent Devices -->
<div class="card mb-6">
<h5 class="card-header">Recent Devices</h5>
<div class="table-responsive">
<table class="table border-top table-border-bottom-0">
<thead>
<tr>
<th class="text-truncate">Browser</th>
<th class="text-truncate">Device</th>
<th class="text-truncate">Location</th>
<th class="text-truncate">Recent Activities</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-windows icon-md text-info me-4"></i> Chrome on Windows</td>
<td class="text-truncate">HP Spectre 360</td>
<td class="text-truncate">Switzerland</td>
<td class="text-truncate">10, July 2021 20:07</td>
</tr>
<tr>
<td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-device-mobile icon-md text-danger me-4"></i> Chrome on iPhone</td>
<td class="text-truncate">iPhone 12x</td>
<td class="text-truncate">Australia</td>
<td class="text-truncate">13, July 2021 10:10</td>
</tr>
<tr>
<td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-android icon-md text-success me-4"></i> Chrome on Android</td>
<td class="text-truncate">Oneplus 9 Pro</td>
<td class="text-truncate">Dubai</td>
<td class="text-truncate">14, July 2021 15:15</td>
</tr>
<tr>
<td class="text-truncate text-heading"><i class="mb-1 icon-base ti tabler-brand-apple icon-md me-4"></i>Chrome on MacOS</td>
<td class="text-truncate">Apple iMac</td>
<td class="text-truncate">India</td>
<td class="text-truncate">16, July 2021 16:17</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/ Recent Devices -->
</div>
<!--/ Customer Content -->
</div>
<!-- Modal -->
{% include "partials/_modals/modal_edit_user.html" %}
{% include "partials/_modals/modal_enable_otp.html" %}
{% include "partials/_modals/modal_upgrade_plan.html" %}
<!-- /Modal -->
{% endblock %}

View File

@@ -0,0 +1,763 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Dashboard - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-dashboard.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- View sales -->
<div class="col-xl-4">
<div class="card">
<div class="d-flex align-items-end row">
<div class="col-7">
<div class="card-body text-nowrap">
<h5 class="card-title mb-0">Congratulations John! 🎉</h5>
<p class="mb-2">Best seller of the month</p>
<h4 class="text-primary mb-1">$48.9k</h4>
<a href="javascript:;" class="btn btn-primary">View Sales</a>
</div>
</div>
<div class="col-5 text-center text-sm-left">
<div class="card-body pb-0 px-0 px-md-4">
<img src="{% static 'img/illustrations/card-advance-sale.png' %}" height="140" alt="view sales" />
</div>
</div>
</div>
</div>
</div>
<!-- View sales -->
<!-- Statistics -->
<div class="col-xl-8 col-md-12">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title mb-0">Statistics</h5>
<small class="text-body-secondary">Updated 1 month ago</small>
</div>
<div class="card-body d-flex align-items-end">
<div class="w-100">
<div class="row gy-3">
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-primary me-4 p-2"><i class="icon-base ti tabler-chart-pie-2 icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">230k</h5>
<small>Sales</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-info me-4 p-2"><i class="icon-base ti tabler-users icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">8.549k</h5>
<small>Customers</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-danger me-4 p-2"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">1.423k</h5>
<small>Products</small>
</div>
</div>
</div>
<div class="col-md-3 col-6">
<div class="d-flex align-items-center">
<div class="badge rounded bg-label-success me-4 p-2"><i class="icon-base ti tabler-currency-dollar icon-lg"></i></div>
<div class="card-info">
<h5 class="mb-0">$9745</h5>
<small>Revenue</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Statistics -->
<div class="col-xxl-4 col-12">
<div class="row g-6">
<!-- Profit last month -->
<div class="col-xl-6 col-sm-6">
<div class="card h-100">
<div class="card-header pb-0">
<h5 class="card-title mb-1">Profit</h5>
<p class="card-subtitle">Last Month</p>
</div>
<div class="card-body">
<div id="profitLastMonth"></div>
<div class="d-flex justify-content-between align-items-center mt-3 gap-3">
<h4 class="mb-0">624k</h4>
<small class="text-success">+8.24%</small>
</div>
</div>
</div>
</div>
<!--/ Profit last month -->
<!-- Expenses -->
<div class="col-xl-6 col-sm-6">
<div class="card h-100">
<div class="card-header pb-2">
<h5 class="card-title mb-1">82.5k</h5>
<p class="card-subtitle">Expenses</p>
</div>
<div class="card-body">
<div id="expensesChart"></div>
<div class="mt-3 text-center">
<small class="text-body-secondary mt-3">$21k Expenses more than last month</small>
</div>
</div>
</div>
</div>
<!--/ Expenses -->
<!-- Generated Leads -->
<div class="col-xl-12">
<div class="card h-100">
<div class="card-body d-flex justify-content-between">
<div class="d-flex flex-column">
<div class="card-title mb-auto">
<h5 class="mb-0 text-nowrap">Generated Leads</h5>
<p class="mb-0">Monthly Report</p>
</div>
<div class="chart-statistics">
<h3 class="card-title mb-0">4,350</h3>
<p class="text-success text-nowrap mb-0"><i class="icon-base ti tabler-chevron-up me-1"></i> 15.8%</p>
</div>
</div>
<div id="generatedLeadsChart"></div>
</div>
</div>
</div>
<!--/ Generated Leads -->
</div>
</div>
<!-- Revenue Report -->
<div class="col-xxl-8">
<div class="card h-100">
<div class="card-body p-0">
<div class="row row-bordered g-0">
<div class="col-md-8 position-relative p-6">
<div class="card-header d-inline-block p-0 text-wrap position-absolute">
<h5 class="m-0 card-title">Revenue Report</h5>
</div>
<div id="totalRevenueChart" class="mt-n1"></div>
</div>
<div class="col-md-4 p-4">
<div class="text-center mt-5">
<div class="dropdown">
<button class="btn btn-sm btn-label-primary dropdown-toggle" type="button" id="budgetId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<script>
document.write(new Date().getFullYear());
</script>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="budgetId">
<a class="dropdown-item prev-year1" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 1);
</script>
</a>
<a class="dropdown-item prev-year2" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 2);
</script>
</a>
<a class="dropdown-item prev-year3" href="javascript:void(0);">
<script>
document.write(new Date().getFullYear() - 3);
</script>
</a>
</div>
</div>
</div>
<h3 class="text-center pt-8 mb-0">$25,825</h3>
<p class="mb-8 text-center"><span class="fw-medium text-heading">Budget: </span>56,800</p>
<div class="px-3">
<div id="budgetChart"></div>
</div>
<div class="text-center mt-8">
<button type="button" class="btn btn-primary">Increase Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Revenue Report -->
<!-- Earning Reports -->
<div class="col-xxl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Earning Reports</h5>
<p class="card-subtitle">Weekly Earnings Overview</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="earningReports" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="earningReports">
<a class="dropdown-item" href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body pb-0">
<ul class="p-0 m-0">
<li class="d-flex align-items-center mb-5">
<div class="me-4">
<span class="badge bg-label-primary rounded p-1_5"><i class="icon-base ti tabler-chart-pie-2 icon-md"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Net Profit</h6>
<small class="text-body">12.4k Sales</small>
</div>
<div class="user-progress d-flex align-items-center gap-4">
<small>$1,619</small>
<div class="d-flex align-items-center gap-1">
<i class="icon-base ti tabler-chevron-up text-success"></i>
<small class="text-body-secondary">18.6%</small>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center mb-5">
<div class="me-4">
<span class="badge bg-label-success rounded p-1_5"><i class="icon-base ti tabler-currency-dollar icon-md"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Total Income</h6>
<small class="text-body">Sales, Affiliation</small>
</div>
<div class="user-progress d-flex align-items-center gap-4">
<small>$3,571</small>
<div class="d-flex align-items-center gap-1">
<i class="icon-base ti tabler-chevron-up text-success"></i>
<small class="text-body-secondary">39.6%</small>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center mb-5">
<div class="me-4">
<span class="badge bg-label-secondary text-body rounded p-1_5"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Total Expenses</h6>
<small class="text-body">ADVT, Marketing</small>
</div>
<div class="user-progress d-flex align-items-center gap-4">
<small>$430</small>
<div class="d-flex align-items-center gap-1">
<i class="icon-base ti tabler-chevron-up text-success"></i>
<small class="text-body-secondary">52.8%</small>
</div>
</div>
</div>
</li>
</ul>
<div id="reportBarChart"></div>
</div>
</div>
</div>
<!--/ Earning Reports -->
<!-- Popular Product -->
<div class="col-xxl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title m-0 me-2">
<h5 class="mb-1">Popular Products</h5>
<p class="card-subtitle">Total 10.4k Visitors</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="popularProduct" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="popularProduct">
<a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
<a class="dropdown-item" href="javascript:void(0);">Last Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last Year</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="p-0 m-0">
<li class="d-flex mb-6">
<div class="me-4">
<img src="{% static 'img/products/iphone.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Apple iPhone 13</h6>
<small class="text-body d-block">Item: #FXZ-4567</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$999.29</p>
</div>
</div>
</li>
<li class="d-flex mb-6">
<div class="me-4">
<img src="{% static 'img/products/nike-air-jordan.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Nike Air Jordan</h6>
<small class="text-body d-block">Item: #FXZ-3456</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$72.40</p>
</div>
</div>
</li>
<li class="d-flex mb-6">
<div class="me-4">
<img src="{% static 'img/products/headphones.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Beats Studio 2</h6>
<small class="text-body d-block">Item: #FXZ-9485</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$99</p>
</div>
</div>
</li>
<li class="d-flex mb-6">
<div class="me-4">
<img src="{% static 'img/products/apple-watch.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Apple Watch Series 7</h6>
<small class="text-body d-block">Item: #FXZ-2345</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$249.99</p>
</div>
</div>
</li>
<li class="d-flex mb-6">
<div class="me-4">
<img src="{% static 'img/products/amazon-echo.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Amazon Echo Dot</h6>
<small class="text-body d-block">Item: #FXZ-8959</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$79.40</p>
</div>
</div>
</li>
<li class="d-flex">
<div class="me-4">
<img src="{% static 'img/products/play-station.png' %}" alt="User" class="rounded" width="46" />
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Play Station Console</h6>
<small class="text-body d-block">Item: #FXZ-7892</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<p class="mb-0">$129.48</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--/ Popular Product -->
<!-- Sales by Countries tabs-->
<div class="col-xxl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-content-between">
<div class="card-title mb-0">
<h5 class="mb-1">Orders by Countries</h5>
<p class="card-subtitle">62 deliveries in progress</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="salesByCountryTabs" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesByCountryTabs">
<a class="dropdown-item" href="javascript:void(0);">Select All</a>
<a class="dropdown-item" href="javascript:void(0);">Refresh</a>
<a class="dropdown-item" href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="card-body p-0">
<div class="nav-align-top">
<ul class="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-new" aria-controls="navs-justified-new" aria-selected="true">New</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-preparing" aria-controls="navs-justified-link-preparing" aria-selected="false">Preparing</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-link-shipping" aria-controls="navs-justified-link-shipping" aria-selected="false">Shipping</button>
</li>
</ul>
<div class="tab-content border-0 mx-1">
<div class="tab-pane fade show active" id="navs-justified-new" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="navs-justified-link-preparing" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="navs-justified-link-shipping" role="tabpanel">
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Veronica Herman</h6>
<p class="text-body mb-0">101 Boulder, California(CA), 95959</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Barry Schowalter</h6>
<p class="text-body mb-0">939 Orange, California(CA), 92118</p>
</div>
</li>
</ul>
<div class="border-1 border-light border-dashed my-4"></div>
<ul class="timeline mb-0">
<li class="timeline-item ps-6 border-dashed">
<span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
<i class="icon-base ti tabler-circle-check"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-success text-uppercase">sender</small>
</div>
<h6 class="my-50">Myrtle Ullrich</h6>
<p class="text-body mb-0">162 Windsor, California(CA), 95492</p>
</div>
</li>
<li class="timeline-item ps-6 border-0">
<span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
<i class="icon-base ti tabler-map-pin"></i>
</span>
<div class="timeline-event ps-1">
<div class="timeline-header">
<small class="text-primary text-uppercase">Receiver</small>
</div>
<h6 class="my-50">Helen Jacobs</h6>
<p class="text-body mb-0">487 Sunset, California(CA), 94043</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Sales by Countries tabs -->
<!-- Transactions -->
<div class="col-xxl-4 col-md-6">
<div class="card h-100">
<div class="card-header d-flex justify-content-between">
<div class="card-title m-0 me-2">
<h5 class="mb-1">Transactions</h5>
<p class="card-subtitle">Total 58 Transactions done in this Month</p>
</div>
<div class="dropdown">
<button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1" type="button" id="transactionID" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
<a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
<a class="dropdown-item" href="javascript:void(0);">Last Month</a>
<a class="dropdown-item" href="javascript:void(0);">Last Year</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="p-0 m-0">
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-primary me-4 rounded p-1_5">
<i class="icon-base ti tabler-wallet icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Wallet</h6>
<small class="text-body d-block">Starbucks</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-danger">-$75</h6>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-success me-4 rounded p-1_5">
<i class="icon-base ti tabler-browser-check icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Bank Transfer</h6>
<small class="text-body d-block">Add Money</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-success">+$480</h6>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-danger me-4 rounded p-1_5">
<i class="icon-base ti tabler-brand-paypal icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Paypal</h6>
<small class="text-body d-block">Client Payment</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-success">+$268</h6>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-secondary me-4 rounded p-1_5">
<i class="icon-base ti tabler-credit-card icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Master Card</h6>
<small class="text-body d-block">Ordered iPhone 13</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-danger">-$699</h6>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-info me-4 rounded p-1_5">
<i class="icon-base ti tabler-currency-dollar icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Bank Transactions</h6>
<small class="text-body d-block">Refund</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-success">+$98</h6>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1 align-items-center">
<div class="badge bg-label-danger me-4 rounded p-1_5">
<i class="icon-base ti tabler-brand-paypal icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Paypal</h6>
<small class="text-body d-block">Client Payment</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-success">+$126</h6>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="badge bg-label-success me-4 rounded p-1_5">
<i class="icon-base ti tabler-building-bank icon-md"></i>
</div>
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
<div class="me-2">
<h6 class="mb-0">Bank Transfer</h6>
<small class="text-body d-block">Pay Office Rent</small>
</div>
<div class="user-progress d-flex align-items-center gap-1">
<h6 class="mb-0 text-danger">-$1290</h6>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--/ Transactions -->
<!-- Invoice table -->
<div class="col-xxl-8">
<div class="card">
<div class="card-datatable table-responsive">
<table class="table table-sm datatable-invoice border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>#</th>
<th>Status</th>
<th>Total</th>
<th>Issued Date</th>
<th>Invoice Status</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- /Invoice table -->
</div>
{% endblock %}

View File

@@ -0,0 +1,131 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Manage reviews - App{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/raty-js/raty-js.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>
<script src="{% static 'vendor/libs/raty-js/raty-js.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-ecommerce.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-reviews.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row mb-6 g-6">
<div class="col-md-6">
<div class="card h-100">
<div class="card-body row widget-separator g-0">
<div class="col-sm-5 border-shift border-end pe-sm-6">
<h3 class="text-primary d-flex align-items-center gap-2 mb-2">4.89<i class="icon-base ti tabler-star-filled icon-32px"></i></h3>
<p class="h6 mb-2">Total 187 reviews</p>
<p class="pe-2 mb-2">All reviews are from genuine customers</p>
<span class="badge bg-label-primary mb-4 mb-sm-0">+5 This week</span>
<hr class="d-sm-none" />
</div>
<div class="col-sm-7 gap-2 text-nowrap d-flex flex-column justify-content-between ps-sm-6 pt-2 py-sm-2">
<div class="d-flex align-items-center gap-2">
<small>5 Star</small>
<div class="progress w-100 bg-label-primary" style="height:8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 85%" aria-valuenow="61.50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="w-px-20 text-end">124</small>
</div>
<div class="d-flex align-items-center gap-2">
<small>4 Star</small>
<div class="progress w-100 bg-label-primary" style="height:8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="w-px-20 text-end">40</small>
</div>
<div class="d-flex align-items-center gap-2">
<small>3 Star</small>
<div class="progress w-100 bg-label-primary" style="height:8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 35%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="w-px-20 text-end">12</small>
</div>
<div class="d-flex align-items-center gap-2">
<small>2 Star</small>
<div class="progress w-100 bg-label-primary" style="height:8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 18%" aria-valuenow="7" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="w-px-20 text-end">7</small>
</div>
<div class="d-flex align-items-center gap-2">
<small>1 Star</small>
<div class="progress w-100 bg-label-primary" style="height:8px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="w-px-20 text-end">2</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100">
<div class="card-body row">
<div class="col-sm-5">
<div class="mb-12">
<h5 class="mb-2 text-nowrap">Reviews statistics</h5>
<p class="mb-0"><span class="me-2">12 New reviews</span> <span class="badge bg-label-success">+8.4%</span></p>
</div>
<div>
<h6 class="mb-2 fw-normal"><span class="text-success me-1">87%</span>Positive reviews</h6>
<small>Weekly Report</small>
</div>
</div>
<div class="col-sm-7 d-flex justify-content-sm-end align-items-end">
<div id="reviewsChart"></div>
</div>
</div>
</div>
</div>
</div>
<!-- review List Table -->
<div class="card">
<div class="card-datatable table-responsive">
<table class="datatables-review table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>Product</th>
<th class="text-nowrap">Reviewer</th>
<th>Review</th>
<th>Date</th>
<th class="text-nowrap">Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,212 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Order Details - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-order-details.js' %}"></script>
<script src="{% static 'js/modal-add-new-address.js' %}"></script>
<script src="{% static 'js/modal-edit-user.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
<div class="d-flex flex-column justify-content-center">
<div class="mb-1"><span class="h5">Order #32543 </span><span class="badge bg-label-success me-1 ms-2">Paid</span> <span class="badge bg-label-info">Ready to Pickup</span></div>
<p class="mb-0">Aug 17, <span id="orderYear"></span>, 5:48 (ET)</p>
</div>
<div class="d-flex align-content-center flex-wrap gap-2">
<button class="btn btn-label-danger delete-order">Delete Order</button>
</div>
</div>
<!-- Order Details Table -->
<div class="row">
<div class="col-12 col-lg-8">
<div class="card mb-6">
<div class="card-datatable">
<table class="datatables-order-details table mb-0">
<thead>
<tr>
<th></th>
<th></th>
<th class="w-50">products</th>
<th class="w-25">price</th>
<th class="w-25">qty</th>
<th>total</th>
</tr>
</thead>
</table>
<div class="d-flex justify-content-end align-items-center m-6 mb-2">
<div class="order-calculations">
<div class="d-flex justify-content-start mb-2">
<span class="w-px-100 text-heading">Subtotal:</span>
<h6 class="mb-0">$2093</h6>
</div>
<div class="d-flex justify-content-start mb-2">
<span class="w-px-100 text-heading">Discount:</span>
<h6 class="mb-0">$2</h6>
</div>
<div class="d-flex justify-content-start mb-2">
<span class="w-px-100 text-heading">Tax:</span>
<h6 class="mb-0">$28</h6>
</div>
<div class="d-flex justify-content-start">
<h6 class="w-px-100 mb-0">Total:</h6>
<h6 class="mb-0">$2113</h6>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Shipping activity</h5>
</div>
<div class="card-body pt-1">
<ul class="timeline pb-0 mb-0">
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Order was placed (Order ID: #32543)</h6>
<small class="text-body-secondary">Tuesday 11:29 AM</small>
</div>
<p class="mt-3">Your order has been placed successfully</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Pick-up</h6>
<small class="text-body-secondary">Wednesday 11:29 AM</small>
</div>
<p class="mt-3 mb-3">Pick-up scheduled with courier</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Dispatched</h6>
<small class="text-body-secondary">Thursday 11:29 AM</small>
</div>
<p class="mt-3 mb-3">Item has been picked up by courier</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-primary">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Package arrived</h6>
<small class="text-body-secondary">Saturday 15:20 AM</small>
</div>
<p class="mt-3 mb-3">Package arrived at an Amazon facility, NY</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-dashed">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header">
<h6 class="mb-0">Dispatched for delivery</h6>
<small class="text-body-secondary">Today 14:12 PM</small>
</div>
<p class="mt-3 mb-3">Package has left an Amazon facility, NY</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-transparent pb-0">
<span class="timeline-point timeline-point-secondary"></span>
<div class="timeline-event pb-0">
<div class="timeline-header">
<h6 class="mb-0">Delivery</h6>
</div>
<p class="mt-1 mb-0">Package will be delivered by tomorrow</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Customer details</h5>
</div>
<div class="card-body">
<div class="d-flex justify-content-start align-items-center mb-6">
<div class="avatar me-3">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="d-flex flex-column">
<a href="app-user-view-account.html" class="text-body text-nowrap">
<h6 class="mb-0">Shamus Tuttle</h6>
</a>
<span>Customer ID: #58909</span>
</div>
</div>
<div class="d-flex justify-content-start align-items-center mb-6">
<span class="avatar rounded-circle bg-label-success me-3 d-flex align-items-center justify-content-center"><i class="icon-base ti tabler-shopping-cart icon-lg"></i></span>
<h6 class="text-nowrap mb-0">12 Orders</h6>
</div>
<div class="d-flex justify-content-between">
<h6 class="mb-1">Contact info</h6>
<h6 class="mb-1"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#editUser">Edit</a></h6>
</div>
<p class=" mb-1">Email: Shamus889@yahoo.com</p>
<p class=" mb-0">Mobile: +1 (609) 972-22-22</p>
</div>
</div>
<div class="card mb-6">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title m-0">Shipping address</h5>
<h6 class="m-0"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addNewAddress">Edit</a></h6>
</div>
<div class="card-body">
<p class="mb-0">45 Roker Terrace <br />Latheronwheel <br />KW5 8NW,London <br />UK</p>
</div>
</div>
<div class="card mb-6">
<div class="card-header d-flex justify-content-between">
<h5 class="card-title m-0">Billing address</h5>
<h6 class="m-0"><a href=" javascript:void(0)" data-bs-toggle="modal" data-bs-target="#addNewAddress">Edit</a></h6>
</div>
<div class="card-body">
<p class="mb-6">45 Roker Terrace <br />Latheronwheel <br />KW5 8NW,London <br />UK</p>
<h5 class="mb-1">Mastercard</h5>
<p class="mb-0">Card Number: ******4291</p>
</div>
</div>
</div>
</div>
{% include "partials/_modals/modal_edit_user.html" %}
{% include "partials/_modals/modal_add_new_address.html" %}
{% endblock %}

View File

@@ -0,0 +1,106 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Order List - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-order-list.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Order List Widget -->
<div class="card mb-6">
<div class="card-widget-separator-wrapper">
<div class="card-body card-widget-separator">
<div class="row gy-4 gy-sm-1">
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
<div>
<h4 class="mb-0">56</h4>
<p class="mb-0">Pending Payment</p>
</div>
<span class="avatar me-sm-6">
<span class="avatar-initial bg-label-secondary rounded text-heading">
<i class="icon-base ti tabler-calendar-stats icon-26px text-heading"></i>
</span>
</span>
</div>
<hr class="d-none d-sm-block d-lg-none me-6" />
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
<div>
<h4 class="mb-0">12,689</h4>
<p class="mb-0">Completed</p>
</div>
<span class="avatar p-2 me-lg-6">
<span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-checks icon-26px text-heading"></i></span>
</span>
</div>
<hr class="d-none d-sm-block d-lg-none" />
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
<div>
<h4 class="mb-0">124</h4>
<p class="mb-0">Refunded</p>
</div>
<span class="avatar p-2 me-sm-6">
<span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-wallet icon-26px text-heading"></i></span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<h4 class="mb-0">32</h4>
<p class="mb-0">Failed</p>
</div>
<span class="avatar p-2">
<span class="avatar-initial bg-label-secondary rounded"><i class="icon-base ti tabler-alert-octagon icon-26px text-heading"></i></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Order List Table -->
<div class="card">
<div class="card-datatable table-responsive">
<table class="datatables-order table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>order</th>
<th>date</th>
<th>customers</th>
<th>payment</th>
<th>status</th>
<th>method</th>
<th>actions</th>
</tr>
</thead>
</table>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,447 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Add Product - Apps{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/quill/typography.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/quill/katex.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/quill/editor.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/dropzone/dropzone.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/flatpickr/flatpickr.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/tagify/tagify.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/quill/katex.js' %}"></script>
<script src="{% static 'vendor/libs/quill/quill.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/dropzone/dropzone.js' %}"></script>
<script src="{% static 'vendor/libs/jquery-repeater/jquery-repeater.js' %}"></script>
<script src="{% static 'vendor/libs/flatpickr/flatpickr.js' %}"></script>
<script src="{% static 'vendor/libs/tagify/tagify.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-product-add.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="app-ecommerce">
<!-- Add Product -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
<div class="d-flex flex-column justify-content-center">
<h4 class="mb-1">Add a new Product</h4>
<p class="mb-0">Orders placed across your store</p>
</div>
<div class="d-flex align-content-center flex-wrap gap-4">
<div class="d-flex gap-4"><button class="btn btn-label-secondary">Discard</button> <button class="btn btn-label-primary">Save draft</button></div>
<button type="submit" class="btn btn-primary">Publish product</button>
</div>
</div>
<div class="row">
<!-- First column-->
<div class="col-12 col-lg-8">
<!-- Product Information -->
<div class="card mb-6">
<div class="card-header">
<h5 class="card-tile mb-0">Product information</h5>
</div>
<div class="card-body">
<div class="mb-6">
<label class="form-label" for="ecommerce-product-name">Name</label>
<input type="text" class="form-control" id="ecommerce-product-name" placeholder="Product title" name="productTitle" aria-label="Product title" />
</div>
<div class="row mb-6">
<div class="col"><label class="form-label" for="ecommerce-product-sku">SKU</label> <input type="number" class="form-control" id="ecommerce-product-sku" placeholder="SKU" name="productSku" aria-label="Product SKU" /></div>
<div class="col"><label class="form-label" for="ecommerce-product-barcode">Barcode</label> <input type="text" class="form-control" id="ecommerce-product-barcode" placeholder="0123-4567" name="productBarcode" aria-label="Product barcode" /></div>
</div>
<!-- Description -->
<div>
<label class="mb-1">Description (Optional)</label>
<div class="form-control p-0">
<div class="comment-toolbar border-0 border-bottom">
<div class="d-flex justify-content-start">
<span class="ql-formats me-0">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-link"></button>
<button class="ql-image"></button>
</span>
</div>
</div>
<div class="comment-editor border-0 pb-6" id="ecommerce-category-description"></div>
</div>
</div>
</div>
</div>
<!-- /Product Information -->
<!-- Media -->
<div class="card mb-6">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0 card-title">Product Image</h5>
<a href="javascript:void(0);" class="fw-medium">Add media from URL</a>
</div>
<div class="card-body">
<form action="/upload" class="dropzone needsclick p-0" id="dropzone-basic">
<div class="dz-message needsclick">
<p class="h4 needsclick pt-3 mb-2">Drag and drop your image here</p>
<p class="h6 text-body-secondary d-block fw-normal mb-2">or</p>
<span class="needsclick btn btn-sm btn-label-primary" id="btnBrowse">Browse image</span>
</div>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<!-- /Media -->
<!-- Variants -->
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title mb-0">Variants</h5>
</div>
<div class="card-body">
<form class="form-repeater">
<div data-repeater-list="group-a">
<div data-repeater-item>
<div class="row g-sm-6 mb-6">
<div class="col-sm-4">
<label class="form-label" for="form-repeater-1-1">Options</label>
<select id="form-repeater-1-1" class="select2 form-select" data-placeholder="Size">
<option value="">Size</option>
<option value="size">Size</option>
<option value="color">Color</option>
<option value="weight">Weight</option>
<option value="smell">Smell</option>
</select>
</div>
<div class="col-sm-8">
<label class="form-label invisible" for="form-repeater-1-2">Not visible</label>
<input type="number" id="form-repeater-1-2" class="form-control" placeholder="Enter size" />
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" data-repeater-create>
<i class="icon-base ti tabler-plus icon-xs me-2"></i>
Add another option
</button>
</div>
</form>
</div>
</div>
<!-- /Variants -->
<!-- Inventory -->
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title mb-0">Inventory</h5>
</div>
<div class="card-body">
<div class="row">
<!-- Navigation -->
<div class="col-12 col-md-4 col-xl-5 col-xxl-4 mx-auto card-separator">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0 pe-md-4">
<div class="nav-align-left">
<ul class="nav nav-pills flex-column w-100">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#restock">
<i class="icon-base ti tabler-box icon-sm me-1_5"></i>
<span class="align-middle">Restock</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#shipping">
<i class="icon-base ti tabler-car icon-sm me-1_5"></i>
<span class="align-middle">Shipping</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#global-delivery">
<i class="icon-base ti tabler-world icon-sm me-1_5"></i>
<span class="align-middle">Global Delivery</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#attributes">
<i class="icon-base ti tabler-link icon-sm me-1_5"></i>
<span class="align-middle">Attributes</span>
</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#advanced">
<i class="icon-base ti tabler-lock icon-sm me-1_5"></i>
<span class="align-middle">Advanced</span>
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-md-8 col-xl-7 col-xxl-8 pt-6 pt-md-0">
<div class="tab-content p-0 ps-md-4">
<!-- Restock Tab -->
<div class="tab-pane fade show active" id="restock" role="tabpanel">
<h6 class="text-body">Options</h6>
<label class="form-label" for="ecommerce-product-stock">Add to Stock</label>
<div class="row mb-4 g-4 pe-md-4">
<div class="col-12 col-sm-9">
<input type="number" class="form-control" id="ecommerce-product-stock" placeholder="Quantity" name="quantity" aria-label="Quantity" />
</div>
<div class="col-12 col-sm-3">
<button class="btn btn-primary">Confirm</button>
</div>
</div>
<div>
<h6 class="mb-2 fw-normal">Product in stock now: 54</h6>
<h6 class="mb-2 fw-normal">Product in transit: 390</h6>
<h6 class="mb-2 fw-normal">Last time restocked: 24th June, 2023</h6>
<h6 class="mb-0 fw-normal">Total stock over lifetime: 2430</h6>
</div>
</div>
<!-- Shipping Tab -->
<div class="tab-pane fade" id="shipping" role="tabpanel">
<h6 class="mb-3 text-body">Shipping Type</h6>
<div>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="shippingType" id="seller" />
<label class="form-check-label" for="seller">
<span class="mb-1 h6">Fulfilled by Seller</span><br />
<small
>You'll be responsible for product delivery.<br />
Any damage or delay during shipping may cost you a Damage fee.</small
>
</label>
</div>
<div class="form-check mb-6">
<input class="form-check-input" type="radio" name="shippingType" id="companyName" checked />
<label class="form-check-label" for="companyName">
<span class="mb-1 h6">Fulfilled by Company name &nbsp;<span class="badge rounded-2 badge-warning bg-label-warning fs-tiny py-1">RECOMMENDED</span></span
><br />
<small
>Your product, Our responsibility.<br />
For a measly fee, we will handle the delivery process for you.</small
>
</label>
</div>
<p class="mb-0">See our <a href="javascript:void(0);">Delivery terms and conditions</a> for details</p>
</div>
</div>
<!-- Global Delivery Tab -->
<div class="tab-pane fade" id="global-delivery" role="tabpanel">
<h6 class="mb-3 text-body">Global Delivery</h6>
<!-- Worldwide delivery -->
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="globalDel" id="worldwide" />
<label class="form-check-label" for="worldwide">
<span class="mb-1 h6">Worldwide delivery</span><br />
<small>Only available with Shipping method: <a href="javascript:void(0);">Fulfilled by Company name</a></small>
</label>
</div>
<!-- Global delivery -->
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="globalDel" checked />
<label class="form-check-label w-75 pe-12" for="country-selected">
<span class="mb-2 h6">Selected Countries</span>
<input type="text" class="form-control" placeholder="Type Country name" id="country-selected" />
</label>
</div>
<!-- Local delivery -->
<div class="form-check">
<input class="form-check-input" type="radio" name="globalDel" id="local" />
<label class="form-check-label" for="local">
<span class="mb-1 h6">Local delivery</span><br />
<small>Deliver to your country of residence : <a href="javascript:void(0);">Change profile address</a></small>
</label>
</div>
</div>
<!-- Attributes Tab -->
<div class="tab-pane fade" id="attributes" role="tabpanel">
<h6 class="mb-2 text-body">Attributes</h6>
<div>
<!-- Fragile Product -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="fragile" id="fragile" />
<label class="form-check-label" for="fragile">
<span class="fw-medium">Fragile Product</span>
</label>
</div>
<!-- Biodegradable -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="biodegradable" id="biodegradable" />
<label class="form-check-label" for="biodegradable">
<span class="fw-medium">Biodegradable</span>
</label>
</div>
<!-- Frozen Product -->
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" value="frozen" checked />
<label class="form-check-label w-75 pe-12" for="frozen">
<span class="mb-1 h6">Frozen Product</span>
<input type="number" class="form-control" placeholder="Max. allowed Temperature" id="frozen" />
</label>
</div>
<!-- Exp Date -->
<div class="form-check mb-6">
<input class="form-check-input" type="checkbox" value="expDate" id="expDate" checked />
<label class="form-check-label w-75 pe-12" for="date-input">
<span class="mb-1 h6">Expiry Date of Product</span>
<input type="date" class="product-date form-control" id="date-input" />
</label>
</div>
</div>
</div>
<!-- /Attributes Tab -->
<!-- Advanced Tab -->
<div class="tab-pane fade" id="advanced" role="tabpanel">
<h6 class="mb-3 text-body">Advanced</h6>
<div class="row">
<!-- Product Id Type -->
<div class="col">
<label class="form-label" for="product-id">
<span class="mb-1 h6">Product ID Type</span>
</label>
<select id="product-id" class="select2 form-select" data-placeholder="ISBN">
<option value="">ISBN</option>
<option value="ISBN">ISBN</option>
<option value="UPC">UPC</option>
<option value="EAN">EAN</option>
<option value="JAN">JAN</option>
</select>
</div>
<!-- Product Id -->
<div class="col">
<label class="form-label" for="product-id-1">
<span class="mb-1 h6">Product ID</span>
</label>
<input type="number" id="product-id-1" class="form-control" placeholder="ISBN Number" />
</div>
</div>
</div>
<!-- /Advanced Tab -->
</div>
</div>
<!-- /Options-->
</div>
</div>
</div>
<!-- /Inventory -->
</div>
<!-- /Second column -->
<!-- Second column -->
<div class="col-12 col-lg-4">
<!-- Pricing Card -->
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title mb-0">Pricing</h5>
</div>
<div class="card-body">
<!-- Base Price -->
<div class="mb-6">
<label class="form-label" for="ecommerce-product-price">Base Price</label>
<input type="number" class="form-control" id="ecommerce-product-price" placeholder="Price" name="productPrice" aria-label="Product price" />
</div>
<!-- Discounted Price -->
<div class="mb-6">
<label class="form-label" for="ecommerce-product-discount-price">Discounted Price</label>
<input type="number" class="form-control" id="ecommerce-product-discount-price" placeholder="Discounted Price" name="productDiscountedPrice" aria-label="Product discounted price" />
</div>
<!-- Charge tax check box -->
<div class="form-check ms-2 mt-2 mb-4">
<input class="form-check-input" type="checkbox" value="" id="price-charge-tax" checked />
<label class="switch-label" for="price-charge-tax"> Charge tax on this product </label>
</div>
<!-- Instock switch -->
<div class="d-flex justify-content-between align-items-center border-top pt-2">
<span class="mb-0">In stock</span>
<div class="w-25 d-flex justify-content-end">
<div class="form-check form-switch me-n3">
<input type="checkbox" class="form-check-input" checked />
</div>
</div>
</div>
</div>
</div>
<!-- /Pricing Card -->
<!-- Organize Card -->
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title mb-0">Organize</h5>
</div>
<div class="card-body">
<!-- Vendor -->
<div class="mb-6 col ecommerce-select2-dropdown">
<label class="form-label mb-1" for="vendor"> Vendor </label>
<select id="vendor" class="select2 form-select" data-placeholder="Select Vendor">
<option value="">Select Vendor</option>
<option value="men-clothing">Men's Clothing</option>
<option value="women-clothing">Women's-clothing</option>
<option value="kid-clothing">Kid's-clothing</option>
</select>
</div>
<!-- Category -->
<div class="d-flex justify-content-between align-items-center">
<div class="mb-6 col ecommerce-select2-dropdown">
<label class="form-label mb-1" for="category-org">
<span>Category</span>
</label>
<select id="category-org" class="select2 form-select" data-placeholder="Select Category">
<option value="">Select Category</option>
<option value="Household">Household</option>
<option value="Management">Management</option>
<option value="Electronics">Electronics</option>
<option value="Office">Office</option>
<option value="Automotive">Automotive</option>
</select>
</div>
<a href="javascript:void(0);" class="fw-medium btn btn-icon btn-label-primary ms-4"><i class="icon-base ti tabler-plus icon-md"></i></a>
</div>
<!-- Collection -->
<div class="mb-6 col ecommerce-select2-dropdown">
<label class="form-label mb-1" for="collection">Collection </label>
<select id="collection" class="select2 form-select" data-placeholder="Collection">
<option value="">Collection</option>
<option value="men-clothing">Men's Clothing</option>
<option value="women-clothing">Women's-clothing</option>
<option value="kid-clothing">Kid's-clothing</option>
</select>
</div>
<!-- Status -->
<div class="mb-6 col ecommerce-select2-dropdown">
<label class="form-label mb-1" for="status-org">Status </label>
<select id="status-org" class="select2 form-select" data-placeholder="Published">
<option value="">Published</option>
<option value="Published">Published</option>
<option value="Scheduled">Scheduled</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<!-- Tags -->
<div>
<label for="ecommerce-product-tags" class="form-label mb-1">Tags</label>
<input id="ecommerce-product-tags" class="form-control" name="ecommerce-product-tags" value="Normal,Standard,Premium" aria-label="Product Tags" />
</div>
</div>
</div>
<!-- /Organize Card -->
</div>
<!-- /Second column -->
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,117 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Product List - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-product-list.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Product List Widget -->
<div class="card mb-6">
<div class="card-widget-separator-wrapper">
<div class="card-body card-widget-separator">
<div class="row gy-4 gy-sm-1">
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
<div>
<p class="mb-1">In-store Sales</p>
<h4 class="mb-1">$5,345.43</h4>
<p class="mb-0"><span class="me-2">5k orders</span><span class="badge bg-label-success">+5.7%</span></p>
</div>
<span class="avatar me-sm-6">
<span class="avatar-initial rounded"><i class="icon-base ti tabler-smart-home icon-28px text-heading"></i></span>
</span>
</div>
<hr class="d-none d-sm-block d-lg-none me-6" />
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
<div>
<p class="mb-1">Website Sales</p>
<h4 class="mb-1">$674,347.12</h4>
<p class="mb-0"><span class="me-2">21k orders</span><span class="badge bg-label-success">+12.4%</span></p>
</div>
<span class="avatar p-2 me-lg-6">
<span class="avatar-initial rounded"><i class="icon-base ti tabler-device-laptop icon-28px text-heading"></i></span>
</span>
</div>
<hr class="d-none d-sm-block d-lg-none" />
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
<div>
<p class="mb-1">Discount</p>
<h4 class="mb-1">$14,235.12</h4>
<p class="mb-0">6k orders</p>
</div>
<span class="avatar p-2 me-sm-6">
<span class="avatar-initial rounded"><i class="icon-base ti tabler-gift icon-28px text-heading"></i></span>
</span>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<p class="mb-1">Affiliate</p>
<h4 class="mb-1">$8,345.23</h4>
<p class="mb-0"><span class="me-2">150 orders</span><span class="badge bg-label-danger">-3.5%</span></p>
</div>
<span class="avatar p-2">
<span class="avatar-initial rounded"><i class="icon-base ti tabler-wallet icon-28px text-heading"></i></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product List Table -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title">Filter</h5>
<div class="d-flex justify-content-between align-items-center row pt-4 gap-6 gap-md-0 g-md-6">
<div class="col-md-4 product_status"></div>
<div class="col-md-4 product_category"></div>
<div class="col-md-4 product_stock"></div>
</div>
</div>
<div class="card-datatable">
<table class="datatables-products table">
<thead class="border-top">
<tr>
<th></th>
<th></th>
<th>product</th>
<th>category</th>
<th>stock</th>
<th>sku</th>
<th>price</th>
<th>qty</th>
<th>status</th>
<th>actions</th>
</tr>
</thead>
</table>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,217 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}eCommerce Referral - Apps{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-bs5/datatables.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/datatables-bs5/datatables-bootstrap5.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-referral.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row mb-6 g-6">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div class="content-left">
<h5 class="mb-1">$24,983</h5>
<small>Total Earning</small>
</div>
<span class="badge bg-label-primary rounded-circle p-2">
<i class="icon-base ti tabler-currency-dollar icon-lg"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div class="content-left">
<h5 class="mb-1">$8,647</h5>
<small>Unpaid Earning</small>
</div>
<span class="badge bg-label-success rounded-circle p-2">
<i class="icon-base ti tabler-gift icon-lg"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div class="content-left">
<h5 class="mb-1">2,367</h5>
<small>Signups</small>
</div>
<span class="badge bg-label-danger rounded-circle p-2">
<i class="icon-base ti tabler-users icon-lg"></i>
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div class="content-left">
<h5 class="mb-1">4.5%</h5>
<small>Conversion Rate</small>
</div>
<span class="badge bg-label-info rounded-circle p-2">
<i class="icon-base ti tabler-infinity icon-lg"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-6 g-6">
<div class="col-lg-7">
<div class="card h-100">
<div class="card-body">
<h5 class="mb-1">How to use</h5>
<p class="mb-6 card-subtitle mt-0">Integrate your referral code in 3 easy steps.</p>
<div class="d-flex flex-column flex-sm-row justify-content-between text-center gap-6">
<div class="d-flex flex-column align-items-center">
<span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
<div class="text-primary">
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M35.2623 24.3473L30.1107 18.1621C30.3076 21.952 29.3724 26.3652 26.4849 31.4019L31.4068 35.3394C31.5818 35.4784 31.7894 35.5704 32.01 35.6067C32.2305 35.643 32.4566 35.6224 32.6669 35.5468C32.8773 35.4712 33.0648 35.3432 33.2118 35.1748C33.3588 35.0065 33.4603 34.8034 33.5068 34.5848L35.5248 25.4629C35.5734 25.2695 35.575 25.0672 35.5293 24.8731C35.4836 24.679 35.3921 24.4987 35.2623 24.3473ZM7.30603 24.4457L12.4576 18.277C12.2607 22.0668 13.1959 26.4801 16.0834 31.5004L11.1615 35.4379C10.9876 35.5769 10.7812 35.6693 10.5617 35.7065C10.3422 35.7437 10.1169 35.7245 9.9069 35.6507C9.6969 35.5769 9.50912 35.4509 9.36123 35.2845C9.21334 35.1181 9.11019 34.9168 9.0615 34.6996L7.04353 25.5613C6.99488 25.3679 6.99333 25.1657 7.039 24.9716C7.08468 24.7775 7.17625 24.5971 7.30603 24.4457Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8811 2.47353C20.2896 2.13596 20.8031 1.95117 21.3333 1.95117C21.8651 1.95117 22.38 2.13707 22.7891 2.47657C24.3981 3.7867 27.8808 7.0357 29.8053 12.0381C30.4659 13.7554 30.9381 15.6673 31.0933 17.7625L36.1251 23.8008C36.3563 24.0724 36.5195 24.3951 36.6012 24.7424C36.6822 25.0868 36.6808 25.4453 36.597 25.7889L34.5817 34.9151L34.581 34.9182C34.4952 35.3009 34.3135 35.6555 34.0529 35.9487C33.7924 36.2418 33.4615 36.4639 33.0915 36.5939C32.7215 36.724 32.3245 36.7579 31.9378 36.6923C31.5511 36.6267 31.1875 36.4638 30.881 36.219L30.8806 36.2186L26.2326 32.5002H16.4341L11.7862 36.2186L11.7857 36.219C11.4793 36.4638 11.1156 36.6267 10.729 36.6923C10.3423 36.7579 9.94525 36.724 9.57524 36.5939C9.20523 36.4639 8.87438 36.2418 8.61381 35.9487C8.35324 35.6555 8.17151 35.3009 8.08572 34.9182L8.08502 34.9151L6.06973 25.7889C5.98601 25.4453 5.98455 25.0868 6.06559 24.7424C6.14733 24.395 6.31065 24.072 6.54198 23.8004L11.4767 17.8912C11.6193 15.7424 12.1008 13.7842 12.7825 12.029C14.726 7.02537 18.2534 3.77698 19.8811 2.47353ZM29.1238 18.3076C29.1125 18.2387 29.1086 18.169 29.1118 18.0996C28.9861 16.1202 28.5469 14.3374 27.9387 12.7563C26.1899 8.21065 22.9998 5.22661 21.5224 4.02428L21.5125 4.01626L21.5126 4.01619C21.4623 3.97418 21.3988 3.95117 21.3333 3.95117C21.2678 3.95117 21.2043 3.97418 21.154 4.01619L21.1377 4.02954C19.645 5.22365 16.4124 8.20744 14.6468 12.7531C14.0147 14.3804 13.5649 16.2219 13.4576 18.2718C13.4578 18.3084 13.456 18.345 13.4522 18.3815C13.2924 21.8411 14.1096 25.8898 16.6664 30.5002H25.9943C28.5166 25.8569 29.3045 21.7836 29.1238 18.3076ZM34.5925 25.0857L31.0856 20.8775C30.8435 24.0045 29.8822 27.4702 27.8649 31.2448L32.1295 34.6565C32.1709 34.6896 32.22 34.7116 32.2723 34.7204C32.3245 34.7293 32.3782 34.7247 32.4282 34.7071C32.4782 34.6896 32.5229 34.6596 32.5581 34.6199C32.5931 34.5806 32.6176 34.533 32.6293 34.4817L32.6295 34.4807L34.6468 25.3455C34.6488 25.3361 34.6511 25.3266 34.6534 25.3172C34.6631 25.2789 34.6634 25.2389 34.6543 25.2004C34.6453 25.162 34.6272 25.1263 34.6015 25.0963L34.5924 25.0858L34.5925 25.0857ZM11.5084 20.9734L8.07358 25.0865L8.06535 25.0964L8.06529 25.0963C8.0396 25.1263 8.02147 25.162 8.01242 25.2004C8.00338 25.2389 8.00369 25.2789 8.01332 25.3172C8.01568 25.3266 8.01791 25.3361 8.02001 25.3455L10.0373 34.4807L10.0375 34.4817C10.0492 34.533 10.0737 34.5806 10.1086 34.6199C10.1439 34.6596 10.1886 34.6896 10.2386 34.7071C10.2886 34.7247 10.3422 34.7293 10.3945 34.7204C10.4467 34.7116 10.4959 34.6896 10.5373 34.6565L14.796 31.2495C12.7589 27.5131 11.7736 24.0779 11.5084 20.9734ZM17.7084 36.7502C17.7084 36.1979 18.1561 35.7502 18.7084 35.7502H23.9584C24.5107 35.7502 24.9584 36.1979 24.9584 36.7502C24.9584 37.3025 24.5107 37.7502 23.9584 37.7502H18.7084C18.1561 37.7502 17.7084 37.3025 17.7084 36.7502ZM23.3021 15.7502C23.3021 16.8375 22.4207 17.719 21.3334 17.719C20.2461 17.719 19.3646 16.8375 19.3646 15.7502C19.3646 14.6629 20.2461 13.7815 21.3334 13.7815C22.4207 13.7815 23.3021 14.6629 23.3021 15.7502Z"
fill="currentColor" />
</svg>
</div>
</span>
<p class="my-2 w-75">Create & validate your referral link and get</p>
<h6 class="text-primary mb-0">$50</h6>
</div>
<div class="d-flex flex-column align-items-center">
<span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
<div class="text-primary">
<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M9.1875 6.25H32.8125C32.8954 6.25 32.9749 6.28292 33.0335 6.34153L33.739 5.63603L33.0335 6.34153C33.0921 6.40013 33.125 6.47962 33.125 6.5625V35.4375C33.125 35.5204 33.0921 35.5999 33.0335 35.6585L33.7406 36.3656L33.0335 35.6585C32.9749 35.7171 32.8954 35.75 32.8125 35.75H9.1875C9.10462 35.75 9.02513 35.7171 8.96653 35.6585L8.25942 36.3656L8.96653 35.6585C8.90792 35.5999 8.875 35.5204 8.875 35.4375V6.5625C8.875 6.47962 8.90792 6.40014 8.96653 6.34153C9.02514 6.28292 9.10462 6.25 9.1875 6.25ZM17.5277 27.5092C18.5555 28.1959 19.7639 28.5625 21 28.5625C22.6576 28.5625 24.2473 27.904 25.4194 26.7319C26.5915 25.5598 27.25 23.9701 27.25 22.3125C27.25 21.0764 26.8834 19.868 26.1967 18.8402C25.5099 17.8124 24.5338 17.0113 23.3918 16.5383C22.2497 16.0652 20.9931 15.9414 19.7807 16.1826C18.5683 16.4237 17.4547 17.019 16.5806 17.8931C15.7065 18.7672 15.1112 19.8808 14.8701 21.0932C14.6289 22.3056 14.7527 23.5622 15.2258 24.7043C15.6988 25.8463 16.4999 26.8224 17.5277 27.5092Z"
fill="currentColor"
stroke="currentColor"
stroke-width="2" />
<path
d="M21 27.5625C23.8995 27.5625 26.25 25.212 26.25 22.3125C26.25 19.413 23.8995 17.0625 21 17.0625C18.1005 17.0625 15.75 19.413 15.75 22.3125C15.75 25.212 18.1005 27.5625 21 27.5625ZM21 27.5625C19.4718 27.5625 17.9646 27.9183 16.5977 28.6017C15.2309 29.2852 14.0419 30.2774 13.125 31.5M21 27.5625C22.5282 27.5625 24.0354 27.9183 25.4023 28.6017C26.7691 29.2852 27.9581 30.2774 28.875 31.5M15.75 10.5H26.25M34.125 6.5625V35.4375C34.125 36.1624 33.5374 36.75 32.8125 36.75H9.1875C8.46263 36.75 7.875 36.1624 7.875 35.4375V6.5625C7.875 5.83763 8.46263 5.25 9.1875 5.25H32.8125C33.5374 5.25 34.125 5.83763 34.125 6.5625Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</span>
<p class="my-2 w-75">For every new signup you get</p>
<h6 class="text-primary mb-0">10%</h6>
</div>
<div class="d-flex flex-column align-items-center">
<span class="p-4 border-1 border-primary rounded-circle border-dashed mb-0 w-px-75 h-px-75">
<div class="text-primary">
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M35.1707 5.89001L4.58941 14.5033C4.32909 14.5745 4.09703 14.7242 3.92485 14.932C3.75268 15.1398 3.64875 15.3956 3.62723 15.6647C3.60571 15.9337 3.66764 16.2028 3.80458 16.4353C3.94153 16.6679 4.14684 16.8526 4.39253 16.9642L18.4363 23.6088C18.7114 23.7362 18.9323 23.9571 19.0597 24.2322L25.7043 38.2759C25.8159 38.5216 26.0006 38.7269 26.2331 38.8639C26.4657 39.0008 26.7348 39.0628 27.0038 39.0412C27.2728 39.0197 27.5287 38.9158 27.7365 38.7436C27.9443 38.5714 28.094 38.3394 28.1652 38.0791L36.7785 7.49782C36.8437 7.27466 36.8478 7.03804 36.7902 6.81279C36.7325 6.58753 36.6154 6.38192 36.451 6.21751C36.2866 6.0531 36.081 5.93594 35.8557 5.87832C35.6304 5.8207 35.3938 5.82474 35.1707 5.89001Z"
fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M36.1035 4.90951C35.7063 4.80791 35.2892 4.81452 34.8954 4.92862L4.32569 13.5387L4.32147 13.5398C3.86452 13.6657 3.45723 13.929 3.1548 14.294C2.85144 14.6602 2.66833 15.1109 2.63041 15.5849C2.59249 16.0589 2.70161 16.533 2.9429 16.9428C3.1827 17.35 3.54147 17.6739 3.97083 17.871L18.0086 24.5127L18.0086 24.5127L18.0161 24.5162C18.0762 24.544 18.1245 24.5923 18.1523 24.6524L18.1523 24.6524L18.1558 24.6599L24.7975 38.6978C24.9946 39.1271 25.3185 39.4858 25.7257 39.7256C26.1354 39.9669 26.6096 40.076 27.0836 40.0381C27.5576 40.0001 28.0083 39.817 28.3745 39.5137C28.7395 39.2113 29.0028 38.804 29.1286 38.347L29.1298 38.3428L37.7383 7.77853L37.7398 7.77315C37.854 7.37938 37.8606 6.96221 37.759 6.56497C37.6569 6.16591 37.4493 5.80166 37.1581 5.5104C36.8668 5.21914 36.5026 5.01159 36.1035 4.90951ZM35.4418 6.85256L35.1707 5.89001L35.4514 6.8498C35.5024 6.83489 35.5564 6.83396 35.6079 6.84713C35.6593 6.86029 35.7063 6.88705 35.7439 6.92461C35.7814 6.96218 35.8082 7.00915 35.8214 7.06061C35.8345 7.11207 35.8336 7.16612 35.8187 7.2171L35.8186 7.21709L35.8159 7.22671L27.2026 37.808L27.2026 37.808L27.2006 37.8153C27.1836 37.8773 27.148 37.9326 27.0985 37.9736C27.049 38.0146 26.9881 38.0393 26.9241 38.0444C26.86 38.0496 26.7959 38.0348 26.7406 38.0022C26.6852 37.9696 26.6412 37.9207 26.6147 37.8622L26.6082 37.8483L20.0646 24.0181L26.9856 17.0971C27.3761 16.7066 27.3761 16.0734 26.9856 15.6829C26.5951 15.2924 25.9619 15.2924 25.5714 15.6829L18.6505 22.6038L4.82021 16.0603L4.80626 16.0538C4.74776 16.0272 4.69888 15.9833 4.66627 15.9279C4.63366 15.8725 4.61892 15.8085 4.62404 15.7444C4.62917 15.6803 4.65391 15.6194 4.69491 15.57C4.7359 15.5205 4.79115 15.4848 4.85313 15.4679L4.85314 15.4679L4.86051 15.4658L35.4418 6.85256Z"
fill="currentColor" />
</svg>
</div>
</span>
<p class="my-2 w-75">Get other friends to generate link and get</p>
<h6 class="text-primary mb-0">$100</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card h-100">
<div class="card-body">
<form class="referral-form" onsubmit="return false">
<div class="mb-6 mt-1">
<h5 class="mb-5">Invite your friends</h5>
<div class="d-flex gap-4 align-items-end">
<div class="w-100">
<label class="form-label mb-1" for="referralEmail">Enter friends email address and invite them</label>
<input type="email" id="referralEmail" name="referralEmail" class="form-control w-100" placeholder="Email address" />
</div>
<div>
<button type="submit" class="btn btn-primary"><i class="icon-base ti tabler-check icon-xs me-2"></i>Submit</button>
</div>
</div>
</div>
<div>
<h5 class="mb-5">Share the referral link</h5>
<div class="d-flex gap-4 align-items-end">
<div class="w-100">
<label class="form-label mb-1" for="referralLink">Share referral link in social media</label>
<input type="text" id="referralLink" name="referralLink" class="form-control w-100 h-px-40" placeholder="pixinvent.com/?ref=6479" />
</div>
<div class="d-flex">
<button type="button" class="btn btn-facebook btn-icon me-2"><i class="icon-base ti tabler-brand-facebook text-white icon-22px"></i></button>
<button type="button" class="btn btn-twitter btn-icon"><i class="icon-base ti tabler-brand-twitter text-white icon-22px"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Referral List Table -->
<div class="card">
<div class="card-datatable">
<table class="datatables-referral table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>Users</th>
<th class="text-nowrap">Referred ID</th>
<th>Status</th>
<th>Value</th>
<th class="text-nowrap">Earnings</th>
</tr>
</thead>
</table>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,166 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Checkout - eCommerce{% endblock %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-detail' %}">
<i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-payments' %}">
<i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-shipping' %}">
<i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-locations' %}">
<i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-settings-notifications' %}">
<i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Checkout Tab -->
<div class="tab-pane fade show active" id="checkout" role="tabpanel">
<div class="card mb-6">
<div class="card-header">
<div class="card-title m-0">
<h5 class="m-0">Customer contact method</h5>
<p class="my-0 card-subtitle">Select what contact method customers use to check out.</p>
</div>
</div>
<div class="card-body">
<div class="form-check my-2 ms-2">
<input class="form-check-input" type="radio" name="contactMethod" id="contactPhone" checked />
<label class="form-check-label text-heading" for="contactPhone"> Phone number </label>
</div>
<div class="form-check mb-6 mt-4 ms-2">
<input class="form-check-input" type="radio" name="contactMethod" id="contactMail" />
<label class="form-check-label text-heading" for="contactMail"> Email </label>
</div>
<div class="alert d-flex align-items-center alert-info mb-0 h5" role="alert">
<span class="alert-icon rounded-2">
<i class="icon-base ti tabler-info-circle icon-md"></i>
</span>
To send SMS updates, you need to install an SMS App.
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Customer information</h5>
</div>
<div class="card-body">
<div class="mb-4">
<p class="mb-0">Full name</p>
<div class="form-check my-2 ms-2">
<input class="form-check-input" type="radio" name="fullName" id="last_name" checked />
<label class="form-check-label text-heading" for="last_name"> Only require last name </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="fullName" id="last_and_first_name" />
<label class="form-check-label text-heading" for="last_and_first_name"> Require first and last name </label>
</div>
</div>
<div class="mb-4">
<p class="mb-0">Company name</p>
<div class="form-check my-2 ms-2">
<input class="form-check-input" type="radio" name="companyName" id="dont_include_name" checked />
<label class="form-check-label text-heading" for="dont_include_name"> Don't include name </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="companyName" id="optional_name" />
<label class="form-check-label text-heading" for="optional_name"> Optional </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="companyName" id="required_name" />
<label class="form-check-label text-heading" for="required_name"> Required </label>
</div>
</div>
<div class="mb-4">
<p class="mb-0">Address line 2 (apartment, unit, etc.)</p>
<div class="form-check my-2 ms-2">
<input class="form-check-input" type="radio" name="addressLine" id="dont_include_address" checked />
<label class="form-check-label text-heading" for="dont_include_address"> Don't include name </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="addressLine" id="optional_address" />
<label class="form-check-label text-heading" for="optional_address"> Optional </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="addressLine" id="required_address" />
<label class="form-check-label text-heading" for="required_address"> Required </label>
</div>
</div>
<div class="mb-4">
<p class="mb-0">Shipping address phone number</p>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="shippingAddress" id="dont_include_ship_address" checked />
<label class="form-check-label text-heading" for="dont_include_ship_address"> Don't include name </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="shippingAddress" id="optional_ship_address" />
<label class="form-check-label text-heading" for="optional_ship_address"> Optional </label>
</div>
<div class="form-check mt-4 ms-2">
<input class="form-check-input" type="radio" name="shippingAddress" id="required_ship_address" />
<label class="form-check-label text-heading" for="required_ship_address"> Required </label>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="reset" class="btn btn-label-secondary">Discard</button>
<a class="btn btn-primary" href="{% url 'app-ecommerce-settings-shipping' %}">Save Changes</a>
</div>
</div>
</div>
</div>
<!-- /Options-->
</div>
{% endblock %}

View File

@@ -0,0 +1,277 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Store Details - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-payments' %}">
<i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-checkout' %}">
<i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-shipping' %}">
<i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-locations' %}">
<i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-settings-notifications' %}">
<i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Store Details Tab -->
<div class="tab-pane fade show active" id="store_details" role="tabpanel">
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Profile</h5>
</div>
<div class="card-body">
<div class="row mb-6 g-6">
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="ecommerce-settings-details-name">Store Name</label>
<input type="text" class="form-control" id="ecommerce-settings-details-name" placeholder="John Doe" name="settingsDet" aria-label="settings Details" />
</div>
<div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-details-phone">Phone</label> <input type="tel" class="form-control phone-mask" id="ecommerce-settings-details-phone" placeholder="+(123) 456-7890" name="phone" aria-label="phone" /></div>
<div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-details-email">Store contact email</label> <input type="email" class="form-control" id="ecommerce-settings-details-email" placeholder="johndoe@gmail.com" name="email" aria-label="email" /></div>
<div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-sender-email">Sender email</label> <input type="email" class="form-control" id="ecommerce-settings-sender-email" placeholder="johndoe@gmail.com" name="sender_email" aria-label="sender email" /></div>
</div>
<div class="alert row alert-warning mb-0 h5 mx-0 " role="alert">
<span class=" col-3 alert-icon me-0 rounded-2 px-0">
<i class="icon-base ti tabler-bell icon-md"></i>
</span>
<div class="col text-wrap ps-4 pe-0 pt-sm-1">Confirm that you have access to johndoe@gmail.com in sender email settings.</div>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Billing information</h5>
</div>
<div class="card-body">
<div class="row g-6">
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="business-name">Legal business name</label>
<input type="text" id="business-name" class="form-control" placeholder="Business name" />
</div>
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="country_region">Country/region</label>
<select id="country_region" class="select2 form-select" data-placeholder="United States">
<option value="">United States</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="bill_address">Address</label>
<input type="text" id="bill_address" class="form-control" placeholder="Address" />
</div>
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="apa_suite">Apartment, suite, etc.</label>
<input type="text" id="apa_suite" class="form-control" placeholder="Apartment, suite, etc." />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="bill_city">City</label>
<input type="text" id="bill_city" class="form-control" placeholder="City" />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="bill_state">State</label>
<input type="text" id="bill_state" class="form-control" placeholder="State" />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="bill_pincode">PIN Code</label>
<input type="number" id="bill_pincode" class="form-control" placeholder="PIN Code" min="0" max="999999" />
</div>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0">Time zone and units of measurement</h5>
<p class="my-0 card-subtitle">Used to calculate product prices, shipping weighs, and order times.</p>
</div>
</div>
<div class="card-body">
<div class="row g-6">
<div class="col-12">
<label for="timeZones" class="form-label mb-1">Time zone</label>
<select id="timeZones" class="select2 form-select" data-placeholder="(GMT-12:00) International Date Line West">
<option value="">(GMT-12:00) International Date Line West</option>
<option value="-12">(GMT-12:00) International Date Line West</option>
<option value="-11">(GMT-11:00) Midway Island, Samoa</option>
<option value="-10">(GMT-10:00) Hawaii</option>
<option value="-9">(GMT-09:00) Alaska</option>
<option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="-8">(GMT-08:00) Tijuana, Baja California</option>
<option value="-7">(GMT-07:00) Arizona</option>
<option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
<option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="-6">(GMT-06:00) Central America</option>
<option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
<option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
<option value="-6">(GMT-06:00) Saskatchewan</option>
<option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
<option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="-5">(GMT-05:00) Indiana (East)</option>
<option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
<option value="-4">(GMT-04:00) Caracas, La Paz</option>
</select>
</div>
<div class="col-12 col-md-6">
<label for="unitSystemDropdown" class="form-label mb-1">Unit system</label>
<select id="unitSystemDropdown" class="select2 form-select" data-placeholder="Metric">
<option value="">Metric</option>
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
<option value="us">US Customary</option>
<option value="si">International System</option>
</select>
</div>
<div class="col-12 col-md-6">
<label for="weightUnits" class="form-label mb-1">Default weight unit</label>
<select id="weightUnits" class="select2 form-select" data-placeholder="Kilograms">
<option value="">Kilograms</option>
<option value="kg">Kilograms</option>
<option value="lb">Pounds</option>
<option value="g">Grams</option>
<option value="mg">Milligrams</option>
</select>
</div>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0">Store currency</h5>
<p class="my-0 card-subtitle">The currency your products are sold in.</p>
</div>
</div>
<div class="card-body">
<div>
<label for="currency-store" class="form-label mb-1">Store currency</label>
<select id="currency-store" class="select2 form-select" data-placeholder="Store currency">
<option value="">Store Currency</option>
<option value="usd">USD</option>
<option value="euro">Euro</option>
<option value="pound">Pound</option>
<option value="bitcoin">Bitcoin</option>
</select>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0">Order id format</h5>
<p class="my-0 card-subtitle">Shown on the Orders page, customer pages, and customer order notifications to identify orders.</p>
</div>
</div>
<div class="card-body">
<div class="row g-6">
<div class="col-12 col-md-6">
<label class="form-label mb-1" for="ecommerce-settings-details-prefix">Prefix</label>
<div class="input-group input-group-merge">
<span class="input-group-text text-body-secondary">#</span>
<input type="number" class="form-control" id="ecommerce-settings-details-prefix" name="prefix" aria-label="Prefix" min="0" />
</div>
<p class="mb-0 pt-2">Your order ID will appear as #1001, #1002, #1003 ...</p>
</div>
<div class="col-12 col-md-6"><label class="form-label mb-1" for="ecommerce-settings-sender-suffix">Suffix</label> <input type="text" class="form-control" id="ecommerce-settings-sender-suffix" name="suffix" aria-label="Suffix" /></div>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="reset" class="btn btn-label-secondary">Discard</button>
<a class="btn btn-primary" href="{% url 'app-ecommerce-settings-payments' %}">Save Changes</a>
</div>
</div>
</div>
</div>
<!-- /Options-->
</div>
{% endblock %}

View File

@@ -0,0 +1,167 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Locations - eCommerce{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-detail' %}">
<i class="icon-sm ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-payments' %}">
<i class="icon-sm ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-checkout' %}">
<i class="icon-sm ti tabler-shopping-cart icon-sm me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-shipping' %}">
<i class="icon-sm ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-sm ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-settings-notifications' %}">
<i class="icon-sm ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Locations Tab -->
<div class="tab-pane fade show active" id="locations" role="tabpanel">
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Location Name</h5>
</div>
<div class="card-body">
<div class="col-12 mb-6">
<label for="locationName" class="form-label mb-1">Location Name</label>
<input class="form-control" type="text" name="locationName" id="locationName" placeholder="Shop location" />
</div>
<div class="form-check mb-6 ms-2">
<input class="form-check-input" type="checkbox" value="" id="def_location" checked />
<label class="form-check-label" for="def_location"> Fulfill online orders from this location </label>
</div>
<div class="alert row alert-info mb-0 h5 mx-0" role="alert">
<span class=" col-3 alert-icon me-0 rounded-2 px-0">
<i class="icon-sm ti tabler-info-circle icon-md"></i>
</span>
<div class="col text-wrap ps-4 pe-0">This is your default location. To change whether you fulfill online orders from this location, select another default location first.</div>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Address</h5>
</div>
<div class="card-body">
<div class="row g-6">
<div class="col-12">
<label class="form-label mb-1" for="country_region">Country/region</label>
<select id="country_region" class="select2 form-select" data-placeholder="United States">
<option value="">United States</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="loc_address">Address</label>
<input type="text" id="loc_address" class="form-control" placeholder="Address" />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="loc_apa_suite">Apartment, suite, etc.</label>
<input type="text" id="loc_apa_suite" class="form-control" placeholder="Apartment, suite, etc." />
</div>
<div class="col-12 col-md-4"><label class="form-label mb-0" for="loc_phone">Phone</label> <input type="tel" class="form-control phone-mask" id="loc_phone" placeholder="Phone" name="loc_phone" aria-label="loc_phone" /></div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="loc_city">City</label>
<input type="text" id="loc_city" class="form-control" placeholder="City" />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="loc_state">State</label>
<input type="text" id="loc_state" class="form-control" placeholder="State" />
</div>
<div class="col-12 col-md-4">
<label class="form-label mb-1" for="loc_pincode">PIN Code</label>
<input type="number" id="loc_pincode" class="form-control" placeholder="PIN Code" min="0" max="999999" />
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="reset" class="btn btn-label-secondary">Discard</button>
<a class="btn btn-primary" href="{% url 'app-ecommerce-settings-notifications' %}">Save Changes</a>
</div>
</div>
</div>
<!-- /Options-->
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,272 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Notifications - eCommerce{% endblock %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-detail' %}">
<i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-payments' %}">
<i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-checkout' %}">
<i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-shipping' %}">
<i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-locations' %}">
<i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Notification Tab -->
<div class="tab-pane fade show active" id="notifications" role="tabpanel">
<div class="card mb-6">
<div class="card-body">
<h5 class="card-title mb-4">Customer</h5>
<div class="card shadow-none mb-6 border-0">
<div class="table-responsive border border-top-0 rounded">
<table class="table">
<thead>
<tr>
<th class="text-nowrap w-50">Type</th>
<th class="text-nowrap text-center w-25">Email</th>
<th class="text-nowrap text-center w-25">App</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-heading">New customer sign up</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_1" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_2" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Customer account password reset</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_4" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_5" checked />
</div>
</td>
</tr>
<tr class="border-transparent">
<td class="text-nowrap text-heading">Customer account invite</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_7" />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_cust_8" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h5 class="card-title mb-4">Orders</h5>
<div class="card shadow-none mb-6 border-0">
<div class="table-responsive border border-top-0 rounded">
<table class="table">
<thead>
<tr>
<th class="text-nowrap w-50">Type</th>
<th class="text-nowrap text-center w-25">Email</th>
<th class="text-nowrap text-center w-25">App</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-heading">Order purchase</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_1" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_2" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Order cancelled</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_4" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_5" />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Order refund request</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_7" />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_8" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Order confirmation</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_9" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_10" />
</div>
</td>
</tr>
<tr class="border-transparent">
<td class="text-nowrap text-heading">Payment error</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_11" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_order_12" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h5 class="card-title mb-4">Shipping</h5>
<div class="card shadow-none border-0">
<div class="table-responsive border border-top-0 rounded">
<table class="table">
<thead>
<tr>
<th class="text-nowrap w-50">Type</th>
<th class="text-nowrap text-center w-25">Email</th>
<th class="text-nowrap text-center w-25">App</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap text-heading">Picked up</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_1" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_2" checked />
</div>
</td>
</tr>
<tr>
<td class="text-nowrap text-heading">Shipping update</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_3" checked />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_4" />
</div>
</td>
</tr>
<tr class="border-transparent">
<td class="text-nowrap text-heading">Delivered</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_5" />
</div>
</td>
<td>
<div class="form-check d-flex justify-content-center">
<input class="form-check-input" type="checkbox" id="defaultCheck_ship_6" checked />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="button" class="btn btn-label-secondary">Discard</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
<!-- /Options-->
</div>
{% endblock %}

View File

@@ -0,0 +1,152 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Store Payments - eCommerce{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/app-ecommerce.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-detail' %}">
<i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-checkout' %}">
<i class="icon-base ti tabler-shopping-cart me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-shipping' %}">
<i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-locations' %}">
<i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-settings-notifications' %}">
<i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Payments Tab -->
<div class="tab-pane fade show active" id="payments" role="tabpanel">
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Payment providers</h5>
</div>
<div class="card-body">
<p class="mb-5">Providers that enable you to accept payment methods at a rate set by the third-party. An additional fee will apply to new orders once you select a plan</p>
<button class="btn btn-label-primary" data-bs-toggle="modal" data-bs-target="#paymentProvider">Choose a provider</button>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<div class="card-title m-0">
<h5 class="m-0">Supported payment methods</h5>
<p class="my-0 card-subtitle">Payment methods that are available with one of Vuexy's approved payment providers.</p>
</div>
</div>
<div class="card-body">
<h6 class="mb-5">Default</h6>
<div class="row mb-5 g-6 bg-label-secondary px-6 rounded-2 mx-0 mt-0 bg-lighter">
<div class="col-12 d-flex justify-content-between align-items-center border-bottom p-0 pb-6">
<img src="{% static 'img/icons/payments/paypal.png' %}" alt="Paypal" class="gray-shadow-sm rounded" width="57" />
<span class="fw-medium"><a href="javascript:void(0);">Activate Paypal</a></span>
</div>
<div class="col-12 p-0">
<div class="row">
<div class="col-4">
<p class="mb-2 small">Provider</p>
<p class="text-heading fw-medium">Paypal</p>
</div>
<div class="col-4">
<p class="mb-2 small">Status</p>
<p class="badge bg-label-warning fw-medium">Inactive</p>
</div>
<div class="col-4">
<p class="mb-2 small">Transaction Fee</p>
<p class="text-heading fw-medium">2.99%</p>
</div>
</div>
</div>
</div>
<button class="btn btn-label-primary" data-bs-toggle="modal" data-bs-target="#paymentMethods">Add payment methods</button>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="card-title m-0">Manual payment methods</h5>
</div>
<div class="card-body">
<p class="mb-5">Payments that are made outside your online store. When a customer selects a manual payment method such as cash on delivery. You'll need to approve their order before it can be fulfilled.</p>
<div class="btn-group">
<button type="button" class="btn btn-label-primary">Add manual payment method</button>
<button type="button" class="btn btn-label-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Create custom payment method</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Bank deposit</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Money order</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Cash on delivery (COD)</a></li>
</ul>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="reset" class="btn btn-label-secondary">Discard</button>
<a class="btn btn-primary" href="{% url 'app-ecommerce-settings-checkout' %}">Save Changes</a>
</div>
</div>
</div>
</div>
<!-- /Options-->
</div>
{% include "partials/_modals/modal_select_payment_providers.html" %}
{% include "partials/_modals/modal_select_payment_methods.html" %}
{% endblock %}

View File

@@ -0,0 +1,244 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Settings Shipping & Delivery - eCommerce{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/fonts/flag-icons.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/app-ecommerce-settings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Navigation -->
<div class="col-12 col-lg-4">
<div class="d-flex justify-content-between flex-column mb-4 mb-md-0">
<h5 class="mb-4">Getting Started</h5>
<ul class="nav nav-align-left nav-pills flex-column">
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-detail' %}">
<i class="icon-base ti tabler-building-store icon-sm me-1_5"></i>
<span class="align-middle">Store details</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-payments' %}">
<i class="icon-base ti tabler-credit-card icon-sm me-1_5"></i>
<span class="align-middle">Payments</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-checkout' %}">
<i class="icon-base ti tabler-shopping-cart icon-sm me-1_5"></i>
<span class="align-middle">Checkout</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link active" href="javascript:void(0);">
<i class="icon-base ti tabler-rosette-discount icon-sm me-1_5"></i>
<span class="align-middle">Shipping & delivery</span>
</a>
</li>
<li class="nav-item mb-1">
<a class="nav-link" href="{% url 'app-ecommerce-settings-locations' %}">
<i class="icon-base ti tabler-map-pin icon-sm me-1_5"></i>
<span class="align-middle">Locations</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'app-ecommerce-settings-notifications' %}">
<i class="icon-base ti tabler-bell-ringing icon-sm me-1_5"></i>
<span class="align-middle">Notifications</span>
</a>
</li>
</ul>
</div>
</div>
<!-- /Navigation -->
<!-- Options -->
<div class="col-12 col-lg-8 pt-6 pt-lg-0">
<div class="tab-content p-0">
<!-- Shipping & delivery Tab -->
<div class="tab-pane fade show active" id="shipping_delivery" role="tabpanel">
<div class="card mb-6">
<div class="card-header d-flex justify-content-between align-items-center flex-wrap row-gap-2">
<div class="card-title m-0">
<h5 class="m-0">Shipping zones</h5>
<p class="my-0 card-subtitle">Choose where you ship and how much you charge for shipping at check out.</p>
</div>
<a href="javascript:void(0);" class="fw-medium">Create zone</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center">
<div class="avatar avatar-sm me-2">
<img class="rounded-circle mb-4" src="{% static 'img/avatars/1.png' %}" height="34" width="34" alt="User avatar" />
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">Domestic</h6>
<p class="mb-0 small">United states of America</p>
</div>
</div>
<div>
<a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill me-1"><i class="icon-base ti tabler-pencil icon-20px"></i></a>
<a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-20px"></i></a>
</div>
</div>
<div class="card mb-4 shadow-none border border-top-0">
<div class="table-responsive text-nowrap rounded">
<table class="table">
<thead>
<tr>
<th>Rate Name</th>
<th>Condition</th>
<th>Price</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weight</td>
<td>5kg -10kg</td>
<td>$9</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>VAT</td>
<td>12%</td>
<td>$25</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr class="border-transparent">
<td>Duty</td>
<td>-</td>
<td>-</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button class="btn btn-label-primary mb-6">Add Rate</button>
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center">
<div class="me-2">
<i class="icon-base fi fi-us fis rounded-circle icon-28px"></i>
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">International</h6>
<p class="mb-0 small">United states of America</p>
</div>
</div>
<div>
<a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill me-1"><i class="icon-base ti tabler-pencil icon-20px"></i></a>
<a href="javascript:void(0);" class="btn btn-sm btn-icon btn-text-secondary text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-20px"></i></a>
</div>
</div>
<div class="card mb-4 shadow-none border border-top-0">
<div class="table-responsive text-nowrap rounded">
<table class="table">
<thead>
<tr>
<th>Rate Name</th>
<th>Condition</th>
<th>Price</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weight</td>
<td>5kg -10kg</td>
<td>$19</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-1"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-1"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td>VAT</td>
<td>12%</td>
<td>$25</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
<tr class="border-transparent">
<td>Duty</td>
<td>Japan</td>
<td>$49</td>
<td class="text-end">
<div class="dropdown pe-4">
<button type="button" class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="icon-base ti tabler-dots-vertical icon-22px"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-edit me-2"></i> Edit</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-trash me-2"></i> Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<button class="btn btn-label-primary">Add Rate</button>
</div>
</div>
<div class="d-flex justify-content-end gap-4">
<button type="reset" class="btn btn-label-secondary">Discard</button>
<a class="btn btn-primary" href="{% url 'app-ecommerce-settings-locations' %}">Save Changes</a>
</div>
</div>
</div>
<!-- /Options-->
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,102 @@
from django.urls import path
from .views import eCommerceView
from django.contrib.auth.decorators import login_required
urlpatterns = [
path(
"app/ecommerce/dashboard/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_dashboard.html")),
name="app-ecommerce-dashboard",
),
path(
"app/ecommerce/product/list/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_product_list.html")),
name="app-ecommerce-product-list",
),
path(
"app/ecommerce/product/add/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_product_add.html")),
name="app-ecommerce-product-add",
),
path(
"app/ecommerce/product/category/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_category_list.html")),
name="app-ecommerce-product-category-list",
),
path(
"app/ecommerce/order/list/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_order_list.html")),
name="app-ecommerce-order-list",
),
path(
"app/ecommerce/order/details/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_order_details.html")),
name="app-ecommerce-order-details",
),
path(
"app/ecommerce/customer_all/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_customer_all.html")),
name="app-ecommerce-customer-all",
),
path(
"app/ecommerce/customer/details/overview/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_customer_details_overview.html" )),
name="app-ecommerce-customer-details-overview",
),
path(
"app/ecommerce/customer/details/security/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_customer_details_security.html")),
name="app-ecommerce-customer-details-security",
),
path(
"app/ecommerce/customer/details/billing/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_customer_details_billing.html")),
name="app-ecommerce-customer-details-billing",
),
path(
"app/ecommerce/customer/details/notifications/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_customer_details_notifications.html" )),
name="app-ecommerce-customer-details-notifications",
),
path(
"app/ecommerce/manage_reviews/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_manage_reviews.html")),
name="app-ecommerce-manage-reviews",
),
path(
"app/ecommerce/referrals/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_referral.html")),
name="app-ecommerce-referrals",
),
path(
"app/ecommerce/settings/details/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_detail.html")),
name="app-ecommerce-settings-detail",
),
path(
"app/ecommerce/settings/payments/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_payments.html")),
name="app-ecommerce-settings-payments",
),
path(
"app/ecommerce/settings/checkout/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_checkout.html")),
name="app-ecommerce-settings-checkout",
),
path(
"app/ecommerce/settings/shipping/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_shipping.html")),
name="app-ecommerce-settings-shipping",
),
path(
"app/ecommerce/settings/locations/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_locations.html")),
name="app-ecommerce-settings-locations",
),
path(
"app/ecommerce/settings/notifications/",
login_required(eCommerceView.as_view(template_name="app_ecommerce_settings_notifications.html")),
name="app-ecommerce-settings-notifications",
),
]

View File

@@ -0,0 +1,18 @@
from django.views.generic import TemplateView
from web_project import TemplateLayout
"""
This file is a view controller for multiple pages as a module.
Here you can override the page view layout.
Refer to ecommerce/urls.py file for more pages.
"""
class eCommerceView(TemplateView):
# Predefined function
def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
context = TemplateLayout.init(self, super().get_context_data(**kwargs))
return context