sfp_vue_franchisor_ginastica_cerebro/src/pages/kanban/KanbanPage.vue

<template>
  <div>
    <DefaultHeaderPage title="Atividades" :show-filter-icon="false" />

    <div v-if="loading" class="flex flex-center q-pa-xl">
      <q-spinner color="primary" size="48px" />
    </div>

    <div
      v-else
      class="kanban-board q-px-md q-pb-md"
      style="
        display: flex;
        gap: 16px;
        overflow-x: auto;
        align-items: flex-start;
        min-height: calc(100vh - 120px);
      "
    >
      <div
        v-for="column in columns"
        :key="column.phase"
        class="kanban-column"
        style="
          min-width: 280px;
          max-width: 320px;
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;
        "
      >
        <!-- Column header -->
        <div
          class="kanban-column-header row items-center justify-between q-px-md q-py-sm"
          :style="{ backgroundColor: column.color, borderRadius: '8px' }"
        >
          <span class="text-weight-bold text-white" style="font-size: 14px">
            {{ column.label }}
          </span>
          <q-badge
            color="white"
            :text-color="column.textColor"
            :label="cardsForPhase(column.phase).length"
            style="font-size: 11px"
          />
        </div>

        <!-- Cards -->
        <div
          style="
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
          "
        >
          <KanbanCard
            v-for="card in cardsForPhase(column.phase)"
            :key="card.id"
            :card="card"
            @edit="openDialog(card, column.phase)"
          />
        </div>

        <!-- Add button -->
        <q-btn
          flat
          color="grey-6"
          icon="mdi-plus"
          label="Adicionar"
          class="q-mt-xs full-width"
          style="border-radius: 8px; border: 1px dashed #ccc"
          @click="openDialog(null, column.phase)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted } from "vue";
import { useQuasar } from "quasar";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import KanbanCard from "./components/KanbanCard.vue";
import { getKanbans } from "src/api/kanban";

const AddEditKanbanDialog = defineAsyncComponent(
  () => import("./components/AddEditKanbanDialog.vue"),
);

const $q = useQuasar();

const loading = ref(false);
const cards = ref([]);

const columns = [
  { phase: "a_fazer",           label: "A Fazer",           color: "#757575", textColor: "grey-9" },
  { phase: "em_progresso",      label: "Em Progresso",      color: "#1976D2", textColor: "blue-9"  },
  { phase: "em_revisao",        label: "Em Revisão",        color: "#F57C00", textColor: "orange-9"},
  { phase: "concluido",         label: "Concluído",         color: "#388E3C", textColor: "green-9" },
  { phase: "demandas_especiais",label: "Demandas Especiais",color: "#F9A825", textColor: "yellow-9"},
];

const cardsForPhase = (phase) =>
  cards.value.filter((c) => c.phase === phase);

const loadCards = async () => {
  loading.value = true;
  try {
    cards.value = await getKanbans();
  } finally {
    loading.value = false;
  }
};

const openDialog = (card = null, phase = "a_fazer") => {
  $q.dialog({
    component: AddEditKanbanDialog,
    componentProps: { card, initialPhase: phase },
  }).onOk(() => {
    loadCards();
  });
};

onMounted(loadCards);
</script>

<style scoped>
.kanban-board {
  padding-top: 12px;
}
</style>