admin-lte 4.0.0-alpha3 → 4.0.0-beta2

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 (186) hide show
  1. package/.astro/settings.json +5 -0
  2. package/README.md +6 -1
  3. package/dist/css/adminlte.css +238 -226
  4. package/dist/css/adminlte.css.map +1 -1
  5. package/dist/css/adminlte.min.css +2 -2
  6. package/dist/css/adminlte.min.css.map +1 -1
  7. package/dist/css/adminlte.rtl.css +245 -224
  8. package/dist/css/adminlte.rtl.css.map +1 -1
  9. package/dist/css/adminlte.rtl.min.css +2 -2
  10. package/dist/css/adminlte.rtl.min.css.map +1 -1
  11. package/dist/js/adminlte.js +139 -37
  12. package/dist/js/adminlte.js.map +1 -1
  13. package/dist/js/adminlte.min.js +3 -3
  14. package/dist/js/adminlte.min.js.map +1 -1
  15. package/dist/pages/UI/general.html +901 -0
  16. package/dist/pages/UI/icons.html +452 -0
  17. package/dist/pages/UI/timeline.html +228 -599
  18. package/dist/pages/docs/browser-support.html +206 -509
  19. package/dist/pages/docs/color-mode.html +346 -685
  20. package/dist/pages/docs/components/main-header.html +435 -827
  21. package/dist/pages/docs/components/main-sidebar.html +308 -610
  22. package/dist/pages/docs/faq.html +194 -498
  23. package/dist/pages/docs/how-to-contribute.html +196 -499
  24. package/dist/pages/docs/introduction.html +215 -513
  25. package/dist/pages/docs/javascript/treeview.html +204 -507
  26. package/dist/pages/docs/layout.html +194 -499
  27. package/dist/pages/docs/license.html +194 -498
  28. package/dist/pages/examples/lockscreen.html +21 -59
  29. package/dist/pages/examples/login-v2.html +35 -95
  30. package/dist/pages/examples/login.html +33 -89
  31. package/dist/pages/examples/register-v2.html +37 -102
  32. package/dist/pages/examples/register.html +34 -92
  33. package/dist/pages/forms/general.html +286 -766
  34. package/dist/pages/generate/theme.html +412 -0
  35. package/dist/pages/index.html +310 -807
  36. package/dist/pages/index2.html +502 -1189
  37. package/dist/pages/index3.html +250 -663
  38. package/dist/pages/layout/collapsed-sidebar.html +201 -520
  39. package/dist/pages/layout/fixed-sidebar.html +201 -521
  40. package/dist/pages/layout/layout-custom-area.html +467 -0
  41. package/dist/pages/layout/layout-rtl.html +201 -520
  42. package/dist/pages/layout/logo-switch.html +111 -310
  43. package/dist/pages/layout/sidebar-mini.html +201 -520
  44. package/dist/pages/layout/unfixed-sidebar.html +200 -518
  45. package/dist/pages/tables/simple.html +268 -651
  46. package/dist/pages/widgets/cards.html +263 -705
  47. package/dist/pages/widgets/info-box.html +285 -788
  48. package/dist/pages/widgets/small-box.html +217 -548
  49. package/package.json +34 -33
  50. package/src/scss/_app-content.scss +0 -49
  51. package/src/scss/_app-main.scss +25 -1
  52. package/src/scss/_app-sidebar.scss +3 -8
  53. package/src/scss/_bootstrap-variables.scss +26 -22
  54. package/src/scss/_callouts.scss +6 -0
  55. package/src/scss/_cards.scss +1 -0
  56. package/src/scss/_compact-mode.scss +0 -26
  57. package/src/scss/_direct-chat.scss +5 -0
  58. package/src/scss/_dropdown.scss +1 -0
  59. package/src/scss/_info-box.scss +2 -10
  60. package/src/scss/_timeline.scss +1 -0
  61. package/src/scss/_toasts.scss +33 -0
  62. package/src/scss/_variables.scss +29 -11
  63. package/src/scss/adminlte.scss +1 -2
  64. package/src/scss/pages/_lockscreen.scss +1 -0
  65. package/src/scss/pages/_login_and_register.scss +1 -0
  66. package/src/scss/parts/_extra-components.scss +1 -0
  67. package/src/ts/adminlte.ts +3 -1
  68. package/src/ts/card-widget.ts +3 -2
  69. package/src/ts/direct-chat.ts +3 -2
  70. package/src/ts/fullscreen.ts +110 -0
  71. package/src/ts/layout.ts +3 -2
  72. package/src/ts/push-menu.ts +4 -3
  73. package/src/ts/treeview.ts +20 -3
  74. package/src/ts/util/index.ts +1 -1
  75. package/.bundlewatch.config.json +0 -28
  76. package/.cache/.eslintcache +0 -1
  77. package/.cache/.stylelintcache +0 -1
  78. package/.editorconfig +0 -14
  79. package/.eslintignore +0 -7
  80. package/.eslintrc.json +0 -120
  81. package/.gitattributes +0 -6
  82. package/.gitpod.yml +0 -6
  83. package/.idea/AdminLTE.iml +0 -16
  84. package/.idea/codeStyles/Project.xml +0 -53
  85. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  86. package/.idea/dbnavigator.xml +0 -421
  87. package/.idea/git_toolbox_prj.xml +0 -15
  88. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  89. package/.idea/jsLibraryMappings.xml +0 -6
  90. package/.idea/jsLinters/eslint.xml +0 -6
  91. package/.idea/modules.xml +0 -8
  92. package/.idea/php.xml +0 -28
  93. package/.idea/vcs.xml +0 -12
  94. package/.stylelintignore +0 -8
  95. package/.stylelintrc.json +0 -47
  96. package/composer.json +0 -25
  97. package/dist/pages/layout/fixed-complete.html +0 -867
  98. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  99. package/src/assets/img/AdminLTELogo.png +0 -0
  100. package/src/assets/img/avatar.png +0 -0
  101. package/src/assets/img/avatar2.png +0 -0
  102. package/src/assets/img/avatar3.png +0 -0
  103. package/src/assets/img/avatar4.png +0 -0
  104. package/src/assets/img/avatar5.png +0 -0
  105. package/src/assets/img/boxed-bg.jpg +0 -0
  106. package/src/assets/img/boxed-bg.png +0 -0
  107. package/src/assets/img/credit/american-express.png +0 -0
  108. package/src/assets/img/credit/cirrus.png +0 -0
  109. package/src/assets/img/credit/mastercard.png +0 -0
  110. package/src/assets/img/credit/paypal.png +0 -0
  111. package/src/assets/img/credit/paypal2.png +0 -0
  112. package/src/assets/img/credit/visa.png +0 -0
  113. package/src/assets/img/default-150x150.png +0 -0
  114. package/src/assets/img/icons.png +0 -0
  115. package/src/assets/img/photo1.png +0 -0
  116. package/src/assets/img/photo2.png +0 -0
  117. package/src/assets/img/photo3.jpg +0 -0
  118. package/src/assets/img/photo4.jpg +0 -0
  119. package/src/assets/img/prod-1.jpg +0 -0
  120. package/src/assets/img/prod-2.jpg +0 -0
  121. package/src/assets/img/prod-3.jpg +0 -0
  122. package/src/assets/img/prod-4.jpg +0 -0
  123. package/src/assets/img/prod-5.jpg +0 -0
  124. package/src/assets/img/user1-128x128.jpg +0 -0
  125. package/src/assets/img/user2-160x160.jpg +0 -0
  126. package/src/assets/img/user3-128x128.jpg +0 -0
  127. package/src/assets/img/user4-128x128.jpg +0 -0
  128. package/src/assets/img/user5-128x128.jpg +0 -0
  129. package/src/assets/img/user6-128x128.jpg +0 -0
  130. package/src/assets/img/user7-128x128.jpg +0 -0
  131. package/src/assets/img/user8-128x128.jpg +0 -0
  132. package/src/config/assets.config.mjs +0 -8
  133. package/src/config/astro.config.mjs +0 -19
  134. package/src/config/postcss.config.mjs +0 -15
  135. package/src/config/rollup.config.js +0 -20
  136. package/src/html/.eslintrc.json +0 -24
  137. package/src/html/.prettierrc.js +0 -11
  138. package/src/html/.tsconfig.json +0 -4
  139. package/src/html/components/_head.astro +0 -47
  140. package/src/html/components/_scripts.astro +0 -51
  141. package/src/html/components/dashboard/_footer.astro +0 -18
  142. package/src/html/components/dashboard/_sidenav.astro +0 -553
  143. package/src/html/components/dashboard/_topbar.astro +0 -213
  144. package/src/html/components/docs/browser-support.mdx +0 -23
  145. package/src/html/components/docs/color-mode.mdx +0 -169
  146. package/src/html/components/docs/components/main-header.mdx +0 -198
  147. package/src/html/components/docs/components/main-sidebar.mdx +0 -129
  148. package/src/html/components/docs/faq.mdx +0 -11
  149. package/src/html/components/docs/how-to-contribute.mdx +0 -34
  150. package/src/html/components/docs/introduction.mdx +0 -60
  151. package/src/html/components/docs/license.mdx +0 -9
  152. package/src/html/components/javascript/treeview.mdx +0 -39
  153. package/src/html/env.d.ts +0 -1
  154. package/src/html/pages/UI/timeline.astro +0 -221
  155. package/src/html/pages/docs/browser-support.astro +0 -71
  156. package/src/html/pages/docs/color-mode.astro +0 -271
  157. package/src/html/pages/docs/components/main-header.astro +0 -319
  158. package/src/html/pages/docs/components/main-sidebar.astro +0 -71
  159. package/src/html/pages/docs/faq.astro +0 -71
  160. package/src/html/pages/docs/how-to-contribute.astro +0 -71
  161. package/src/html/pages/docs/introduction.astro +0 -71
  162. package/src/html/pages/docs/javascript/treeview.astro +0 -71
  163. package/src/html/pages/docs/layout.astro +0 -120
  164. package/src/html/pages/docs/license.astro +0 -71
  165. package/src/html/pages/examples/lockscreen.astro +0 -63
  166. package/src/html/pages/examples/login-v2.astro +0 -109
  167. package/src/html/pages/examples/login.astro +0 -99
  168. package/src/html/pages/examples/register-v2.astro +0 -116
  169. package/src/html/pages/examples/register.astro +0 -102
  170. package/src/html/pages/forms/general.astro +0 -624
  171. package/src/html/pages/index.astro +0 -790
  172. package/src/html/pages/index2.astro +0 -1345
  173. package/src/html/pages/index3.astro +0 -513
  174. package/src/html/pages/layout/collapsed-sidebar.astro +0 -110
  175. package/src/html/pages/layout/fixed-complete.astro +0 -209
  176. package/src/html/pages/layout/fixed-sidebar.astro +0 -109
  177. package/src/html/pages/layout/layout-rtl.astro +0 -109
  178. package/src/html/pages/layout/logo-switch.astro +0 -212
  179. package/src/html/pages/layout/sidebar-mini.astro +0 -108
  180. package/src/html/pages/layout/unfixed-sidebar.astro +0 -107
  181. package/src/html/pages/tables/simple.astro +0 -472
  182. package/src/html/pages/widgets/cards.astro +0 -373
  183. package/src/html/pages/widgets/info-box.astro +0 -413
  184. package/src/html/pages/widgets/small-box.astro +0 -182
  185. package/src/utils/index.js +0 -28
  186. package/tsconfig.json +0 -31
package/src/html/pages/index2.astro DELETED
@@ -1,1345 +0,0 @@
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>