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/{index2.html → html/pages/index2.astro} RENAMED
@@ -1,31 +1,35 @@
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 | Dashboard v2'
9
+ const path = '../../dist'
10
+ const mainPage = 'dashboard'
11
+ const page = 'index2'
12
+ ---
1
13
  <!DOCTYPE html>
2
14
  <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
15
  <head>
6
- @@include('./_head.html', {
7
- "path": ".",
8
- "title": "AdminLTE 4 | Dashboard 2"
9
- })
16
+ <Head title={title} path={path} />
17
+
18
+ <!-- apexcharts -->
19
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
10
20
  </head>
11
- <body class="layout-fixed">
12
- <div class="wrapper">
13
- @@include('./dashboard/_topbar.html', {
14
- "path": "."
15
- })
16
-
17
- @@include('./dashboard/_sidenav.html', {
18
- "mainPage": "dashboard",
19
- "page": "index2",
20
- "path": "."
21
- })
21
+
22
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
+ <div class="app-wrapper">
24
+ <Topbar path={path} />
25
+ <Sidenav path={path} mainPage={mainPage} page={page} />
22
26
  <!-- Main content -->
23
- <main class="content-wrapper">
24
- <div class="content-header">
27
+ <main class="app-main">
28
+ <div class="app-content-header">
25
29
  <div class="container-fluid">
26
- <div class="row mb-2">
30
+ <div class="row">
27
31
  <div class="col-sm-6">
28
- <h3>Dashboard v2</h3>
32
+ <h3 class="mb-0">Dashboard v2</h3>
29
33
  </div>
30
34
  <div class="col-sm-6">
31
35
  <ol class="breadcrumb float-sm-end">
@@ -36,7 +40,7 @@
36
40
  </div>
37
41
  </div>
38
42
  </div>
39
- <div class="content">
43
+ <div class="app-content">
40
44
  <div class="container-fluid">
41
45
  <!-- Info boxes -->
42
46
  <div class="row">
@@ -134,14 +138,10 @@
134
138
  <div class="row">
135
139
  <div class="col-md-8">
136
140
  <p class="text-center">
137
- <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
141
+ <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
138
142
  </p>
139
143
 
140
- <div class="chart">
141
- <!-- Sales Chart Canvas -->
142
- <canvas id="salesChart" style="height: 180px;"></canvas>
143
- </div>
144
- <!-- /.chart-responsive -->
144
+ <div id="sales-chart"></div>
145
145
  </div>
146
146
  <!-- /.col -->
147
147
  <div class="col-md-4">
@@ -192,40 +192,41 @@
192
192
  <!-- ./card-body -->
193
193
  <div class="card-footer">
194
194
  <div class="row">
195
- <div class="col-sm-3 col-6">
196
- <div class="description-block border-end">
197
- <span class="description-percentage text-success"><i class="fa-solid fa-caret-up"></i> 17%</span>
198
- <h5 class="description-header">$35,210.43</h5>
199
- <span class="description-text">TOTAL REVENUE</span>
195
+ <div class="col-md-3 col-6">
196
+ <div class="text-center border-end">
197
+ <span class="text-success"><i class="fa-solid fa-caret-up"></i> 17%</span>
198
+ <h5 class="fw-bold mb-0">$35,210.43</h5>
199
+ <span class="text-uppercase">TOTAL REVENUE</span>
200
200
  </div>
201
- <!-- /.description-block -->
201
+
202
202
  </div>
203
+
203
204
  <!-- /.col -->
204
- <div class="col-sm-3 col-6">
205
- <div class="description-block border-end">
206
- <span class="description-percentage text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
207
- <h5 class="description-header">$10,390.90</h5>
208
- <span class="description-text">TOTAL COST</span>
205
+ <div class="col-md-3 col-6">
206
+ <div class="text-center border-end">
207
+ <span class="text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
208
+ <h5 class="fw-bold mb-0">$10,390.90</h5>
209
+ <span class="text-uppercase">TOTAL COST</span>
209
210
  </div>
210
- <!-- /.description-block -->
211
+
211
212
  </div>
212
213
  <!-- /.col -->
213
- <div class="col-sm-3 col-6">
214
- <div class="description-block border-end">
215
- <span class="description-percentage text-success"><i class="fa-solid fa-caret-up"></i> 20%</span>
216
- <h5 class="description-header">$24,813.53</h5>
217
- <span class="description-text">TOTAL PROFIT</span>
214
+ <div class="col-md-3 col-6">
215
+ <div class="text-center border-end">
216
+ <span class="text-success"><i class="fa-solid fa-caret-up"></i> 20%</span>
217
+ <h5 class="fw-bold mb-0">$24,813.53</h5>
218
+ <span class="text-uppercase">TOTAL PROFIT</span>
218
219
  </div>
219
- <!-- /.description-block -->
220
+
220
221
  </div>
221
222
  <!-- /.col -->
222
- <div class="col-sm-3 col-6">
223
- <div class="description-block">
224
- <span class="description-percentage text-danger"><i class="fa-solid fa-caret-down"></i> 18%</span>
225
- <h5 class="description-header">1200</h5>
226
- <span class="description-text">GOAL COMPLETIONS</span>
223
+ <div class="col-md-3 col-6">
224
+ <div class="text-center">
225
+ <span class="text-danger"><i class="fa-solid fa-caret-down"></i> 18%</span>
226
+ <h5 class="fw-bold mb-0">1200</h5>
227
+ <span class="text-uppercase">GOAL COMPLETIONS</span>
227
228
  </div>
228
- <!-- /.description-block -->
229
+
229
230
  </div>
230
231
  </div>
231
232
  <!-- /.row -->
@@ -273,7 +274,7 @@
273
274
  <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
274
275
  </div>
275
276
  <!-- /.direct-chat-infos -->
276
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
277
+ <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
277
278
  <!-- /.direct-chat-img -->
278
279
  <div class="direct-chat-text">
279
280
  Is this template really for free? That's unbelievable!
@@ -289,7 +290,7 @@
289
290
  <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
290
291
  </div>
291
292
  <!-- /.direct-chat-infos -->
292
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
293
+ <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
293
294
  <!-- /.direct-chat-img -->
294
295
  <div class="direct-chat-text">
295
296
  You better believe it!
@@ -305,7 +306,7 @@
305
306
  <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
306
307
  </div>
307
308
  <!-- /.direct-chat-infos -->
308
- <img class="direct-chat-img" src="./assets/img/user1-128x128.jpg" alt="message user image">
309
+ <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
309
310
  <!-- /.direct-chat-img -->
310
311
  <div class="direct-chat-text">
311
312
  Working with AdminLTE on a great new app! Wanna join?
@@ -321,7 +322,7 @@
321
322
  <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
322
323
  </div>
323
324
  <!-- /.direct-chat-infos -->
324
- <img class="direct-chat-img" src="./assets/img/user3-128x128.jpg" alt="message user image">
325
+ <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
325
326
  <!-- /.direct-chat-img -->
326
327
  <div class="direct-chat-text">
327
328
  I would love to.
@@ -331,19 +332,19 @@
331
332
  <!-- /.direct-chat-msg -->
332
333
 
333
334
  </div>
334
- <!--/.direct-chat-messages-->
335
+ <!-- /.direct-chat-messages-->
335
336
 
336
337
  <!-- Contacts are loaded here -->
337
338
  <div class="direct-chat-contacts">
338
339
  <ul class="contacts-list">
339
340
  <li>
340
341
  <a href="#">
341
- <img class="contacts-list-img" src="./assets/img/user1-128x128.jpg" alt="User Avatar">
342
+ <img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
342
343
 
343
344
  <div class="contacts-list-info">
344
345
  <span class="contacts-list-name">
345
346
  Count Dracula
346
- <small class="contacts-list-date float-end">2/28/2015</small>
347
+ <small class="contacts-list-date float-end">2/28/2023</small>
347
348
  </span>
348
349
  <span class="contacts-list-msg">How have you been? I was...</span>
349
350
  </div>
@@ -353,12 +354,12 @@
353
354
  <!-- End Contact Item -->
354
355
  <li>
355
356
  <a href="#">
356
- <img class="contacts-list-img" src="./assets/img/user7-128x128.jpg" alt="User Avatar">
357
+ <img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
357
358
 
358
359
  <div class="contacts-list-info">
359
360
  <span class="contacts-list-name">
360
361
  Sarah Doe
361
- <small class="contacts-list-date float-end">2/23/2015</small>
362
+ <small class="contacts-list-date float-end">2/23/2023</small>
362
363
  </span>
363
364
  <span class="contacts-list-msg">I will be waiting for...</span>
364
365
  </div>
@@ -368,12 +369,12 @@
368
369
  <!-- End Contact Item -->
369
370
  <li>
370
371
  <a href="#">
371
- <img class="contacts-list-img" src="./assets/img/user3-128x128.jpg" alt="User Avatar">
372
+ <img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
372
373
 
373
374
  <div class="contacts-list-info">
374
375
  <span class="contacts-list-name">
375
376
  Nadia Jolie
376
- <small class="contacts-list-date float-end">2/20/2015</small>
377
+ <small class="contacts-list-date float-end">2/20/2023</small>
377
378
  </span>
378
379
  <span class="contacts-list-msg">I'll call you back at...</span>
379
380
  </div>
@@ -383,12 +384,12 @@
383
384
  <!-- End Contact Item -->
384
385
  <li>
385
386
  <a href="#">
386
- <img class="contacts-list-img" src="./assets/img/user5-128x128.jpg" alt="User Avatar">
387
+ <img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
387
388
 
388
389
  <div class="contacts-list-info">
389
390
  <span class="contacts-list-name">
390
391
  Nora S. Vans
391
- <small class="contacts-list-date float-end">2/10/2015</small>
392
+ <small class="contacts-list-date float-end">2/10/2023</small>
392
393
  </span>
393
394
  <span class="contacts-list-msg">Where is your new...</span>
394
395
  </div>
@@ -398,12 +399,12 @@
398
399
  <!-- End Contact Item -->
399
400
  <li>
400
401
  <a href="#">
401
- <img class="contacts-list-img" src="./assets/img/user6-128x128.jpg" alt="User Avatar">
402
+ <img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
402
403
 
403
404
  <div class="contacts-list-info">
404
405
  <span class="contacts-list-name">
405
406
  John K.
406
- <small class="contacts-list-date float-end">1/27/2015</small>
407
+ <small class="contacts-list-date float-end">1/27/2023</small>
407
408
  </span>
408
409
  <span class="contacts-list-msg">Can I take a look at...</span>
409
410
  </div>
@@ -413,12 +414,12 @@
413
414
  <!-- End Contact Item -->
414
415
  <li>
415
416
  <a href="#">
416
- <img class="contacts-list-img" src="./assets/img/user8-128x128.jpg" alt="User Avatar">
417
+ <img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
417
418
 
418
419
  <div class="contacts-list-info">
419
420
  <span class="contacts-list-name">
420
421
  Kenneth M.
421
- <small class="contacts-list-date float-end">1/4/2015</small>
422
+ <small class="contacts-list-date float-end">1/4/2023</small>
422
423
  </span>
423
424
  <span class="contacts-list-msg">Never mind I found...</span>
424
425
  </div>
@@ -444,7 +445,7 @@
444
445
  </div>
445
446
  <!-- /.card-footer-->
446
447
  </div>
447
- <!--/.direct-chat -->
448
+ <!-- /.direct-chat -->
448
449
  </div>
449
450
  <!-- /.col -->
450
451
 
@@ -466,48 +467,48 @@
466
467
  </div>
467
468
  <!-- /.card-header -->
468
469
  <div class="card-body p-0">
469
- <ul class="users-list clearfix">
470
- <li>
471
- <img src="./assets/img/user1-128x128.jpg" alt="User Image">
472
- <a class="users-list-name" href="#">Alexander Pierce</a>
473
- <span class="users-list-date">Today</span>
474
- </li>
475
- <li>
476
- <img src="./assets/img/user8-128x128.jpg" alt="User Image">
477
- <a class="users-list-name" href="#">Norman</a>
478
- <span class="users-list-date">Yesterday</span>
479
- </li>
480
- <li>
481
- <img src="./assets/img/user7-128x128.jpg" alt="User Image">
482
- <a class="users-list-name" href="#">Jane</a>
483
- <span class="users-list-date">12 Jan</span>
484
- </li>
485
- <li>
486
- <img src="./assets/img/user6-128x128.jpg" alt="User Image">
487
- <a class="users-list-name" href="#">John</a>
488
- <span class="users-list-date">12 Jan</span>
489
- </li>
490
- <li>
491
- <img src="./assets/img/user2-160x160.jpg" alt="User Image">
492
- <a class="users-list-name" href="#">Alexander</a>
493
- <span class="users-list-date">13 Jan</span>
494
- </li>
495
- <li>
496
- <img src="./assets/img/user5-128x128.jpg" alt="User Image">
497
- <a class="users-list-name" href="#">Sarah</a>
498
- <span class="users-list-date">14 Jan</span>
499
- </li>
500
- <li>
501
- <img src="./assets/img/user4-128x128.jpg" alt="User Image">
502
- <a class="users-list-name" href="#">Nora</a>
503
- <span class="users-list-date">15 Jan</span>
504
- </li>
505
- <li>
506
- <img src="./assets/img/user3-128x128.jpg" alt="User Image">
507
- <a class="users-list-name" href="#">Nadia</a>
508
- <span class="users-list-date">15 Jan</span>
509
- </li>
510
- </ul>
470
+ <div class="row text-center m-1">
471
+ <div class="col-3 p-2">
472
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
473
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander Pierce</a>
474
+ <div class="fs-8">Today</div>
475
+ </div>
476
+ <div class="col-3 p-2">
477
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user1-128x128.jpg'} alt="User Image">
478
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Norman</a>
479
+ <div class="fs-8">Yesterday</div>
480
+ </div>
481
+ <div class="col-3 p-2">
482
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user7-128x128.jpg'} alt="User Image">
483
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Jane</a>
484
+ <div class="fs-8">12 Jan</div>
485
+ </div>
486
+ <div class="col-3 p-2">
487
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user6-128x128.jpg'} alt="User Image">
488
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">John</a>
489
+ <div class="fs-8">12 Jan</div>
490
+ </div>
491
+ <div class="col-3 p-2">
492
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user2-160x160.jpg'} alt="User Image">
493
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Alexander</a>
494
+ <div class="fs-8">13 Jan</div>
495
+ </div>
496
+ <div class="col-3 p-2">
497
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user5-128x128.jpg'} alt="User Image">
498
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Sarah</a>
499
+ <div class="fs-8">14 Jan</div>
500
+ </div>
501
+ <div class="col-3 p-2">
502
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user4-128x128.jpg'} alt="User Image">
503
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nora</a>
504
+ <div class="fs-8">15 Jan</div>
505
+ </div>
506
+ <div class="col-3 p-2">
507
+ <img class="img-fluid rounded-circle" src={path + '/assets/img/user3-128x128.jpg'} alt="User Image">
508
+ <a class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0" href="#">Nadia</a>
509
+ <div class="fs-8">15 Jan</div>
510
+ </div>
511
+ </div>
511
512
  <!-- /.users-list -->
512
513
  </div>
513
514
  <!-- /.card-body -->
@@ -516,7 +517,7 @@
516
517
  </div>
517
518
  <!-- /.card-footer -->
518
519
  </div>
519
- <!--/.card -->
520
+ <!-- /.card -->
520
521
  </div>
521
522
  <!-- /.col -->
522
523
  </div>
@@ -524,7 +525,7 @@
524
525
 
525
526
  <!-- TABLE: LATEST ORDERS -->
526
527
  <div class="card">
527
- <div class="card-header border-transparent">
528
+ <div class="card-header">
528
529
  <h3 class="card-title">Latest Orders</h3>
529
530
 
530
531
  <div class="card-tools">
@@ -680,22 +681,8 @@
680
681
  <!-- /.card-header -->
681
682
  <div class="card-body">
682
683
  <div class="row">
683
- <div class="col-md-8">
684
- <div class="chart-responsive">
685
- <canvas id="pieChart" height="150"></canvas>
686
- </div>
687
- <!-- ./chart-responsive -->
688
- </div>
689
- <!-- /.col -->
690
- <div class="col-md-4">
691
- <ul class="chart-legend clearfix">
692
- <li><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
693
- <li><i class="fa-regular fa-circle text-success"></i> IE</li>
694
- <li><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
695
- <li><i class="fa-regular fa-circle text-info"></i> Safari</li>
696
- <li><i class="fa-regular fa-circle text-primary"></i> Opera</li>
697
- <li><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
698
- </ul>
684
+ <div class="col-12">
685
+ <div id="pie-chart"></div>
699
686
  </div>
700
687
  <!-- /.col -->
701
688
  </div>
@@ -750,63 +737,63 @@
750
737
  </div>
751
738
  <!-- /.card-header -->
752
739
  <div class="card-body p-0">
753
- <ul class="products-list product-list-in-card ps-2 pe-2">
754
- <li class="item">
755
- <div class="product-img">
756
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
740
+ <div class="px-2">
741
+ <div class="d-flex border-top py-2 px-1">
742
+ <div class="col-2">
743
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
757
744
  </div>
758
- <div class="product-info">
759
- <a href="javascript:void(0)" class="product-title">Samsung TV
745
+ <div class="col-10">
746
+ <a href="javascript:void(0)" class="fw-bold">Samsung TV
760
747
  <span class="badge text-bg-warning float-end">$1800</span></a>
761
- <span class="product-description">
748
+ <div class="text-truncate">
762
749
  Samsung 32" 1080p 60Hz LED Smart HDTV.
763
- </span>
750
+ </div>
764
751
  </div>
765
- </li>
752
+ </div>
766
753
  <!-- /.item -->
767
- <li class="item">
768
- <div class="product-img">
769
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
754
+ <div class="d-flex border-top py-2 px-1">
755
+ <div class="col-2">
756
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
770
757
  </div>
771
- <div class="product-info">
772
- <a href="javascript:void(0)" class="product-title">Bicycle
758
+ <div class="col-10">
759
+ <a href="javascript:void(0)" class="fw-bold">Bicycle
773
760
  <span class="badge text-bg-info float-end">$700</span></a>
774
- <span class="product-description">
761
+ <div class="text-truncate">
775
762
  26" Mongoose Dolomite Men's 7-speed, Navy Blue.
776
- </span>
763
+ </div>
777
764
  </div>
778
- </li>
765
+ </div>
779
766
  <!-- /.item -->
780
- <li class="item">
781
- <div class="product-img">
782
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
767
+ <div class="d-flex border-top py-2 px-1">
768
+ <div class="col-2">
769
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
783
770
  </div>
784
- <div class="product-info">
785
- <a href="javascript:void(0)" class="product-title">
771
+ <div class="col-10">
772
+ <a href="javascript:void(0)" class="fw-bold">
786
773
  Xbox One <span class="badge text-bg-danger float-end">
787
774
  $350
788
775
  </span>
789
776
  </a>
790
- <span class="product-description">
777
+ <div class="text-truncate">
791
778
  Xbox One Console Bundle with Halo Master Chief Collection.
792
- </span>
779
+ </div>
793
780
  </div>
794
- </li>
781
+ </div>
795
782
  <!-- /.item -->
796
- <li class="item">
797
- <div class="product-img">
798
- <img src="./assets/img/default-150x150.png" alt="Product Image" class="img-size-50">
783
+ <div class="d-flex border-top py-2 px-1">
784
+ <div class="col-2">
785
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
799
786
  </div>
800
- <div class="product-info">
801
- <a href="javascript:void(0)" class="product-title">PlayStation 4
787
+ <div class="col-10">
788
+ <a href="javascript:void(0)" class="fw-bold">PlayStation 4
802
789
  <span class="badge text-bg-success float-end">$399</span></a>
803
- <span class="product-description">
790
+ <div class="text-truncate">
804
791
  PlayStation 4 500GB Console (PS4)
805
- </span>
792
+ </div>
806
793
  </div>
807
- </li>
794
+ </div>
808
795
  <!-- /.item -->
809
- </ul>
796
+ </div>
810
797
  </div>
811
798
  <!-- /.card-body -->
812
799
  <div class="card-footer text-center">
@@ -822,144 +809,102 @@
822
809
  </div><!-- /.container-fluid -->
823
810
  </div>
824
811
  </main>
825
- <!-- /.content-wrapper -->
812
+ <!-- /.app-content -->
826
813
 
827
- @@include('./dashboard/_footer.html', {
828
- "path": "."
829
- })
814
+ <Footer />
830
815
  </div>
831
- <!-- ./wrapper -->
816
+ <!-- ./app-wrapper -->
832
817
 
833
- @@include('./_scripts.html', {
834
- "path": "."
835
- })
818
+ <Scripts path={path} />
836
819
 
837
820
  <!-- OPTIONAL SCRIPTS -->
838
821
 
839
- <!-- ChartJS -->
840
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
822
+ <!-- apexcharts -->
823
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
841
824
 
842
- <script>
825
+ <script is:inline>
843
826
  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
844
827
  // IT'S ALL JUST JUNK FOR DEMO
845
828
  // ++++++++++++++++++++++++++++++++++++++++++
846
829
 
847
- /* ChartJS
830
+ /* apexcharts
848
831
  * -------
849
- * Here we will create a few charts using ChartJS
832
+ * Here we will create a few charts using apexcharts
850
833
  */
851
834
 
852
835
  //-----------------------
853
836
  // - MONTHLY SALES CHART -
854
837
  //-----------------------
855
- (function () {
856
- 'use strict'
857
- // Get context with querySelector - using Chart.js .getContext('2d') method.
858
- var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
859
-
860
- var salesChartData = {
861
- labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
862
- datasets: [
863
- {
864
- label: 'Digital Goods',
865
- backgroundColor: 'rgba(60,141,188,0.9)',
866
- borderColor: 'rgba(60,141,188,0.8)',
867
- fill: true,
868
- pointRadius: 0,
869
- pointColor: '#3b8bba',
870
- pointStrokeColor: 'rgba(60,141,188,1)',
871
- pointHighlightFill: '#fff',
872
- pointHighlightStroke: 'rgba(60,141,188,1)',
873
- data: [28, 48, 40, 19, 86, 27, 90]
874
- },
875
- {
876
- label: 'Electronics',
877
- backgroundColor: 'rgba(210, 214, 222, 1)',
878
- borderColor: 'rgba(210, 214, 222, 1)',
879
- fill: true,
880
- pointRadius: 0,
881
- pointColor: 'rgba(210, 214, 222, 1)',
882
- pointStrokeColor: '#c1c7d1',
883
- pointHighlightFill: '#fff',
884
- pointHighlightStroke: 'rgba(220,220,220,1)',
885
- data: [65, 59, 80, 81, 56, 55, 40]
886
- }
887
- ]
888
- }
889
-
890
- var salesChartOptions = {
891
- maintainAspectRatio: false,
892
- responsive: true,
893
- tension: 0.4,
894
- plugins: {
895
- legend: {
896
- display: false
897
- }
838
+
839
+ var sales_chart_options = {
840
+ series: [{
841
+ name: 'Digital Goods',
842
+ data: [28, 48, 40, 19, 86, 27, 90]
843
+ },{
844
+ name: 'Electronics',
845
+ data: [65, 59, 80, 81, 56, 55, 40]
846
+ }],
847
+ chart: {
848
+ height: 180,
849
+ type: 'area',
850
+ toolbar: {
851
+ show: false,
898
852
  },
899
- scales: {
900
- xAxes: {
901
- gridLines: {
902
- display: false
903
- }
904
- },
905
- yAxes: {
906
- gridLines: {
907
- display: false
908
- }
909
- }
910
- }
911
- }
912
-
913
- // This will get the first returned node in the js collection.
914
- var salesChart = new Chart(salesChartCanvas, {
915
- type: 'line',
916
- data: salesChartData,
917
- options: salesChartOptions
918
- })
919
-
920
- //---------------------------
921
- // - END MONTHLY SALES CHART -
922
- //---------------------------
923
-
924
- //-------------
925
- // - PIE CHART -
926
- //-------------
927
-
928
- // Get context with querySelector - using Chart.js .getContext('2d') method.
929
- var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
930
-
931
- var pieData = {
932
- labels: [
933
- 'Chrome',
934
- 'IE',
935
- 'FireFox',
936
- 'Safari',
937
- 'Opera',
938
- 'Navigator'
939
- ],
940
- datasets: [
941
- {
942
- data: [700, 500, 400, 600, 300, 100],
943
- backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
944
- }
945
- ]
946
- }
947
- var pieOptions = {
948
- plugins: {
949
- legend: {
950
- display: false
951
- }
952
- }
953
- }
954
- // Create pie or douhnut chart
955
- // You can switch between pie and douhnut using the method below.
956
- // eslint-disable-next-line no-unused-vars
957
- var pieChart = new Chart(pieChartCanvas, {
958
- type: 'doughnut',
959
- data: pieData,
960
- options: pieOptions
961
- })
962
- })()
853
+ },
854
+ legend: {
855
+ show: false
856
+ },
857
+ colors:['#0d6efd', '#20c997'],
858
+ dataLabels: {
859
+ enabled: false,
860
+ },
861
+ stroke: {
862
+ curve: 'smooth'
863
+ },
864
+ xaxis: {
865
+ type: 'datetime',
866
+ categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
867
+ },
868
+ tooltip: {
869
+ x: {
870
+ format: 'MMMM yyyy'
871
+ },
872
+ },
873
+ };
874
+
875
+ var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
876
+ sales_chart.render();
877
+
878
+ //---------------------------
879
+ // - END MONTHLY SALES CHART -
880
+ //---------------------------
881
+
882
+ //-------------
883
+ // - PIE CHART -
884
+ //-------------
885
+
886
+ var pie_chart_options = {
887
+ series: [700, 500, 400, 600, 300, 100],
888
+ chart: {
889
+ type: 'donut',
890
+ },
891
+ labels: [
892
+ 'Chrome',
893
+ 'Edge',
894
+ 'FireFox',
895
+ 'Safari',
896
+ 'Opera',
897
+ 'IE',
898
+ ],
899
+ dataLabels: {
900
+ enabled: false,
901
+ },
902
+ colors: ['#0d6efd', '#20c997', '#ffc107', '#d63384', '#6f42c1', '#adb5bd']
903
+ };
904
+
905
+ var pie_chart = new ApexCharts(document.querySelector("#pie-chart"), pie_chart_options);
906
+ pie_chart.render();
907
+
963
908
  //-----------------
964
909
  // - END PIE CHART -
965
910
  //-----------------