@7365admin1/layer-common 1.8.0

package/error.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { NuxtError } from "#app";
+
+const props = defineProps({
+  error: Object as () => NuxtError,
+});
+</script>
+
+<template>
+  <v-app>
+    <v-main>
+      <v-row
+        class="fill-height"
+        no-gutters
+        justify="center"
+        align-content="center"
+      >
+        <v-col cols="9">
+          <v-row>
+            <v-col cols="12" class="text-center text-h2">
+              <span class="font-weight-bold">{{ props.error?.message }}</span>
+            </v-col>
+            <v-col cols="12">
+              <v-row no-gutters justify="center">
+                <v-btn
+                  rounded="xl"
+                  size="large"
+                  class="text-none font-weight-bold"
+                  variant="tonal"
+                  :to="{ name: 'index' }"
+                >
+                  Go back
+                </v-btn>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-main>
+  </v-app>
+</template>

package/layouts/plain.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main>
+      <slot />
+    </v-main>
+  </v-app>
+</template>

package/middleware/01.auth.ts

@@ -0,0 +1,20 @@
+export default defineNuxtRouteMiddleware(async (route) => {
+  const { cookieConfig } = useRuntimeConfig().public;
+
+  // Get access token from cookies
+  const sid = useCookie("sid", cookieConfig).value;
+
+  const serviceProviderEmail = (route.query.email as string) ?? "";
+
+  console.log(serviceProviderEmail);
+
+  if (serviceProviderEmail) {
+    useCookie("service-provider-email", cookieConfig).value =
+      serviceProviderEmail;
+  }
+
+  if (!sid) {
+    // Redirect to login page if no access token
+    return navigateTo({ name: "index" });
+  }
+});

package/middleware/02.org.ts

@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+const hexSchema = z
+  .string()
+  .regex(/^[0-9a-fA-F]{24}$/, "Invalid organization ID");
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (import.meta.server) return;
+
+  const { organization, org } = to.params;
+
+  // console.log('org-aut-middleware running', hexSchema.safeParse(organization).success)
+  
+  if (!hexSchema.safeParse(organization || org).success) {
+    console.log('[02.org] middleware run')
+    return navigateTo(
+      { name: "require-organization-membership" },
+      { replace: true }
+    );
+  }
+});

package/middleware/03.customer.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+const hexSchema = z.string().regex(/^[0-9a-fA-F]{24}$/, "Invalid customer ID");
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  if (import.meta.server) return;
+
+  const site = to.params.site as string;
+
+  if (!hexSchema.safeParse(site).success) {
+    return navigateTo({ name: "require-customer" }, { replace: true });
+  }
+});

package/middleware/member.ts

@@ -0,0 +1,4 @@
+export default defineNuxtRouteMiddleware(() => {
+  if (import.meta.server) return;
+  const adminMember = useCookie("admin-member").value ?? "";
+});

package/nuxt.config.ts

@@ -0,0 +1,54 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
+export default defineNuxtConfig({
+  ssr: false,
+  devtools: { enabled: true },
+  build: {
+    transpile: ["vuetify"],
+  },
+
+  runtimeConfig: {
+    public: {
+      cookieConfig: {
+        domain: (process.env.DOMAIN as string) ?? "localhost",
+        secure: true,
+        maxAge: 30 * 24 * 60 * 60,
+      },
+      APP: (process.env.APP as string) ?? "App",
+      API_DO_STORAGE_ENDPOINT:
+        (process.env.API_DO_STORAGE_ENDPOINT as string) ?? "",
+      APP_NAME: (process.env.APP_NAME as string) ?? "App",
+      APP_NAME_ROUTE: (process.env.APP_NAME_ROUTE as string) ?? "index",
+      APP_MAIN: (process.env.APP_MAIN as string) ?? "",
+      APP_ACCOUNT: (process.env.APP_ACCOUNT as string) ?? "",
+      APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
+      APP_ORG: (process.env.APP_ORG as string) ?? "",
+      APP_HYGIENE: (process.env.APP_HYGIENE as string) ?? "",
+      APP_SECURITY: (process.env.APP_SECURITY as string) ?? "",
+      APP_PROPERTY_MANAGEMENT:
+        (process.env.APP_PROPERTY_MANAGEMENT as string) ?? "",
+      APP_MECHANICAL_ELECTRICAL:
+        (process.env.APP_MECHANICAL_ELECTRICAL as string) ?? "",
+      APP_PEST_CONTROL: (process.env.APP_PEST_CONTROL as string) ?? "",
+      APP_LANDSCAPING: (process.env.APP_LANDSCAPING as string) ?? "",
+      APP_POOL_MAINTENANCE: (process.env.APP_POOL_MAINTENANCE as string) ?? "",
+    },
+  },
+
+  modules: [
+    (_options, nuxt) => {
+      nuxt.hooks.hook("vite:extendConfig", (config) => {
+        // @ts-expect-error
+        config.plugins.push(vuetify({ autoImport: true }));
+      });
+    },
+  ],
+
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls,
+      },
+    },
+  },
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@7365admin1/layer-common",
+  "license": "MIT",
+  "type": "module",
+  "version": "1.8.0",
+  "author": "7365admin1",
+  "main": "./nuxt.config.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "release": "yarn run build && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.9",
+    "@nuxt/eslint": "latest",
+    "eslint": "^9.14.0",
+    "nuxt": "^3.13.2",
+    "typescript": "^5.8.3",
+    "vite-plugin-vuetify": "^2.0.4",
+    "vue": "latest",
+    "vuetify": "^3.10.4"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
+    "@iconify/vue": "^5.0.0",
+    "@mdi/font": "^7.4.47",
+    "ckeditor5": "^47.2.0",
+    "sass": "^1.80.6",
+    "vue3-signature": "^0.2.4",
+    "zod": "^3.24.2"
+  }
+}

package/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>index</h1>
+</template>

package/pages/payment-method-linked.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-row no-gutters class="fill-height" justify="center" align-content="center">
+    <v-card class="pa-4" elevation="4" color="success lighten-1">
+      <v-card-title class="text-white d-flex align-center">
+        <v-icon class="mr-2">mdi-check-circle</v-icon>
+        Successfully Linked Payment Method
+      </v-card-title>
+
+      <v-card-actions class="d-flex justify-center">
+        <v-btn
+          color="white"
+          variant="tonal"
+          rounded="xl"
+          size="large"
+          @click="closeWindow"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-row>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: "plain",
+});
+
+const closeWindow = () => {
+  window.close();
+};
+</script>

package/pages/require-customer.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-row no-gutters class="fill-height" align="center" justify="center">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+      You must have a customer to view this page. Please join or contact your
+      administrator for access.
+      <v-row no-gutters justify="center" align="center" class="mt-2">
+        <v-btn
+          @click="goToAccount"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Go to Organization Page
+        </v-btn>
+        <span class="mx-2">or</span>
+        <v-btn
+          @click="createCustomer"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Create an Customer
+        </v-btn>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+const { APP_NAME, APP_ORG } = useRuntimeConfig().public;
+
+function goToAccount() {
+  window.location.href = `${APP_ORG}`;
+}
+
+const { authenticate } = useLocalAuth();
+
+authenticate();
+
+const { currentUser } = useLocalAuth();
+
+function createCustomer() {
+  if (APP_NAME.toLowerCase() === "org") {
+    navigateTo({
+      name: "org-organizations-customers-add",
+      params: { organization: currentUser.value?.defaultOrg },
+    });
+  } else {
+    window.location.href = `${APP_ORG}/org/${currentUser.value?.defaultOrg}/customers/add`;
+  }
+}
+</script>

package/pages/require-organization-membership.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-row no-gutters class="fill-height" align="center" justify="center">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+      You must be a member of an organization to view this page. Please join or
+      contact your administrator for access.
+      <v-row no-gutters justify="center" align="center" class="mt-2">
+        <v-btn
+          @click="goToAccount"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Go to Account Page
+        </v-btn>
+        <span class="mx-2">or</span>
+        <v-btn
+          @click="createOrg"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Create an Organization
+        </v-btn>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+const { APP_ACCOUNT, APP_NAME, APP_ORG } = useRuntimeConfig().public;
+
+function goToAccount() {
+  window.location.href = `${APP_ACCOUNT}/home`;
+}
+
+function createOrg() {
+  if (APP_NAME.toLowerCase() === "org") {
+    navigateTo({ name: "organizations-create" });
+  } else {
+    window.location.href = `${APP_ORG}/organizations/create`;
+  }
+}
+</script>

package/pages/unauthorized.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-row no-gutters class="fill-height" align="center" justify="center">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+      You must be a member of an organization to view this page. Please join or
+      contact your administrator for access.
+      <v-row no-gutters justify="center" class="mt-2">
+        <v-btn
+          @click="goToAccount"
+          rounded="xl"
+          variant="tonal"
+          class="text-none text-subtitle-2"
+        >
+          Go to Account Page
+        </v-btn>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "plain",
+});
+
+function goToAccount() {
+  const { APP_ACCOUNT } = useRuntimeConfig().public;
+  window.location.href = `${APP_ACCOUNT}/home`;
+}
+</script>

package/plugins/API.ts

@@ -0,0 +1,21 @@
+export default defineNuxtPlugin(() => {
+  const { cookieConfig } = useRuntimeConfig().public;
+
+  const api = $fetch.create({
+    baseURL: "/",
+    retry: 1,
+    retryStatusCodes: [401],
+    retryDelay: 500,
+    onRequest({ options }) {
+      const sid = useCookie("sid", cookieConfig).value ?? "";
+      options.headers.set("Authorization", sid);
+    },
+  });
+
+  // Expose to useNuxtApp().$api
+  return {
+    provide: {
+      api,
+    },
+  };
+});

package/plugins/iconify.client.ts

@@ -0,0 +1,5 @@
+import { Icon } from "@iconify/vue";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("Icon", Icon);
+});

package/plugins/secure-member.client.ts

@@ -0,0 +1,86 @@
+import { z } from "zod";
+
+const hexSchema = z
+  .string()
+  .regex(/^[0-9a-fA-F]{24}$/, "Invalid organization ID");
+
+export default defineNuxtPlugin(() => {
+  const router = useRouter();
+  const { getByUserType } = useMember();
+  const { getRoleById } = useRole();
+  const { getById } = useOrg();
+
+  const { userAppRole, id, orgNature } = useLocalSetup();
+
+  router.afterEach(async (to) => {
+    const isMember = to.meta?.memberOnly;
+
+    if (!isMember) return;
+
+    const APP = useRuntimeConfig().public.APP;
+    const org = computed(
+      () =>
+        (to.params.org as string) || (to.params.organization as string) || ""
+    );
+
+    console.log('[secure-member-plugin', 'org', org.value)
+
+    if (!hexSchema.safeParse(org.value).success) {
+      return router.replace({ name: "require-organization-membership" });
+    }
+
+    const userId = computed(() => useCookie("user").value ?? "");
+
+    const { data: userMemberData, error: userMemberError } =
+      await useLazyAsyncData(
+        "plugin-get-member-by-id-" + userId.value + "-" + APP + "-" + org.value,
+        () => getByUserType(userId.value, APP, org.value),
+        { watch: [userId] }
+      );
+
+    watchEffect(() => {
+      if (userMemberError.value) {
+        console.log('running-secure-member-redirect-plugin')
+        navigateTo(
+          {
+            name: "index",
+          },
+          { replace: true }
+        );
+      }
+    });
+
+    const roleId = ref("roleId");
+
+    watchEffect(() => {
+      if (userMemberData.value) {
+        id.value = userMemberData.value.org ?? "";
+        roleId.value = userMemberData.value.role ?? "roleId";
+      }
+    });
+
+    const { data: getOrgByIdReq } = await useLazyAsyncData(
+      "plugin-get-org-by-id-" + org.value,
+      () => getById(org.value),
+      { watch: [org] }
+    );
+
+    watchEffect(() => {
+      if (getOrgByIdReq.value) {
+        orgNature.value = getOrgByIdReq.value.nature ?? "";
+      }
+    });
+
+    const { data: getRoleByIdReq } = await useLazyAsyncData(
+      "plugin-get-role-by-id-" + roleId.value,
+      () => getRoleById(roleId.value),
+      { watch: [roleId] }
+    );
+
+    watchEffect(() => {
+      if (getRoleByIdReq.value) {
+        userAppRole.value = getRoleByIdReq.value;
+      }
+    });
+  });
+});

package/plugins/vuetify.ts

@@ -0,0 +1,62 @@
+// import this after install `@mdi/font` package
+import "@mdi/font/css/materialdesignicons.css";
+import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
+import { VMaskInput } from 'vuetify/labs/VMaskInput'
+
+
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import { Icon } from "@iconify/vue";
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    defaults: {
+      VTextField: {
+        variant: "outlined",
+        density: "comfortable",
+      },
+      VAutocomplete: {
+        variant: "outlined",
+        density: "comfortable",
+        menuProps: { attach: document.body, zIndex: 3000, }
+      },
+      VSelect: {
+        variant: "outlined",
+        density: "comfortable",
+        menuProps: { attach: document.body, zIndex: 3000}
+      },
+      VTextarea: {
+        variant: "outlined",
+        density: "comfortable",
+      },
+    },
+    theme: {
+      defaultTheme: "iservice365",
+      themes: {
+        iservice365: {
+          dark: false,
+          colors: {
+            primary: "#042134",
+            "primary-button": "#1867C0",
+            "text-primary": "#052439",
+          },
+        },
+      },
+    },
+    icons: {
+      defaultSet: "iconify",
+      sets: {
+        iconify: {
+          component: (props: any) => h(Icon, { icon: props.icon }),
+        },
+      },
+    },
+    components: {
+      VFileUpload,
+      VFileUploadItem,
+      VMaskInput
+    }
+  });
+
+  app.vueApp.use(vuetify);
+});