admin-lte 4.0.0-alpha2 → 4.0.0-alpha3

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