Lesstime/frontend/pages/portal/projects/[id]/index.vue

<template>
    <div>
        <div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
            <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <NuxtLink
                        to="/portal"
                        class="text-sm text-neutral-400 hover:text-primary-500"
                    >
                        {{ $t('portal.backToProject') }}
                    </NuxtLink>
                    <h1 class="mt-1 text-xl font-bold text-primary-500 sm:text-2xl">{{ projectName }}</h1>
                </div>
                <NuxtLink
                    v-if="isClient"
                    :to="`/portal/projects/${projectId}/new-ticket`"
                    class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-secondary-500 sm:px-4 sm:text-sm"
                >
                    <span class="hidden sm:inline">+ {{ $t('portal.newTicket') }}</span>
                    <span class="sm:hidden">+ Ticket</span>
                </NuxtLink>
            </div>
        </div>

        <div v-if="isLoading" class="py-8 text-center text-sm text-neutral-400">
            {{ $t('common.loading') }}
        </div>

        <div v-else-if="tickets.length === 0" class="py-8 text-center text-sm text-neutral-400">
            {{ $t('clientTicket.noTickets') }}
        </div>

        <!-- Kanban board -->
        <div v-else class="mt-4 flex flex-col gap-4 sm:flex-row sm:overflow-x-auto sm:pb-4">
            <div
                v-for="col in columns"
                :key="col.status"
                class="min-w-0 flex-1 sm:min-w-[280px]"
            >
                <div class="mb-3 flex items-center gap-2">
                    <div class="h-2 w-2 rounded-full" :class="col.dotClass" />
                    <h3 class="text-sm font-bold text-neutral-700">{{ col.label }}</h3>
                    <span class="ml-auto rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-semibold text-neutral-500">
                        {{ col.tickets.length }}
                    </span>
                </div>
                <div class="space-y-2">
                    <div
                        v-for="ticket in col.tickets"
                        :key="ticket.id"
                        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
                        @click="openDetail(ticket)"
                    >
                        <div class="flex items-center gap-2">
                            <span class="text-xs font-bold text-primary-500">CT-{{ String(ticket.number).padStart(3, '0') }}</span>
                            <span
                                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
                                :class="typeBadgeClass(ticket.type)"
                            >
                                {{ $t(`clientTicket.type.${ticket.type}`) }}
                            </span>
                        </div>
                        <h4 class="mt-1.5 text-sm font-semibold text-neutral-900 leading-snug">{{ ticket.title }}</h4>
                        <p class="mt-1.5 text-xs text-neutral-400">{{ formatDate(ticket.createdAt) }}</p>
                    </div>
                    <p
                        v-if="col.tickets.length === 0"
                        class="py-4 text-center text-xs text-neutral-400"
                    >
                        {{ $t('clientTicket.noTickets') }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Ticket detail modal -->
        <ClientTicketDetailModal
            v-model="detailOpen"
            :ticket="selectedTicket"
            @refresh="loadTickets"
        />
    </div>
</template>

<script setup lang="ts">
import type { ClientTicket } from '~/services/dto/client-ticket'
import { useClientTicketService } from '~/services/client-tickets'

definePageMeta({
    layout: 'portal',
})

const route = useRoute()
const { t } = useI18n()
const projectId = computed(() => Number(route.params.id))

useHead({ title: t('portal.title') })

const clientTicketService = useClientTicketService()
const auth = useAuthStore()

const tickets = ref<ClientTicket[]>([])
const isLoading = ref(true)
const detailOpen = ref(false)
const selectedTicket = ref<ClientTicket | null>(null)

const projectName = computed(() => {
    const me = auth.user as any
    if (me?.allowedProjects) {
        const project = me.allowedProjects.find((p: any) => p.id === projectId.value)
        return project?.name ?? ''
    }
    return ''
})

const isClient = computed(() => auth.user?.roles?.includes('ROLE_CLIENT') ?? false)
const { typeBadgeClass, formatDate } = useClientTicketHelpers()

const statuses = ['new', 'in_progress', 'done', 'rejected'] as const

function statusDotClass(status: string): string {
    switch (status) {
        case 'new': return 'bg-blue-500'
        case 'in_progress': return 'bg-yellow-500'
        case 'done': return 'bg-green-500'
        case 'rejected': return 'bg-red-500'
        default: return 'bg-neutral-400'
    }
}

const columns = computed(() => statuses.map(status => ({
    status,
    label: t(`clientTicket.status.${status}`),
    dotClass: statusDotClass(status),
    tickets: tickets.value.filter(tk => tk.status === status),
})))

function openDetail(ticket: ClientTicket) {
    selectedTicket.value = ticket
    detailOpen.value = true
}

async function loadTickets() {
    isLoading.value = true
    try {
        tickets.value = await clientTicketService.getAll({ project: projectId.value })
    } finally {
        isLoading.value = false
    }
}

onMounted(() => {
    loadTickets()
})
</script>