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

counts on the dashboard

Browse Source
This commit is contained in:
Harry (hjbdev)
2025-04-08 17:54:33 +01:00
parent 57b35b4849
commit a7386814c7
4 changed files with 65 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
resources/js/pages/organisations/Show.vue
View File

@@ -1,7 +1,9 @@
<script setup lang="ts">
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import AppLayout from '@/layouts/AppLayout.vue';
import { Head, WhenVisible } from '@inertiajs/vue3';
import { Head, Link, WhenVisible } from '@inertiajs/vue3';
import { AppWindowIcon, ServerIcon, UserIcon } from 'lucide-vue-next';
defineProps({
organisation: {
@@ -21,23 +23,69 @@ defineProps({
<AppLayout>
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
<Tabs default-value="dashboard" class="w-[400px]" :unmount-on-hide="false">
<Tabs default-value="dashboard" :unmount-on-hide="false">
<TabsList>
<TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
<TabsTrigger value="settings"> Settings </TabsTrigger>
</TabsList>
<TabsContent value="dashboard"> Overview on organisation. </TabsContent>
<TabsContent value="settings">
<TabsContent value="dashboard">
<h3 class="mt-4 text-2xl font-bold tracking-tight">Your Resources</h3>
<p class="mb-4 text-sm text-muted-foreground">Your organisation, at a glance.</p>
<div class="grid w-full gap-4 md:grid-cols-3">
<Card class="relative">
<Link
:href="
route('applications.index', {
organisation: organisation.id,
})
"
class="absolute inset-0"
/>
<CardContent class="flex items-center gap-4 p-4">
<AppWindowIcon class="size-6 text-muted-foreground" />
<div>
<h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.applications_count }}</h4>
<p class="text-sm text-muted-foreground">Application{{ organisation.applications_count === 1 ? '' : 's' }}</p>
</div>
</CardContent>
</Card>
<Card class="relative">
<Link
class="absolute inset-0"
:href="
route('servers.index', {
organisation: organisation.id,
})
"
/>
<CardContent class="flex items-center gap-4 p-4">
<ServerIcon class="size-6 text-muted-foreground" />
<div>
<h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.servers_count }}</h4>
<p class="text-sm text-muted-foreground">Server{{ organisation.servers_count === 1 ? '' : 's' }}</p>
</div>
</CardContent>
</Card>
<Card class="relative">
<CardContent class="flex items-center gap-4 p-4">
<UserIcon class="size-6 text-muted-foreground" />
<div>
<h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.members_count }}</h4>
<p class="text-sm text-muted-foreground">Member{{ organisation.members_count === 1 ? '' : 's' }}</p>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="settings">
<WhenVisible data="providers">
<template #fallback>
Loading...
</template>
<h3 class="text-2xl font-bold tracking-tight mt-4">Server Providers</h3>
<p class="text-sm text-muted-foreground mb-4">Manage your server providers.</p>
<div class="border border-muted-background divide-y divide-y-muted-background rounded-md">
<div v-for="provider in providers" class="py-1 px-2 flex gap-2 items-center">
<template #fallback> Loading... </template>
<h3 class="mt-4 text-2xl font-bold tracking-tight">Server Providers</h3>
<p class="mb-4 text-sm text-muted-foreground">Manage your server providers.</p>
<div class="border-muted-background divide-y-muted-background divide-y rounded-md border">
<div v-for="provider in providers" class="flex items-center gap-2 px-2 py-1">
{{ provider.name }}
<span class="uppercase text-xs ml-auto text-muted-foreground">{{ provider.type }}</span>
<span class="ml-auto text-xs uppercase text-muted-foreground">{{ provider.type }}</span>
</div>
</div>
</WhenVisible>