268 lines
8.7 KiB
Vue
268 lines
8.7 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { dashboard } from '@/routes';
|
|
|
|
defineOptions({
|
|
layout: {
|
|
breadcrumbs: [
|
|
{
|
|
title: 'Dashboard',
|
|
href: dashboard(),
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
defineProps<{
|
|
unreadDynamics: Array<{
|
|
id: number;
|
|
name: string;
|
|
url: string;
|
|
unread_count: number;
|
|
context_activities: Array<{
|
|
id: number;
|
|
content: string;
|
|
user: { name: string } | null;
|
|
subject: { name: string; url: string } | null;
|
|
created_at: string;
|
|
url: string;
|
|
}>;
|
|
new_activities: Array<{
|
|
id: number;
|
|
content: string;
|
|
user: { name: string } | null;
|
|
subject: { name: string; url: string } | null;
|
|
created_at: string;
|
|
url: string;
|
|
}>;
|
|
}>;
|
|
}>();
|
|
|
|
function formatTime(isoString: string): string {
|
|
return new Date(isoString).toLocaleString();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Dashboard" />
|
|
|
|
<div class="c-dashboard">
|
|
<div class="c-dashboard__container">
|
|
<h2 class="c-dashboard__title">Recent Activity</h2>
|
|
|
|
<div v-if="unreadDynamics.length > 0" class="c-dashboard__grid">
|
|
<div
|
|
v-for="dynamic in unreadDynamics"
|
|
:key="dynamic.id"
|
|
class="c-dashboard__card"
|
|
>
|
|
<div class="c-dashboard__card-header">
|
|
<div class="c-dashboard__entity-meta">
|
|
<span class="c-dashboard__badge-type c-dashboard__badge-type--dynamic">
|
|
Dynamic
|
|
</span>
|
|
<span class="c-dashboard__unread-count">
|
|
{{ dynamic.unread_count }} New
|
|
</span>
|
|
</div>
|
|
<Link
|
|
:href="dynamic.url"
|
|
class="c-dashboard__entity-link"
|
|
>
|
|
<h3 class="c-dashboard__entity-title">
|
|
{{ dynamic.name }}
|
|
</h3>
|
|
</Link>
|
|
</div>
|
|
|
|
<div class="c-dashboard__activity-list">
|
|
<!-- Context / Read Activities -->
|
|
<div
|
|
v-for="activity in dynamic.context_activities"
|
|
:key="activity.id"
|
|
class="c-dashboard__activity-item c-dashboard__activity-item--read"
|
|
>
|
|
<Link :href="activity.url" class="block">
|
|
<div class="c-dashboard__activity-meta">
|
|
<span class="c-dashboard__activity-user">
|
|
{{ activity.user?.name || 'System' }}
|
|
</span>
|
|
<span class="c-dashboard__activity-time">
|
|
{{ formatTime(activity.created_at) }}
|
|
</span>
|
|
</div>
|
|
<p class="c-dashboard__activity-desc">
|
|
{{ activity.content }}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Unread Separator Line -->
|
|
<div
|
|
v-if="dynamic.new_activities.length > 0"
|
|
class="c-dashboard__divider"
|
|
>
|
|
<span class="c-dashboard__divider-text"
|
|
>NEW</span
|
|
>
|
|
</div>
|
|
|
|
<!-- New / Unread Activities -->
|
|
<div
|
|
v-for="activity in dynamic.new_activities"
|
|
:key="activity.id"
|
|
class="c-dashboard__activity-item c-dashboard__activity-item--unread"
|
|
>
|
|
<Link :href="activity.url" class="block">
|
|
<div class="c-dashboard__activity-meta">
|
|
<span class="c-dashboard__activity-user">
|
|
{{ activity.user?.name || 'System' }}
|
|
</span>
|
|
<span class="c-dashboard__activity-time">
|
|
{{ formatTime(activity.created_at) }}
|
|
</span>
|
|
</div>
|
|
<p class="c-dashboard__activity-desc">
|
|
{{ activity.content }}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty Caught-Up State -->
|
|
<div v-else class="c-dashboard__empty-state">
|
|
<div class="c-dashboard__empty-icon">🔒</div>
|
|
<p class="c-dashboard__empty-text">
|
|
All chambers are currently quiet.
|
|
</p>
|
|
<p class="c-dashboard__empty-subtext">
|
|
Your records are completely up to date. Masterfully done.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../css/app.css";
|
|
|
|
.c-dashboard {
|
|
@apply px-4 py-8 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.c-dashboard__container {
|
|
@apply mx-auto max-w-7xl;
|
|
}
|
|
|
|
.c-dashboard__title {
|
|
@apply mb-6 text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100;
|
|
}
|
|
|
|
.c-dashboard__grid {
|
|
@apply grid grid-cols-1 gap-6 md:grid-cols-2;
|
|
}
|
|
|
|
.c-dashboard__card {
|
|
@apply flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900;
|
|
}
|
|
|
|
.c-dashboard__card-header {
|
|
@apply border-b border-neutral-100 p-6 dark:border-neutral-800/30;
|
|
}
|
|
|
|
.c-dashboard__entity-meta {
|
|
@apply mb-2 flex items-center gap-2;
|
|
}
|
|
|
|
.c-dashboard__badge-type {
|
|
@apply rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase;
|
|
}
|
|
|
|
.c-dashboard__badge-type--dynamic {
|
|
@apply bg-purple-100 text-purple-800 dark:bg-purple-950/20 dark:text-purple-400;
|
|
}
|
|
|
|
.c-dashboard__badge-type--ledger {
|
|
@apply bg-indigo-100 text-indigo-800 dark:bg-indigo-950/20 dark:text-indigo-400;
|
|
}
|
|
|
|
.c-dashboard__unread-count {
|
|
@apply rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-red-800 uppercase dark:bg-red-950/20 dark:text-red-400;
|
|
}
|
|
|
|
.c-dashboard__entity-link {
|
|
@apply hover:underline focus:outline-none;
|
|
}
|
|
|
|
.c-dashboard__entity-title {
|
|
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
|
|
}
|
|
|
|
.c-dashboard__activity-list {
|
|
@apply flex-1 space-y-4 p-6;
|
|
}
|
|
|
|
.c-dashboard__activity-item {
|
|
@apply rounded-lg border p-4;
|
|
}
|
|
|
|
.c-dashboard__activity-item--read {
|
|
@apply border-neutral-200 bg-neutral-50/50 opacity-60 dark:border-neutral-800/50 dark:bg-neutral-950/20;
|
|
}
|
|
|
|
.c-dashboard__activity-item--unread {
|
|
@apply border-red-200/50 bg-red-50/10 dark:border-red-900/30 dark:bg-red-950/5;
|
|
}
|
|
|
|
.c-dashboard__activity-meta {
|
|
@apply mb-1.5 flex items-center gap-2 text-xs;
|
|
}
|
|
|
|
.c-dashboard__activity-user {
|
|
@apply font-semibold text-neutral-800 dark:text-neutral-200;
|
|
}
|
|
|
|
.c-dashboard__activity-time {
|
|
@apply text-neutral-400 dark:text-neutral-500;
|
|
}
|
|
|
|
.c-dashboard__new-badge {
|
|
@apply ml-auto rounded bg-red-100 px-1 py-0.5 text-[9px] font-bold text-red-600 dark:bg-red-950/30 dark:text-red-400;
|
|
}
|
|
|
|
.c-dashboard__activity-desc {
|
|
@apply text-sm text-neutral-600 dark:text-neutral-400;
|
|
}
|
|
|
|
.c-dashboard__divider {
|
|
@apply relative my-4 flex items-center justify-center;
|
|
}
|
|
|
|
.c-dashboard__divider-text {
|
|
@apply z-10 bg-white px-3 text-[10px] font-bold tracking-widest text-neutral-400 uppercase dark:bg-neutral-900 dark:text-neutral-500;
|
|
}
|
|
|
|
.c-dashboard__divider::before {
|
|
content: '';
|
|
@apply absolute inset-x-0 h-px bg-neutral-200 dark:bg-neutral-800;
|
|
}
|
|
|
|
.c-dashboard__empty-state {
|
|
@apply flex min-h-[300px] flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-200 p-12 text-center dark:border-neutral-800;
|
|
}
|
|
|
|
.c-dashboard__empty-icon {
|
|
@apply mb-4 text-4xl;
|
|
}
|
|
|
|
.c-dashboard__empty-text {
|
|
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
|
|
}
|
|
|
|
.c-dashboard__empty-subtext {
|
|
@apply mt-1 max-w-md text-sm text-neutral-500 dark:text-neutral-500;
|
|
}
|
|
</style>
|