@ -6,14 +6,10 @@
< title id = "pageTitle" > Admin Home< / title >
< title id = "pageTitle" > Admin Home< / title >
< / div >
< / div >
< script src = "https://code.jquery.com/jquery-2.1.4.min.js" th:if = "false" > < / script >
< script src = "https://code.jquery.com/jquery-2.1.4.min.js" th:if = "false" > < / script >
< script src = "http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" data-template-prefix = "../" defer = "defer" th:if = "false" > < / script >
< script th:src = "@{js/admin.js}" src = "../../static/js/admin.js" defer = "defer" > < / script >
< script th:src = "@{js/sb-admin-2.js}" src = "../../static/js/sb-admin-2.js" defer = "defer" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" > < / script >
< link th:href = "@{/css/sb-admin-2.css}" href = "../../static/css/sb-admin-2.css" rel = "stylesheet" >
< link th:href = "@{/css/admin-custom.css}" href = "../../static/css/admin-custom.css" rel = "stylesheet" >
< script src = "http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js"
data-template-prefix="../" defer="defer" th:if="false">< / script >
< th:block th:include = "fragments/admin :: headFragment" > < / th:block >
< / head >
< / head >
<!-- TODO
<!-- TODO
Make user admin / remove user from admin
Make user admin / remove user from admin
@ -21,7 +17,7 @@
Delete Messages
Delete Messages
-->
-->
<!-- <div th:include="fragments/admin :: admin - sidebar"></div> -->
<!-- <div th:include="fragments/admin :: admin - sideb ar"></div> -->
< body id = "page-top" >
< body id = "page-top" >
@ -45,7 +41,8 @@
<!-- Page Heading -->
<!-- Page Heading -->
< div class = "d-sm-flex align-items-center justify-content-between mb-4" >
< div class = "d-sm-flex align-items-center justify-content-between mb-4" >
< h1 class = "h3 mb-0 text-light" > Dashboard< / h1 >
< h1 class = "h3 mb-0 text-light" > Dashboard< / h1 >
< a href = "#" class = "d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" > < i class = "fas fa-download fa-sm text-white-50" > < / i > Generate Report< / a >
< a href = "#" class = "d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" > < i
class="fas fa-download fa-sm text-white-50">< / i > Generate Report< / a >
< / div >
< / div >
<!-- Content Row -->
<!-- Content Row -->
@ -53,15 +50,18 @@
<!-- Earnings (Monthly) Card Example -->
<!-- Earnings (Monthly) Card Example -->
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "card text-light border border-dark bg-dark border-left-primary-dark shadow h-100 py-2" >
< div
class="card text-light border border-dark bg-dark border-left-primary-dark shadow h-100 py-2">
< div class = "card-body" >
< div class = "card-body" >
< div class = "row no-gutters align-items-center" >
< div class = "row no-gutters align-items-center" >
< div class = "col mr-2" >
< div class = "col mr-2" >
< div class = "text-xs font-weight-bold text-primary-dark text-uppercase mb-1" > Earnings (Monthly)< / div >
< div class = "h5 mb-0 font-weight-bold " > $40,000< / div >
< div
class="text-xs font-weight-bold text-primary-dark text-uppercase mb-1">
Total Users< / div >
< div class = "h5 mb-0 font-weight-bold " id = "totalUsers" > 0< / div >
< / div >
< / div >
< div class = "col-auto" >
< div class = "col-auto" >
< i class = "fas fa-calendar fa-2x text-gray-300" > < / i >
< i class = "fas fa-users fa-2x text-gray-300" > < / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -70,15 +70,17 @@
<!-- Earnings (Monthly) Card Example -->
<!-- Earnings (Monthly) Card Example -->
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "card text-light border border-dark bg-dark border-left-success shadow h-100 py-2" >
< div
class="card text-light border border-dark bg-dark border-left-success shadow h-100 py-2">
< div class = "card-body" >
< div class = "card-body" >
< div class = "row no-gutters align-items-center" >
< div class = "row no-gutters align-items-center" >
< div class = "col mr-2" >
< div class = "col mr-2" >
< div class = "text-xs font-weight-bold text-success text-uppercase mb-1" > Earnings (Annual)< / div >
< div class = "h5 mb-0 font-weight-bold text-light" > $215,000< / div >
< div class = "text-xs font-weight-bold text-success text-uppercase mb-1" >
Total Messages< / div >
< div class = "h5 mb-0 font-weight-bold text-light" id = "totalMessages" > 0< / div >
< / div >
< / div >
< div class = "col-auto" >
< div class = "col-auto" >
< i class = "fas fa-dollar-sign fa-2x text-gray-300" > < / i >
< i class = "fas fa-comments fa-2x text-gray-300" > < / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -91,20 +93,23 @@
< div class = "card-body" >
< div class = "card-body" >
< div class = "row no-gutters align-items-center" >
< div class = "row no-gutters align-items-center" >
< div class = "col mr-2" >
< div class = "col mr-2" >
< div class = "text-xs font-weight-bold text-info text-uppercase mb-1" > Tasks< / div >
< div class = "text-xs font-weight-bold text-info text-uppercase mb-1" > Users Online
< / div >
< div class = "row no-gutters align-items-center" >
< div class = "row no-gutters align-items-center" >
< div class = "col-auto" >
< div class = "col-auto" >
< div class = "h5 mb-0 mr-3 font-weight-bold text-white" > 5 0% < / div >
< div class = "h5 mb-0 mr-3 font-weight-bold text-white" id = "totalOnlineUsers" > 0< / div >
< / div >
< / div >
< div class = "col" >
<!-- <div class="col" >
< div class = "progress progress-sm mr-2" >
< div class = "progress progress-sm mr-2" >
< div class = "progress-bar bg-info" role = "progressbar" style = "width: 50%" aria-valuenow = "50" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar bg-info" role = "progressbar"
style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100">< / div >
< / div >
< / div >
< / div >
< / div > -->
< / div >
< / div >
< / div >
< / div >
< div class = "col-auto" >
< div class = "col-auto" >
< i class = "fas fa-clipboard-list fa-2x text-gray-300" > < / i >
< i class = "fas fa-user fa-2x text-gray-300" > < / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -113,15 +118,17 @@
<!-- Pending Requests Card Example -->
<!-- Pending Requests Card Example -->
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "col-xl-3 col-md-6 mb-4" >
< div class = "card text-light border border-dark bg-dark border-left-warning shadow h-100 py-2" >
< div
class="card text-light border border-dark bg-dark border-left-warning shadow h-100 py-2">
< div class = "card-body" >
< div class = "card-body" >
< div class = "row no-gutters align-items-center" >
< div class = "row no-gutters align-items-center" >
< div class = "col mr-2" >
< div class = "col mr-2" >
< div class = "text-xs font-weight-bold text-warning text-uppercase mb-1" > Pending Requests< / div >
< div class = "h5 mb-0 font-weight-bold text-white" > 18< / div >
< div class = "text-xs font-weight-bold text-warning text-uppercase mb-1" >
Messages Today< / div >
< div class = "h5 mb-0 font-weight-bold text-white" > 0< / div >
< / div >
< / div >
< div class = "col-auto" >
< div class = "col-auto" >
< i class = "fas fa-comments fa-2x text-gray-300" > < / i >
< i class = "fas fa-comment fa-2x text-gray-300" > < / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -137,13 +144,16 @@
< div class = "col-xl-8 col-lg-7" >
< div class = "col-xl-8 col-lg-7" >
< div class = "card bg-dark border border-dark text-white shadow mb-4" >
< div class = "card bg-dark border border-dark text-white shadow mb-4" >
<!-- Card Header - Dropdown -->
<!-- Card Header - Dropdown -->
< div class = "card-header bg-secondary border border-secondary py-3 d-flex flex-row align-items-center justify-content-between" >
< div
class="card-header bg-secondary border border-secondary py-3 d-flex flex-row align-items-center justify-content-between">
< h6 class = "m-0 font-weight-bold text-white" > Earnings Overview< / h6 >
< h6 class = "m-0 font-weight-bold text-white" > Earnings Overview< / h6 >
< div class = "dropdown no-arrow" >
< div class = "dropdown no-arrow" >
< a class = "dropdown-toggle" href = "#" role = "button" id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< a class = "dropdown-toggle" href = "#" role = "button" id = "dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
< i class = "fas fa-ellipsis-v fa-sm fa-fw text-white" > < / i >
< i class = "fas fa-ellipsis-v fa-sm fa-fw text-white" > < / i >
< / a >
< / a >
< div class = "dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby = "dropdownMenuLink" >
< div class = "dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
< div class = "dropdown-header" > Dropdown Header:< / div >
< div class = "dropdown-header" > Dropdown Header:< / div >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
@ -165,13 +175,16 @@
< div class = "col-xl-4 col-lg-5" >
< div class = "col-xl-4 col-lg-5" >
< div class = "card bg-dark border border-dark text-white shadow mb-4" >
< div class = "card bg-dark border border-dark text-white shadow mb-4" >
<!-- Card Header - Dropdown -->
<!-- Card Header - Dropdown -->
< div class = "card-header bg-secondary border border-secondary py-3 d-flex flex-row align-items-center justify-content-between" >
< div
class="card-header bg-secondary border border-secondary py-3 d-flex flex-row align-items-center justify-content-between">
< h6 class = "m-0 font-weight-bold text-white" > Revenue Sources< / h6 >
< h6 class = "m-0 font-weight-bold text-white" > Revenue Sources< / h6 >
< div class = "dropdown no-arrow" >
< div class = "dropdown no-arrow" >
< a class = "dropdown-toggle" href = "#" role = "button" id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" >
< a class = "dropdown-toggle" href = "#" role = "button" id = "dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
< i class = "fas fa-ellipsis-v fa-sm fa-fw text-white" > < / i >
< i class = "fas fa-ellipsis-v fa-sm fa-fw text-white" > < / i >
< / a >
< / a >
< div class = "dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby = "dropdownMenuLink" >
< div class = "dropdown-menu dropdown-menu-right shadow animated--fade-in"
aria-labelledby="dropdownMenuLink">
< div class = "dropdown-header" > Dropdown Header:< / div >
< div class = "dropdown-header" > Dropdown Header:< / div >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
@ -187,14 +200,14 @@
< / div >
< / div >
< div class = "mt-4 text-center small" >
< div class = "mt-4 text-center small" >
< span class = "mr-2" >
< span class = "mr-2" >
< i class = "fas fa-circle text-primary" > < / i > Direct
< / span >
< i class = "fas fa-circle text-primary" > < / i > Direct
< / span >
< span class = "mr-2" >
< span class = "mr-2" >
< i class = "fas fa-circle text-success" > < / i > Social
< / span >
< i class = "fas fa-circle text-success" > < / i > Social
< / span >
< span class = "mr-2" >
< span class = "mr-2" >
< i class = "fas fa-circle text-info" > < / i > Referral
< / span >
< i class = "fas fa-circle text-info" > < / i > Referral
< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -213,25 +226,35 @@
< h6 class = "m-0 font-weight-bold text-white" > Projects< / h6 >
< h6 class = "m-0 font-weight-bold text-white" > Projects< / h6 >
< / div >
< / div >
< div class = "card-body" >
< div class = "card-body" >
< h4 class = "small font-weight-bold" > Server Migration < span class = "float-right" > 20%< / span > < / h4 >
< h4 class = "small font-weight-bold" > Server Migration < span
class="float-right">20%< / span > < / h4 >
< div class = "progress mb-4" >
< div class = "progress mb-4" >
< div class = "progress-bar bg-danger" role = "progressbar" style = "width: 20%" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar bg-danger" role = "progressbar" style = "width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">< / div >
< / div >
< / div >
< h4 class = "small font-weight-bold" > Sales Tracking < span class = "float-right" > 40%< / span > < / h4 >
< h4 class = "small font-weight-bold" > Sales Tracking < span
class="float-right">40%< / span > < / h4 >
< div class = "progress mb-4" >
< div class = "progress mb-4" >
< div class = "progress-bar bg-warning" role = "progressbar" style = "width: 40%" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar bg-warning" role = "progressbar" style = "width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">< / div >
< / div >
< / div >
< h4 class = "small font-weight-bold" > Customer Database < span class = "float-right" > 60%< / span > < / h4 >
< h4 class = "small font-weight-bold" > Customer Database < span
class="float-right">60%< / span > < / h4 >
< div class = "progress mb-4" >
< div class = "progress mb-4" >
< div class = "progress-bar" role = "progressbar" style = "width: 60%" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar" role = "progressbar" style = "width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">< / div >
< / div >
< / div >
< h4 class = "small font-weight-bold" > Payout Details < span class = "float-right" > 80%< / span > < / h4 >
< h4 class = "small font-weight-bold" > Payout Details < span
class="float-right">80%< / span > < / h4 >
< div class = "progress mb-4" >
< div class = "progress mb-4" >
< div class = "progress-bar bg-info" role = "progressbar" style = "width: 80%" aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar bg-info" role = "progressbar" style = "width: 80%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">< / div >
< / div >
< / div >
< h4 class = "small font-weight-bold" > Account Setup < span class = "float-right" > Complete!< / span > < / h4 >
< h4 class = "small font-weight-bold" > Account Setup < span
class="float-right">Complete!< / span > < / h4 >
< div class = "progress" >
< div class = "progress" >
< div class = "progress-bar bg-success" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< div class = "progress-bar bg-success" role = "progressbar" style = "width: 100%"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -299,11 +322,17 @@
< / div >
< / div >
< div class = "card-body" >
< div class = "card-body" >
< div class = "text-center" >
< div class = "text-center" >
< img class = "img-fluid px-3 px-sm-4 mt-3 mb-4" style = "width: 25rem;" th:src = "@{/img/undraw_posting_photo.svg}" src = "../../static/img/undraw_posting_photo.svg" alt = "" >
< img class = "img-fluid px-3 px-sm-4 mt-3 mb-4" style = "width: 25rem;"
th:src="@{/img/undraw_posting_photo.svg}"
src="../../static/img/undraw_posting_photo.svg" alt="">
< / div >
< / div >
< p > Add some quality, svg illustrations to your project courtesy of < a target = "_blank" rel = "nofollow" href = "https://undraw.co/" > unDraw< / a > , a constantly updated collection of beautiful svg images that you can use completely
< p > Add some quality, svg illustrations to your project courtesy of < a
target="_blank" rel="nofollow" href="https://undraw.co/">unDraw< / a > , a
constantly updated collection of beautiful svg images that you can use
completely
free and without attribution!< / p >
free and without attribution!< / p >
< a target = "_blank" rel = "nofollow" href = "https://undraw.co/" > Browse Illustrations on unDraw → < / a >
< a target = "_blank" rel = "nofollow" href = "https://undraw.co/" > Browse Illustrations on
unDraw → < / a >
< / div >
< / div >
< / div >
< / div >
@ -313,8 +342,11 @@
< h6 class = "m-0 font-weight-bold text-white" > Development Approach< / h6 >
< h6 class = "m-0 font-weight-bold text-white" > Development Approach< / h6 >
< / div >
< / div >
< div class = "card-body" >
< div class = "card-body" >
< p > SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.< / p >
< p class = "mb-0" > Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes.< / p >
< p > SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce
CSS bloat and poor page performance. Custom CSS classes are used to create
custom components and custom utility classes.< / p >
< p class = "mb-0" > Before working with this theme, you should become familiar with the
Bootstrap framework, especially the utility classes.< / p >
< / div >
< / div >
< / div >
< / div >
@ -336,7 +368,9 @@
<!-- End of Page Wrapper -->
<!-- End of Page Wrapper -->
< th:block th:include = "fragments/admin :: modal" > < / th:block >
< th:block th:include = "fragments/admin :: modal" > < / th:block >
< div th:if = "false" > < th:block th:include = "admin :: modal" > < / th:block > < / div >
< div th:if = "false" >
< th:block th:include = "admin :: modal" > < / th:block >
< / div >
<!-- Page level custom scripts -->
<!-- Page level custom scripts -->
< script th:src = "@{/js/demo/chart-area-demo.js}" src = "../../static/js/demo/chart-area-demo.js" > < / script >
< script th:src = "@{/js/demo/chart-area-demo.js}" src = "../../static/js/demo/chart-area-demo.js" > < / script >