@7365admin1/layer-common 3.1.4-staging.58 → 3.2.1-staging.59

package/components/OnlineFormFill.vue

@@ -247,6 +247,40 @@
             {{ resolveText(block.text) }}
           </p>
 
+          <!-- ORDERED LIST -->
+          <div v-else-if="block.type === 'ordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ol style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: #333"
+              >{{ item }}</li>
+            </ol>
+          </div>
+
+          <!-- UNORDERED LIST -->
+          <div v-else-if="block.type === 'unordered-list'" class="mb-3">
+            <div
+              v-if="block.title"
+              class="text-body-2 font-weight-bold mb-1"
+              style="text-decoration: underline; text-underline-offset: 3px"
+            >{{ block.title }}</div>
+            <ul style="padding-left: 22px; margin: 0">
+              <li
+                v-for="(item, itemIdx) in block.items"
+                :key="itemIdx"
+                class="text-body-2 mb-1"
+                style="line-height: 1.55; color: #333"
+              >{{ item }}</li>
+            </ul>
+          </div>
+
           <!-- DIVIDER -->
           <v-divider v-else-if="block.type === 'divider'" class="my-4" />
 
@@ -433,6 +467,7 @@ const props = defineProps({
   approvalMode: { type: Boolean, default: false },
   initialManagementValues: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
   formType: { type: String, default: "" },
+  paymentAmount: { type: Number, default: 0 },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -596,15 +631,8 @@ const submissionStatusColor = computed(() => {
   }
 });
 
-const PAYMENT_REQUIRED_FORM_TYPES = new Set([
-  "Application for Electronic Access Card",
-  "Application for Booking of BBQ Pit",
-  "Application for Moving In/Out & Delivery",
-  "Application for Main Entrance RFID Transponder",
-]);
-
 const requiresPayment = computed(() => {
-  if (!PAYMENT_REQUIRED_FORM_TYPES.has(props.formType)) return false;
+  if (props.paymentAmount <= 0) return false;
   if (props.formType === "Application for Main Entrance RFID Transponder") {
     return !!(props.initialValues.reasonLost || props.initialValues.reasonDamaged);
   }

package/components/OnlineFormsConfiguration.vue

@@ -88,7 +88,7 @@
     >
 
     <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="450" persistent>
+    <v-dialog v-model="createDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="add"
         @cancel="createDialog = false"
@@ -97,7 +97,7 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="450" persistent>
+    <v-dialog v-model="editDialog" width="720" persistent>
       <OnlineFormConfigurationForm
         mode="edit"
         @cancel="editDialog = false"
@@ -113,6 +113,7 @@
         :definition="selectedFormDefinition"
         :site-id="siteId"
         :org-id="orgId"
+        :payment-amount="selectedPaymentAmount"
         readonly
         @cancel="previewDialog = false"
       >
@@ -336,6 +337,9 @@ const selectedFormDefinition = ref<any>(null);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
 const selectedOnlineFormId = ref<string | null>(null);
+const selectedPaymentAmount = computed(() =>
+  Number(selectedOnlineForm.value?.fields?.paymentAmount ?? 0)
+);
 
 function parseFieldsToInputs(fields: Record<string, string>): any[] {
   return Object.keys(fields)

package/components/PlanActionsMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-menu location="bottom end">
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+        icon="mdi-dots-vertical"
+        variant="text"
+        density="comfortable"
+      />
+    </template>
+
+    <v-list density="compact">
+      <v-list-item
+        prepend-icon="mdi-pencil-outline"
+        title="Edit plan"
+        @click="$emit('edit')"
+      />
+
+      <v-list-item
+        prepend-icon="mdi-close-circle-outline"
+        title="Deactivate"
+        @click="$emit('deactivate')"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  edit: []
+  deactivate: []
+}>()
+</script>

package/components/PlanStatusBadge.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-chip
+    :color="isActive ? 'success' : 'grey'"
+    size="small"
+    variant="tonal"
+    class="font-weight-medium"
+  >
+    {{ isActive ? 'Active' : 'Deactive' }}
+  </v-chip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: string | boolean
+}>()
+
+const isActive = computed(() => {
+  if (typeof props.status === 'boolean') {
+    return props.status
+  }
+
+  return props.status.toLowerCase() === 'active'
+})
+</script>

package/components/SubscriptionPlanTable.vue

@@ -0,0 +1,362 @@
+<template>
+  <v-container fluid class="pa-6">
+    <!-- Header: Title & Create Button -->
+    <div class="d-flex align-center justify-space-between mb-6">
+      <h1 class="text-h5 font-weight-bold text-primary">
+        Subscription Plans
+      </h1>
+
+      <v-btn
+        color="secondary"
+        rounded="pill"
+        elevation="0"
+        @click="openCreateModal"
+      >
+        Create Plan
+      </v-btn>
+    </div>
+
+    <!-- Search & Filters Bar -->
+    <v-row class="mb-2" density="compact">
+      <!-- Search Input -->
+      <v-col cols="12" sm="4" md="3">
+        <v-text-field
+          v-model="search"
+          placeholder="Search Plan"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          density="compact"
+          hide-details
+          clearable
+        />
+      </v-col>
+
+      <!-- Filter by Category -->
+      <v-col cols="12" sm="4" md="3">
+        <v-select
+          v-model="categoryFilter"
+          :items="categoryOptions"
+          label="Filter by category"
+          variant="outlined"
+          density="compact"
+          hide-details
+        />
+      </v-col>
+
+      <!-- Filter by Billing Cycle -->
+      <v-col cols="12" sm="4" md="3">
+        <v-select
+          v-model="billingFilter"
+          :items="billingOptions"
+          label="Filter by billing cycle"
+          variant="outlined"
+          density="compact"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <!-- Main Table Card -->
+    <v-card variant="outlined" class="mt-4">
+      <!-- Status Tabs & Actions Bar -->
+      <div class="d-flex align-center justify-space-between bg-grey-lighten-4 border-b">
+        <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-tabs>
+
+        <div class="pa-2">
+          <v-btn
+            icon="mdi-refresh"
+            variant="text"
+            density="comfortable"
+            title="Refresh"
+            @click="refresh"
+          />
+        </div>
+      </div>
+
+      <!-- Table View -->
+      <v-data-table
+        :headers="headers"
+        :items="filteredPlans"
+        :page="page"
+        :items-per-page="pageSize"
+        class="elevation-0"
+      >
+        <!-- Plan Name -->
+        <template #item.name="{ item }">
+          <span class="font-weight-bold text-primary">{{ item.name }}</span>
+        </template>
+
+        <!-- Plan Type -->
+        <template #item.planType="{ item }">
+          {{ item.planType === 'free_bundle' ? 'Free' : 'Paid' }}
+        </template>
+
+        <!-- Billing Cycle -->
+        <template #item.billingCycle="{ item }">
+          {{ formatBillingCycle(item.billingCycle) }}
+        </template>
+
+        <!-- Price -->
+        <template #item.price="{ item }">
+          <span class="font-weight-semibold text-primary">
+            {{ formatPrice(item) }}
+          </span>
+        </template>
+
+        <!-- Applications Badge -->
+        <template #item.applicationIds="{ item }">
+          <v-chip size="small" variant="tonal" color="grey-darken-2">
+            {{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
+          </v-chip>
+        </template>
+
+        <!-- Status Badge -->
+        <template #item.status="{ item }">
+          <v-chip
+            size="small"
+            :color="item.status === 'active' ? 'success' : 'grey'"
+            variant="flat"
+            class="text-caption font-weight-bold"
+          >
+            {{ item.status === 'active' ? 'Active' : 'Deactive' }}
+          </v-chip>
+        </template>
+
+        <!-- Actions -->
+        <template #item.actions="{ item }">
+          <v-menu location="bottom end" transition="scale-transition">
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon="mdi-dots-horizontal"
+                variant="text"
+                density="comfortable"
+                color="grey-darken-1"
+              />
+            </template>
+
+            <v-card min-width="160" class="py-1" elevation="3" rounded="lg">
+              <v-list density="compact" class="py-0">
+                <!-- Edit Plan -->
+                <v-list-item
+                  prepend-icon="mdi-square-edit-outline"
+                  title="Edit plan"
+                  value="edit"
+                  class="text-body-2"
+                  @click="openEditModal(item)"
+                />
+
+                <v-divider class="my-1" />
+
+                <!-- Toggle Status (Deactivate / Activate) -->
+                <v-list-item
+                  :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'"
+                  value="toggle-status"
+                  class="text-body-2"
+                  @click="togglePlanStatus(item)"
+                />
+              </v-list>
+            </v-card>
+          </v-menu>
+        </template>
+
+        <!-- Empty State -->
+        <template #no-data>
+          <div class="py-8 text-center text-grey-darken-1">
+            No plans found.
+          </div>
+        </template>
+      </v-data-table>
+    </v-card>
+
+    <!-- Create / Edit Dialog -->
+    <v-dialog v-model="showModal" max-width="600px" persistent>
+      <v-card class="pa-4">
+        <CreateSubscriptionPlan
+          :initial-plan="editingPlan"
+          @cancel="closeModal"
+          @submit="handleSubmit"
+        />
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from "vue";
+import CreateSubscriptionPlan from "./CreateSubsciptionPlan.vue";
+
+import type {
+  SubscriptionPlan,
+  PlanFormState,
+  BillingCycle,
+} from "../types/subscription";
+
+// Datatable Headers
+const headers = [
+  { title: "Plan Name", key: "name", align: "start" as const },
+  { title: "Plan Type", key: "planType", align: "start" as const },
+  { title: "Billing Cycle", key: "billingCycle", align: "start" as const },
+  { 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 },
+];
+
+// Select Options
+const categoryOptions = [
+  { title: "All", value: "all" },
+  { title: "Free (Bundle)", value: "free_bundle" },
+  { title: "Paid (Bundle)", value: "paid_bundle" },
+  { title: "Paid (Custom Apps)", value: "custom_apps" },
+];
+
+const billingOptions = [
+  { title: "All", value: "all" },
+  { title: "Monthly", value: "monthly" },
+  { 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 search = ref("");
+const categoryFilter = ref("all");
+const billingFilter = ref<"all" | BillingCycle>("all");
+const activeTab = ref<"active" | "deactive">("active");
+
+const page = ref(1);
+const pageSize = 20;
+
+const showModal = ref(false);
+const editingPlan = ref<SubscriptionPlan | null>(null);
+
+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;
+    }
+
+    if (categoryFilter.value !== "all" && plan.planType !== categoryFilter.value) {
+      return false;
+    }
+
+    if (billingFilter.value !== "all" && plan.billingCycle !== billingFilter.value) {
+      return false;
+    }
+
+    return true;
+  })
+);
+
+watch([search, categoryFilter, billingFilter, activeTab], () => {
+  page.value = 1;
+});
+
+function formatBillingCycle(cycle?: string) {
+  if (!cycle) return "—";
+  if (cycle === "annually" || cycle === "yearly") return "Yearly";
+  if (cycle === "monthly") return "Monthly";
+  return cycle;
+}
+
+function formatPrice(plan: SubscriptionPlan) {
+  if (plan.planType === "free_bundle") return "Free";
+  if (plan.price == null) return "—";
+  return `$${plan.price}/${plan.billingCycle === "annually" ? "yr" : "mo"}`;
+}
+
+function refresh() {
+  page.value = 1;
+  search.value = "";
+  categoryFilter.value = "all";
+  billingFilter.value = "all";
+}
+
+function openCreateModal() {
+  editingPlan.value = null;
+  showModal.value = true;
+}
+
+function openEditModal(plan: SubscriptionPlan) {
+  editingPlan.value = plan;
+  showModal.value = true;
+}
+
+function closeModal() {
+  showModal.value = false;
+  editingPlan.value = null;
+}
+
+function handleSubmit(payload: PlanFormState) {
+  const applicationIds =
+    payload.planType === "custom_apps"
+      ? payload.customApps
+      : payload.bundleApps;
+
+  const price =
+    payload.planType === "custom_apps"
+      ? null
+      : 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",
+    });
+  }
+
+  closeModal();
+}
+</script>

package/composables/useOnlineFormPages.ts

@@ -20,6 +20,8 @@ export type FormBlock =
   | { type: "checkbox-group"; title?: string; single?: boolean; items: CheckboxItemDef[] }
   | { type: "paragraph"; text: string }
   | { type: "section-header"; text: string }
+  | { type: "ordered-list"; title?: string; items: string[] }
+  | { type: "unordered-list"; title?: string; items: string[] }
   | { type: "divider" }
   | { type: "signature-row"; label: string; key: string }
   | { type: "acknowledgement"; text: string }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.1.4-staging.58",
+  "version": "3.2.1-staging.59",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/subscription.ts

@@ -0,0 +1,51 @@
+export type PlanStatus = "active" | "deactive";
+
+export type PlanType = "free_bundle" | "paid_bundle" | "custom_apps";
+
+export type BillingCycle = "monthly" | "annually";
+
+export interface AppOption {
+  id: string;
+  name: string;
+  monthlyPrice: number;
+  yearlyPrice: number;
+}
+
+export interface SubscriptionPlan {
+  id: string;
+  name: string;
+  description?: string;
+  maxSeats: number;
+  planType: PlanType;
+  billingCycle: BillingCycle | null;
+  price: number | null;
+  applicationIds: string[];
+  status: PlanStatus;
+}
+
+export interface PlanFormState {
+  name: string;
+  description: string;
+  maxSeats: number;
+  planType: PlanType;
+  billingCycle: BillingCycle | null;
+  bundleApps: string[];
+  bundlePrice: number | null;
+  customApps: string[];
+}
+
+export const PLAN_TYPE_LABEL: Record<PlanType, string> = {
+  free_bundle: "Free (Bundle)",
+  paid_bundle: "Paid (Bundle)",
+  custom_apps: "Paid (Custom Apps)",
+};
+
+// Mock catalogue of applications that can be bundled into a plan.
+// Replace with data fetched from your backend.
+export const AVAILABLE_APPLICATIONS: AppOption[] = [
+  { id: "crm", name: "CRM", monthlyPrice: 49, yearlyPrice: 490 },
+  { id: "hrm", name: "HRM", monthlyPrice: 39, yearlyPrice: 390 },
+  { id: "accounting", name: "Accounting", monthlyPrice: 59, yearlyPrice: 590 },
+  { id: "inventory", name: "Inventory", monthlyPrice: 45, yearlyPrice: 450 },
+  { id: "pos", name: "POS", monthlyPrice: 69, yearlyPrice: 690 },
+];