@goweekdays/layer-common 0.0.12 → 0.1.0

package/components/Input/Number.vue

@@ -10,7 +10,7 @@ const inputRef = ref<HTMLInputElement | null>(null);
 const attrs = useAttrs();
 
 let cursorPosition = 0;
-let forceCursorToEnd = false;
+let forceCursorToEnd = true;
 
 // Computed property to format value with commas or infinity sign
 const formattedValue = computed({

package/components/Layout/Header.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
-    <div style="width: 264px" class="ml-4">
+    <v-app-bar-nav-icon @click="drawer = !drawer" />
+    <div style="width: 206px" class="ml-4">
       <nuxt-link
         class="text-h6 font-weight-medium text-decoration-none APP_NAME"
         :to="{ name: APP_NAME_ROUTE }"
@@ -172,7 +173,7 @@ import { useTheme } from "vuetify";
 
 const search = defineModel("search", { type: String });
 
-const { redirect, apps } = useLocal();
+const { redirect, apps, drawer } = useLocal();
 
 const {
   APP_MAIN,
@@ -220,7 +221,7 @@ const name = computed(() => {
 
 const { getNameInitials } = useUtils();
 
-const defaultApps = [
+const defaultApps = computed(() => [
   {
     title: "Account",
     icon: "mdi-account",
@@ -231,7 +232,9 @@ const defaultApps = [
     title: "Organization",
     icon: "mdi-domain",
     link: APP_ORG,
-    landingPage: `org/${currentUser.value?.defaultOrg}`,
+    landingPage: currentUser.value?.defaultOrg
+      ? `org/${currentUser.value?.defaultOrg}`
+      : "index",
   },
   {
     title: "Admin",
@@ -245,7 +248,7 @@ const defaultApps = [
     link: APP_AFFILIATE,
     landingPage: "home",
   },
-];
+]);
 </script>
 
 <style scoped>

package/components/Layout/NavigationDrawer.vue

@@ -1,16 +1,17 @@
 <template>
-  <v-navigation-drawer permanent floating class="pr-2">
-    <v-list>
+  <v-navigation-drawer v-model="drawer" permanent floating class="pr-2">
+    <v-list class="py-1">
       <slot name="action"></slot>
       <template
         v-for="(navigationItem, navigationIndex) in props.navigationItems"
-        :key="`${navigationItem.route.name}-${navigationIndex}`"
+        :key="`${navigationItem.title}-${navigationIndex}`"
       >
         <NavigationItem
           :title="navigationItem.title"
           :icon="navigationItem.icon"
           :route="navigationItem.route"
           :children="navigationItem.children"
+          :disabled="navigationItem.disabled"
         />
       </template>
     </v-list>
@@ -21,4 +22,6 @@
 const props = defineProps({
   navigationItems: { type: Array<TNavigationItem>, required: true },
 });
+
+const { drawer } = useLocal();
 </script>

package/components/LocalPagination.vue

@@ -1,31 +1,41 @@
 <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>
+  <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++;
+  page.value++;
 }
 
 function decrement() {
-    page.value--;
+  page.value--;
 }
-const emit = defineEmits(['update:value']);
+const emit = defineEmits(["update:value"]);
 watch(page, () => {
-    emit('update:value', page.value);
+  emit("update:value", page.value);
 });
 
 const props = defineProps({
-    length: {
-        type: Number,
-        required: true,
-        default: 0
-    }
+  length: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
 });
-</script>
+</script>

package/components/NavigationItem.vue

@@ -18,6 +18,7 @@
       :icon="child.icon"
       :route="child.route"
       :children="child.children"
+      :disabled="child.disabled"
     />
   </v-list-group>
 
@@ -27,6 +28,7 @@
     :to="props.route"
     rounded="e-pill"
     class="text-subtitle-2"
+    :disabled="props.disabled"
   >
     {{ title }}
   </v-list-item>
@@ -55,5 +57,10 @@ const props = defineProps({
     required: false,
     default: () => [],
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 </script>

package/components/Std/Pagination.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-row no-gutters justify="end" align="center">
+    <span class="mr-2 text-caption text-fontgray">
+      {{ props.pageRange }}
+    </span>
+    <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.pages"
+        @click="increment"
+      />
+    </div>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const page = defineModel({ type: Number, default: 0 });
+
+const props = defineProps({
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+</script>

package/components/SwitchOrg.vue

@@ -19,8 +19,13 @@
       :close-on-content-click="false"
     >
       <template #activator="{ props }">
-        <v-btn variant="text" class="text-none ml-2" v-bind="props">
-          <div class="d-block text-truncate" style="width: 130px">
+        <v-btn
+          variant="text"
+          class="text-none ml-2"
+          size="large"
+          v-bind="props"
+        >
+          <div class="d-block text-truncate text-start" style="width: 130px">
             {{ selectedOrg?.text || "Select organization" }}
           </div>
           <v-icon class="ml-1">mdi-menu-down</v-icon>
@@ -42,7 +47,6 @@
             density="compact"
             class="text-caption font-weight-bold"
             v-for="item in orgs"
-            :key="item.value"
             @click="switchOrg(item.value)"
           >
             <v-icon size="16" class="mr-2">
@@ -54,18 +58,20 @@
         </v-list>
 
         <v-btn
+          v-if="isOrg"
           block
           class="text-none mb-1"
           variant="tonal"
-          :to="{ name: 'organizations' }"
+          @click="navigateToOrgs"
         >
           Manage Organizations
         </v-btn>
         <v-btn
+          v-if="isOrg"
           block
           class="text-none mt-1"
           variant="tonal"
-          :to="{ name: 'organizations-create' }"
+          @click="createOrg"
         >
           Create Organization
         </v-btn>
@@ -119,4 +125,36 @@ function switchOrg(org: string) {
     params: { organization: org },
   });
 }
+
+const APP_NAME = useRuntimeConfig().public.APP_NAME;
+const APP_ORG = useRuntimeConfig().public.APP_ORG;
+
+const { redirect } = useLocal();
+
+function createOrg() {
+  if (APP_NAME.toLowerCase() === "organization") {
+    navigateTo({
+      name: "organizations-create",
+    });
+    return;
+  }
+
+  redirect(APP_ORG, "organizations/create");
+}
+
+function navigateToOrgs() {
+  if (APP_NAME.toLowerCase() === "organization") {
+    navigateTo({
+      name: "organizations",
+      params: { status: "active" },
+    });
+    return;
+  }
+
+  redirect(APP_ORG, "organizations");
+}
+
+const isOrg = computed(() => {
+  return APP_NAME.toLowerCase() === "organization";
+});
 </script>

package/components/TableList.vue

@@ -43,10 +43,11 @@
         <slot name="extension"></slot>
       </template>
     </v-toolbar>
+    <v-divider></v-divider>
 
     <v-data-table
       v-model="selected"
-      v-bind="$attrs"
+      v-bind="attrs"
       :headers="props.headers"
       :items="props.items"
       item-value="_id"
@@ -66,6 +67,7 @@
 </template>
 
 <script setup lang="ts">
+const attrs = useAttrs();
 const selected = defineModel({
   type: Array as PropType<Array<string>>,
   default: () => [],

package/composables/useAddress.ts

@@ -32,10 +32,45 @@ export default function useAddress() {
     });
   }
 
+  function updateById({
+    id = "",
+    country = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+    orgId = "",
+  } = {}) {
+    const payload: Record<string, any> = {
+      country,
+      address,
+      continuedAddress,
+      city,
+      province,
+      postalCode,
+      taxId,
+    };
+
+    if (orgId) {
+      payload.org = orgId;
+    }
+
+    return useNuxtApp().$api(`/api/addresses/details/${id}`, {
+      method: "PUT",
+      body: payload,
+    });
+  }
+
   function getByUserId(user = "") {
     return useNuxtApp().$api<TAddress>(`/api/addresses/user/${user}`);
   }
 
+  function getByOrgId(id = "") {
+    return useNuxtApp().$api<TAddress>(`/api/addresses/org/${id}`);
+  }
+
   const _address = useState("address", (): TAddress => {
     return {
       type: "",
@@ -103,5 +138,7 @@ export default function useAddress() {
     getByUserId,
     address: _address,
     completeAddress,
+    getByOrgId,
+    updateById,
   };
 }

package/composables/useChartOfAccount.ts

@@ -0,0 +1,62 @@
+export default function useChartOfAccount() {
+  function getAll(
+    { page = 1, status = "active", orgId = "", children = null } = {} as {
+      page?: number;
+      status?: string;
+      orgId?: string;
+      children?: number;
+    }
+  ) {
+    return useNuxtApp().$api<Record<string, any>>("/api/chart-of-accounts", {
+      method: "GET",
+      query: { page, status, orgId, children },
+    });
+  }
+
+  type TAddPayload = {
+    orgId: string;
+    code: string;
+    name: string;
+    normalBalance: string;
+    parent?: string;
+    description?: string;
+  };
+
+  function add(value: TAddPayload) {
+    return useNuxtApp().$api<TAddPayload>("/api/chart-of-accounts", {
+      method: "POST",
+      body: value,
+    });
+  }
+
+  function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/chart-of-accounts/id/${id}`
+    );
+  }
+
+  function updateById(
+    id: string,
+    value: Pick<TAddPayload, "name" | "code" | "normalBalance" | "parent">
+  ) {
+    return useNuxtApp().$api<TAddPayload>(`/api/chart-of-accounts/id/${id}`, {
+      method: "PUT",
+      body: value,
+    });
+  }
+
+  function deleteById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/chart-of-accounts/id/${id}`,
+      { method: "DELETE" }
+    );
+  }
+
+  return {
+    getAll,
+    add,
+    getById,
+    updateById,
+    deleteById,
+  };
+}

package/composables/useInvoice.ts

@@ -1,5 +1,9 @@
 export default function useInvoice() {
   function getBySubscriptionId({ search = "", id = "", page = 1 } = {}) {
+    if (!id) {
+      throw new Error("Subscription ID is required");
+    }
+
     return useNuxtApp().$api<Record<string, any>>(
       `/api/invoices/subscription/${id}`,
       {

package/composables/useLocal.ts

@@ -9,27 +9,35 @@ export default function useLocal() {
 
   const drawer = useState("drawer", () => true);
 
-  const { APP_INVENTORY, APP_ASSET, APP_BOOK_KEEPING } = appConfig;
+  const { APP_INVENTORY, APP_ASSET, APP_BOOK_KEEPING, APP_ACCOUNTING } =
+    appConfig;
+  const { currentOrg } = useOrg();
 
   const apps = computed(() => {
     return [
       {
-        title: "Inventory Management",
+        title: "Accounting",
+        icon: "mdi-file-document-multiple",
+        link: APP_ACCOUNTING as string,
+        landingPage: `org/${currentOrg.value ?? ""}`,
+      },
+      {
+        title: "Bookkeeping",
+        icon: "mdi-file-document-edit-outline",
+        link: APP_BOOK_KEEPING as string,
+        landingPage: `org/${currentOrg.value ?? ""}`,
+      },
+      {
+        title: "Inventory",
         icon: "mdi-warehouse",
         link: APP_INVENTORY as string,
-        landingPage: "home",
+        landingPage: `org/${currentOrg.value ?? ""}`,
       },
       {
-        title: "Asset Management",
+        title: "Asset",
         icon: "mdi-package-variant-closed",
         link: APP_ASSET as string,
-        landingPage: "home",
-      },
-      {
-        title: "Bookkeeping Management",
-        icon: "mdi-file-document-multiple",
-        link: APP_BOOK_KEEPING as string,
-        landingPage: "home",
+        landingPage: `org/${currentOrg.value ?? ""}`,
       },
     ];
   });

package/composables/useLocalAuth.ts

@@ -1,6 +1,38 @@
 export default function useLocalAuth() {
   const { cookieConfig } = useRuntimeConfig().public;
 
+  const currentUser = useState<TUser | null>("currentUser", () => null);
+
+  function authenticate() {
+    // Get access token from cookies
+    const accessToken = useCookie("accessToken", cookieConfig).value;
+
+    if (!accessToken) {
+      // Redirect to login page if no access token
+      navigateTo({ name: "index" });
+    }
+
+    const user = useCookie("user", cookieConfig).value;
+
+    const { data: getCurrentUserReq, error: getCurrentUserErr } =
+      useLazyAsyncData("get-current-user", () =>
+        useNuxtApp().$api<TUser>(`/api/users/id/${user}`)
+      );
+
+    watchEffect(() => {
+      if (getCurrentUserReq.value) {
+        currentUser.value = getCurrentUserReq.value;
+      }
+    });
+
+    watchEffect(() => {
+      if (getCurrentUserErr.value) {
+        // Redirect to login page if user authentication fails
+        navigateTo({ name: "index" });
+      }
+    });
+  }
+
   async function login({ email = "", password = "", role = "" }) {
     return useNuxtApp().$api<TKeyValuePair>("/api/auth/login", {
       method: "POST",
@@ -42,16 +74,39 @@ export default function useLocalAuth() {
     }
   }
 
-  const currentUser = useState((): TUser | null => null);
+  function getById(id: string) {
+    return useNuxtApp().$api<TUser>(`/api/users/id/${id}`);
+  }
+
+  const user = useCookie("user", cookieConfig).value ?? "";
+
+  if (currentUser.value === null) {
+    const { data: userData } = useLazyAsyncData("getCurrentUser", async () =>
+      useNuxtApp().$api<TUser>(`/api/users/id/${user}`, {
+        method: "GET",
+      })
+    );
+
+    watchEffect(() => {
+      if (userData.value) {
+        currentUser.value = userData.value;
+      }
+    });
+  }
 
   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;
+    try {
+      const _user = await useNuxtApp().$api<TUser>(`/api/users/id/${user}`, {
+        method: "GET",
+      });
+
+      currentUser.value = _user;
+      return _user;
+    } catch (error) {
+      console.log("Error fetching current user:", error);
+    }
   }
 
   async function forgotPassword(email: string) {
@@ -105,6 +160,7 @@ export default function useLocalAuth() {
   const permissions = useState("permissions", (): Array<string> => []);
 
   return {
+    authenticate,
     login,
     logout,
     clearCookies,

package/composables/useOrg.ts

@@ -52,7 +52,7 @@ export default function useOrg() {
   }
 
   const perSeatPrice = 300;
-  const seats = useState("seats", () => 0);
+  const seats = useState("seats", () => 1);
   const total = computed(() => seats.value * perSeatPrice);
 
   function getByName(name = "") {