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/index3.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';
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
7
 
8
- const title = 'AdminLTE | Dashboard v3'
9
- const path = '../../dist'
10
- const mainPage = 'dashboard'
11
- const page = 'index3'
8
+ const title = "AdminLTE | Dashboard v3";
9
+ const path = "../../dist";
10
+ const mainPage = "dashboard";
11
+ const page = "index3";
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 v3</h3>
@@ -34,21 +45,27 @@ const page = 'index3'
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 v3</li>
48
+ <li class="breadcrumb-item active" aria-current="page">
49
+ Dashboard v3
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">
61
+ <!--begin::Row-->
45
62
  <div class="row">
46
63
  <div class="col-lg-6">
47
- <div class="card">
64
+ <div class="card mb-4">
48
65
  <div class="card-header border-0">
49
66
  <div class="d-flex justify-content-between">
50
67
  <h3 class="card-title">Online Store Visitors</h3>
51
- <a href="javascript:void(0);">View Report</a>
68
+ <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
52
69
  </div>
53
70
  </div>
54
71
  <div class="card-body">
@@ -59,7 +76,7 @@ const page = 'index3'
59
76
  </p>
60
77
  <p class="ms-auto d-flex flex-column text-end">
61
78
  <span class="text-success">
62
- <i class="fa-solid fa-arrow-up"></i> 12.5%
79
+ <i class="bi bi-arrow-up"></i> 12.5%
63
80
  </span>
64
81
  <span class="text-secondary">Since last week</span>
65
82
  </p>
@@ -72,117 +89,133 @@ const page = 'index3'
72
89
 
73
90
  <div class="d-flex flex-row justify-content-end">
74
91
  <span class="me-2">
75
- <i class="fa-solid fa-square text-primary"></i> This Week
92
+ <i class="bi bi-square-fill text-primary"></i> This Week
76
93
  </span>
77
94
 
78
95
  <span>
79
- <i class="fa-solid fa-square text-secondary"></i> Last Week
96
+ <i class="bi bi-square-fill text-secondary"></i> Last Week
80
97
  </span>
81
98
  </div>
82
99
  </div>
83
100
  </div>
84
101
  <!-- /.card -->
85
102
 
86
- <div class="card">
103
+ <div class="card mb-4">
87
104
  <div class="card-header border-0">
88
105
  <h3 class="card-title">Products</h3>
89
106
  <div class="card-tools">
90
107
  <a href="#" class="btn btn-tool btn-sm">
91
- <i class="fa-solid fa-download"></i>
108
+ <i class="bi bi-download"></i>
92
109
  </a>
93
110
  <a href="#" class="btn btn-tool btn-sm">
94
- <i class="fa-solid fa-bars"></i>
111
+ <i class="bi bi-list"></i>
95
112
  </a>
96
113
  </div>
97
114
  </div>
98
115
  <div class="card-body table-responsive p-0">
99
116
  <table class="table table-striped align-middle">
100
117
  <thead>
101
- <tr>
102
- <th>Product</th>
103
- <th>Price</th>
104
- <th>Sales</th>
105
- <th>More</th>
106
- </tr>
118
+ <tr>
119
+ <th>Product</th>
120
+ <th>Price</th>
121
+ <th>Sales</th>
122
+ <th>More</th>
123
+ </tr>
107
124
  </thead>
108
125
  <tbody>
109
- <tr>
110
- <td>
111
- <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
112
- Some Product
113
- </td>
114
- <td>$13 USD</td>
115
- <td>
116
- <small class="text-success me-1">
117
- <i class="fa-solid fa-arrow-up"></i>
118
- 12%
119
- </small>
120
- 12,000 Sold
121
- </td>
122
- <td>
123
- <a href="#" class="text-secondary">
124
- <i class="fa-solid fa-search"></i>
125
- </a>
126
- </td>
127
- </tr>
128
- <tr>
129
- <td>
130
- <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
131
- Another Product
132
- </td>
133
- <td>$29 USD</td>
134
- <td>
135
- <small class="text-warning me-1">
136
- <i class="fa-solid fa-arrow-down"></i>
137
- 0.5%
138
- </small>
139
- 123,234 Sold
140
- </td>
141
- <td>
142
- <a href="#" class="text-secondary">
143
- <i class="fa-solid fa-search"></i>
144
- </a>
145
- </td>
146
- </tr>
147
- <tr>
148
- <td>
149
- <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
150
- Amazing Product
151
- </td>
152
- <td>$1,230 USD</td>
153
- <td>
154
- <small class="text-danger me-1">
155
- <i class="fa-solid fa-arrow-down"></i>
156
- 3%
157
- </small>
158
- 198 Sold
159
- </td>
160
- <td>
161
- <a href="#" class="text-secondary">
162
- <i class="fa-solid fa-search"></i>
163
- </a>
164
- </td>
165
- </tr>
166
- <tr>
167
- <td>
168
- <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
169
- Perfect Item
170
- <span class="badge text-bg-danger">NEW</span>
171
- </td>
172
- <td>$199 USD</td>
173
- <td>
174
- <small class="text-success me-1">
175
- <i class="fa-solid fa-arrow-up"></i>
176
- 63%
177
- </small>
178
- 87 Sold
179
- </td>
180
- <td>
181
- <a href="#" class="text-secondary">
182
- <i class="fa-solid fa-search"></i>
183
- </a>
184
- </td>
185
- </tr>
126
+ <tr>
127
+ <td>
128
+ <img
129
+ src={path + "/assets/img/default-150x150.png"}
130
+ alt="Product 1"
131
+ class="rounded-circle img-size-32 me-2"
132
+ />
133
+ Some Product
134
+ </td>
135
+ <td>$13 USD</td>
136
+ <td>
137
+ <small class="text-success me-1">
138
+ <i class="bi bi-arrow-up"></i>
139
+ 12%
140
+ </small>
141
+ 12,000 Sold
142
+ </td>
143
+ <td>
144
+ <a href="#" class="text-secondary">
145
+ <i class="bi bi-search"></i>
146
+ </a>
147
+ </td>
148
+ </tr>
149
+ <tr>
150
+ <td>
151
+ <img
152
+ src={path + "/assets/img/default-150x150.png"}
153
+ alt="Product 1"
154
+ class="rounded-circle img-size-32 me-2"
155
+ />
156
+ Another Product
157
+ </td>
158
+ <td>$29 USD</td>
159
+ <td>
160
+ <small class="text-info me-1">
161
+ <i class="bi bi-arrow-down"></i>
162
+ 0.5%
163
+ </small>
164
+ 123,234 Sold
165
+ </td>
166
+ <td>
167
+ <a href="#" class="text-secondary">
168
+ <i class="bi bi-search"></i>
169
+ </a>
170
+ </td>
171
+ </tr>
172
+ <tr>
173
+ <td>
174
+ <img
175
+ src={path + "/assets/img/default-150x150.png"}
176
+ alt="Product 1"
177
+ class="rounded-circle img-size-32 me-2"
178
+ />
179
+ Amazing Product
180
+ </td>
181
+ <td>$1,230 USD</td>
182
+ <td>
183
+ <small class="text-danger me-1">
184
+ <i class="bi bi-arrow-down"></i>
185
+ 3%
186
+ </small>
187
+ 198 Sold
188
+ </td>
189
+ <td>
190
+ <a href="#" class="text-secondary">
191
+ <i class="bi bi-search"></i>
192
+ </a>
193
+ </td>
194
+ </tr>
195
+ <tr>
196
+ <td>
197
+ <img
198
+ src={path + "/assets/img/default-150x150.png"}
199
+ alt="Product 1"
200
+ class="rounded-circle img-size-32 me-2"
201
+ />
202
+ Perfect Item
203
+ <span class="badge text-bg-danger">NEW</span>
204
+ </td>
205
+ <td>$199 USD</td>
206
+ <td>
207
+ <small class="text-success me-1">
208
+ <i class="bi bi-arrow-up"></i>
209
+ 63%
210
+ </small>
211
+ 87 Sold
212
+ </td>
213
+ <td>
214
+ <a href="#" class="text-secondary">
215
+ <i class="bi bi-search"></i>
216
+ </a>
217
+ </td>
218
+ </tr>
186
219
  </tbody>
187
220
  </table>
188
221
  </div>
@@ -191,11 +224,11 @@ const page = 'index3'
191
224
  </div>
192
225
  <!-- /.col-md-6 -->
193
226
  <div class="col-lg-6">
194
- <div class="card">
227
+ <div class="card mb-4">
195
228
  <div class="card-header border-0">
196
229
  <div class="d-flex justify-content-between">
197
230
  <h3 class="card-title">Sales</h3>
198
- <a href="javascript:void(0);">View Report</a>
231
+ <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
199
232
  </div>
200
233
  </div>
201
234
  <div class="card-body">
@@ -206,7 +239,7 @@ const page = 'index3'
206
239
  </p>
207
240
  <p class="ms-auto d-flex flex-column text-end">
208
241
  <span class="text-success">
209
- <i class="fa-solid fa-arrow-up"></i> 33.1%
242
+ <i class="bi bi-arrow-up"></i> 33.1%
210
243
  </span>
211
244
  <span class="text-secondary">Since Past Year</span>
212
245
  </p>
@@ -219,11 +252,11 @@ const page = 'index3'
219
252
 
220
253
  <div class="d-flex flex-row justify-content-end">
221
254
  <span class="me-2">
222
- <i class="fa-solid fa-square text-primary"></i> This year
255
+ <i class="bi bi-square-fill text-primary"></i> This year
223
256
  </span>
224
257
 
225
258
  <span>
226
- <i class="fa-solid fa-square text-secondary"></i> Last year
259
+ <i class="bi bi-square-fill text-secondary"></i> Last year
227
260
  </span>
228
261
  </div>
229
262
  </div>
@@ -235,51 +268,94 @@ const page = 'index3'
235
268
  <h3 class="card-title">Online Store Overview</h3>
236
269
  <div class="card-tools">
237
270
  <a href="#" class="btn btn-sm btn-tool">
238
- <i class="fa-solid fa-download"></i>
271
+ <i class="bi bi-download"></i>
239
272
  </a>
240
273
  <a href="#" class="btn btn-sm btn-tool">
241
- <i class="fa-solid fa-bars"></i>
274
+ <i class="bi bi-list"></i>
242
275
  </a>
243
276
  </div>
244
277
  </div>
245
278
  <div class="card-body">
246
- <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
279
+ <div
280
+ class="d-flex justify-content-between align-items-center border-bottom mb-3"
281
+ >
247
282
  <p class="text-success fs-2">
248
- <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
249
- <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
283
+ <svg
284
+ height="32"
285
+ fill="none"
286
+ stroke="currentColor"
287
+ stroke-width="1.5"
288
+ viewBox="0 0 24 24"
289
+ xmlns="http://www.w3.org/2000/svg"
290
+ aria-hidden="true"
291
+ >
292
+ <path
293
+ stroke-linecap="round"
294
+ stroke-linejoin="round"
295
+ d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"
296
+ ></path>
250
297
  </svg>
251
298
  </p>
252
299
  <p class="d-flex flex-column text-end">
253
300
  <span class="fw-bold">
254
- <i class="ion ion-android-arrow-up text-success"></i> 12%
301
+ <i class="bi bi-graph-up-arrow text-success"></i> 12%
255
302
  </span>
256
303
  <span class="text-secondary">CONVERSION RATE</span>
257
304
  </p>
258
305
  </div>
259
306
  <!-- /.d-flex -->
260
- <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
261
- <p class="text-warning fs-2">
262
- <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
263
- <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
307
+ <div
308
+ class="d-flex justify-content-between align-items-center border-bottom mb-3"
309
+ >
310
+ <p class="text-info fs-2">
311
+ <svg
312
+ height="32"
313
+ fill="none"
314
+ stroke="currentColor"
315
+ stroke-width="1.5"
316
+ viewBox="0 0 24 24"
317
+ xmlns="http://www.w3.org/2000/svg"
318
+ aria-hidden="true"
319
+ >
320
+ <path
321
+ stroke-linecap="round"
322
+ stroke-linejoin="round"
323
+ d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
324
+ ></path>
264
325
  </svg>
265
326
  </p>
266
327
  <p class="d-flex flex-column text-end">
267
328
  <span class="fw-bold">
268
- <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
329
+ <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
269
330
  </span>
270
331
  <span class="text-secondary">SALES RATE</span>
271
332
  </p>
272
333
  </div>
273
334
  <!-- /.d-flex -->
274
- <div class="d-flex justify-content-between align-items-center mb-0">
335
+ <div
336
+ class="d-flex justify-content-between align-items-center mb-0"
337
+ >
275
338
  <p class="text-danger fs-2">
276
- <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
277
- <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
339
+ <svg
340
+ height="32"
341
+ fill="none"
342
+ stroke="currentColor"
343
+ stroke-width="1.5"
344
+ viewBox="0 0 24 24"
345
+ xmlns="http://www.w3.org/2000/svg"
346
+ aria-hidden="true"
347
+ >
348
+ <path
349
+ stroke-linecap="round"
350
+ stroke-linejoin="round"
351
+ d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
352
+ ></path>
278
353
  </svg>
279
354
  </p>
280
355
  <p class="d-flex flex-column text-end">
281
356
  <span class="fw-bold">
282
- <i class="ion ion-android-arrow-down text-danger"></i> 1%
357
+ <i class="bi bi-graph-down-arrow text-danger"></i>
358
+ 1%
283
359
  </span>
284
360
  <span class="text-secondary">REGISTRATION RATE</span>
285
361
  </p>
@@ -290,123 +366,148 @@ const page = 'index3'
290
366
  </div>
291
367
  <!-- /.col-md-6 -->
292
368
  </div>
293
- <!-- /.row -->
294
- </div><!-- /.container-fluid -->
369
+ <!--end::Row-->
370
+ </div>
371
+ <!--end::Container-->
295
372
  </div>
373
+ <!--end::App Content-->
296
374
  </main>
297
- <!-- /.app-content -->
298
-
299
- <Footer />
375
+ <!--end::App Main-->
376
+ <Footer />
300
377
  </div>
301
- <!-- ./app-wrapper -->
302
-
378
+ <!--end::App Wrapper-->
379
+ <!--begin::Script-->
303
380
  <Scripts path={path} />
304
381
 
305
382
  <!-- OPTIONAL SCRIPTS -->
306
383
 
307
384
  <!-- apexcharts -->
308
- <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
385
+ <script
386
+ src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
387
+ integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
388
+ crossorigin="anonymous"
389
+ ></script>
309
390
 
310
391
  <script is:inline>
311
392
  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
312
393
  // IT'S ALL JUST JUNK FOR DEMO
313
394
  // ++++++++++++++++++++++++++++++++++++++++++
314
395
 
315
- var visitors_chart_options = {
316
- series: [
396
+ const visitors_chart_options = {
397
+ series: [
317
398
  {
318
399
  name: "High - 2023",
319
- data: [100, 120, 170, 167, 180, 177, 160]
400
+ data: [100, 120, 170, 167, 180, 177, 160],
320
401
  },
321
402
  {
322
403
  name: "Low - 2023",
323
- data: [60, 80, 70, 67, 80, 77, 100]
324
- }
404
+ data: [60, 80, 70, 67, 80, 77, 100],
405
+ },
325
406
  ],
326
- chart: {
407
+ chart: {
327
408
  height: 200,
328
- type: 'line',
409
+ type: "line",
329
410
  toolbar: {
330
- show: false
331
- }
411
+ show: false,
412
+ },
332
413
  },
333
- colors: ['#0d6efd', '#adb5bd'],
414
+ colors: ["#0d6efd", "#adb5bd"],
334
415
  stroke: {
335
- curve: 'smooth'
416
+ curve: "smooth",
336
417
  },
337
418
  grid: {
338
- borderColor: '#e7e7e7',
419
+ borderColor: "#e7e7e7",
339
420
  row: {
340
- colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
341
- opacity: 0.5
421
+ colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
422
+ opacity: 0.5,
342
423
  },
343
424
  },
344
425
  legend: {
345
- show: false
426
+ show: false,
346
427
  },
347
428
  markers: {
348
- size: 1
429
+ size: 1,
349
430
  },
350
431
  xaxis: {
351
- categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
432
+ categories: ["22th", "23th", "24th", "25th", "26th", "27th", "28th"],
352
433
  },
353
434
  };
354
435
 
355
- var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
436
+ const visitors_chart = new ApexCharts(
437
+ document.querySelector("#visitors-chart"),
438
+ visitors_chart_options
439
+ );
356
440
  visitors_chart.render();
357
441
 
358
-
359
- var sales_chart_options = {
360
- series: [{
361
- name: 'Net Profit',
362
- data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
363
- }, {
364
- name: 'Revenue',
365
- data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
366
- }, {
367
- name: 'Free Cash Flow',
368
- data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
369
- }],
442
+ const sales_chart_options = {
443
+ series: [
444
+ {
445
+ name: "Net Profit",
446
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
447
+ },
448
+ {
449
+ name: "Revenue",
450
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
451
+ },
452
+ {
453
+ name: "Free Cash Flow",
454
+ data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
455
+ },
456
+ ],
370
457
  chart: {
371
- type: 'bar',
372
- height: 200
373
- },
374
- plotOptions: {
375
- bar: {
376
- horizontal: false,
377
- columnWidth: '55%',
378
- endingShape: 'rounded'
458
+ type: "bar",
459
+ height: 200,
460
+ },
461
+ plotOptions: {
462
+ bar: {
463
+ horizontal: false,
464
+ columnWidth: "55%",
465
+ endingShape: "rounded",
466
+ },
467
+ },
468
+ legend: {
469
+ show: false,
470
+ },
471
+ colors: ["#0d6efd", "#20c997", "#ffc107"],
472
+ dataLabels: {
473
+ enabled: false,
474
+ },
475
+ stroke: {
476
+ show: true,
477
+ width: 2,
478
+ colors: ["transparent"],
479
+ },
480
+ xaxis: {
481
+ categories: [
482
+ "Feb",
483
+ "Mar",
484
+ "Apr",
485
+ "May",
486
+ "Jun",
487
+ "Jul",
488
+ "Aug",
489
+ "Sep",
490
+ "Oct",
491
+ ],
492
+ },
493
+ fill: {
494
+ opacity: 1,
495
+ },
496
+ tooltip: {
497
+ y: {
498
+ formatter: function (val) {
499
+ return "$ " + val + " thousands";
500
+ },
501
+ },
379
502
  },
380
- },
381
- legend: {
382
- show: false
383
- },
384
- colors:['#0d6efd', '#20c997', '#ffc107'],
385
- dataLabels: {
386
- enabled: false
387
- },
388
- stroke: {
389
- show: true,
390
- width: 2,
391
- colors: ['transparent']
392
- },
393
- xaxis: {
394
- categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
395
- },
396
- fill: {
397
- opacity: 1
398
- },
399
- tooltip: {
400
- y: {
401
- formatter: function (val) {
402
- return "$ " + val + " thousands"
403
- }
404
- }
405
- }
406
503
  };
407
504
 
408
- var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
505
+ const sales_chart = new ApexCharts(
506
+ document.querySelector("#sales-chart"),
507
+ sales_chart_options
508
+ );
409
509
  sales_chart.render();
410
510
  </script>
411
- </body>
511
+ <!--end::Script-->
512
+ </body><!--end::Body-->
412
513
  </html>