harry/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header layout rather than sidebar layout

Browse Source
This commit is contained in:
Harry (hjbdev)
2025-04-08 19:17:12 +01:00
parent a7386814c7
commit bde11c0b8c
8 changed files with 131 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/js/pages/Dashboard.vue
View File

@@ -1,8 +1,16 @@
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import { Head, Link } from '@inertiajs/vue3';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChevronRightIcon } from 'lucide-vue-next';
defineProps({
organisations: {
type: Array,
required: true,
},
});
const breadcrumbs: BreadcrumbItem[] = [
{
@@ -16,16 +24,21 @@ const breadcrumbs: BreadcrumbItem[] = [
<Head title="Dashboard" />
<AppLayout :breadcrumbs="breadcrumbs">
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<div>The plan:</div>
<div>Organisations have applications</div>
<div>Applications have environments</div>
<div>Servers have services</div>
<div>Services have slices, this could be a database table or a client in a websocket server</div>
<div>Environments have SLICES</div>
<div>Also servers need to be provisioned</div>
<div>Users have SSH keys</div>
<div>Keystone has its own SSH keys</div>
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 items-center">
<Card class="w-80">
<CardHeader class="border-b border-b-muted-background">
<CardTitle>Your Organisation</CardTitle>
<CardDescription>
Select an organisation to view its details.
</CardDescription>
</CardHeader>
<CardContent class="divide-y divide-y-muted-foreground p-0">
<Link v-for="organisation in organisations" :href="route('organisations.show', { organisation: organisation.id })" class="py-3 px-6 hover:bg-muted flex justify-between items-center">
<div>{{ organisation.name }}</div>
<ChevronRightIcon class="size-4 text-muted-foreground" />
</Link>
</CardContent>
</Card>
</div>
</AppLayout>
</template>