appmax-client-vue3 5.0.3 → 5.0.4

package/dist/RecurringSubscriptionDashView-BU74Iu14.js

@@ -0,0 +1,2051 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { G as ApiService, e as computed, r as ref, ab as defineComponent, c as useRouter, u as useI18n, d as useBreakpoint, v as createBlock, h as openBlock, w as withCtx, j as createBaseVNode, i as createVNode, a5 as withDirectives, l as unref, y, m as createTextVNode, t as toDisplayString, aD as vShow, $, g as createElementBlock, F as Fragment, _ as _export_sfc, p as _, aE as script, k as createCommentVNode, A as watch, J as script$1, q as renderList, S as normalizeStyle, b as useRoute, aF as useSidebarStore, o as onMounted } from "./main-BxSNdVUz.js";
+import { C } from "./index-CDH6Q9OK.js";
+import { H } from "./AmHelper.vue_vue_type_script_setup_true_lang-D2zQmEN--77vmJWuR.js";
+import { A as AmSkeleton } from "./AmSkeleton-yk6Pzn4C.js";
+import { A as AmDoughnutChartAdapted } from "./AmDoughnutChartAdapted-tywewwFd.js";
+import { A as AmCardV3 } from "./AmCardV3-Bay9-BBN.js";
+import { h as he } from "./index-Bfu5BNbN.js";
+import { s as script$2 } from "./index-Ct51ZylZ.js";
+import { u as useRecurringTable } from "./useRecurringTable-C-HMx7Go.js";
+const SEASONALITY_API_MAP = {
+  weekly: "semanal",
+  biweekly: "quinzenal",
+  monthly: "mensal",
+  bimonthly: "bimestral",
+  quarterly: "trimestral",
+  semiannual: "semestral",
+  annual: "anual"
+};
+class SubscriptionMetricsService {
+  // 5 minutes
+  constructor(apiService) {
+    __publicField(this, "baseUrl", "/api/subscriptions/metrics");
+    __publicField(this, "cache", /* @__PURE__ */ new Map());
+    __publicField(this, "cacheTimeout", 5 * 60 * 1e3);
+    this.apiService = apiService;
+  }
+  getCacheKey(endpoint, params) {
+    if (!params) return endpoint;
+    const sortedParams = Object.keys(params).sort().reduce((acc, key) => {
+      acc[key] = params[key];
+      return acc;
+    }, {});
+    const normalizedParams = Object.entries(sortedParams).reduce((acc, [key, value]) => {
+      if (Array.isArray(value)) {
+        acc[key] = [...value].sort();
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+    return `${endpoint}:${JSON.stringify(normalizedParams)}`;
+  }
+  setCache(key, data) {
+    this.cache.set(key, {
+      data,
+      timestamp: Date.now()
+    });
+  }
+  getCache(key) {
+    const cached = this.cache.get(key);
+    if (!cached) {
+      return null;
+    }
+    const isExpired = Date.now() - cached.timestamp > this.cacheTimeout;
+    if (isExpired) {
+      this.cache.delete(key);
+      return null;
+    }
+    return cached.data;
+  }
+  clearCacheByPrefix(prefix) {
+    for (const key of this.cache.keys()) {
+      if (key.startsWith(prefix)) {
+        this.cache.delete(key);
+      }
+    }
+  }
+  clearAllCache() {
+    this.cache.clear();
+  }
+  async getActiveSubscriptions() {
+    const endpoint = `${this.baseUrl}/actives`;
+    const cacheKey = this.getCacheKey(endpoint);
+    const cached = this.getCache(cacheKey);
+    if (cached) return cached;
+    const response = await this.apiService.get(endpoint);
+    const { data } = response;
+    const result = data.data;
+    this.setCache(cacheKey, result);
+    return result;
+  }
+  async getOverdueSubscriptions() {
+    const endpoint = `${this.baseUrl}/recoveries`;
+    const cacheKey = this.getCacheKey(endpoint);
+    const cached = this.getCache(cacheKey);
+    if (cached) return cached;
+    const response = await this.apiService.get(endpoint);
+    const { data } = response;
+    const result = data.data;
+    this.setCache(cacheKey, result);
+    return result;
+  }
+  async getNewActiveSubscriptions() {
+    const endpoint = `${this.baseUrl}/new_actives`;
+    const cacheKey = this.getCacheKey(endpoint);
+    const cached = this.getCache(cacheKey);
+    if (cached) return cached;
+    const response = await this.apiService.get(endpoint);
+    const { data } = response;
+    const result = data.data;
+    this.setCache(cacheKey, result);
+    return result;
+  }
+  async getChurnMetrics() {
+    const endpoint = `${this.baseUrl}/churn`;
+    const cacheKey = this.getCacheKey(endpoint);
+    const cached = this.getCache(cacheKey);
+    if (cached) return cached;
+    const response = await this.apiService.get(endpoint);
+    const { data } = response;
+    const result = data.data;
+    this.setCache(cacheKey, result);
+    return result;
+  }
+  async getGraphicsMetrics(params) {
+    var _a;
+    const endpoint = `${this.baseUrl}/graphics`;
+    const apiParams = {
+      ...params,
+      seasonality: (_a = params.seasonality) == null ? void 0 : _a.map(
+        (type) => SEASONALITY_API_MAP[type]
+      )
+    };
+    const cacheKey = this.getCacheKey(endpoint, apiParams);
+    const cached = this.getCache(cacheKey);
+    if (cached) return cached;
+    const response = await this.apiService.get(endpoint, { params: apiParams });
+    const { data } = response;
+    const result = data.data;
+    this.setCache(cacheKey, result);
+    return result;
+  }
+  // Call this when a subscription is created, updated, or cancelled
+  invalidateMetricsCache() {
+    this.clearCacheByPrefix(this.baseUrl);
+  }
+}
+const subscriptionMetricsService = new SubscriptionMetricsService(ApiService);
+const DEFAULT_SEASONALITY = [
+  "weekly",
+  "biweekly",
+  "monthly",
+  "bimonthly",
+  "quarterly",
+  "semiannual",
+  "annual"
+];
+const sharedState = {
+  data: ref({
+    actives: null,
+    overdues: null,
+    newActives: null,
+    churn: null,
+    graphics: null
+  }),
+  loading: ref({
+    actives: false,
+    overdues: false,
+    newActives: false,
+    churn: false,
+    graphics: false
+  }),
+  error: ref(null),
+  dateRange: ref({
+    start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3),
+    // Últimos 30 dias
+    end: /* @__PURE__ */ new Date()
+  }),
+  selectedSeasonality: ref([...DEFAULT_SEASONALITY])
+};
+const isLoaded = computed(() => {
+  return sharedState.data.value.actives !== null && sharedState.data.value.overdues !== null && sharedState.data.value.newActives !== null && sharedState.data.value.churn !== null;
+});
+const hasError = computed(() => sharedState.error.value !== null);
+const formatDate = (date) => {
+  return date.toISOString().split("T")[0];
+};
+const graphicsParams = computed(() => ({
+  date_start: formatDate(sharedState.dateRange.value.start),
+  date_end: formatDate(sharedState.dateRange.value.end),
+  seasonality: sharedState.selectedSeasonality.value
+}));
+const setDateRange = (range) => {
+  sharedState.dateRange.value = range;
+};
+const setSeasonality = (types) => {
+  sharedState.selectedSeasonality.value = types;
+};
+const initialize = async () => {
+  if (isLoaded.value) {
+    return;
+  }
+  Object.keys(sharedState.loading.value).forEach((key) => {
+    if (key !== "graphics") {
+      sharedState.loading.value[key] = true;
+    }
+  });
+  sharedState.error.value = null;
+  try {
+    sharedState.loading.value.actives = true;
+    sharedState.loading.value.overdues = true;
+    sharedState.loading.value.newActives = true;
+    sharedState.loading.value.churn = true;
+    const promises = [
+      // Métricas ativas
+      subscriptionMetricsService.getActiveSubscriptions().then((data) => {
+        sharedState.data.value.actives = data;
+      }).catch((err) => {
+        console.error("Erro ao carregar métricas ativas:", err);
+        throw err;
+      }).finally(() => {
+        sharedState.loading.value.actives = false;
+      }),
+      // Métricas de recuperação
+      subscriptionMetricsService.getOverdueSubscriptions().then((data) => {
+        sharedState.data.value.overdues = data;
+      }).catch((err) => {
+        console.error("Erro ao carregar métricas de recuperação:", err);
+        throw err;
+      }).finally(() => {
+        sharedState.loading.value.overdues = false;
+      }),
+      // Métricas de novas ativas
+      subscriptionMetricsService.getNewActiveSubscriptions().then((data) => {
+        sharedState.data.value.newActives = data;
+      }).catch((err) => {
+        console.error("Erro ao carregar métricas de novas ativas:", err);
+        throw err;
+      }).finally(() => {
+        sharedState.loading.value.newActives = false;
+      }),
+      // Métricas de churn
+      subscriptionMetricsService.getChurnMetrics().then((data) => {
+        sharedState.data.value.churn = data;
+      }).catch((err) => {
+        console.error("Erro ao carregar métricas de churn:", err);
+        throw err;
+      }).finally(() => {
+        sharedState.loading.value.churn = false;
+      })
+    ];
+    await Promise.all(promises);
+  } catch (err) {
+    sharedState.error.value = {
+      message: err instanceof Error ? err.message : "Erro desconhecido ao carregar dados",
+      details: err
+    };
+    console.error("Erro ao carregar dados das métricas:", err);
+  }
+};
+const loadGraphics = async () => {
+  sharedState.loading.value.graphics = true;
+  try {
+    const graphicsData = await subscriptionMetricsService.getGraphicsMetrics(graphicsParams.value);
+    sharedState.data.value.graphics = graphicsData;
+  } catch (err) {
+    sharedState.error.value = {
+      message: err instanceof Error ? err.message : "Erro ao carregar dados dos gráficos",
+      details: err
+    };
+    console.error("Erro ao carregar dados dos gráficos:", err);
+    throw err;
+  } finally {
+    sharedState.loading.value.graphics = false;
+  }
+};
+const clearData = () => {
+  sharedState.data.value = {
+    actives: null,
+    overdues: null,
+    newActives: null,
+    churn: null,
+    graphics: null
+  };
+  sharedState.error.value = null;
+  sharedState.loading.value = {
+    actives: false,
+    overdues: false,
+    newActives: false,
+    churn: false,
+    graphics: false
+  };
+};
+const invalidateCache = () => {
+  subscriptionMetricsService.invalidateMetricsCache();
+};
+function useMetricsData() {
+  const loadingActives = computed(() => sharedState.loading.value.actives);
+  const loadingOverdues = computed(() => sharedState.loading.value.overdues);
+  const loadingNewActives = computed(() => sharedState.loading.value.newActives);
+  const loadingChurn = computed(() => sharedState.loading.value.churn);
+  const loadingGraphics = computed(() => sharedState.loading.value.graphics);
+  const isAnyLoading = computed(
+    () => Object.values(sharedState.loading.value).some((loading) => loading)
+  );
+  return {
+    // Dados
+    data: computed(() => sharedState.data.value),
+    error: computed(() => sharedState.error.value),
+    isLoaded,
+    hasError,
+    // Loadings específicos
+    loadingActives,
+    loadingOverdues,
+    loadingNewActives,
+    loadingChurn,
+    loadingGraphics,
+    isAnyLoading,
+    // Controles de gráficos
+    dateRange: computed(() => sharedState.dateRange.value),
+    selectedSeasonality: computed(() => sharedState.selectedSeasonality.value),
+    setDateRange,
+    setSeasonality,
+    // Ações
+    initialize,
+    loadGraphics,
+    clearData,
+    invalidateCache
+  };
+}
+const _hoisted_1$8 = { class: "card-header" };
+const _hoisted_2$8 = { class: "card-content" };
+const _hoisted_3$8 = { class: "content-data" };
+const _hoisted_4$7 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "TotalRevenueCard",
+  setup(__props) {
+    const router = useRouter();
+    const { data, loadingActives } = useMetricsData();
+    const { t } = useI18n();
+    const isDesktop = useBreakpoint("desktop");
+    const revenue = computed(() => {
+      var _a, _b;
+      if (!((_b = (_a = data.value) == null ? void 0 : _a.actives) == null ? void 0 : _b.revenue)) return t("totalRevenue.defaultValue");
+      return `R$ ${data.value.actives.revenue.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`;
+    });
+    const handleClick = () => {
+      router.push({
+        name: "subscription.list",
+        query: { status: "1" }
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), { class: "revenue-card" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$8, [
+            createVNode(unref(y), {
+              variant: "subtitle",
+              isStrong: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("totalRevenue.title")), 1)
+              ]),
+              _: 1
+            }),
+            withDirectives(createVNode(unref(H), {
+              text: unref(t)("totalRevenue.helperText"),
+              size: "sm"
+            }, null, 8, ["text"]), [
+              [vShow, unref(isDesktop)]
+            ]),
+            withDirectives(createVNode(unref($), {
+              icon: "search_insights",
+              size: "small",
+              class: "header-button",
+              disabled: unref(loadingActives),
+              onClick: handleClick
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("totalRevenue.buttonText")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"]), [
+              [vShow, unref(isDesktop)]
+            ])
+          ]),
+          createBaseVNode("div", _hoisted_2$8, [
+            createBaseVNode("div", _hoisted_3$8, [
+              unref(loadingActives) ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
+                createVNode(AmSkeleton, {
+                  width: 180,
+                  height: 40,
+                  class: "skeleton-primary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 220,
+                  height: 16,
+                  class: "skeleton-secondary"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(revenue.value), 1)
+                  ]),
+                  _: 1
+                }),
+                createVNode(unref(y), { class: "text-muted-color" }, {
+                  default: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      createTextVNode(toDisplayString(unref(t)("totalRevenue.subtitle", { count: (_b = (_a = unref(data)) == null ? void 0 : _a.actives) == null ? void 0 : _b.quantity })), 1)
+                    ];
+                  }),
+                  _: 1
+                })
+              ], 64))
+            ]),
+            withDirectives(createVNode(unref($), {
+              icon: "search_insights",
+              size: "small",
+              class: "mobile-button",
+              disabled: unref(loadingActives),
+              onClick: handleClick
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("totalRevenue.buttonText")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"]), [
+              [vShow, !unref(isDesktop)]
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const TotalRevenueCard = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-ae726abd"]]);
+const _hoisted_1$7 = { class: "card-header mb-4" };
+const _hoisted_2$7 = { class: "card-body" };
+const _hoisted_3$7 = { class: "top-section" };
+const _hoisted_4$6 = { class: "content-data" };
+const _hoisted_5$6 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_6$6 = { class: "flex items-center gap-1" };
+const _hoisted_7$5 = { class: "content-data" };
+const _hoisted_8$3 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_9$3 = {
+  key: 0,
+  class: "pb-1.5"
+};
+const _hoisted_10$2 = {
+  key: 1,
+  class: "flex items-center gap-1"
+};
+const _hoisted_11$1 = { class: "bottom-section" };
+const _hoisted_12 = {
+  key: 0,
+  class: "bottom-skeleton-container"
+};
+const _hoisted_13 = {
+  key: 1,
+  class: "flex items-center gap-4"
+};
+const _hoisted_14 = { class: "space-y-1" };
+const recoveryRateText = "Taxa de recuperação e total recuperado nos últimos 30 dias";
+const helperText$1 = "Valores referentes às assinaturas que estão em atraso e entraram em processo de recuperação";
+const buttonText = "Ver detalhes";
+const AI_RECOVERY_DISABLED = true;
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "SubscriptionRecoveryCard",
+  setup(__props) {
+    const router = useRouter();
+    const { data, loadingOverdues } = useMetricsData();
+    const automatedRecovery = computed(() => {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.overdues)) return "0%";
+      return `${data.value.overdues.automated_recovery}%`;
+    });
+    const aiRecovery = computed(() => {
+      return "0";
+    });
+    const recoveryRate = computed(() => {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.overdues)) return 0;
+      return parseFloat(data.value.overdues.average_total_recovered.replace(",", "."));
+    });
+    const totalRecovered = computed(() => {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.overdues)) return "R$ 0,00";
+      return `R$ ${data.value.overdues.total_recovered}`;
+    });
+    computed(() => {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.overdues)) return "R$ 0,00";
+      return `R$ ${data.value.overdues.average_total_recovered}`;
+    });
+    const handleClick = () => {
+      router.push({
+        name: "subscription.list",
+        query: { status: "3" }
+        // ID 3 = Em atraso
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), { class: "recovery-card" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$7, [
+            createVNode(unref(y), {
+              variant: "subtitle",
+              isStrong: ""
+            }, {
+              default: withCtx(() => _cache[0] || (_cache[0] = [
+                createTextVNode("Recuperação de assinaturas")
+              ])),
+              _: 1
+            }),
+            createVNode(unref(H), {
+              text: helperText$1,
+              size: "sm"
+            }),
+            createVNode(unref($), {
+              icon: "search_insights",
+              class: "header-button",
+              severity: "secondary",
+              title: buttonText,
+              text: "",
+              onlyIcon: "",
+              onClick: handleClick
+            })
+          ]),
+          createBaseVNode("div", _hoisted_2$7, [
+            createBaseVNode("div", _hoisted_3$7, [
+              createBaseVNode("div", _hoisted_4$6, [
+                unref(loadingOverdues) ? (openBlock(), createElementBlock("div", _hoisted_5$6, [
+                  createVNode(AmSkeleton, {
+                    width: 80,
+                    height: 40,
+                    class: "skeleton-primary"
+                  }),
+                  createVNode(AmSkeleton, {
+                    width: 140,
+                    height: 16,
+                    class: "skeleton-secondary"
+                  }),
+                  createVNode(AmSkeleton, {
+                    width: 120,
+                    height: 16,
+                    class: "skeleton-tertiary"
+                  })
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createBaseVNode("div", _hoisted_6$6, [
+                    createVNode(unref(_), {
+                      icon: "replay",
+                      class: "replay-icon"
+                    }),
+                    createVNode(unref(y), {
+                      variant: "title",
+                      isStrong: ""
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(automatedRecovery.value), 1)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  createVNode(unref(y), { class: "text-muted-color" }, {
+                    default: withCtx(() => _cache[1] || (_cache[1] = [
+                      createTextVNode("Em recuperação "),
+                      createBaseVNode("br", null, null, -1),
+                      createTextVNode("automatizada")
+                    ])),
+                    _: 1
+                  })
+                ], 64))
+              ]),
+              _cache[4] || (_cache[4] = createBaseVNode("div", { class: "divider" }, [
+                createBaseVNode("div", { class: "divider-line" })
+              ], -1)),
+              createBaseVNode("div", _hoisted_7$5, [
+                unref(loadingOverdues) ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
+                  createVNode(AmSkeleton, {
+                    width: 80,
+                    height: 40,
+                    class: "skeleton-primary"
+                  }),
+                  createVNode(AmSkeleton, {
+                    width: 140,
+                    height: 16,
+                    class: "skeleton-secondary"
+                  }),
+                  createVNode(AmSkeleton, {
+                    width: 120,
+                    height: 16,
+                    class: "skeleton-tertiary"
+                  })
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  AI_RECOVERY_DISABLED ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
+                    createVNode(unref(y), {
+                      as: "span",
+                      size: "small",
+                      variant: "caption",
+                      class: "bg-neutral-600 text-white py-1 px-3 rounded-full"
+                    }, {
+                      default: withCtx(() => _cache[2] || (_cache[2] = [
+                        createTextVNode("Em breve")
+                      ])),
+                      _: 1
+                    })
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_10$2, [
+                    createVNode(unref(_), { icon: "flare" }),
+                    createVNode(unref(y), {
+                      variant: "title",
+                      isStrong: ""
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(aiRecovery.value), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])),
+                  createVNode(unref(y), { class: "text-muted-color" }, {
+                    default: withCtx(() => _cache[3] || (_cache[3] = [
+                      createTextVNode("Em recuperação "),
+                      createBaseVNode("br", null, null, -1),
+                      createTextVNode("por IA")
+                    ])),
+                    _: 1
+                  })
+                ], 64))
+              ])
+            ]),
+            createVNode(unref(script)),
+            createBaseVNode("div", _hoisted_11$1, [
+              unref(loadingOverdues) ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                createVNode(AmSkeleton, {
+                  width: 180,
+                  height: 24,
+                  class: "bottom-skeleton-top"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 280,
+                  height: 16,
+                  class: "bottom-skeleton-middle"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 220,
+                  height: 16,
+                  class: "bottom-skeleton-bottom"
+                })
+              ])) : (openBlock(), createElementBlock("div", _hoisted_13, [
+                createBaseVNode("div", null, [
+                  createVNode(AmDoughnutChartAdapted, {
+                    id: "recovery-chart",
+                    label: "",
+                    percentage: recoveryRate.value,
+                    values: [recoveryRate.value, 100]
+                  }, null, 8, ["percentage", "values"])
+                ]),
+                createBaseVNode("div", _hoisted_14, [
+                  createVNode(unref(y), {
+                    variant: "title",
+                    isStrong: ""
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(totalRecovered.value), 1)
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(unref(y), { class: "text-muted-color" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(recoveryRateText))
+                    ]),
+                    _: 1
+                  })
+                ])
+              ]))
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const SubscriptionRecoveryCard = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-5ea3cfd2"]]);
+const _hoisted_1$6 = { class: "card-header" };
+const _hoisted_2$6 = { class: "card-content" };
+const _hoisted_3$6 = { class: "content-data" };
+const _hoisted_4$5 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_5$5 = { class: "content-data" };
+const _hoisted_6$5 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "NewSubscriptionsCard",
+  setup(__props) {
+    const router = useRouter();
+    const { data, loadingNewActives } = useMetricsData();
+    const { t } = useI18n();
+    const handleClick = () => {
+      router.push({
+        name: "subscription.list",
+        query: {
+          status: "1",
+          // ID 1 = Ativo
+          order_direction: "desc"
+          // Mais novas primeiro
+        }
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), { class: "metric-card" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$6, [
+            createVNode(unref(y), {
+              variant: "subtitle",
+              isStrong: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("newSubscriptions.title")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(H), {
+              text: unref(t)("newSubscriptions.helperText"),
+              size: "sm"
+            }, null, 8, ["text"]),
+            createVNode(unref($), {
+              icon: "search_insights",
+              class: "header-button",
+              severity: "secondary",
+              title: unref(t)("newSubscriptions.buttonText"),
+              text: "",
+              onlyIcon: "",
+              onClick: handleClick
+            }, null, 8, ["title"])
+          ]),
+          createBaseVNode("div", _hoisted_2$6, [
+            createBaseVNode("div", _hoisted_3$6, [
+              unref(loadingNewActives) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+                createVNode(AmSkeleton, {
+                  width: 80,
+                  height: 32,
+                  class: "skeleton-primary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 140,
+                  height: 14,
+                  class: "skeleton-secondary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 120,
+                  height: 14,
+                  class: "skeleton-tertiary"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      createTextVNode(toDisplayString(((_b = (_a = unref(data)) == null ? void 0 : _a.newActives) == null ? void 0 : _b.quantity) || 0), 1)
+                    ];
+                  }),
+                  _: 1
+                }),
+                createVNode(unref(y), { class: "text-muted-color whitespace-pre-line" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("newSubscriptions.last30DaysLabel")), 1)
+                  ]),
+                  _: 1
+                })
+              ], 64))
+            ]),
+            _cache[0] || (_cache[0] = createBaseVNode("div", { class: "divider" }, [
+              createBaseVNode("div", { class: "divider-line" })
+            ], -1)),
+            createBaseVNode("div", _hoisted_5$5, [
+              unref(loadingNewActives) ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+                createVNode(AmSkeleton, {
+                  width: 80,
+                  height: 32,
+                  class: "skeleton-primary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 140,
+                  height: 14,
+                  class: "skeleton-secondary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 120,
+                  height: 14,
+                  class: "skeleton-tertiary"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      createTextVNode(toDisplayString(((_b = (_a = unref(data)) == null ? void 0 : _a.newActives) == null ? void 0 : _b.average_last_12_months) || 0), 1)
+                    ];
+                  }),
+                  _: 1
+                }),
+                createVNode(unref(y), { class: "text-muted-color whitespace-pre-line" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("newSubscriptions.average12MonthsLabel")), 1)
+                  ]),
+                  _: 1
+                })
+              ], 64))
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const NewSubscriptionsCard = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f5fdece6"]]);
+const _hoisted_1$5 = { class: "card-header" };
+const _hoisted_2$5 = { class: "header-buttons" };
+const _hoisted_3$5 = { class: "card-content" };
+const _hoisted_4$4 = { class: "content-data" };
+const _hoisted_5$4 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_6$4 = { class: "content-data" };
+const _hoisted_7$4 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const showVisibilityToggle = true;
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "ChurnCard",
+  setup(__props) {
+    const router = useRouter();
+    const { data, loadingChurn } = useMetricsData();
+    const { t } = useI18n();
+    const isChurnVisible = ref(true);
+    const toggleVisibility = () => {
+      isChurnVisible.value = !isChurnVisible.value;
+    };
+    const handleClick = () => {
+      router.push({
+        name: "subscription.list",
+        query: { status: "2" }
+        // ID 2 = Cancelado
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), { class: "metric-card" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$5, [
+            createVNode(unref(y), {
+              variant: "subtitle",
+              isStrong: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("churn.title")), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(unref(H), {
+              text: unref(t)("churn.helperText"),
+              size: "sm"
+            }, null, 8, ["text"]),
+            createBaseVNode("div", _hoisted_2$5, [
+              showVisibilityToggle ? (openBlock(), createBlock(unref($), {
+                key: 0,
+                icon: isChurnVisible.value ? "visibility" : "visibility_off",
+                severity: "secondary",
+                title: unref(t)("churn.toggleVisibility"),
+                onClick: toggleVisibility,
+                text: "",
+                onlyIcon: ""
+              }, null, 8, ["icon", "title"])) : createCommentVNode("", true),
+              createVNode(unref($), {
+                icon: "search_insights",
+                severity: "secondary",
+                title: unref(t)("churn.buttonText"),
+                text: "",
+                onlyIcon: "",
+                onClick: handleClick
+              }, null, 8, ["title"])
+            ])
+          ]),
+          createBaseVNode("div", _hoisted_3$5, [
+            createBaseVNode("div", _hoisted_4$4, [
+              unref(loadingChurn) ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+                createVNode(AmSkeleton, {
+                  width: 80,
+                  height: 32,
+                  class: "skeleton-primary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 140,
+                  height: 14,
+                  class: "skeleton-secondary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 120,
+                  height: 14,
+                  class: "skeleton-tertiary"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      createTextVNode(toDisplayString(isChurnVisible.value ? `${((_b = (_a = unref(data)) == null ? void 0 : _a.churn) == null ? void 0 : _b.average) || 0}%` : "****"), 1)
+                    ];
+                  }),
+                  _: 1
+                }),
+                createVNode(unref(y), { class: "text-muted-color whitespace-pre-line" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("churn.last30DaysLabel")), 1)
+                  ]),
+                  _: 1
+                })
+              ], 64))
+            ]),
+            _cache[0] || (_cache[0] = createBaseVNode("div", { class: "divider" }, [
+              createBaseVNode("div", { class: "divider-line" })
+            ], -1)),
+            createBaseVNode("div", _hoisted_6$4, [
+              unref(loadingChurn) ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
+                createVNode(AmSkeleton, {
+                  width: 80,
+                  height: 32,
+                  class: "skeleton-primary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 140,
+                  height: 14,
+                  class: "skeleton-secondary"
+                }),
+                createVNode(AmSkeleton, {
+                  width: 120,
+                  height: 14,
+                  class: "skeleton-tertiary"
+                })
+              ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(y), {
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      createTextVNode(toDisplayString(isChurnVisible.value ? `${((_b = (_a = unref(data)) == null ? void 0 : _a.churn) == null ? void 0 : _b.average_last_12_months) || 0}%` : "****"), 1)
+                    ];
+                  }),
+                  _: 1
+                }),
+                createVNode(unref(y), { class: "text-muted-color whitespace-pre-line" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("churn.average12MonthsLabel")), 1)
+                  ]),
+                  _: 1
+                })
+              ], 64))
+            ])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const ChurnCard = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-be3d5a46"]]);
+const _hoisted_1$4 = { class: "col-span-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center" };
+const _hoisted_2$4 = { class: "flex items-center gap-2" };
+const _hoisted_3$4 = {
+  id: "date-filter",
+  class: "flex-1 !p-0 h-10"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FilterBar",
+  props: {
+    seasonalityOptions: { default: () => [
+      { label: "Todos", value: 0 },
+      { label: "Anual", value: 1 },
+      { label: "Semestral", value: 2 },
+      { label: "Trimestral", value: 3 },
+      { label: "Bimestral", value: 7 },
+      { label: "Mensal", value: 4 },
+      { label: "Quinzenal", value: 5 },
+      { label: "Semanal", value: 6 }
+    ] },
+    seasonalityPlaceholder: { default: "Filtrar por sazonalidade" },
+    selectedSeasonalityTypes: { default: () => [] },
+    onSeasonalityChange: {},
+    onDateChange: {}
+  },
+  emits: ["seasonalityChange", "dateChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const seasonalityTypeToValue = {
+      annual: 1,
+      semiannual: 2,
+      quarterly: 3,
+      bimonthly: 7,
+      monthly: 4,
+      biweekly: 5,
+      weekly: 6
+    };
+    const getDefault30Days = () => {
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      const start = new Date(today);
+      start.setDate(today.getDate() - 29);
+      start.setHours(0, 0, 0, 0);
+      return [start.toISOString(), today.toISOString()];
+    };
+    const selectedSeasonality = ref(null);
+    const selectedDates = ref(getDefault30Days());
+    let isUserChanging = false;
+    const syncSelectedValue = () => {
+      if (isUserChanging) return;
+      const types = props.selectedSeasonalityTypes || [];
+      if (types.length === 0) {
+        if (selectedSeasonality.value !== 0) {
+          selectedSeasonality.value = 0;
+        }
+        return;
+      }
+      if (types.length === 7) {
+        const allTypes = ["weekly", "biweekly", "monthly", "bimonthly", "quarterly", "semiannual", "annual"];
+        const hasAllTypes = allTypes.every((type) => types.includes(type));
+        if (hasAllTypes) {
+          if (selectedSeasonality.value !== 0) {
+            selectedSeasonality.value = 0;
+          }
+          return;
+        }
+      }
+      const firstType = types[0];
+      const mappedValue = seasonalityTypeToValue[firstType];
+      if (mappedValue !== void 0 && selectedSeasonality.value !== mappedValue) {
+        selectedSeasonality.value = mappedValue;
+      }
+    };
+    watch(() => props.selectedSeasonalityTypes, syncSelectedValue, { immediate: true, deep: true });
+    const dateRangeConfigs = {
+      "30D": () => {
+        const today = /* @__PURE__ */ new Date();
+        const start = new Date(today);
+        start.setDate(today.getDate() - 29);
+        return [start, today];
+      },
+      "60D": () => {
+        const today = /* @__PURE__ */ new Date();
+        const start = new Date(today);
+        start.setDate(today.getDate() - 59);
+        return [start, today];
+      },
+      "90D": () => {
+        const today = /* @__PURE__ */ new Date();
+        const start = new Date(today);
+        start.setDate(today.getDate() - 89);
+        return [start, today];
+      },
+      "365D": () => {
+        const today = /* @__PURE__ */ new Date();
+        const start = new Date(today);
+        start.setDate(today.getDate() - 364);
+        return [start, today];
+      }
+    };
+    const emit = __emit;
+    let isInitialized = false;
+    setTimeout(() => {
+      isInitialized = true;
+      emit("dateChange", selectedDates.value);
+      if (props.onDateChange) {
+        props.onDateChange(selectedDates.value);
+      }
+    }, 0);
+    const handleSeasonalityChange = (value) => {
+      const nextValue = Array.isArray(value) ? value.length ? value[value.length - 1] : null : value;
+      isUserChanging = true;
+      selectedSeasonality.value = nextValue;
+      if (isInitialized) {
+        emit("seasonalityChange", nextValue);
+        if (props.onSeasonalityChange) {
+          props.onSeasonalityChange(nextValue);
+        }
+      }
+      setTimeout(() => {
+        isUserChanging = false;
+      }, 100);
+    };
+    const handleDateChange = (dates) => {
+      selectedDates.value = dates;
+      if (isInitialized) {
+        emit("dateChange", dates);
+        if (props.onDateChange) {
+          props.onDateChange(dates);
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createBaseVNode("div", _hoisted_2$4, [
+          createVNode(unref(_), { icon: "filter_list" }),
+          createVNode(unref(y), {
+            variant: "subtitle",
+            isStrong: ""
+          }, {
+            default: withCtx(() => _cache[2] || (_cache[2] = [
+              createTextVNode("Filtrar dados:")
+            ])),
+            _: 1
+          }),
+          createVNode(AmCardV3, { class: "flex-1 !p-0 h-9 flex items-center" }, {
+            default: withCtx(() => [
+              createVNode(unref(script$1), {
+                options: _ctx.seasonalityOptions,
+                placeholder: _ctx.seasonalityPlaceholder,
+                optionLabel: "label",
+                optionValue: "value",
+                class: "w-full custom-select",
+                size: "small",
+                multiple: false,
+                modelValue: selectedSeasonality.value,
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => selectedSeasonality.value = $event),
+                  handleSeasonalityChange
+                ]
+              }, null, 8, ["options", "placeholder", "modelValue"])
+            ]),
+            _: 1
+          })
+        ]),
+        createBaseVNode("div", _hoisted_3$4, [
+          createVNode(unref(he), {
+            modelValue: selectedDates.value,
+            "onUpdate:modelValue": [
+              _cache[1] || (_cache[1] = ($event) => selectedDates.value = $event),
+              handleDateChange
+            ],
+            dateRangeConfigs
+          }, null, 8, ["modelValue"])
+        ])
+      ]);
+    };
+  }
+});
+const FilterBar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-d428539d"]]);
+const ALL_SEASONALITY = [
+  "weekly",
+  "biweekly",
+  "monthly",
+  "bimonthly",
+  "quarterly",
+  "semiannual",
+  "annual"
+];
+function useSubscriptionGraphics() {
+  const { loadGraphics: loadGraphics2, setDateRange: setDateRange2, setSeasonality: setSeasonality2, data, loadingGraphics, error } = useMetricsData();
+  const seasonalityMap = {
+    1: "annual",
+    2: "semiannual",
+    3: "quarterly",
+    4: "monthly",
+    5: "biweekly",
+    6: "weekly",
+    7: "bimonthly"
+  };
+  let isInitializing = false;
+  let debounceTimeout = null;
+  const debouncedLoadGraphics = () => {
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+    }
+    debounceTimeout = setTimeout(async () => {
+      await loadGraphics2();
+    }, 100);
+  };
+  const handleDateChange = async (dates) => {
+    if (isInitializing || !dates.length) return;
+    if (dates.length === 2) {
+      setDateRange2({
+        start: new Date(dates[0]),
+        end: new Date(dates[1])
+      });
+      debouncedLoadGraphics();
+    }
+  };
+  const handleSeasonalityChange = async (values) => {
+    if (isInitializing) return;
+    if (values === 0) {
+      setSeasonality2([...ALL_SEASONALITY]);
+      debouncedLoadGraphics();
+      return;
+    }
+    const normalized = Array.isArray(values) ? values : values === null || values === void 0 ? [] : [values];
+    console.log("Seasonality change handler called:", normalized);
+    const seasonality = normalized.map((value) => seasonalityMap[value]);
+    setSeasonality2(seasonality);
+    debouncedLoadGraphics();
+  };
+  const graphicsData = computed(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return {
+      seasonality: ((_b = (_a = data.value) == null ? void 0 : _a.graphics) == null ? void 0 : _b.seasonality) || null,
+      activeClients: ((_d = (_c = data.value) == null ? void 0 : _c.graphics) == null ? void 0 : _d.active_clients) || null,
+      topSubscriptions: ((_f = (_e = data.value) == null ? void 0 : _e.graphics) == null ? void 0 : _f.top_subscriptions) || [],
+      revenueChart: ((_h = (_g = data.value) == null ? void 0 : _g.graphics) == null ? void 0 : _h.revenue_chart) || []
+    };
+  });
+  const loadInitialData = async () => {
+    try {
+      isInitializing = true;
+      await loadGraphics2();
+    } catch (error2) {
+      console.error("Error loading graphics data:", error2);
+    } finally {
+      isInitializing = false;
+    }
+  };
+  return {
+    // Estado
+    graphicsData,
+    loading: computed(() => loadingGraphics.value),
+    error: computed(() => error.value),
+    // Handlers
+    handleDateChange,
+    handleSeasonalityChange,
+    loadInitialData,
+    // Configurações
+    seasonalityOptions: [
+      { label: "Todos", value: 0 },
+      { label: "Anual", value: 1 },
+      { label: "Semestral", value: 2 },
+      { label: "Trimestral", value: 3 },
+      { label: "Bimestral", value: 7 },
+      { label: "Mensal", value: 4 },
+      { label: "Quinzenal", value: 5 },
+      { label: "Semanal", value: 6 }
+    ]
+  };
+}
+const _hoisted_1$3 = { class: "flex items-center gap-2" };
+const _hoisted_2$3 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_3$3 = {
+  key: 1,
+  class: "flex items-center gap-4 lg:gap-16 flex-1"
+};
+const _hoisted_4$3 = { class: "relative w-48 h-48 lg:w-64 lg:h-64 flex-shrink-0 chart-container" };
+const _hoisted_5$3 = { class: "chart-wrapper" };
+const _hoisted_6$3 = { class: "chart-center-text" };
+const _hoisted_7$3 = { class: "flex flex-col justify-center space-y-3 flex-1" };
+const _hoisted_8$2 = { key: 0 };
+const _hoisted_9$2 = {
+  key: 0,
+  class: "flex items-center gap-2 text-sm"
+};
+const _hoisted_10$1 = {
+  key: 1,
+  class: "empty-legend"
+};
+const _hoisted_11 = { class: "flex items-center gap-2 text-sm" };
+const helperText = "Distribuição das assinaturas ativas por tipo de sazonalidade com a quantidade e valor total.";
+const title = "Assinaturas por sazonalidade";
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "SeasonalityCard",
+  setup(__props) {
+    const { graphicsData, loading: loadingGraphics } = useSubscriptionGraphics();
+    const { selectedSeasonality } = useMetricsData();
+    const seasonalityColors = {
+      annual: "#9B6AFA",
+      semiannual: "#33C1A0",
+      quarterly: "#4E5AF0",
+      bimonthly: "#FF6B6B",
+      monthly: "#F66DFF",
+      biweekly: "#6A9CFA",
+      weekly: "#F5B041"
+    };
+    const allSeasonalityData = computed(() => {
+      var _a;
+      if (!((_a = graphicsData.value) == null ? void 0 : _a.seasonality)) return [];
+      const { breakdown } = graphicsData.value.seasonality;
+      const getSeasonalityValue = (type) => {
+        const item = breakdown[type];
+        return {
+          count: (item == null ? void 0 : item.count) ?? 0,
+          total: (item == null ? void 0 : item.total) ?? "0,00"
+        };
+      };
+      const weekly = getSeasonalityValue("weekly");
+      const biweekly = getSeasonalityValue("biweekly");
+      const monthly = getSeasonalityValue("monthly");
+      const bimonthly = getSeasonalityValue("bimonthly");
+      const quarterly = getSeasonalityValue("quarterly");
+      const semiannual = getSeasonalityValue("semiannual");
+      const annual = getSeasonalityValue("annual");
+      return [
+        {
+          name: "Semanal",
+          type: "weekly",
+          hex: seasonalityColors.weekly,
+          quantity: weekly.count,
+          value: `R$ ${weekly.total}`
+        },
+        {
+          name: "Quinzenal",
+          type: "biweekly",
+          hex: seasonalityColors.biweekly,
+          quantity: biweekly.count,
+          value: `R$ ${biweekly.total}`
+        },
+        {
+          name: "Mensal",
+          type: "monthly",
+          hex: seasonalityColors.monthly,
+          quantity: monthly.count,
+          value: `R$ ${monthly.total}`
+        },
+        {
+          name: "Bimestral",
+          type: "bimonthly",
+          hex: seasonalityColors.bimonthly,
+          quantity: bimonthly.count,
+          value: `R$ ${bimonthly.total}`
+        },
+        {
+          name: "Trimestral",
+          type: "quarterly",
+          hex: seasonalityColors.quarterly,
+          quantity: quarterly.count,
+          value: `R$ ${quarterly.total}`
+        },
+        {
+          name: "Semestral",
+          type: "semiannual",
+          hex: seasonalityColors.semiannual,
+          quantity: semiannual.count,
+          value: `R$ ${semiannual.total}`
+        },
+        {
+          name: "Anual",
+          type: "annual",
+          hex: seasonalityColors.annual,
+          quantity: annual.count,
+          value: `R$ ${annual.total}`
+        }
+      ];
+    });
+    const seasonalityData = computed(() => {
+      if (!selectedSeasonality.value || selectedSeasonality.value.length === 0) {
+        return allSeasonalityData.value;
+      }
+      return allSeasonalityData.value.filter(
+        (item) => selectedSeasonality.value.includes(item.type)
+      );
+    });
+    const total = computed(() => {
+      return seasonalityData.value.reduce((sum, item) => sum + item.quantity, 0);
+    });
+    const hasData = computed(() => total.value > 0);
+    const colors = computed(() => seasonalityData.value.map((item) => item.hex));
+    const emptyDoughnutData = computed(() => ({
+      labels: ["Sem dados"],
+      datasets: [
+        {
+          data: [1],
+          backgroundColor: ["#E0E0E0"],
+          hoverBackgroundColor: ["#E0E0E0"],
+          borderWidth: 0
+        }
+      ]
+    }));
+    const doughnutData = computed(() => {
+      if (!hasData.value) {
+        return emptyDoughnutData.value;
+      }
+      return {
+        labels: seasonalityData.value.map((item) => item.name),
+        datasets: [
+          {
+            data: seasonalityData.value.map((item) => item.quantity),
+            backgroundColor: colors.value,
+            hoverBackgroundColor: colors.value,
+            borderWidth: 0
+          }
+        ]
+      };
+    });
+    const doughnutOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: "80%",
+      plugins: {
+        legend: { display: false },
+        tooltip: { enabled: false }
+      },
+      animation: { animateRotate: true }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), {
+        class: "space-y-8 h-full flex flex-col w-full",
+        style: { "min-height": "301px" }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$3, [
+            createVNode(unref(y), {
+              variant: "subtitle",
+              isStrong: ""
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(title))
+              ]),
+              _: 1
+            }),
+            createVNode(unref(H), {
+              text: helperText,
+              size: "sm"
+            })
+          ]),
+          unref(loadingGraphics) ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+            createVNode(AmSkeleton, {
+              width: 280,
+              height: 20,
+              class: "skeleton-item skeleton-1"
+            }),
+            createVNode(AmSkeleton, {
+              width: 220,
+              height: 20,
+              class: "skeleton-item skeleton-2"
+            }),
+            createVNode(AmSkeleton, {
+              width: 160,
+              height: 20,
+              class: "skeleton-item skeleton-3"
+            }),
+            createVNode(AmSkeleton, {
+              width: 240,
+              height: 20,
+              class: "skeleton-item skeleton-4"
+            })
+          ])) : (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            createBaseVNode("div", _hoisted_4$3, [
+              createBaseVNode("div", _hoisted_5$3, [
+                createVNode(unref(script$2), {
+                  type: "doughnut",
+                  data: doughnutData.value,
+                  options: doughnutOptions,
+                  class: "chart-canvas"
+                }, null, 8, ["data"])
+              ]),
+              createBaseVNode("div", _hoisted_6$3, [
+                hasData.value ? (openBlock(), createBlock(unref(y), {
+                  key: 0,
+                  variant: "title",
+                  isStrong: ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(total.value), 1)
+                  ]),
+                  _: 1
+                })) : (openBlock(), createBlock(unref(y), {
+                  key: 1,
+                  class: "empty-state-text text-center"
+                }, {
+                  default: withCtx(() => _cache[0] || (_cache[0] = [
+                    createTextVNode(" Sem assinaturas"),
+                    createBaseVNode("br", null, null, -1),
+                    createTextVNode("no período ")
+                  ])),
+                  _: 1
+                }))
+              ])
+            ]),
+            createBaseVNode("div", _hoisted_7$3, [
+              hasData.value ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(seasonalityData.value, (item) => {
+                  return openBlock(), createElementBlock(Fragment, {
+                    key: item.name
+                  }, [
+                    item.quantity > 0 ? (openBlock(), createElementBlock("div", _hoisted_9$2, [
+                      createBaseVNode("div", {
+                        class: "w-4 h-4 rounded",
+                        style: normalizeStyle(`background-color: ${item.hex}`)
+                      }, null, 4),
+                      createVNode(unref(y), null, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.name) + " (" + toDisplayString(item.quantity) + ") ", 1),
+                          createBaseVNode("strong", null, toDisplayString(item.value), 1)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ])) : createCommentVNode("", true)
+                  ], 64);
+                }), 128))
+              ])) : (openBlock(), createElementBlock("div", _hoisted_10$1, [
+                createBaseVNode("div", _hoisted_11, [
+                  _cache[2] || (_cache[2] = createBaseVNode("div", {
+                    class: "w-4 h-4 rounded",
+                    style: { "background-color": "#E0E0E0" }
+                  }, null, -1)),
+                  createVNode(unref(y), { class: "text-muted-color" }, {
+                    default: withCtx(() => _cache[1] || (_cache[1] = [
+                      createTextVNode("Sem assinaturas no período")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ]))
+            ])
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const SeasonalityCard = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-54613e4a"]]);
+const _hoisted_1$2 = { class: "space-y-1 p-8 pt-2 border-r border-surface-200 border-solid" };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_3$2 = { class: "space-y-1 p-8 pt-2" };
+const _hoisted_4$2 = {
+  key: 0,
+  class: "skeleton-container"
+};
+const _hoisted_5$2 = { class: "col-span-2 space-y-1 p-8 pb-2 border-t border-surface-200 border-solid" };
+const _hoisted_6$2 = {
+  key: 0,
+  class: "bottom-skeleton-container"
+};
+const _hoisted_7$2 = {
+  key: 0,
+  class: "empty-state-container"
+};
+const activeClientsLabel = "Quantidade de clientes ativos";
+const averageTicketLabel = "Ticket médio por cliente";
+const topSubscriptionsLabel = "Top 3 assinaturas mais vendidas";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "ActiveClientsCard",
+  setup(__props) {
+    const { graphicsData, loading } = useSubscriptionGraphics();
+    const activeClients = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = graphicsData.value) == null ? void 0 : _a.activeClients) == null ? void 0 : _b.count) || 0;
+    });
+    const formattedAverageTicket = computed(() => {
+      var _a, _b;
+      const avgTicket = ((_b = (_a = graphicsData.value) == null ? void 0 : _a.activeClients) == null ? void 0 : _b.avg_ticket) || "0,00";
+      const numericValue = parseFloat(avgTicket.replace(",", "."));
+      return new Intl.NumberFormat("pt-BR", {
+        style: "currency",
+        currency: "BRL",
+        minimumFractionDigits: 2
+      }).format(numericValue);
+    });
+    const topSubscriptions = computed(() => {
+      var _a;
+      return ((_a = graphicsData.value) == null ? void 0 : _a.topSubscriptions) || [];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), {
+        class: "grid grid-cols-2 text-center h-full w-full",
+        style: { "min-height": "301px" }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$2, [
+            unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+              createVNode(AmSkeleton, {
+                width: 80,
+                height: 40,
+                class: "skeleton-primary"
+              }),
+              createVNode(AmSkeleton, {
+                width: 140,
+                height: 16,
+                class: "skeleton-secondary"
+              }),
+              createVNode(AmSkeleton, {
+                width: 120,
+                height: 16,
+                class: "skeleton-tertiary"
+              })
+            ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createVNode(unref(y), {
+                variant: "title",
+                isStrong: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(activeClients.value), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(y), { class: "text-muted-color" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(activeClientsLabel))
+                ]),
+                _: 1
+              })
+            ], 64))
+          ]),
+          createBaseVNode("div", _hoisted_3$2, [
+            unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+              createVNode(AmSkeleton, {
+                width: 80,
+                height: 40,
+                class: "skeleton-primary"
+              }),
+              createVNode(AmSkeleton, {
+                width: 140,
+                height: 16,
+                class: "skeleton-secondary"
+              }),
+              createVNode(AmSkeleton, {
+                width: 120,
+                height: 16,
+                class: "skeleton-tertiary"
+              })
+            ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createVNode(unref(y), {
+                variant: "title",
+                isStrong: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(formattedAverageTicket.value), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(y), { class: "text-muted-color" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(averageTicketLabel))
+                ]),
+                _: 1
+              })
+            ], 64))
+          ]),
+          createBaseVNode("div", _hoisted_5$2, [
+            createVNode(unref(y), { isStrong: "" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(topSubscriptionsLabel))
+              ]),
+              _: 1
+            }),
+            unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+              createVNode(AmSkeleton, {
+                width: 280,
+                height: 20,
+                class: "bottom-skeleton-top"
+              }),
+              createVNode(AmSkeleton, {
+                width: 220,
+                height: 20,
+                class: "bottom-skeleton-2"
+              }),
+              createVNode(AmSkeleton, {
+                width: 160,
+                height: 20,
+                class: "bottom-skeleton-3"
+              }),
+              createVNode(AmSkeleton, {
+                width: 240,
+                height: 20,
+                class: "bottom-skeleton-bottom"
+              })
+            ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              topSubscriptions.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+                createVNode(unref(y), { class: "text-muted-color" }, {
+                  default: withCtx(() => _cache[0] || (_cache[0] = [
+                    createTextVNode("Não há dados a exibir")
+                  ])),
+                  _: 1
+                })
+              ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(topSubscriptions.value, (subscription) => {
+                return openBlock(), createBlock(unref(y), {
+                  key: subscription,
+                  class: "text-muted-color"
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(subscription), 1)
+                  ]),
+                  _: 2
+                }, 1024);
+              }), 128))
+            ], 64))
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const ActiveClientsCard = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9b5091aa"]]);
+const _hoisted_1$1 = { class: "w-full" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "w-full"
+};
+const _hoisted_3$1 = {
+  key: 1,
+  class: "w-full"
+};
+const _hoisted_4$1 = { class: "chart-wrapper w-full" };
+const _hoisted_5$1 = {
+  key: 0,
+  class: "chart-skeleton-container"
+};
+const _hoisted_6$1 = {
+  key: 1,
+  class: "empty-chart-container"
+};
+const _hoisted_7$1 = { class: "empty-chart-overlay" };
+const _hoisted_8$1 = { class: "empty-chart-label" };
+const _hoisted_9$1 = {
+  key: 2,
+  class: "chart-container"
+};
+const _hoisted_10 = {
+  key: 0,
+  class: "flex gap-4 items-center justify-start flex-wrap"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "LineChartCard",
+  setup(__props) {
+    const { graphicsData, loading } = useSubscriptionGraphics();
+    const chartFilterOptions = [
+      { label: "Receita por assinaturas + Assinaturas canceladas", value: "both" },
+      { label: "Apenas receita por assinaturas", value: "revenue" },
+      { label: "Apenas assinaturas canceladas", value: "canceled" }
+    ];
+    const selectedFilter = ref("both");
+    const hasData = computed(() => {
+      var _a;
+      return ((_a = graphicsData.value) == null ? void 0 : _a.revenueChart) && Array.isArray(graphicsData.value.revenueChart) && graphicsData.value.revenueChart.length > 0 && graphicsData.value.revenueChart.some((point) => point.revenue > 0 || point.canceled > 0);
+    });
+    const chartData = computed(() => {
+      var _a;
+      if (!((_a = graphicsData.value) == null ? void 0 : _a.revenueChart) || !Array.isArray(graphicsData.value.revenueChart) || graphicsData.value.revenueChart.length === 0) {
+        return {
+          labels: [],
+          datasets: []
+        };
+      }
+      const chartDataPoints = graphicsData.value.revenueChart;
+      return {
+        labels: chartDataPoints.map((point) => point.label),
+        datasets: [
+          {
+            label: "Receita por assinaturas",
+            data: chartDataPoints.map((point) => point.revenue),
+            borderColor: "#9B6AFA",
+            tension: 0.4,
+            yAxisID: "y"
+          },
+          {
+            label: "Assinaturas canceladas",
+            data: chartDataPoints.map((point) => point.canceled),
+            borderColor: "#D38913",
+            tension: 0.4,
+            yAxisID: "y1"
+          }
+        ]
+      };
+    });
+    const filteredChartData = computed(() => {
+      if (!chartData.value.datasets.length) {
+        return {
+          labels: [],
+          datasets: []
+        };
+      }
+      let datasetsToShow = [];
+      if (selectedFilter.value === "revenue") {
+        datasetsToShow = [chartData.value.datasets[0]];
+      } else if (selectedFilter.value === "canceled") {
+        datasetsToShow = [chartData.value.datasets[1]];
+      } else {
+        datasetsToShow = chartData.value.datasets;
+      }
+      return {
+        labels: chartData.value.labels,
+        datasets: datasetsToShow
+      };
+    });
+    const chartOptions = computed(() => {
+      selectedFilter.value === "both";
+      selectedFilter.value === "canceled";
+      return {
+        maintainAspectRatio: false,
+        aspectRatio: 0.6,
+        layout: {
+          padding: {
+            right: 0
+            // Remove padding à direita
+          }
+        },
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                const datasetLabel = context.dataset.label || "";
+                const value = context.parsed.y;
+                if (context.dataset.yAxisID === "y") {
+                  return `${datasetLabel}: R$ ${value.toLocaleString("pt-BR", {
+                    minimumFractionDigits: 2
+                  })}`;
+                }
+                return `${datasetLabel}: ${value}`;
+              }
+            }
+          }
+        },
+        scales: {
+          x: {
+            ticks: { color: "#666" },
+            grid: { color: "#eee" }
+          },
+          y: {
+            type: "linear",
+            display: true,
+            // Sempre mostra o eixo esquerdo
+            position: "left",
+            ticks: {
+              color: "#666",
+              callback: function(value) {
+                return `R$ ${value.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`;
+              }
+            },
+            grid: { color: "#eee" }
+          },
+          y1: {
+            type: "linear",
+            display: false,
+            // Desabilita o eixo direito
+            position: "right",
+            ticks: {
+              color: "#666"
+            },
+            grid: {
+              drawOnChartArea: false,
+              color: "#eee"
+            }
+          }
+        }
+      };
+    });
+    const handleFilterChange = (value) => {
+      selectedFilter.value = value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(C), { class: "col-span-12 space-y-4" }, {
+        default: withCtx(() => [
+          createBaseVNode("div", _hoisted_1$1, [
+            unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+              createVNode(AmSkeleton, {
+                width: 250,
+                height: 40
+              })
+            ])) : (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              createVNode(unref(script$1), {
+                options: chartFilterOptions,
+                optionLabel: "label",
+                optionValue: "value",
+                modelValue: selectedFilter.value,
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => selectedFilter.value = $event),
+                  handleFilterChange
+                ],
+                size: "small",
+                class: "w-full"
+              }, null, 8, ["modelValue"])
+            ]))
+          ]),
+          createBaseVNode("div", _hoisted_4$1, [
+            unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+              createVNode(AmSkeleton, {
+                width: 200,
+                height: 20,
+                class: "chart-skeleton-item chart-skeleton-1"
+              }),
+              createVNode(AmSkeleton, {
+                width: 240,
+                height: 20,
+                class: "chart-skeleton-item chart-skeleton-2"
+              }),
+              createVNode(AmSkeleton, {
+                width: 320,
+                height: 20,
+                class: "chart-skeleton-item chart-skeleton-3"
+              })
+            ])) : !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+              createVNode(unref(script$2), {
+                type: "line",
+                data: { labels: [], datasets: [] },
+                options: chartOptions.value
+              }, null, 8, ["options"]),
+              createBaseVNode("div", _hoisted_7$1, [
+                createBaseVNode("div", _hoisted_8$1, [
+                  _cache[2] || (_cache[2] = createBaseVNode("div", { class: "empty-chart-bullet" }, null, -1)),
+                  createVNode(unref(y), { class: "empty-chart-text" }, {
+                    default: withCtx(() => _cache[1] || (_cache[1] = [
+                      createTextVNode("Nenhum dado a ser exibido")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ])
+            ])) : (openBlock(), createElementBlock("div", _hoisted_9$1, [
+              createVNode(unref(script$2), {
+                type: "line",
+                data: filteredChartData.value,
+                options: chartOptions.value
+              }, null, 8, ["data", "options"])
+            ]))
+          ]),
+          !unref(loading) && hasData.value && filteredChartData.value.datasets.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_10, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(filteredChartData.value.datasets, (dataset) => {
+              return openBlock(), createElementBlock("div", {
+                key: dataset.label,
+                class: "flex items-center gap-2"
+              }, [
+                createBaseVNode("div", {
+                  class: "w-3 h-3 rounded-full",
+                  style: normalizeStyle(`background-color: ${dataset.borderColor}`)
+                }, null, 4),
+                createVNode(unref(y), { class: "text-sm" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(dataset.label), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const LineChartCard = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d8551ddc"]]);
+const _hoisted_1 = { class: "dashboard-container" };
+const _hoisted_2 = { class: "dashboard-grid" };
+const _hoisted_3 = { class: "metrics-section" };
+const _hoisted_4 = { class: "recovery-section" };
+const _hoisted_5 = { class: "filters-section" };
+const _hoisted_6 = { class: "cards-row-section" };
+const _hoisted_7 = { class: "seasonality-section" };
+const _hoisted_8 = { class: "clients-section" };
+const _hoisted_9 = { class: "chart-section" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RecurringSubscriptionDashView",
+  setup(__props) {
+    const route = useRoute();
+    const sidebar = useSidebarStore();
+    const { initialize: initialize2, selectedSeasonality } = useMetricsData();
+    const {
+      handleDateChange,
+      handleSeasonalityChange,
+      seasonalityOptions,
+      loadInitialData
+    } = useSubscriptionGraphics();
+    const { isEmpty, totalRecords, loading, fetchSubscriptions } = useRecurringTable();
+    const showSubscriptionModal = computed(() => {
+      const hasSubscriptionMenuItem = sidebar.items.value.find(
+        (item) => item.href.includes("/v2/client/integration/subscriptions")
+      );
+      const isSubscriptionRoute = route.name === "subscription.dashboard";
+      const isTableEmpty = isEmpty.value || totalRecords.value === 0;
+      return hasSubscriptionMenuItem && isSubscriptionRoute && isTableEmpty && !loading.value;
+    });
+    onMounted(async () => {
+      try {
+        await Promise.all([
+          initialize2(),
+          loadInitialData(),
+          fetchSubscriptions()
+        ]);
+      } catch (error) {
+        console.error("Error during initialization:", error);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createBaseVNode("div", _hoisted_2, [
+          createBaseVNode("div", _hoisted_3, [
+            createVNode(TotalRevenueCard),
+            createVNode(NewSubscriptionsCard),
+            createVNode(ChurnCard)
+          ]),
+          createBaseVNode("div", _hoisted_4, [
+            createVNode(SubscriptionRecoveryCard)
+          ]),
+          !showSubscriptionModal.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createBaseVNode("div", _hoisted_5, [
+              createVNode(FilterBar, {
+                "seasonality-options": unref(seasonalityOptions),
+                "selected-seasonality-types": unref(selectedSeasonality),
+                onDateChange: unref(handleDateChange),
+                onSeasonalityChange: unref(handleSeasonalityChange)
+              }, null, 8, ["seasonality-options", "selected-seasonality-types", "onDateChange", "onSeasonalityChange"])
+            ]),
+            createBaseVNode("div", _hoisted_6, [
+              createBaseVNode("div", _hoisted_7, [
+                createVNode(SeasonalityCard)
+              ]),
+              createBaseVNode("div", _hoisted_8, [
+                createVNode(ActiveClientsCard)
+              ])
+            ]),
+            createBaseVNode("div", _hoisted_9, [
+              createVNode(LineChartCard)
+            ])
+          ], 64)) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+const RecurringSubscriptionDashView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d7f2f23e"]]);
+export {
+  RecurringSubscriptionDashView as default
+};