@7365admin1/layer-common 3.2.2-staging.106 → 3.2.2-staging.108

package/components/HidReaderForm.vue

@@ -28,17 +28,6 @@
           class="mb-3"
         />
 
-        <div class="field-label">Device ID <span>*</span></div>
-        <v-text-field
-          v-model="draft.deviceId"
-          aria-label="Device ID"
-          placeholder="Enter device id"
-          variant="outlined"
-          density="compact"
-          hide-details="auto"
-          class="mb-3"
-        />
-
         <div class="field-label">Location <span>*</span></div>
         <v-text-field
           v-model="draft.location"
@@ -79,6 +68,49 @@
           :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
           @click:append-inner="showPassword = !showPassword"
         />
+
+        <v-btn
+          v-if="mode === 'add'"
+          block
+          variant="tonal"
+          color="primary"
+          prepend-icon="mdi-lan-connect"
+          class="text-none mt-3"
+          :loading="discovering"
+          :disabled="!canDiscover"
+          @click="connectReader"
+        >
+          Connect &amp; discover reader
+        </v-btn>
+        <v-alert v-if="discoveryError" type="error" density="compact" variant="tonal" class="mt-3">
+          {{ discoveryError }}
+        </v-alert>
+
+        <div class="field-label mt-3">Device ID <span>*</span></div>
+        <v-text-field
+          v-model="draft.deviceId"
+          aria-label="Device ID"
+          placeholder="Connect to detect device ID"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          class="mb-3"
+          readonly
+        />
+
+        <div class="field-label">HID Portal <span>*</span></div>
+        <v-select
+          v-model="draft.portalId"
+          :items="portals"
+          item-title="name"
+          item-value="id"
+          aria-label="HID Portal"
+          placeholder="Connect to load portals"
+          variant="outlined"
+          density="compact"
+          hide-details="auto"
+          :readonly="mode === 'edit'"
+        />
       </v-card-text>
 
       <v-card-actions class="form-actions pa-0">
@@ -95,6 +127,7 @@
           variant="flat"
           height="48"
           :loading="loading"
+          :disabled="mode === 'add' && (!draft.deviceId || !draft.portalId)"
           @click="submit"
         >
           Submit
@@ -135,11 +168,18 @@ const dialogModel = computed({
 });
 
 const showPassword = ref(false);
+const discovering = ref(false);
+const discoveryError = ref("");
+const portals = ref<Array<{ id: number; name: string }>>([]);
+const discoveredConnection = ref("");
+const { discoverReader } = useHidAmico();
 const monitorEnabled = ref(true);
 const draft = reactive({
   name: "",
   baseUrl: "",
   deviceId: "",
+  portalId: null as number | null,
+  portalName: "",
   location: "",
   username: "",
   password: "",
@@ -153,6 +193,13 @@ watch(
     draft.name = props.reader?.name ?? "";
     draft.baseUrl = props.reader?.baseUrl ?? "";
     draft.deviceId = props.reader?.deviceId ?? "";
+    draft.portalId = props.reader?.portalId ?? null;
+    draft.portalName = props.reader?.portalName ?? "";
+    portals.value = draft.portalId
+      ? [{ id: draft.portalId, name: draft.portalName || `Portal ${draft.portalId}` }]
+      : [];
+    discoveryError.value = "";
+    discoveredConnection.value = "";
     draft.location = props.reader?.location ?? "";
     draft.username = props.reader?.username ?? "";
     draft.password = props.reader?.password ?? "";
@@ -165,9 +212,53 @@ function close() {
   emit("update:modelValue", false);
 }
 
+const canDiscover = computed(() => Boolean(
+  draft.baseUrl.trim() && draft.username.trim() && draft.password,
+));
+
+watch(
+  () => [draft.baseUrl, draft.username, draft.password],
+  () => {
+    if (props.mode !== "add" || !discoveredConnection.value) return;
+    const current = [draft.baseUrl.trim(), draft.username.trim(), draft.password].join("\n");
+    if (current !== discoveredConnection.value) {
+      draft.deviceId = "";
+      draft.portalId = null;
+      portals.value = [];
+      discoveredConnection.value = "";
+    }
+  },
+);
+
+async function connectReader() {
+  discovering.value = true;
+  discoveryError.value = "";
+  try {
+    const response = await discoverReader({
+      baseUrl: draft.baseUrl.trim(),
+      username: draft.username.trim(),
+      password: draft.password,
+    });
+    const data = response?.data ?? response;
+    draft.deviceId = String(data?.deviceId || "");
+    portals.value = Array.isArray(data?.portals) ? data.portals : [];
+    draft.portalId = portals.value.length === 1 ? portals.value[0].id : null;
+    discoveredConnection.value = [draft.baseUrl.trim(), draft.username.trim(), draft.password].join("\n");
+  } catch (error: any) {
+    draft.deviceId = "";
+    draft.portalId = null;
+    portals.value = [];
+    discoveryError.value = error?.data?.message || error?.message || "Unable to connect to the HID reader.";
+  } finally {
+    discovering.value = false;
+  }
+}
+
 function submit() {
+  const portal = portals.value.find((item) => item.id === Number(draft.portalId));
   const payload: Record<string, any> = {
     ...draft,
+    portalName: portal?.name || draft.portalName,
     monitorPath: monitorEnabled.value ? "api/notifications" : "",
     enabled: monitorEnabled.value,
     status: monitorEnabled.value ? "active" : "inactive",

package/components/HidReaderManagement.vue

@@ -119,6 +119,7 @@
             <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
             <span>Device ID</span><strong>{{ selectedReader?.deviceId || "N/A" }}</strong>
             <span>Location</span><strong>{{ selectedReader?.location || "N/A" }}</strong>
+            <span>HID Portal</span><strong>{{ selectedReader?.portalName || selectedReader?.portalId || "N/A" }}</strong>
             <span>Monitor Path</span><strong>{{ selectedReader?.monitorPath || "N/A" }}</strong>
             <span>Status</span><strong>{{ formatReaderStatus(resolveReaderStatus(selectedReader)) }}</strong>
             <span>Username</span><strong>{{ selectedReader?.username || "N/A" }}</strong>

package/components/HidUserEnrollment.vue

@@ -12,7 +12,7 @@
       </v-btn>
 
       <v-select
-        v-if="readers.length > 1"
+        v-if="readers.length"
         v-model="selectedReaderId"
         :items="readerOptions"
         item-title="title"
@@ -48,6 +48,18 @@
       />
     </div>
 
+    <v-alert
+      v-if="selectedReader"
+      :type="selectedReader.portalId && selectedReader.portalName ? 'info' : 'warning'"
+      variant="tonal"
+      density="compact"
+      class="mb-4"
+      icon="mdi-door-open"
+    >
+      Access Reader: {{ selectedReader.name || "HID Reader" }} · Access Portal:
+      {{ selectedReader.portalName || "Not configured" }}
+    </v-alert>
+
     <v-card flat border class="table-card">
       <div class="table-refresh">
         <v-btn
@@ -429,10 +441,13 @@ const statusOptions = ["Status", "Mapped", "Unmapped"];
 
 const readerOptions = computed(() =>
   readers.value.map((reader) => ({
-    title: reader.name || reader.deviceId || reader._id,
+    title: `${reader.name || reader.deviceId || reader._id} — ${reader.portalName || "Portal not configured"}`,
     value: reader._id,
   }))
 );
+const selectedReader = computed(() =>
+  readers.value.find((reader) => reader._id === (selectedReaderId.value || form.reader)) || null,
+);
 
 const pageRange = computed(() => {
   if (serverPageRange.value) return serverPageRange.value;
@@ -689,6 +704,10 @@ async function saveUser() {
     showToast("Access PIN must contain numbers only.", "error");
     return;
   }
+  if (selectedPhotoFile.value && (!selectedReader.value?.portalId || !selectedReader.value?.portalName)) {
+    showToast("Reconnect this HID reader and select a portal before enrolling facial recognition.", "error");
+    return;
+  }
 
   saving.value = true;
   try {

package/components/MemberInformation.vue

@@ -75,6 +75,7 @@
                 v-model:cards="memberPassCards" :settings="props.settings" :loading="props.settingsLoading"
                 :site-id="props.site" :unit-id="props.unitId" :visitor-type="props.type"
                 :hid-qr-code-enabled="props.hidQrCodeEnabled" :hid-qr-printer-configured="props.hidQrPrinterConfigured"
+                :hid-reader-name="props.hidReaderName" :hid-portal-name="props.hidPortalName"
                 :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)" />
             </v-col>
 
@@ -192,6 +193,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hidReaderName: {
+    type: String,
+    default: "",
+  },
+  hidPortalName: {
+    type: String,
+    default: "",
+  },
   selectedNfcCards: {
     type: Array as PropType<{ _id: string; cardNo: string }[]>,
     default: () => [],

package/components/SubscriptionPlanTable.vue

@@ -1,10 +1,8 @@
 <template>
   <v-container fluid class="pa-6">
     <!--
-      THE DESIGN'S TITLE ROW. Was a hand-rolled flex row with a `text-h5`
-      heading and a pill button; it is the same title and the same button on
-      the same line, drawn by the shared `PageHeader` at 22px/800 so this
-      screen's heading matches every other screen's.
+      THE DESIGN'S TITLE ROW. Drawn by the shared `PageHeader` at 22px/800 so
+      this screen's heading matches every other screen's.
     -->
     <PageHeader title="Subscription Plans">
       <template #actions>
@@ -19,13 +17,6 @@
     </PageHeader>
 
     <!-- Search & Filters Bar -->
-    <!--
-      The primitives carry these exactly: the search is a string ref, and both
-      filters are string refs over `{ title, value }` options whose values are
-      already strings, so `AppSelect`'s native branch emits the same string
-      this screen has always stored ("all", "monthly", ...). No filter's
-      meaning, order or default changed.
-    -->
     <v-row class="mb-2" density="compact">
       <!-- Search Input -->
       <v-col cols="12" sm="4" md="3">
@@ -54,16 +45,15 @@
     <!-- Main Table Card -->
     <AppCard class="table-card mt-4">
       <!--
-        The tabs and the refresh were a hand-built `bg-grey-lighten-4` strip -
-        a hard-coded light grey that stayed light in the dark theme. They are
-        the card's own toolbar row now, which is where the design draws tabs,
-        and it follows the theme because it is tokenised.
+        The tabs and the refresh/pagination are the card's own toolbar row,
+        which is where the design draws tabs - it follows the theme because
+        it is tokenised, unlike the old hard-coded `bg-grey-lighten-4` strip.
       -->
-      <CardToolbar>
+      <CardToolbar :count="pageRange">
         <template #tabs>
           <v-tabs v-model="activeTab" color="primary" density="compact">
             <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
-            <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
+            <v-tab value="deactive" class="text-none font-weight-bold">Deactivated</v-tab>
           </v-tabs>
         </template>
 
@@ -75,15 +65,22 @@
             aria-label="Refresh"
             @click="refresh"
           />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getSubscriptionPlans"
+          />
         </template>
       </CardToolbar>
 
       <!-- Table View -->
       <v-data-table
         :headers="headers"
-        :items="filteredPlans"
-        :page="page"
-        :items-per-page="pageSize"
+        :items="items"
+        :loading="loading"
+        item-value="id"
+        items-per-page="20"
+        hide-default-footer
         class="elevation-0"
       >
         <!-- Plan Name -->
@@ -93,7 +90,7 @@
 
         <!-- Plan Type -->
         <template #item.planType="{ item }">
-          {{ item.planType === 'free_bundle' ? 'Free' : 'Paid' }}
+          {{ item.planType === "free_bundle" ? "Free" : "Paid" }}
         </template>
 
         <!-- Billing Cycle -->
@@ -113,17 +110,18 @@
              shape (no leading dot) rather than a colour it has not earned. -->
         <template #item.applicationIds="{ item }">
           <StatusChip tone="neutral" :dot="false">
-            {{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
+            {{ item.applicationIds.length }} Application{{
+              item.applicationIds.length > 1 ? "s" : ""
+            }}
           </StatusChip>
         </template>
 
         <!-- Status Badge -->
         <!-- The shared word -> tone map: "Active" is `ok` (was Vuetify
-             `success`) and "Deactive" is unmapped, so it comes out neutral -
-             which is the grey it already was. Same two words, same two
-             meanings. -->
+             `success`) and "Deactivated" is unmapped, so it comes out
+             neutral - which is the grey it already was. -->
         <template #item.status="{ item }">
-          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactive'" />
+          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactivated'" />
         </template>
 
         <!-- Actions -->
@@ -154,9 +152,15 @@
 
                 <!-- Toggle Status (Deactivate / Activate) -->
                 <v-list-item
-                  :prepend-icon="item.status === 'active' ? 'mdi-trash-can-outline' : 'mdi-check-circle-outline'"
+                  :prepend-icon="
+                    item.status === 'active'
+                      ? 'mdi-trash-can-outline'
+                      : 'mdi-check-circle-outline'
+                  "
                   :title="item.status === 'active' ? 'Deactivate' : 'Activate'"
-                  :class="item.status === 'active' ? 'text-error' : 'text-success'"
+                  :class="
+                    item.status === 'active' ? 'text-error' : 'text-success'
+                  "
                   value="toggle-status"
                   class="text-body-2"
                   @click="togglePlanStatus(item)"
@@ -187,12 +191,15 @@
         />
       </v-card>
     </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch } from "vue";
+import { ref, computed, watch, watchEffect } from "vue";
 import CreateSubscriptionPlan from "./CreateSubsciptionPlan.vue";
+import useSubscriptionPlan from "../composables/useSubscriptionPlan";
 
 import type {
   SubscriptionPlan,
@@ -208,7 +215,12 @@ const headers = [
   { title: "Price", key: "price", align: "start" as const },
   { title: "Applications", key: "applicationIds", align: "center" as const },
   { title: "Status", key: "status", align: "center" as const },
-  { title: "Actions", key: "actions", align: "center" as const, sortable: false },
+  {
+    title: "Actions",
+    key: "actions",
+    align: "center" as const,
+    sortable: false,
+  },
 ];
 
 // Select Options
@@ -225,30 +237,12 @@ const billingOptions = [
   { title: "Yearly", value: "annually" },
 ];
 
-const plans = reactive<SubscriptionPlan[]>([
-  {
-    id: "1",
-    name: "Standard",
-    description: "",
-    maxSeats: 10,
-    planType: "paid_bundle",
-    billingCycle: "monthly",
-    price: 299,
-    applicationIds: ["crm"],
-    status: "active",
-  },
-  {
-    id: "2",
-    name: "Premium",
-    description: "",
-    maxSeats: 25,
-    planType: "paid_bundle",
-    billingCycle: "annually",
-    price: 299,
-    applicationIds: ["crm", "hrm"],
-    status: "active",
-  },
-]);
+const {
+  getAll: _getAll,
+  add: _add,
+  updateById: _updateById,
+  updateStatusById: _updateStatusById,
+} = useSubscriptionPlan();
 
 const search = ref("");
 const categoryFilter = ref("all");
@@ -256,38 +250,79 @@ const billingFilter = ref<"all" | BillingCycle>("all");
 const activeTab = ref<"active" | "deactive">("active");
 
 const page = ref(1);
-const pageSize = 20;
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
 
 const showModal = ref(false);
 const editingPlan = ref<SubscriptionPlan | null>(null);
+const items = ref<SubscriptionPlan[]>([]);
+
+function normalizePlan(raw: Record<string, any>): SubscriptionPlan {
+  return {
+    id: String(raw._id ?? raw.id),
+    name: raw.name,
+    description: raw.description ?? "",
+    maxSeats: raw.maxSeats,
+    planType: raw.planType,
+    billingCycle: raw.billingCycle ?? null,
+    price: raw.price ?? null,
+    applicationIds: (raw.applications ?? []).map(
+      (app: Record<string, any>) => app.applicationId
+    ),
+    status: raw.status === "active" ? "active" : "deactive",
+  };
+}
 
-const filteredPlans = computed(() =>
-  plans.filter((plan) => {
-    if (plan.status !== activeTab.value) return false;
-
-    if (
-      search.value &&
-      !plan.name.toLowerCase().includes(search.value.toLowerCase())
-    ) {
-      return false;
-    }
+const {
+  data: getSubscriptionPlansReq,
+  refresh: getSubscriptionPlans,
+  status: getAllReqStatus,
+} = useLazyAsyncData("get-all-subscription-plans", () =>
+  _getAll({
+    page: page.value,
+    search: search.value,
+    status: activeTab.value,
+    planType: categoryFilter.value === "all" ? "" : categoryFilter.value,
+    billingCycle: billingFilter.value === "all" ? "" : billingFilter.value,
+  })
+);
 
-    if (categoryFilter.value !== "all" && plan.planType !== categoryFilter.value) {
-      return false;
-    }
+const loading = computed(() => getAllReqStatus.value === "pending");
 
-    if (billingFilter.value !== "all" && plan.billingCycle !== billingFilter.value) {
-      return false;
-    }
+watchEffect(() => {
+  if (getSubscriptionPlansReq.value) {
+    items.value = (getSubscriptionPlansReq.value.items ?? []).map(
+      normalizePlan
+    );
+    pages.value = getSubscriptionPlansReq.value.pages;
+    pageRange.value = getSubscriptionPlansReq.value.pageRange;
+  }
+});
 
-    return true;
-  })
-);
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+watch(search, () => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    page.value = 1;
+    getSubscriptionPlans();
+  }, 400);
+});
 
-watch([search, categoryFilter, billingFilter, activeTab], () => {
+watch([categoryFilter, billingFilter, activeTab], () => {
   page.value = 1;
+  getSubscriptionPlans();
 });
 
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
 function formatBillingCycle(cycle?: string) {
   if (!cycle) return "—";
   if (cycle === "annually" || cycle === "yearly") return "Yearly";
@@ -306,6 +341,7 @@ function refresh() {
   search.value = "";
   categoryFilter.value = "all";
   billingFilter.value = "all";
+  getSubscriptionPlans();
 }
 
 function openCreateModal() {
@@ -323,43 +359,71 @@ function closeModal() {
   editingPlan.value = null;
 }
 
-function handleSubmit(payload: PlanFormState) {
-  const applicationIds =
-    payload.planType === "custom_apps"
-      ? payload.customApps
-      : payload.bundleApps;
+function buildApplications(payload: PlanFormState) {
+  if (payload.planType === "custom_apps") {
+    return payload.customApps.map((applicationId) => ({
+      applicationId,
+      price: payload.customAppPrices[applicationId] ?? 0,
+    }));
+  }
+
+  return payload.bundleApps.map((applicationId) => ({ applicationId }));
+}
+
+async function handleSubmit(payload: PlanFormState) {
+  const applications = buildApplications(payload);
 
   const price =
     payload.planType === "custom_apps"
-      ? null
+      ? payload.customApps.reduce(
+          (total, value) => total + (payload.customAppPrices[value] ?? 0),
+          0
+        )
       : payload.planType === "paid_bundle"
       ? payload.bundlePrice
       : null;
 
-  if (editingPlan.value) {
-    Object.assign(editingPlan.value, {
-      name: payload.name,
-      description: payload.description,
-      maxSeats: payload.maxSeats,
-      planType: payload.planType,
-      billingCycle: payload.billingCycle,
-      price,
-      applicationIds,
-    });
-  } else {
-    plans.push({
-      id: crypto.randomUUID(),
-      name: payload.name,
-      description: payload.description,
-      maxSeats: payload.maxSeats,
-      planType: payload.planType,
-      billingCycle: payload.billingCycle,
-      price,
-      applicationIds,
-      status: "active",
-    });
+  const body = {
+    name: payload.name,
+    description: payload.description,
+    maxSeats: payload.maxSeats,
+    planType: payload.planType,
+    billingCycle: payload.billingCycle,
+    price,
+    applications,
+  };
+
+  try {
+    if (editingPlan.value) {
+      await _updateById(editingPlan.value.id, body);
+      showMessage("Subscription plan updated successfully!", "success");
+    } else {
+      await _add(body);
+      showMessage("Subscription plan created successfully!", "success");
+    }
+
+    await getSubscriptionPlans();
+    closeModal();
+  } catch (error: any) {
+    showMessage(
+      error?.response?._data?.message || "Failed to save subscription plan.",
+      "error"
+    );
   }
+}
 
-  closeModal();
+async function togglePlanStatus(plan: SubscriptionPlan) {
+  const nextStatus = plan.status === "active" ? "deactive" : "active";
+
+  try {
+    await _updateStatusById(plan.id, nextStatus);
+    await getSubscriptionPlans();
+    showMessage("Subscription plan status updated successfully!", "success");
+  } catch (error: any) {
+    showMessage(
+      error?.response?._data?.message || "Failed to update plan status.",
+      "error"
+    );
+  }
 }
 </script>