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

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import {
    ArrowRight,
    FolderGit2,
    LayoutGrid,
    ListTodo,
    Settings2,
} from 'lucide-vue-next';
import { computed } from 'vue';
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 = computed(() => {
    const areas = [
        {
            title: 'Backlog',
            description:
                'Create tickets, review incoming work, and move ready items into the board workflow.',
            icon: ListTodo,
            href: backlogIndex(props.project.id),
        },
        {
            title: 'Board',
            description:
                'Track active work across the project-defined Kanban columns and update ticket status.',
            icon: LayoutGrid,
            href: boardIndex(props.project.id),
        },
    ];

    if (props.canManageAccess) {
        areas.push(
            {
                title: 'Project settings',
                description:
                    'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
                icon: Settings2,
                href: boardSettings(props.project.id),
            },
            {
                title: 'Repositories',
                description:
                    'Connect repositories and discover ticket branches and pull requests.',
                icon: FolderGit2,
                href: repositorySettings(props.project.id),
            },
        );
    }

    return areas;
});
</script>

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

        <div class="app-page">
            <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="Your project workspace for tickets, workflow, integrations, and access."
                    />
                </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-2 xl:grid-cols-4">
                <Link
                    v-for="area in projectAreas"
                    :key="area.title"
                    :href="area.href"
                    class="group"
                >
                    <Card class="h-full py-0">
                        <CardHeader class="p-5">
                            <div
                                class="bg-primary/10 text-primary mb-3 flex size-10 items-center justify-center rounded-lg"
                            >
                                <component :is="area.icon" class="size-5" />
                            </div>
                            <CardTitle>{{ area.title }}</CardTitle>
                            <CardDescription>{{
                                area.description
                            }}</CardDescription>
                        </CardHeader>
                        <CardContent
                            class="text-primary flex items-center gap-2 px-5 pb-5 text-sm font-semibold"
                        >
                            Open area
                            <ArrowRight
                                class="size-4 transition-transform group-hover:translate-x-1"
                            />
                        </CardContent>
                    </Card>
                </Link>
            </div>
        </div>
    </AppLayout>
</template>