npm - admin-lte - Versions diffs - 4.0.0-alpha1 → 4.0.0-alpha3 - Mend

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

package/.bundlewatch.config.json +8 -8
package/.cache/.eslintcache +1 -0
package/.cache/.stylelintcache +1 -0
package/.eslintignore +1 -0
package/.eslintrc.json +16 -0
package/.gitpod.yml +1 -1
package/.idea/AdminLTE.iml +4 -0
package/.idea/codeStyles/Project.xml +24 -0
package/.idea/dbnavigator.xml +421 -0
package/.idea/git_toolbox_prj.xml +15 -0
package/.idea/jsLibraryMappings.xml +6 -0
package/.idea/jsLinters/eslint.xml +6 -0
package/.idea/vcs.xml +6 -0
package/.stylelintrc.json +47 -0
package/LICENSE +1 -1
package/README.md +6 -7
package/dist/assets/img/AdminLTEFullLogo.png +0 -0
package/dist/css/adminlte.css +2716 -2710
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +2 -2
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2715 -2710
package/dist/css/adminlte.rtl.css.map +1 -0
package/dist/css/adminlte.rtl.min.css +7 -0
package/dist/css/adminlte.rtl.min.css.map +1 -0
package/dist/js/adminlte.js +204 -233
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +6 -1
package/dist/js/adminlte.min.js.map +1 -1
package/dist/pages/UI/timeline.html +869 -0
package/dist/pages/docs/browser-support.html +755 -0
package/dist/pages/docs/color-mode.html +1067 -0
package/dist/pages/docs/components/main-header.html +1137 -0
package/dist/pages/docs/components/main-sidebar.html +858 -0
package/dist/pages/docs/faq.html +743 -0
package/dist/pages/docs/how-to-contribute.html +783 -0
package/dist/pages/docs/introduction.html +767 -0
package/dist/pages/docs/javascript/treeview.html +762 -0
package/dist/pages/docs/layout.html +788 -0
package/dist/pages/docs/license.html +746 -0
package/dist/pages/examples/lockscreen.html +107 -0
package/dist/pages/examples/login-v2.html +148 -0
package/dist/pages/examples/login.html +128 -196
package/dist/pages/examples/register-v2.html +155 -0
package/dist/pages/examples/register.html +131 -199
package/dist/pages/forms/general.html +1065 -652
package/dist/pages/index.html +1320 -0
package/dist/pages/index2.html +1776 -0
package/dist/pages/index3.html +1111 -0
package/dist/pages/layout/collapsed-sidebar.html +766 -0
package/dist/pages/layout/fixed-complete.html +867 -0
package/dist/pages/layout/fixed-sidebar.html +749 -654
package/dist/pages/layout/layout-rtl.html +766 -0
package/dist/pages/layout/logo-switch.html +433 -0
package/dist/pages/layout/sidebar-mini.html +766 -0
package/dist/pages/layout/unfixed-sidebar.html +747 -654
package/dist/pages/tables/simple.html +1049 -946
package/dist/pages/widgets/cards.html +974 -713
package/dist/pages/widgets/info-box.html +1062 -966
package/dist/pages/widgets/small-box.html +792 -694
package/index.html +6 -15
package/package.json +59 -39
package/src/assets/img/AdminLTEFullLogo.png +0 -0
package/src/config/assets.config.mjs +8 -0
package/src/config/astro.config.mjs +19 -0
package/src/config/postcss.config.mjs +15 -0
package/src/config/rollup.config.js +20 -0
package/src/html/.eslintrc.json +24 -0
package/src/html/.prettierrc.js +11 -0
package/src/html/.tsconfig.json +4 -0
package/src/html/components/_head.astro +47 -0
package/src/html/components/_scripts.astro +51 -0
package/src/html/components/dashboard/_footer.astro +18 -0
package/src/html/components/dashboard/_sidenav.astro +553 -0
package/src/html/components/dashboard/_topbar.astro +213 -0
package/src/html/components/docs/browser-support.mdx +23 -0
package/src/html/components/docs/color-mode.mdx +169 -0
package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx} +67 -67
package/src/html/components/docs/components/main-sidebar.mdx +129 -0
package/src/html/components/docs/faq.mdx +11 -0
package/src/html/components/docs/how-to-contribute.mdx +34 -0
package/src/html/components/docs/introduction.mdx +60 -0
package/src/html/components/docs/license.mdx +9 -0
package/src/html/components/javascript/treeview.mdx +39 -0
package/src/html/env.d.ts +1 -0
package/src/html/pages/UI/timeline.astro +221 -0
package/src/html/pages/docs/browser-support.astro +71 -0
package/src/html/pages/docs/color-mode.astro +271 -0
package/src/html/pages/docs/components/main-header.astro +319 -0
package/src/html/pages/docs/components/main-sidebar.astro +71 -0
package/src/html/pages/docs/faq.astro +71 -0
package/src/html/pages/docs/how-to-contribute.astro +71 -0
package/src/html/pages/docs/introduction.astro +71 -0
package/src/html/pages/docs/javascript/treeview.astro +71 -0
package/src/html/pages/docs/layout.astro +120 -0
package/src/html/pages/docs/license.astro +71 -0
package/src/html/pages/examples/lockscreen.astro +63 -0
package/src/html/pages/examples/login-v2.astro +109 -0
package/src/{pages/examples/login.html → html/pages/examples/login.astro} +40 -22
package/src/html/pages/examples/register-v2.astro +116 -0
package/src/{pages/examples/register.html → html/pages/examples/register.astro} +42 -24
package/src/html/pages/forms/general.astro +624 -0
package/src/html/pages/index.astro +790 -0
package/src/html/pages/index2.astro +1345 -0
package/src/html/pages/index3.astro +513 -0
package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
package/src/html/pages/layout/fixed-complete.astro +209 -0
package/src/html/pages/layout/fixed-sidebar.astro +109 -0
package/src/html/pages/layout/layout-rtl.astro +109 -0
package/src/html/pages/layout/logo-switch.astro +212 -0
package/src/html/pages/layout/sidebar-mini.astro +108 -0
package/src/html/pages/layout/unfixed-sidebar.astro +107 -0
package/src/html/pages/tables/simple.astro +472 -0
package/src/html/pages/widgets/cards.astro +373 -0
package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +110 -60
package/src/html/pages/widgets/small-box.astro +182 -0
package/src/scss/_app-content.scss +52 -0
package/src/scss/_app-footer.scss +15 -0
package/src/scss/_app-header.scss +26 -0
package/src/scss/_app-main.scss +17 -0
package/src/scss/_app-sidebar.scss +603 -0
package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
package/src/scss/_bootstrap-variables.scss +42 -27
package/src/scss/_callouts.scss +34 -0
package/src/scss/_cards.scss +54 -224
package/src/scss/_compact-mode.scss +79 -0
package/src/scss/_direct-chat.scss +15 -9
package/src/scss/_docs.scss +4 -0
package/src/scss/_dropdown.scss +7 -5
package/src/scss/_info-box.scss +2 -6
package/src/scss/_miscellaneous.scss +0 -455
package/src/scss/_mixins.scss +0 -6
package/src/scss/_root.scss +2 -58
package/src/scss/_small-box.scss +15 -41
package/src/scss/_table.scss +0 -50
package/src/scss/_timeline.scss +120 -0
package/src/scss/_variables-dark.scss +15 -8
package/src/scss/_variables.scss +48 -136
package/src/scss/adminlte.scss +1 -1
package/src/scss/mixins/_animations.scss +0 -1
package/src/scss/mixins/_scrollbar.scss +2 -2
package/src/scss/pages/_lockscreen.scss +74 -0
package/src/scss/pages/_login_and_register.scss +1 -5
package/src/scss/parts/_core.scss +9 -15
package/src/scss/parts/_extra-components.scss +1 -2
package/src/scss/parts/_pages.scss +1 -0
package/src/ts/adminlte.ts +0 -2
package/src/ts/card-widget.ts +57 -66
package/src/ts/direct-chat.ts +35 -10
package/src/ts/layout.ts +8 -6
package/src/ts/push-menu.ts +90 -158
package/src/ts/treeview.ts +30 -30
package/src/ts/util/index.ts +14 -12
package/src/utils/index.js +28 -0
package/tsconfig.json +11 -3
package/.stylelintrc +0 -40
package/CHECKLIST.md +0 -0
package/dist/css/rtl/adminlte.rtl.css.map +0 -1
package/dist/css/rtl/adminlte.rtl.min.css +0 -7
package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
package/dist/index.html +0 -1065
package/dist/index2.html +0 -1629
package/dist/index3.html +0 -1015
package/gulpfile.js +0 -315
package/src/index.html +0 -476
package/src/index2.html +0 -968
package/src/index3.html +0 -430
package/src/pages/forms/general.html +0 -97
package/src/pages/layout/fixed-sidebar.html +0 -87
package/src/pages/layout/unfixed-sidebar.html +0 -87
package/src/pages/tables/simple.html +0 -336
package/src/pages/widgets/cards.html +0 -143
package/src/pages/widgets/small-box.html +0 -124
package/src/partials/_head.html +0 -31
package/src/partials/_scripts.html +0 -95
package/src/partials/dashboard/_footer.html +0 -9
package/src/partials/dashboard/_sidenav.html +0 -244
package/src/scss/_brand-container.scss +0 -72
package/src/scss/_content-header.scss +0 -9
package/src/scss/_content-wrapper.scss +0 -6
package/src/scss/_content.scss +0 -3
package/src/scss/_layout-fixed.scss +0 -43
package/src/scss/_layout-mobile.scss +0 -22
package/src/scss/_main-footer.scss +0 -28
package/src/scss/_main-header.scss +0 -40
package/src/scss/_main-sidebar.scss +0 -63
package/src/scss/_nav-sidebar.scss +0 -66
package/src/scss/_products.scss +0 -55
package/src/scss/_sidebar-close.scss +0 -6
package/src/scss/_sidebar-collapse.scss +0 -120
package/src/scss/_sidebar-horizontal.scss +0 -67
package/src/scss/_sidebar.scss +0 -11
package/src/scss/_users-list.scss +0 -45
package/src/scss/mixins/_brand-variant.scss +0 -9
package/src/scss/mixins/_cards.scss +0 -53
package/src/scss/mixins/_direct-chat.scss +0 -17
package/src/scss/mixins/_header-variant.scss +0 -22
package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
package/src/scss/mixins/_nav-treeview-light.scss +0 -89
package/src/scss/mixins/_sidebar-color.scss +0 -9

package/src/html/pages/layout/sidebar-mini.astro ADDED Viewed

@@ -0,0 +1,108 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+const title = "AdminLTE 4 | Sidebar Mini";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "sidebar-mini";
+---
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Sidebar Mini</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Sidebar Mini
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-12">
+                <!-- Default box -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    Start creating your amazing application!
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer">Footer</div>
+                  <!-- /.card-footer-->
+                </div>
+                <!-- /.card -->
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

package/src/html/pages/layout/unfixed-sidebar.astro ADDED Viewed

@@ -0,0 +1,107 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+const title = "AdminLTE 4 | Unfixed Sidebar";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "unfixed-sidebar";
+---
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Unfixed Layout</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Unfixed Layout
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-12">
+                <!-- Default box -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    Start creating your amazing application!
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer">Footer</div>
+                  <!-- /.card-footer-->
+                </div>
+                <!-- /.card -->
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

package/src/html/pages/tables/simple.astro ADDED Viewed

@@ -0,0 +1,472 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+const title = "AdminLTE 4 | Simple Tables";
+const path = "../../../dist";
+const mainPage = "tables";
+const page = "simple";
+---
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Simple Tables</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Simple Tables
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Bordered Table</h3>
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body">
+                    <table class="table table-bordered">
+                      <thead>
+                        <tr>
+                          <th style="width: 10px">#</th>
+                          <th>Task</th>
+                          <th>Progress</th>
+                          <th style="width: 40px">Label</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>1.</td>
+                          <td>Update software</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
+                        </tr>
+                        <tr>
+                          <td>2.</td>
+                          <td>Clean database</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>3.</td>
+                          <td>Cron job running</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>4.</td>
+                          <td>Fix and squish bugs</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer clearfix">
+                    <ul class="pagination pagination-sm m-0 float-end">
+                      <li class="page-item">
+                        <a class="page-link" href="#">&laquo;</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">1</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">&raquo;</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <!-- /.card -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Condensed Full Width Table</h3>
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body p-0">
+                    <table class="table table-sm">
+                      <thead>
+                        <tr>
+                          <th style="width: 10px">#</th>
+                          <th>Task</th>
+                          <th>Progress</th>
+                          <th style="width: 40px">Label</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>1.</td>
+                          <td>Update software</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
+                        </tr>
+                        <tr>
+                          <td>2.</td>
+                          <td>Clean database</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>3.</td>
+                          <td>Cron job running</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>4.</td>
+                          <td>Fix and squish bugs</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Simple Full Width Table</h3>
+                    <div class="card-tools">
+                      <ul class="pagination pagination-sm float-end">
+                        <li class="page-item">
+                          <a class="page-link" href="#">&laquo;</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">&raquo;</a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body p-0">
+                    <table class="table">
+                      <thead>
+                        <tr>
+                          <th style="width: 10px">#</th>
+                          <th>Task</th>
+                          <th>Progress</th>
+                          <th style="width: 40px">Label</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>1.</td>
+                          <td>Update software</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
+                        </tr>
+                        <tr>
+                          <td>2.</td>
+                          <td>Clean database</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>3.</td>
+                          <td>Cron job running</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>4.</td>
+                          <td>Fix and squish bugs</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Striped Full Width Table</h3>
+                  </div>
+                  <!-- /.card-header -->
+                  <div class="card-body p-0">
+                    <table class="table table-striped">
+                      <thead>
+                        <tr>
+                          <th style="width: 10px">#</th>
+                          <th>Task</th>
+                          <th>Progress</th>
+                          <th style="width: 40px">Label</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>1.</td>
+                          <td>Update software</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td><span class="badge text-bg-danger">55%</span></td>
+                        </tr>
+                        <tr>
+                          <td>2.</td>
+                          <td>Clean database</td>
+                          <td>
+                            <div class="progress progress-xs">
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>3.</td>
+                          <td>Cron job running</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td>4.</td>
+                          <td>Fix and squish bugs</td>
+                          <td>
+                            <div
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!-- /.card-body -->
+                </div>
+                <!-- /.card -->
+              </div>
+              <!-- /.col -->
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>