@7365admin1/layer-common 3.1.4-staging.53 → 3.2.0

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>