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