daan/ledgerrz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement read cursor activity tracking and recent activity dashboard with context

Browse Source
This commit is contained in:
Daan Meijer
2026-06-15 23:37:44 +02:00
parent e32fbc10e0
commit f12639fb59
13 changed files with 721 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/AppHeader.vue
+28
View File
@@ -238,6 +238,34 @@ const rightNavItems: NavItem[] = [
</div>
</div>
<div
v-if="page.props.unreadNotificationsCount > 0"
class="relative"
>
<Link
:href="route('dashboard')"
class="relative flex h-9 w-9 items-center justify-center rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 opacity-80"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] font-bold text-white">
{{ page.props.unreadNotificationsCount }}
</span>
</Link>
</div>
<DropdownMenu>
<DropdownMenuTrigger :as-child="true">
<Button
resources/js/pages/Dashboard.vue
+244 -24
View File
@@ -1,6 +1,5 @@
<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
import { Head, Link } from '@inertiajs/vue3';
import { dashboard } from '@/routes';
defineOptions({
@@ -13,35 +12,256 @@ defineOptions({
],
},
});
defineProps<{
unreadEntities: Array<{
id: number;
name: string;
type: 'Dynamic' | 'Ledger';
url: string;
unread_count: number;
context_activities: Array<{
id: string;
type: string;
description: string;
user: { name: string };
created_at: string;
}>;
new_activities: Array<{
id: string;
type: string;
description: string;
user: { name: string };
created_at: string;
}>;
}>;
}>();
function formatTime(isoString: string): string {
return new Date(isoString).toLocaleString();
}
</script>
<template>
<Head title="Dashboard" />
<div
class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
>
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
<div class="c-dashboard">
<div class="c-dashboard__container">
<h2 class="c-dashboard__title">Recent Activity</h2>
<div v-if="unreadEntities.length > 0" class="c-dashboard__grid">
<div
v-for="entity in unreadEntities"
:key="`${entity.type}_${entity.id}`"
class="c-dashboard__card"
>
<div class="c-dashboard__card-header">
<div class="c-dashboard__entity-meta">
<span
:class="[
'c-dashboard__badge-type',
entity.type === 'Dynamic'
? 'c-dashboard__badge-type--dynamic'
: 'c-dashboard__badge-type--ledger'
]"
>
{{ entity.type }}
</span>
<span class="c-dashboard__unread-count">
{{ entity.unread_count }} New
</span>
</div>
<Link :href="entity.url" class="c-dashboard__entity-link">
<h3 class="c-dashboard__entity-title">
{{ entity.name }}
</h3>
</Link>
</div>
<div class="c-dashboard__activity-list">
<!-- Context / Read Activities -->
<div
v-for="activity in entity.context_activities"
:key="activity.id"
class="c-dashboard__activity-item c-dashboard__activity-item--read"
>
<div class="c-dashboard__activity-meta">
<span class="c-dashboard__activity-user">
{{ activity.user.name }}
</span>
<span class="c-dashboard__activity-time">
{{ formatTime(activity.created_at) }}
</span>
</div>
<p class="c-dashboard__activity-desc">
{{ activity.description }}
</p>
</div>
<!-- Unread Separator Line -->
<div
v-if="entity.context_activities.length > 0"
class="c-dashboard__divider"
>
<span class="c-dashboard__divider-text">New Activity Below</span>
</div>
<!-- New / Unread Activities -->
<div
v-for="activity in entity.new_activities"
:key="activity.id"
class="c-dashboard__activity-item c-dashboard__activity-item--unread"
>
<div class="c-dashboard__activity-meta">
<span class="c-dashboard__activity-user">
{{ activity.user.name }}
</span>
<span class="c-dashboard__activity-time">
{{ formatTime(activity.created_at) }}
</span>
<span class="c-dashboard__new-badge">NEW</span>
</div>
<p class="c-dashboard__activity-desc">
{{ activity.description }}
</p>
</div>
</div>
</div>
</div>
<div
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
<!-- 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
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
>
<PlaceholderPattern />
</div>
</div>
<div
class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border"
>
<PlaceholderPattern />
</div>
</div>
</template>
<style scoped>
@reference "../../css/app.css";
.c-dashboard {
@apply py-8 px-4 sm:px-6 lg:px-8;
}
.c-dashboard__container {
@apply mx-auto max-w-7xl;
}
.c-dashboard__title {
@apply text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mb-6;
}
.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 p-6 border-b border-neutral-100 dark:border-neutral-800/30;
}
.c-dashboard__entity-meta {
@apply flex items-center gap-2 mb-2;
}
.c-dashboard__badge-type {
@apply text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded;
}
.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 text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-red-100 text-red-800 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 p-6 space-y-4;
}
.c-dashboard__activity-item {
@apply p-4 rounded-lg border;
}
.c-dashboard__activity-item--read {
@apply bg-neutral-50/50 border-neutral-200 opacity-60 dark:bg-neutral-950/20 dark:border-neutral-800/50;
}
.c-dashboard__activity-item--unread {
@apply bg-red-50/10 border-red-200/50 dark:bg-red-950/5 dark:border-red-900/30;
}
.c-dashboard__activity-meta {
@apply flex items-center gap-2 mb-1.5 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 text-[9px] font-bold text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-950/30 px-1 py-0.5 rounded;
}
.c-dashboard__activity-desc {
@apply text-sm text-neutral-600 dark:text-neutral-400;
}
.c-dashboard__divider {
@apply relative flex items-center justify-center my-4;
}
.c-dashboard__divider-text {
@apply bg-white dark:bg-neutral-900 px-3 text-[10px] font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 z-10;
}
.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 flex-col items-center justify-center p-12 text-center rounded-2xl border border-dashed border-neutral-200 dark:border-neutral-800 min-h-[300px];
}
.c-dashboard__empty-icon {
@apply text-4xl mb-4;
}
.c-dashboard__empty-text {
@apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}
.c-dashboard__empty-subtext {
@apply mt-1 text-sm text-neutral-500 dark:text-neutral-500 max-w-md;
}
</style>