@7365admin1/layer-common 3.2.6 → 3.2.8-staging.200

package/components/SubscriptionPlanTable.vue

@@ -1,87 +1,86 @@
 <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>
+    <!--
+      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>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          @click="openCreateModal"
+        >
+          Create Plan
+        </v-btn>
+      </template>
+    </PageHeader>
 
     <!-- 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
-        />
+        <AppField v-model="search" search placeholder="Search Plan" />
       </v-col>
 
       <!-- Filter by Category -->
       <v-col cols="12" sm="4" md="3">
-        <v-select
+        <AppSelect
           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
+        <AppSelect
           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">
+    <AppCard class="table-card mt-4">
+      <!--
+        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 :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">Deactivated</v-tab>
+          </v-tabs>
+        </template>
+
+        <template #right>
           <v-btn
             icon="mdi-refresh"
             variant="text"
             density="comfortable"
-            title="Refresh"
+            aria-label="Refresh"
             @click="refresh"
           />
-        </div>
-      </div>
+          <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 -->
@@ -91,7 +90,7 @@
 
         <!-- Plan Type -->
         <template #item.planType="{ item }">
-          {{ item.planType === 'free_bundle' ? 'Free' : 'Paid' }}
+          {{ item.planType === "free_bundle" ? "Free" : "Paid" }}
         </template>
 
         <!-- Billing Cycle -->
@@ -107,22 +106,22 @@
         </template>
 
         <!-- Applications Badge -->
+        <!-- A count, not a status word, so it takes the design's neutral tag
+             shape (no leading dot) rather than a colour it has not earned. -->
         <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>
+          <StatusChip tone="neutral" :dot="false">
+            {{ 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 "Deactivated" is unmapped, so it comes out
+             neutral - which is the grey it already was. -->
         <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>
+          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactivated'" />
         </template>
 
         <!-- Actions -->
@@ -153,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)"
@@ -166,13 +171,15 @@
         </template>
 
         <!-- Empty State -->
+        <!-- Same sentence, in the shared empty block the design draws it in. -->
         <template #no-data>
-          <div class="py-8 text-center text-grey-darken-1">
-            No plans found.
+          <div class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>No plans found.</span>
           </div>
         </template>
       </v-data-table>
-    </v-card>
+    </AppCard>
 
     <!-- Create / Edit Dialog -->
     <v-dialog v-model="showModal" max-width="600px" persistent>
@@ -184,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,
@@ -205,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
@@ -222,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");
@@ -253,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;
+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 (
-      search.value &&
-      !plan.name.toLowerCase().includes(search.value.toLowerCase())
-    ) {
-      return false;
-    }
+const loading = computed(() => getAllReqStatus.value === "pending");
 
-    if (categoryFilter.value !== "all" && plan.planType !== categoryFilter.value) {
-      return false;
-    }
-
-    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";
@@ -303,6 +341,7 @@ function refresh() {
   search.value = "";
   categoryFilter.value = "all";
   billingFilter.value = "all";
+  getSubscriptionPlans();
 }
 
 function openCreateModal() {
@@ -320,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>