@iservice365/layer-common 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.0.1
+
+### Patch Changes
+
+- 4d92608: Vehicle mgmt - initial release
+
 ## 1.0.0
 
 ### Major Changes

package/components/Input/DateTimePicker.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <v-text-field ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly" @click="openDatePicker"  placeholder="MM/DD/YYYY, HH:MM AM/PM" :rules="rules">
+            <template #append-inner>
+                <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+            </template>
+        </v-text-field>
+        <div class="w-100 d-flex align-end ga-3 hidden-input">
+            <input ref="dateInput" type="datetime-local"  v-model="dateTime"  />
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+const prop = defineProps({
+    rules: {
+        type: Array as PropType<Array<any>>,
+        default: () => []
+    }
+})
+
+const dateTime = defineModel<string | null>({ default: null })
+
+const dateTimeFormattedReadOnly = ref<string | null>(null)
+
+
+
+const dateInput = ref<HTMLInputElement | null>(null)
+const dateTimePickerRef = ref<HTMLInputElement | null>(null)
+
+function openDatePicker() {
+    dateInput.value?.showPicker()
+}
+
+function validate(){
+    (dateTimePickerRef.value as any)?.validate()
+}
+
+
+watch(dateTime, (dateVal) => {
+    if (!dateVal) return dateTimeFormattedReadOnly.value = null
+    const date = new Date(dateVal)
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    }
+    const formatted = date.toLocaleString('en-US', options)
+    dateTimeFormattedReadOnly.value = formatted
+})
+
+
+
+defineExpose({
+    validate
+})
+</script>
+
+<style scoped>
+.hidden-input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+</style>

package/components/Input/PhoneNumber.vue

@@ -0,0 +1,187 @@
+<template>
+  <v-row dense>
+    <!-- Country/Dial Code -->
+    <v-col cols="4">
+      <v-select
+        v-model="localDialCode"
+        :items="countryOptions"
+        item-title="display"
+        item-value="label"
+        density="comfortable"
+        :rules="[dialCodeRequired]"
+        hide-details="auto"
+        placeholder="Select Country"
+        z-index="100000000"
+        :menu-props="{
+          maxHeight: 300,
+        }"
+        no-data-text="No countries available"
+      >
+        <template #selection="{ item }">
+          <span class="text-body-2">{{ item.raw.dialCode }}</span>
+        </template>
+        <template #item="{ item }">
+          <v-list-item-title>
+            {{ item.raw.display }}
+          </v-list-item-title>
+        </template>
+      </v-select>
+    </v-col>
+
+    <!-- Phone Number -->
+    <v-col cols="8">
+      <v-text-field
+        v-model="localPhoneNumber"
+        :placeholder="selectedCountry?.placeholder || 'Phone Number'"
+        density="comfortable"
+        :rules="phoneValidationRules"
+        hide-details="auto"
+        type="tel"
+        @input="handlePhoneInput"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dialCode: {
+    type: String,
+    default: "+65",
+  },
+  phoneNumber: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits([
+  "update:dialCode",
+  "update:phoneNumber",
+  "update:isValid",
+]);
+
+const { countries, getCountryByDialCode, formatPhoneNumber } =
+  usePhoneCountries();
+
+const initialCountry = countries.find(
+  (country) => country.dialCode === props.dialCode
+);
+const localDialCode = ref(initialCountry?.label || props.dialCode);
+const localPhoneNumber = ref(props.phoneNumber);
+
+const countryOptions = computed(() => {
+  return countries.map((country) => ({
+    ...country,
+    display: `${country.country} (${country.dialCode})`,
+  }));
+});
+
+const selectedCountry = computed(() => {
+  const selected = countries.find(
+    (country) => country.label === localDialCode.value
+  );
+  return selected;
+});
+
+const dialCodeRequired = (v: string) => {
+  if (!props.required) return true;
+  return !!v || "Country code is required";
+};
+
+const phoneRequired = (v: string) => {
+  if (!props.required) return true;
+  return !!v || "Phone number is required";
+};
+
+const phoneDigitsOnly = (v: string) => {
+  if (!v) return props.required ? "Phone number is required" : true;
+  return (
+    /^\d+$/.test(v.replace(/\s|-|\(|\)/g, "")) || "Only numbers are allowed"
+  );
+};
+
+const phoneValidLength = (v: string) => {
+  if (!v || !selectedCountry.value) return true;
+
+  const cleanNumber = v.replace(/\s|-|\(|\)/g, "");
+  const { minLength, maxLength } = selectedCountry.value;
+
+  if (cleanNumber.length < minLength) {
+    return `Phone number must be at least ${minLength} digits`;
+  }
+  if (cleanNumber.length > maxLength) {
+    return `Phone number must not exceed ${maxLength} digits`;
+  }
+  return true;
+};
+
+const phoneCountryFormat = (v: string) => {
+  if (!v || !selectedCountry.value?.format) return true;
+
+  const cleanNumber = v.replace(/\s|-|\(|\)/g, "");
+  return (
+    selectedCountry.value.format.test(cleanNumber) ||
+    `Invalid ${selectedCountry.value.country} phone number format`
+  );
+};
+
+const phoneValidationRules = computed(() => [
+  phoneRequired,
+  phoneDigitsOnly,
+  phoneValidLength,
+  phoneCountryFormat,
+]);
+
+const handlePhoneInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const actualDialCode = selectedCountry.value?.dialCode || localDialCode.value;
+  const formatted = formatPhoneNumber(target.value, actualDialCode);
+  localPhoneNumber.value = formatted;
+};
+
+const isValid = computed(() => {
+  if (!props.required && !localPhoneNumber.value) return true;
+
+  return phoneValidationRules.value.every(
+    (rule) => rule(localPhoneNumber.value) === true
+  );
+});
+
+watch(localDialCode, (val) => {
+  const actualDialCode = selectedCountry.value?.dialCode || val;
+  emit("update:dialCode", actualDialCode);
+});
+watch(localPhoneNumber, (val) => emit("update:phoneNumber", val));
+watch(isValid, (val) => emit("update:isValid", val));
+
+watch(
+  () => props.dialCode,
+  (val) => {
+    // Find the country with matching dialCode and set the label
+    const matchingCountry = countries.find(
+      (country) => country.dialCode === val
+    );
+    localDialCode.value = matchingCountry?.label || val;
+  }
+);
+watch(
+  () => props.phoneNumber,
+  (val) => (localPhoneNumber.value = val)
+);
+
+watch(localDialCode, () => {
+  if (localPhoneNumber.value) {
+    const actualDialCode =
+      selectedCountry.value?.dialCode || localDialCode.value;
+    localPhoneNumber.value = formatPhoneNumber(
+      localPhoneNumber.value,
+      actualDialCode
+    );
+  }
+});
+</script>

package/components/Snackbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-snackbar v-model="snackbar" :color="props.color">
+  <v-snackbar v-model="snackbar" :color="props.color" :z-index="100000000" >
     {{ props.text }}
 
     <template #actions>

package/components/TableMain.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-row no-gutters>
+    <!-- Top Actions -->
+    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
+      <v-row no-gutters>
+        <slot name="actions">
+          <v-btn
+            v-if="canCreate"
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="emits('create')"
+          >
+            {{ createLabel }}
+          </v-btn>
+        </slot>
+      </v-row>
+    </v-col>
+
+    <!-- Table Card -->
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <!-- Toolbar -->
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="emits('refresh')">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="internalPage"
+                :length="pages"
+                @update:value="emits('update:page', internalPage)"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <!-- Data Table -->
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :item-value="itemValue"
+          :items-per-page="itemsPerPage"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          @click:row="(_: any, data: any) => emits('row-click', data)"
+          style="max-height: calc(100vh - (200px))"
+        >
+          <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps" />
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [],
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  canCreate: {
+    type: Boolean,
+    default: false,
+  },
+  createLabel: {
+    type: String,
+    default: "Add",
+  },
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pages: {
+    type: Number,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    default: "-- - -- of --",
+  },
+});
+
+const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
+
+const internalPage = ref(props.page);
+watch(
+  () => props.page,
+  (val) => {
+    internalPage.value = val;
+  }
+);
+</script>

package/components/TableWithButton.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-card flat border="sm black" :loading="loading" class="px-0" :ripple="false">
+    <v-toolbar class="px-5">
+      <template #prepend>
+        <span class="text-subtitle-1 font-weight-black">{{ tableTitle }}</span>
+      </template>
+      <template #append>
+        <v-btn color="primary" variant="flat" size="large" density="comfortable" :text="buttonLabel"
+          class="text-capitalize" />
+      </template>
+    </v-toolbar>
+    <v-card-text class="pa-0 bg-red">
+      <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
+        fixed-header hide-default-footer hide-default-header @click:row="$emit('row-click', $event)"
+        style="max-height: calc(100vh - (200px))">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
+          <slot :name="slotName" v-bind="slotProps" />
+        </template>
+      </v-data-table>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string | number>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+    default: () => [],
+  },
+
+  itemValue: {
+    type: String,
+    default: "_id",
+  },
+    itemsPerPage: {
+    type: Number,
+    default: 20,
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  tableTitle: {
+    type: String,
+    default: "",
+    required: false
+  },
+  buttonLabel: {
+    type: String,
+    default: "Add",
+    required: false
+  }
+});
+
+const emit = defineEmits(["refresh", "update:pagination", "row-click"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+function tableRowClickHandler(_: any, row: any) {
+  const item = props.items[row.index];
+  emit("row-click", item);
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>

package/composables/useLocal.ts

@@ -43,6 +43,8 @@ export default function useLocal() {
     { title: "Cleaning Services", value: "cleaning_services" },
   ];
 
+  const landingPage = useCookie("landing-page", cookieConfig);
+
   return {
     cookieConfig,
     getUserFromCookie,
@@ -50,5 +52,6 @@ export default function useLocal() {
     apps,
     headerSearch,
     natureOfBusiness,
+    landingPage,
   };
 }

package/composables/useLocalAuth.ts

@@ -3,11 +3,11 @@ export default function useLocalAuth() {
 
   const currentUser = useState<TUser | null>("currentUser", () => null);
 
-  function authenticate() {
+  async function authenticate() {
     const user = useCookie("user", cookieConfig).value;
 
     const { data: getCurrentUserReq, error: getCurrentUserErr } =
-      useLazyAsyncData("getCurrentUser", () =>
+      await useLazyAsyncData("getCurrentUser", () =>
         useNuxtApp().$api<TUser>(`/api/users/id/${user}`)
       );
 
@@ -44,10 +44,10 @@ export default function useLocalAuth() {
   }
 
   async function logout() {
-    const refreshToken = useCookie("refreshToken", cookieConfig).value;
-    if (refreshToken) {
+    const sid = useCookie("sid", cookieConfig).value;
+    if (sid) {
       try {
-        await useNuxtApp().$api(`/api/auth/${refreshToken}`, {
+        await useNuxtApp().$api(`/api/auth/${sid}`, {
           method: "DELETE",
         });
 

package/composables/usePhoneCountries.ts

@@ -0,0 +1,561 @@
+export default function usePhoneCountries() {
+  const countries: TPhoneCountry[] = [
+    // Asia Pacific
+    {
+      _id: "sg",
+      country: "Singapore",
+      dialCode: "+65",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "8123 4567",
+      format: /^[89]\d{7}$/,
+      label: "+65",
+    },
+    {
+      _id: "my",
+      country: "Malaysia",
+      dialCode: "+60",
+      minLength: 9,
+      maxLength: 11,
+      placeholder: "12 345 6789",
+      format: /^1[0-9]\d{7,9}$/,
+      label: "+60",
+    },
+    {
+      _id: "ph",
+      country: "Philippines",
+      dialCode: "+63",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "917 123 4567",
+      format: /^9\d{9}$/,
+      label: "+63",
+    },
+    {
+      _id: "_id",
+      country: "Indonesia",
+      dialCode: "+62",
+      minLength: 9,
+      maxLength: 12,
+      placeholder: "812 3456 789",
+      format: /^8\d{8,11}$/,
+      label: "+62",
+    },
+    {
+      _id: "th",
+      country: "Thailand",
+      dialCode: "+66",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "81 234 5678",
+      format: /^[689]\d{8}$/,
+      label: "+66",
+    },
+    {
+      _id: "vn",
+      country: "Vietnam",
+      dialCode: "+84",
+      minLength: 9,
+      maxLength: 10,
+      placeholder: "912 345 678",
+      format: /^[3-9]\d{8,9}$/,
+      label: "+84",
+    },
+    {
+      _id: "kh",
+      country: "Cambodia",
+      dialCode: "+855",
+      minLength: 8,
+      maxLength: 9,
+      placeholder: "12 345 678",
+      format: /^[1-9]\d{7,8}$/,
+      label: "+855",
+    },
+    {
+      _id: "la",
+      country: "Laos",
+      dialCode: "+856",
+      minLength: 8,
+      maxLength: 10,
+      placeholder: "20 1234 567",
+      format: /^[2-9]\d{7,9}$/,
+      label: "+856",
+    },
+    {
+      _id: "mm",
+      country: "Myanmar",
+      dialCode: "+95",
+      minLength: 9,
+      maxLength: 10,
+      placeholder: "9 1234 5678",
+      format: /^9\d{8,9}$/,
+      label: "+95",
+    },
+    {
+      _id: "bn",
+      country: "Brunei",
+      dialCode: "+673",
+      minLength: 7,
+      maxLength: 7,
+      placeholder: "712 3456",
+      format: /^[2-8]\d{6}$/,
+      label: "+673",
+    },
+
+    // Oceania
+    {
+      _id: "au",
+      country: "Australia",
+      dialCode: "+61",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "412 345 678",
+      format: /^[2-9]\d{8}$/,
+      label: "+61",
+    },
+    {
+      _id: "nz",
+      country: "New Zealand",
+      dialCode: "+64",
+      minLength: 8,
+      maxLength: 9,
+      placeholder: "21 123 456",
+      format: /^[2-9]\d{7,8}$/,
+      label: "+64",
+    },
+    {
+      _id: "pg",
+      country: "Papua New Guinea",
+      dialCode: "+675",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "7012 3456",
+      format: /^[7-9]\d{7}$/,
+      label: "+675",
+    },
+    {
+      _id: "fj",
+      country: "Fiji",
+      dialCode: "+679",
+      minLength: 7,
+      maxLength: 7,
+      placeholder: "712 3456",
+      format: /^[7-9]\d{6}$/,
+      label: "+679",
+    },
+
+    // North America
+    {
+      _id: "us",
+      country: "United States",
+      dialCode: "+1",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "(555) 123-4567",
+      format: /^\d{10}$/,
+      label: "+1 (US)",
+    },
+    {
+      _id: "ca",
+      country: "Canada",
+      dialCode: "+1",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "(416) 123-4567",
+      format: /^\d{10}$/,
+      label: "+1 (CA)",
+    },
+
+    // Europe
+    {
+      _id: "gb",
+      country: "United Kingdom",
+      dialCode: "+44",
+      minLength: 10,
+      maxLength: 11,
+      placeholder: "7700 900123",
+      format: /^[1-9]\d{9,10}$/,
+      label: "+44",
+    },
+    {
+      _id: "de",
+      country: "Germany",
+      dialCode: "+49",
+      minLength: 10,
+      maxLength: 12,
+      placeholder: "151 12345678",
+      format: /^[1-9]\d{9,11}$/,
+      label: "+49",
+    },
+    {
+      _id: "fr",
+      country: "France",
+      dialCode: "+33",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "6 12 34 56 78",
+      format: /^[1-9]\d{8}$/,
+      label: "+33",
+    },
+    {
+      _id: "it",
+      country: "Italy",
+      dialCode: "+39",
+      minLength: 9,
+      maxLength: 11,
+      placeholder: "312 345 6789",
+      format: /^3\d{8,10}$/,
+      label: "+39",
+    },
+    {
+      _id: "es",
+      country: "Spain",
+      dialCode: "+34",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "612 34 56 78",
+      format: /^[6-9]\d{8}$/,
+      label: "+34",
+    },
+    {
+      _id: "nl",
+      country: "Netherlands",
+      dialCode: "+31",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "6 12345678",
+      format: /^6\d{8}$/,
+      label: "+31",
+    },
+    {
+      _id: "ch",
+      country: "Switzerland",
+      dialCode: "+41",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "78 123 45 67",
+      format: /^[7-9]\d{8}$/,
+      label: "+41",
+    },
+    {
+      _id: "at",
+      country: "Austria",
+      dialCode: "+43",
+      minLength: 10,
+      maxLength: 11,
+      placeholder: "664 123456",
+      format: /^[6-9]\d{9,10}$/,
+      label: "+43",
+    },
+    {
+      _id: "be",
+      country: "Belgium",
+      dialCode: "+32",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "470 12 34 56",
+      format: /^4\d{8}$/,
+      label: "+32",
+    },
+    {
+      _id: "se",
+      country: "Sweden",
+      dialCode: "+46",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "70 123 45 67",
+      format: /^7\d{8}$/,
+      label: "+46",
+    },
+    {
+      _id: "no",
+      country: "Norway",
+      dialCode: "+47",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "412 34 567",
+      format: /^[4-9]\d{7}$/,
+      label: "+47",
+    },
+    {
+      _id: "dk",
+      country: "Denmark",
+      dialCode: "+45",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "20 12 34 56",
+      format: /^[2-9]\d{7}$/,
+      label: "+45",
+    },
+    {
+      _id: "fi",
+      country: "Finland",
+      dialCode: "+358",
+      minLength: 9,
+      maxLength: 10,
+      placeholder: "50 123 4567",
+      format: /^[4-5]\d{8,9}$/,
+      label: "+358",
+    },
+
+    // Middle East
+    {
+      _id: "sa",
+      country: "Saudi Arabia",
+      dialCode: "+966",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "50 123 4567",
+      format: /^5\d{8}$/,
+      label: "+966",
+    },
+    {
+      _id: "ae",
+      country: "United Arab Emirates",
+      dialCode: "+971",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "50 123 4567",
+      format: /^5\d{8}$/,
+      label: "+971",
+    },
+    {
+      _id: "qa",
+      country: "Qatar",
+      dialCode: "+974",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "3012 3456",
+      format: /^[3-7]\d{7}$/,
+      label: "+974",
+    },
+    {
+      _id: "kw",
+      country: "Kuwait",
+      dialCode: "+965",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "5012 3456",
+      format: /^[569]\d{7}$/,
+      label: "+965",
+    },
+    {
+      _id: "bh",
+      country: "Bahrain",
+      dialCode: "+973",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "3612 3456",
+      format: /^[3-9]\d{7}$/,
+      label: "+973",
+    },
+    {
+      _id: "om",
+      country: "Oman",
+      dialCode: "+968",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "9012 3456",
+      format: /^[79]\d{7}$/,
+      label: "+968",
+    },
+
+    // East Asia
+    {
+      _id: "cn",
+      country: "China",
+      dialCode: "+86",
+      minLength: 11,
+      maxLength: 11,
+      placeholder: "138 0013 8000",
+      format: /^1[3-9]\d{9}$/,
+      label: "+86",
+    },
+    {
+      _id: "jp",
+      country: "Japan",
+      dialCode: "+81",
+      minLength: 10,
+      maxLength: 11,
+      placeholder: "90 1234 5678",
+      format: /^[7-9]\d{9,10}$/,
+      label: "+81",
+    },
+    {
+      _id: "kr",
+      country: "South Korea",
+      dialCode: "+82",
+      minLength: 10,
+      maxLength: 11,
+      placeholder: "10 1234 5678",
+      format: /^1[0-9]\d{8,9}$/,
+      label: "+82",
+    },
+    {
+      _id: "hk",
+      country: "Hong Kong",
+      dialCode: "+852",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "5123 4567",
+      format: /^[5-9]\d{7}$/,
+      label: "+852",
+    },
+    {
+      _id: "tw",
+      country: "Taiwan",
+      dialCode: "+886",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "912 345 678",
+      format: /^9\d{8}$/,
+      label: "+886",
+    },
+    {
+      _id: "mo",
+      country: "Macau",
+      dialCode: "+853",
+      minLength: 8,
+      maxLength: 8,
+      placeholder: "6123 4567",
+      format: /^6\d{7}$/,
+      label: "+853",
+    },
+
+    // South Asia
+    {
+      _id: "in",
+      country: "India",
+      dialCode: "+91",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "98765 43210",
+      format: /^[6-9]\d{9}$/,
+      label: "+91",
+    },
+    {
+      _id: "pk",
+      country: "Pakistan",
+      dialCode: "+92",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "301 2345678",
+      format: /^3\d{9}$/,
+      label: "+92",
+    },
+    {
+      _id: "bd",
+      country: "Bangladesh",
+      dialCode: "+880",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "1712 345678",
+      format: /^1[3-9]\d{8}$/,
+      label: "+880",
+    },
+    {
+      _id: "lk",
+      country: "Sri Lanka",
+      dialCode: "+94",
+      minLength: 9,
+      maxLength: 9,
+      placeholder: "71 234 5678",
+      format: /^7[0-8]\d{7}$/,
+      label: "+94",
+    },
+    {
+      _id: "np",
+      country: "Nepal",
+      dialCode: "+977",
+      minLength: 10,
+      maxLength: 10,
+      placeholder: "98 1234 5678",
+      format: /^9[78]\d{8}$/,
+      label: "+977",
+    },
+    {
+      _id: "mv",
+      country: "Maldives",
+      dialCode: "+960",
+      minLength: 7,
+      maxLength: 7,
+      placeholder: "791 2345",
+      format: /^[79]\d{6}$/,
+      label: "+960",
+    },
+  ];
+
+  const getCountryByDialCode = (
+    dialCode: string
+  ): TPhoneCountry | undefined => {
+    return countries.find((country) => country.dialCode === dialCode);
+  };
+
+  const getDialCodes = (): string[] => {
+    return countries.map((country) => country.dialCode);
+  };
+
+  const formatPhoneNumber = (phoneNumber: string, dialCode: string): string => {
+    const country = getCountryByDialCode(dialCode);
+    if (!country) return phoneNumber;
+
+    let value = phoneNumber.replace(/\D/g, ""); // Remove non-digits
+
+    switch (dialCode) {
+      case "+65": // Singapore
+        if (value.length > 4) {
+          value = value.substring(0, 4) + " " + value.substring(4, 8);
+        }
+        break;
+      case "+60": // Malaysia
+        if (value.length > 2) {
+          value =
+            value.substring(0, 2) +
+            " " +
+            value.substring(2, 5) +
+            " " +
+            value.substring(5);
+        }
+        break;
+      case "+1": // US/Canada
+        if (value.length > 6) {
+          value =
+            "(" +
+            value.substring(0, 3) +
+            ") " +
+            value.substring(3, 6) +
+            "-" +
+            value.substring(6, 10);
+        } else if (value.length > 3) {
+          value = "(" + value.substring(0, 3) + ") " + value.substring(3);
+        }
+        break;
+      case "+44": // UK
+        if (value.length > 4) {
+          value = value.substring(0, 4) + " " + value.substring(4);
+        }
+        break;
+      default:
+        // Generic formatting for other countries
+        if (value.length > 3 && value.length <= 6) {
+          value = value.substring(0, 3) + " " + value.substring(3);
+        } else if (value.length > 6) {
+          value =
+            value.substring(0, 3) +
+            " " +
+            value.substring(3, 6) +
+            " " +
+            value.substring(6);
+        }
+    }
+
+    return value;
+  };
+
+  return {
+    countries,
+    getCountryByDialCode,
+    getDialCodes,
+    formatPhoneNumber,
+  };
+}

package/composables/useUtils.ts

@@ -301,6 +301,51 @@ export default function useUtils() {
     return n + (s[(v - 20) % 10] || s[v] || s[0]);
   }
 
+  function formatDateISO8601(date: Date): string {
+    const pad = (n: number) => n.toString().padStart(2, '0');
+      const year = date.getFullYear();
+      const month = pad(date.getMonth() + 1);
+      const day = pad(date.getDate());
+      const hours = pad(date.getHours());
+      const minutes = pad(date.getMinutes());
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  function isValidBaseURL(baseURL: string | null) {
+    if (!baseURL) return true;
+
+    // Check if the baseURL starts with http:// or https://
+    if (!baseURL.startsWith("http://") && !baseURL.startsWith("https://")) {
+      return 'Base URL should start with "https://" or "http://"';
+    }
+
+    try {
+      const url = new URL(baseURL);
+
+      // Reject if there's any path beyond root
+      if (url.pathname !== "/" && url.pathname !== "") {
+        return "Invalid Base URL";
+      }
+
+      // Also reject if there’s a query or hash
+      if (url.search || url.hash) {
+        return "Invalid Base URL";
+      }
+
+      return ["http:", "https:"].includes(url.protocol)
+        ? true
+        : "Invalid Base URL";
+    } catch (e: any) {
+      return "Invalid Base URL";
+    }
+  }
+
+  function formatCamelCaseToWords(key: string){
+    return key
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, str => str.toUpperCase());
+  }
+
   return {
     requiredRule,
     emailRule,
@@ -331,5 +376,8 @@ export default function useUtils() {
     replaceMatch,
     setRouteParams,
     toOrdinal,
+    formatDateISO8601,
+    isValidBaseURL,
+    formatCamelCaseToWords
   };
 }

package/nuxt.config.ts

@@ -1,6 +1,7 @@
 // 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", "nuxt-signature-pad"],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/types/phone-number.d.ts

@@ -0,0 +1,10 @@
+declare type TPhoneCountry = {
+  _id: string;
+  country: string;
+  dialCode: string;
+  minLength: number;
+  maxLength: number;
+  placeholder: string;
+  format?: RegExp;
+  label: string;
+};

package/types/site.d.ts

@@ -9,6 +9,8 @@ declare type TSite = {
   createdAt?: string;
   updatedAt?: string;
   deletedAt?: string;
-};
+  metadata?: {
+    block?: number; // Number of blocks in the site
+  }} ;
 
 declare type TSiteCreate = Pick<TSite, "name" | "description" | "orgId">;