From 619d532315a66d2f52551ccb570e77e4544cf96f Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Mon, 5 Aug 2024 13:25:00 +0200
Subject: [PATCH] typescript, vendors

---
 src/app.vue                      | 207 ++++++++++++++++++-------------
 src/assets/css/app.css           |   6 +
 src/package.json                 |   6 +-
 src/plugins/apexcharts.client.ts |   5 +
 src/pnpm-lock.yaml               | 113 +++++++++++++++++
 src/public/manifest.json         |  11 ++
 src/utils/api.ts                 |  19 ++-
 src/utils/localStorage.ts        |  25 ++++
 8 files changed, 306 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/css/app.css
 create mode 100644 src/plugins/apexcharts.client.ts
 create mode 100644 src/public/manifest.json
 create mode 100644 src/utils/localStorage.ts

diff --git a/src/app.vue b/src/app.vue
index 692137d6..57971bff 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -26,10 +26,8 @@
                 <path
                   d="M12,2.2c-5.4,0-9.8,4.4-9.8,9.8s4.4,9.8,9.8,9.8s9.8-4.4,9.8-9.8S17.4,2.2,12,2.2z M3.8,12c0-4.5,3.7-8.2,8.2-8.2v16.5C7.5,20.2,3.8,16.5,3.8,12z" />
               </svg>
-              <svg>
               <path stroke-linecap="round" stroke-linejoin="round"
                 d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
-              </svg>
             </button>
             <!-- Show / hide charts -->
             <label v-if="uiChartType > 0"
@@ -216,7 +214,7 @@
                               d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                               clip-rule="evenodd" />
                           </svg>
-                          {{ client.transferTxCurrent | bytes }}/s
+                          {{ bytes(client.transferTxCurrent) }}/s
                         </span>
 
                         <!-- Inline Transfer RX -->
@@ -229,13 +227,13 @@
                               d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                               clip-rule="evenodd" />
                           </svg>
-                          {{ client.transferRxCurrent | bytes }}/s
+                          {{ bytes(client.transferRxCurrent) }}/s
                         </span>
                         <!-- Last seen -->
                         <span class="text-gray-400 dark:text-neutral-500 whitespace-nowrap"
                           v-if="client.latestHandshakeAt"
                           :title="$t('lastSeen') + dateTime(new Date(client.latestHandshakeAt))">
-                          {{ !uiTrafficStats ? " · " : "" }}{{ new Date(client.latestHandshakeAt) | timeago }}
+                          {{ !uiTrafficStats ? " · " : "" }}{{ timeago(new Date(client.latestHandshakeAt)) }}
                         </span>
                       </div>
                     </div>
@@ -254,8 +252,7 @@
                               clip-rule="evenodd" />
                           </svg>
                           <div>
-                            <span class="text-gray-700 dark:text-neutral-200">{{ client.transferTxCurrent |
-                              bytes }}/s</span>
+                            <span class="text-gray-700 dark:text-neutral-200">{{ bytes(client.transferTxCurrent) }}/s</span>
                             <!-- Total TX -->
                             <br><span class="font-regular" style="font-size:0.85em">{{ bytes(client.transferTx)
                               }}</span>
@@ -275,8 +272,7 @@
                               clip-rule="evenodd" />
                           </svg>
                           <div>
-                            <span class="text-gray-700 dark:text-neutral-200">{{ client.transferRxCurrent |
-                              bytes }}/s</span>
+                            <span class="text-gray-700 dark:text-neutral-200">{{ bytes(client.transferRxCurrent) }}/s</span>
                             <!-- Total RX -->
                             <br><span class="font-regular" style="font-size:0.85em">{{ bytes(client.transferRx)
                               }}</span>
@@ -601,10 +597,36 @@
 </template>
 
 <script setup lang="ts">
+import "~/assets/css/app.css";
+import {sha256} from "js-sha256";
+import {format as timeago} from "timeago.js";
+
 useHead({
   bodyAttrs: {
     class: 'bg-gray-50 dark:bg-neutral-800'
-  }
+  },
+  link: [
+    {
+      rel: "manifest",
+      href: "/manifest.json"
+    },
+    {
+      rel: "icon",
+      type: "image/png",
+      href: "/favicon.png"
+    },
+    {
+      rel: "apple-touch-icon",
+      href: "/apple-touch-icon.png"
+    }
+  ],
+  meta: [
+    {
+      name: "apple-mobile-web-app-capable",
+      content: "yes"
+    }
+  ],
+  title: "WireGuard"
 })
 
 const UI_CHART_TYPES = [
@@ -625,25 +647,54 @@ const authenticating = ref(false);
 const password = ref<null|string>(null);
 const requiresPassword = ref<null|boolean>(null);
 
-const clients = ref<null|unknown[]>(null);
-const clientsPersist = ref({});
-const clientDelete = ref(null);
-const clientCreate = ref(null);
-const clientCreateName = ref('');
-const clientEditName = ref(null);
-const clientEditNameId = ref(null);
-const clientEditAddress = ref(null);
-const clientEditAddressId = ref(null);
-const qrcode = ref(null);
+type Client = {
+  id: string,
+  name: string,
+  address: string
+  enabled: boolean,
+  transferRx: number,
+  transferTx: number,
+  transferTxSeries: number,
+  transferRxSeries: number,
+  avatar?: string,
+  latestHandshakeAt: string|null,
+  createdAt: Date,
+  downloadableConfig: boolean,
+  updatedAt: Date
+} & Omit<ClientPersist, 'transferRxSeries' | 'transferTxSeries'>
+
+type ClientPersist = {
+  transferRxHistory: number[],
+  transferRxPrevious: number
+  transferRxCurrent: number,
+  transferRxSeries: {name: string, data: number[]}[],
+  hoverRx: unknown
+  transferTxHistory: number[],
+  transferTxPrevious: number,
+  transferTxCurrent: number,
+  transferTxSeries: {name: string, data: number[]}[],
+  hoverTx: unknown,
+}
+
+const clients = ref<null|Client[]>(null);
+const clientsPersist = ref<Record<string, ClientPersist>>({});
+const clientDelete = ref<null|Client>(null);
+const clientCreate = ref<null|boolean>(null);
+const clientCreateName = ref<string>('');
+const clientEditName = ref<null|string>(null);
+const clientEditNameId = ref<null|string>(null);
+const clientEditAddress = ref<null|string>(null);
+const clientEditAddressId = ref<null|string>(null);
+const qrcode = ref<null|string>(null);
 
 const currentRelease = ref(null);
-const latestRelease = ref(null);
+const latestRelease = ref<null | {version: number, changelog: string}>(null);
 
 const uiTrafficStats = ref(false);
 
 const uiChartType = ref(0);
 const uiShowCharts = ref(getItem('uiShowCharts') === '1');
-const uiTheme = ref(getItem('theme') || 'auto');
+const uiTheme = ref<Theme>(getItem('theme') || 'auto');
 const prefersDarkScheme = import.meta.client ? window.matchMedia('(prefers-color-scheme: dark)') : null;
 
 const theme = computed(() => {
@@ -754,12 +805,12 @@ async function refresh({
       client.avatar = `https://gravatar.com/avatar/${sha256(client.name.toLowerCase().trim())}.jpg`;
     }
 
-    if (!clientsPersist[client.id]) {
-      clientsPersist[client.id] = {};
-      clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
-      clientsPersist[client.id].transferRxPrevious = client.transferRx;
-      clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
-      clientsPersist[client.id].transferTxPrevious = client.transferTx;
+    if (!clientsPersist.value[client.id]) {
+      clientsPersist.value[client.id] = {};
+      clientsPersist.value[client.id].transferRxHistory = Array(50).fill(0);
+      clientsPersist.value[client.id].transferRxPrevious = client.transferRx;
+      clientsPersist.value[client.id].transferTxHistory = Array(50).fill(0);
+      clientsPersist.value[client.id].transferTxPrevious = client.transferTx;
     }
 
     // Debug
@@ -768,47 +819,47 @@ async function refresh({
     // client.latestHandshakeAt = new Date();
     // this.requiresPassword = true;
 
-    clientsPersist[client.id].transferRxCurrent = client.transferRx - clientsPersist[client.id].transferRxPrevious;
-    clientsPersist[client.id].transferRxPrevious = client.transferRx;
-    clientsPersist[client.id].transferTxCurrent = client.transferTx - clientsPersist[client.id].transferTxPrevious;
-    clientsPersist[client.id].transferTxPrevious = client.transferTx;
+    clientsPersist.value[client.id].transferRxCurrent = client.transferRx - clientsPersist.value[client.id].transferRxPrevious;
+    clientsPersist.value[client.id].transferRxPrevious = client.transferRx;
+    clientsPersist.value[client.id].transferTxCurrent = client.transferTx - clientsPersist.value[client.id].transferTxPrevious;
+    clientsPersist.value[client.id].transferTxPrevious = client.transferTx;
 
     if (updateCharts) {
-      clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
-      clientsPersist[client.id].transferRxHistory.shift();
+      clientsPersist.value[client.id].transferRxHistory.push(clientsPersist.value[client.id].transferRxCurrent);
+      clientsPersist.value[client.id].transferRxHistory.shift();
 
-      clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
-      clientsPersist[client.id].transferTxHistory.shift();
+      clientsPersist.value[client.id].transferTxHistory.push(clientsPersist.value[client.id].transferTxCurrent);
+      clientsPersist.value[client.id].transferTxHistory.shift();
 
-      clientsPersist[client.id].transferTxSeries = [{
+      clientsPersist.value[client.id].transferTxSeries = [{
         name: 'Tx',
-        data: clientsPersist[client.id].transferTxHistory,
+        data: clientsPersist.value[client.id].transferTxHistory,
       }];
 
-      clientsPersist[client.id].transferRxSeries = [{
+      clientsPersist.value[client.id].transferRxSeries = [{
         name: 'Rx',
-        data: clientsPersist[client.id].transferRxHistory,
+        data: clientsPersist.value[client.id].transferRxHistory,
       }];
 
-      client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
-      client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
+      client.transferTxHistory = clientsPersist.value[client.id].transferTxHistory;
+      client.transferRxHistory = clientsPersist.value[client.id].transferRxHistory;
       client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
 
-      client.transferTxSeries = clientsPersist[client.id].transferTxSeries;
-      client.transferRxSeries = clientsPersist[client.id].transferRxSeries;
+      client.transferTxSeries = clientsPersist.value[client.id].transferTxSeries;
+      client.transferRxSeries = clientsPersist.value[client.id].transferRxSeries;
     }
 
-    client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
-    client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;
+    client.transferTxCurrent = clientsPersist.value[client.id].transferTxCurrent;
+    client.transferRxCurrent = clientsPersist.value[client.id].transferRxCurrent;
 
-    client.hoverTx = clientsPersist[client.id].hoverTx;
-    client.hoverRx = clientsPersist[client.id].hoverRx;
+    client.hoverTx = clientsPersist.value[client.id].hoverTx;
+    client.hoverRx = clientsPersist.value[client.id].hoverRx;
 
     return client;
   });
 }
 
-function login(e) {
+function login(e: Event) {
   e.preventDefault();
 
   if (!password) return;
@@ -816,7 +867,7 @@ function login(e) {
 
   authenticating.value = true;
   api.createSession({
-    password: password.value,
+    password: password.value
   })
     .then(async () => {
       const session = await api.getSession();
@@ -834,7 +885,7 @@ function login(e) {
     });
 }
 
-function logout(e) {
+function logout(e: Event) {
   e.preventDefault();
 
   api.deleteSession()
@@ -854,27 +905,36 @@ function createClient() {
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function deleteClient(client) {
+function deleteClient(client: Client|null) {
+  if (client === null) {
+    return;
+  }
   api.deleteClient({ clientId: client.id })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function enableClient(client) {
+function enableClient(client: Client) {
   api.enableClient({ clientId: client.id })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function disableClient(client) {
+function disableClient(client: Client) {
   api.disableClient({ clientId: client.id })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function updateClientName(client, name: string) {
+function updateClientName(client: Client, name: string) {
+  if (name === null) {
+    return;
+  }
   api.updateClientName({ clientId: client.id, name })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
 }
-function updateClientAddress(client, address: string) {
+function updateClientAddress(client: Client, address: string|null) {
+  if (address === null) {
+    return;
+  }
   api.updateClientAddress({ clientId: client.id, address })
     .catch((err) => alert(err.message || err.toString()))
     .finally(() => refresh().catch(console.error));
@@ -895,15 +955,16 @@ function restoreConfig(e) {
     alert('Failed to load your file!');
   }
 }
+
 function toggleTheme() {
-  const themes = ['light', 'dark', 'auto'];
+  const themes = ['light', 'dark', 'auto'] as Theme[];
   const currentIndex = themes.indexOf(uiTheme.value);
   const newIndex = (currentIndex + 1) % themes.length;
   uiTheme.value = themes[newIndex];
   setItem('theme', uiTheme.value);
   setTheme(uiTheme.value);
 }
-function setTheme(theme) {
+function setTheme(theme: Theme) {
   const { classList } = document.documentElement;
   const shouldAddDarkClass = theme === 'dark' || (theme === 'auto' && prefersDarkScheme?.matches);
   classList.toggle('dark', shouldAddDarkClass);
@@ -914,7 +975,7 @@ function handlePrefersChange(e: MediaQueryListEventMap["change"]) {
   }
 }
 function toggleCharts() {
-  setItem('uiShowCharts', uiShowCharts.value ? 1 : 0);
+  setItem('uiShowCharts', uiShowCharts.value ? '1' : '0');
 }
 
 const {availableLocales, locale} = useI18n();
@@ -972,7 +1033,7 @@ onMounted(() => {
         .then((releases) => {
           const releasesArray = Object.entries(releases).map(([version, changelog]) => ({
             version: parseInt(version, 10),
-            changelog,
+            changelog: changelog as string,
           }));
           releasesArray.sort((a, b) => {
             return b.version - a.version;
@@ -1009,13 +1070,12 @@ const chartOptionsRX = computed(() => {
 })
 
 const updateCharts = computed(() => {
-  return uiChartType.value > 0 && uiShowCharts;
+  return uiChartType.value > 0 && uiShowCharts.value;
 })
 
-function bytes(bytes, decimals, kib, maxunit) {
-  kib = kib || false;
+function bytes(bytes: number, decimals? = 2, kib? = false, maxunit?: string) {
   if (bytes === 0) return '0 B';
-  if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes)) return 'NaN';
+  if (Number.isNaN(bytes) && !Number.isFinite(bytes)) return 'NaN';
   const k = kib ? 1024 : 1000;
   const dm = decimals != null && !Number.isNaN(decimals) && decimals >= 0 ? decimals : 2;
   const sizes = kib
@@ -1026,26 +1086,7 @@ function bytes(bytes, decimals, kib, maxunit) {
     const index = sizes.indexOf(maxunit);
     if (index !== -1) i = index;
   }
-  // eslint-disable-next-line no-restricted-properties
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
-function getItem(item: string) {
-  if (import.meta.client) {
-    return localStorage.getItem(item)
-  } else {
-    return undefined
-  }
-}
-
-function setItem(item: string, value: string) {
-  if (import.meta.client) {
-    localStorage.setItem(item, value)
-  
-    return true
-  } else {
-    return false
-  }
-}
-
 </script>
\ No newline at end of file
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
new file mode 100644
index 00000000..22a02051
--- /dev/null
+++ b/src/assets/css/app.css
@@ -0,0 +1,6 @@
+[v-cloak] {
+    display: none;
+  }
+  .line-chart .apexcharts-svg{
+    transform: translateY(3px);
+  }
\ No newline at end of file
diff --git a/src/package.json b/src/package.json
index 29119379..15eabe8b 100644
--- a/src/package.json
+++ b/src/package.json
@@ -18,11 +18,15 @@
   "dependencies": {
     "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "apexcharts": "^3.51.0",
     "bcryptjs": "^2.4.3",
     "debug": "^4.3.6",
+    "js-sha256": "^0.11.0",
     "nuxt": "^3.12.4",
     "qrcode": "^1.5.3",
-    "vue": "latest"
+    "timeago.js": "^4.0.2",
+    "vue": "latest",
+    "vue3-apexcharts": "^1.5.3"
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.5.0",
diff --git a/src/plugins/apexcharts.client.ts b/src/plugins/apexcharts.client.ts
new file mode 100644
index 00000000..43a40726
--- /dev/null
+++ b/src/plugins/apexcharts.client.ts
@@ -0,0 +1,5 @@
+import VueApexCharts from "vue3-apexcharts";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueApexCharts);
+});
\ No newline at end of file
diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml
index b060abb1..8b00f5ac 100644
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@@ -14,21 +14,33 @@ importers:
       '@nuxtjs/tailwindcss':
         specifier: ^6.12.1
         version: 6.12.1(magicast@0.3.4)(rollup@4.19.2)
+      apexcharts:
+        specifier: ^3.51.0
+        version: 3.51.0
       bcryptjs:
         specifier: ^2.4.3
         version: 2.4.3
       debug:
         specifier: ^4.3.6
         version: 4.3.6
+      js-sha256:
+        specifier: ^0.11.0
+        version: 0.11.0
       nuxt:
         specifier: ^3.12.4
         version: 3.12.4(@parcel/watcher@2.4.1)(@types/node@22.0.2)(eslint@9.8.0)(ioredis@5.4.1)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.19.2)(terser@5.31.3)(typescript@5.5.4)(vite@5.3.5(@types/node@22.0.2)(terser@5.31.3))(vue-tsc@2.0.29(typescript@5.5.4))
       qrcode:
         specifier: ^1.5.3
         version: 1.5.3
+      timeago.js:
+        specifier: ^4.0.2
+        version: 4.0.2
       vue:
         specifier: latest
         version: 3.4.35(typescript@5.5.4)
+      vue3-apexcharts:
+        specifier: ^1.5.3
+        version: 1.5.3(apexcharts@3.51.0)(vue@3.4.35(typescript@5.5.4))
     devDependencies:
       '@nuxt/eslint':
         specifier: ^0.5.0
@@ -1450,6 +1462,9 @@ packages:
   '@vue/shared@3.4.35':
     resolution: {integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==}
 
+  '@yr/monotone-cubic-spline@1.0.3':
+    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -1518,6 +1533,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  apexcharts@3.51.0:
+    resolution: {integrity: sha512-WpCdVdGiJjf9SAyEeg2rl3q5OqCcNqiEmH0+filMraUiH6Vqyn5GFeMMyH0pon44xjNr1G0xzIRERKRmsGEuRA==}
+
   aproba@2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
 
@@ -2701,6 +2719,9 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
+  js-sha256@0.11.0:
+    resolution: {integrity: sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -3898,6 +3919,37 @@ packages:
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
+  svg.draggable.js@2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.easing.js@2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.filter.js@2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.js@2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+
+  svg.pathmorphing.js@0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.resize.js@1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+
   svgo@3.3.2:
     resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
     engines: {node: '>=14.0.0'}
@@ -3952,6 +4004,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  timeago.js@4.0.2:
+    resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4302,6 +4357,12 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue3-apexcharts@1.5.3:
+    resolution: {integrity: sha512-yaHTPoj0iVKAtEVg8wEwIwwvf0VG+lPYNufCf3txRzYQOqdKPoZaZ9P3Dj3X+2A1XY9O1kcTk9HVqvLo+rppvQ==}
+    peerDependencies:
+      apexcharts: '> 3.0.0'
+      vue: '> 3.0.0'
+
   vue@3.4.35:
     resolution: {integrity: sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==}
     peerDependencies:
@@ -6046,6 +6107,8 @@ snapshots:
 
   '@vue/shared@3.4.35': {}
 
+  '@yr/monotone-cubic-spline@1.0.3': {}
+
   abbrev@1.1.1: {}
 
   abort-controller@3.0.0:
@@ -6107,6 +6170,16 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  apexcharts@3.51.0:
+    dependencies:
+      '@yr/monotone-cubic-spline': 1.0.3
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
+
   aproba@2.0.0: {}
 
   archiver-utils@5.0.2:
@@ -7390,6 +7463,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  js-sha256@0.11.0: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.0: {}
@@ -8732,6 +8807,37 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
+  svg.draggable.js@2.2.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.easing.js@2.0.0:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.filter.js@2.0.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.js@2.7.1: {}
+
+  svg.pathmorphing.js@0.1.3:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.resize.js@1.4.3:
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+
+  svg.select.js@2.1.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.select.js@3.0.1:
+    dependencies:
+      svg.js: 2.7.1
+
   svgo@3.3.2:
     dependencies:
       '@trysound/sax': 0.2.0
@@ -8828,6 +8934,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  timeago.js@4.0.2: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyrainbow@1.2.0: {}
@@ -9194,6 +9302,11 @@ snapshots:
       semver: 7.6.3
       typescript: 5.5.4
 
+  vue3-apexcharts@1.5.3(apexcharts@3.51.0)(vue@3.4.35(typescript@5.5.4)):
+    dependencies:
+      apexcharts: 3.51.0
+      vue: 3.4.35(typescript@5.5.4)
+
   vue@3.4.35(typescript@5.5.4):
     dependencies:
       '@vue/compiler-dom': 3.4.35
diff --git a/src/public/manifest.json b/src/public/manifest.json
new file mode 100644
index 00000000..45c96b2f
--- /dev/null
+++ b/src/public/manifest.json
@@ -0,0 +1,11 @@
+{
+    "name": "WireGuard",
+    "display": "standalone",
+    "background_color": "#fff",
+    "icons": [
+      {
+        "src": "/favicon.png",
+        "type": "image/png"
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 6628bfd9..1fb203c5 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -1,6 +1,21 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 
+export type APIClient = {
+  "id": string,
+  "name": string,
+  "enabled": boolean,
+  "address": string,
+  "publicKey": string,
+  "createdAt": string,
+  "updatedAt": string,
+  "downloadableConfig": boolean,
+  "persistentKeepalive": string,
+  "latestHandshakeAt": null,
+  "transferRx": number,
+  "transferTx": number
+}
+
 class API {
 
   async call({ method, path, body }: {
@@ -66,7 +81,7 @@ class API {
     });
   }
 
-  async createSession({ password }: {password: string}) {
+  async createSession({ password }: {password: string|null}) {
     return this.call({
       method: 'post',
       path: '/session',
@@ -85,7 +100,7 @@ class API {
     return this.call({
       method: 'get',
       path: '/wireguard/client',
-    }).then((clients) => clients.map((client) => ({
+    }).then((clients: APIClient[]) => clients.map((client) => ({
       ...client,
       createdAt: new Date(client.createdAt),
       updatedAt: new Date(client.updatedAt),
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
new file mode 100644
index 00000000..7e7c692f
--- /dev/null
+++ b/src/utils/localStorage.ts
@@ -0,0 +1,25 @@
+export type Theme = 'light' | 'dark' | 'auto'
+
+export type LocalStorage = {
+    theme: Theme,
+    uiShowCharts: '1' | '0',
+    lang: string
+}
+  
+export function getItem<K extends keyof LocalStorage>(item: K): LocalStorage[K]|null {
+if (import.meta.client) {
+    return localStorage.getItem(item) as LocalStorage[K]|null
+} else {
+    return null
+}
+}
+
+export function setItem<K extends keyof LocalStorage>(item: K, value: LocalStorage[K]) {
+    if (import.meta.client) {
+      localStorage.setItem(item, value)
+    
+      return true
+    } else {
+      return false
+    }
+  }
\ No newline at end of file