admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/.bundlewatch.config.json +2 -2
  2. package/.cache/.eslintcache +1 -0
  3. package/.cache/.stylelintcache +1 -0
  4. package/.eslintignore +1 -0
  5. package/.eslintrc.json +16 -0
  6. package/.stylelintrc.json +47 -0
  7. package/LICENSE +1 -1
  8. package/README.md +5 -6
  9. package/dist/css/adminlte.css +2383 -2754
  10. package/dist/css/adminlte.css.map +1 -1
  11. package/dist/css/adminlte.min.css +2 -2
  12. package/dist/css/adminlte.min.css.map +1 -1
  13. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
  14. package/dist/css/adminlte.rtl.css.map +1 -0
  15. package/dist/css/adminlte.rtl.min.css +7 -0
  16. package/dist/css/adminlte.rtl.min.css.map +1 -0
  17. package/dist/js/adminlte.js +173 -182
  18. package/dist/js/adminlte.js.map +1 -1
  19. package/dist/js/adminlte.min.js +6 -1
  20. package/dist/js/adminlte.min.js.map +1 -1
  21. package/dist/pages/UI/timeline.html +698 -0
  22. package/dist/pages/docs/browser-support.html +614 -0
  23. package/dist/pages/docs/color-mode.html +855 -0
  24. package/dist/pages/docs/components/main-header.html +926 -0
  25. package/dist/pages/docs/layout.html +617 -0
  26. package/dist/pages/docs.html +617 -0
  27. package/dist/pages/examples/login.html +114 -187
  28. package/dist/pages/examples/register.html +117 -190
  29. package/dist/pages/forms/general.html +598 -647
  30. package/dist/pages/index.html +1091 -0
  31. package/dist/pages/index2.html +1452 -0
  32. package/dist/pages/index3.html +950 -0
  33. package/dist/pages/layout/fixed-sidebar.html +590 -638
  34. package/dist/pages/layout/layout-rtl.html +623 -0
  35. package/dist/pages/layout/sidebar-mini.html +623 -0
  36. package/dist/pages/layout/unfixed-sidebar.html +589 -638
  37. package/dist/pages/tables/simple.html +837 -938
  38. package/dist/pages/widgets/cards.html +814 -698
  39. package/dist/pages/widgets/info-box.html +864 -951
  40. package/dist/pages/widgets/small-box.html +625 -678
  41. package/index.html +1 -6
  42. package/package.json +53 -36
  43. package/src/config/assets.config.mjs +8 -0
  44. package/src/config/astro.config.mjs +17 -0
  45. package/src/config/postcss.config.mjs +15 -0
  46. package/src/config/rollup.config.js +20 -0
  47. package/src/html/.eslintrc.json +24 -0
  48. package/src/html/.tsconfig.json +4 -0
  49. package/src/html/components/_head.astro +31 -0
  50. package/src/html/components/_scripts.astro +40 -0
  51. package/src/html/components/dashboard/_footer.astro +12 -0
  52. package/src/html/components/dashboard/_sidenav.astro +323 -0
  53. package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
  54. package/src/html/components/docs/browser-support/index.md +22 -0
  55. package/src/html/components/docs/color-mode/navbar-html.md +80 -0
  56. package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
  57. package/src/html/components/docs/components/main-header-1.md +159 -0
  58. package/src/html/components/docs/introduction/index.md +35 -0
  59. package/src/html/env.d.ts +1 -0
  60. package/src/html/pages/UI/timeline.astro +158 -0
  61. package/src/html/pages/docs/browser-support.astro +58 -0
  62. package/src/html/pages/docs/color-mode.astro +224 -0
  63. package/src/html/pages/docs/components/main-header.astro +232 -0
  64. package/src/html/pages/docs/index.astro +58 -0
  65. package/src/html/pages/docs/layout.astro +77 -0
  66. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
  67. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
  68. package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
  69. package/src/{index.html → html/pages/index.astro} +266 -189
  70. package/src/{index2.html → html/pages/index2.astro} +229 -284
  71. package/src/{index3.html → html/pages/index3.astro} +151 -169
  72. package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
  73. package/src/html/pages/layout/layout-rtl.astro +84 -0
  74. package/src/html/pages/layout/sidebar-mini.astro +83 -0
  75. package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
  76. package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
  77. package/src/html/pages/widgets/cards.astro +308 -0
  78. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
  79. package/src/html/pages/widgets/small-box.astro +121 -0
  80. package/src/scss/_app-footer.scss +15 -0
  81. package/src/scss/_app-header.scss +26 -0
  82. package/src/scss/_app-main.scss +20 -0
  83. package/src/scss/_app-sidebar.scss +429 -0
  84. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  85. package/src/scss/_bootstrap-variables.scss +41 -26
  86. package/src/scss/_callouts.scss +34 -0
  87. package/src/scss/_cards.scss +30 -224
  88. package/src/scss/_direct-chat.scss +15 -9
  89. package/src/scss/_docs.scss +4 -0
  90. package/src/scss/_dropdown.scss +7 -5
  91. package/src/scss/_info-box.scss +2 -6
  92. package/src/scss/_miscellaneous.scss +0 -455
  93. package/src/scss/_mixins.scss +0 -6
  94. package/src/scss/_root.scss +2 -58
  95. package/src/scss/_small-box.scss +15 -38
  96. package/src/scss/_table.scss +0 -50
  97. package/src/scss/_timeline.scss +120 -0
  98. package/src/scss/_variables-dark.scss +15 -8
  99. package/src/scss/_variables.scss +30 -135
  100. package/src/scss/adminlte.scss +1 -1
  101. package/src/scss/mixins/_animations.scss +4 -0
  102. package/src/scss/mixins/_scrollbar.scss +2 -2
  103. package/src/scss/pages/_login_and_register.scss +1 -2
  104. package/src/scss/parts/_core.scss +7 -15
  105. package/src/scss/parts/_extra-components.scss +1 -2
  106. package/src/ts/adminlte.ts +0 -2
  107. package/src/ts/card-widget.ts +42 -18
  108. package/src/ts/direct-chat.ts +33 -8
  109. package/src/ts/layout.ts +6 -4
  110. package/src/ts/push-menu.ts +94 -145
  111. package/src/ts/treeview.ts +17 -23
  112. package/src/ts/util/index.ts +2 -2
  113. package/src/utils/index.js +11 -0
  114. package/tsconfig.json +11 -3
  115. package/.stylelintrc +0 -40
  116. package/CHECKLIST.md +0 -0
  117. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  118. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  119. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  120. package/dist/index.html +0 -1065
  121. package/dist/index2.html +0 -1629
  122. package/dist/index3.html +0 -1015
  123. package/gulpfile.js +0 -315
  124. package/src/pages/widgets/cards.html +0 -143
  125. package/src/pages/widgets/small-box.html +0 -124
  126. package/src/partials/_head.html +0 -31
  127. package/src/partials/dashboard/_footer.html +0 -9
  128. package/src/partials/dashboard/_sidenav.html +0 -244
  129. package/src/scss/_brand-container.scss +0 -72
  130. package/src/scss/_content-header.scss +0 -9
  131. package/src/scss/_content-wrapper.scss +0 -6
  132. package/src/scss/_content.scss +0 -3
  133. package/src/scss/_layout-fixed.scss +0 -43
  134. package/src/scss/_layout-mobile.scss +0 -22
  135. package/src/scss/_main-footer.scss +0 -28
  136. package/src/scss/_main-header.scss +0 -40
  137. package/src/scss/_main-sidebar.scss +0 -63
  138. package/src/scss/_nav-sidebar.scss +0 -66
  139. package/src/scss/_products.scss +0 -55
  140. package/src/scss/_sidebar-close.scss +0 -6
  141. package/src/scss/_sidebar-collapse.scss +0 -120
  142. package/src/scss/_sidebar-horizontal.scss +0 -67
  143. package/src/scss/_sidebar.scss +0 -11
  144. package/src/scss/_users-list.scss +0 -45
  145. package/src/scss/mixins/_brand-variant.scss +0 -9
  146. package/src/scss/mixins/_cards.scss +0 -53
  147. package/src/scss/mixins/_direct-chat.scss +0 -17
  148. package/src/scss/mixins/_header-variant.scss +0 -22
  149. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  150. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  151. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/src/{index.html → html/pages/index.astro} RENAMED
@@ -1,32 +1,39 @@
1
+ ---
2
+ import Head from '@components/_head.astro';
3
+ import Footer from '@components/dashboard/_footer.astro';
4
+ import Topbar from '@components/dashboard/_topbar.astro';
5
+ import Sidenav from '@components/dashboard/_sidenav.astro';
6
+ import Scripts from '@components/_scripts.astro';
7
+
8
+ const title = 'AdminLTE v4 | Dashboard'
9
+ const path = '../../dist'
10
+ const mainPage = 'dashboard'
11
+ const page = 'index'
12
+ ---
13
+
1
14
  <!DOCTYPE html>
2
15
  <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
16
  <head>
6
- @@include('./_head.html', {
7
- "path": ".",
8
- "title": "AdminLTE 4 | Dashboard"
9
- })
10
- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
17
+ <Head title={title} path={path} />
18
+
19
+ <!-- apexcharts -->
20
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
21
+
22
+ <!-- jsvectormap -->
23
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css" integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4=" crossorigin="anonymous">
11
24
  </head>
12
- <body class="layout-fixed">
13
- <div class="wrapper">
14
- @@include('./dashboard/_topbar.html', {
15
- "path": "."
16
- })
17
25
 
18
- @@include('./dashboard/_sidenav.html', {
19
- "mainPage": "dashboard",
20
- "page": "index",
21
- "path": "."
22
- })
26
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
27
+ <div class="app-wrapper">
28
+ <Topbar path={path} />
29
+ <Sidenav path={path} mainPage={mainPage} page={page} />
23
30
  <!-- Main content -->
24
- <main class="content-wrapper">
25
- <div class="content-header">
31
+ <main class="app-main">
32
+ <div class="app-content-header">
26
33
  <div class="container-fluid">
27
- <div class="row mb-2">
34
+ <div class="row">
28
35
  <div class="col-sm-6">
29
- <h3>Dashboard</h3>
36
+ <h3 class="mb-0">Dashboard</h3>
30
37
  </div>
31
38
  <div class="col-sm-6">
32
39
  <ol class="breadcrumb float-sm-end">
@@ -37,11 +44,11 @@
37
44
  </div>
38
45
  </div>
39
46
  </div>
40
- <div class="content">
47
+ <div class="app-content">
41
48
  <div class="container-fluid">
42
49
  <!-- Small boxes (Stat box) -->
43
50
  <div class="row">
44
- <div class="col-lg-3 col-6">
51
+ <div class="col-lg-3 col-6" >
45
52
  <!-- small box -->
46
53
  <div class="small-box text-bg-primary">
47
54
  <div class="inner">
@@ -49,9 +56,9 @@
49
56
 
50
57
  <p>New Orders</p>
51
58
  </div>
52
- <div class="icon">
53
- <i class="inner-icon ion ion-bag"></i>
54
- </div>
59
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
60
+ <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
61
+ </svg>
55
62
  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
56
63
  </div>
57
64
  </div>
@@ -64,9 +71,9 @@
64
71
 
65
72
  <p>Bounce Rate</p>
66
73
  </div>
67
- <div class="icon">
68
- <i class="inner-icon ion ion-stats-bars"></i>
69
- </div>
74
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
75
+ <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
76
+ </svg>
70
77
  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
71
78
  </div>
72
79
  </div>
@@ -79,9 +86,9 @@
79
86
 
80
87
  <p>User Registrations</p>
81
88
  </div>
82
- <div class="icon">
83
- <i class="inner-icon ion ion-person-add"></i>
84
- </div>
89
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
90
+ <path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
91
+ </svg>
85
92
  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
86
93
  </div>
87
94
  </div>
@@ -94,9 +101,10 @@
94
101
 
95
102
  <p>Unique Visitors</p>
96
103
  </div>
97
- <div class="icon">
98
- <i class="inner-icon ion ion-pie-graph"></i>
99
- </div>
104
+ <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
105
+ <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
106
+ <path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
107
+ </svg>
100
108
  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
101
109
  </div>
102
110
  </div>
@@ -106,37 +114,15 @@
106
114
  <!-- Main row -->
107
115
  <div class="row">
108
116
  <!-- Start col -->
109
- <div class="col-lg-7">
110
- <!-- Custom tabs (Charts with tabs)-->
117
+ <div class="col-lg-7 connectedSortable">
111
118
  <div class="card">
112
119
  <div class="card-header">
113
- <h3 class="card-title">
114
- <i class="fa-solid fa-chart-pie me-1"></i>
115
- Sales
116
- </h3>
117
- <div class="card-tools">
118
- <ul class="nav nav-pills ms-auto">
119
- <li class="nav-item">
120
- <a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
121
- </li>
122
- <li class="nav-item">
123
- <a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
124
- </li>
125
- </ul>
126
- </div>
127
- </div><!-- /.card-header -->
120
+ <h3 class="card-title">Sales Value</h3>
121
+ </div>
122
+
128
123
  <div class="card-body">
129
- <div class="tab-content p-0">
130
- <!-- Morris chart - Sales -->
131
- <div class="chart tab-pane active" id="revenue-chart"
132
- style="position: relative; height: 300px;">
133
- <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
134
- </div>
135
- <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
136
- <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
137
- </div>
138
- </div>
139
- </div><!-- /.card-body -->
124
+ <div id="revenue-chart"></div>
125
+ </div>
140
126
  </div>
141
127
  <!-- /.card -->
142
128
 
@@ -169,7 +155,7 @@
169
155
  <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
170
156
  </div>
171
157
  <!-- /.direct-chat-infos -->
172
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
158
+ <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
173
159
  <!-- /.direct-chat-img -->
174
160
  <div class="direct-chat-text">
175
161
  Is this template really for free? That's unbelievable!
@@ -185,7 +171,7 @@
185
171
  <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
186
172
  </div>
187
173
  <!-- /.direct-chat-infos -->
188
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
174
+ <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
189
175
  <!-- /.direct-chat-img -->
190
176
  <div class="direct-chat-text">
191
177
  You better believe it!
@@ -201,7 +187,7 @@
201
187
  <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
202
188
  </div>
203
189
  <!-- /.direct-chat-infos -->
204
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
190
+ <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
205
191
  <!-- /.direct-chat-img -->
206
192
  <div class="direct-chat-text">
207
193
  Working with AdminLTE on a great new app! Wanna join?
@@ -217,7 +203,7 @@
217
203
  <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
218
204
  </div>
219
205
  <!-- /.direct-chat-infos -->
220
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
206
+ <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
221
207
  <!-- /.direct-chat-img -->
222
208
  <div class="direct-chat-text">
223
209
  I would love to.
@@ -227,19 +213,19 @@
227
213
  <!-- /.direct-chat-msg -->
228
214
 
229
215
  </div>
230
- <!--/.direct-chat-messages-->
216
+ <!-- /.direct-chat-messages-->
231
217
 
232
218
  <!-- Contacts are loaded here -->
233
219
  <div class="direct-chat-contacts">
234
220
  <ul class="contacts-list">
235
221
  <li>
236
222
  <a href="#">
237
- <img class="contacts-list-img" src="./assets/img/user1-128x128.jpg" alt="User Avatar">
223
+ <img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
238
224
 
239
225
  <div class="contacts-list-info">
240
226
  <span class="contacts-list-name">
241
227
  Count Dracula
242
- <small class="contacts-list-date float-end">2/28/2015</small>
228
+ <small class="contacts-list-date float-end">2/28/2023</small>
243
229
  </span>
244
230
  <span class="contacts-list-msg">How have you been? I was...</span>
245
231
  </div>
@@ -249,12 +235,12 @@
249
235
  <!-- End Contact Item -->
250
236
  <li>
251
237
  <a href="#">
252
- <img class="contacts-list-img" src="./assets/img/user7-128x128.jpg" alt="User Avatar">
238
+ <img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
253
239
 
254
240
  <div class="contacts-list-info">
255
241
  <span class="contacts-list-name">
256
242
  Sarah Doe
257
- <small class="contacts-list-date float-end">2/23/2015</small>
243
+ <small class="contacts-list-date float-end">2/23/2023</small>
258
244
  </span>
259
245
  <span class="contacts-list-msg">I will be waiting for...</span>
260
246
  </div>
@@ -264,12 +250,12 @@
264
250
  <!-- End Contact Item -->
265
251
  <li>
266
252
  <a href="#">
267
- <img class="contacts-list-img" src="./assets/img/user3-128x128.jpg" alt="User Avatar">
253
+ <img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
268
254
 
269
255
  <div class="contacts-list-info">
270
256
  <span class="contacts-list-name">
271
257
  Nadia Jolie
272
- <small class="contacts-list-date float-end">2/20/2015</small>
258
+ <small class="contacts-list-date float-end">2/20/2023</small>
273
259
  </span>
274
260
  <span class="contacts-list-msg">I'll call you back at...</span>
275
261
  </div>
@@ -279,12 +265,12 @@
279
265
  <!-- End Contact Item -->
280
266
  <li>
281
267
  <a href="#">
282
- <img class="contacts-list-img" src="./assets/img/user5-128x128.jpg" alt="User Avatar">
268
+ <img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
283
269
 
284
270
  <div class="contacts-list-info">
285
271
  <span class="contacts-list-name">
286
272
  Nora S. Vans
287
- <small class="contacts-list-date float-end">2/10/2015</small>
273
+ <small class="contacts-list-date float-end">2/10/2023</small>
288
274
  </span>
289
275
  <span class="contacts-list-msg">Where is your new...</span>
290
276
  </div>
@@ -294,12 +280,12 @@
294
280
  <!-- End Contact Item -->
295
281
  <li>
296
282
  <a href="#">
297
- <img class="contacts-list-img" src="./assets/img/user6-128x128.jpg" alt="User Avatar">
283
+ <img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
298
284
 
299
285
  <div class="contacts-list-info">
300
286
  <span class="contacts-list-name">
301
287
  John K.
302
- <small class="contacts-list-date float-end">1/27/2015</small>
288
+ <small class="contacts-list-date float-end">1/27/2023</small>
303
289
  </span>
304
290
  <span class="contacts-list-msg">Can I take a look at...</span>
305
291
  </div>
@@ -309,12 +295,12 @@
309
295
  <!-- End Contact Item -->
310
296
  <li>
311
297
  <a href="#">
312
- <img class="contacts-list-img" src="./assets/img/user8-128x128.jpg" alt="User Avatar">
298
+ <img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
313
299
 
314
300
  <div class="contacts-list-info">
315
301
  <span class="contacts-list-name">
316
302
  Kenneth M.
317
- <small class="contacts-list-date float-end">1/4/2015</small>
303
+ <small class="contacts-list-date float-end">1/4/2023</small>
318
304
  </span>
319
305
  <span class="contacts-list-msg">Never mind I found...</span>
320
306
  </div>
@@ -340,7 +326,40 @@
340
326
  </div>
341
327
  <!-- /.card-footer-->
342
328
  </div>
343
- <!--/.direct-chat -->
329
+ <!-- /.direct-chat -->
330
+ </div>
331
+ <!-- /.Start col -->
332
+
333
+ <!-- Start col -->
334
+ <div class="col-lg-5 connectedSortable">
335
+ <div class="card text-white bg-primary bg-gradient border-primary">
336
+ <div class="card-header border-0">
337
+ <h3 class="card-title">Sales Value</h3>
338
+ <div class="card-tools">
339
+ <button type="button" class="btn btn-primary btn-sm " data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
340
+ </button>
341
+ </div>
342
+ </div>
343
+ <div class="card-body">
344
+ <div id="world-map" style="height: 220px"></div>
345
+ </div>
346
+ <div class="card-footer border-0">
347
+ <div class="row">
348
+ <div class="col-4 text-center">
349
+ <div id="sparkline-1"></div>
350
+ <div class="text-white">Visitors</div>
351
+ </div>
352
+ <div class="col-4 text-center">
353
+ <div id="sparkline-2"></div>
354
+ <div class="text-white">Online</div>
355
+ </div>
356
+ <div class="col-4 text-center">
357
+ <div id="sparkline-3"></div>
358
+ <div class="text-white">Sales</div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
344
363
  </div>
345
364
  <!-- /.Start col -->
346
365
  </div>
@@ -348,129 +367,187 @@
348
367
  </div><!-- /.container-fluid -->
349
368
  </div>
350
369
  </main>
351
- <!-- /.content-wrapper -->
370
+ <!-- /.app-content -->
352
371
 
353
- @@include('./dashboard/_footer.html', {
354
- "path": "."
355
- })
372
+ <Footer />
356
373
  </div>
357
- <!-- ./wrapper -->
374
+ <!-- ./app-wrapper -->
358
375
 
359
- @@include('./_scripts.html', {
360
- "path": "."
361
- })
376
+ <Scripts path={path} />
362
377
 
363
378
  <!-- OPTIONAL SCRIPTS -->
364
379
 
380
+ <!-- sortablejs -->
381
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" crossorigin="anonymous"></script>
382
+
383
+ <!-- sortablejs -->
384
+ <script is:inline>
385
+ const connectedSortables = document.querySelectorAll('.connectedSortable')
386
+ connectedSortables.forEach(connectedSortable => {
387
+ let sortable = new Sortable(connectedSortable, {
388
+ group: 'shared',
389
+ })
390
+ })
391
+
392
+ const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
393
+ cardHeaders.forEach(cardHeader => {
394
+ cardHeader.style.cursor = 'move';
395
+ });
396
+ </script>
397
+
398
+ <!-- apexcharts -->
399
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
400
+
365
401
  <!-- ChartJS -->
366
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
367
- <script>
402
+ <script is:inline>
368
403
  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
369
404
  // IT'S ALL JUST JUNK FOR DEMO
370
405
  // ++++++++++++++++++++++++++++++++++++++++++
371
406
 
372
- /* Chart.js Charts */
373
- // Sales chart
374
- (function () {
375
- 'use strict'
376
-
377
- var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
378
-
379
- var salesChartData = {
380
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
381
- datasets: [
382
- {
383
- label: 'Digital Goods',
384
- backgroundColor: 'rgba(60,141,188,0.9)',
385
- borderColor: 'rgba(60,141,188,0.8)',
386
- fill: true,
387
- tension: 0.4,
388
- pointRadius: 0,
389
- pointColor: '#3b8bba',
390
- pointStrokeColor: 'rgba(60,141,188,1)',
391
- pointHighlightFill: '#fff',
392
- pointHighlightStroke: 'rgba(60,141,188,1)',
393
- data: [28, 48, 40, 19, 86, 27, 90]
394
- },
395
- {
396
- label: 'Electronics',
397
- backgroundColor: 'rgba(210, 214, 222, 1)',
398
- borderColor: 'rgba(210, 214, 222, 1)',
399
- fill: true,
400
- tension: 0.4,
401
- pointRadius: 0,
402
- pointColor: 'rgba(210, 214, 222, 1)',
403
- pointStrokeColor: '#c1c7d1',
404
- pointHighlightFill: '#fff',
405
- pointHighlightStroke: 'rgba(220,220,220,1)',
406
- data: [65, 59, 80, 81, 56, 55, 40]
407
- }
408
- ]
409
- }
410
-
411
- var salesChartOptions = {
412
- maintainAspectRatio: false,
413
- responsive: true,
414
- plugins: {
415
- legend: {
416
- display: false
417
- }
407
+ const sales_chart_options = {
408
+ series: [{
409
+ name: 'Digital Goods',
410
+ data: [28, 48, 40, 19, 86, 27, 90]
411
+ },{
412
+ name: 'Electronics',
413
+ data: [65, 59, 80, 81, 56, 55, 40]
414
+ }],
415
+ chart: {
416
+ height: 300,
417
+ type: 'area',
418
+ toolbar: {
419
+ show: false,
418
420
  },
419
- scales: {
420
- xAxes: {
421
- gridLines: {
422
- display: false
423
- }
424
- },
425
- yAxes: {
426
- gridLines: {
427
- display: false
428
- }
429
- }
430
- }
431
- }
432
-
433
- // This will get the first returned node in the js collection.
434
- var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
435
- type: 'line',
436
- data: salesChartData,
437
- options: salesChartOptions
438
- })
421
+ },
422
+ legend: {
423
+ show: false
424
+ },
425
+ colors:['#0d6efd', '#20c997'],
426
+ dataLabels: {
427
+ enabled: false,
428
+ },
429
+ stroke: {
430
+ curve: 'smooth'
431
+ },
432
+ xaxis: {
433
+ type: 'datetime',
434
+ categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
435
+ },
436
+ tooltip: {
437
+ x: {
438
+ format: 'MMMM yyyy'
439
+ },
440
+ },
441
+ };
442
+
443
+ const sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
444
+ sales_chart.render();
445
+ </script>
446
+
447
+ <!-- jsvectormap -->
448
+ <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" crossorigin="anonymous"></script>
449
+ <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" crossorigin="anonymous"></script>
450
+
451
+ <!-- jsvectormap -->
452
+ <script is:inline>
453
+ const visitorsData = {
454
+ US: 398, // USA
455
+ SA: 400, // Saudi Arabia
456
+ CA: 1000, // Canada
457
+ DE: 500, // Germany
458
+ FR: 760, // France
459
+ CN: 300, // China
460
+ AU: 700, // Australia
461
+ BR: 600, // Brazil
462
+ IN: 800, // India
463
+ GB: 320, // Great Britain
464
+ RU: 3000 // Russia
465
+ }
466
+
467
+ // World map by jsVectorMap
468
+ const map = new jsVectorMap({
469
+ selector: "#world-map",
470
+ map: "world",
471
+ });
439
472
 
440
- // Donut Chart
441
- var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
442
- var pieData = {
443
- labels: [
444
- 'Instore Sales',
445
- 'Download Sales',
446
- 'Mail-Order Sales'
447
- ],
448
- datasets: [
449
- {
450
- data: [30, 12, 20],
451
- backgroundColor: ['#f56954', '#00a65a', '#f39c12']
452
- }
453
- ]
454
- }
455
- var pieOptions = {
456
- plugins: {
457
- legend: {
458
- display: false
459
- }
473
+ // Sparkline charts
474
+ const option_sparkline1 = {
475
+ series: [{
476
+ data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
477
+ }],
478
+ chart: {
479
+ type: 'area',
480
+ height: 50,
481
+ sparkline: {
482
+ enabled: true
460
483
  },
461
- maintainAspectRatio: false,
462
- responsive: true
463
- }
464
- // Create pie or douhnut chart
465
- // You can switch between pie and douhnut using the method below.
466
- // eslint-disable-next-line no-unused-vars
467
- var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
468
- type: 'doughnut',
469
- data: pieData,
470
- options: pieOptions
471
- })
472
- })()
484
+ },
485
+ stroke: {
486
+ curve: 'straight'
487
+ },
488
+ fill: {
489
+ opacity: 0.3,
490
+ },
491
+ yaxis: {
492
+ min: 0
493
+ },
494
+ colors: ['#DCE6EC'],
495
+ };
496
+
497
+ const sparkline1 = new ApexCharts(document.querySelector("#sparkline-1"), option_sparkline1);
498
+ sparkline1.render();
499
+
500
+ const option_sparkline2 = {
501
+ series: [{
502
+ data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
503
+ }],
504
+ chart: {
505
+ type: 'area',
506
+ height: 50,
507
+ sparkline: {
508
+ enabled: true
509
+ },
510
+ },
511
+ stroke: {
512
+ curve: 'straight'
513
+ },
514
+ fill: {
515
+ opacity: 0.3,
516
+ },
517
+ yaxis: {
518
+ min: 0
519
+ },
520
+ colors: ['#DCE6EC'],
521
+ };
522
+
523
+ const sparkline2 = new ApexCharts(document.querySelector("#sparkline-2"), option_sparkline2);
524
+ sparkline2.render();
525
+
526
+ const option_sparkline3 = {
527
+ series: [{
528
+ data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
529
+ }],
530
+ chart: {
531
+ type: 'area',
532
+ height: 50,
533
+ sparkline: {
534
+ enabled: true
535
+ },
536
+ },
537
+ stroke: {
538
+ curve: 'straight'
539
+ },
540
+ fill: {
541
+ opacity: 0.3,
542
+ },
543
+ yaxis: {
544
+ min: 0
545
+ },
546
+ colors: ['#DCE6EC'],
547
+ };
473
548
 
549
+ const sparkline3 = new ApexCharts(document.querySelector("#sparkline-3"), option_sparkline3);
550
+ sparkline3.render();
474
551
  </script>
475
552
  </body>
476
553
  </html>