54 lines
2.2 KiB
Vue
54 lines
2.2 KiB
Vue
<script setup>
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { CheckIcon, CircleIcon } from 'lucide-vue-next';
|
|
|
|
defineProps({
|
|
organisation: { type: Object, required: true },
|
|
steps: { type: Array, required: true },
|
|
nextStep: { type: Object, required: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Onboarding" />
|
|
|
|
<AppLayout
|
|
:breadcrumbs="[
|
|
{ title: organisation.name, href: route('organisations.show', { organisation: organisation.id }) },
|
|
{ title: 'Onboarding' },
|
|
]"
|
|
>
|
|
<div class="flex h-full flex-1 flex-col gap-4 p-4">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-3xl font-bold tracking-tight">Onboarding</h2>
|
|
<p class="mt-1 text-sm text-muted-foreground">{{ organisation.name }}</p>
|
|
</div>
|
|
<Button :as="Link" :href="nextStep.href">{{ nextStep.label }}</Button>
|
|
</div>
|
|
|
|
<div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
<Card v-for="step in steps" :key="step.key">
|
|
<CardHeader>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<CardTitle>{{ step.label }}</CardTitle>
|
|
<Badge :variant="step.complete ? 'success' : 'secondary'">
|
|
<CheckIcon v-if="step.complete" class="size-3" />
|
|
<CircleIcon v-else class="size-3" />
|
|
{{ step.complete ? 'Ready' : 'Open' }}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button :as="Link" variant="secondary" :href="step.href" class="w-full">{{ step.label }}</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|