From 9499b4694dec11fc72af34bab3cfbfeb867835c8 Mon Sep 17 00:00:00 2001
From: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
Date: Tue, 14 Mar 2023 03:21:35 +0530
Subject: [PATCH] =?UTF-8?q?feat:=20typings=20&=20add=20IndexDb=20instead?=
 =?UTF-8?q?=20of=20ls=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>
---
 components/map/layers/Cluster.vue |  11 +-
 components/map/layers/Heatmap.vue |   7 +-
 components/map/layers/Marker.vue  |  27 +--
 composables/useExpense.ts         |  76 ++++++++-
 composables/useIdb.ts             |  23 +++
 lgtm.yml                          |   6 -
 package-lock.json                 |  92 +++++++++-
 package.json                      |   3 +
 pages/index.vue                   | 271 ++++++++++++++----------------
 types/expense.ts                  |  33 ++++
 10 files changed, 371 insertions(+), 178 deletions(-)
 create mode 100644 composables/useIdb.ts
 delete mode 100644 lgtm.yml
 create mode 100644 types/expense.ts

diff --git a/components/map/layers/Cluster.vue b/components/map/layers/Cluster.vue
index d62eadc6..9525193d 100644
--- a/components/map/layers/Cluster.vue
+++ b/components/map/layers/Cluster.vue
@@ -22,7 +22,7 @@
     SymbolLayerSpecification,
   } from 'maplibre-gl';
   import type { PropType } from 'vue';
-  import type { FeatureCollection, Point } from 'geojson';
+  import type { ExpenseFeatureCollection } from '~/types/expense';
   import { VLayerMapboxGeojson } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -32,7 +32,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
       },
       visibility: {
@@ -43,6 +43,13 @@
     },
     setup(props) {
       const cluster = ref({
+        // source: {
+        //   type: 'geojson',
+        //   data: props.data,
+        //   cluster: true,
+        //   clusterMaxZoom: 20,
+        //   clusterRadius: 40,
+        // } as GeoJSONSourceSpecification,
         source: computed(() => {
           return {
             type: 'geojson',
diff --git a/components/map/layers/Heatmap.vue b/components/map/layers/Heatmap.vue
index 8aac5bd9..9d645f50 100644
--- a/components/map/layers/Heatmap.vue
+++ b/components/map/layers/Heatmap.vue
@@ -22,7 +22,7 @@
     CircleLayerSpecification,
   } from 'maplibre-gl';
   import type { PropType } from 'vue';
-  import type { FeatureCollection, Point } from 'geojson';
+  import type { ExpenseFeatureCollection } from '~/types/expense';
   import { VLayerMapboxGeojson } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -32,7 +32,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
       },
       visibility: {
@@ -46,9 +46,6 @@
         source: {
           type: 'geojson',
           data: props.data,
-          cluster: true,
-          clusterMaxZoom: 20,
-          clusterRadius: 40,
         } as GeoJSONSourceSpecification,
         circleLayer: {
           id: 'expenses-heatmap-circle-layer',
diff --git a/components/map/layers/Marker.vue b/components/map/layers/Marker.vue
index a059dc2f..ecdc9756 100644
--- a/components/map/layers/Marker.vue
+++ b/components/map/layers/Marker.vue
@@ -5,6 +5,7 @@
         v-if="visibility"
         :key="idx"
         :coordinates="getExpenseMarkerCoordinates(marker)"
+        :popup-options="popupOptions"
         @click="$emit('update:popup-visibility', true)"
       >
         <template #markers="{ setRef }">
@@ -113,11 +114,10 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import type {
-    Feature,
-    FeatureCollection,
-    GeoJsonProperties,
-    Point,
-  } from 'geojson';
+    ExpenseFeature,
+    ExpenseFeatureCollection,
+  } from '~/types/expense';
+  import type { PopupOptions } from 'maplibre-gl';
   import { VMarker } from '~/lib/v-mapbox';
 
   export default defineComponent({
@@ -127,7 +127,7 @@
     },
     props: {
       data: {
-        type: Object as PropType<FeatureCollection<Point>>,
+        type: Object as PropType<ExpenseFeatureCollection>,
         required: true,
         description: 'Point type features within the FeatureCollection',
       },
@@ -136,6 +136,11 @@
         required: true,
         description: 'Whether to show the marker or not',
       },
+      popupOptions: {
+        type: Object as PropType<PopupOptions>,
+        required: true,
+        description: 'Options for the popup',
+      },
       popupVisibility: {
         type: Boolean as PropType<boolean>,
         required: true,
@@ -146,11 +151,11 @@
       /**
        * Gets the coordinates for the marker
        *
-       * @param {Feature<Point, GeoJsonProperties>} m - Marker
-       * @returns {number[]} - Coordinates
+       * @param {ExpenseFeature} m - Marker
+       * @returns {[number, number]} - Coordinates
        */
       function getExpenseMarkerCoordinates(
-        m: Feature<Point, GeoJsonProperties>,
+        m: ExpenseFeature,
       ): [number, number] {
         return [m.geometry.coordinates[0], m.geometry.coordinates[1]];
       }
@@ -159,11 +164,11 @@
        * Gets the color for the svg
        * marker based on the expense type
        *
-       * @param {Feature<Point>} m - Expense type
+       * @param {ExpenseFeature} m - Expense type
        * @returns {Record<string, boolean> | string} - Color object
        */
       function getExpenseMarkerColor(
-        m: Feature<Point, GeoJsonProperties>,
+        m: ExpenseFeature,
       ): Record<string, boolean> | string {
         if (m.properties) {
           return {
diff --git a/composables/useExpense.ts b/composables/useExpense.ts
index 5998bace..1df8a1cf 100644
--- a/composables/useExpense.ts
+++ b/composables/useExpense.ts
@@ -1,20 +1,80 @@
 import { defineStore } from 'pinia';
+import { v4 as uuid } from 'uuid';
+import type { PopupOptions } from 'maplibre-gl';
+import type { ExpenseForm, ExpenseFeatureCollection } from '~/types/expense';
 
 /**
  * Expense Store
  */
 export const useExpense = defineStore({
   id: 'expense',
-  state: () => {
-    return {
+  state: () => ({
+    map: {
       ui: {
-        loaded: false as boolean,
+        isMarker: true,
+        isCluster: false,
+        isHeatmap: false,
       },
-    };
-  },
-  actions: {
-    setLoaded(loaded: boolean) {
-      this.ui.loaded = loaded;
+      center: [73.8567, 18.5204],
+      zoom: 11,
+      marker: {
+        options: { draggable: true },
+        popup: {
+          options: {
+            closeButton: false,
+            closeOnClick: false,
+            offset: {
+              top: [0, 10],
+              bottom: [0, -10],
+            },
+          } as PopupOptions,
+        },
+        coordinates: [73.8567, 18.5204] as [number, number],
+      },
+    },
+    form: {
+      amount: undefined as number | undefined,
+      description: '' as string,
+      type: 'debit' as 'credit' | 'debit',
+    } as ExpenseForm,
+    geojson: {
+      id: uuid().split('-').join(''),
+      type: 'FeatureCollection',
+      features: [],
+    } as ExpenseFeatureCollection,
+    popup: {
+      shown: false,
+      options: {
+        closeButton: false,
+        closeOnClick: false,
+        offset: {
+          top: [0, 10],
+          bottom: [0, -10],
+        },
+      } as PopupOptions,
+    },
+  }),
+  getters: {
+    isMarker: (state): boolean => {
+      return (
+        !state.map.ui.isCluster &&
+        state.map.ui.isMarker &&
+        !state.map.ui.isHeatmap
+      );
+    },
+    isCluster: (state): boolean => {
+      return (
+        state.map.ui.isCluster &&
+        !state.map.ui.isMarker &&
+        !state.map.ui.isHeatmap
+      );
+    },
+    isHeatmap: (state): boolean => {
+      return (
+        !state.map.ui.isCluster &&
+        !state.map.ui.isMarker &&
+        state.map.ui.isHeatmap
+      );
     },
   },
 });
diff --git a/composables/useIdb.ts b/composables/useIdb.ts
new file mode 100644
index 00000000..3c158852
--- /dev/null
+++ b/composables/useIdb.ts
@@ -0,0 +1,23 @@
+import { openDB } from 'idb';
+import type { IDBPDatabase } from 'idb';
+import type { MyDB } from '~/types/expense';
+
+/**
+ * Composable for using idb
+ *
+ * @returns {Promise<IDBPDatabase<MyDB>>} - The IndexDB database
+ */
+async function useIdb(): Promise<IDBPDatabase<MyDB>> {
+  const db = await openDB<MyDB>('db', 1, {
+    upgrade(db) {
+      // Create Language Store
+      const expenseStore = db.createObjectStore('expenses', {
+        keyPath: 'id',
+      });
+      expenseStore.createIndex('by-id', 'id');
+    },
+  });
+  return db;
+}
+
+export { useIdb };
diff --git a/lgtm.yml b/lgtm.yml
deleted file mode 100644
index 266363c9..00000000
--- a/lgtm.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-extraction:
-  javascript:
-    index:
-      exclude:
-        - node_modules
-      typescript: full
diff --git a/package-lock.json b/package-lock.json
index 9dc031eb..5cf2ffe4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
       "dependencies": {
         "@pinia/nuxt": "^0.4.7",
         "click-outside-vue3": "^4.0.1",
+        "idb": "^7.1.1",
         "maplibre-gl": "^2.4.0",
         "pinia": "^2.0.33",
+        "uuid": "^9.0.0",
         "v-mapbox": "^4.0.0"
       },
       "devDependencies": {
@@ -22,6 +24,7 @@
         "@deck.gl/mapbox": "^8.9.1",
         "@nuxt/types": "^2.16.0",
         "@types/geojson": "^7946.0.10",
+        "@types/uuid": "^9.0.1",
         "@typescript-eslint/eslint-plugin": "^5.54.1",
         "@typescript-eslint/parser": "^5.54.1",
         "@vinayakkulkarni/prettier-config-vue": "^1.0.0",
@@ -223,6 +226,16 @@
         }
       }
     },
+    "node_modules/@azure/core-http/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/core-lro": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.5.1.tgz",
@@ -286,6 +299,16 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/@azure/core-rest-pipeline/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/core-tracing": {
       "version": "1.0.0-preview.13",
       "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.13.tgz",
@@ -366,6 +389,16 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/@azure/cosmos/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/data-tables": {
       "version": "13.2.1",
       "resolved": "https://registry.npmjs.org/@azure/data-tables/-/data-tables-13.2.1.tgz",
@@ -400,6 +433,16 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/@azure/data-tables/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/identity": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@azure/identity/-/identity-3.1.3.tgz",
@@ -441,6 +484,16 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/@azure/identity/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/keyvault-secrets": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@azure/keyvault-secrets/-/keyvault-secrets-4.6.0.tgz",
@@ -548,6 +601,16 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@azure/msal-node/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@azure/storage-blob": {
       "version": "12.13.0",
       "resolved": "https://registry.npmjs.org/@azure/storage-blob/-/storage-blob-12.13.0.tgz",
@@ -615,6 +678,16 @@
         }
       }
     },
+    "node_modules/@azure/storage-blob/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -5038,6 +5111,12 @@
         "source-map": "^0.6.1"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
@@ -9734,6 +9813,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -16511,11 +16595,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "optional": true,
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index f74f9493..9149dd96 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,10 @@
   "dependencies": {
     "@pinia/nuxt": "^0.4.7",
     "click-outside-vue3": "^4.0.1",
+    "idb": "^7.1.1",
     "maplibre-gl": "^2.4.0",
     "pinia": "^2.0.33",
+    "uuid": "^9.0.0",
     "v-mapbox": "^4.0.0"
   },
   "devDependencies": {
@@ -36,6 +38,7 @@
     "@deck.gl/mapbox": "^8.9.1",
     "@nuxt/types": "^2.16.0",
     "@types/geojson": "^7946.0.10",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "@vinayakkulkarni/prettier-config-vue": "^1.0.0",
diff --git a/pages/index.vue b/pages/index.vue
index c567cc71..28ce3190 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -38,17 +38,11 @@
             type="button"
             class="relative visible inline-flex items-center px-3 py-1.5 rounded-l-full border border-gray-300 border-opacity-25 bg-opacity-75 dark:bg-opacity-50 text-sm font-medium focus:z-10 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:border-indigo-500 active:ring-0"
             :class="{
-              'bg-indigo-800 text-gray-50': state.map.ui.isMarker,
+              'bg-indigo-800 text-gray-50': expenseStore.$state.map.ui.isMarker,
               'text-gray-800 bg-white dark:text-white dark:bg-gray-800':
-                !state.map.ui.isMarker,
+                !expenseStore.$state.map.ui.isMarker,
             }"
-            @click="
-              state.map.ui = {
-                isMarker: true,
-                isCluster: false,
-                isHeatmap: false,
-              }
-            "
+            @click="toggle('marker')"
           >
             <span class="sm:block hidden">Marker(s)</span>
             <svg
@@ -68,17 +62,12 @@
             type="button"
             class="-ml-px relative visible inline-flex items-center px-3 py-1.5 border border-gray-300 border-opacity-25 bg-opacity-75 dark:bg-opacity-50 text-sm font-medium focus:z-10 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:border-indigo-500 active:ring-0"
             :class="{
-              'bg-indigo-800 text-gray-50': state.map.ui.isCluster,
+              'bg-indigo-800 text-gray-50':
+                expenseStore.$state.map.ui.isCluster,
               'text-gray-800 bg-white dark:text-white dark:bg-gray-800':
-                !state.map.ui.isCluster,
+                !expenseStore.$state.map.ui.isCluster,
             }"
-            @click="
-              state.map.ui = {
-                isMarker: false,
-                isCluster: true,
-                isHeatmap: false,
-              }
-            "
+            @click="toggle('cluster')"
           >
             <span class="sm:block hidden">Cluster(s)</span>
             <svg
@@ -96,17 +85,12 @@
             type="button"
             class="-ml-px relative visible inline-flex items-center px-3 py-1.5 rounded-r-full border border-gray-300 border-opacity-25 bg-opacity-75 dark:bg-opacity-50 text-sm font-medium focus:z-10 focus:outline-none focus:ring-0 focus:ring-indigo-500 focus:border-indigo-500 active:ring-0"
             :class="{
-              'bg-indigo-800 text-gray-50 ': state.map.ui.isHeatmap,
+              'bg-indigo-800 text-gray-50 ':
+                expenseStore.$state.map.ui.isHeatmap,
               'text-gray-800 bg-white dark:text-white dark:bg-gray-800':
-                !state.map.ui.isHeatmap,
+                !expenseStore.$state.map.ui.isHeatmap,
             }"
-            @click="
-              state.map.ui = {
-                isMarker: false,
-                isCluster: false,
-                isHeatmap: true,
-              }
-            "
+            @click="toggle('heatmap')"
           >
             <span class="sm:block hidden">Heatmap</span>
             <svg
@@ -125,9 +109,9 @@
       </div>
       <template v-if="mapStore.loaded">
         <v-marker
-          :options="state.map.marker.options"
-          :popup-options="state.map.marker.popup.options"
-          v-model:coordinates="state.map.marker.coordinates"
+          :options="expenseStore.$state.map.marker.options"
+          :popup-options="expenseStore.$state.map.marker.popup.options"
+          v-model:coordinates="expenseStore.$state.map.marker.coordinates"
         >
           <template #markers="{ setRef }">
             <svg
@@ -161,30 +145,32 @@
                 class="flex items-center justify-between w-full px-4 py-2 border-b border-gray-300 dark:border-gray-600 dark:text-gray-50 text-gray-800"
               >
                 <div class="capitalize">
-                  {{ state.expense.form.type }}
+                  {{ expenseStore.$state.form.type }}
                 </div>
                 <button
                   type="button"
                   class="relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:ring-1 focus:ring-offset-1"
                   :class="{
                     'bg-green-600 focus:ring-green-500':
-                      state.expense.form.type === 'credit',
+                      expenseStore.$state.form.type === 'credit',
                     'bg-red-600 focus:ring-red-500':
-                      state.expense.form.type === 'debit',
+                      expenseStore.$state.form.type === 'debit',
                   }"
                   aria-pressed="false"
                   @click="
-                    state.expense.form.type === 'credit'
-                      ? (state.expense.form.type = 'debit')
-                      : (state.expense.form.type = 'credit')
+                    expenseStore.$state.form.type === 'credit'
+                      ? (expenseStore.$state.form.type = 'debit')
+                      : (expenseStore.$state.form.type = 'credit')
                   "
                 >
                   <span class="sr-only">Use setting</span>
                   <span
                     aria-hidden="true"
                     :class="{
-                      'translate-x-5': state.expense.form.type === 'debit',
-                      'translate-x-0': state.expense.form.type === 'credit',
+                      'translate-x-5':
+                        expenseStore.$state.form.type === 'debit',
+                      'translate-x-0':
+                        expenseStore.$state.form.type === 'credit',
                     }"
                     class="inline-block w-5 h-5 transition duration-200 ease-in-out transform bg-white rounded-full shadow pointer-events-none ring-0"
                   />
@@ -219,19 +205,19 @@
                     </div>
                     <input
                       id="expense"
-                      v-model.number="state.expense.form.amount"
+                      v-model.number="expenseStore.$state.form.amount"
                       type="text"
                       name="expense"
                       required="true"
                       class="block w-full pl-10 rounded-md sm:text-sm border-gray-300 outline-none dark:border-gray-400 dark:bg-gray-600 dark:text-gray-50 text-gray-900 bg-white"
                       :class="{
                         'focus:ring-green-500 focus:border-green-500':
-                          state.expense.form.type === 'credit',
+                          expenseStore.$state.form.type === 'credit',
                         'focus:ring-red-500 focus:border-red-500':
-                          state.expense.form.type === 'debit',
+                          expenseStore.$state.form.type === 'debit',
                       }"
                       :placeholder="
-                        state.expense.form.type === 'credit'
+                        expenseStore.$state.form.type === 'credit'
                           ? 'eg. 100'
                           : 'eg. 96'
                       "
@@ -247,18 +233,18 @@
                   </label>
                   <textarea
                     id="description"
-                    v-model="state.expense.form.description"
+                    v-model="expenseStore.$state.form.description"
                     name="description"
                     rows="2"
                     class="block w-full mt-1 rounded-md outline-none border-gray-300 dark:border-gray-400 dark:bg-gray-600 dark:text-gray-50 text-gray-900 bg-white py-2 px-3 sm:text-sm"
                     :class="{
                       'focus:ring-green-500 focus:border-green-500':
-                        state.expense.form.type === 'credit',
+                        expenseStore.$state.form.type === 'credit',
                       'focus:ring-red-500 focus:border-red-500':
-                        state.expense.form.type === 'debit',
+                        expenseStore.$state.form.type === 'debit',
                     }"
                     :placeholder="
-                      state.expense.form.type === 'credit'
+                      expenseStore.$state.form.type === 'credit'
                         ? 'eg. refund Rs. 100'
                         : 'eg. spent 96 on milk'
                     "
@@ -269,9 +255,9 @@
                     type="submit"
                     :class="{
                       'bg-red-600 hover:bg-red-700 focus:ring-red-500':
-                        state.expense.form.type === 'debit',
+                        expenseStore.$state.form.type === 'debit',
                       'bg-green-600 hover:bg-green-700 focus:ring-green-500':
-                        state.expense.form.type === 'credit',
+                        expenseStore.$state.form.type === 'credit',
                     }"
                     class="inline-flex items-center justify-center w-full px-4 py-1 text-sm font-medium text-white transition-colors duration-200 ease-in-out border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2"
                   >
@@ -285,25 +271,26 @@
         <!-- Marker with previously added data -->
         <template
           v-if="
-            state.expense.geojson !== null &&
-            state.expense.geojson.features.length > 0
+            expenseStore.$state.geojson !== null &&
+            expenseStore.$state.geojson.features.length > 0
           "
         >
           <expense-marker
-            v-if="marker"
-            :data="state.expense.geojson"
-            :visibility="marker"
-            v-model:popup-visibility="state.expense.popup.shown"
+            v-if="expenseStore.isMarker"
+            :data="expenseStore.$state.geojson"
+            :visibility="expenseStore.isMarker"
+            v-model:popup-options="expenseStore.$state.popup.options"
+            v-model:popup-visibility="expenseStore.$state.popup.shown"
           />
           <expense-cluster
-            v-if="cluster"
-            :data="state.expense.geojson"
-            :visibility="cluster"
+            v-if="expenseStore.isCluster"
+            :data="expenseStore.$state.geojson"
+            :visibility="expenseStore.isCluster"
           />
           <expense-heatmap
-            v-if="heatmap"
-            :data="state.expense.geojson"
-            :visibility="heatmap"
+            v-if="expenseStore.isHeatmap"
+            :data="expenseStore.$state.geojson"
+            :visibility="expenseStore.isHeatmap"
           />
         </template>
       </template>
@@ -312,15 +299,19 @@
 </template>
 
 <script lang="ts">
-  import type { Feature, FeatureCollection, Point } from 'geojson';
-  import type { MapMouseEvent, PopupOptions } from 'maplibre-gl';
-  import { computed, defineComponent, onMounted, reactive } from 'vue';
+  import type { MapMouseEvent } from 'maplibre-gl';
+  import type { ExpenseFeature, MyDB } from '~/types/expense';
+  import type { IDBPDatabase } from 'idb';
+  import { computed, defineComponent, onMounted } from 'vue';
   import CommonMap from '~/components/map/CommonMap.vue';
   import { VMarker } from '~/lib/v-mapbox';
   import Cluster from '~/components/map/layers/Cluster.vue';
   import Heatmap from '~/components/map/layers/Heatmap.vue';
   import Marker from '~/components/map/layers/Marker.vue';
   import { useMap } from '~/composables/useMap';
+  import { useExpense } from '~/composables/useExpense';
+  import { useIdb } from '~/composables/useIdb';
+  import { v4 as uuid } from 'uuid';
 
   export default defineComponent({
     name: 'Dashboard',
@@ -332,46 +323,10 @@
       ExpenseHeatmap: Heatmap,
     },
     setup() {
+      let db: IDBPDatabase<MyDB>;
       const mapStore = useMap();
-      const state = reactive({
-        map: {
-          center: [73.8567, 18.5204],
-          zoom: 11,
-          marker: {
-            options: { draggable: true },
-            popup: {
-              options: {
-                closeButton: false,
-                closeOnClick: false,
-                offset: {
-                  top: [0, 10],
-                  bottom: [0, -10],
-                },
-              } as PopupOptions,
-            },
-            coordinates: [73.8567, 18.5204] as [number, number],
-          },
-          ui: {
-            isMarker: true,
-            isCluster: false,
-            isHeatmap: false,
-          },
-        },
-        expense: {
-          form: {
-            amount: undefined as number | undefined,
-            description: '' as string,
-            type: 'debit' as 'credit' | 'debit',
-          },
-          popup: {
-            shown: false,
-          },
-          geojson: {
-            type: 'FeatureCollection',
-            features: [],
-          } as FeatureCollection<Point>,
-        },
-      });
+      const expenseStore = useExpense();
+
       const isDark = useDark();
       const runtimeConfig = useRuntimeConfig();
 
@@ -379,26 +334,15 @@
         return [isDark.value ? 'text-indigo-600' : 'text-indigo-500'];
       });
 
-      const marker = computed(
-        () =>
-          !state.map.ui.isCluster &&
-          state.map.ui.isMarker &&
-          !state.map.ui.isHeatmap,
-      );
-      const heatmap = computed(
-        () =>
-          !state.map.ui.isCluster &&
-          !state.map.ui.isMarker &&
-          state.map.ui.isHeatmap,
-      );
-      const cluster = computed(
-        () =>
-          state.map.ui.isCluster &&
-          !state.map.ui.isMarker &&
-          !state.map.ui.isHeatmap,
-      );
-
-      onMounted(() => {
+      onMounted(async () => {
+        db = await useIdb();
+        const expenses = await db.getAll('expenses');
+        if (expenses.length > 0) {
+          expenseStore.$patch((state) => {
+            state.geojson = expenses[0];
+          });
+        }
+        // Popuplate Basemaps
         mapStore.$patch((state) => {
           state.utils.basemaps.data.basemaps.push(
             {
@@ -431,49 +375,94 @@
             },
           );
         });
-        state.expense.geojson = JSON.parse(
-          localStorage.getItem('expenses') as any,
-        ) as FeatureCollection<Point>;
       });
 
       const onMapClicked = (e: MapMouseEvent): void => {
-        if (!state.expense.popup.shown) {
+        expenseStore.$patch((state) => {
           state.map.marker.coordinates = [e.lngLat.lng, e.lngLat.lat];
+        });
+      };
+
+      const toggle = (type: 'cluster' | 'heatmap' | 'marker') => {
+        switch (type.toLowerCase()) {
+          case 'marker':
+            expenseStore.$patch((state) => {
+              state.map.ui.isMarker = true;
+              state.map.ui.isCluster = false;
+              state.map.ui.isHeatmap = false;
+            });
+            break;
+          case 'cluster':
+            expenseStore.$patch((state) => {
+              state.map.ui.isMarker = false;
+              state.map.ui.isCluster = true;
+              state.map.ui.isHeatmap = false;
+            });
+            break;
+          case 'heatmap':
+            expenseStore.$patch((state) => {
+              state.map.ui.isMarker = false;
+              state.map.ui.isCluster = false;
+              state.map.ui.isHeatmap = true;
+            });
+            break;
+          default:
+            expenseStore.$patch((state) => {
+              state.map.ui.isMarker = true;
+              state.map.ui.isCluster = false;
+              state.map.ui.isHeatmap = false;
+            });
+            break;
         }
       };
 
-      const add = (): void => {
+      const add = async (): Promise<void> => {
         // Build a Feature of Type Point
-        const feature = {
+        const feature: ExpenseFeature = {
           type: 'Feature',
           geometry: {
             type: 'Point',
-            coordinates: state.map.marker.coordinates,
+            coordinates: expenseStore.$state.map.marker.coordinates,
           },
           properties: {
-            expense: state.expense.form,
+            expense: expenseStore.$state.form,
             date: Date.now(),
           },
-        } as Feature<Point>;
-        state.expense.geojson.features.push(feature);
-        localStorage.setItem('expenses', JSON.stringify(state.expense.geojson));
-        state.expense.form = {
-          amount: undefined,
-          description: '',
-          type: 'debit',
         };
+        if (expenseStore.$state.geojson.features.length > 0) {
+          expenseStore.$patch((state) => {
+            state.geojson.features.push(feature);
+          });
+        } else {
+          expenseStore.$patch((state) => {
+            state.geojson = {
+              id: uuid().split('-').join(''),
+              type: 'FeatureCollection',
+              features: [feature],
+            };
+          });
+        }
+        await db.put(
+          'expenses',
+          JSON.parse(JSON.stringify(expenseStore.$state.geojson)),
+        );
+        expenseStore.$patch((state) => {
+          state.form = {
+            amount: undefined,
+            description: '',
+            type: 'debit',
+          };
+        });
       };
 
       return {
-        state,
         mapStore,
+        expenseStore,
         // computed:
         getMarkerColor,
-        marker,
-        heatmap,
-        cluster,
         // methods:
         onMapClicked,
+        toggle,
         add,
       };
     },
diff --git a/types/expense.ts b/types/expense.ts
new file mode 100644
index 00000000..26582220
--- /dev/null
+++ b/types/expense.ts
@@ -0,0 +1,33 @@
+import type { DBSchema } from 'idb';
+
+export type ExpenseForm = {
+  amount: number | undefined;
+  description: string;
+  type: 'debit' | 'credit';
+};
+
+export type ExpenseFeature = {
+  type: 'Feature';
+  geometry: {
+    type: 'Point';
+    coordinates: [number, number];
+  };
+  properties: {
+    expense: ExpenseForm;
+    date: number;
+  };
+};
+
+export type ExpenseFeatureCollection = {
+  id: string;
+  type: 'FeatureCollection';
+  features: ExpenseFeature[];
+};
+
+export interface MyDB extends DBSchema {
+  expenses: {
+    value: ExpenseFeatureCollection;
+    key: string;
+    indexes: { 'by-id': string };
+  };
+}