sfp_vue_franchisee_ginastica_cerebro/src/pages/kanban/components/KanbanCard.vue

<template>
  <q-card
    class="kanban-card cursor-pointer"
    :style="{ borderLeft: `4px solid ${phaseColor}` }"
    @click="$emit('edit', card)"
  >
    <!-- Header: Creator name + Priority badge -->
    <div class="row items-center justify-between q-px-md q-pt-md">
      <span class="text-body2 text-weight-medium text-grey-8 ellipsis" style="max-width: 60%">
        {{ card.created_by_user_name ?? '—' }}
      </span>
      <q-badge
        :color="priorityColor"
        :label="priorityLabel"
        style="padding: 4px 8px; font-size: 11px"
      />
    </div>

    <!-- Unit name of responsible -->
    <div class="q-px-md q-mt-xs text-caption text-grey-6">
      {{ card.applicant_unit_name ?? 'Matriz' }}
    </div>

    <!-- Description truncated -->
    <div
      v-if="card.description"
      class="q-px-md q-mt-sm text-body2 text-grey-7"
      style="line-height: 1.4"
    >
      {{ truncated }}
    </div>

    <!-- Footer: Sector + Comments count -->
    <div class="row items-center justify-between q-px-md q-pb-md q-mt-sm">
      <span class="text-caption text-grey-6">{{ card.sector ?? '—' }}</span>
      <div class="row items-center" style="gap: 4px">
        <q-icon name="mdi-comment-outline" color="grey-5" size="16px" />
        <span class="text-caption text-grey-6">{{ card.replies_count ?? 0 }}</span>
      </div>
    </div>
  </q-card>
</template>

<script setup>
import { computed } from "vue";

defineEmits(["edit"]);

const { card } = defineProps({
  card: {
    type: Object,
    required: true,
  },
});

const truncated = computed(() => {
  const desc = card.description ?? "";
  return desc.length > 50 ? desc.slice(0, 50) + "…" : desc;
});

const priorityColor = computed(() => {
  const map = { alta: "negative", normal: "warning", baixa: "positive" };
  return map[card.priority] ?? "grey";
});

const priorityLabel = computed(() => {
  const map = { alta: "Alta", normal: "Normal", baixa: "Baixa" };
  return map[card.priority] ?? card.priority;
});

const phaseColor = computed(() => {
  const map = {
    a_fazer: "#9E9E9E",
    em_progresso: "#1976D2",
    em_revisao: "#FF9800",
    concluido: "#4CAF50",
    demandas_especiais: "#FFC107",
  };
  return map[card.phase] ?? "#9E9E9E";
});
</script>

<style scoped>
.kanban-card {
  border-radius: 10px;
  transition: box-shadow 0.2s;
}

.kanban-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
</style>