wg svelte multiple component communication

public/200.html

@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

public/404.html

@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

public/assets/styles/index.css

@@ -3,3 +3,4 @@
 @tailwind components;
 
 @tailwind utilities;
+

public/assets/styles/tailwind.css

@@ -1237,21 +1237,11 @@ select {
   background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
 }
 
-.bg-purple-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(147, 51, 234, var(--tw-bg-opacity));
-}
-
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
-}
-
 .bg-lightBlue-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
@@ -1272,11 +1262,26 @@ select {
   background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
 }
 
+.bg-cyan-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(6, 182, 212, var(--tw-bg-opacity));
+}
+
+.bg-teal-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(240, 253, 250, var(--tw-bg-opacity));
+}
+
 .bg-teal-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
 }
 
+.bg-teal-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(94, 234, 212, var(--tw-bg-opacity));
+}
+
 .bg-teal-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
@@ -1312,6 +1317,11 @@ select {
   background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
+}
+
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1387,51 +1397,21 @@ select {
   background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
 }
 
-.hover\:bg-purple-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
-}
-
 .focus\:bg-white:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.focus\:bg-purple-700:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
-}
-
-.focus\:bg-blue-700:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
-}
-
 .focus\:bg-gray-200:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.active\:bg-purple-800:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(107, 33, 168, var(--tw-bg-opacity));
-}
-
 .active\:bg-indigo-600:active {
   --tw-bg-opacity: 1;
   background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
 }
 
-.active\:bg-blue-800:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
-}
-
 .active\:bg-red-500:active {
   --tw-bg-opacity: 1;
   background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
@@ -1556,10 +1536,6 @@ select {
   border-color: rgba(113, 113, 122, var(--tw-border-opacity));
 }
 
-.rounded-none {
-  border-radius: 0px;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1596,16 +1572,6 @@ select {
   border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-t-md {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
-}
-
-.rounded-b-md {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1675,6 +1641,10 @@ select {
   border-bottom-width: 2px;
 }
 
+.border-t-8 {
+  border-top-width: 8px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -2019,10 +1989,6 @@ select {
   flex-grow: 1;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .flex-shrink {
   flex-shrink: 1;
 }
@@ -2063,10 +2029,6 @@ select {
   font-weight: 400;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -2083,10 +2045,6 @@ select {
   height: 0.5rem;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .h-5 {
   height: 1.25rem;
 }
@@ -2200,10 +2158,6 @@ select {
   line-height: 1;
 }
 
-.leading-tight {
-  line-height: 1.25;
-}
-
 .leading-snug {
   line-height: 1.375;
 }
@@ -2566,14 +2520,6 @@ select {
   opacity: .8;
 }
 
-.hover\:opacity-75:hover {
-  opacity: 0.75;
-}
-
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2792,11 +2738,6 @@ select {
   padding-right: 0.125rem;
 }
 
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -3092,21 +3033,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:shadow-lg:focus {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.focus\:shadow-none:focus {
-  --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.active\:shadow-lg:active {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 * {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
@@ -3229,11 +3155,21 @@ select {
   color: rgba(2, 132, 199, var(--tw-text-opacity));
 }
 
+.text-teal-50 {
+  --tw-text-opacity: 1;
+  color: rgba(240, 253, 250, var(--tw-text-opacity));
+}
+
 .text-teal-500 {
   --tw-text-opacity: 1;
   color: rgba(20, 184, 166, var(--tw-text-opacity));
 }
 
+.text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgba(15, 118, 110, var(--tw-text-opacity));
+}
+
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgba(16, 185, 129, var(--tw-text-opacity));
@@ -3279,11 +3215,6 @@ select {
   color: rgba(63, 63, 70, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgba(39, 39, 42, var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgba(24, 24, 27, var(--tw-text-opacity));
@@ -3329,11 +3260,6 @@ select {
   color: rgba(30, 41, 59, var(--tw-text-opacity));
 }
 
-.hover\:text-black:hover {
-  --tw-text-opacity: 1;
-  color: rgba(0, 0, 0, var(--tw-text-opacity));
-}
-
 .hover\:text-red-600:hover {
   --tw-text-opacity: 1;
   color: rgba(220, 38, 38, var(--tw-text-opacity));
@@ -3409,10 +3335,6 @@ select {
   text-decoration: none;
 }
 
-.hover\:no-underline:hover {
-  text-decoration: none;
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -3561,10 +3483,6 @@ select {
   word-break: break-all;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -4137,3 +4055,4 @@ select {
 
 @media (min-width: 1536px) {
 }
+

public/index.html

@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

src/components/Cards/CardCreateWGUser.svelte

@@ -1,17 +1,3 @@
-<div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
->
-  <div class="rounded-t bg-white mb-0 px-6 py-6">
-    <div class="text-center flex justify-between">
-      <h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
-      <button
-        class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
-        type="button"
-      >
-        Settings
-      </button>
-    </div>
-  </div>
   <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
     <form>
       <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
@@ -30,7 +16,7 @@
               id="grid-username"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="lucky.jesse"
+              value="" placeholder="User Name" 
             />
           </div>
         </div>
@@ -55,13 +41,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              IP Allocation
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
           <div class="relative w-full mb-3">
@@ -69,13 +55,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              Allowed IP
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
           <div class="relative w-full mb-3">
@@ -83,13 +69,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              Extra Allowed IP
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
       </div>
@@ -103,9 +89,5 @@
 
       <hr class="mt-6 border-b-1 border-blueGray-300" />
 
-      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
-        About Me
-      </h6>
     </form>
   </div>
-</div>

src/components/Cards/CardTableInf.svelte

@@ -4,16 +4,25 @@
     let trColor;
     let footprint;
     let infTable = [];
-    onMount(async () => {
+    // onMount(async () => {
-         await axios.get('/api2/wgLogs')
+    //      const wgResponse = await axios.get('/api2/wgLogs')
-             .then( response => {
+    //          .then( response => {
-                 infTable = response.data
+    //              infTable = response.data
-                 });
+    //              });
-         console.log(infTable);
+    //         return await wgResponse.json();
-         });
+    //      });
+
+    async function getwgResponse() {
+            const wgResponse = await fetch(
+                    '/api2/wgLogs'
+                );
+
+            return await wgResponse.json();
+        }
 
     // core components
     import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
+    import CardWGControl from "components/Cards/CardWGControl.svelte";
 
     // can be one of light or dark
     export let color = "light";
@@ -25,8 +34,30 @@
     function handleMouseOut(e) {
         trColor = "dark";
     }
+    
+    let promise = getwgResponse();
+
 </script>
 
+{#await promise}
+
+    <div
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+    >
+      <div class="rounded-t mb-0 px-4 py-3 border-0">
+        <div class="flex flex-wrap items-center">
+          <div class="relative w-full px-4 max-w-full flex-grow flex-1">
+            <h3
+              class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
+            >
+              Fetching...
+            </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+
+{:then infTable}
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
 >
@@ -43,45 +74,45 @@
   </div>
   <div class="block w-full overflow-x-auto">
     <!-- Projects table -->
-    <table class="table-auto items-center w-full bg-transparent border-collapse">
+    <table class="table-auto border-collapse border border-slate-500 w-full">
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Name
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Mail
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Public Key
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Data In
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Data Out
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Status
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
-            Create Time
+            Created Time
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             ...
           </th>
@@ -89,49 +120,49 @@
       </thead>
       <tbody>
         {#each infTable as infRows}
-            <tr class="{infRows.wgDin < 1 ? 'bg-red-700 border-red-600 text-red-200' : 'None'} ">
+            <tr class="{infRows.wgDin < 1 ? 'bg-red-50 text-red-500 text-sm' : infRows.wgStatus == 'true' ? 'bg-teal-50 text-sm text-teal-700 ' : 'text-blueGray-500 bg-blueGray-50 text-sm'} ">
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 border-slate-700"
                 >
                     { infRows.wgName }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgMail }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgKey }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgDin/1000000 } MBytes
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgDout/1000000 } MBytes
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold   whitespace-nowrap p-4"
                 >
-                    { infRows.wgStatus }
+                { infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgTStamp }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4 text-right"
                 >
                   <TableDropdown />
                 </td>
@@ -141,3 +172,24 @@
     </table>
   </div>
 </div>
+{:catch error}
+    <div class="h-screen">
+        <div
+          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+        >
+          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
+            <div class="text-center flex justify-between">
+              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
+            </div>
+          </div>
+          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
+            <div class="flex flex-wrap items-center">
+              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
+                <p class="text-lg text-red-500"> {error.message} </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+{/await}
+

src/components/Cards/CardWGControl.svelte

@@ -2,43 +2,74 @@
 
     import CardSettings from "components/Cards/CardSettings.svelte";
     import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
+    import CardWGFilter from "components/Cards/CardWGFilter.svelte";
     import Modal from "components/Modals/Modals.svelte"
+    import CardWGControl from "components/Cards/CardWGControl.svelte";
 
   let showModal = false;
+  let showFilter = false;
+    export let filter = null;
+
+    let submitFilter = null;
   
   function toggleModal(){
     showModal = !showModal;
-    console.log("Cunts...");
+          showFilter = false;
+    console.log("Modal...");
   }
 
+  function handleOnSubmit() {
+          console.log("Submitted...");
+    }
+
+  function toggleFilter(){
+    showFilter = !showFilter;
+          showModal = false;
+          filter = submitFilter;
+    console.log("toggle Filter...");
+    console.log(filter);
+  }
+
+   function getwgResponse(param) {
+            const wgResponse = fetch(
+                    '/api2/wgClients?filter='+param
+                );
+
+            return wgResponse;
+    }
+
+
 </script>
 
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
 >
-  <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
+  <div class="rounded bg-white mb-0 px-6 py-6">
-      <hr class="mt-6 border-b-1 border-blueGray-300" />
+    <div class="text-center flex justify-between">
-      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+      <h6 class="text-blueGray-700 text-xl font-bold">Action</h6>
-        Contact Information
+      <div class="sm:flex sm:flex-col">
-      </h6>
-    <div class="text-center flex justify">
-      <div></div>
-      <div>
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
           on:click="{toggleModal}"
         >
           Create Profile
         </button>
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+          on:click="{toggleFilter}"
+        >
+          Filter
+        </button>
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
         >
           Apply to System
         </button>
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
         >
           Backup
@@ -49,36 +80,55 @@
 </div>
 
 {#if showModal}
-<div class="modal z-50 fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
-  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
-    <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
-      <div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
-        <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalCenteredScrollableLabel">
-          Modal title
-        </h5>
-        <button type="button"
-          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
-          data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body relative p-4">
-        <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
-    <br><br><br><br><br><br><br><br><br><br>
-    <p>Just like that.</p>
-      </div>
     <div
-        class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
-        <button type="button"
+    >
-          class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
+        <div class="rounded-t bg-cyan-500 mb-0 px-6 py-6">
-          data-bs-dismiss="modal">
+          <div class="text-center flex justify-between">
-          Close
+            <h6 class="text-teal-50 text-xl font-bold">Create Account</h6>
+          </div>
+        </div>
+        <div class="rounded-t bg-white mb-0 px-6 py-6">
+            <CardCreateWGUser />
+            <button
+              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="button"
+              on:click="{toggleModal}"
+            >
+              Apply
             </button>
-        <button type="button"
+            <button
-          class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
+              class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
-          Save changes
+              type="button"
+            >
+              Cancel
             </button>
         </div>
     </div>
+{:else if showFilter}
+    <div
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+    >
+        <div class="rounded-t bg-teal-500 mb-0 px-6 py-6">
+          <div class="text-center flex justify-between">
+            <h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
+            <button
+              class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="button"
+              on:click="{toggleFilter}"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+        <div class="rounded-t bg-white mb-0 px-6 py-6">
+            <div
+              class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+            >
+              <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
+                  <CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit} />
+              </div>
+            </div>
         </div>
     </div>
-
 {/if}

src/components/Cards/CardWGFilter.svelte

@@ -0,0 +1,81 @@
+<script>
+    export let submitFilter = null;
+    function validate() {
+            console.log("I'm the tester function");
+            submitFilter = "meta";
+            console.log(submitFilter);
+        }
+</script>
+
+    <form on:submit|preventDefault={validate}>
+      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+        User Information
+      </h6>
+      <div class="flex flex-wrap">
+        <div class="w-full lg:w-12/12 px-4">
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Username
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+
+              <option>GCI</option>
+              <option>META</option>
+              <option>PH-Training</option>
+
+            </select>
+          </div>
+
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Organization
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+              <option value="gci">GCI</option>
+              <option value="meta">META</option>
+              <option value="ph-training">PH-Training</option>
+            </select>
+          </div>
+
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Email Domain
+            </label>
+          <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+            <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+            <option>GCI</option>
+            <option>META</option>
+            <option>PH-Training</option>
+          </select>
+          </div>
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              ---
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+              <option>GCI</option>
+              <option>META</option>
+              <option>PH-Training</option>
+            </select>
+          </div>
+            <button
+              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="submit" >
+              Apply
+            </button>
+    </form>

src/components/Cards/CardWGProfiles.svelte

@@ -2,14 +2,22 @@
     // import axios from 'axios';
     // import {onMount} from 'svelte';
     let footprint;
-    export let wgProfileData = [];
+    let promise;
-    // onMount(async () => {
+
-    //         await axios.get('http://127.0.0.1:8000/api2/wgClients')
+    export let wgResponse = null;
-    //             .then( response => {
+    export let filter = null;
-    //                 wgProfileData = response.data
+
-    //                 });
+    async function getwgResponse(o_filter) {
-    //         console.log(wgProfileData);
+            const wgResponse = await fetch(
-    //         });
+                    '/api2/wgClients?filter='+o_filter
+                );
+
+            return await wgResponse.json();
+        }
+
+    // let promise = getwgResponse();
+    $: filter != null ?
+        promise = getwgResponse(filter) : promise = getwgReseponse("");
 
   // core components
 
@@ -19,6 +27,20 @@
   export let color = "light";
 </script>
 
+{#await promise}
+
+    <div
+      class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+    >
+      <div class="rounded bg-white mb-0 px-6 py-6">
+        <div class="text-center flex justify-between">
+          <h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
+        </div>
+      </div>
+    </div>
+
+{:then wgProfileData}
+
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
 >
@@ -39,42 +61,42 @@
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             #
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Name
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Mail
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Assigned IP
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Allowed IP
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="uppercase px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Status
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Created Time
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Action
           </th>
@@ -82,49 +104,49 @@
       </thead>
       <tbody>
         {#each wgProfileData as infRows}
-            <tr>
+            <tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.data_id }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.name }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.email }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.allocated_ips }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.allowed_ips }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 font-bold"
                 >
-                    { infRows.enabled }
+                    { infRows.enabled != true ? 'Disabled' : 'Enabled' }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.updated_at }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-right"
                 >
                   <TableDropdown />
                 </td>
@@ -134,3 +156,26 @@
     </table>
   </div>
 </div>
+
+{:catch error}
+
+    <div class="h-screen w-full">
+        <div
+          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+        >
+          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
+            <div class="text-center flex justify-between">
+              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
+            </div>
+          </div>
+          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
+            <div class="flex flex-wrap items-center">
+              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
+                <p class="text-lg text-red-500"> {error.message} </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+
+{/await}

src/components/Headers/GlobalHeader.svelte

@@ -1,8 +1,10 @@
 <script>
-
+  import HeaderStats from "components/Headers/HeaderStats.svelte";
 </script>
 
 <!-- Header -->
 <div class="relative bg-teal-500 md:pt-32 pb-32 pt-12">
 
+        <HeaderStats />
+    
 </div>

src/components/Sidebar/Sidebar.svelte

@@ -109,6 +109,19 @@
           </a>
         </li>
 
+        <li class="items-center">
+          <a
+            use:link
+            href="/admin/wgProfiles"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+          >
+            <i
+              class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
+            ></i>
+            WireGuard Profiles
+          </a>
+        </li>
+
         <li class="items-center">
           <a
             use:link
@@ -125,16 +138,15 @@
         <li class="items-center">
           <a
             use:link
-            href="/admin/wgProfiles"
+            href="/admin/wgBlast"
             class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
               class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
             ></i>
-            WireGuard Profiles
+            WireGuard Blast
           </a>
         </li>
-
         <li class="items-center">
           <a
             use:link

src/layouts/Admin.svelte

@@ -14,6 +14,7 @@
   import Tables from "views/admin/Tables.svelte";
   import wgLogs from "views/admin/wgLogs.svelte";
   import wgProfiles from "views/admin/wgProfiles.svelte";
+  import wgBlast from "views/admin/wgBlast.svelte";
   import Maps from "views/admin/Maps.svelte";
 
   export let location;
@@ -32,6 +33,7 @@
         <Route path="tables" component="{Tables}" />
         <Route path="wgLogs" component="{wgLogs}" />
         <Route path="wgProfiles" component="{wgProfiles}" />
+        <Route path="wgBlast" component="{wgBlast}" />
         <Route path="maps" component="{Maps}" />
       </Router>
       <FooterAdmin />

src/views/admin/Dashboard.svelte

@@ -11,9 +11,6 @@
 
 
 <div>
-    <div class="mt-3 mb-6">
-        <HeaderStats />
-    </div>
   <div class="flex flex-wrap">
     <div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
       <CardLineChart />

src/views/admin/wgBlast.svelte

@@ -0,0 +1,22 @@
+<script>
+  // core components
+  import axios from 'axios';
+  import {onMount} from 'svelte';
+  import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
+  import CardWGControl from "components/Cards/CardWGControl.svelte";
+  export let location;
+  let wgProfileFetch = [];
+  // onMount(async () => {
+  //         await axios.get('http://192.168.10.2:8000/api2/wgClients')
+  //             .then( response => {
+  //                 wgProfileFetch = response.data
+  //                 });
+  //         console.log(wgProfileFetch);
+  //         });
+</script>
+
+<div class="flex flex-wrap mt-4 mb-8">
+      <CardWGControl />
+      <CardWGProfile />
+
+</div>

src/views/admin/wgProfiles.svelte

@@ -4,20 +4,26 @@
   import {onMount} from 'svelte';
   import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
   import CardWGControl from "components/Cards/CardWGControl.svelte";
-  export let location;
+
+  let wgResponse = null;
+    let filter = "";
+    let unique = {};
+
   let wgProfileFetch = [];
-  onMount(async () => {
+
-          await axios.get('http://192.168.10.2:8000/api2/wgClients')
+    async function update_wg_table() {
-              .then( response => {
+
-                  wgProfileFetch = response.data
+        }
-                  });
+  // onMount(async () => {
-          console.log(wgProfileFetch);
+  //         await axios.get('http://192.168.10.2:8000/api2/wgClients')
-          });
+  //             .then( response => {
+  //                 wgProfileFetch = response.data
+  //                 });
+  //         console.log(wgProfileFetch);
+  //         });
 </script>
 
-<CardWGControl />
 <div class="flex flex-wrap mt-4 mb-8">
-      <CardWGProfile 
+    <CardWGControl bind:filter={filter}/>
-       wgProfileData = { wgProfileFetch }
+    <CardWGProfile wgResponse={wgResponse} bind:filter={filter}/>
-          />
 </div>