admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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