59 lines
2.2 KiB
Vue
59 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
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: Record<string, any>;
|
|
steps: Record<string, any>[];
|
|
nextStep: Record<string, any>;
|
|
}>();
|
|
</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>
|