From f323b5d9af0af3406643e510573b39087440c60f Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Wed, 25 Oct 2023 14:22:25 +0530
Subject: [PATCH 1/9] Implemented: UI for user search landing page (#2)

---
 src/components/UserPopover.vue |  30 ++++++
 src/locales/en.json            |  11 +++
 src/main.ts                    |  32 +++----
 src/router/index.ts            |  10 ++
 src/theme/variables.css        |  87 ++++++++++++++++++
 src/views/Home.vue             | 162 +++++++++++++++++++++++++++++++++
 6 files changed, 316 insertions(+), 16 deletions(-)
 create mode 100644 src/components/UserPopover.vue
 create mode 100644 src/views/Home.vue

diff --git a/src/components/UserPopover.vue b/src/components/UserPopover.vue
new file mode 100644
index 0000000..3f7b5b2
--- /dev/null
+++ b/src/components/UserPopover.vue
@@ -0,0 +1,30 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>username</ion-list-header>
+      <ion-item button>{{ $t("Edit profile") }}</ion-item>
+      <ion-item button>{{ $t("Reset password") }}</ion-item>
+      <ion-item button lines="none">{{ $t("Deactivate") }}</ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+  
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'UserPopover',
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index e69de29..776f2ef 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -0,0 +1,11 @@
+{
+  "Clearance": "Clearance",
+  "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "created": "created",
+  "Deactivate": "Deactivate",
+  "Edit profile": "Edit profile",
+  "Reset password": "Reset password",
+  "Search users": "Search users",
+  "Status": "Status",
+  "Users": "Users"
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 655ae6a..02736d2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,7 +27,7 @@ import '@hotwax/apps-theme';
 
 import i18n from './i18n'
 import store from './store'
-import { DateTime } from 'luxon';
+// import { DateTime } from 'luxon';
 
 import logger from './logger';
 
@@ -43,21 +43,21 @@ const app = createApp(App)
   .use(store);
 
 // Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
-app.config.globalProperties.$filters = {
-  formatDate(value: any, inFormat?: string, outFormat?: string) {
-    // TODO Make default format configurable and from environment variables
-    if(inFormat){
-      return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-    }
-    return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-  },
-  formatUtcDate(value: any, inFormat?: any, outFormat?: string) {
-    // TODO Make default format configurable and from environment variables
-    const userProfile = store.getters['user/getUserProfile'];
-    // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-    return DateTime.fromISO(value, { zone: 'utc' }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')  
-  }
-}
+// app.config.globalProperties.$filters = {
+//   formatDate(value: any, inFormat?: string, outFormat?: string) {
+//     // TODO Make default format configurable and from environment variables
+//     if(inFormat){
+//       return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
+//     }
+//     return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
+//   },
+//   formatUtcDate(value: any, inFormat?: any, outFormat?: string) {
+//     // TODO Make default format configurable and from environment variables
+//     const userProfile = store.getters['user/getUserProfile'];
+//     // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
+//     return DateTime.fromISO(value, { zone: 'utc' }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')
+//   }
+// }
 
 router.isReady().then(() => {
   app.mount('#app');
diff --git a/src/router/index.ts b/src/router/index.ts
index a45d6e7..830fefd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,17 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
+import Home from '@/views/Home.vue';
 
 const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    redirect: '/home'
+  },
+  {
+    path: '/home',
+    name: 'Home',
+    component: Home,
+  },
 ]
 
 const router = createRouter({
diff --git a/src/theme/variables.css b/src/theme/variables.css
index d55e9db..52a42e2 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -256,7 +256,85 @@ http://ionicframework.com/docs/theming/ */
   margin: var(--spacer-sm);
 }
 
+.find {
+  display: grid;
+  grid-template-areas: "search"
+                       "main";
+}
+
+.find > .filters{
+  display: none;
+}
+
+.find > main {
+  grid-area: main;
+}
+
+.filters {
+  grid-area: filters;
+}
+
+.search {
+  grid-area: search;
+}
+
+.list-item {
+  --columns-mobile: 2;
+  --columns-tablet: 5;
+  --columns-desktop: 8;
+  --col-calc: var(--columns-mobile);
+  --implicit-columns: calc(var(--col-calc) - 1);
+  display: grid;
+  grid-template-columns: repeat(var(--implicit-columns), 1fr) max-content;
+  justify-items: center;
+  align-items: center;
+}
+
+.list-item > * {
+  display: none;
+}
+
+.list-item > *:last-child {
+  display: unset;
+  justify-self: end;
+}
+
+.list-item > ion-label {
+  text-align: center;
+}
+
+.list-item > *:first-child {
+  display: unset;
+  justify-self: start
+}
+
+@media (min-width: 700px) {
+  .list-item {
+    --col-calc: var(--columns-tablet);
+  }
+}
+
 @media (min-width: 991px) {
+  .find {
+    grid: "search  main" min-content
+          "filters main" 1fr
+          / 375px;
+    column-gap: var(--spacer-2xl);
+    margin: var(--spacer-lg);
+  }
+
+  .filters {
+    margin-top: var(--spacer-lg);
+  }
+
+  .filters {
+    margin-top: var(--spacer-lg);
+  }
+
+  .find > .filters{
+    display: unset;
+  }
+
   .desktop-only {
     display: unset;
   }
@@ -264,4 +342,13 @@ http://ionicframework.com/docs/theming/ */
   .mobile-only {
     display: none;
   }
+
+  .list-item {
+    --col-calc: var(--columns-desktop);
+  }
+
+  .list-item > * {
+    display: unset;
+  }
+
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..a5a98e3
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,162 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ $t("Users") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div class="find">
+        <section class="search">
+          <ion-searchbar :placeholder="$t('Search users')" />
+        </section>
+
+        <aside class="filters">
+          <ion-list>
+            <ion-item lines="none">
+              <ion-icon :icon="idCardOutline" slot="start" />
+              <ion-label>{{ $t("Clearance") }}</ion-label>
+              <ion-select interface="popover" value="a">
+                <ion-select-option value="a">Fulfillment manager</ion-select-option>
+                <ion-select-option value="b">Product store</ion-select-option>
+                <ion-select-option value="c">Product store</ion-select-option>
+              </ion-select>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-icon :icon="toggleOutline" slot="start" />
+              <ion-label>{{ $t("Status") }}</ion-label>
+              <ion-select interface="popover" value="active">
+                <ion-select-option value="active">Active</ion-select-option>
+                <ion-select-option value="away">Away</ion-select-option>
+                <ion-select-option value="deactivated">Deactivated</ion-select-option>
+              </ion-select>
+            </ion-item>
+          </ion-list>
+        </aside>
+
+        <main>
+          <div class="list-item">
+            <ion-item lines="none">
+              <ion-label>
+                Fullname
+                <p>username</p>
+                <p>email</p>
+              </ion-label>
+            </ion-item>
+
+            <ion-label>
+              14 Jan 2021
+              <p>{{ $t("created") }}</p>
+            </ion-label>
+
+            <ion-chip outline>
+              <ion-label>{{ "Security Groups" }}</ion-label>
+            </ion-chip>
+
+            <div>
+              <ion-button fill="clear" color="medium" @click="openUserPopover">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+              </ion-button>
+            </div>
+          </div>
+
+          <hr />
+        </main>
+      </div>
+
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button>
+          <ion-icon :icon="addOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonChip,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonSearchbar,
+  IonSelect,
+  IonSelectOption,
+  IonToolbar,
+  IonTitle,
+  popoverController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import {
+  addOutline,
+  ellipsisVerticalOutline,
+  idCardOutline,
+  toggleOutline,
+} from 'ionicons/icons';
+import { useRouter } from 'vue-router';
+import UserPopover from '@/components/UserPopover.vue';
+
+
+export default defineComponent({
+  name: 'Users',
+  components: {
+    IonButton,
+    IonChip,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonSearchbar,
+    IonSelect,
+    IonSelectOption,
+    IonToolbar,
+    IonTitle
+  },
+  methods: {
+    async openUserPopover(ev: Event) {
+      const popover = await popoverController.create({
+        component: UserPopover,
+        event: ev,
+        translucent: true,
+        showBackdrop: false,
+      });
+      return popover.present();
+    }
+  },
+  setup() {
+    const router = useRouter();
+
+    return {
+      addOutline,
+      ellipsisVerticalOutline,
+      idCardOutline,
+      toggleOutline,
+      router,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.list-item {
+  --columns-desktop: 5;
+}
+
+.list-item > *:last-child {
+  display: flex;
+  gap: var(--spacer-xs);
+}
+</style>

From 62b660483d200d1c5bc37c6dee6ebcbe91cf2c9d Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 15:21:38 +0530
Subject: [PATCH 2/9] Implemented: user store and service (#2)

---
 package-lock.json                        | 203 ++++++++++++++++++++++-
 package.json                             |   5 +-
 src/components/UserPopover.vue           |   3 +-
 src/locales/en.json                      |   6 +
 src/services/UserService.ts              |  34 ++++
 src/store/RootState.ts                   |   3 -
 src/store/index.ts                       |  21 ++-
 src/store/modules/user/UserState.ts      |  15 ++
 src/store/modules/user/actions.ts        |  97 +++++++++++
 src/store/modules/user/getters.ts        |  16 ++
 src/store/modules/user/index.ts          |  32 ++++
 src/store/modules/user/mutation-types.ts |   9 +
 src/store/modules/user/mutations.ts      |  33 ++++
 src/utils/index.ts                       |  10 +-
 src/views/Home.vue                       |  72 +++++---
 15 files changed, 510 insertions(+), 49 deletions(-)
 create mode 100644 src/services/UserService.ts
 create mode 100644 src/store/modules/user/UserState.ts
 create mode 100644 src/store/modules/user/actions.ts
 create mode 100644 src/store/modules/user/getters.ts
 create mode 100644 src/store/modules/user/index.ts
 create mode 100644 src/store/modules/user/mutation-types.ts
 create mode 100644 src/store/modules/user/mutations.ts

diff --git a/package-lock.json b/package-lock.json
index a205d5e..70d4b21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,11 +12,12 @@
         "@capacitor/core": "^2.4.7",
         "@hotwax/app-version-info": "^1.0.0",
         "@hotwax/apps-theme": "^1.1.0",
-        "@hotwax/oms-api": "^1.6.0",
+        "@hotwax/oms-api": "^1.11.0",
         "@ionic/core": "6.7.5",
         "@ionic/vue": "6.7.5",
         "@ionic/vue-router": "6.7.5",
         "core-js": "^3.6.5",
+        "luxon": "^3.2.0",
         "mitt": "^2.1.0",
         "register-service-worker": "^1.7.1",
         "vue": "^3.2.26",
@@ -30,6 +31,7 @@
         "@capacitor/cli": "^2.4.7",
         "@intlify/vue-i18n-loader": "^2.1.0",
         "@types/jest": "^27.5.0",
+        "@types/luxon": "^3.2.0",
         "@typescript-eslint/eslint-plugin": "~5.26.0",
         "@typescript-eslint/parser": "~5.26.0",
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -48,6 +50,7 @@
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
         "jest": "^28.1.0",
+        "save": "^2.9.0",
         "ts-jest": "^28.0.8",
         "typescript": "~4.7.4",
         "vue-cli-plugin-i18n": "^1.0.1"
@@ -2173,9 +2176,9 @@
       "integrity": "sha512-yokhlpG+eUEao19vaUtCOC5YwcYTb5sf5joGVH17mbb5B1hM4G+P4ZiGiFw2AMmZBKgu94DtHwSyjtdsf4bHug=="
     },
     "node_modules/@hotwax/oms-api": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.6.0.tgz",
-      "integrity": "sha512-sPT3FkHKg/bOPzyDgx1p8+iWROZWPhpUedgXHCdbx73A7eUatoFUVDt3tI/LNs2Y5pAS69PivRTHgTLS4X4YCw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.11.0.tgz",
+      "integrity": "sha512-HQCXuADMVkQXAS9ClWFrTYNjSFP8wQuGMILEkLDh9R2YR1gNnJ4GezeZuxXQOjhxBg7zXxbdL3v5/q03P32O5g==",
       "dependencies": {
         "@types/node-json-transform": "^1.0.0",
         "axios": "^0.21.1",
@@ -3627,6 +3630,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/luxon": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
+      "integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -13577,6 +13586,21 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/eventemitter2": {
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
@@ -15007,6 +15031,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -23394,6 +23424,12 @@
       "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==",
       "dev": true
     },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -23700,6 +23736,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz",
+      "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -23747,6 +23791,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==",
+      "dev": true
+    },
     "node_modules/map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -23940,6 +23990,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/mingo": {
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.8.tgz",
+      "integrity": "sha512-mu7C7byBSpGGj6NllAKXLRr7L8gsZB6Yc4g4R22DDpLryvnH0tK+/X0BorMf3aXAr0pbmaG2O/2in9fUjV8Y8w==",
+      "dev": true
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -25312,6 +25368,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -27511,6 +27576,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -28255,6 +28332,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "dev": true,
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -28469,6 +28558,16 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "node_modules/stream-each": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
@@ -34710,9 +34809,9 @@
       "integrity": "sha512-yokhlpG+eUEao19vaUtCOC5YwcYTb5sf5joGVH17mbb5B1hM4G+P4ZiGiFw2AMmZBKgu94DtHwSyjtdsf4bHug=="
     },
     "@hotwax/oms-api": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.6.0.tgz",
-      "integrity": "sha512-sPT3FkHKg/bOPzyDgx1p8+iWROZWPhpUedgXHCdbx73A7eUatoFUVDt3tI/LNs2Y5pAS69PivRTHgTLS4X4YCw==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@hotwax/oms-api/-/oms-api-1.11.0.tgz",
+      "integrity": "sha512-HQCXuADMVkQXAS9ClWFrTYNjSFP8wQuGMILEkLDh9R2YR1gNnJ4GezeZuxXQOjhxBg7zXxbdL3v5/q03P32O5g==",
       "requires": {
         "@types/node-json-transform": "^1.0.0",
         "axios": "^0.21.1",
@@ -35887,6 +35986,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/luxon": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.3.tgz",
+      "integrity": "sha512-/BJF3NT0pRMuxrenr42emRUF67sXwcZCd+S1ksG/Fcf9O7C3kKCY4uJSbKBE4KDUIYr3WMsvfmWD8hRjXExBJQ==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -43822,6 +43927,21 @@
       "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
       "dev": true
     },
+    "event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "eventemitter2": {
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
@@ -44953,6 +45073,12 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -51456,6 +51582,12 @@
       "integrity": "sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -51696,6 +51828,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "luxon": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz",
+      "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg=="
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -51734,6 +51871,12 @@
       "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
       "dev": true
     },
+    "map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==",
+      "dev": true
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -51890,6 +52033,12 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mingo": {
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.8.tgz",
+      "integrity": "sha512-mu7C7byBSpGGj6NllAKXLRr7L8gsZB6Yc4g4R22DDpLryvnH0tK+/X0BorMf3aXAr0pbmaG2O/2in9fUjV8Y8w==",
+      "dev": true
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -52997,6 +53146,15 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -54779,6 +54937,18 @@
         }
       }
     },
+    "save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -55417,6 +55587,15 @@
         }
       }
     },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -55588,6 +55767,16 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "stream-each": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
diff --git a/package.json b/package.json
index 1d6c660..d26f63c 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,12 @@
     "@capacitor/core": "^2.4.7",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
-    "@hotwax/oms-api": "^1.6.0",
+    "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",
     "core-js": "^3.6.5",
+    "luxon": "^3.2.0",
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
@@ -34,6 +35,7 @@
     "@capacitor/cli": "^2.4.7",
     "@intlify/vue-i18n-loader": "^2.1.0",
     "@types/jest": "^27.5.0",
+    "@types/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -52,6 +54,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^28.1.0",
+    "save": "^2.9.0",
     "ts-jest": "^28.0.8",
     "typescript": "~4.7.4",
     "vue-cli-plugin-i18n": "^1.0.1"
diff --git a/src/components/UserPopover.vue b/src/components/UserPopover.vue
index 3f7b5b2..21aa325 100644
--- a/src/components/UserPopover.vue
+++ b/src/components/UserPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-content>
     <ion-list>
-      <ion-list-header>username</ion-list-header>
+      <ion-list-header>{{ user.userLoginId }}</ion-list-header>
       <ion-item button>{{ $t("Edit profile") }}</ion-item>
       <ion-item button>{{ $t("Reset password") }}</ion-item>
       <ion-item button lines="none">{{ $t("Deactivate") }}</ion-item>
@@ -26,5 +26,6 @@ export default defineComponent({
     IonList,
     IonListHeader
   },
+  props: ['user']
 });
 </script>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 776f2ef..26151f2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,11 +1,17 @@
 {
+  "Active": "Active",
   "Clearance": "Clearance",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
   "created": "created",
   "Deactivate": "Deactivate",
   "Edit profile": "Edit profile",
+  "Inactive": "Inactive",
+  "No record found": "No record found",
+  "No users found": "No users found",
+  "None": "None",
   "Reset password": "Reset password",
   "Search users": "Search users",
+  "Something went wrong": "Something went wrong",
   "Status": "Status",
   "Users": "Users"
 }
\ No newline at end of file
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
new file mode 100644
index 0000000..232d0e9
--- /dev/null
+++ b/src/services/UserService.ts
@@ -0,0 +1,34 @@
+import { api, client } from '@/adapter'
+const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJ1c2VyTG9naW5JZCI6InN1bWl0aS5qb3NoaSIsImlzcyI6IkhvdFdheCIsImV4cCI6MTY5ODM4NDA5MSwiaWF0IjoxNjk4Mjk3NjkxfQ.fyjNEfv6qOysbc_okstRF39y2ok1jvxBLt3b0rH7R4QlVITve0lcKa-QmaREy49zDmVYOxfkJ3DewOuQ7qqyuA'
+
+const getPartyViewDetail = async (params: any): Promise<any> => {
+  return client({
+    url: "performFind",
+    method: "get",
+    params,
+    baseURL: "https://dev-oms.hotwax.io/api/",
+    headers: {
+      Authorization:  'Bearer ' + token,
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+const getSecurityGroups = async (params: any): Promise<any> => {
+  return client({
+    url: "performFind",
+    method: "get",
+    params,
+    baseURL: "https://dev-oms.hotwax.io/api/",
+    headers: {
+      Authorization:  'Bearer ' + token,
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+export const UserService = {
+  getPartyViewDetail,
+  getSecurityGroups
+}
+  
\ No newline at end of file
diff --git a/src/store/RootState.ts b/src/store/RootState.ts
index 537c4a4..0325cdb 100644
--- a/src/store/RootState.ts
+++ b/src/store/RootState.ts
@@ -1,6 +1,3 @@
 export default interface RootState {
     user: any;
-    product: any;
-    order: any;
-    util: any;
 }
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 5c8b8e7..0459019 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,6 +4,7 @@ import getters from './getters'
 import actions from './actions'
 import RootState from './RootState'
 import createPersistedState from "vuex-persistedstate";
+import userModule from './modules/user';
 
 // TODO check how to register it from the components only
 // Handle same module registering multiple time on page refresh
@@ -14,21 +15,23 @@ const state: any = {
 }
 
 const persistState = createPersistedState({
-    paths: [],
-    fetchBeforeUse: true
+  paths: ['user'],
+  fetchBeforeUse: true
 })
 
 // Added modules here so that hydration takes place before routing
 const store = createStore<RootState>({
-    state,
-    actions,
-    mutations,
-    getters,
-    plugins: [persistState],
-    modules: {},
+  state,
+  actions,
+  mutations,
+  getters,
+  plugins: [persistState],
+  modules: {
+    'user': userModule
+  },
 })
 
 export default store
 export function useStore(): typeof store {
-    return useVuexStore()
+  return useVuexStore()
 }
\ No newline at end of file
diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
new file mode 100644
index 0000000..37defa9
--- /dev/null
+++ b/src/store/modules/user/UserState.ts
@@ -0,0 +1,15 @@
+export default interface UserState {
+  list: {
+    users: any[], 
+    securityGroupOptions: any[]
+  },
+  query: {
+    queryString: String,
+    securityGroup: String,
+    status: String
+  },
+  token: string,
+  current: object | null,
+  currentFacility: object,
+  instanceUrl: string,
+}
\ No newline at end of file
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
new file mode 100644
index 0000000..c9a806f
--- /dev/null
+++ b/src/store/modules/user/actions.ts
@@ -0,0 +1,97 @@
+import { UserService } from '@/services/UserService'
+import { ActionTree } from 'vuex'
+import RootState from '@/store/RootState'
+import UserState from './UserState'
+import * as types from './mutation-types'
+import { hasError, showToast } from '@/utils'
+import { translate } from '@/i18n'
+
+const actions: ActionTree<UserState, RootState> = {
+
+  async findUsers ({ dispatch, commit, state }) {
+    const filters = {} as any
+
+    if(state.query.securityGroup){
+      filters['securityGroupId'] = state.query.securityGroup
+      filters['securityGroupId_op'] = 'equals'
+    }
+
+    if(state.query.status){
+      filters['enabled'] = state.query.status
+      filters['enabled_op'] = 'equals'
+    }
+
+    const payload = {
+      "inputFields": {
+        ...filters,
+        "partyId": "10000",
+        firstName_value: state.query.queryString,
+        firstName_op: 'contains',
+        firstName_ic: 'Y',
+        firstName_grp: '1',
+        lastName_value: state.query.queryString,
+        lastName_op: 'contains',
+        lastName_ic: 'Y',
+        lastName_grp: '2',
+        groupName_value: state.query.queryString,
+        groupName_op: 'contains',
+        groupName_ic: 'Y',
+        groupName_grp: '3'
+      },
+      "entityName": "PartyDetailView",
+      "viewSize": 200,
+      "distinct": "Y",
+      "noConditionFind": "Y",
+      "fieldList": ['createdDate', 'firstName', 'infoString', 'lastName', 'partyId', 'securityGroupId', 'userLoginId'],
+    }
+
+    try{
+      const resp = await UserService.getPartyViewDetail(payload)
+
+      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length) {
+        const users = resp.data.docs
+
+        commit(types.USER_LIST_UPDATED, { users });
+      } else {
+        showToast(translate("No record found"), false);
+        commit(types.USER_LIST_UPDATED, { users: [] });
+      }
+    } catch(error) {
+      console.error(error)
+      showToast(translate("Something went wrong"), false);
+    }
+  },
+
+  async getSecurityGroupOptions ({ dispatch, commit }) {
+    const payload = {
+      "entityName": "SecurityGroup",
+      "viewSize": 200,
+      "distinct": "Y",
+      "noConditionFind": "Y",
+    }
+
+    try {
+      const resp = await UserService.getSecurityGroups(payload)
+      
+      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length){
+        const securityGroupOptions = resp.data.docs
+
+        commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions });
+      } else {
+        commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions: [] });
+        showToast(translate("No record found"), false);
+      }
+    } catch(error) {
+      console.error(error)
+      showToast(translate("Something went wrong"), false);
+    }
+  },
+
+  async updateQuery  ( { commit, dispatch, rootState } , query ) {
+    commit(types.USER_QUERY_UPDATED, {query})
+
+    dispatch('findUsers')
+  }
+}
+
+export default actions;
\ No newline at end of file
diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
new file mode 100644
index 0000000..c7a617e
--- /dev/null
+++ b/src/store/modules/user/getters.ts
@@ -0,0 +1,16 @@
+import { GetterTree } from 'vuex'
+import UserState from './UserState'
+import RootState from '@/store/RootState'
+
+const getters: GetterTree <UserState, RootState> = {
+  getUsers (state) {
+    return state.list.users
+  },
+  getSecurityGroupOptions (state) {
+    return state.list.securityGroupOptions
+  },
+  getQuery (state) {
+    return state.query
+  },
+}
+export default getters;
\ No newline at end of file
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
new file mode 100644
index 0000000..5931975
--- /dev/null
+++ b/src/store/modules/user/index.ts
@@ -0,0 +1,32 @@
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import { Module } from 'vuex'
+import UserState from './UserState'
+import RootState from '@/store/RootState'
+
+const userModule: Module<UserState, RootState> = {
+  namespaced: true,
+  state: {
+    token: '',
+    current: null,
+    currentFacility: {},
+    instanceUrl: '',
+    list: {
+      users: [],
+      securityGroupOptions: []
+    },
+    query: {
+      queryString: '',
+      securityGroup: '',
+      status: ''
+    }
+  },
+  getters,
+  actions,
+  mutations,
+}
+
+// TODO
+// store.registerModule('user', userModule);
+export default userModule;
\ No newline at end of file
diff --git a/src/store/modules/user/mutation-types.ts b/src/store/modules/user/mutation-types.ts
new file mode 100644
index 0000000..2c40225
--- /dev/null
+++ b/src/store/modules/user/mutation-types.ts
@@ -0,0 +1,9 @@
+export const SN_USER = 'user'
+export const USER_LIST_UPDATED = SN_USER + '/LIST_UPDATED'
+export const USER_QUERY_UPDATED = SN_USER + '/QUERY_UPDATED'
+export const USER_TOKEN_CHANGED = SN_USER + '/TOKEN_CHANGED'
+export const USER_END_SESSION = SN_USER + '/END_SESSION'
+export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
+export const USER_CURRENT_FACILITY_UPDATED = SN_USER + '/CURRENT_FACILITY_UPDATED'
+export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED'
+export const USER_SECURITY_GROUPS_LIST_UPDATED = SN_USER + '/SECURITY_LIST_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
new file mode 100644
index 0000000..66c1639
--- /dev/null
+++ b/src/store/modules/user/mutations.ts
@@ -0,0 +1,33 @@
+import { MutationTree } from 'vuex'
+import UserState from './UserState'
+import * as types from './mutation-types'
+
+const mutations: MutationTree <UserState> = {
+  [types.USER_TOKEN_CHANGED] (state, payload) {
+    state.token = payload.newToken
+  },
+  [types.USER_END_SESSION] (state) {
+    state.token = ''
+    state.current = null
+    state.currentFacility = {}
+  },
+  [types.USER_INFO_UPDATED] (state, payload) {
+    state.current = payload
+  },
+  [types.USER_CURRENT_FACILITY_UPDATED] (state, payload) {
+    state.currentFacility = payload;
+  },
+  [types.USER_INSTANCE_URL_UPDATED] (state, payload) {
+    state.instanceUrl = payload;
+  },
+  [types.USER_LIST_UPDATED] (state, payload) {
+    state.list.users = payload.users
+  },
+  [types.USER_SECURITY_GROUPS_LIST_UPDATED] (state, payload) {
+    state.list.securityGroupOptions = payload.securityGroupOptions
+  },
+  [types.USER_QUERY_UPDATED] (state, payload) {
+    state.query = payload.query
+  },
+}
+export default mutations;
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 76cb103..87e333f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -5,13 +5,17 @@ const hasError = (response: any) => {
   return typeof response.data != "object" || !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_ || !!response.data.error;
 }
 
-const showToast = async (message: string, configButtons?: any) => {
-  const defaultButtons = [{
+const showToast = async (message: string, isButtonVisible: boolean, configButtons?: any) => {
+  let defaultButtons = [{
     text: 'Dismiss',
     role: 'cancel'
   }]
 
-  if (configButtons) defaultButtons.push(...configButtons);
+  if(isButtonVisible){
+    if (configButtons) defaultButtons.push(...configButtons);
+  }else {
+    defaultButtons = []
+  }
 
   const toast = await toastController
     .create({
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a5a98e3..bed9601 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,7 +9,7 @@
     <ion-content>
       <div class="find">
         <section class="search">
-          <ion-searchbar :placeholder="$t('Search users')" />
+          <ion-searchbar :placeholder="$t('Search users')" v-model="query.queryString" @keyup.enter="updateQuery()" />
         </section>
 
         <aside class="filters">
@@ -17,51 +17,52 @@
             <ion-item lines="none">
               <ion-icon :icon="idCardOutline" slot="start" />
               <ion-label>{{ $t("Clearance") }}</ion-label>
-              <ion-select interface="popover" value="a">
-                <ion-select-option value="a">Fulfillment manager</ion-select-option>
-                <ion-select-option value="b">Product store</ion-select-option>
-                <ion-select-option value="c">Product store</ion-select-option>
+              <ion-select interface="popover" v-model="query.securityGroup" @ionChange="updateQuery()">
+                <ion-select-option value="">{{ $t("None") }}</ion-select-option>
+                <ion-select-option :value="securityGroup.groupId" :key="index" v-for="(securityGroup, index) in securityGroupOptions">{{ securityGroup.groupName }}</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item lines="none">
               <ion-icon :icon="toggleOutline" slot="start" />
               <ion-label>{{ $t("Status") }}</ion-label>
-              <ion-select interface="popover" value="active">
-                <ion-select-option value="active">Active</ion-select-option>
-                <ion-select-option value="away">Away</ion-select-option>
-                <ion-select-option value="deactivated">Deactivated</ion-select-option>
+              <ion-select interface="popover" v-model="query.status" @ionChange="updateQuery()">
+                <ion-select-option value="Y" >{{ $t("Active") }}</ion-select-option>
+                <ion-select-option value="N">{{ $t("Inactive") }}</ion-select-option>
               </ion-select>
             </ion-item>
           </ion-list>
         </aside>
 
-        <main>
-          <div class="list-item">
+        <main v-if="users.length">
+          <div class="list-item" v-for="(user, index) in users" :key="index">
             <ion-item lines="none">
               <ion-label>
-                Fullname
-                <p>username</p>
-                <p>email</p>
+                {{ user.groupName ? user.groupName : `${user.firstName} ${user.lastName}` }}
+                <p>{{ user.userLoginId }}</p>
+                <p>{{ user.infoString }}</p>
               </ion-label>
             </ion-item>
 
             <ion-label>
-              14 Jan 2021
+              {{ getDate(user.createdDate) }}
               <p>{{ $t("created") }}</p>
             </ion-label>
 
             <ion-chip outline>
-              <ion-label>{{ "Security Groups" }}</ion-label>
+              <ion-label>{{ user.securityGroupId }}</ion-label>
             </ion-chip>
 
             <div>
-              <ion-button fill="clear" color="medium" @click="openUserPopover">
+              <ion-button fill="clear" color="medium" @click="openUserPopover($event, user)">
                 <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
               </ion-button>
             </div>
           </div>
-
-          <hr />
+        </main>
+        <main v-else>
+          <ion-item>
+            <ion-label>{{ $t("No users found") }}</ion-label>
+          </ion-item>
         </main>
       </div>
 
@@ -90,8 +91,8 @@ import {
   IonSearchbar,
   IonSelect,
   IonSelectOption,
-  IonToolbar,
   IonTitle,
+  IonToolbar,
   popoverController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
@@ -102,11 +103,12 @@ import {
   toggleOutline,
 } from 'ionicons/icons';
 import { useRouter } from 'vue-router';
+import { mapGetters, useStore } from 'vuex';
+import { DateTime } from 'luxon';
 import UserPopover from '@/components/UserPopover.vue';
 
-
 export default defineComponent({
-  name: 'Users',
+  name: 'Home',
   components: {
     IonButton,
     IonChip,
@@ -122,22 +124,37 @@ export default defineComponent({
     IonSearchbar,
     IonSelect,
     IonSelectOption,
-    IonToolbar,
-    IonTitle
+    IonTitle,
+    IonToolbar
+  },
+  computed: {
+    ...mapGetters({
+      users: 'user/getUsers',
+      securityGroupOptions: 'user/getSecurityGroupOptions',
+      query: 'user/getQuery'
+    })
   },
   methods: {
-    async openUserPopover(ev: Event) {
+    getDate(date: any) {
+      return DateTime.fromMillis(date).toFormat('dd LLL yyyy')
+    },
+    async openUserPopover(ev: Event, user:any) {
       const popover = await popoverController.create({
         component: UserPopover,
+        componentProps: { user },
         event: ev,
         translucent: true,
         showBackdrop: false,
       });
       return popover.present();
+    },
+    async updateQuery() {
+      await this.store.dispatch('user/updateQuery', this.query)
     }
   },
   setup() {
     const router = useRouter();
+    const store = useStore();
 
     return {
       addOutline,
@@ -145,8 +162,13 @@ export default defineComponent({
       idCardOutline,
       toggleOutline,
       router,
+      store
     };
   },
+  async mounted() {
+    await this.store.dispatch('user/findUsers')
+    await this.store.dispatch('user/getSecurityGroupOptions')
+  }
 });
 </script>
 

From f3abfe55ea555780ee22d398c7b69416f4ff72d8 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 15:42:05 +0530
Subject: [PATCH 3/9] Improved: indentation and syntax of code (#2)

---
 src/components/UserPopover.vue    |  2 +-
 src/main.ts                       | 18 +-----------------
 src/store/RootState.ts            |  2 +-
 src/store/modules/user/actions.ts | 14 ++++++--------
 4 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/components/UserPopover.vue b/src/components/UserPopover.vue
index 21aa325..7cb9946 100644
--- a/src/components/UserPopover.vue
+++ b/src/components/UserPopover.vue
@@ -8,7 +8,7 @@
     </ion-list>
   </ion-content>
 </template>
-  
+
 <script lang="ts">
 import {
   IonContent,
diff --git a/src/main.ts b/src/main.ts
index 02736d2..cfdb393 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,7 +27,6 @@ import '@hotwax/apps-theme';
 
 import i18n from './i18n'
 import store from './store'
-// import { DateTime } from 'luxon';
 
 import logger from './logger';
 
@@ -42,22 +41,7 @@ const app = createApp(App)
   .use(i18n)
   .use(store);
 
-// Filters are removed in Vue 3 and global filter introduced https://v3.vuejs.org/guide/migration/filters.html#global-filters
-// app.config.globalProperties.$filters = {
-//   formatDate(value: any, inFormat?: string, outFormat?: string) {
-//     // TODO Make default format configurable and from environment variables
-//     if(inFormat){
-//       return DateTime.fromFormat(value, inFormat).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-//     }
-//     return DateTime.fromISO(value).toFormat(outFormat ? outFormat : 'MM-dd-yyyy');
-//   },
-//   formatUtcDate(value: any, inFormat?: any, outFormat?: string) {
-//     // TODO Make default format configurable and from environment variables
-//     const userProfile = store.getters['user/getUserProfile'];
-//     // TODO Fix this setDefault should set the default timezone instead of getting it everytiem and setting the tz
-//     return DateTime.fromISO(value, { zone: 'utc' }).setZone(userProfile.userTimeZone).toFormat(outFormat ? outFormat : 'MM-dd-yyyy')
-//   }
-// }
+
 
 router.isReady().then(() => {
   app.mount('#app');
diff --git a/src/store/RootState.ts b/src/store/RootState.ts
index 0325cdb..d3f55f7 100644
--- a/src/store/RootState.ts
+++ b/src/store/RootState.ts
@@ -1,3 +1,3 @@
 export default interface RootState {
-    user: any;
+  user: any;
 }
\ No newline at end of file
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index c9a806f..cfca5e1 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -11,12 +11,12 @@ const actions: ActionTree<UserState, RootState> = {
   async findUsers ({ dispatch, commit, state }) {
     const filters = {} as any
 
-    if(state.query.securityGroup){
+    if(state.query.securityGroup) {
       filters['securityGroupId'] = state.query.securityGroup
       filters['securityGroupId_op'] = 'equals'
     }
 
-    if(state.query.status){
+    if(state.query.status) {
       filters['enabled'] = state.query.status
       filters['enabled_op'] = 'equals'
     }
@@ -45,7 +45,7 @@ const actions: ActionTree<UserState, RootState> = {
       "fieldList": ['createdDate', 'firstName', 'infoString', 'lastName', 'partyId', 'securityGroupId', 'userLoginId'],
     }
 
-    try{
+    try {
       const resp = await UserService.getPartyViewDetail(payload)
 
       if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length) {
@@ -72,24 +72,22 @@ const actions: ActionTree<UserState, RootState> = {
 
     try {
       const resp = await UserService.getSecurityGroups(payload)
-      
-      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length){
-        const securityGroupOptions = resp.data.docs
 
+      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length) {
+        const securityGroupOptions = resp.data.docs
         commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions });
       } else {
         commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions: [] });
         showToast(translate("No record found"), false);
       }
     } catch(error) {
-      console.error(error)
+      console.error(error);
       showToast(translate("Something went wrong"), false);
     }
   },
 
   async updateQuery  ( { commit, dispatch, rootState } , query ) {
     commit(types.USER_QUERY_UPDATED, {query})
-
     dispatch('findUsers')
   }
 }

From a9e98e73a03e2003cf33f87b43acf8d3070200d5 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 15:54:39 +0530
Subject: [PATCH 4/9] Improved: removed unused entities (#2)

---
 src/services/UserService.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 232d0e9..33c9ae1 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -1,5 +1,4 @@
 import { api, client } from '@/adapter'
-const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJ1c2VyTG9naW5JZCI6InN1bWl0aS5qb3NoaSIsImlzcyI6IkhvdFdheCIsImV4cCI6MTY5ODM4NDA5MSwiaWF0IjoxNjk4Mjk3NjkxfQ.fyjNEfv6qOysbc_okstRF39y2ok1jvxBLt3b0rH7R4QlVITve0lcKa-QmaREy49zDmVYOxfkJ3DewOuQ7qqyuA'
 
 const getPartyViewDetail = async (params: any): Promise<any> => {
   return client({

From c40d213c41d0d325042ff5b6dd808c75415848eb Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 16:47:44 +0530
Subject: [PATCH 5/9] Improved: unlinked the userPopover for now (#2)

---
 src/services/UserService.ts | 4 ++--
 src/views/Home.vue          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 33c9ae1..c05da0c 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -7,7 +7,7 @@ const getPartyViewDetail = async (params: any): Promise<any> => {
     params,
     baseURL: "https://dev-oms.hotwax.io/api/",
     headers: {
-      Authorization:  'Bearer ' + token,
+      Authorization:  'Bearer ' + '',
       'Content-Type': 'application/json'
     }
   })
@@ -20,7 +20,7 @@ const getSecurityGroups = async (params: any): Promise<any> => {
     params,
     baseURL: "https://dev-oms.hotwax.io/api/",
     headers: {
-      Authorization:  'Bearer ' + token,
+      Authorization:  'Bearer ' + '',
       'Content-Type': 'application/json'
     }
   })
diff --git a/src/views/Home.vue b/src/views/Home.vue
index bed9601..83cf882 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -53,7 +53,7 @@
             </ion-chip>
 
             <div>
-              <ion-button fill="clear" color="medium" @click="openUserPopover($event, user)">
+              <ion-button fill="clear" color="medium">
                 <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
               </ion-button>
             </div>

From 4541828539e1e52172d39e61f2ddd14a3b199070 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Thu, 26 Oct 2023 20:18:20 +0530
Subject: [PATCH 6/9] Improved: code syntax for api call response (#2)

---
 src/services/UserService.ts         |  4 ++--
 src/store/modules/user/UserState.ts |  6 ++----
 src/store/modules/user/actions.ts   | 29 +++++++++++++----------------
 src/store/modules/user/getters.ts   |  4 ++--
 src/store/modules/user/index.ts     |  6 ++----
 src/store/modules/user/mutations.ts |  4 ++--
 src/utils/index.ts                  | 11 +++--------
 7 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index c05da0c..408df63 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -1,6 +1,6 @@
 import { api, client } from '@/adapter'
 
-const getPartyViewDetail = async (params: any): Promise<any> => {
+const getPartyDetailView = async (params: any): Promise<any> => {
   return client({
     url: "performFind",
     method: "get",
@@ -27,7 +27,7 @@ const getSecurityGroups = async (params: any): Promise<any> => {
 }
 
 export const UserService = {
-  getPartyViewDetail,
+  getPartyDetailView,
   getSecurityGroups
 }
   
\ No newline at end of file
diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
index 37defa9..8777f3f 100644
--- a/src/store/modules/user/UserState.ts
+++ b/src/store/modules/user/UserState.ts
@@ -1,8 +1,6 @@
 export default interface UserState {
-  list: {
-    users: any[], 
-    securityGroupOptions: any[]
-  },
+  users: any[],
+  securityGroupOptions: any[]
   query: {
     queryString: String,
     securityGroup: String,
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index cfca5e1..f71ebc3 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -45,21 +45,19 @@ const actions: ActionTree<UserState, RootState> = {
       "fieldList": ['createdDate', 'firstName', 'infoString', 'lastName', 'partyId', 'securityGroupId', 'userLoginId'],
     }
 
-    try {
-      const resp = await UserService.getPartyViewDetail(payload)
+    let users = []
 
-      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length) {
-        const users = resp.data.docs
+    try {
+      const resp = await UserService.getPartyDetailView(payload)
 
-        commit(types.USER_LIST_UPDATED, { users });
-      } else {
-        showToast(translate("No record found"), false);
-        commit(types.USER_LIST_UPDATED, { users: [] });
+      if(!hasError(resp)) {
+        users = resp.data.docs
       }
     } catch(error) {
       console.error(error)
-      showToast(translate("Something went wrong"), false);
+      showToast(translate("Something went wrong"));
     }
+    commit(types.USER_LIST_UPDATED, users );
   },
 
   async getSecurityGroupOptions ({ dispatch, commit }) {
@@ -70,20 +68,19 @@ const actions: ActionTree<UserState, RootState> = {
       "noConditionFind": "Y",
     }
 
+    let securityGroupOptions = []
+
     try {
       const resp = await UserService.getSecurityGroups(payload)
 
-      if(resp && resp.status === 200 && !hasError(resp) && resp.data.docs?.length) {
-        const securityGroupOptions = resp.data.docs
-        commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions });
-      } else {
-        commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, { securityGroupOptions: [] });
-        showToast(translate("No record found"), false);
+      if(!hasError(resp)) {
+        securityGroupOptions = resp.data.docs
       }
     } catch(error) {
       console.error(error);
-      showToast(translate("Something went wrong"), false);
+      showToast(translate("Something went wrong"));
     }
+    commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, securityGroupOptions );
   },
 
   async updateQuery  ( { commit, dispatch, rootState } , query ) {
diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
index c7a617e..8a3ac66 100644
--- a/src/store/modules/user/getters.ts
+++ b/src/store/modules/user/getters.ts
@@ -4,10 +4,10 @@ import RootState from '@/store/RootState'
 
 const getters: GetterTree <UserState, RootState> = {
   getUsers (state) {
-    return state.list.users
+    return state.users
   },
   getSecurityGroupOptions (state) {
-    return state.list.securityGroupOptions
+    return state.securityGroupOptions
   },
   getQuery (state) {
     return state.query
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index 5931975..9957fc1 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -12,10 +12,8 @@ const userModule: Module<UserState, RootState> = {
     current: null,
     currentFacility: {},
     instanceUrl: '',
-    list: {
-      users: [],
-      securityGroupOptions: []
-    },
+    users: [],
+    securityGroupOptions: [],
     query: {
       queryString: '',
       securityGroup: '',
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
index 66c1639..a26c55a 100644
--- a/src/store/modules/user/mutations.ts
+++ b/src/store/modules/user/mutations.ts
@@ -21,10 +21,10 @@ const mutations: MutationTree <UserState> = {
     state.instanceUrl = payload;
   },
   [types.USER_LIST_UPDATED] (state, payload) {
-    state.list.users = payload.users
+    state.users = payload
   },
   [types.USER_SECURITY_GROUPS_LIST_UPDATED] (state, payload) {
-    state.list.securityGroupOptions = payload.securityGroupOptions
+    state.securityGroupOptions = payload
   },
   [types.USER_QUERY_UPDATED] (state, payload) {
     state.query = payload.query
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 87e333f..5a67058 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -5,18 +5,13 @@ const hasError = (response: any) => {
   return typeof response.data != "object" || !!response.data._ERROR_MESSAGE_ || !!response.data._ERROR_MESSAGE_LIST_ || !!response.data.error;
 }
 
-const showToast = async (message: string, isButtonVisible: boolean, configButtons?: any) => {
-  let defaultButtons = [{
+const showToast = async (message: string, configButtons?: any) => {
+  const defaultButtons = [{
     text: 'Dismiss',
     role: 'cancel'
   }]
 
-  if(isButtonVisible){
-    if (configButtons) defaultButtons.push(...configButtons);
-  }else {
-    defaultButtons = []
-  }
-
+  if (configButtons) defaultButtons.push(...configButtons);
   const toast = await toastController
     .create({
       message: message,

From 3524d838ff7a66fd67edd268f8d58b42204f6b08 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 27 Oct 2023 13:02:44 +0530
Subject: [PATCH 7/9] Implemented: util store for securityGroups (#2)

---
 src/services/UtilService.ts              | 14 +++++++++
 src/store/index.ts                       |  2 ++
 src/store/modules/user/UserState.ts      |  1 -
 src/store/modules/user/actions.ts        | 23 ---------------
 src/store/modules/user/getters.ts        |  3 --
 src/store/modules/user/index.ts          |  1 -
 src/store/modules/user/mutations.ts      |  3 --
 src/store/modules/util/UtilState.ts      |  3 ++
 src/store/modules/util/actions.ts        | 36 ++++++++++++++++++++++++
 src/store/modules/util/getters.ts        | 10 +++++++
 src/store/modules/util/index.ts          | 18 ++++++++++++
 src/store/modules/util/mutation-types.ts |  2 ++
 src/store/modules/util/mutations.ts      | 10 +++++++
 src/views/Home.vue                       |  4 +--
 14 files changed, 97 insertions(+), 33 deletions(-)
 create mode 100644 src/services/UtilService.ts
 create mode 100644 src/store/modules/util/UtilState.ts
 create mode 100644 src/store/modules/util/actions.ts
 create mode 100644 src/store/modules/util/getters.ts
 create mode 100644 src/store/modules/util/index.ts
 create mode 100644 src/store/modules/util/mutation-types.ts
 create mode 100644 src/store/modules/util/mutations.ts

diff --git a/src/services/UtilService.ts b/src/services/UtilService.ts
new file mode 100644
index 0000000..9f58555
--- /dev/null
+++ b/src/services/UtilService.ts
@@ -0,0 +1,14 @@
+import { api } from '@/adapter';
+
+const getSecurityGroups = async (payload: any): Promise<any> => {
+  return api({
+    url: "performFind",
+    method: "POST",
+    data: payload
+  })
+}
+
+export const UtilService = {
+  getSecurityGroups
+}
+  
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 1e93db1..f338a4c 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,6 +5,7 @@ import actions from './actions'
 import RootState from './RootState'
 import createPersistedState from "vuex-persistedstate";
 import userModule from './modules/user';
+import utilModule from "./modules/util"
 
 // TODO check how to register it from the components only
 // Handle same module registering multiple time on page refresh
@@ -28,6 +29,7 @@ const store = createStore<RootState>({
   plugins: [persistState],
   modules: {
     'user': userModule,
+    'util': utilModule
   },
 })
 
diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
index a16de42..a2b91fe 100644
--- a/src/store/modules/user/UserState.ts
+++ b/src/store/modules/user/UserState.ts
@@ -5,7 +5,6 @@ export default interface UserState {
     permissions: any;
     selectedUser: any;
     users: any[];
-    securityGroupOptions: any[];
     query: {
       queryString: String,
       securityGroup: String,
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index 5089a8a..b1eb2da 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -278,29 +278,6 @@ const actions: ActionTree<UserState, RootState> = {
     commit(types.USER_LIST_UPDATED, users );
   },
 
-  async getSecurityGroupOptions ({ dispatch, commit }) {
-    const payload = {
-      "entityName": "SecurityGroup",
-      "viewSize": 200,
-      "distinct": "Y",
-      "noConditionFind": "Y",
-    }
-
-    let securityGroupOptions = []
-
-    try {
-      const resp = await UserService.getSecurityGroups(payload)
-
-      if(!hasError(resp)) {
-        securityGroupOptions = resp.data.docs
-      }
-    } catch(error) {
-      console.error(error);
-      showToast(translate("Something went wrong"));
-    }
-    commit(types.USER_SECURITY_GROUPS_LIST_UPDATED, securityGroupOptions );
-  },
-
   async updateQuery  ( { commit, dispatch, rootState } , query ) {
     commit(types.USER_QUERY_UPDATED, {query})
     dispatch('findUsers')
diff --git a/src/store/modules/user/getters.ts b/src/store/modules/user/getters.ts
index 85ef2d8..52832ce 100644
--- a/src/store/modules/user/getters.ts
+++ b/src/store/modules/user/getters.ts
@@ -33,9 +33,6 @@ const getters: GetterTree <UserState, RootState> = {
     getUsers (state) {
         return state.users
     },
-    getSecurityGroupOptions (state) {
-        return state.securityGroupOptions
-    },
     getQuery (state) {
         return state.query
     },
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index 16691c3..3824f48 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -14,7 +14,6 @@ const userModule: Module<UserState, RootState> = {
       permissions: [],
       selectedUser: {},
       users: [],
-      securityGroupOptions: [],
       query: {
         queryString: '',
         securityGroup: '',
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
index 4b48ede..7f6e91b 100644
--- a/src/store/modules/user/mutations.ts
+++ b/src/store/modules/user/mutations.ts
@@ -26,9 +26,6 @@ const mutations: MutationTree <UserState> = {
     [types.USER_LIST_UPDATED] (state, payload) {
       state.users = payload
     },
-    [types.USER_SECURITY_GROUPS_LIST_UPDATED] (state, payload) {
-      state.securityGroupOptions = payload
-    },
     [types.USER_QUERY_UPDATED] (state, payload) {
       state.query = payload.query
     },
diff --git a/src/store/modules/util/UtilState.ts b/src/store/modules/util/UtilState.ts
new file mode 100644
index 0000000..9b18e0d
--- /dev/null
+++ b/src/store/modules/util/UtilState.ts
@@ -0,0 +1,3 @@
+export default interface UtilState {
+    securityGroups: any[];
+}
\ No newline at end of file
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
new file mode 100644
index 0000000..6d20783
--- /dev/null
+++ b/src/store/modules/util/actions.ts
@@ -0,0 +1,36 @@
+import { ActionTree } from 'vuex'
+import RootState from '@/store/RootState'
+import * as types from './mutation-types'
+import { hasError } from '@/utils'
+import UtilState from './UtilState'
+import { UtilService } from '@/services/UtilService'
+import { showToast } from '@/utils'
+import { translate } from '@hotwax/dxp-components'
+
+const actions: ActionTree<UtilState, RootState> = {
+
+  async getSecurityGroupOptions ({ dispatch, commit }) {
+    const payload = {
+      "entityName": "SecurityGroup",
+      "viewSize": 200,
+      "distinct": "Y",
+      "noConditionFind": "Y",
+    }
+
+    let securityGroupOptions = []
+
+    try {
+      const resp = await UtilService.getSecurityGroups(payload)
+
+      if(!hasError(resp)) {
+        securityGroupOptions = resp.data.docs
+      }
+    } catch(error) {
+      console.error(error);
+      showToast(translate("Something went wrong"));
+    }
+    commit(types.UTIL_SECURITY_GROUPS_UPDATED, securityGroupOptions );
+  },
+}
+
+export default actions;
\ No newline at end of file
diff --git a/src/store/modules/util/getters.ts b/src/store/modules/util/getters.ts
new file mode 100644
index 0000000..d330beb
--- /dev/null
+++ b/src/store/modules/util/getters.ts
@@ -0,0 +1,10 @@
+import { GetterTree } from 'vuex'
+import RootState from '@/store/RootState'
+import UtilState from './UtilState';
+
+const getters: GetterTree <UtilState, RootState> = {
+    getSecurityGroupOptions (state) {
+      return state.securityGroups
+    },
+}
+export default getters;
\ No newline at end of file
diff --git a/src/store/modules/util/index.ts b/src/store/modules/util/index.ts
new file mode 100644
index 0000000..6321452
--- /dev/null
+++ b/src/store/modules/util/index.ts
@@ -0,0 +1,18 @@
+import actions from './actions'
+import getters from './getters'
+import mutations from './mutations'
+import { Module } from 'vuex'
+import RootState from '@/store/RootState'
+import UtilState from './UtilState'
+
+const utilModule: Module<UtilState, RootState> = {
+    namespaced: true,
+    state: {
+      securityGroups: [],
+    },
+    getters,
+    actions,
+    mutations,
+}
+
+export default utilModule;
\ No newline at end of file
diff --git a/src/store/modules/util/mutation-types.ts b/src/store/modules/util/mutation-types.ts
new file mode 100644
index 0000000..7e9fdd2
--- /dev/null
+++ b/src/store/modules/util/mutation-types.ts
@@ -0,0 +1,2 @@
+export const SN_UTIL = 'util'
+export const UTIL_SECURITY_GROUPS_UPDATED = SN_UTIL + '/SECURITY_GROUPS_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/util/mutations.ts b/src/store/modules/util/mutations.ts
new file mode 100644
index 0000000..ae3fb45
--- /dev/null
+++ b/src/store/modules/util/mutations.ts
@@ -0,0 +1,10 @@
+import { MutationTree } from 'vuex'
+import * as types from './mutation-types'
+import UtilState from './UtilState'
+
+const mutations: MutationTree <UtilState> = {
+    [types.UTIL_SECURITY_GROUPS_UPDATED] (state, payload) {
+      state.securityGroups = payload
+    },
+}
+export default mutations;
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 83cf882..b44062e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -130,7 +130,7 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       users: 'user/getUsers',
-      securityGroupOptions: 'user/getSecurityGroupOptions',
+      securityGroupOptions: 'util/getSecurityGroupOptions',
       query: 'user/getQuery'
     })
   },
@@ -167,7 +167,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.store.dispatch('user/findUsers')
-    await this.store.dispatch('user/getSecurityGroupOptions')
+    await this.store.dispatch('util/getSecurityGroupOptions')
   }
 });
 </script>

From 9bb29018d213d2a0c1a5757676ca39d7be1f7fae Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 27 Oct 2023 14:25:07 +0530
Subject: [PATCH 8/9] Improved: click event to open user details (#2)

---
 src/services/UserService.ts              | 9 ---------
 src/store/modules/user/mutation-types.ts | 1 -
 src/store/modules/util/actions.ts        | 2 +-
 src/store/modules/util/getters.ts        | 2 +-
 src/views/Home.vue                       | 9 ++++++---
 5 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 38eb002..2fc485c 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -48,14 +48,6 @@ const getPartyDetailView = async (payload: any): Promise<any> => {
   })
 }
 
-const getSecurityGroups = async (payload: any): Promise<any> => {
-  return api({
-    url: "performFind",
-    method: "POST",
-    data: payload
-  })
-}
-
 const setUserTimeZone = async (payload: any): Promise<any> => {
   return api({
     url: "setUserTimeZone",
@@ -231,7 +223,6 @@ export const UserService = {
   deletePartyContactMech,
   getAvailableTimeZones,
   getPartyDetailView,
-  getSecurityGroups,
   getUserContactDetails,
   getUserLoginDetails,
   getUserPermissions,
diff --git a/src/store/modules/user/mutation-types.ts b/src/store/modules/user/mutation-types.ts
index 55337a3..f1293e6 100644
--- a/src/store/modules/user/mutation-types.ts
+++ b/src/store/modules/user/mutation-types.ts
@@ -7,4 +7,3 @@ export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
 export const USER_SELECTED_USER_UPDATED = SN_USER + '/SELECTED_USER_UPDATED'
-export const USER_SECURITY_GROUPS_LIST_UPDATED = SN_USER + '/SECURITY_LIST_UPDATED'
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index 6d20783..d1461e2 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -9,7 +9,7 @@ import { translate } from '@hotwax/dxp-components'
 
 const actions: ActionTree<UtilState, RootState> = {
 
-  async getSecurityGroupOptions ({ dispatch, commit }) {
+  async getSecurityGroups ({ dispatch, commit }) {
     const payload = {
       "entityName": "SecurityGroup",
       "viewSize": 200,
diff --git a/src/store/modules/util/getters.ts b/src/store/modules/util/getters.ts
index d330beb..cf17993 100644
--- a/src/store/modules/util/getters.ts
+++ b/src/store/modules/util/getters.ts
@@ -3,7 +3,7 @@ import RootState from '@/store/RootState'
 import UtilState from './UtilState';
 
 const getters: GetterTree <UtilState, RootState> = {
-    getSecurityGroupOptions (state) {
+    getSecurityGroups (state) {
       return state.securityGroups
     },
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b44062e..168b848 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -34,7 +34,7 @@
         </aside>
 
         <main v-if="users.length">
-          <div class="list-item" v-for="(user, index) in users" :key="index">
+          <div class="list-item" v-for="(user, index) in users" :key="index" @click=getUserDetail(user.partyId)>
             <ion-item lines="none">
               <ion-label>
                 {{ user.groupName ? user.groupName : `${user.firstName} ${user.lastName}` }}
@@ -130,7 +130,7 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       users: 'user/getUsers',
-      securityGroupOptions: 'util/getSecurityGroupOptions',
+      securityGroupOptions: 'util/getSecurityGroups',
       query: 'user/getQuery'
     })
   },
@@ -150,6 +150,9 @@ export default defineComponent({
     },
     async updateQuery() {
       await this.store.dispatch('user/updateQuery', this.query)
+    },
+    async getUserDetail(partyId: any) {
+      this.router.push({path: `/user-details/${partyId}` })
     }
   },
   setup() {
@@ -167,7 +170,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.store.dispatch('user/findUsers')
-    await this.store.dispatch('util/getSecurityGroupOptions')
+    await this.store.dispatch('util/getSecurityGroups')
   }
 });
 </script>

From 8bb019c5f9fb9776a320c9a14f49964ae8e285a2 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 27 Oct 2023 14:41:16 +0530
Subject: [PATCH 9/9] Improved: code, syntax and variable names (#2)

---
 src/components/ContactActionsPopover.vue |  2 +-
 src/services/UserService.ts              |  4 ++--
 src/store/modules/user/UserState.ts      |  4 ++--
 src/store/modules/user/actions.ts        | 16 ++++++++--------
 src/store/modules/user/index.ts          |  6 +++---
 src/store/modules/user/mutation-types.ts |  2 +-
 src/store/modules/user/mutations.ts      |  2 +-
 src/store/modules/util/actions.ts        |  8 +++++---
 src/utils/index.ts                       |  1 +
 src/views/Home.vue                       |  4 ++--
 10 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/ContactActionsPopover.vue b/src/components/ContactActionsPopover.vue
index 5e50d54..f6f87f3 100644
--- a/src/components/ContactActionsPopover.vue
+++ b/src/components/ContactActionsPopover.vue
@@ -103,7 +103,7 @@ export default defineComponent({
                   emailAddress: input,
                   partyId: this.selectedUser.partyId
                 })
-                if (!hasError(resp)) throw resp.data
+                if (hasError(resp)) throw resp.data
                 selectedUser = {
                   ...selectedUser,
                   emailDetails: {
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 2fc485c..d457e74 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -51,7 +51,7 @@ const getPartyDetailView = async (payload: any): Promise<any> => {
 const setUserTimeZone = async (payload: any): Promise<any> => {
   return api({
     url: "setUserTimeZone",
-    method: "POST",
+    method: "post",
     data: payload
   });
 }
@@ -232,5 +232,5 @@ export const UserService = {
   setUserTimeZone,
   updateUserLoginStatus,
   updatePartyGroup,
-  updatePerson,
+  updatePerson
 }
diff --git a/src/store/modules/user/UserState.ts b/src/store/modules/user/UserState.ts
index a2b91fe..c8e50fb 100644
--- a/src/store/modules/user/UserState.ts
+++ b/src/store/modules/user/UserState.ts
@@ -3,11 +3,11 @@ export default interface UserState {
     current: any;
     instanceUrl: string;
     permissions: any;
-    selectedUser: any;
-    users: any[];
     query: {
       queryString: String,
       securityGroup: String,
       status: String
     };
+    selectedUser: any;
+    users: any[];
 }
\ No newline at end of file
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index b1eb2da..bc4875f 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -243,21 +243,20 @@ const actions: ActionTree<UserState, RootState> = {
       "inputFields": {
         ...filters,
         "partyId": "10000",
+        groupName_value: state.query.queryString,
+        groupName_op: 'contains',
+        groupName_ic: 'Y',
+        groupName_grp: '1',
         firstName_value: state.query.queryString,
         firstName_op: 'contains',
         firstName_ic: 'Y',
-        firstName_grp: '1',
+        firstName_grp: '2',
         lastName_value: state.query.queryString,
         lastName_op: 'contains',
         lastName_ic: 'Y',
-        lastName_grp: '2',
-        groupName_value: state.query.queryString,
-        groupName_op: 'contains',
-        groupName_ic: 'Y',
-        groupName_grp: '3'
+        lastName_grp: '3'
       },
       "entityName": "PartyDetailView",
-      "viewSize": 200,
       "distinct": "Y",
       "noConditionFind": "Y",
       "fieldList": ['createdDate', 'firstName', 'infoString', 'lastName', 'partyId', 'securityGroupId', 'userLoginId'],
@@ -270,10 +269,11 @@ const actions: ActionTree<UserState, RootState> = {
 
       if(!hasError(resp)) {
         users = resp.data.docs
+      } else {
+        throw resp.data
       }
     } catch(error) {
       console.error(error)
-      showToast(translate("Something went wrong"));
     }
     commit(types.USER_LIST_UPDATED, users );
   },
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index 3824f48..1c58736 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -12,13 +12,13 @@ const userModule: Module<UserState, RootState> = {
       current: {},
       instanceUrl: '',
       permissions: [],
-      selectedUser: {},
-      users: [],
       query: {
         queryString: '',
         securityGroup: '',
         status: ''
-      }
+      },
+      selectedUser: {},
+      users: []
     },
     getters,
     actions,
diff --git a/src/store/modules/user/mutation-types.ts b/src/store/modules/user/mutation-types.ts
index f1293e6..fe63702 100644
--- a/src/store/modules/user/mutation-types.ts
+++ b/src/store/modules/user/mutation-types.ts
@@ -6,4 +6,4 @@ export const USER_END_SESSION = SN_USER + '/END_SESSION'
 export const USER_INFO_UPDATED = SN_USER + '/INFO_UPDATED'
 export const USER_INSTANCE_URL_UPDATED = SN_USER + '/INSTANCE_URL_UPDATED' 
 export const USER_PERMISSIONS_UPDATED = SN_USER + '/PERMISSIONS_UPDATED'
-export const USER_SELECTED_USER_UPDATED = SN_USER + '/SELECTED_USER_UPDATED'
+export const USER_SELECTED_USER_UPDATED = SN_USER + '/SELECTED_USER_UPDATED' 
diff --git a/src/store/modules/user/mutations.ts b/src/store/modules/user/mutations.ts
index 7f6e91b..8adc25d 100644
--- a/src/store/modules/user/mutations.ts
+++ b/src/store/modules/user/mutations.ts
@@ -3,7 +3,7 @@ import UserState from './UserState'
 import * as types from './mutation-types'
 
 const mutations: MutationTree <UserState> = {
-  [types.USER_TOKEN_CHANGED] (state, payload) {
+    [types.USER_TOKEN_CHANGED] (state, payload) {
         state.token = payload.newToken
     },
     [types.USER_END_SESSION] (state) {
diff --git a/src/store/modules/util/actions.ts b/src/store/modules/util/actions.ts
index d1461e2..f25b77e 100644
--- a/src/store/modules/util/actions.ts
+++ b/src/store/modules/util/actions.ts
@@ -17,19 +17,21 @@ const actions: ActionTree<UtilState, RootState> = {
       "noConditionFind": "Y",
     }
 
-    let securityGroupOptions = []
+    let securityGroups = []
 
     try {
       const resp = await UtilService.getSecurityGroups(payload)
 
       if(!hasError(resp)) {
-        securityGroupOptions = resp.data.docs
+        securityGroups = resp.data.docs
+      } else {
+        throw resp.data
       }
     } catch(error) {
       console.error(error);
       showToast(translate("Something went wrong"));
     }
-    commit(types.UTIL_SECURITY_GROUPS_UPDATED, securityGroupOptions );
+    commit(types.UTIL_SECURITY_GROUPS_UPDATED, securityGroups );
   },
 }
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 449a9b8..ffb5af5 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -14,6 +14,7 @@ const showToast = async (message: string, configButtons?: any) => {
   }]
 
   if (configButtons) defaultButtons.push(...configButtons);
+
   const toast = await toastController
     .create({
       message: message,
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 168b848..5de5282 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -19,7 +19,7 @@
               <ion-label>{{ $t("Clearance") }}</ion-label>
               <ion-select interface="popover" v-model="query.securityGroup" @ionChange="updateQuery()">
                 <ion-select-option value="">{{ $t("None") }}</ion-select-option>
-                <ion-select-option :value="securityGroup.groupId" :key="index" v-for="(securityGroup, index) in securityGroupOptions">{{ securityGroup.groupName }}</ion-select-option>
+                <ion-select-option :value="securityGroup.groupId" :key="index" v-for="(securityGroup, index) in securityGroups">{{ securityGroup.groupName }}</ion-select-option>
               </ion-select>
             </ion-item>
             <ion-item lines="none">
@@ -130,7 +130,7 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       users: 'user/getUsers',
-      securityGroupOptions: 'util/getSecurityGroups',
+      securityGroups: 'util/getSecurityGroups',
       query: 'user/getQuery'
     })
   },