KanbanGit/resources/js/pages/projects/Show.vue

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { FolderGit2, LayoutGrid, ListTodo, Settings2 } from 'lucide-vue-next';
import Heading from '@/components/Heading.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import AppLayout from '@/layouts/AppLayout.vue';
import { access, index, show } from '@/routes/projects/index';
import { index as boardIndex } from '@/routes/projects/board';
import { index as backlogIndex } from '@/routes/projects/backlog';
import {
    board as boardSettings,
    general as generalSettings,
    metadata as metadataSettings,
    notifications as notificationSettings,
    repositories as repositorySettings,
} from '@/routes/projects/settings';
import { create as projectTemplateCreate } from '@/routes/projects/templates';
import type { BreadcrumbItem, ProjectShowPageProps } from '@/types';

const props = defineProps<ProjectShowPageProps>();

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Projects',
        href: index(),
    },
    {
        title: props.project.name,
        href: show(props.project.id),
    },
];

const projectAreas = [
    {
        title: 'Backlog',
        description:
            'Create tickets, review incoming work, and move ready items into the board workflow.',
        icon: ListTodo,
    },
    {
        title: 'Board',
        description:
            'Track active work across the project-defined Kanban columns and update ticket status.',
        icon: LayoutGrid,
    },
    {
        title: 'Project settings',
        description:
            'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
        icon: Settings2,
    },
    {
        title: 'Repositories',
        description:
            'Link project repositories so tickets can later discover related branches and pull requests.',
        icon: FolderGit2,
    },
];
</script>

<template>
    <AppLayout :breadcrumbs="breadcrumbs">
        <Head :title="project.name" />

        <div class="flex flex-1 flex-col gap-6 p-4">
            <div
                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
            >
                <div class="space-y-3">
                    <Badge variant="outline" class="px-3 py-1">
                        {{ project.key }}
                    </Badge>
                    <Heading
                        :title="project.name"
                        description="Project hub for the upcoming backlog, board, and settings work."
                    />
                </div>

                <div class="flex flex-wrap gap-3">
                    <Button as-child variant="outline">
                        <Link :href="boardIndex(project.id)">Open board</Link>
                    </Button>

                    <Button as-child variant="outline">
                        <Link :href="backlogIndex(project.id)">
                            Open backlog
                        </Link>
                    </Button>

                    <Button
                        v-if="$page.props.auth.permissions.projectCreate"
                        as-child
                        variant="outline"
                    >
                        <Link :href="projectTemplateCreate(project.id)">
                            Save as new template
                        </Link>
                    </Button>

                    <Button as-child variant="outline">
                        <Link :href="index()">Back to projects</Link>
                    </Button>
                </div>
            </div>

            <Card v-if="templateState?.inheritsFromTemplate">
                <CardHeader>
                    <CardTitle>
                        Built from template {{ templateState.templateName }}
                    </CardTitle>
                    <CardDescription>
                        This project keeps its template link. Inherited areas
                        follow the template baseline; overridden areas were
                        customized locally.
                    </CardDescription>
                </CardHeader>
                <CardContent class="flex flex-wrap gap-2">
                    <Badge
                        v-for="area in templateState.inheritedAreas"
                        :key="`inherited-${area.value}`"
                        variant="outline"
                    >
                        {{ area.label }} · inherited
                    </Badge>
                    <Badge
                        v-for="area in templateState.overriddenAreas"
                        :key="`overridden-${area.value}`"
                    >
                        {{ area.label }} · overridden
                    </Badge>
                </CardContent>
            </Card>

            <div v-if="canManageAccess" class="flex flex-wrap gap-3">
                <Button as-child>
                    <Link :href="boardSettings(project.id)">
                        Board settings
                    </Link>
                </Button>

                <Button
                    v-if="$page.props.auth.permissions.globalAdmin"
                    as-child
                    variant="outline"
                >
                    <Link :href="generalSettings(project.id)">
                        General settings
                    </Link>
                </Button>

                <Button as-child variant="outline">
                    <Link :href="metadataSettings(project.id)">
                        Ticket settings
                    </Link>
                </Button>

                <Button as-child variant="outline">
                    <Link :href="repositorySettings(project.id)">
                        Repository settings
                    </Link>
                </Button>

                <Button as-child variant="outline">
                    <Link :href="notificationSettings(project.id)">
                        Notification settings
                    </Link>
                </Button>

                <Button as-child variant="outline">
                    <Link :href="access(project.id)">Manage access</Link>
                </Button>
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <Card
                    v-for="area in projectAreas"
                    :key="area.title"
                    class="h-full"
                >
                    <CardHeader>
                        <div
                            class="bg-muted text-foreground mb-3 flex size-10 items-center justify-center rounded-full"
                        >
                            <component :is="area.icon" class="size-5" />
                        </div>
                        <CardTitle>{{ area.title }}</CardTitle>
                        <CardDescription>{{
                            area.description
                        }}</CardDescription>
                    </CardHeader>
                    <CardContent class="text-muted-foreground text-sm">
                        Use the project shortcuts above to open this area.
                    </CardContent>
                </Card>
            </div>
        </div>
    </AppLayout>
</template>