appmax-client-vue3 5.0.4 → 5.0.5

package/dist/RecurringSubscription-CEP95Nmh.js

@@ -0,0 +1,639 @@
+import { ab as defineComponent, u as useI18n, r as ref, e as computed, o as onMounted, g as createElementBlock, h as openBlock, j as createBaseVNode, k as createCommentVNode, i as createVNode, w as withCtx, l as unref, aG as script, aB as script$1, aH as withKeys, aI as script$2, p as _, t as toDisplayString, $, F as Fragment, q as renderList, v as createBlock, aC as P, _ as _export_sfc, c as useRouter, d as useBreakpoint, A as watch, C as w, m as createTextVNode, y, b as useRoute, a5 as withDirectives, aD as vShow } from "./main-QKrpDJDW.js";
+import { k as ke } from "./index-DNhodE_h.js";
+import { u as useQueryFilter } from "./useQueryFilter-DhZiZmVF.js";
+import { r as recurringListService, u as useRecurringTable } from "./useRecurringTable-DeuW4Pa-.js";
+import { v as v4 } from "./v4-CQle4GE4.js";
+import { a as script$4, s as script$5, b as script$6 } from "./index-DLNELjCm.js";
+import { s as script$3 } from "./index-B5i3gkTU.js";
+import { C as ConfirmationModal } from "./ConfirmationModal-CIP6hL66.js";
+import { A as AmCardV3 } from "./AmCardV3-DZb0ysAj.js";
+const _hoisted_1$1 = { class: "d-flex gap-4" };
+const _hoisted_2$1 = { class: "flex items-center gap-1" };
+const _hoisted_3$1 = { class: "text-btn" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "d-flex gap-2 mt-2 flex-wrap"
+};
+const __default__$2 = { name: "StatusFilter" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  emits: ["update:filters"],
+  setup(__props, { emit: __emit }) {
+    const { t } = useI18n();
+    const statusOptions = ref([]);
+    const planOptions = ref([
+      { label: "Semanal", value: "semanal" },
+      { label: "Quinzenal", value: "quinzenal" },
+      { label: "Mensal", value: "mensal" },
+      { label: "Bimestral", value: "bimestral" },
+      { label: "Trimestral", value: "trimestral" },
+      { label: "Semestral", value: "semestral" },
+      { label: "Anual", value: "anual" }
+    ]);
+    const searchQuery = ref("");
+    const searchQueries = ref([]);
+    const showFilterDrawer = ref(false);
+    const filterValues = ref({});
+    const queryFilter = useQueryFilter({
+      fields: [
+        { name: "status", valueType: "string" },
+        { name: "query", valueType: "string" },
+        { name: "plano", valueType: "string" }
+      ],
+      onChange: (newFilter) => {
+        if (newFilter.status && typeof newFilter.status === "string") {
+          const statusIds = newFilter.status.split(",").map(Number);
+          filterValues.value.status = statusIds;
+        } else {
+          filterValues.value.status = [];
+        }
+        if (newFilter.query) {
+          const queries = newFilter.query.toString().split(",");
+          searchQueries.value = queries.map((q) => ({
+            id: crypto.randomUUID(),
+            text: q
+          }));
+        }
+        if (newFilter.plano && typeof newFilter.plano === "string") {
+          const planValues = newFilter.plano.split(",");
+          filterValues.value.plano = planValues;
+        } else {
+          filterValues.value.plano = [];
+        }
+      }
+    });
+    const fetchStatusOptions = async () => {
+      try {
+        const statuses = await recurringListService.getSubscriptionStatus();
+        statusOptions.value = statuses.map((status) => ({
+          label: status.name,
+          value: status.id
+        }));
+        const currentFilter = queryFilter.get();
+        if (currentFilter.status && typeof currentFilter.status === "string") {
+          const statusIds = currentFilter.status.split(",").map(Number);
+          filterValues.value.status = statusIds;
+        }
+      } catch (error) {
+        console.error("Error fetching subscription status:", error);
+      }
+    };
+    const executeSearch = () => {
+      if (!searchQuery.value.trim()) return;
+      searchQueries.value.push({
+        id: v4(),
+        text: searchQuery.value.trim()
+      });
+      searchQuery.value = "";
+      emitFilters();
+    };
+    const removeQuery = (queryId) => {
+      searchQueries.value = searchQueries.value.filter((q) => q.id !== queryId);
+      emitFilters();
+    };
+    const emitFilters = () => {
+      var _a, _b;
+      const queryText = searchQueries.value.map((q) => q.text).join(",");
+      const filter = {
+        query: queryText || void 0,
+        // Remove query se estiver vazio
+        status: ((_a = filterValues.value.status) == null ? void 0 : _a.length) ? filterValues.value.status.join(",") : void 0,
+        plano: ((_b = filterValues.value.plano) == null ? void 0 : _b.length) ? filterValues.value.plano.join(",") : void 0
+      };
+      queryFilter.set(filter);
+      emit("update:filters", {
+        query: queryText || void 0,
+        // Remove query se estiver vazio
+        status_id: filterValues.value.status || [],
+        seasonality: filterValues.value.plano || []
+      });
+    };
+    const handleFilterApply = (values) => {
+      filterValues.value = values;
+      emitFilters();
+    };
+    const selectedStatusNames = computed(() => {
+      var _a;
+      if (!((_a = filterValues.value.status) == null ? void 0 : _a.length)) return [];
+      return statusOptions.value.filter((opt) => filterValues.value.status.includes(opt.value)).map((opt) => opt.label);
+    });
+    const selectedPlanNames = computed(() => {
+      var _a;
+      if (!((_a = filterValues.value.plano) == null ? void 0 : _a.length)) return [];
+      return planOptions.value.filter((opt) => filterValues.value.plano.includes(opt.value)).map((opt) => opt.label);
+    });
+    const removeStatus = (statusName) => {
+      const statusToRemove = statusOptions.value.find((opt) => opt.label === statusName);
+      if (statusToRemove) {
+        filterValues.value.status = filterValues.value.status.filter(
+          (id) => id !== statusToRemove.value
+        );
+        emitFilters();
+      }
+    };
+    const removePlan = (planName) => {
+      const planToRemove = planOptions.value.find((opt) => opt.label === planName);
+      if (planToRemove) {
+        filterValues.value.plano = filterValues.value.plano.filter(
+          (value) => value !== planToRemove.value
+        );
+        emitFilters();
+      }
+    };
+    const filterFields = computed(() => [
+      {
+        label: t("subscription.list.filter.status"),
+        name: "status",
+        component: "multiselect",
+        options: statusOptions.value,
+        formatChipLabel: (field, value) => {
+          if (!value || !Array.isArray(value) || value.length === 0) return "";
+          const selectedOptions = statusOptions.value.filter((opt) => value.includes(opt.value));
+          return selectedOptions.map((opt) => opt.label).join(", ");
+        }
+      },
+      {
+        label: t("subscription.list.filter.plan"),
+        name: "plano",
+        component: "multiselect",
+        options: planOptions.value,
+        formatChipLabel: (field, value) => {
+          if (!value || !Array.isArray(value) || value.length === 0) return "";
+          const selectedOptions = planOptions.value.filter((opt) => value.includes(opt.value));
+          return selectedOptions.map((opt) => opt.label).join(", ");
+        }
+      }
+    ]);
+    const emit = __emit;
+    onMounted(() => {
+      var _a;
+      fetchStatusOptions();
+      const currentFilter = queryFilter.get();
+      if (currentFilter.query) {
+        const queries = currentFilter.query.toString().split(",");
+        searchQueries.value = queries.map((q) => ({
+          id: v4(),
+          text: q
+        }));
+      }
+      if (currentFilter.plano && typeof currentFilter.plano === "string") {
+        const planValues2 = currentFilter.plano.split(",");
+        filterValues.value.plano = planValues2;
+      }
+      const queryText = (_a = currentFilter.query) == null ? void 0 : _a.toString();
+      const planValues = currentFilter.plano && typeof currentFilter.plano === "string" ? currentFilter.plano.split(",") : [];
+      emit("update:filters", {
+        query: queryText || void 0,
+        // Remove query se estiver vazio
+        status_id: currentFilter.status && typeof currentFilter.status === "string" ? currentFilter.status.split(",").map(Number) : [],
+        seasonality: planValues
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", _hoisted_1$1, [
+          createVNode(unref(script$2), { class: "group-search" }, {
+            default: withCtx(() => [
+              createVNode(unref(script), null, {
+                default: withCtx(() => _cache[4] || (_cache[4] = [
+                  createBaseVNode("i", { class: "pi pi-search" }, null, -1)
+                ])),
+                _: 1
+              }),
+              createVNode(unref(script$1), {
+                modelValue: searchQuery.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+                placeholder: unref(t)("subscription.list.filter.searchPlaceholder"),
+                onKeydown: withKeys(executeSearch, ["enter"])
+              }, null, 8, ["modelValue", "placeholder"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref($), {
+            outlined: "",
+            severity: "secondary",
+            class: "w-full md:w-fit min-w-[140px]",
+            onClick: _cache[1] || (_cache[1] = ($event) => showFilterDrawer.value = true)
+          }, {
+            default: withCtx(() => [
+              createBaseVNode("div", _hoisted_2$1, [
+                createVNode(unref(_), { icon: "filter_list" }),
+                createBaseVNode("span", _hoisted_3$1, toDisplayString(unref(t)("subscription.list.filter.filterButton")), 1)
+              ])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(ke), {
+            modelValue: filterValues.value,
+            "onUpdate:modelValue": [
+              _cache[2] || (_cache[2] = ($event) => filterValues.value = $event),
+              handleFilterApply
+            ],
+            visible: showFilterDrawer.value,
+            "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => showFilterDrawer.value = $event),
+            title: unref(t)("subscription.list.filter.filterBy"),
+            fields: filterFields.value,
+            "button-clear-text": unref(t)("subscription.list.filter.clearFilter"),
+            "button-apply-text": unref(t)("subscription.list.filter.applyFilter")
+          }, null, 8, ["modelValue", "visible", "title", "fields", "button-clear-text", "button-apply-text"])
+        ]),
+        searchQueries.value.length > 0 || selectedStatusNames.value.length > 0 || selectedPlanNames.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(searchQueries.value, (query) => {
+            return openBlock(), createBlock(unref(P), {
+              key: query.id,
+              text: unref(t)("subscription.list.filter.searchChip", { query: query.text }),
+              type: "lightGray",
+              closable: "",
+              onClose: () => removeQuery(query.id)
+            }, null, 8, ["text", "onClose"]);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(selectedStatusNames.value, (statusName) => {
+            return openBlock(), createBlock(unref(P), {
+              key: statusName,
+              text: statusName,
+              type: "lightGray",
+              closable: "",
+              onClose: () => removeStatus(statusName)
+            }, null, 8, ["text", "onClose"]);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(selectedPlanNames.value, (planName) => {
+            return openBlock(), createBlock(unref(P), {
+              key: planName,
+              text: planName,
+              type: "lightGray",
+              closable: "",
+              onClose: () => removePlan(planName)
+            }, null, 8, ["text", "onClose"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+const StatusFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-42c3fae0"]]);
+const _hoisted_1 = { class: "mt-6" };
+const _hoisted_2 = {
+  key: 1,
+  class: "empty-container flex flex-col items-center justify-center mt-3"
+};
+const _hoisted_3 = { class: "empty-icon-container" };
+const _hoisted_4 = { key: 2 };
+const _hoisted_5 = { class: "flex flex-col" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { class: "flex flex-col gap-3 ml-1" };
+const _hoisted_8 = { class: "flex flex-col gap-1" };
+const _hoisted_9 = { class: "flex flex-col gap-1" };
+const _hoisted_10 = { class: "flex flex-col gap-1" };
+const _hoisted_11 = { class: "flex flex-col gap-1" };
+const _hoisted_12 = { class: "flex flex-col gap-1" };
+const _hoisted_13 = { class: "flex flex-col gap-1" };
+const _hoisted_14 = { class: "flex flex-col gap-1" };
+const _hoisted_15 = {
+  key: 0,
+  class: "mt-3 mb-5"
+};
+const _hoisted_16 = { class: "flex justify-end mt-4" };
+const __default__$1 = { name: "RecurringTable" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: {
+    filters: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["emptyState"],
+  setup(__props, { emit: __emit }) {
+    const router = useRouter();
+    const redirectToDetails = (isMobile = false, event) => {
+      let localId = null;
+      if (!isMobile) {
+        const { data } = event;
+        localId = data.id;
+      } else {
+        localId = event.id;
+      }
+      router.push({
+        name: "subscription.details",
+        params: {
+          id: localId
+        }
+      });
+    };
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const isMobileSize = useBreakpoint("mobile");
+    const showConfirmModal = ref(false);
+    const selectedSubscriptionId = ref(null);
+    const selectedCustomerName = ref("");
+    const cancelLoading = ref(false);
+    const seasonalityMap = {
+      "weekly": "Semanal",
+      "biweekly": "Quinzenal",
+      "monthly": "Mensal",
+      "bimonthly": "Bimestral",
+      "quarterly": "Trimestral",
+      "semiannual": "Semestral",
+      "annual": "Anual"
+    };
+    const getPeriodicity = (item) => {
+      var _a, _b;
+      if ((_a = item.meta_data) == null ? void 0 : _a.seasonality) {
+        return seasonalityMap[item.meta_data.seasonality] || item.meta_data.seasonality;
+      }
+      return ((_b = item.meta_data) == null ? void 0 : _b.product) || "";
+    };
+    const {
+      paginatedData,
+      loading,
+      currentPage,
+      rowsPerPage,
+      totalRecords,
+      showPaginator,
+      formatCurrency,
+      getStatusSeverity,
+      fetchSubscriptions,
+      isEmpty,
+      onPageChange,
+      cancelSubscription
+    } = useRecurringTable();
+    const showEmptyState = ref(false);
+    watch(isEmpty, (newIsEmpty) => {
+      showEmptyState.value = newIsEmpty;
+      emit("emptyState", showEmptyState.value);
+    }, { immediate: true });
+    watch(() => props.filters, (newFilters) => {
+      fetchSubscriptions(newFilters);
+    }, { deep: true });
+    const onConfirmCancel = async () => {
+      if (!selectedSubscriptionId.value) return;
+      try {
+        cancelLoading.value = true;
+        await cancelSubscription(selectedSubscriptionId.value, () => {
+          showConfirmModal.value = false;
+          selectedSubscriptionId.value = null;
+          selectedCustomerName.value = "";
+        });
+        await fetchSubscriptions(props.filters);
+      } catch (error) {
+        console.error("Error canceling subscription:", error);
+      } finally {
+        cancelLoading.value = false;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(ConfirmationModal, {
+          visible: showConfirmModal.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => showConfirmModal.value = $event),
+          loading: cancelLoading.value,
+          "customer-name": selectedCustomerName.value,
+          onConfirm: onConfirmCancel
+        }, null, 8, ["visible", "loading", "customer-name"]),
+        unref(loading) ? (openBlock(), createBlock(unref(w), { key: 0 })) : showEmptyState.value || unref(totalRecords) === 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createBaseVNode("span", _hoisted_3, [
+            createVNode(unref(_), {
+              class: "empty-icon",
+              variant: "material",
+              icon: "link_off",
+              size: "2xl"
+            })
+          ]),
+          createVNode(unref(y), {
+            variant: "title",
+            size: "medium",
+            "is-strong": "",
+            class: "text-center my-4"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("subscription.list.table.emptyMessage")), 1)
+            ]),
+            _: 1
+          })
+        ])) : (openBlock(), createElementBlock("div", _hoisted_4, [
+          unref(isMobileSize) ? (openBlock(), createBlock(unref(script$3), {
+            key: 0,
+            value: unref(paginatedData),
+            "data-key": "id"
+          }, {
+            list: withCtx((slotProps) => [
+              createBaseVNode("div", _hoisted_5, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(slotProps.items, (item, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: index,
+                    onClick: ($event) => redirectToDetails(true, item)
+                  }, [
+                    createBaseVNode("div", _hoisted_7, [
+                      createBaseVNode("div", _hoisted_8, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.id")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(item.id), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_9, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.customer")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(item.meta_data.customer_name), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_10, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.periodicity")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(getPeriodicity(item)), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_11, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.value")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(unref(formatCurrency)(item.meta_data.value)), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_12, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.origin")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(item.meta_data.origin), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_13, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.nextChargeAt")) + ":", 1),
+                            createTextVNode(" " + toDisplayString(item.next_charge_at), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      createBaseVNode("div", _hoisted_14, [
+                        createVNode(unref(y), null, {
+                          default: withCtx(() => [
+                            createBaseVNode("strong", null, toDisplayString(unref(t)("subscription.list.table.columns.status")) + ":", 1)
+                          ]),
+                          _: 1
+                        }),
+                        createVNode(unref(P), {
+                          closable: false,
+                          disabled: false,
+                          text: item.status,
+                          type: unref(getStatusSeverity)(item.status)
+                        }, null, 8, ["text", "type"])
+                      ])
+                    ]),
+                    !(index === unref(paginatedData).length - 1) ? (openBlock(), createElementBlock("hr", _hoisted_15)) : createCommentVNode("", true)
+                  ], 8, _hoisted_6);
+                }), 128))
+              ])
+            ]),
+            _: 1
+          }, 8, ["value"])) : (openBlock(), createBlock(unref(script$4), {
+            key: 1,
+            selectionMode: "single",
+            dataKey: "id",
+            metaKeySelection: false,
+            onRowSelect: _cache[1] || (_cache[1] = ($event) => redirectToDetails(false, $event)),
+            value: unref(paginatedData),
+            class: "w-full"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(script$5), {
+                field: "id",
+                header: unref(t)("subscription.list.table.columns.id")
+              }, {
+                body: withCtx((slotProps) => [
+                  createTextVNode(toDisplayString(slotProps.data.id), 1)
+                ]),
+                _: 1
+              }, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "meta_data.customer_name",
+                header: unref(t)("subscription.list.table.columns.customer")
+              }, null, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "meta_data.product",
+                header: unref(t)("subscription.list.table.columns.periodicity")
+              }, {
+                body: withCtx((slotProps) => [
+                  createTextVNode(toDisplayString(getPeriodicity(slotProps.data)), 1)
+                ]),
+                _: 1
+              }, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "meta_data.value",
+                header: unref(t)("subscription.list.table.columns.value")
+              }, {
+                body: withCtx((slotProps) => [
+                  createTextVNode(toDisplayString(unref(formatCurrency)(slotProps.data.meta_data.value)), 1)
+                ]),
+                _: 1
+              }, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "meta_data.origin",
+                header: unref(t)("subscription.list.table.columns.origin")
+              }, null, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "next_charge_at",
+                header: unref(t)("subscription.list.table.columns.nextChargeAt")
+              }, {
+                body: withCtx((slotProps) => [
+                  createTextVNode(toDisplayString(slotProps.data.next_charge_at), 1)
+                ]),
+                _: 1
+              }, 8, ["header"]),
+              createVNode(unref(script$5), {
+                field: "status",
+                header: unref(t)("subscription.list.table.columns.status")
+              }, {
+                body: withCtx((slotProps) => [
+                  createVNode(unref(P), {
+                    closable: false,
+                    disabled: false,
+                    text: slotProps.data.status,
+                    type: unref(getStatusSeverity)(slotProps.data.status)
+                  }, null, 8, ["text", "type"])
+                ]),
+                _: 1
+              }, 8, ["header"])
+            ]),
+            _: 1
+          }, 8, ["value"])),
+          createBaseVNode("div", _hoisted_16, [
+            createVNode(unref(script$6), {
+              disabled: unref(loading) || unref(showPaginator),
+              rows: unref(rowsPerPage),
+              first: unref(currentPage) * unref(rowsPerPage),
+              "total-records": unref(totalRecords),
+              "rows-per-page-options": [5, 10, 20, 50],
+              template: "PrevPageLink PageLinks NextPageLink RowsPerPageDropdown",
+              onPage: unref(onPageChange)
+            }, null, 8, ["disabled", "rows", "first", "total-records", "onPage"])
+          ])
+        ]))
+      ]);
+    };
+  }
+});
+const RecurringTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-69bdcc46"]]);
+const __default__ = { name: "RecurringSubscription" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  setup(__props) {
+    const route = useRoute();
+    const tableFilters = ref({});
+    const isEmptyLocal = ref(false);
+    const orderDirection = ref(void 0);
+    const handleFiltersUpdate = (filters) => {
+      tableFilters.value = {
+        ...filters,
+        order_direction: orderDirection.value
+      };
+    };
+    const handleEmptyState = (isEmpty) => {
+      isEmptyLocal.value = isEmpty;
+    };
+    onMounted(() => {
+      const queryParams = route.query;
+      if (queryParams.order_direction) {
+        orderDirection.value = queryParams.order_direction;
+        tableFilters.value = {
+          ...tableFilters.value,
+          order_direction: orderDirection.value
+        };
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(AmCardV3, { class: "recurring-subscription" }, {
+        default: withCtx(() => [
+          withDirectives(createBaseVNode("div", null, [
+            createVNode(StatusFilter, { "onUpdate:filters": handleFiltersUpdate })
+          ], 512), [
+            [vShow, !isEmptyLocal.value]
+          ]),
+          createVNode(RecurringTable, {
+            filters: tableFilters.value,
+            onEmptyState: handleEmptyState
+          }, null, 8, ["filters"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const RecurringSubscription = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dd4a0f35"]]);
+export {
+  RecurringSubscription as default
+};