@goweekdays/layer-common 0.0.13 → 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/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/composables/useAddress.ts

@@ -41,18 +41,25 @@ export default function useAddress() {
     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: {
-        country,
-        address,
-        continuedAddress,
-        city,
-        province,
-        postalCode,
-        taxId,
-      },
+      body: payload,
     });
   }
 

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/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 = "") {

package/composables/usePaymentMethod.ts

@@ -78,11 +78,19 @@ export default function usePaymentMethod() {
     );
   }
 
+  function getByCustomerId(id = "") {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/payment-methods/customer/${id}`
+    );
+  }
+
   const eWalletNumber = useState("eWalletNumber", () => "");
   const cardNumber = useState("cardNumber", () => "");
   const cardExpiration = useState("cardExpiration", () => "");
   const cardSecurityCode = useState("cardSecurityCode", () => "");
   const cardholderName = useState("cardholderName", () => "");
+  const cardholderMobileNumber = useState("cardholderMobileNumber", () => "");
+  const cardholderEmail = useState("cardholderEmail", () => "");
   const selectedPaymentMethod = useState("selectedPaymentMethod", () => "");
 
   function linkOnly(value: Record<string, any>) {
@@ -100,21 +108,25 @@ export default function usePaymentMethod() {
       channel: "GCASH",
       logo: "/gcash-logo.svg",
       type: "EWALLET",
+      text: "GCash",
     },
     {
       channel: "PAYMAYA",
       logo: "/paymaya-logo.svg",
       type: "EWALLET",
+      text: "PayMaya",
     },
     {
       channel: "GRABPAY",
       logo: "/grabpay-logo.svg",
       type: "EWALLET",
+      text: "GrabPay",
     },
     {
       channel: "SHOPEEPAY",
       logo: "/shopeepay-logo.svg",
       type: "EWALLET",
+      text: "ShopeePay",
     },
   ];
 
@@ -123,26 +135,31 @@ export default function usePaymentMethod() {
       channel: "UBP",
       logo: "/ubp-logo.svg",
       type: "DIRECT_DEBIT",
+      text: "BA_UBP",
     },
     {
       channel: "BDO",
       logo: "/bdo-logo.svg",
       type: "DIRECT_DEBIT",
+      text: "BDO",
     },
     {
       channel: "BPI",
       logo: "/bpi-logo.svg",
       type: "DIRECT_DEBIT",
+      text: "BA_BPI",
     },
     {
       channel: "RCBC",
       logo: "/rcbc-logo.svg",
       type: "DIRECT_DEBIT",
+      text: "RCBC",
     },
     {
       channel: "Chinabank",
       logo: "/chinabank-logo.svg",
       type: "DIRECT_DEBIT",
+      text: "Chinabank",
     },
   ];
 
@@ -170,9 +187,9 @@ export default function usePaymentMethod() {
     paymentMethod.value = null;
   }
 
-  async function initLink(value: TLinkParams) {
+  async function initLink(value: TLinkParams, callback?: Function) {
     const validation = z.object({
-      subscriptionId: z.string().min(1),
+      subscriptionId: z.string().min(1).optional(),
       paymentMethodType: z.enum(["EWALLET", "DIRECT_DEBIT", "CREDIT_CARD"]),
       paymentMethodChannel: z.string().min(1),
       customerId: z.string().min(1),
@@ -221,11 +238,10 @@ export default function usePaymentMethod() {
         channel_properties: {
           success_return_url,
           failure_return_url,
-          cancel_return_url,
         },
       };
       payload.customer_id = value.customerId;
-    } else if (payload.type === "CREDIT_CARD") {
+    } else if (payload.type === "CARD") {
       payload.card = {
         currency: "PHP",
         channel_properties: {
@@ -269,7 +285,7 @@ export default function usePaymentMethod() {
 
           const temp = await getById(_paymentMethod.id);
 
-          if (temp.status === "ACTIVE") {
+          if (temp.status === "ACTIVE" && value.subscriptionId) {
             await updatePaymentMethodById(
               value.subscriptionId,
               _paymentMethod.id as string
@@ -278,6 +294,10 @@ export default function usePaymentMethod() {
             paymentMethod.value = await getById(_paymentMethod.id);
           }
 
+          if (callback) {
+            callback();
+          }
+
           updatingPaymentMethod.value = false;
           linkingOverlay.value = false;
         }
@@ -287,6 +307,16 @@ export default function usePaymentMethod() {
     }
   }
 
+  function updateStatusById(id: string, status: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/payment-methods/status/${id}`,
+      {
+        method: "PATCH",
+        body: { status },
+      }
+    );
+  }
+
   return {
     linkEWallet,
     linkCard,
@@ -297,15 +327,21 @@ export default function usePaymentMethod() {
     cardExpiration,
     cardSecurityCode,
     cardholderName,
+    cardholderMobileNumber,
+    cardholderEmail,
     selectedPaymentMethod,
     reset,
     linkOnly,
     getById,
     supportedPaymentMethods,
+    supportedDirectDebit,
+    supportedEwallets,
     initLink,
     linkingOverlay,
     updatingPaymentMethod,
     linkingMessage,
     paymentMethod,
+    getByCustomerId,
+    updateStatusById,
   };
 }