admin-lte 4.0.0-alpha3 → 4.0.0-beta1

package/src/html/pages/docs/color-mode.astro

@@ -60,8 +60,10 @@ const page = "color-mode";
                 <div class="callout callout-info">
                   <h5 class="fw-bold">Tips</h5>
                   <p>
-                    First Visit
-                    https://getbootstrap.com/docs/5.3/customize/color-modes/
+                    <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                      Color modes in Bootstrap
+                    </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
+
                   </p>
                 </div>
               </div>

package/src/html/pages/docs/components/main-header.astro

@@ -59,8 +59,9 @@ const distPath = path;
               <h5 class="fw-bold">Reminder!</h5>
               <p>
                 AdminLTE uses all of Bootstrap 5 components. It's a good start
-                to review the [Bootstrap
-                documentation](https://getbootstrap.com/) to get an idea of the
+                to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                  Bootstrap documentation
+                </a> to get an idea of the
                 various components that this documentation <b>does not</b> cover.
               </p>
             </div>

package/src/html/pages/docs/layout.astro

@@ -55,7 +55,7 @@ const page = "layout";
             <div class="callout callout-info mb-4">
               <h5 class="fw-bold">Tips</h5>
               <p>
-                The <a href="/starter.html" class="link-primary">
+                The <a href="/starter.html" target="_blank" rel="noopener noreferrer"  class="callout-link">
                   starter page
                 </a> is a good place to start building your app if you’d like to
                 start from scratch.

package/src/html/pages/examples/lockscreen.astro

@@ -49,11 +49,11 @@ const year = new Date().getFullYear();
         Enter your password to retrieve your session
       </div>
       <div class="text-center">
-        <a href="login.html">Or sign in as a different user</a>
+        <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
       </div>
       <div class="lockscreen-footer text-center">
-        Copyright © 2014-{year}
-        <b><a href="https://adminlte.io">AdminLTE.io</a></b><br />
+        Copyright © 2014-{year} &nbsp;
+        <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
         All rights reserved
       </div>
     </div>

package/src/html/pages/forms/general.astro

@@ -58,11 +58,11 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-12">
                 <div class="callout callout-info">
-                  For detailed documentaion of Form visit <a
+                  For detailed documentation of Form visit <a
                     href="https://getbootstrap.com/docs/5.3/forms/overview/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="fw-bold"
+                    class="callout-link"
                   >
                     Bootstrap Form
                   </a>
@@ -72,7 +72,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Quick Example-->
-                <div class="card card-primary card-outline">
+                <div class="card card-primary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Quick Example</div>
@@ -140,7 +140,7 @@ const page = "general";
                 </div>
                 <!--end::Quick Example-->
                 <!--begin::Input Group-->
-                <div class="card card-success card-outline">
+                <div class="card card-success card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Input Group</div>
@@ -234,7 +234,7 @@ const page = "general";
                 </div>
                 <!--end::Input Group-->
                 <!--begin::Horizontal Form-->
-                <div class="card card-warning card-outline">
+                <div class="card card-warning card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Horizontal Form</div>
@@ -348,7 +348,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Different Height-->
-                <div class="card card-secondary card-outline">
+                <div class="card card-secondary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Height</div>
@@ -381,7 +381,7 @@ const page = "general";
                 </div>
                 <!--end::Different Height-->
                 <!--begin::Different Width-->
-                <div class="card card-danger card-outline">
+                <div class="card card-danger card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Width</div>
@@ -425,7 +425,7 @@ const page = "general";
                 </div>
                 <!--end::Different Width-->
                 <!--begin::Form Validation-->
-                <div class="card card-info card-outline">
+                <div class="card card-info card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Form Validation</div>

package/src/html/pages/index.astro

@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index";
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <!--begin::Head-->
   <head>
@@ -91,7 +91,10 @@ const page = "index";
                       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"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -117,7 +120,10 @@ const page = "index";
                       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"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -143,7 +149,10 @@ const page = "index";
                       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"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -176,7 +185,10 @@ const page = "index";
                       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"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -201,7 +213,7 @@ const page = "index";
                 <!-- /.card -->
 
                 <!-- DIRECT CHAT -->
-                <div class="card direct-chat direct-chat-primary">
+                <div class="card direct-chat direct-chat-primary mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Direct Chat</h3>
 
@@ -510,7 +522,7 @@ const page = "index";
               <!-- Start col -->
               <div class="col-lg-5 connectedSortable">
                 <div
-                  class="card mb-4 text-white bg-primary bg-gradient border-primary"
+                  class="card text-white bg-primary bg-gradient border-primary mb-4"
                 >
                   <div class="card-header border-0">
                     <h3 class="card-title">Sales Value</h3>
@@ -532,15 +544,15 @@ const page = "index";
                     <!--begin::Row-->
                     <div class="row">
                       <div class="col-4 text-center">
-                        <div id="sparkline-1"></div>
+                        <div id="sparkline-1" class="text-dark"></div>
                         <div class="text-white">Visitors</div>
                       </div>
                       <div class="col-4 text-center">
-                        <div id="sparkline-2"></div>
+                        <div id="sparkline-2" class="text-dark"></div>
                         <div class="text-white">Online</div>
                       </div>
                       <div class="col-4 text-center">
-                        <div id="sparkline-3"></div>
+                        <div id="sparkline-3" class="text-dark"></div>
                         <div class="text-white">Sales</div>
                       </div>
                     </div>
@@ -569,8 +581,7 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
       integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- sortablejs -->
     <script is:inline>
@@ -579,11 +590,12 @@ const page = "index";
       connectedSortables.forEach((connectedSortable) => {
         let sortable = new Sortable(connectedSortable, {
           group: "shared",
+          handle: ".card-header",
         });
       });
 
       const cardHeaders = document.querySelectorAll(
-        ".connectedSortable .card-header"
+        ".connectedSortable .card-header",
       );
       cardHeaders.forEach((cardHeader) => {
         cardHeader.style.cursor = "move";
@@ -594,8 +606,7 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
       integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- ChartJS -->
     <script is:inline>
@@ -652,7 +663,7 @@ const page = "index";
 
       const sales_chart = new ApexCharts(
         document.querySelector("#revenue-chart"),
-        sales_chart_options
+        sales_chart_options,
       );
       sales_chart.render();
     </script>
@@ -661,13 +672,11 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
       integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
       integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- jsvectormap -->
     <script is:inline>
@@ -719,7 +728,7 @@ const page = "index";
 
       const sparkline1 = new ApexCharts(
         document.querySelector("#sparkline-1"),
-        option_sparkline1
+        option_sparkline1,
       );
       sparkline1.render();
 
@@ -750,7 +759,7 @@ const page = "index";
 
       const sparkline2 = new ApexCharts(
         document.querySelector("#sparkline-2"),
-        option_sparkline2
+        option_sparkline2,
       );
       sparkline2.render();
 
@@ -781,7 +790,7 @@ const page = "index";
 
       const sparkline3 = new ApexCharts(
         document.querySelector("#sparkline-3"),
-        option_sparkline3
+        option_sparkline3,
       );
       sparkline3.render();
     </script>

package/src/html/pages/index2.astro

@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index2";
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <!--begin::Head-->
   <head>
@@ -309,7 +309,7 @@ const page = "index2";
               <!-- Start col -->
               <div class="col-md-8">
                 <!--begin::Row-->
-                <div class="row">
+                <div class="row g-4 mb-4">
                   <div class="col-md-6">
                     <!-- DIRECT CHAT -->
                     <div class="card direct-chat direct-chat-warning">
@@ -329,7 +329,8 @@ const page = "index2";
                             data-lte-toggle="card-collapse"
                           >
                             <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                           </button>
                           <button
                             type="button"
@@ -622,7 +623,7 @@ const page = "index2";
 
                   <div class="col-md-6">
                     <!-- USERS LIST -->
-                    <div class="card mb-4">
+                    <div class="card">
                       <div class="card-header">
                         <h3 class="card-title">Latest Members</h3>
 
@@ -636,7 +637,8 @@ const page = "index2";
                             data-lte-toggle="card-collapse"
                           >
                             <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                           </button>
                           <button
                             type="button"
@@ -767,7 +769,7 @@ const page = "index2";
                       </div>
                       <!-- /.card-body -->
                       <div class="card-footer text-center">
-                        <a href="javascript:">View All Users</a>
+                        <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
                       </div>
                       <!-- /.card-footer -->
                     </div>
@@ -777,7 +779,7 @@ const page = "index2";
                 </div>
                 <!--end::Row-->
 
-                <!-- TABLE: LATEST ORDERS -->
+                <!--begin::Latest Order Widget-->
                 <div class="card">
                   <div class="card-header">
                     <h3 class="card-title">Latest Orders</h3>
@@ -815,7 +817,7 @@ const page = "index2";
                         <tbody>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                             </td>
                             <td>Call of Duty IV</td>
                             <td>
@@ -824,36 +826,24 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-1"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-warning">Pending</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-2"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>iPhone 6 Plus</td>
                             <td>
@@ -862,54 +852,36 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-3"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-info">Processing</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00c0ef"
-                                data-height="20"
-                              >
-                                90,80,-90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-4"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-warning">Pending</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-5"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>iPhone 6 Plus</td>
                             <td>
@@ -918,31 +890,19 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-6"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                             </td>
                             <td>Call of Duty IV</td>
                             <td>
                               <span class="badge text-bg-success">Shipped</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-7"></div>
                             </td>
                           </tr>
                         </tbody>
@@ -1063,7 +1023,7 @@ const page = "index2";
                           United States of America
                           <span class="float-end text-danger">
                             <i class="bi bi-arrow-down fs-7"></i>
-                            12%
+                             12%
                           </span>
                         </a>
                       </li>
@@ -1233,8 +1193,7 @@ const page = "index2";
     <script
       src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
       integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@@ -1250,7 +1209,7 @@ const page = "index2";
       // - MONTHLY SALES CHART -
       //-----------------------
 
-      var sales_chart_options = {
+      const sales_chart_options = {
         series: [
           {
             name: "Digital Goods",
@@ -1297,9 +1256,9 @@ const page = "index2";
         },
       };
 
-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
         document.querySelector("#sales-chart"),
-        sales_chart_options
+        sales_chart_options,
       );
       sales_chart.render();
 
@@ -1307,11 +1266,80 @@ const page = "index2";
       // - END MONTHLY SALES CHART -
       //---------------------------
 
+      function createSparklineChart(selector, data) {
+        const options = {
+          series: [{ data }],
+          chart: {
+            type: "line",
+            width: 150,
+            height: 30,
+            sparkline: {
+              enabled: true,
+            },
+          },
+          colors: ["var(--bs-primary)"],
+          stroke: {
+            width: 2,
+          },
+          tooltip: {
+            fixed: {
+              enabled: false,
+            },
+            x: {
+              show: false,
+            },
+            y: {
+              title: {
+                formatter: function (seriesName) {
+                  return "";
+                },
+              },
+            },
+            marker: {
+              show: false,
+            },
+          },
+        };
+
+        const chart = new ApexCharts(document.querySelector(selector), options);
+        chart.render();
+      }
+
+      const table_sparkline_1_data = [
+        25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
+      ];
+      const table_sparkline_2_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
+      ];
+      const table_sparkline_3_data = [
+        15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
+      ];
+      const table_sparkline_4_data = [
+        30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
+      ];
+      const table_sparkline_5_data = [
+        20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
+      ];
+      const table_sparkline_6_data = [
+        5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
+      ];
+      const table_sparkline_7_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
+      ];
+
+      createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
+      createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
+      createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
+      createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
+      createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
+      createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
+      createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
+
       //-------------
       // - PIE CHART -
       //-------------
 
-      var pie_chart_options = {
+      const pie_chart_options = {
         series: [700, 500, 400, 600, 300, 100],
         chart: {
           type: "donut",
@@ -1330,9 +1358,9 @@ const page = "index2";
         ],
       };
 
-      var pie_chart = new ApexCharts(
+      const pie_chart = new ApexCharts(
         document.querySelector("#pie-chart"),
-        pie_chart_options
+        pie_chart_options,
       );
       pie_chart.render();