admin-lte 4.0.0-alpha1 → 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 (200) hide show
  1. package/.bundlewatch.config.json +8 -8
  2. package/.cache/.eslintcache +1 -0
  3. package/.cache/.stylelintcache +1 -0
  4. package/.eslintignore +1 -0
  5. package/.eslintrc.json +16 -0
  6. package/.gitpod.yml +1 -1
  7. package/.idea/AdminLTE.iml +4 -0
  8. package/.idea/codeStyles/Project.xml +24 -0
  9. package/.idea/dbnavigator.xml +421 -0
  10. package/.idea/git_toolbox_prj.xml +15 -0
  11. package/.idea/jsLibraryMappings.xml +6 -0
  12. package/.idea/jsLinters/eslint.xml +6 -0
  13. package/.idea/vcs.xml +6 -0
  14. package/.stylelintrc.json +47 -0
  15. package/LICENSE +1 -1
  16. package/README.md +6 -7
  17. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  18. package/dist/css/adminlte.css +2716 -2710
  19. package/dist/css/adminlte.css.map +1 -1
  20. package/dist/css/adminlte.min.css +2 -2
  21. package/dist/css/adminlte.min.css.map +1 -1
  22. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2715 -2710
  23. package/dist/css/adminlte.rtl.css.map +1 -0
  24. package/dist/css/adminlte.rtl.min.css +7 -0
  25. package/dist/css/adminlte.rtl.min.css.map +1 -0
  26. package/dist/js/adminlte.js +204 -233
  27. package/dist/js/adminlte.js.map +1 -1
  28. package/dist/js/adminlte.min.js +6 -1
  29. package/dist/js/adminlte.min.js.map +1 -1
  30. package/dist/pages/UI/timeline.html +869 -0
  31. package/dist/pages/docs/browser-support.html +755 -0
  32. package/dist/pages/docs/color-mode.html +1067 -0
  33. package/dist/pages/docs/components/main-header.html +1137 -0
  34. package/dist/pages/docs/components/main-sidebar.html +858 -0
  35. package/dist/pages/docs/faq.html +743 -0
  36. package/dist/pages/docs/how-to-contribute.html +783 -0
  37. package/dist/pages/docs/introduction.html +767 -0
  38. package/dist/pages/docs/javascript/treeview.html +762 -0
  39. package/dist/pages/docs/layout.html +788 -0
  40. package/dist/pages/docs/license.html +746 -0
  41. package/dist/pages/examples/lockscreen.html +107 -0
  42. package/dist/pages/examples/login-v2.html +148 -0
  43. package/dist/pages/examples/login.html +128 -196
  44. package/dist/pages/examples/register-v2.html +155 -0
  45. package/dist/pages/examples/register.html +131 -199
  46. package/dist/pages/forms/general.html +1065 -652
  47. package/dist/pages/index.html +1320 -0
  48. package/dist/pages/index2.html +1776 -0
  49. package/dist/pages/index3.html +1111 -0
  50. package/dist/pages/layout/collapsed-sidebar.html +766 -0
  51. package/dist/pages/layout/fixed-complete.html +867 -0
  52. package/dist/pages/layout/fixed-sidebar.html +749 -654
  53. package/dist/pages/layout/layout-rtl.html +766 -0
  54. package/dist/pages/layout/logo-switch.html +433 -0
  55. package/dist/pages/layout/sidebar-mini.html +766 -0
  56. package/dist/pages/layout/unfixed-sidebar.html +747 -654
  57. package/dist/pages/tables/simple.html +1049 -946
  58. package/dist/pages/widgets/cards.html +974 -713
  59. package/dist/pages/widgets/info-box.html +1062 -966
  60. package/dist/pages/widgets/small-box.html +792 -694
  61. package/index.html +6 -15
  62. package/package.json +59 -39
  63. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  64. package/src/config/assets.config.mjs +8 -0
  65. package/src/config/astro.config.mjs +19 -0
  66. package/src/config/postcss.config.mjs +15 -0
  67. package/src/config/rollup.config.js +20 -0
  68. package/src/html/.eslintrc.json +24 -0
  69. package/src/html/.prettierrc.js +11 -0
  70. package/src/html/.tsconfig.json +4 -0
  71. package/src/html/components/_head.astro +47 -0
  72. package/src/html/components/_scripts.astro +51 -0
  73. package/src/html/components/dashboard/_footer.astro +18 -0
  74. package/src/html/components/dashboard/_sidenav.astro +553 -0
  75. package/src/html/components/dashboard/_topbar.astro +213 -0
  76. package/src/html/components/docs/browser-support.mdx +23 -0
  77. package/src/html/components/docs/color-mode.mdx +169 -0
  78. package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx} +67 -67
  79. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  80. package/src/html/components/docs/faq.mdx +11 -0
  81. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  82. package/src/html/components/docs/introduction.mdx +60 -0
  83. package/src/html/components/docs/license.mdx +9 -0
  84. package/src/html/components/javascript/treeview.mdx +39 -0
  85. package/src/html/env.d.ts +1 -0
  86. package/src/html/pages/UI/timeline.astro +221 -0
  87. package/src/html/pages/docs/browser-support.astro +71 -0
  88. package/src/html/pages/docs/color-mode.astro +271 -0
  89. package/src/html/pages/docs/components/main-header.astro +319 -0
  90. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  91. package/src/html/pages/docs/faq.astro +71 -0
  92. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  93. package/src/html/pages/docs/introduction.astro +71 -0
  94. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  95. package/src/html/pages/docs/layout.astro +120 -0
  96. package/src/html/pages/docs/license.astro +71 -0
  97. package/src/html/pages/examples/lockscreen.astro +63 -0
  98. package/src/html/pages/examples/login-v2.astro +109 -0
  99. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +40 -22
  100. package/src/html/pages/examples/register-v2.astro +116 -0
  101. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +42 -24
  102. package/src/html/pages/forms/general.astro +624 -0
  103. package/src/html/pages/index.astro +790 -0
  104. package/src/html/pages/index2.astro +1345 -0
  105. package/src/html/pages/index3.astro +513 -0
  106. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  107. package/src/html/pages/layout/fixed-complete.astro +209 -0
  108. package/src/html/pages/layout/fixed-sidebar.astro +109 -0
  109. package/src/html/pages/layout/layout-rtl.astro +109 -0
  110. package/src/html/pages/layout/logo-switch.astro +212 -0
  111. package/src/html/pages/layout/sidebar-mini.astro +108 -0
  112. package/src/html/pages/layout/unfixed-sidebar.astro +107 -0
  113. package/src/html/pages/tables/simple.astro +472 -0
  114. package/src/html/pages/widgets/cards.astro +373 -0
  115. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +110 -60
  116. package/src/html/pages/widgets/small-box.astro +182 -0
  117. package/src/scss/_app-content.scss +52 -0
  118. package/src/scss/_app-footer.scss +15 -0
  119. package/src/scss/_app-header.scss +26 -0
  120. package/src/scss/_app-main.scss +17 -0
  121. package/src/scss/_app-sidebar.scss +603 -0
  122. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  123. package/src/scss/_bootstrap-variables.scss +42 -27
  124. package/src/scss/_callouts.scss +34 -0
  125. package/src/scss/_cards.scss +54 -224
  126. package/src/scss/_compact-mode.scss +79 -0
  127. package/src/scss/_direct-chat.scss +15 -9
  128. package/src/scss/_docs.scss +4 -0
  129. package/src/scss/_dropdown.scss +7 -5
  130. package/src/scss/_info-box.scss +2 -6
  131. package/src/scss/_miscellaneous.scss +0 -455
  132. package/src/scss/_mixins.scss +0 -6
  133. package/src/scss/_root.scss +2 -58
  134. package/src/scss/_small-box.scss +15 -41
  135. package/src/scss/_table.scss +0 -50
  136. package/src/scss/_timeline.scss +120 -0
  137. package/src/scss/_variables-dark.scss +15 -8
  138. package/src/scss/_variables.scss +48 -136
  139. package/src/scss/adminlte.scss +1 -1
  140. package/src/scss/mixins/_animations.scss +0 -1
  141. package/src/scss/mixins/_scrollbar.scss +2 -2
  142. package/src/scss/pages/_lockscreen.scss +74 -0
  143. package/src/scss/pages/_login_and_register.scss +1 -5
  144. package/src/scss/parts/_core.scss +9 -15
  145. package/src/scss/parts/_extra-components.scss +1 -2
  146. package/src/scss/parts/_pages.scss +1 -0
  147. package/src/ts/adminlte.ts +0 -2
  148. package/src/ts/card-widget.ts +57 -66
  149. package/src/ts/direct-chat.ts +35 -10
  150. package/src/ts/layout.ts +8 -6
  151. package/src/ts/push-menu.ts +90 -158
  152. package/src/ts/treeview.ts +30 -30
  153. package/src/ts/util/index.ts +14 -12
  154. package/src/utils/index.js +28 -0
  155. package/tsconfig.json +11 -3
  156. package/.stylelintrc +0 -40
  157. package/CHECKLIST.md +0 -0
  158. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  159. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  160. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  161. package/dist/index.html +0 -1065
  162. package/dist/index2.html +0 -1629
  163. package/dist/index3.html +0 -1015
  164. package/gulpfile.js +0 -315
  165. package/src/index.html +0 -476
  166. package/src/index2.html +0 -968
  167. package/src/index3.html +0 -430
  168. package/src/pages/forms/general.html +0 -97
  169. package/src/pages/layout/fixed-sidebar.html +0 -87
  170. package/src/pages/layout/unfixed-sidebar.html +0 -87
  171. package/src/pages/tables/simple.html +0 -336
  172. package/src/pages/widgets/cards.html +0 -143
  173. package/src/pages/widgets/small-box.html +0 -124
  174. package/src/partials/_head.html +0 -31
  175. package/src/partials/_scripts.html +0 -95
  176. package/src/partials/dashboard/_footer.html +0 -9
  177. package/src/partials/dashboard/_sidenav.html +0 -244
  178. package/src/scss/_brand-container.scss +0 -72
  179. package/src/scss/_content-header.scss +0 -9
  180. package/src/scss/_content-wrapper.scss +0 -6
  181. package/src/scss/_content.scss +0 -3
  182. package/src/scss/_layout-fixed.scss +0 -43
  183. package/src/scss/_layout-mobile.scss +0 -22
  184. package/src/scss/_main-footer.scss +0 -28
  185. package/src/scss/_main-header.scss +0 -40
  186. package/src/scss/_main-sidebar.scss +0 -63
  187. package/src/scss/_nav-sidebar.scss +0 -66
  188. package/src/scss/_products.scss +0 -55
  189. package/src/scss/_sidebar-close.scss +0 -6
  190. package/src/scss/_sidebar-collapse.scss +0 -120
  191. package/src/scss/_sidebar-horizontal.scss +0 -67
  192. package/src/scss/_sidebar.scss +0 -11
  193. package/src/scss/_users-list.scss +0 -45
  194. package/src/scss/mixins/_brand-variant.scss +0 -9
  195. package/src/scss/mixins/_cards.scss +0 -53
  196. package/src/scss/mixins/_direct-chat.scss +0 -17
  197. package/src/scss/mixins/_header-variant.scss +0 -22
  198. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  199. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  200. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/src/html/pages/index.astro ADDED
@@ -0,0 +1,790 @@
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 v4 | Dashboard";
9
+ const path = "../../dist";
10
+ const mainPage = "dashboard";
11
+ const page = "index";
12
+ ---
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <!--begin::Head-->
17
+ <head>
18
+ <Head title={title} path={path} />
19
+
20
+ <!-- apexcharts -->
21
+ <link
22
+ rel="stylesheet"
23
+ href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
24
+ integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
25
+ crossorigin="anonymous"
26
+ />
27
+
28
+ <!-- jsvectormap -->
29
+ <link
30
+ rel="stylesheet"
31
+ href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css"
32
+ integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4="
33
+ crossorigin="anonymous"
34
+ />
35
+ </head>
36
+ <!--end::Head-->
37
+ <!--begin::Body-->
38
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
39
+ <!--begin::App Wrapper-->
40
+ <div class="app-wrapper">
41
+ <Topbar path={path} />
42
+ <Sidenav path={path} mainPage={mainPage} page={page} />
43
+ <!--begin::App Main-->
44
+ <main class="app-main">
45
+ <!--begin::App Content Header-->
46
+ <div class="app-content-header">
47
+ <!--begin::Container-->
48
+ <div class="container-fluid">
49
+ <!--begin::Row-->
50
+ <div class="row">
51
+ <div class="col-sm-6">
52
+ <h3 class="mb-0">Dashboard</h3>
53
+ </div>
54
+ <div class="col-sm-6">
55
+ <ol class="breadcrumb float-sm-end">
56
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
57
+ <li class="breadcrumb-item active" aria-current="page">
58
+ Dashboard
59
+ </li>
60
+ </ol>
61
+ </div>
62
+ </div>
63
+ <!--end::Row-->
64
+ </div>
65
+ <!--end::Container-->
66
+ </div>
67
+ <!--end::App Content Header-->
68
+ <!--begin::App Content-->
69
+ <div class="app-content">
70
+ <!--begin::Container-->
71
+ <div class="container-fluid">
72
+ <!--begin::Row-->
73
+ <div class="row">
74
+ <!--begin::Col-->
75
+ <div class="col-lg-3 col-6">
76
+ <!--begin::Small Box Widget 1-->
77
+ <div class="small-box text-bg-primary">
78
+ <div class="inner">
79
+ <h3>150</h3>
80
+
81
+ <p>New Orders</p>
82
+ </div>
83
+ <svg
84
+ class="small-box-icon"
85
+ fill="currentColor"
86
+ viewBox="0 0 24 24"
87
+ xmlns="http://www.w3.org/2000/svg"
88
+ aria-hidden="true"
89
+ >
90
+ <path
91
+ d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
92
+ ></path>
93
+ </svg>
94
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
95
+ More info <i class="bi bi-link-45deg"></i>
96
+ </a>
97
+ </div>
98
+ <!--end::Small Box Widget 1-->
99
+ </div>
100
+ <!--end::Col-->
101
+ <div class="col-lg-3 col-6">
102
+ <!--begin::Small Box Widget 2-->
103
+ <div class="small-box text-bg-success">
104
+ <div class="inner">
105
+ <h3>53<sup class="fs-5">%</sup></h3>
106
+
107
+ <p>Bounce Rate</p>
108
+ </div>
109
+ <svg
110
+ class="small-box-icon"
111
+ fill="currentColor"
112
+ viewBox="0 0 24 24"
113
+ xmlns="http://www.w3.org/2000/svg"
114
+ aria-hidden="true"
115
+ >
116
+ <path
117
+ d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
118
+ ></path>
119
+ </svg>
120
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
121
+ More info <i class="bi bi-link-45deg"></i>
122
+ </a>
123
+ </div>
124
+ <!--end::Small Box Widget 2-->
125
+ </div>
126
+ <!--end::Col-->
127
+ <div class="col-lg-3 col-6">
128
+ <!--begin::Small Box Widget 3-->
129
+ <div class="small-box text-bg-warning">
130
+ <div class="inner">
131
+ <h3>44</h3>
132
+
133
+ <p>User Registrations</p>
134
+ </div>
135
+ <svg
136
+ class="small-box-icon"
137
+ fill="currentColor"
138
+ viewBox="0 0 24 24"
139
+ xmlns="http://www.w3.org/2000/svg"
140
+ aria-hidden="true"
141
+ >
142
+ <path
143
+ d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
144
+ ></path>
145
+ </svg>
146
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
147
+ More info <i class="bi bi-link-45deg"></i>
148
+ </a>
149
+ </div>
150
+ <!--end::Small Box Widget 3-->
151
+ </div>
152
+ <!--end::Col-->
153
+ <div class="col-lg-3 col-6">
154
+ <!--begin::Small Box Widget 4-->
155
+ <div class="small-box text-bg-danger">
156
+ <div class="inner">
157
+ <h3>65</h3>
158
+
159
+ <p>Unique Visitors</p>
160
+ </div>
161
+ <svg
162
+ class="small-box-icon"
163
+ fill="currentColor"
164
+ viewBox="0 0 24 24"
165
+ xmlns="http://www.w3.org/2000/svg"
166
+ aria-hidden="true"
167
+ >
168
+ <path
169
+ clip-rule="evenodd"
170
+ fill-rule="evenodd"
171
+ d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
172
+ ></path>
173
+ <path
174
+ clip-rule="evenodd"
175
+ fill-rule="evenodd"
176
+ d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
177
+ ></path>
178
+ </svg>
179
+ <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
180
+ More info <i class="bi bi-link-45deg"></i>
181
+ </a>
182
+ </div>
183
+ <!--end::Small Box Widget 4-->
184
+ </div>
185
+ <!--end::Col-->
186
+ </div>
187
+ <!--end::Row-->
188
+ <!--begin::Row-->
189
+ <div class="row">
190
+ <!-- Start col -->
191
+ <div class="col-lg-7 connectedSortable">
192
+ <div class="card mb-4">
193
+ <div class="card-header">
194
+ <h3 class="card-title">Sales Value</h3>
195
+ </div>
196
+
197
+ <div class="card-body">
198
+ <div id="revenue-chart"></div>
199
+ </div>
200
+ </div>
201
+ <!-- /.card -->
202
+
203
+ <!-- DIRECT CHAT -->
204
+ <div class="card direct-chat direct-chat-primary">
205
+ <div class="card-header">
206
+ <h3 class="card-title">Direct Chat</h3>
207
+
208
+ <div class="card-tools">
209
+ <span
210
+ title="3 New Messages"
211
+ class="badge text-bg-primary"
212
+ >
213
+ 3
214
+ </span>
215
+ <button
216
+ type="button"
217
+ class="btn btn-tool"
218
+ data-lte-toggle="card-collapse"
219
+ >
220
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
221
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
222
+ </button>
223
+ <button
224
+ type="button"
225
+ class="btn btn-tool"
226
+ title="Contacts"
227
+ data-lte-toggle="chat-pane"
228
+ >
229
+ <i class="bi bi-chat-text-fill"></i>
230
+ </button>
231
+ <button
232
+ type="button"
233
+ class="btn btn-tool"
234
+ data-lte-toggle="card-remove"
235
+ >
236
+ <i class="bi bi-x-lg"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ <!-- /.card-header -->
241
+ <div class="card-body">
242
+ <!-- Conversations are loaded here -->
243
+ <div class="direct-chat-messages">
244
+ <!-- Message. Default to the start -->
245
+ <div class="direct-chat-msg">
246
+ <div class="direct-chat-infos clearfix">
247
+ <span class="direct-chat-name float-start">
248
+ Alexander Pierce
249
+ </span>
250
+ <span class="direct-chat-timestamp float-end">
251
+ 23 Jan 2:00 pm
252
+ </span>
253
+ </div>
254
+ <!-- /.direct-chat-infos -->
255
+ <img
256
+ class="direct-chat-img"
257
+ src={path + "/assets/img/user1-128x128.jpg"}
258
+ alt="message user image"
259
+ />
260
+ <!-- /.direct-chat-img -->
261
+ <div class="direct-chat-text">
262
+ Is this template really for free? That's unbelievable!
263
+ </div>
264
+ <!-- /.direct-chat-text -->
265
+ </div>
266
+ <!-- /.direct-chat-msg -->
267
+
268
+ <!-- Message to the end -->
269
+ <div class="direct-chat-msg end">
270
+ <div class="direct-chat-infos clearfix">
271
+ <span class="direct-chat-name float-end">
272
+ Sarah Bullock
273
+ </span>
274
+ <span class="direct-chat-timestamp float-start">
275
+ 23 Jan 2:05 pm
276
+ </span>
277
+ </div>
278
+ <!-- /.direct-chat-infos -->
279
+ <img
280
+ class="direct-chat-img"
281
+ src={path + "/assets/img/user3-128x128.jpg"}
282
+ alt="message user image"
283
+ />
284
+ <!-- /.direct-chat-img -->
285
+ <div class="direct-chat-text">
286
+ You better believe it!
287
+ </div>
288
+ <!-- /.direct-chat-text -->
289
+ </div>
290
+ <!-- /.direct-chat-msg -->
291
+
292
+ <!-- Message. Default to the start -->
293
+ <div class="direct-chat-msg">
294
+ <div class="direct-chat-infos clearfix">
295
+ <span class="direct-chat-name float-start">
296
+ Alexander Pierce
297
+ </span>
298
+ <span class="direct-chat-timestamp float-end">
299
+ 23 Jan 5:37 pm
300
+ </span>
301
+ </div>
302
+ <!-- /.direct-chat-infos -->
303
+ <img
304
+ class="direct-chat-img"
305
+ src={path + "/assets/img/user1-128x128.jpg"}
306
+ alt="message user image"
307
+ />
308
+ <!-- /.direct-chat-img -->
309
+ <div class="direct-chat-text">
310
+ Working with AdminLTE on a great new app! Wanna join?
311
+ </div>
312
+ <!-- /.direct-chat-text -->
313
+ </div>
314
+ <!-- /.direct-chat-msg -->
315
+
316
+ <!-- Message to the end -->
317
+ <div class="direct-chat-msg end">
318
+ <div class="direct-chat-infos clearfix">
319
+ <span class="direct-chat-name float-end">
320
+ Sarah Bullock
321
+ </span>
322
+ <span class="direct-chat-timestamp float-start">
323
+ 23 Jan 6:10 pm
324
+ </span>
325
+ </div>
326
+ <!-- /.direct-chat-infos -->
327
+ <img
328
+ class="direct-chat-img"
329
+ src={path + "/assets/img/user3-128x128.jpg"}
330
+ alt="message user image"
331
+ />
332
+ <!-- /.direct-chat-img -->
333
+ <div class="direct-chat-text">I would love to.</div>
334
+ <!-- /.direct-chat-text -->
335
+ </div>
336
+ <!-- /.direct-chat-msg -->
337
+ </div>
338
+ <!-- /.direct-chat-messages-->
339
+
340
+ <!-- Contacts are loaded here -->
341
+ <div class="direct-chat-contacts">
342
+ <ul class="contacts-list">
343
+ <li>
344
+ <a href="#">
345
+ <img
346
+ class="contacts-list-img"
347
+ src={path + "/assets/img/user1-128x128.jpg"}
348
+ alt="User Avatar"
349
+ />
350
+
351
+ <div class="contacts-list-info">
352
+ <span class="contacts-list-name">
353
+ Count Dracula
354
+ <small class="contacts-list-date float-end">
355
+ 2/28/2023
356
+ </small>
357
+ </span>
358
+ <span class="contacts-list-msg">
359
+ How have you been? I was...
360
+ </span>
361
+ </div>
362
+ <!-- /.contacts-list-info -->
363
+ </a>
364
+ </li>
365
+ <!-- End Contact Item -->
366
+ <li>
367
+ <a href="#">
368
+ <img
369
+ class="contacts-list-img"
370
+ src={path + "/assets/img/user7-128x128.jpg"}
371
+ alt="User Avatar"
372
+ />
373
+
374
+ <div class="contacts-list-info">
375
+ <span class="contacts-list-name">
376
+ Sarah Doe
377
+ <small class="contacts-list-date float-end">
378
+ 2/23/2023
379
+ </small>
380
+ </span>
381
+ <span class="contacts-list-msg">
382
+ I will be waiting for...
383
+ </span>
384
+ </div>
385
+ <!-- /.contacts-list-info -->
386
+ </a>
387
+ </li>
388
+ <!-- End Contact Item -->
389
+ <li>
390
+ <a href="#">
391
+ <img
392
+ class="contacts-list-img"
393
+ src={path + "/assets/img/user3-128x128.jpg"}
394
+ alt="User Avatar"
395
+ />
396
+
397
+ <div class="contacts-list-info">
398
+ <span class="contacts-list-name">
399
+ Nadia Jolie
400
+ <small class="contacts-list-date float-end">
401
+ 2/20/2023
402
+ </small>
403
+ </span>
404
+ <span class="contacts-list-msg">
405
+ I'll call you back at...
406
+ </span>
407
+ </div>
408
+ <!-- /.contacts-list-info -->
409
+ </a>
410
+ </li>
411
+ <!-- End Contact Item -->
412
+ <li>
413
+ <a href="#">
414
+ <img
415
+ class="contacts-list-img"
416
+ src={path + "/assets/img/user5-128x128.jpg"}
417
+ alt="User Avatar"
418
+ />
419
+
420
+ <div class="contacts-list-info">
421
+ <span class="contacts-list-name">
422
+ Nora S. Vans
423
+ <small class="contacts-list-date float-end">
424
+ 2/10/2023
425
+ </small>
426
+ </span>
427
+ <span class="contacts-list-msg">
428
+ Where is your new...
429
+ </span>
430
+ </div>
431
+ <!-- /.contacts-list-info -->
432
+ </a>
433
+ </li>
434
+ <!-- End Contact Item -->
435
+ <li>
436
+ <a href="#">
437
+ <img
438
+ class="contacts-list-img"
439
+ src={path + "/assets/img/user6-128x128.jpg"}
440
+ alt="User Avatar"
441
+ />
442
+
443
+ <div class="contacts-list-info">
444
+ <span class="contacts-list-name">
445
+ John K.
446
+ <small class="contacts-list-date float-end">
447
+ 1/27/2023
448
+ </small>
449
+ </span>
450
+ <span class="contacts-list-msg">
451
+ Can I take a look at...
452
+ </span>
453
+ </div>
454
+ <!-- /.contacts-list-info -->
455
+ </a>
456
+ </li>
457
+ <!-- End Contact Item -->
458
+ <li>
459
+ <a href="#">
460
+ <img
461
+ class="contacts-list-img"
462
+ src={path + "/assets/img/user8-128x128.jpg"}
463
+ alt="User Avatar"
464
+ />
465
+
466
+ <div class="contacts-list-info">
467
+ <span class="contacts-list-name">
468
+ Kenneth M.
469
+ <small class="contacts-list-date float-end">
470
+ 1/4/2023
471
+ </small>
472
+ </span>
473
+ <span class="contacts-list-msg">
474
+ Never mind I found...
475
+ </span>
476
+ </div>
477
+ <!-- /.contacts-list-info -->
478
+ </a>
479
+ </li>
480
+ <!-- End Contact Item -->
481
+ </ul>
482
+ <!-- /.contacts-list -->
483
+ </div>
484
+ <!-- /.direct-chat-pane -->
485
+ </div>
486
+ <!-- /.card-body -->
487
+ <div class="card-footer">
488
+ <form action="#" method="post">
489
+ <div class="input-group">
490
+ <input
491
+ type="text"
492
+ name="message"
493
+ placeholder="Type Message ..."
494
+ class="form-control"
495
+ />
496
+ <span class="input-group-append">
497
+ <button type="button" class="btn btn-primary">
498
+ Send
499
+ </button>
500
+ </span>
501
+ </div>
502
+ </form>
503
+ </div>
504
+ <!-- /.card-footer-->
505
+ </div>
506
+ <!-- /.direct-chat -->
507
+ </div>
508
+ <!-- /.Start col -->
509
+
510
+ <!-- Start col -->
511
+ <div class="col-lg-5 connectedSortable">
512
+ <div
513
+ class="card mb-4 text-white bg-primary bg-gradient border-primary"
514
+ >
515
+ <div class="card-header border-0">
516
+ <h3 class="card-title">Sales Value</h3>
517
+ <div class="card-tools">
518
+ <button
519
+ type="button"
520
+ class="btn btn-primary btn-sm"
521
+ data-lte-toggle="card-collapse"
522
+ >
523
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
524
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
525
+ </button>
526
+ </div>
527
+ </div>
528
+ <div class="card-body">
529
+ <div id="world-map" style="height: 220px"></div>
530
+ </div>
531
+ <div class="card-footer border-0">
532
+ <!--begin::Row-->
533
+ <div class="row">
534
+ <div class="col-4 text-center">
535
+ <div id="sparkline-1"></div>
536
+ <div class="text-white">Visitors</div>
537
+ </div>
538
+ <div class="col-4 text-center">
539
+ <div id="sparkline-2"></div>
540
+ <div class="text-white">Online</div>
541
+ </div>
542
+ <div class="col-4 text-center">
543
+ <div id="sparkline-3"></div>
544
+ <div class="text-white">Sales</div>
545
+ </div>
546
+ </div>
547
+ <!--end::Row-->
548
+ </div>
549
+ </div>
550
+ </div>
551
+ <!-- /.Start col -->
552
+ </div>
553
+ <!-- /.row (main row) -->
554
+ </div>
555
+ <!--end::Container-->
556
+ </div>
557
+ <!--end::App Content-->
558
+ </main>
559
+ <!--end::App Main-->
560
+ <Footer />
561
+ </div>
562
+ <!--end::App Wrapper-->
563
+ <!--begin::Script-->
564
+ <Scripts path={path} />
565
+
566
+ <!-- OPTIONAL SCRIPTS -->
567
+
568
+ <!-- sortablejs -->
569
+ <script
570
+ src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
571
+ integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
572
+ crossorigin="anonymous"
573
+ ></script>
574
+
575
+ <!-- sortablejs -->
576
+ <script is:inline>
577
+ const connectedSortables =
578
+ document.querySelectorAll(".connectedSortable");
579
+ connectedSortables.forEach((connectedSortable) => {
580
+ let sortable = new Sortable(connectedSortable, {
581
+ group: "shared",
582
+ });
583
+ });
584
+
585
+ const cardHeaders = document.querySelectorAll(
586
+ ".connectedSortable .card-header"
587
+ );
588
+ cardHeaders.forEach((cardHeader) => {
589
+ cardHeader.style.cursor = "move";
590
+ });
591
+ </script>
592
+
593
+ <!-- apexcharts -->
594
+ <script
595
+ src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
596
+ integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
597
+ crossorigin="anonymous"
598
+ ></script>
599
+
600
+ <!-- ChartJS -->
601
+ <script is:inline>
602
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
603
+ // IT'S ALL JUST JUNK FOR DEMO
604
+ // ++++++++++++++++++++++++++++++++++++++++++
605
+
606
+ const sales_chart_options = {
607
+ series: [
608
+ {
609
+ name: "Digital Goods",
610
+ data: [28, 48, 40, 19, 86, 27, 90],
611
+ },
612
+ {
613
+ name: "Electronics",
614
+ data: [65, 59, 80, 81, 56, 55, 40],
615
+ },
616
+ ],
617
+ chart: {
618
+ height: 300,
619
+ type: "area",
620
+ toolbar: {
621
+ show: false,
622
+ },
623
+ },
624
+ legend: {
625
+ show: false,
626
+ },
627
+ colors: ["#0d6efd", "#20c997"],
628
+ dataLabels: {
629
+ enabled: false,
630
+ },
631
+ stroke: {
632
+ curve: "smooth",
633
+ },
634
+ xaxis: {
635
+ type: "datetime",
636
+ categories: [
637
+ "2023-01-01",
638
+ "2023-02-01",
639
+ "2023-03-01",
640
+ "2023-04-01",
641
+ "2023-05-01",
642
+ "2023-06-01",
643
+ "2023-07-01",
644
+ ],
645
+ },
646
+ tooltip: {
647
+ x: {
648
+ format: "MMMM yyyy",
649
+ },
650
+ },
651
+ };
652
+
653
+ const sales_chart = new ApexCharts(
654
+ document.querySelector("#revenue-chart"),
655
+ sales_chart_options
656
+ );
657
+ sales_chart.render();
658
+ </script>
659
+
660
+ <!-- jsvectormap -->
661
+ <script
662
+ src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
663
+ integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
664
+ crossorigin="anonymous"
665
+ ></script>
666
+ <script
667
+ src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
668
+ integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
669
+ crossorigin="anonymous"
670
+ ></script>
671
+
672
+ <!-- jsvectormap -->
673
+ <script is:inline>
674
+ const visitorsData = {
675
+ US: 398, // USA
676
+ SA: 400, // Saudi Arabia
677
+ CA: 1000, // Canada
678
+ DE: 500, // Germany
679
+ FR: 760, // France
680
+ CN: 300, // China
681
+ AU: 700, // Australia
682
+ BR: 600, // Brazil
683
+ IN: 800, // India
684
+ GB: 320, // Great Britain
685
+ RU: 3000, // Russia
686
+ };
687
+
688
+ // World map by jsVectorMap
689
+ const map = new jsVectorMap({
690
+ selector: "#world-map",
691
+ map: "world",
692
+ });
693
+
694
+ // Sparkline charts
695
+ const option_sparkline1 = {
696
+ series: [
697
+ {
698
+ data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
699
+ },
700
+ ],
701
+ chart: {
702
+ type: "area",
703
+ height: 50,
704
+ sparkline: {
705
+ enabled: true,
706
+ },
707
+ },
708
+ stroke: {
709
+ curve: "straight",
710
+ },
711
+ fill: {
712
+ opacity: 0.3,
713
+ },
714
+ yaxis: {
715
+ min: 0,
716
+ },
717
+ colors: ["#DCE6EC"],
718
+ };
719
+
720
+ const sparkline1 = new ApexCharts(
721
+ document.querySelector("#sparkline-1"),
722
+ option_sparkline1
723
+ );
724
+ sparkline1.render();
725
+
726
+ const option_sparkline2 = {
727
+ series: [
728
+ {
729
+ data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
730
+ },
731
+ ],
732
+ chart: {
733
+ type: "area",
734
+ height: 50,
735
+ sparkline: {
736
+ enabled: true,
737
+ },
738
+ },
739
+ stroke: {
740
+ curve: "straight",
741
+ },
742
+ fill: {
743
+ opacity: 0.3,
744
+ },
745
+ yaxis: {
746
+ min: 0,
747
+ },
748
+ colors: ["#DCE6EC"],
749
+ };
750
+
751
+ const sparkline2 = new ApexCharts(
752
+ document.querySelector("#sparkline-2"),
753
+ option_sparkline2
754
+ );
755
+ sparkline2.render();
756
+
757
+ const option_sparkline3 = {
758
+ series: [
759
+ {
760
+ data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
761
+ },
762
+ ],
763
+ chart: {
764
+ type: "area",
765
+ height: 50,
766
+ sparkline: {
767
+ enabled: true,
768
+ },
769
+ },
770
+ stroke: {
771
+ curve: "straight",
772
+ },
773
+ fill: {
774
+ opacity: 0.3,
775
+ },
776
+ yaxis: {
777
+ min: 0,
778
+ },
779
+ colors: ["#DCE6EC"],
780
+ };
781
+
782
+ const sparkline3 = new ApexCharts(
783
+ document.querySelector("#sparkline-3"),
784
+ option_sparkline3
785
+ );
786
+ sparkline3.render();
787
+ </script>
788
+ <!--end::Script-->
789
+ </body><!--end::Body-->
790
+ </html>