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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 3.2.0
+
+### Minor Changes
+
+- 5754751: 08072026 Version Release
+
 ## 3.1.3
 
 ### Patch Changes

package/components/CreateSubsciptionPlan.vue

@@ -0,0 +1,376 @@
+<template>
+  <v-card class="pa-2">
+    <!-- Header -->
+    <v-card-title class="d-flex align-center justify-space-between pb-2">
+      <span class="text-h6 font-weight-bold">
+        {{ isEditing ? "Edit Plan" : "Create New Plan" }}
+      </span>
+
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        density="comfortable"
+        aria-label="Close"
+        @click="$emit('cancel')"
+      />
+    </v-card-title>
+
+    <v-divider />
+
+    <!-- Form Content -->
+    <v-form ref="formRef" class="my-4" @submit.prevent="submit">
+      <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
+        <!-- Plan Details Section -->
+        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
+          Plan Details
+        </div>
+
+        <!-- Plan Name -->
+        <v-text-field
+          v-model="form.name"
+          label="Plan Name"
+          placeholder="e.g., Business"
+          variant="outlined"
+          density="compact"
+          :error-messages="errors.name"
+          class="mb-3"
+          required
+        >
+          <template #label>
+            Plan Name <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <!-- Description -->
+        <v-textarea
+          v-model="form.description"
+          label="Description (optional)"
+          placeholder="Enter description"
+          variant="outlined"
+          density="compact"
+          rows="2"
+          auto-grow
+          class="mb-3"
+        />
+
+        <!-- Max Seats -->
+        <v-text-field
+          v-model.number="form.maxSeats"
+          type="number"
+          min="0"
+          variant="outlined"
+          density="compact"
+          class="mb-4"
+          required
+        >
+          <template #label>
+            Max seats <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <v-divider class="my-4" />
+
+        <!-- Pricing Section -->
+        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
+          Pricing
+        </div>
+
+        <!-- Plan Type -->
+        <v-select
+          v-model="form.planType"
+          :items="planTypeOptions"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Subscription plan type <span class="text-error">*</span>
+          </template>
+        </v-select>
+
+        <!-- Billing Cycle -->
+        <v-select
+          v-if="form.planType !== 'free_bundle'"
+          v-model="form.billingCycle"
+          :items="billingCycleOptions"
+          placeholder="Select billing cycle"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Billing cycle <span class="text-error">*</span>
+          </template>
+        </v-select>
+
+        <!-- Bundle Applications (Chip Toggle) -->
+        <div v-if="form.planType !== 'custom_apps'" class="mb-4">
+          <div class="text-caption font-weight-medium text-grey-darken-2 mb-2">
+            Included Applications
+          </div>
+
+          <v-chip-group
+            v-model="form.bundleApps"
+            column
+            multiple
+            selected-class="bg-grey-darken-3 text-white"
+          >
+            <v-chip
+              v-for="app in AVAILABLE_APPLICATIONS"
+              :key="app.id"
+              :value="app.id"
+              filter
+              variant="outlined"
+              size="small"
+            >
+              {{ app.name }}
+            </v-chip>
+          </v-chip-group>
+        </div>
+
+        <!-- Bundle Price -->
+        <v-text-field
+          v-if="form.planType === 'paid_bundle'"
+          v-model.number="form.bundlePrice"
+          type="number"
+          min="0"
+          placeholder="0"
+          prefix="$"
+          :suffix="form.billingCycle === 'annually' ? '/yr' : '/mo'"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Price <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <!-- Custom Applications (List Checkbox) -->
+        <div v-if="form.planType === 'custom_apps'" class="mb-4">
+          <div class="text-caption font-weight-medium text-grey-darken-2 mb-1">
+            Included Applications <span class="text-error">*</span>
+          </div>
+
+          <v-card variant="outlined" class="pa-1 mb-3">
+            <v-list density="compact" class="py-0">
+              <v-list-item
+                v-for="app in AVAILABLE_APPLICATIONS"
+                :key="app.id"
+                class="px-2"
+              >
+                <template #prepend>
+                  <v-checkbox-btn
+                    :model-value="form.customApps.includes(app.id)"
+                    density="compact"
+                    @update:model-value="toggleApp(form.customApps, app.id)"
+                  />
+                </template>
+
+                <v-list-item-title class="text-body-2">
+                  {{ app.name }}
+                </v-list-item-title>
+
+                <template #append>
+                  <span class="text-caption text-grey">
+                    ${{ form.billingCycle === 'annually' ? app.yearlyPrice : app.monthlyPrice }}/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}
+                  </span>
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-card>
+
+          <!-- Custom Total Price Display -->
+          <v-sheet
+            color="grey-lighten-4"
+            rounded
+            class="pa-3 d-flex align-center justify-space-between mb-1"
+          >
+            <span class="text-caption text-grey-darken-2">
+              Total price {{ form.billingCycle === 'annually' ? '/ year' : '/ month' }}
+            </span>
+            <span class="text-subtitle-1 font-weight-bold">
+              ${{ customTotalPrice.toLocaleString() }}
+            </span>
+          </v-sheet>
+
+          <p class="text-caption text-grey">
+            Calculated automatically from the selected applications.
+          </p>
+        </div>
+
+        <!-- Global Pricing Error Message -->
+        <v-alert
+          v-if="errors.pricing"
+          type="error"
+          variant="tonal"
+          density="compact"
+          class="mt-2 text-caption"
+        >
+          {{ errors.pricing }}
+        </v-alert>
+      </v-card-text>
+
+      <v-divider />
+
+      <!-- Footer Buttons -->
+      <v-card-actions class="pt-3 px-2">
+        <v-btn
+          variant="outlined"
+          color="grey-darken-1"
+          class="flex-1 text-none"
+          @click="$emit('cancel')"
+        >
+          Cancel
+        </v-btn>
+
+        <v-btn
+          type="submit"
+          color="grey-darken-4"
+          variant="flat"
+          class="flex-1 text-none"
+        >
+          {{ isEditing ? "Save Changes" : "Create Plan" }}
+        </v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch } from "vue";
+
+import {
+  AVAILABLE_APPLICATIONS,
+  type PlanFormState,
+  type SubscriptionPlan,
+} from "../types/subscription";
+
+const props = defineProps<{
+  initialPlan?: SubscriptionPlan | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "submit", payload: PlanFormState): void;
+}>();
+
+// Select options
+const planTypeOptions = [
+  { title: "Free (Bundle)", value: "free_bundle" },
+  { title: "Paid (Bundle)", value: "paid_bundle" },
+  { title: "Paid (Custom Apps)", value: "custom_apps" },
+];
+
+const billingCycleOptions = [
+  { title: "Monthly", value: "monthly" },
+  { title: "Annually", value: "annually" },
+];
+
+const isEditing = computed(() => !!props.initialPlan);
+
+const form = reactive<PlanFormState>({
+  name: props.initialPlan?.name ?? "",
+  description: props.initialPlan?.description ?? "",
+  maxSeats: props.initialPlan?.maxSeats ?? 0,
+  planType: props.initialPlan?.planType ?? "free_bundle",
+  billingCycle: props.initialPlan?.billingCycle ?? null,
+  bundleApps:
+    props.initialPlan?.planType !== "custom_apps"
+      ? [...(props.initialPlan?.applicationIds ?? [])]
+      : [],
+  bundlePrice: props.initialPlan?.price ?? null,
+  customApps:
+    props.initialPlan?.planType === "custom_apps"
+      ? [...(props.initialPlan?.applicationIds ?? [])]
+      : [],
+});
+
+const errors = reactive({
+  name: "",
+  pricing: "",
+});
+
+/*
+ * Reset pricing fields when plan type changes
+ */
+watch(
+  () => form.planType,
+  (type) => {
+    if (type === "free_bundle") {
+      form.billingCycle = null;
+      form.bundlePrice = null;
+    }
+  }
+);
+
+/*
+ * Toggle application selection helper
+ */
+function toggleApp(list: string[], id: string) {
+  const index = list.indexOf(id);
+  if (index === -1) {
+    list.push(id);
+  } else {
+    list.splice(index, 1);
+  }
+}
+
+/*
+ * Custom app total price calculation
+ */
+const customTotalPrice = computed(() => {
+  return form.customApps.reduce((total, id) => {
+    const app = AVAILABLE_APPLICATIONS.find((item) => item.id === id);
+    if (!app) return total;
+
+    return (
+      total +
+      (form.billingCycle === "annually" ? app.yearlyPrice : app.monthlyPrice)
+    );
+  }, 0);
+});
+
+/*
+ * Validate Form
+ */
+function validate(): boolean {
+  errors.name = form.name.trim() ? "" : "Plan name is required.";
+  errors.pricing = "";
+
+  if (form.planType !== "free_bundle" && !form.billingCycle) {
+    errors.pricing = "Please select a billing cycle.";
+  } else if (
+    form.planType === "paid_bundle" &&
+    (!form.bundlePrice || form.bundlePrice <= 0)
+  ) {
+    errors.pricing = "Please enter a price.";
+  } else if (
+    form.planType === "custom_apps" &&
+    form.customApps.length === 0
+  ) {
+    errors.pricing = "Select at least one application.";
+  }
+
+  return !errors.name && !errors.pricing;
+}
+
+/*
+ * Submit Form
+ */
+function submit() {
+  if (!validate()) {
+    return;
+  }
+
+  emit("submit", {
+    ...form,
+  });
+}
+</script>
+
+<style scoped>
+.max-h-70vh {
+  max-height: 70vh;
+}
+</style>

package/components/DashboardMain.vue

@@ -1551,12 +1551,13 @@ const moduleWidgetPermissions: Record<string, string[]> = {
   openWorkOrder: ["work_orders:see-all-work-orders"],
   workOrders: ["work_orders:see-all-work-orders"],
   activity: ["work_orders:see-all-work-orders"],
-  recentActivity: [
-    "work_orders:see-all-work-orders",
-    "work_order:see-all-work-orders",
-    "work-order:see-all-work-orders",
-    "work-orders:see-all-work-orders",
-    "work_orders:see-all-work-orders",
+  taskSchedule: [
+    "cleaning-schedule-mgmt:see-all-schedules",
+    "schedule-task-mgmt:see-all-schedule-tasks",
+  ],
+  taskCompleted: [
+    "cleaning-schedule-mgmt:see-all-schedules",
+    "schedule-task-mgmt:see-all-schedule-tasks",
   ],
   staffStatus: ["attendance-mgmt:see-all-attendance"],
   attendance: ["attendance-mgmt:see-all-attendance"],