sfp_front_vue_serprati_digital/src/pages/notificacoes/NotificationsAdminPage.vue

<template>
  <div class="notifications-page">
    <DefaultHeaderPage />

    <div class="row q-gutter-xs q-mb-md flex-wrap">
      <div
        v-for="tab in tabs"
        :key="tab.name"
        :class="['cat-chip', activeTab === tab.name ? 'cat-chip--selected' : 'cat-chip--default']"
        @click="activeTab = tab.name"
      >
        {{ tab.label }}
      </div>
    </div>

    <q-tab-panels v-model="activeTab" animated>
      <q-tab-panel name="nova" class="q-pa-none">
        <NewNotificationPanel @sent="onNotificationSent" />
      </q-tab-panel>

      <q-tab-panel name="historico" class="q-pa-none">
        <NotificationHistoryPanel ref="historyPanelRef" />
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import NewNotificationPanel from "./components/NewNotificationPanel.vue";
import NotificationHistoryPanel from "./components/NotificationHistoryPanel.vue";

const { t } = useI18n();

const activeTab = ref("historico");
const historyPanelRef = ref(null);

const tabs = computed(() => [
  { name: "nova", label: t("notification.new") },
  { name: "historico", label: t("notification.history") },
]);

const onNotificationSent = async () => {
  activeTab.value = "historico";
  await historyPanelRef.value?.refresh();
};
</script>

<style scoped lang="scss">
.cat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s;

  &--default {
    background: #c9a3dc;
    color: #fff;
  }

  &--selected {
    background: #4d1658;
    color: #fff;
  }
}
</style>