@iservice365/layer-common 0.0.1

package/components/Layout/Header.vue

@@ -0,0 +1,248 @@
+<template>
+  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
+    <div style="width: 264px" class="ml-2">
+      <nuxt-link
+        class="text-h6 font-weight-medium text-decoration-none APP_NAME"
+        :to="{ name: APP_NAME_ROUTE }"
+      >
+        {{ APP_NAME }}
+      </nuxt-link>
+    </div>
+
+    <v-row no-gutters>
+      <v-col cols="6">
+        <v-text-field
+          v-model="search"
+          width="100%"
+          prepend-inner-icon="mdi-magnify"
+          variant="solo-filled"
+          flat
+          density="comfortable"
+          hide-details
+          rounded="xl"
+        />
+      </v-col>
+    </v-row>
+
+    <template #append>
+      <v-btn
+        icon="mdi-theme-light-dark"
+        variant="text"
+        class="mx-2"
+        @click="toggleTheme"
+      />
+
+      <v-menu offset="10px" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn icon="mdi-dots-grid" variant="text" v-bind="props" />
+        </template>
+
+        <v-card
+          width="380"
+          max-height="400px"
+          elevation="2"
+          rounded="xl"
+          class="pa-4"
+        >
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-card width="100%" variant="tonal" rounded="t-xl b-0">
+                <v-row class="pa-4">
+                  <v-col cols="4">
+                    <v-btn
+                      prepend-icon="mdi-account"
+                      stacked
+                      rounded="xl"
+                      variant="text"
+                      class="text-capitalize text-subtitle-2"
+                      @click="redirect(APP_ACCOUNT, 'home')"
+                    >
+                      Account
+                    </v-btn>
+                  </v-col>
+
+                  <v-col cols="4">
+                    <v-btn
+                      prepend-icon="mdi-security"
+                      stacked
+                      rounded="xl"
+                      variant="text"
+                      class="text-capitalize text-subtitle-2"
+                      @click="redirect(APP_ADMIN, 'home')"
+                    >
+                      Admin
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-card>
+            </v-col>
+
+            <v-col cols=" 12" class="mt-2">
+              <v-card
+                width="100%"
+                min-height="50px"
+                variant="tonal"
+                rounded="b-xl"
+              >
+                <v-card-title class="text-center pb-0"> Apps </v-card-title>
+
+                <v-row no-gutters class="px-2 pb-2">
+                  <v-col
+                    v-for="item in apps"
+                    :key="item.title"
+                    cols="4"
+                    class="pa-2"
+                  >
+                    <v-btn
+                      stacked
+                      width="100%"
+                      :prepend-icon="item.icon"
+                      rounded="xl"
+                      variant="text"
+                      class="text-center text-capitalize text-caption"
+                      @click="redirect(item.link, item.landingPage)"
+                    >
+                      {{ item.title }}
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-card>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-menu>
+
+      <v-menu offset="10px" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
+            <v-avatar color="surface-variant" size="42">
+              <v-img
+                v-if="currentUser?.profile"
+                :src="profile"
+                width="42"
+                height="42"
+              />
+
+              <span v-else class="text-h5">{{ getNameInitials(name) }}</span>
+            </v-avatar>
+          </v-btn>
+        </template>
+
+        <v-card
+          width="350"
+          max-height="600px"
+          elevation="2"
+          rounded="xl"
+          class="pa-4"
+        >
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+                <v-avatar color="surface-variant" size="75">
+                  <v-img
+                    v-if="currentUser?.profile"
+                    :src="profile"
+                    width="75"
+                    height="75"
+                  />
+
+                  <span v-else class="text-h5">{{
+                    getNameInitials(name)
+                  }}</span>
+                </v-avatar>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="text-center mt-2 mb-4">
+              {{ currentUser?.firstName }} {{ currentUser?.lastName }}
+            </v-col>
+
+            <v-col cols="12">
+              <v-btn
+                block
+                rounded="xl"
+                variant="tonal"
+                size="x-large"
+                class="text-none text-subtitle-1 font-weight-regular"
+                @click="logout()"
+              >
+                Logout
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-menu>
+    </template>
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+
+const search = defineModel("search", { type: String });
+
+const { redirect, apps } = useLocal();
+
+const { APP_ACCOUNT, APP_ADMIN, APP_NAME, APP_NAME_ROUTE } =
+  useRuntimeConfig().public;
+
+const theme = useTheme();
+
+function toggleTheme() {
+  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
+}
+
+const { currentUser } = useLocalAuth();
+
+const profile = computed(() => {
+  return `/api/public/${currentUser.value?.profile}`;
+});
+
+function logout() {
+  if (APP_NAME.toLowerCase() !== "account") {
+    redirect(`${APP_ACCOUNT}/logout`);
+    return;
+  }
+
+  useRouter().push({ name: "logout" });
+}
+
+const name = computed(() => {
+  let name = "";
+  if (currentUser.value?.firstName) {
+    name = currentUser.value.firstName;
+  }
+
+  if (currentUser.value?.lastName) {
+    name += ` ${currentUser.value.lastName}`;
+  }
+
+  return name;
+});
+
+const { getNameInitials } = useUtils();
+</script>
+
+<style scoped>
+.APP_NAME {
+  display: inline-block;
+  word-wrap: break-word;
+  white-space: normal;
+  text-align: center;
+  color: unset !important;
+}
+
+.open-list {
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(180deg);
+}
+
+.close-list {
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(0deg);
+}
+
+.v-list-group__items .v-list-item {
+  padding-inline-start: 32px !important;
+}
+</style>

package/components/Layout/NavigationDrawer.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-navigation-drawer permanent floating class="pr-2">
+    <v-list>
+      <slot name="action"/>
+      <template
+        v-for="(navigationItem, navigationIndex) in props.navigationItems"
+        :key="`${navigationItem.route.name}-${navigationIndex}`"
+      >
+        <NavigationItem
+          :title="navigationItem.title"
+          :icon="navigationItem.icon"
+          :route="navigationItem.route"
+          :children="navigationItem.children"
+        />
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  navigationItems: { type: Array<TNavigationItem>, required: true },
+});
+</script>

package/components/ListItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-list-item :class="props.divider ? border : defaultBorder">
+    <v-row>
+      <v-col cols="4" class="text-subtitle-2">
+        <slot name="title"> List Title </slot>
+      </v-col>
+
+      <v-col cols="8" class="text-subtitle-2">
+        <slot name="value"> value </slot>
+      </v-col>
+    </v-row>
+
+    <template #append>
+      <slot name="append">
+        <v-icon size="30">{{ props.icon }}</v-icon>
+      </slot>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+  icon: {
+    type: String,
+    default: "mdi-chevron-right",
+  },
+});
+
+const defaultBorder = "pa-0 pl-8 pr-6 py-4";
+const border = "border-b-sm" + " " + defaultBorder;
+</script>

package/components/LocalPagination.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="arrow-navigation">
+        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="decrement" />
+        <v-btn
+icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= props.length"
+            @click="increment" />
+    </div>
+</template>
+
+<script setup lang="ts">
+const page = defineModel({ type: Number, default: 0 });
+function increment() {
+    page.value++;
+}
+
+function decrement() {
+    page.value--;
+}
+const emit = defineEmits(['update:value']);
+watch(page, () => {
+    emit('update:value', page.value);
+});
+
+const props = defineProps({
+    length: {
+        type: Number,
+        required: true,
+        default: 0
+    }
+});
+</script>

package/components/NavigationItem.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-list-group v-if="children && children.length">
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        :prepend-icon="icon"
+        rounded="e-pill"
+        class="text-subtitle-2"
+      >
+        {{ title }}
+      </v-list-item>
+    </template>
+
+    <NavigationItem
+      v-for="(child, childIndex) in children"
+      :key="`${child.title}-${childIndex}`"
+      :title="child.title"
+      :icon="child.icon"
+      :route="child.route"
+      :children="child.children"
+    />
+  </v-list-group>
+
+  <v-list-item
+    v-else
+    :prepend-icon="icon"
+    :to="props.route"
+    rounded="e-pill"
+    class="text-subtitle-2"
+  >
+    {{ title }}
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "Title",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  route: {
+    type: Object,
+    default() {
+      return { name: "", params: {} };
+    },
+  },
+  children: {
+    type: Array<TNavigationItem>,
+    required: false,
+    default: () => [],
+  },
+});
+</script>

package/components/PlaceholderComponent.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="maintenance-container">
+    <h1>🚧 Page Under Maintenance</h1>
+    <p>
+      We're currently working on improving this page to serve you better. Please
+      check back soon!
+    </p>
+    <p>Thank you for your patience.</p>
+  </div>
+</template>
+
+<style scoped>
+.maintenance-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 50vh;
+  margin: 0;
+  font-family: Arial, sans-serif;
+  color: #333;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+p {
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+</style>

package/components/Snackbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-snackbar v-model="snackbar" :color="props.color">
+    {{ props.text }}
+
+    <template #actions>
+      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+const snackbar = defineModel({ type: Boolean });
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "primary",
+  },
+});
+</script>

package/composables/useLocal.ts

@@ -0,0 +1,41 @@
+export default function useLocal() {
+  const appConfig = useRuntimeConfig().public;
+
+  const { cookieConfig } = appConfig;
+
+  function getUserFromCookie() {
+    return useCookie("user", cookieConfig).value;
+  }
+
+  const drawer = useState("drawer", () => true);
+
+  const { APP_RECAP } = appConfig;
+
+  const apps = computed(() => {
+    return [
+      {
+        title: "RECAP",
+        icon: "mdi-account-group",
+        link: APP_RECAP as string,
+        landingPage: "requests/status/draft",
+      },
+    ];
+  });
+
+  function redirect(link: string, page?: string) {
+    const href = page ? `${link}/${page}` : link;
+
+    window.location.href = href;
+  }
+
+  const headerSearch = useState("headerSearch", () => "");
+
+  return {
+    cookieConfig,
+    getUserFromCookie,
+    drawer,
+    apps,
+    redirect,
+    headerSearch,
+  };
+}

package/composables/useLocalAuth.ts

@@ -0,0 +1,109 @@
+export default function useLocalAuth() {
+  const { cookieConfig } = useRuntimeConfig().public;
+
+  async function login({ email = "", password = "" }) {
+    return useNuxtApp().$api<TKeyValuePair>("/api/auth", {
+      method: "POST",
+      body: JSON.stringify({ email, password }),
+    });
+  }
+
+  function setToken({
+    refreshToken = "",
+    accessToken = "",
+    user = "",
+    org = "",
+  }) {
+    useCookie("accessToken", cookieConfig).value = accessToken;
+    useCookie("refreshToken", cookieConfig).value = refreshToken;
+    useCookie("user", cookieConfig).value = user;
+    useCookie("org", cookieConfig).value = org;
+  }
+
+  function clearCookies() {
+    useCookie("accessToken", cookieConfig).value = null;
+    useCookie("refreshToken", cookieConfig).value = null;
+    useCookie("user", cookieConfig).value = null;
+    useCookie("organization", cookieConfig).value = null;
+  }
+
+  async function logout() {
+    const refreshToken = useCookie("refreshToken", cookieConfig).value;
+    if (refreshToken) {
+      try {
+        await useNuxtApp().$api(`/api/auth/${refreshToken}`, {
+          method: "DELETE",
+        });
+
+        clearCookies();
+      } catch (error) {
+        console.error("Logout failed:", error);
+      }
+    }
+  }
+
+  const currentUser = useState((): TUser | null => null);
+
+  async function getCurrentUser() {
+    const user = useCookie("user", cookieConfig).value;
+    if (!user) return null;
+    const _user = await useNuxtApp().$api<TUser>(`/api/users/id/${user}`, {
+      method: "GET",
+    });
+    currentUser.value = _user;
+    return _user;
+  }
+
+  async function forgotPassword(email: string) {
+    if (!email) {
+      throw new Error("Email is required for password reset request.");
+    }
+
+    try {
+      const response = await useNuxtApp().$api("/api/auth/forget-password", {
+        method: "POST",
+        body: JSON.stringify({ email }),
+        headers: { "Content-Type": "application/json" },
+      });
+      return response;
+    } catch (error) {
+      console.error("Error in password reset request:", error);
+      throw error;
+    }
+  }
+
+  async function resetPassword(
+    otp: string,
+    newPassword: string,
+    passwordConfirmation: string
+  ) {
+    try {
+      return await useNuxtApp().$api("/api/auth/reset-password", {
+        method: "POST",
+        body: JSON.stringify({ otp, newPassword, passwordConfirmation }),
+        headers: { "Content-Type": "application/json" },
+      });
+    } catch (error) {
+      console.error("Error resetting password:", error);
+      throw error;
+    }
+  }
+
+  function verify(id: string) {
+    return useNuxtApp().$api<TKeyValuePair>(`/api/auth/verify/${id}`, {
+      method: "GET",
+    });
+  }
+
+  return {
+    login,
+    logout,
+    clearCookies,
+    getCurrentUser,
+    setToken,
+    forgotPassword,
+    resetPassword,
+    currentUser,
+    verify,
+  };
+}