feat: mobile ui (#1096)

This commit is contained in:
Jonas Plum
2024-08-07 22:18:59 +02:00
committed by GitHub
parent 96b7a9604c
commit a2dd6c05e6
68 changed files with 668 additions and 1315 deletions

View File

@@ -3,10 +3,11 @@ import OpenTasks from '@/components/dashboard/OpenTasks.vue'
import OpenTickets from '@/components/dashboard/OpenTickets.vue'
import TicketOverTime from '@/components/dashboard/TicketOverTime.vue'
import TicketTypes from '@/components/dashboard/TicketTypes.vue'
import ColumnBody from '@/components/layout/ColumnBody.vue'
import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
import ColumnHeader from '@/components/layout/ColumnHeader.vue'
import TwoColumn from '@/components/layout/TwoColumn.vue'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import { ExternalLink } from 'lucide-vue-next'
@@ -46,96 +47,91 @@ onMounted(() => {
<template>
<TwoColumn>
<div class="flex h-screen flex-1 flex-col">
<div class="flex h-14 min-h-14 items-center bg-background px-4 py-2">
<h1 class="text-xl font-bold">Dashboard</h1>
</div>
<Separator class="shrink-0" />
<ScrollArea>
<div
class="m-auto grid max-w-7xl grid-cols-1 grid-rows-[100px_100px_100px_100px] gap-4 p-4 md:grid-cols-2 md:grid-rows-[100px_100px] xl:grid-cols-4 xl:grid-rows-[100px]"
>
<Card>
<CardHeader>
<CardTitle>{{ count('tasks') }}</CardTitle>
<CardDescription>Tasks</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>{{ count('tickets') }}</CardTitle>
<CardDescription>Tickets</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>{{ count('users') }}</CardTitle>
<CardDescription>Users</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle></CardTitle>
<CardDescription></CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle> Catalyst</CardTitle>
</CardHeader>
<CardContent class="flex flex-1 flex-col gap-1">
<a
href="https://catalyst-soar.com/docs/category/catalyst-handbook"
target="_blank"
class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
>
Open Catalyst Handbook
<ExternalLink class="ml-2 h-4 w-4" />
</a>
<a
href="/_/"
target="_blank"
class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
>
Open Admin Interface
<ExternalLink class="ml-2 h-4 w-4" />
</a>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle> Tickets by Type</CardTitle>
</CardHeader>
<CardContent>
<TicketTypes />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Tickets Per Week</CardTitle>
</CardHeader>
<CardContent>
<TicketOverTime />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Your Open Tickets</CardTitle>
</CardHeader>
<CardContent>
<OpenTickets />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Your Open Tasks</CardTitle>
</CardHeader>
<CardContent>
<OpenTasks />
</CardContent>
</Card>
</div>
</ScrollArea>
</div>
<ColumnHeader title="Dashboard" />
<ColumnBody>
<ColumnBodyContainer
class="grid grid-cols-1 grid-rows-[100px_100px_100px_100px] md:grid-cols-2 md:grid-rows-[100px_100px] xl:grid-cols-4 xl:grid-rows-[100px]"
>
<Card>
<CardHeader>
<CardTitle>{{ count('tasks') }}</CardTitle>
<CardDescription>Tasks</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>{{ count('tickets') }}</CardTitle>
<CardDescription>Tickets</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>{{ count('users') }}</CardTitle>
<CardDescription>Users</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>{{ count('reactions') }}</CardTitle>
<CardDescription>Reactions</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle> Catalyst</CardTitle>
</CardHeader>
<CardContent class="flex flex-1 flex-col gap-1">
<a
href="https://catalyst.security-brewery.com/docs/category/catalyst-handbook"
target="_blank"
class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
>
Open Catalyst Handbook
<ExternalLink class="ml-2 h-4 w-4" />
</a>
<a
href="/_/"
target="_blank"
class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
>
Open Admin Interface
<ExternalLink class="ml-2 h-4 w-4" />
</a>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle> Tickets by Type</CardTitle>
</CardHeader>
<CardContent>
<TicketTypes />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Tickets Per Week</CardTitle>
</CardHeader>
<CardContent>
<TicketOverTime />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Your Open Tickets</CardTitle>
</CardHeader>
<CardContent>
<OpenTickets />
</CardContent>
</Card>
<Card class="xl:col-span-2">
<CardHeader>
<CardTitle>Your Open Tasks</CardTitle>
</CardHeader>
<CardContent>
<OpenTasks />
</CardContent>
</Card>
</ColumnBodyContainer>
</ColumnBody>
</TwoColumn>
</template>