admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

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 (200) hide show
  1. package/.bundlewatch.config.json +8 -8
  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/.gitpod.yml +1 -1
  7. package/.idea/AdminLTE.iml +4 -0
  8. package/.idea/codeStyles/Project.xml +24 -0
  9. package/.idea/dbnavigator.xml +421 -0
  10. package/.idea/git_toolbox_prj.xml +15 -0
  11. package/.idea/jsLibraryMappings.xml +6 -0
  12. package/.idea/jsLinters/eslint.xml +6 -0
  13. package/.idea/vcs.xml +6 -0
  14. package/.stylelintrc.json +47 -0
  15. package/LICENSE +1 -1
  16. package/README.md +6 -7
  17. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  18. package/dist/css/adminlte.css +2716 -2710
  19. package/dist/css/adminlte.css.map +1 -1
  20. package/dist/css/adminlte.min.css +2 -2
  21. package/dist/css/adminlte.min.css.map +1 -1
  22. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2715 -2710
  23. package/dist/css/adminlte.rtl.css.map +1 -0
  24. package/dist/css/adminlte.rtl.min.css +7 -0
  25. package/dist/css/adminlte.rtl.min.css.map +1 -0
  26. package/dist/js/adminlte.js +204 -233
  27. package/dist/js/adminlte.js.map +1 -1
  28. package/dist/js/adminlte.min.js +6 -1
  29. package/dist/js/adminlte.min.js.map +1 -1
  30. package/dist/pages/UI/timeline.html +869 -0
  31. package/dist/pages/docs/browser-support.html +755 -0
  32. package/dist/pages/docs/color-mode.html +1067 -0
  33. package/dist/pages/docs/components/main-header.html +1137 -0
  34. package/dist/pages/docs/components/main-sidebar.html +858 -0
  35. package/dist/pages/docs/faq.html +743 -0
  36. package/dist/pages/docs/how-to-contribute.html +783 -0
  37. package/dist/pages/docs/introduction.html +767 -0
  38. package/dist/pages/docs/javascript/treeview.html +762 -0
  39. package/dist/pages/docs/layout.html +788 -0
  40. package/dist/pages/docs/license.html +746 -0
  41. package/dist/pages/examples/lockscreen.html +107 -0
  42. package/dist/pages/examples/login-v2.html +148 -0
  43. package/dist/pages/examples/login.html +128 -196
  44. package/dist/pages/examples/register-v2.html +155 -0
  45. package/dist/pages/examples/register.html +131 -199
  46. package/dist/pages/forms/general.html +1065 -652
  47. package/dist/pages/index.html +1320 -0
  48. package/dist/pages/index2.html +1776 -0
  49. package/dist/pages/index3.html +1111 -0
  50. package/dist/pages/layout/collapsed-sidebar.html +766 -0
  51. package/dist/pages/layout/fixed-complete.html +867 -0
  52. package/dist/pages/layout/fixed-sidebar.html +749 -654
  53. package/dist/pages/layout/layout-rtl.html +766 -0
  54. package/dist/pages/layout/logo-switch.html +433 -0
  55. package/dist/pages/layout/sidebar-mini.html +766 -0
  56. package/dist/pages/layout/unfixed-sidebar.html +747 -654
  57. package/dist/pages/tables/simple.html +1049 -946
  58. package/dist/pages/widgets/cards.html +974 -713
  59. package/dist/pages/widgets/info-box.html +1062 -966
  60. package/dist/pages/widgets/small-box.html +792 -694
  61. package/index.html +6 -15
  62. package/package.json +59 -39
  63. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  64. package/src/config/assets.config.mjs +8 -0
  65. package/src/config/astro.config.mjs +19 -0
  66. package/src/config/postcss.config.mjs +15 -0
  67. package/src/config/rollup.config.js +20 -0
  68. package/src/html/.eslintrc.json +24 -0
  69. package/src/html/.prettierrc.js +11 -0
  70. package/src/html/.tsconfig.json +4 -0
  71. package/src/html/components/_head.astro +47 -0
  72. package/src/html/components/_scripts.astro +51 -0
  73. package/src/html/components/dashboard/_footer.astro +18 -0
  74. package/src/html/components/dashboard/_sidenav.astro +553 -0
  75. package/src/html/components/dashboard/_topbar.astro +213 -0
  76. package/src/html/components/docs/browser-support.mdx +23 -0
  77. package/src/html/components/docs/color-mode.mdx +169 -0
  78. package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx} +67 -67
  79. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  80. package/src/html/components/docs/faq.mdx +11 -0
  81. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  82. package/src/html/components/docs/introduction.mdx +60 -0
  83. package/src/html/components/docs/license.mdx +9 -0
  84. package/src/html/components/javascript/treeview.mdx +39 -0
  85. package/src/html/env.d.ts +1 -0
  86. package/src/html/pages/UI/timeline.astro +221 -0
  87. package/src/html/pages/docs/browser-support.astro +71 -0
  88. package/src/html/pages/docs/color-mode.astro +271 -0
  89. package/src/html/pages/docs/components/main-header.astro +319 -0
  90. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  91. package/src/html/pages/docs/faq.astro +71 -0
  92. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  93. package/src/html/pages/docs/introduction.astro +71 -0
  94. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  95. package/src/html/pages/docs/layout.astro +120 -0
  96. package/src/html/pages/docs/license.astro +71 -0
  97. package/src/html/pages/examples/lockscreen.astro +63 -0
  98. package/src/html/pages/examples/login-v2.astro +109 -0
  99. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +40 -22
  100. package/src/html/pages/examples/register-v2.astro +116 -0
  101. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +42 -24
  102. package/src/html/pages/forms/general.astro +624 -0
  103. package/src/html/pages/index.astro +790 -0
  104. package/src/html/pages/index2.astro +1345 -0
  105. package/src/html/pages/index3.astro +513 -0
  106. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  107. package/src/html/pages/layout/fixed-complete.astro +209 -0
  108. package/src/html/pages/layout/fixed-sidebar.astro +109 -0
  109. package/src/html/pages/layout/layout-rtl.astro +109 -0
  110. package/src/html/pages/layout/logo-switch.astro +212 -0
  111. package/src/html/pages/layout/sidebar-mini.astro +108 -0
  112. package/src/html/pages/layout/unfixed-sidebar.astro +107 -0
  113. package/src/html/pages/tables/simple.astro +472 -0
  114. package/src/html/pages/widgets/cards.astro +373 -0
  115. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +110 -60
  116. package/src/html/pages/widgets/small-box.astro +182 -0
  117. package/src/scss/_app-content.scss +52 -0
  118. package/src/scss/_app-footer.scss +15 -0
  119. package/src/scss/_app-header.scss +26 -0
  120. package/src/scss/_app-main.scss +17 -0
  121. package/src/scss/_app-sidebar.scss +603 -0
  122. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  123. package/src/scss/_bootstrap-variables.scss +42 -27
  124. package/src/scss/_callouts.scss +34 -0
  125. package/src/scss/_cards.scss +54 -224
  126. package/src/scss/_compact-mode.scss +79 -0
  127. package/src/scss/_direct-chat.scss +15 -9
  128. package/src/scss/_docs.scss +4 -0
  129. package/src/scss/_dropdown.scss +7 -5
  130. package/src/scss/_info-box.scss +2 -6
  131. package/src/scss/_miscellaneous.scss +0 -455
  132. package/src/scss/_mixins.scss +0 -6
  133. package/src/scss/_root.scss +2 -58
  134. package/src/scss/_small-box.scss +15 -41
  135. package/src/scss/_table.scss +0 -50
  136. package/src/scss/_timeline.scss +120 -0
  137. package/src/scss/_variables-dark.scss +15 -8
  138. package/src/scss/_variables.scss +48 -136
  139. package/src/scss/adminlte.scss +1 -1
  140. package/src/scss/mixins/_animations.scss +0 -1
  141. package/src/scss/mixins/_scrollbar.scss +2 -2
  142. package/src/scss/pages/_lockscreen.scss +74 -0
  143. package/src/scss/pages/_login_and_register.scss +1 -5
  144. package/src/scss/parts/_core.scss +9 -15
  145. package/src/scss/parts/_extra-components.scss +1 -2
  146. package/src/scss/parts/_pages.scss +1 -0
  147. package/src/ts/adminlte.ts +0 -2
  148. package/src/ts/card-widget.ts +57 -66
  149. package/src/ts/direct-chat.ts +35 -10
  150. package/src/ts/layout.ts +8 -6
  151. package/src/ts/push-menu.ts +90 -158
  152. package/src/ts/treeview.ts +30 -30
  153. package/src/ts/util/index.ts +14 -12
  154. package/src/utils/index.js +28 -0
  155. package/tsconfig.json +11 -3
  156. package/.stylelintrc +0 -40
  157. package/CHECKLIST.md +0 -0
  158. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  159. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  160. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  161. package/dist/index.html +0 -1065
  162. package/dist/index2.html +0 -1629
  163. package/dist/index3.html +0 -1015
  164. package/gulpfile.js +0 -315
  165. package/src/index.html +0 -476
  166. package/src/index2.html +0 -968
  167. package/src/index3.html +0 -430
  168. package/src/pages/forms/general.html +0 -97
  169. package/src/pages/layout/fixed-sidebar.html +0 -87
  170. package/src/pages/layout/unfixed-sidebar.html +0 -87
  171. package/src/pages/tables/simple.html +0 -336
  172. package/src/pages/widgets/cards.html +0 -143
  173. package/src/pages/widgets/small-box.html +0 -124
  174. package/src/partials/_head.html +0 -31
  175. package/src/partials/_scripts.html +0 -95
  176. package/src/partials/dashboard/_footer.html +0 -9
  177. package/src/partials/dashboard/_sidenav.html +0 -244
  178. package/src/scss/_brand-container.scss +0 -72
  179. package/src/scss/_content-header.scss +0 -9
  180. package/src/scss/_content-wrapper.scss +0 -6
  181. package/src/scss/_content.scss +0 -3
  182. package/src/scss/_layout-fixed.scss +0 -43
  183. package/src/scss/_layout-mobile.scss +0 -22
  184. package/src/scss/_main-footer.scss +0 -28
  185. package/src/scss/_main-header.scss +0 -40
  186. package/src/scss/_main-sidebar.scss +0 -63
  187. package/src/scss/_nav-sidebar.scss +0 -66
  188. package/src/scss/_products.scss +0 -55
  189. package/src/scss/_sidebar-close.scss +0 -6
  190. package/src/scss/_sidebar-collapse.scss +0 -120
  191. package/src/scss/_sidebar-horizontal.scss +0 -67
  192. package/src/scss/_sidebar.scss +0 -11
  193. package/src/scss/_users-list.scss +0 -45
  194. package/src/scss/mixins/_brand-variant.scss +0 -9
  195. package/src/scss/mixins/_cards.scss +0 -53
  196. package/src/scss/mixins/_direct-chat.scss +0 -17
  197. package/src/scss/mixins/_header-variant.scss +0 -22
  198. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  199. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  200. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/src/html/pages/index2.astro ADDED
@@ -0,0 +1,1345 @@
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
+ ---
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <!--begin::Head-->
17
+ <head>
18
+ <Head title={title} path={path} />
19
+
20
+ <!-- apexcharts -->
21
+ <link
22
+ rel="stylesheet"
23
+ href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
24
+ integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
25
+ crossorigin="anonymous"
26
+ />
27
+ </head>
28
+
29
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
30
+ <!--begin::App Wrapper-->
31
+ <div class="app-wrapper">
32
+ <Topbar path={path} />
33
+ <Sidenav path={path} mainPage={mainPage} page={page} />
34
+ <!--begin::App Main-->
35
+ <main class="app-main">
36
+ <!--begin::App Content Header-->
37
+ <div class="app-content-header">
38
+ <!--begin::Container-->
39
+ <div class="container-fluid">
40
+ <!--begin::Row-->
41
+ <div class="row">
42
+ <div class="col-sm-6">
43
+ <h3 class="mb-0">Dashboard v2</h3>
44
+ </div>
45
+ <div class="col-sm-6">
46
+ <ol class="breadcrumb float-sm-end">
47
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
48
+ <li class="breadcrumb-item active" aria-current="page">
49
+ Dashboard v2
50
+ </li>
51
+ </ol>
52
+ </div>
53
+ </div>
54
+ <!--end::Row-->
55
+ </div>
56
+ <!--end::Container-->
57
+ </div>
58
+ <div class="app-content">
59
+ <!--begin::Container-->
60
+ <div class="container-fluid">
61
+ <!-- Info boxes -->
62
+ <div class="row">
63
+ <div class="col-12 col-sm-6 col-md-3">
64
+ <div class="info-box">
65
+ <span class="info-box-icon text-bg-primary shadow-sm">
66
+ <i class="bi bi-gear-fill"></i>
67
+ </span>
68
+
69
+ <div class="info-box-content">
70
+ <span class="info-box-text">CPU Traffic</span>
71
+ <span class="info-box-number">
72
+ 10
73
+ <small>%</small>
74
+ </span>
75
+ </div>
76
+ <!-- /.info-box-content -->
77
+ </div>
78
+ <!-- /.info-box -->
79
+ </div>
80
+ <!-- /.col -->
81
+ <div class="col-12 col-sm-6 col-md-3">
82
+ <div class="info-box">
83
+ <span class="info-box-icon text-bg-danger shadow-sm">
84
+ <i class="bi bi-hand-thumbs-up-fill"></i>
85
+ </span>
86
+
87
+ <div class="info-box-content">
88
+ <span class="info-box-text">Likes</span>
89
+ <span class="info-box-number">41,410</span>
90
+ </div>
91
+ <!-- /.info-box-content -->
92
+ </div>
93
+ <!-- /.info-box -->
94
+ </div>
95
+ <!-- /.col -->
96
+
97
+ <!-- fix for small devices only -->
98
+ <!-- <div class="clearfix hidden-md-up"></div> -->
99
+
100
+ <div class="col-12 col-sm-6 col-md-3">
101
+ <div class="info-box">
102
+ <span class="info-box-icon text-bg-success shadow-sm">
103
+ <i class="bi bi-cart-fill"></i>
104
+ </span>
105
+
106
+ <div class="info-box-content">
107
+ <span class="info-box-text">Sales</span>
108
+ <span class="info-box-number">760</span>
109
+ </div>
110
+ <!-- /.info-box-content -->
111
+ </div>
112
+ <!-- /.info-box -->
113
+ </div>
114
+ <!-- /.col -->
115
+ <div class="col-12 col-sm-6 col-md-3">
116
+ <div class="info-box">
117
+ <span class="info-box-icon text-bg-warning shadow-sm">
118
+ <i class="bi bi-people-fill"></i>
119
+ </span>
120
+
121
+ <div class="info-box-content">
122
+ <span class="info-box-text">New Members</span>
123
+ <span class="info-box-number">2,000</span>
124
+ </div>
125
+ <!-- /.info-box-content -->
126
+ </div>
127
+ <!-- /.info-box -->
128
+ </div>
129
+ <!-- /.col -->
130
+ </div>
131
+ <!-- /.row -->
132
+
133
+ <!--begin::Row-->
134
+ <div class="row">
135
+ <div class="col-md-12">
136
+ <div class="card mb-4">
137
+ <div class="card-header">
138
+ <h5 class="card-title">Monthly Recap Report</h5>
139
+
140
+ <div class="card-tools">
141
+ <button
142
+ type="button"
143
+ class="btn btn-tool"
144
+ data-lte-toggle="card-collapse"
145
+ >
146
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
147
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
148
+ </button>
149
+ <div class="btn-group">
150
+ <button
151
+ type="button"
152
+ class="btn btn-tool dropdown-toggle"
153
+ data-bs-toggle="dropdown"
154
+ >
155
+ <i class="bi bi-wrench"></i>
156
+ </button>
157
+ <div
158
+ class="dropdown-menu dropdown-menu-end"
159
+ role="menu"
160
+ >
161
+ <a href="#" class="dropdown-item">Action</a>
162
+ <a href="#" class="dropdown-item">Another action</a>
163
+ <a href="#" class="dropdown-item">
164
+ Something else here
165
+ </a>
166
+ <a class="dropdown-divider"></a>
167
+ <a href="#" class="dropdown-item">Separated link</a>
168
+ </div>
169
+ </div>
170
+ <button
171
+ type="button"
172
+ class="btn btn-tool"
173
+ data-lte-toggle="card-remove"
174
+ >
175
+ <i class="bi bi-x-lg"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+ <!-- /.card-header -->
180
+ <div class="card-body">
181
+ <!--begin::Row-->
182
+ <div class="row">
183
+ <div class="col-md-8">
184
+ <p class="text-center">
185
+ <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
186
+ </p>
187
+
188
+ <div id="sales-chart"></div>
189
+ </div>
190
+ <!-- /.col -->
191
+ <div class="col-md-4">
192
+ <p class="text-center">
193
+ <strong>Goal Completion</strong>
194
+ </p>
195
+
196
+ <div class="progress-group">
197
+ Add Products to Cart
198
+ <span class="float-end"><b>160</b>/200</span>
199
+ <div class="progress progress-sm">
200
+ <div
201
+ class="progress-bar text-bg-primary"
202
+ style="width: 80%"
203
+ >
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <!-- /.progress-group -->
208
+
209
+ <div class="progress-group">
210
+ Complete Purchase
211
+ <span class="float-end"><b>310</b>/400</span>
212
+ <div class="progress progress-sm">
213
+ <div
214
+ class="progress-bar text-bg-danger"
215
+ style="width: 75%"
216
+ >
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- /.progress-group -->
222
+ <div class="progress-group">
223
+ <span class="progress-text">Visit Premium Page</span>
224
+ <span class="float-end"><b>480</b>/800</span>
225
+ <div class="progress progress-sm">
226
+ <div
227
+ class="progress-bar text-bg-success"
228
+ style="width: 60%"
229
+ >
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- /.progress-group -->
235
+ <div class="progress-group">
236
+ Send Inquiries
237
+ <span class="float-end"><b>250</b>/500</span>
238
+ <div class="progress progress-sm">
239
+ <div
240
+ class="progress-bar text-bg-warning"
241
+ style="width: 50%"
242
+ >
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <!-- /.progress-group -->
247
+ </div>
248
+ <!-- /.col -->
249
+ </div>
250
+ <!--end::Row-->
251
+ </div>
252
+ <!-- ./card-body -->
253
+ <div class="card-footer">
254
+ <!--begin::Row-->
255
+ <div class="row">
256
+ <div class="col-md-3 col-6">
257
+ <div class="text-center border-end">
258
+ <span class="text-success">
259
+ <i class="bi bi-caret-up-fill"></i> 17%
260
+ </span>
261
+ <h5 class="fw-bold mb-0">$35,210.43</h5>
262
+ <span class="text-uppercase">TOTAL REVENUE</span>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- /.col -->
267
+ <div class="col-md-3 col-6">
268
+ <div class="text-center border-end">
269
+ <span class="text-info">
270
+ <i class="bi bi-caret-left-fill"></i> 0%
271
+ </span>
272
+ <h5 class="fw-bold mb-0">$10,390.90</h5>
273
+ <span class="text-uppercase">TOTAL COST</span>
274
+ </div>
275
+ </div>
276
+ <!-- /.col -->
277
+ <div class="col-md-3 col-6">
278
+ <div class="text-center border-end">
279
+ <span class="text-success">
280
+ <i class="bi bi-caret-up-fill"></i> 20%
281
+ </span>
282
+ <h5 class="fw-bold mb-0">$24,813.53</h5>
283
+ <span class="text-uppercase">TOTAL PROFIT</span>
284
+ </div>
285
+ </div>
286
+ <!-- /.col -->
287
+ <div class="col-md-3 col-6">
288
+ <div class="text-center">
289
+ <span class="text-danger">
290
+ <i class="bi bi-caret-down-fill"></i> 18%
291
+ </span>
292
+ <h5 class="fw-bold mb-0">1200</h5>
293
+ <span class="text-uppercase">GOAL COMPLETIONS</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <!--end::Row-->
298
+ </div>
299
+ <!-- /.card-footer -->
300
+ </div>
301
+ <!-- /.card -->
302
+ </div>
303
+ <!-- /.col -->
304
+ </div>
305
+ <!--end::Row-->
306
+
307
+ <!--begin::Row-->
308
+ <div class="row">
309
+ <!-- Start col -->
310
+ <div class="col-md-8">
311
+ <!--begin::Row-->
312
+ <div class="row">
313
+ <div class="col-md-6">
314
+ <!-- DIRECT CHAT -->
315
+ <div class="card direct-chat direct-chat-warning">
316
+ <div class="card-header">
317
+ <h3 class="card-title">Direct Chat</h3>
318
+
319
+ <div class="card-tools">
320
+ <span
321
+ title="3 New Messages"
322
+ class="badge text-bg-warning"
323
+ >
324
+ 3
325
+ </span>
326
+ <button
327
+ type="button"
328
+ class="btn btn-tool"
329
+ data-lte-toggle="card-collapse"
330
+ >
331
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
332
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
333
+ </button>
334
+ <button
335
+ type="button"
336
+ class="btn btn-tool"
337
+ title="Contacts"
338
+ data-lte-toggle="chat-pane"
339
+ >
340
+ <i class="bi bi-chat-text-fill"></i>
341
+ </button>
342
+ <button
343
+ type="button"
344
+ class="btn btn-tool"
345
+ data-lte-toggle="card-remove"
346
+ >
347
+ <i class="bi bi-x-lg"></i>
348
+ </button>
349
+ </div>
350
+ </div>
351
+ <!-- /.card-header -->
352
+ <div class="card-body">
353
+ <!-- Conversations are loaded here -->
354
+ <div class="direct-chat-messages">
355
+ <!-- Message. Default to the start -->
356
+ <div class="direct-chat-msg">
357
+ <div class="direct-chat-infos clearfix">
358
+ <span class="direct-chat-name float-start">
359
+ Alexander Pierce
360
+ </span>
361
+ <span class="direct-chat-timestamp float-end">
362
+ 23 Jan 2:00 pm
363
+ </span>
364
+ </div>
365
+ <!-- /.direct-chat-infos -->
366
+ <img
367
+ class="direct-chat-img"
368
+ src={path + "/assets/img/user1-128x128.jpg"}
369
+ alt="message user image"
370
+ />
371
+ <!-- /.direct-chat-img -->
372
+ <div class="direct-chat-text">
373
+ Is this template really for free? That's
374
+ unbelievable!
375
+ </div>
376
+ <!-- /.direct-chat-text -->
377
+ </div>
378
+ <!-- /.direct-chat-msg -->
379
+
380
+ <!-- Message to the end -->
381
+ <div class="direct-chat-msg end">
382
+ <div class="direct-chat-infos clearfix">
383
+ <span class="direct-chat-name float-end">
384
+ Sarah Bullock
385
+ </span>
386
+ <span class="direct-chat-timestamp float-start">
387
+ 23 Jan 2:05 pm
388
+ </span>
389
+ </div>
390
+ <!-- /.direct-chat-infos -->
391
+ <img
392
+ class="direct-chat-img"
393
+ src={path + "/assets/img/user3-128x128.jpg"}
394
+ alt="message user image"
395
+ />
396
+ <!-- /.direct-chat-img -->
397
+ <div class="direct-chat-text">
398
+ You better believe it!
399
+ </div>
400
+ <!-- /.direct-chat-text -->
401
+ </div>
402
+ <!-- /.direct-chat-msg -->
403
+
404
+ <!-- Message. Default to the start -->
405
+ <div class="direct-chat-msg">
406
+ <div class="direct-chat-infos clearfix">
407
+ <span class="direct-chat-name float-start">
408
+ Alexander Pierce
409
+ </span>
410
+ <span class="direct-chat-timestamp float-end">
411
+ 23 Jan 5:37 pm
412
+ </span>
413
+ </div>
414
+ <!-- /.direct-chat-infos -->
415
+ <img
416
+ class="direct-chat-img"
417
+ src={path + "/assets/img/user1-128x128.jpg"}
418
+ alt="message user image"
419
+ />
420
+ <!-- /.direct-chat-img -->
421
+ <div class="direct-chat-text">
422
+ Working with AdminLTE on a great new app! Wanna
423
+ join?
424
+ </div>
425
+ <!-- /.direct-chat-text -->
426
+ </div>
427
+ <!-- /.direct-chat-msg -->
428
+
429
+ <!-- Message to the end -->
430
+ <div class="direct-chat-msg end">
431
+ <div class="direct-chat-infos clearfix">
432
+ <span class="direct-chat-name float-end">
433
+ Sarah Bullock
434
+ </span>
435
+ <span class="direct-chat-timestamp float-start">
436
+ 23 Jan 6:10 pm
437
+ </span>
438
+ </div>
439
+ <!-- /.direct-chat-infos -->
440
+ <img
441
+ class="direct-chat-img"
442
+ src={path + "/assets/img/user3-128x128.jpg"}
443
+ alt="message user image"
444
+ />
445
+ <!-- /.direct-chat-img -->
446
+ <div class="direct-chat-text">I would love to.</div>
447
+ <!-- /.direct-chat-text -->
448
+ </div>
449
+ <!-- /.direct-chat-msg -->
450
+ </div>
451
+ <!-- /.direct-chat-messages-->
452
+
453
+ <!-- Contacts are loaded here -->
454
+ <div class="direct-chat-contacts">
455
+ <ul class="contacts-list">
456
+ <li>
457
+ <a href="#">
458
+ <img
459
+ class="contacts-list-img"
460
+ src={path + "/assets/img/user1-128x128.jpg"}
461
+ alt="User Avatar"
462
+ />
463
+
464
+ <div class="contacts-list-info">
465
+ <span class="contacts-list-name">
466
+ Count Dracula
467
+ <small class="contacts-list-date float-end">
468
+ 2/28/2023
469
+ </small>
470
+ </span>
471
+ <span class="contacts-list-msg">
472
+ How have you been? I was...
473
+ </span>
474
+ </div>
475
+ <!-- /.contacts-list-info -->
476
+ </a>
477
+ </li>
478
+ <!-- End Contact Item -->
479
+ <li>
480
+ <a href="#">
481
+ <img
482
+ class="contacts-list-img"
483
+ src={path + "/assets/img/user7-128x128.jpg"}
484
+ alt="User Avatar"
485
+ />
486
+
487
+ <div class="contacts-list-info">
488
+ <span class="contacts-list-name">
489
+ Sarah Doe
490
+ <small class="contacts-list-date float-end">
491
+ 2/23/2023
492
+ </small>
493
+ </span>
494
+ <span class="contacts-list-msg">
495
+ I will be waiting for...
496
+ </span>
497
+ </div>
498
+ <!-- /.contacts-list-info -->
499
+ </a>
500
+ </li>
501
+ <!-- End Contact Item -->
502
+ <li>
503
+ <a href="#">
504
+ <img
505
+ class="contacts-list-img"
506
+ src={path + "/assets/img/user3-128x128.jpg"}
507
+ alt="User Avatar"
508
+ />
509
+
510
+ <div class="contacts-list-info">
511
+ <span class="contacts-list-name">
512
+ Nadia Jolie
513
+ <small class="contacts-list-date float-end">
514
+ 2/20/2023
515
+ </small>
516
+ </span>
517
+ <span class="contacts-list-msg">
518
+ I'll call you back at...
519
+ </span>
520
+ </div>
521
+ <!-- /.contacts-list-info -->
522
+ </a>
523
+ </li>
524
+ <!-- End Contact Item -->
525
+ <li>
526
+ <a href="#">
527
+ <img
528
+ class="contacts-list-img"
529
+ src={path + "/assets/img/user5-128x128.jpg"}
530
+ alt="User Avatar"
531
+ />
532
+
533
+ <div class="contacts-list-info">
534
+ <span class="contacts-list-name">
535
+ Nora S. Vans
536
+ <small class="contacts-list-date float-end">
537
+ 2/10/2023
538
+ </small>
539
+ </span>
540
+ <span class="contacts-list-msg">
541
+ Where is your new...
542
+ </span>
543
+ </div>
544
+ <!-- /.contacts-list-info -->
545
+ </a>
546
+ </li>
547
+ <!-- End Contact Item -->
548
+ <li>
549
+ <a href="#">
550
+ <img
551
+ class="contacts-list-img"
552
+ src={path + "/assets/img/user6-128x128.jpg"}
553
+ alt="User Avatar"
554
+ />
555
+
556
+ <div class="contacts-list-info">
557
+ <span class="contacts-list-name">
558
+ John K.
559
+ <small class="contacts-list-date float-end">
560
+ 1/27/2023
561
+ </small>
562
+ </span>
563
+ <span class="contacts-list-msg">
564
+ Can I take a look at...
565
+ </span>
566
+ </div>
567
+ <!-- /.contacts-list-info -->
568
+ </a>
569
+ </li>
570
+ <!-- End Contact Item -->
571
+ <li>
572
+ <a href="#">
573
+ <img
574
+ class="contacts-list-img"
575
+ src={path + "/assets/img/user8-128x128.jpg"}
576
+ alt="User Avatar"
577
+ />
578
+
579
+ <div class="contacts-list-info">
580
+ <span class="contacts-list-name">
581
+ Kenneth M.
582
+ <small class="contacts-list-date float-end">
583
+ 1/4/2023
584
+ </small>
585
+ </span>
586
+ <span class="contacts-list-msg">
587
+ Never mind I found...
588
+ </span>
589
+ </div>
590
+ <!-- /.contacts-list-info -->
591
+ </a>
592
+ </li>
593
+ <!-- End Contact Item -->
594
+ </ul>
595
+ <!-- /.contacts-list -->
596
+ </div>
597
+ <!-- /.direct-chat-pane -->
598
+ </div>
599
+ <!-- /.card-body -->
600
+ <div class="card-footer">
601
+ <form action="#" method="post">
602
+ <div class="input-group">
603
+ <input
604
+ type="text"
605
+ name="message"
606
+ placeholder="Type Message ..."
607
+ class="form-control"
608
+ />
609
+ <span class="input-group-append">
610
+ <button type="button" class="btn btn-warning">
611
+ Send
612
+ </button>
613
+ </span>
614
+ </div>
615
+ </form>
616
+ </div>
617
+ <!-- /.card-footer-->
618
+ </div>
619
+ <!-- /.direct-chat -->
620
+ </div>
621
+ <!-- /.col -->
622
+
623
+ <div class="col-md-6">
624
+ <!-- USERS LIST -->
625
+ <div class="card mb-4">
626
+ <div class="card-header">
627
+ <h3 class="card-title">Latest Members</h3>
628
+
629
+ <div class="card-tools">
630
+ <span class="badge text-bg-danger">
631
+ 8 New Members
632
+ </span>
633
+ <button
634
+ type="button"
635
+ class="btn btn-tool"
636
+ data-lte-toggle="card-collapse"
637
+ >
638
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
639
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
640
+ </button>
641
+ <button
642
+ type="button"
643
+ class="btn btn-tool"
644
+ data-lte-toggle="card-remove"
645
+ >
646
+ <i class="bi bi-x-lg"></i>
647
+ </button>
648
+ </div>
649
+ </div>
650
+ <!-- /.card-header -->
651
+ <div class="card-body p-0">
652
+ <div class="row text-center m-1">
653
+ <div class="col-3 p-2">
654
+ <img
655
+ class="img-fluid rounded-circle"
656
+ src={path + "/assets/img/user1-128x128.jpg"}
657
+ alt="User Image"
658
+ />
659
+ <a
660
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
661
+ href="#"
662
+ >
663
+ Alexander Pierce
664
+ </a>
665
+ <div class="fs-8">Today</div>
666
+ </div>
667
+ <div class="col-3 p-2">
668
+ <img
669
+ class="img-fluid rounded-circle"
670
+ src={path + "/assets/img/user1-128x128.jpg"}
671
+ alt="User Image"
672
+ />
673
+ <a
674
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
675
+ href="#"
676
+ >
677
+ Norman
678
+ </a>
679
+ <div class="fs-8">Yesterday</div>
680
+ </div>
681
+ <div class="col-3 p-2">
682
+ <img
683
+ class="img-fluid rounded-circle"
684
+ src={path + "/assets/img/user7-128x128.jpg"}
685
+ alt="User Image"
686
+ />
687
+ <a
688
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
689
+ href="#"
690
+ >
691
+ Jane
692
+ </a>
693
+ <div class="fs-8">12 Jan</div>
694
+ </div>
695
+ <div class="col-3 p-2">
696
+ <img
697
+ class="img-fluid rounded-circle"
698
+ src={path + "/assets/img/user6-128x128.jpg"}
699
+ alt="User Image"
700
+ />
701
+ <a
702
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
703
+ href="#"
704
+ >
705
+ John
706
+ </a>
707
+ <div class="fs-8">12 Jan</div>
708
+ </div>
709
+ <div class="col-3 p-2">
710
+ <img
711
+ class="img-fluid rounded-circle"
712
+ src={path + "/assets/img/user2-160x160.jpg"}
713
+ alt="User Image"
714
+ />
715
+ <a
716
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
717
+ href="#"
718
+ >
719
+ Alexander
720
+ </a>
721
+ <div class="fs-8">13 Jan</div>
722
+ </div>
723
+ <div class="col-3 p-2">
724
+ <img
725
+ class="img-fluid rounded-circle"
726
+ src={path + "/assets/img/user5-128x128.jpg"}
727
+ alt="User Image"
728
+ />
729
+ <a
730
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
731
+ href="#"
732
+ >
733
+ Sarah
734
+ </a>
735
+ <div class="fs-8">14 Jan</div>
736
+ </div>
737
+ <div class="col-3 p-2">
738
+ <img
739
+ class="img-fluid rounded-circle"
740
+ src={path + "/assets/img/user4-128x128.jpg"}
741
+ alt="User Image"
742
+ />
743
+ <a
744
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
745
+ href="#"
746
+ >
747
+ Nora
748
+ </a>
749
+ <div class="fs-8">15 Jan</div>
750
+ </div>
751
+ <div class="col-3 p-2">
752
+ <img
753
+ class="img-fluid rounded-circle"
754
+ src={path + "/assets/img/user3-128x128.jpg"}
755
+ alt="User Image"
756
+ />
757
+ <a
758
+ class="btn fw-bold fs-7 text-secondary text-truncate w-100 p-0"
759
+ href="#"
760
+ >
761
+ Nadia
762
+ </a>
763
+ <div class="fs-8">15 Jan</div>
764
+ </div>
765
+ </div>
766
+ <!-- /.users-list -->
767
+ </div>
768
+ <!-- /.card-body -->
769
+ <div class="card-footer text-center">
770
+ <a href="javascript:">View All Users</a>
771
+ </div>
772
+ <!-- /.card-footer -->
773
+ </div>
774
+ <!-- /.card -->
775
+ </div>
776
+ <!-- /.col -->
777
+ </div>
778
+ <!--end::Row-->
779
+
780
+ <!-- TABLE: LATEST ORDERS -->
781
+ <div class="card">
782
+ <div class="card-header">
783
+ <h3 class="card-title">Latest Orders</h3>
784
+
785
+ <div class="card-tools">
786
+ <button
787
+ type="button"
788
+ class="btn btn-tool"
789
+ data-lte-toggle="card-collapse"
790
+ >
791
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
792
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
793
+ </button>
794
+ <button
795
+ type="button"
796
+ class="btn btn-tool"
797
+ data-lte-toggle="card-remove"
798
+ >
799
+ <i class="bi bi-x-lg"></i>
800
+ </button>
801
+ </div>
802
+ </div>
803
+ <!-- /.card-header -->
804
+ <div class="card-body p-0">
805
+ <div class="table-responsive">
806
+ <table class="table m-0">
807
+ <thead>
808
+ <tr>
809
+ <th>Order ID</th>
810
+ <th>Item</th>
811
+ <th>Status</th>
812
+ <th>Popularity</th>
813
+ </tr>
814
+ </thead>
815
+ <tbody>
816
+ <tr>
817
+ <td>
818
+ <a href="pages/examples/invoice.html">OR9842</a>
819
+ </td>
820
+ <td>Call of Duty IV</td>
821
+ <td>
822
+ <span class="badge text-bg-success">
823
+ Shipped
824
+ </span>
825
+ </td>
826
+ <td>
827
+ <div
828
+ class="sparkbar"
829
+ data-color="#00a65a"
830
+ data-height="20"
831
+ >
832
+ 90,80,90,-70,61,-83,63
833
+ </div>
834
+ </td>
835
+ </tr>
836
+ <tr>
837
+ <td>
838
+ <a href="pages/examples/invoice.html">OR1848</a>
839
+ </td>
840
+ <td>Samsung Smart TV</td>
841
+ <td>
842
+ <span class="badge text-bg-warning">Pending</span>
843
+ </td>
844
+ <td>
845
+ <div
846
+ class="sparkbar"
847
+ data-color="#f39c12"
848
+ data-height="20"
849
+ >
850
+ 90,80,-90,70,61,-83,68
851
+ </div>
852
+ </td>
853
+ </tr>
854
+ <tr>
855
+ <td>
856
+ <a href="pages/examples/invoice.html">OR7429</a>
857
+ </td>
858
+ <td>iPhone 6 Plus</td>
859
+ <td>
860
+ <span class="badge text-bg-danger">
861
+ Delivered
862
+ </span>
863
+ </td>
864
+ <td>
865
+ <div
866
+ class="sparkbar"
867
+ data-color="#f56954"
868
+ data-height="20"
869
+ >
870
+ 90,-80,90,70,-61,83,63
871
+ </div>
872
+ </td>
873
+ </tr>
874
+ <tr>
875
+ <td>
876
+ <a href="pages/examples/invoice.html">OR7429</a>
877
+ </td>
878
+ <td>Samsung Smart TV</td>
879
+ <td>
880
+ <span class="badge text-bg-info">Processing</span>
881
+ </td>
882
+ <td>
883
+ <div
884
+ class="sparkbar"
885
+ data-color="#00c0ef"
886
+ data-height="20"
887
+ >
888
+ 90,80,-90,70,-61,83,63
889
+ </div>
890
+ </td>
891
+ </tr>
892
+ <tr>
893
+ <td>
894
+ <a href="pages/examples/invoice.html">OR1848</a>
895
+ </td>
896
+ <td>Samsung Smart TV</td>
897
+ <td>
898
+ <span class="badge text-bg-warning">Pending</span>
899
+ </td>
900
+ <td>
901
+ <div
902
+ class="sparkbar"
903
+ data-color="#f39c12"
904
+ data-height="20"
905
+ >
906
+ 90,80,-90,70,61,-83,68
907
+ </div>
908
+ </td>
909
+ </tr>
910
+ <tr>
911
+ <td>
912
+ <a href="pages/examples/invoice.html">OR7429</a>
913
+ </td>
914
+ <td>iPhone 6 Plus</td>
915
+ <td>
916
+ <span class="badge text-bg-danger">
917
+ Delivered
918
+ </span>
919
+ </td>
920
+ <td>
921
+ <div
922
+ class="sparkbar"
923
+ data-color="#f56954"
924
+ data-height="20"
925
+ >
926
+ 90,-80,90,70,-61,83,63
927
+ </div>
928
+ </td>
929
+ </tr>
930
+ <tr>
931
+ <td>
932
+ <a href="pages/examples/invoice.html">OR9842</a>
933
+ </td>
934
+ <td>Call of Duty IV</td>
935
+ <td>
936
+ <span class="badge text-bg-success">Shipped</span>
937
+ </td>
938
+ <td>
939
+ <div
940
+ class="sparkbar"
941
+ data-color="#00a65a"
942
+ data-height="20"
943
+ >
944
+ 90,80,90,-70,61,-83,63
945
+ </div>
946
+ </td>
947
+ </tr>
948
+ </tbody>
949
+ </table>
950
+ </div>
951
+ <!-- /.table-responsive -->
952
+ </div>
953
+ <!-- /.card-body -->
954
+ <div class="card-footer clearfix">
955
+ <a
956
+ href="javascript:void(0)"
957
+ class="btn btn-sm btn-primary float-start"
958
+ >
959
+ Place New Order
960
+ </a>
961
+ <a
962
+ href="javascript:void(0)"
963
+ class="btn btn-sm btn-secondary float-end"
964
+ >
965
+ View All Orders
966
+ </a>
967
+ </div>
968
+ <!-- /.card-footer -->
969
+ </div>
970
+ <!-- /.card -->
971
+ </div>
972
+ <!-- /.col -->
973
+
974
+ <div class="col-md-4">
975
+ <!-- Info Boxes Style 2 -->
976
+ <div class="info-box mb-3 text-bg-warning">
977
+ <span class="info-box-icon">
978
+ <i class="bi bi-tag-fill"></i>
979
+ </span>
980
+
981
+ <div class="info-box-content">
982
+ <span class="info-box-text">Inventory</span>
983
+ <span class="info-box-number">5,200</span>
984
+ </div>
985
+ <!-- /.info-box-content -->
986
+ </div>
987
+ <!-- /.info-box -->
988
+ <div class="info-box mb-3 text-bg-success">
989
+ <span class="info-box-icon">
990
+ <i class="bi bi-heart-fill"></i>
991
+ </span>
992
+
993
+ <div class="info-box-content">
994
+ <span class="info-box-text">Mentions</span>
995
+ <span class="info-box-number">92,050</span>
996
+ </div>
997
+ <!-- /.info-box-content -->
998
+ </div>
999
+ <!-- /.info-box -->
1000
+ <div class="info-box mb-3 text-bg-danger">
1001
+ <span class="info-box-icon">
1002
+ <i class="bi bi-cloud-download"></i>
1003
+ </span>
1004
+
1005
+ <div class="info-box-content">
1006
+ <span class="info-box-text">Downloads</span>
1007
+ <span class="info-box-number">114,381</span>
1008
+ </div>
1009
+ <!-- /.info-box-content -->
1010
+ </div>
1011
+ <!-- /.info-box -->
1012
+ <div class="info-box mb-3 text-bg-info">
1013
+ <span class="info-box-icon">
1014
+ <i class="bi bi-chat-fill"></i>
1015
+ </span>
1016
+
1017
+ <div class="info-box-content">
1018
+ <span class="info-box-text">Direct Messages</span>
1019
+ <span class="info-box-number">163,921</span>
1020
+ </div>
1021
+ <!-- /.info-box-content -->
1022
+ </div>
1023
+ <!-- /.info-box -->
1024
+
1025
+ <div class="card mb-4">
1026
+ <div class="card-header">
1027
+ <h3 class="card-title">Browser Usage</h3>
1028
+
1029
+ <div class="card-tools">
1030
+ <button
1031
+ type="button"
1032
+ class="btn btn-tool"
1033
+ data-lte-toggle="card-collapse"
1034
+ >
1035
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
1036
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
1037
+ </button>
1038
+ <button
1039
+ type="button"
1040
+ class="btn btn-tool"
1041
+ data-lte-toggle="card-remove"
1042
+ >
1043
+ <i class="bi bi-x-lg"></i>
1044
+ </button>
1045
+ </div>
1046
+ </div>
1047
+ <!-- /.card-header -->
1048
+ <div class="card-body">
1049
+ <!--begin::Row-->
1050
+ <div class="row">
1051
+ <div class="col-12">
1052
+ <div id="pie-chart"></div>
1053
+ </div>
1054
+ <!-- /.col -->
1055
+ </div>
1056
+ <!--end::Row-->
1057
+ </div>
1058
+ <!-- /.card-body -->
1059
+ <div class="card-footer p-0">
1060
+ <ul class="nav nav-pills flex-column">
1061
+ <li class="nav-item">
1062
+ <a href="#" class="nav-link">
1063
+ United States of America
1064
+ <span class="float-end text-danger">
1065
+ <i class="bi bi-arrow-down fs-7"></i>
1066
+ 12%
1067
+ </span>
1068
+ </a>
1069
+ </li>
1070
+ <li class="nav-item">
1071
+ <a href="#" class="nav-link">
1072
+ India
1073
+ <span class="float-end text-success">
1074
+ <i class="bi bi-arrow-up fs-7"></i> 4%
1075
+ </span>
1076
+ </a>
1077
+ </li>
1078
+ <li class="nav-item">
1079
+ <a href="#" class="nav-link">
1080
+ China
1081
+ <span class="float-end text-info">
1082
+ <i class="bi bi-arrow-left fs-7"></i> 0%
1083
+ </span>
1084
+ </a>
1085
+ </li>
1086
+ </ul>
1087
+ </div>
1088
+ <!-- /.footer -->
1089
+ </div>
1090
+ <!-- /.card -->
1091
+
1092
+ <!-- PRODUCT LIST -->
1093
+ <div class="card">
1094
+ <div class="card-header">
1095
+ <h3 class="card-title">Recently Added Products</h3>
1096
+
1097
+ <div class="card-tools">
1098
+ <button
1099
+ type="button"
1100
+ class="btn btn-tool"
1101
+ data-lte-toggle="card-collapse"
1102
+ >
1103
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
1104
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
1105
+ </button>
1106
+ <button
1107
+ type="button"
1108
+ class="btn btn-tool"
1109
+ data-lte-toggle="card-remove"
1110
+ >
1111
+ <i class="bi bi-x-lg"></i>
1112
+ </button>
1113
+ </div>
1114
+ </div>
1115
+ <!-- /.card-header -->
1116
+ <div class="card-body p-0">
1117
+ <div class="px-2">
1118
+ <div class="d-flex border-top py-2 px-1">
1119
+ <div class="col-2">
1120
+ <img
1121
+ src={path + "/assets/img/default-150x150.png"}
1122
+ alt="Product Image"
1123
+ class="img-size-50"
1124
+ />
1125
+ </div>
1126
+ <div class="col-10">
1127
+ <a href="javascript:void(0)" class="fw-bold">
1128
+ Samsung TV
1129
+ <span class="badge text-bg-warning float-end">
1130
+ $1800
1131
+ </span>
1132
+ </a>
1133
+ <div class="text-truncate">
1134
+ Samsung 32" 1080p 60Hz LED Smart HDTV.
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+ <!-- /.item -->
1139
+ <div class="d-flex border-top py-2 px-1">
1140
+ <div class="col-2">
1141
+ <img
1142
+ src={path + "/assets/img/default-150x150.png"}
1143
+ alt="Product Image"
1144
+ class="img-size-50"
1145
+ />
1146
+ </div>
1147
+ <div class="col-10">
1148
+ <a href="javascript:void(0)" class="fw-bold">
1149
+ Bicycle
1150
+ <span class="badge text-bg-info float-end">
1151
+ $700
1152
+ </span>
1153
+ </a>
1154
+ <div class="text-truncate">
1155
+ 26" Mongoose Dolomite Men's 7-speed, Navy Blue.
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+ <!-- /.item -->
1160
+ <div class="d-flex border-top py-2 px-1">
1161
+ <div class="col-2">
1162
+ <img
1163
+ src={path + "/assets/img/default-150x150.png"}
1164
+ alt="Product Image"
1165
+ class="img-size-50"
1166
+ />
1167
+ </div>
1168
+ <div class="col-10">
1169
+ <a href="javascript:void(0)" class="fw-bold">
1170
+ Xbox One
1171
+ <span class="badge text-bg-danger float-end">
1172
+ $350
1173
+ </span>
1174
+ </a>
1175
+ <div class="text-truncate">
1176
+ Xbox One Console Bundle with Halo Master Chief
1177
+ Collection.
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ <!-- /.item -->
1182
+ <div class="d-flex border-top py-2 px-1">
1183
+ <div class="col-2">
1184
+ <img
1185
+ src={path + "/assets/img/default-150x150.png"}
1186
+ alt="Product Image"
1187
+ class="img-size-50"
1188
+ />
1189
+ </div>
1190
+ <div class="col-10">
1191
+ <a href="javascript:void(0)" class="fw-bold">
1192
+ PlayStation 4
1193
+ <span class="badge text-bg-success float-end">
1194
+ $399
1195
+ </span>
1196
+ </a>
1197
+ <div class="text-truncate">
1198
+ PlayStation 4 500GB Console (PS4)
1199
+ </div>
1200
+ </div>
1201
+ </div>
1202
+ <!-- /.item -->
1203
+ </div>
1204
+ </div>
1205
+ <!-- /.card-body -->
1206
+ <div class="card-footer text-center">
1207
+ <a href="javascript:void(0)" class="uppercase">
1208
+ View All Products
1209
+ </a>
1210
+ </div>
1211
+ <!-- /.card-footer -->
1212
+ </div>
1213
+ <!-- /.card -->
1214
+ </div>
1215
+ <!-- /.col -->
1216
+ </div>
1217
+ <!--end::Row-->
1218
+ </div>
1219
+ <!--end::Container-->
1220
+ </div>
1221
+ <!--end::App Content-->
1222
+ </main>
1223
+ <!--end::App Main-->
1224
+ <Footer />
1225
+ </div>
1226
+ <!--end::App Wrapper-->
1227
+ <!--begin::Script-->
1228
+ <Scripts path={path} />
1229
+
1230
+ <!-- OPTIONAL SCRIPTS -->
1231
+
1232
+ <!-- apexcharts -->
1233
+ <script
1234
+ src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
1235
+ integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
1236
+ crossorigin="anonymous"
1237
+ ></script>
1238
+
1239
+ <script is:inline>
1240
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
1241
+ // IT'S ALL JUST JUNK FOR DEMO
1242
+ // ++++++++++++++++++++++++++++++++++++++++++
1243
+
1244
+ /* apexcharts
1245
+ * -------
1246
+ * Here we will create a few charts using apexcharts
1247
+ */
1248
+
1249
+ //-----------------------
1250
+ // - MONTHLY SALES CHART -
1251
+ //-----------------------
1252
+
1253
+ var sales_chart_options = {
1254
+ series: [
1255
+ {
1256
+ name: "Digital Goods",
1257
+ data: [28, 48, 40, 19, 86, 27, 90],
1258
+ },
1259
+ {
1260
+ name: "Electronics",
1261
+ data: [65, 59, 80, 81, 56, 55, 40],
1262
+ },
1263
+ ],
1264
+ chart: {
1265
+ height: 180,
1266
+ type: "area",
1267
+ toolbar: {
1268
+ show: false,
1269
+ },
1270
+ },
1271
+ legend: {
1272
+ show: false,
1273
+ },
1274
+ colors: ["#0d6efd", "#20c997"],
1275
+ dataLabels: {
1276
+ enabled: false,
1277
+ },
1278
+ stroke: {
1279
+ curve: "smooth",
1280
+ },
1281
+ xaxis: {
1282
+ type: "datetime",
1283
+ categories: [
1284
+ "2023-01-01",
1285
+ "2023-02-01",
1286
+ "2023-03-01",
1287
+ "2023-04-01",
1288
+ "2023-05-01",
1289
+ "2023-06-01",
1290
+ "2023-07-01",
1291
+ ],
1292
+ },
1293
+ tooltip: {
1294
+ x: {
1295
+ format: "MMMM yyyy",
1296
+ },
1297
+ },
1298
+ };
1299
+
1300
+ var sales_chart = new ApexCharts(
1301
+ document.querySelector("#sales-chart"),
1302
+ sales_chart_options
1303
+ );
1304
+ sales_chart.render();
1305
+
1306
+ //---------------------------
1307
+ // - END MONTHLY SALES CHART -
1308
+ //---------------------------
1309
+
1310
+ //-------------
1311
+ // - PIE CHART -
1312
+ //-------------
1313
+
1314
+ var pie_chart_options = {
1315
+ series: [700, 500, 400, 600, 300, 100],
1316
+ chart: {
1317
+ type: "donut",
1318
+ },
1319
+ labels: ["Chrome", "Edge", "FireFox", "Safari", "Opera", "IE"],
1320
+ dataLabels: {
1321
+ enabled: false,
1322
+ },
1323
+ colors: [
1324
+ "#0d6efd",
1325
+ "#20c997",
1326
+ "#ffc107",
1327
+ "#d63384",
1328
+ "#6f42c1",
1329
+ "#adb5bd",
1330
+ ],
1331
+ };
1332
+
1333
+ var pie_chart = new ApexCharts(
1334
+ document.querySelector("#pie-chart"),
1335
+ pie_chart_options
1336
+ );
1337
+ pie_chart.render();
1338
+
1339
+ //-----------------
1340
+ // - END PIE CHART -
1341
+ //-----------------
1342
+ </script>
1343
+ <!--end::Script-->
1344
+ </body><!--end::Body-->
1345
+ </html>