feat: Implement read cursor activity tracking and recent activity dashboard with context
This commit is contained in:
parent
e32fbc10e0
commit
f12639fb59
20
app/Http/Controllers/DashboardController.php
Normal file
20
app/Http/Controllers/DashboardController.php
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Services\ActivityService;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Inertia\Inertia;
|
||||||
|
|
||||||
|
class DashboardController extends Controller
|
||||||
|
{
|
||||||
|
public function index(Request $request, ActivityService $activityService)
|
||||||
|
{
|
||||||
|
$user = $request->user();
|
||||||
|
$unreadEntities = $activityService->getUnreadEntitiesGrouped($user);
|
||||||
|
|
||||||
|
return Inertia::render('Dashboard', [
|
||||||
|
'unreadEntities' => $unreadEntities,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -8,6 +8,8 @@ use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
|
|||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Inertia\Inertia;
|
use Inertia\Inertia;
|
||||||
|
|
||||||
|
use App\Services\ActivityService;
|
||||||
|
|
||||||
class DynamicController extends Controller
|
class DynamicController extends Controller
|
||||||
{
|
{
|
||||||
use AuthorizesRequests;
|
use AuthorizesRequests;
|
||||||
@ -44,10 +46,12 @@ class DynamicController extends Controller
|
|||||||
/**
|
/**
|
||||||
* Display the specified resource.
|
* Display the specified resource.
|
||||||
*/
|
*/
|
||||||
public function show(Dynamic $dynamic)
|
public function show(Dynamic $dynamic, ActivityService $activityService)
|
||||||
{
|
{
|
||||||
$this->authorize('view', $dynamic);
|
$this->authorize('view', $dynamic);
|
||||||
|
|
||||||
|
$activityService->updateCursor(auth()->user(), $dynamic);
|
||||||
|
|
||||||
$dynamic->load([
|
$dynamic->load([
|
||||||
'ledgers.media',
|
'ledgers.media',
|
||||||
'participants',
|
'participants',
|
||||||
|
|||||||
@ -5,6 +5,7 @@ namespace App\Http\Controllers;
|
|||||||
use App\Http\Requests\StoreLedgerRequest;
|
use App\Http\Requests\StoreLedgerRequest;
|
||||||
use App\Models\Dynamic;
|
use App\Models\Dynamic;
|
||||||
use App\Models\Ledger;
|
use App\Models\Ledger;
|
||||||
|
use App\Services\ActivityService;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
|
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
|
||||||
use Inertia\Inertia;
|
use Inertia\Inertia;
|
||||||
@ -53,10 +54,12 @@ class LedgerController extends Controller
|
|||||||
/**
|
/**
|
||||||
* Display the specified resource.
|
* Display the specified resource.
|
||||||
*/
|
*/
|
||||||
public function show(Request $request, Dynamic $dynamic, Ledger $ledger)
|
public function show(Request $request, Dynamic $dynamic, Ledger $ledger, ActivityService $activityService)
|
||||||
{
|
{
|
||||||
$this->authorize('view', $ledger);
|
$this->authorize('view', $ledger);
|
||||||
|
|
||||||
|
$activityService->updateCursor($request->user(), $ledger);
|
||||||
|
|
||||||
$dynamic->load('chat', 'participants');
|
$dynamic->load('chat', 'participants');
|
||||||
|
|
||||||
$ledger->load([
|
$ledger->load([
|
||||||
|
|||||||
@ -42,6 +42,14 @@ class HandleInertiaRequests extends Middleware
|
|||||||
'user' => $request->user(),
|
'user' => $request->user(),
|
||||||
],
|
],
|
||||||
'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
|
'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
|
||||||
|
'unreadNotificationsCount' => function () use ($request) {
|
||||||
|
if (! $request->user()) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
$service = app(\App\Services\ActivityService::class);
|
||||||
|
return count($service->getUnreadEntitiesGrouped($request->user()));
|
||||||
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
31
app/Models/ReadCursor.php
Normal file
31
app/Models/ReadCursor.php
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Models;
|
||||||
|
|
||||||
|
use Illuminate\Database\Eloquent\Model;
|
||||||
|
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||||
|
use Illuminate\Database\Eloquent\Relations\MorphTo;
|
||||||
|
|
||||||
|
class ReadCursor extends Model
|
||||||
|
{
|
||||||
|
protected $fillable = [
|
||||||
|
'user_id',
|
||||||
|
'cursorable_id',
|
||||||
|
'cursorable_type',
|
||||||
|
'read_at',
|
||||||
|
];
|
||||||
|
|
||||||
|
protected $casts = [
|
||||||
|
'read_at' => 'datetime',
|
||||||
|
];
|
||||||
|
|
||||||
|
public function user(): BelongsTo
|
||||||
|
{
|
||||||
|
return $this->belongsTo(User::class);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function cursorable(): MorphTo
|
||||||
|
{
|
||||||
|
return $this->morphTo();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -44,6 +44,11 @@ class User extends Authenticatable implements PasskeyUser
|
|||||||
return $this->hasMany(Mutation::class);
|
return $this->hasMany(Mutation::class);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function readCursors()
|
||||||
|
{
|
||||||
|
return $this->hasMany(ReadCursor::class);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the attributes that should be cast.
|
* Get the attributes that should be cast.
|
||||||
*
|
*
|
||||||
|
|||||||
233
app/Services/ActivityService.php
Normal file
233
app/Services/ActivityService.php
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Services;
|
||||||
|
|
||||||
|
use App\Models\User;
|
||||||
|
use App\Models\Dynamic;
|
||||||
|
use App\Models\Ledger;
|
||||||
|
use App\Models\Mutation;
|
||||||
|
use App\Models\Message;
|
||||||
|
use App\Models\ReadCursor;
|
||||||
|
use Illuminate\Support\Carbon;
|
||||||
|
|
||||||
|
class ActivityService
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Update the read cursor for a user on a specific entity.
|
||||||
|
*/
|
||||||
|
public function updateCursor(User $user, $entity): void
|
||||||
|
{
|
||||||
|
ReadCursor::updateOrCreate(
|
||||||
|
[
|
||||||
|
'user_id' => $user->id,
|
||||||
|
'cursorable_id' => $entity->id,
|
||||||
|
'cursorable_type' => get_class($entity),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'read_at' => Carbon::now(),
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the read cursor timestamp for a user on a specific entity.
|
||||||
|
*/
|
||||||
|
public function getCursorReadAt(User $user, $entity): \Carbon\CarbonInterface
|
||||||
|
{
|
||||||
|
$cursor = ReadCursor::where([
|
||||||
|
'user_id' => $user->id,
|
||||||
|
'cursorable_id' => $entity->id,
|
||||||
|
'cursorable_type' => get_class($entity),
|
||||||
|
])->first();
|
||||||
|
|
||||||
|
// If no cursor exists, default to epoch (all activities are unread)
|
||||||
|
return $cursor ? $cursor->read_at : Carbon::parse('1970-01-01');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieve all activities for a Dynamic.
|
||||||
|
*/
|
||||||
|
public function getDynamicActivities(Dynamic $dynamic): array
|
||||||
|
{
|
||||||
|
$activities = [];
|
||||||
|
|
||||||
|
// 1. Chat Messages
|
||||||
|
if ($dynamic->chat) {
|
||||||
|
$messages = Message::where('chat_id', $dynamic->chat->id)
|
||||||
|
->with('user')
|
||||||
|
->get();
|
||||||
|
|
||||||
|
foreach ($messages as $msg) {
|
||||||
|
$activities[] = [
|
||||||
|
'id' => "dynamic_msg_{$msg->id}",
|
||||||
|
'type' => 'message',
|
||||||
|
'description' => $msg->content,
|
||||||
|
'user' => [
|
||||||
|
'name' => $msg->user ? $msg->user->name : 'Unknown User',
|
||||||
|
],
|
||||||
|
'created_at' => $msg->created_at,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Ledgers Created
|
||||||
|
$ledgers = Ledger::where('dynamic_id', $dynamic->id)->get();
|
||||||
|
foreach ($ledgers as $ledger) {
|
||||||
|
$activities[] = [
|
||||||
|
'id' => "ledger_created_{$ledger->id}",
|
||||||
|
'type' => 'ledger_created',
|
||||||
|
'description' => "New Ledger '{$ledger->name}' was created.",
|
||||||
|
'user' => [
|
||||||
|
'name' => 'System',
|
||||||
|
],
|
||||||
|
'created_at' => $ledger->created_at,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort activities chronologically ascending
|
||||||
|
usort($activities, fn($a, $b) => $a['created_at']->timestamp <=> $b['created_at']->timestamp);
|
||||||
|
|
||||||
|
return $activities;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieve all activities for a Ledger.
|
||||||
|
*/
|
||||||
|
public function getLedgerActivities(Ledger $ledger): array
|
||||||
|
{
|
||||||
|
$activities = [];
|
||||||
|
|
||||||
|
// 1. Mutations (Creation and Status updates)
|
||||||
|
$mutations = Mutation::where('ledger_id', $ledger->id)
|
||||||
|
->with('user')
|
||||||
|
->get();
|
||||||
|
|
||||||
|
foreach ($mutations as $mutation) {
|
||||||
|
// Log creation of mutation
|
||||||
|
$verb = $mutation->type === 'penalty' ? 'issued demerit' : ($mutation->type === 'reward' ? 'credited points' : 'submitted entry');
|
||||||
|
$activities[] = [
|
||||||
|
'id' => "mutation_created_{$mutation->id}",
|
||||||
|
'type' => 'mutation_created',
|
||||||
|
'description' => "{$verb} ({$mutation->amount}): \"{$mutation->description}\"",
|
||||||
|
'user' => [
|
||||||
|
'name' => $mutation->user ? $mutation->user->name : 'Unknown User',
|
||||||
|
],
|
||||||
|
'created_at' => $mutation->created_at,
|
||||||
|
];
|
||||||
|
|
||||||
|
// Log status approval/rejection update if different from creation
|
||||||
|
if ($mutation->status !== 'pending' && $mutation->updated_at->gt($mutation->created_at->addSeconds(2))) {
|
||||||
|
$activities[] = [
|
||||||
|
'id' => "mutation_updated_{$mutation->id}",
|
||||||
|
'type' => 'mutation_updated',
|
||||||
|
'description' => "Entry '{$mutation->description}' was " . strtoupper($mutation->status),
|
||||||
|
'user' => [
|
||||||
|
'name' => 'System',
|
||||||
|
],
|
||||||
|
'created_at' => $mutation->updated_at,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Mutation Comments
|
||||||
|
if ($mutations->isNotEmpty()) {
|
||||||
|
$comments = Message::whereHas('chat', function ($q) use ($mutations) {
|
||||||
|
$q->where('chatable_type', Mutation::class)
|
||||||
|
->whereIn('chatable_id', $mutations->pluck('id'));
|
||||||
|
})
|
||||||
|
->with(['user', 'chat.chatable'])
|
||||||
|
->get();
|
||||||
|
|
||||||
|
foreach ($comments as $comment) {
|
||||||
|
/** @var Mutation|null $mutationEntity */
|
||||||
|
$mutationEntity = $comment->chat->chatable;
|
||||||
|
$context = $mutationEntity ? " on \"{$mutationEntity->description}\"" : "";
|
||||||
|
|
||||||
|
$activities[] = [
|
||||||
|
'id' => "comment_{$comment->id}",
|
||||||
|
'type' => 'comment',
|
||||||
|
'description' => "Commented{$context}: \"{$comment->content}\"",
|
||||||
|
'user' => [
|
||||||
|
'name' => $comment->user ? $comment->user->name : 'Unknown User',
|
||||||
|
],
|
||||||
|
'created_at' => $comment->created_at,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort activities chronologically ascending
|
||||||
|
usort($activities, fn($a, $b) => $a['created_at']->timestamp <=> $b['created_at']->timestamp);
|
||||||
|
|
||||||
|
return $activities;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get unread activities grouped by active entities (Dynamics, Ledgers) for the given user.
|
||||||
|
*/
|
||||||
|
public function getUnreadEntitiesGrouped(User $user): array
|
||||||
|
{
|
||||||
|
$groupedEntities = [];
|
||||||
|
|
||||||
|
// 1. Get all participating Dynamics
|
||||||
|
$dynamics = $user->dynamics()->get();
|
||||||
|
|
||||||
|
foreach ($dynamics as $dynamic) {
|
||||||
|
$readAt = $this->getCursorReadAt($user, $dynamic);
|
||||||
|
$activities = $this->getDynamicActivities($dynamic);
|
||||||
|
|
||||||
|
$this->partitionActivities($activities, $readAt, $dynamic, 'Dynamic', route('dynamics.show', $dynamic->id), $groupedEntities);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Get all Ledgers under those Dynamics
|
||||||
|
if ($dynamics->isNotEmpty()) {
|
||||||
|
$ledgers = Ledger::whereIn('dynamic_id', $dynamics->pluck('id'))->get();
|
||||||
|
|
||||||
|
foreach ($ledgers as $ledger) {
|
||||||
|
$readAt = $this->getCursorReadAt($user, $ledger);
|
||||||
|
$activities = $this->getLedgerActivities($ledger);
|
||||||
|
|
||||||
|
$this->partitionActivities($activities, $readAt, $ledger, 'Ledger', route('dynamics.ledgers.show', [$ledger->dynamic_id, $ledger->id]), $groupedEntities);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $groupedEntities;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Partition activities into read and unread, and construct the grouped entity metadata.
|
||||||
|
*/
|
||||||
|
private function partitionActivities(array $activities, \Carbon\CarbonInterface $readAt, $entity, string $type, string $url, array &$groupedEntities): void
|
||||||
|
{
|
||||||
|
$alreadyRead = [];
|
||||||
|
$unread = [];
|
||||||
|
|
||||||
|
foreach ($activities as $act) {
|
||||||
|
if ($act['created_at']->gt($readAt)) {
|
||||||
|
$unread[] = $act;
|
||||||
|
} else {
|
||||||
|
$alreadyRead[] = $act;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($unread)) {
|
||||||
|
// We have unread activity! Let's pull the last two read items as context
|
||||||
|
$context = array_slice($alreadyRead, -2);
|
||||||
|
|
||||||
|
// Format timestamps for serializing to frontend
|
||||||
|
$formatActivity = function ($act) {
|
||||||
|
$act['created_at'] = $act['created_at']->toIso8601String();
|
||||||
|
return $act;
|
||||||
|
};
|
||||||
|
|
||||||
|
$groupedEntities[] = [
|
||||||
|
'id' => $entity->id,
|
||||||
|
'name' => $entity->name,
|
||||||
|
'type' => $type,
|
||||||
|
'url' => $url,
|
||||||
|
'unread_count' => count($unread),
|
||||||
|
'context_activities' => array_map($formatActivity, $context),
|
||||||
|
'new_activities' => array_map($formatActivity, $unread),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Database\Migrations\Migration;
|
||||||
|
use Illuminate\Database\Schema\Blueprint;
|
||||||
|
use Illuminate\Support\Facades\Schema;
|
||||||
|
|
||||||
|
return new class extends Migration
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Run the migrations.
|
||||||
|
*/
|
||||||
|
public function up(): void
|
||||||
|
{
|
||||||
|
Schema::create('read_cursors', function (Blueprint $table) {
|
||||||
|
$table->id();
|
||||||
|
$table->foreignId('user_id')->constrained()->cascadeOnDelete();
|
||||||
|
$table->morphs('cursorable');
|
||||||
|
$table->timestamp('read_at');
|
||||||
|
$table->timestamps();
|
||||||
|
|
||||||
|
$table->unique(['user_id', 'cursorable_id', 'cursorable_type']);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reverse the migrations.
|
||||||
|
*/
|
||||||
|
public function down(): void
|
||||||
|
{
|
||||||
|
Schema::dropIfExists('read_cursors');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -108,7 +108,7 @@ class DatabaseSeeder extends Seeder
|
|||||||
$etiquetteLedger = Ledger::create([
|
$etiquetteLedger = Ledger::create([
|
||||||
'dynamic_id' => $velvetSanctuary->id,
|
'dynamic_id' => $velvetSanctuary->id,
|
||||||
'name' => 'Protocol & Etiquette',
|
'name' => 'Protocol & Etiquette',
|
||||||
'rules' => 'Address others by correct titles. -5 per infraction.',
|
'rules' => 'Address others by correct titles. +5 per infraction.',
|
||||||
'score' => 15,
|
'score' => 15,
|
||||||
'alignment' => 'negative',
|
'alignment' => 'negative',
|
||||||
]);
|
]);
|
||||||
|
|||||||
@ -238,6 +238,34 @@ const rightNavItems: NavItem[] = [
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger :as-child="true">
|
<DropdownMenuTrigger :as-child="true">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Head } from '@inertiajs/vue3';
|
import { Head, Link } from '@inertiajs/vue3';
|
||||||
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
|
|
||||||
import { dashboard } from '@/routes';
|
import { dashboard } from '@/routes';
|
||||||
|
|
||||||
defineOptions({
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Head title="Dashboard" />
|
<Head title="Dashboard" />
|
||||||
|
|
||||||
|
<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
|
<div
|
||||||
class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
|
v-for="entity in unreadEntities"
|
||||||
|
:key="`${entity.type}_${entity.id}`"
|
||||||
|
class="c-dashboard__card"
|
||||||
>
|
>
|
||||||
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
<div class="c-dashboard__card-header">
|
||||||
<div
|
<div class="c-dashboard__entity-meta">
|
||||||
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
|
<span
|
||||||
|
:class="[
|
||||||
|
'c-dashboard__badge-type',
|
||||||
|
entity.type === 'Dynamic'
|
||||||
|
? 'c-dashboard__badge-type--dynamic'
|
||||||
|
: 'c-dashboard__badge-type--ledger'
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
<PlaceholderPattern />
|
{{ entity.type }}
|
||||||
|
</span>
|
||||||
|
<span class="c-dashboard__unread-count">
|
||||||
|
{{ entity.unread_count }} New
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<Link :href="entity.url" class="c-dashboard__entity-link">
|
||||||
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
|
<h3 class="c-dashboard__entity-title">
|
||||||
>
|
{{ entity.name }}
|
||||||
<PlaceholderPattern />
|
</h3>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="c-dashboard__activity-list">
|
||||||
|
<!-- Context / Read Activities -->
|
||||||
<div
|
<div
|
||||||
class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border"
|
v-for="activity in entity.context_activities"
|
||||||
|
:key="activity.id"
|
||||||
|
class="c-dashboard__activity-item c-dashboard__activity-item--read"
|
||||||
>
|
>
|
||||||
<PlaceholderPattern />
|
<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
|
</div>
|
||||||
class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 md:min-h-min dark:border-sidebar-border"
|
</div>
|
||||||
>
|
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
|
use App\Http\Controllers\DashboardController;
|
||||||
use App\Http\Controllers\DynamicController;
|
use App\Http\Controllers\DynamicController;
|
||||||
use App\Http\Controllers\LedgerController;
|
use App\Http\Controllers\LedgerController;
|
||||||
use App\Http\Controllers\MessageController;
|
use App\Http\Controllers\MessageController;
|
||||||
@ -9,7 +10,7 @@ use Illuminate\Support\Facades\Route;
|
|||||||
Route::inertia('/', 'Welcome')->name('home');
|
Route::inertia('/', 'Welcome')->name('home');
|
||||||
|
|
||||||
Route::middleware(['auth', 'verified'])->group(function () {
|
Route::middleware(['auth', 'verified'])->group(function () {
|
||||||
Route::inertia('dashboard', 'Dashboard')->name('dashboard');
|
Route::get('dashboard', [DashboardController::class, 'index'])->name('dashboard');
|
||||||
|
|
||||||
Route::resource('dynamics', DynamicController::class);
|
Route::resource('dynamics', DynamicController::class);
|
||||||
Route::resource('dynamics.ledgers', LedgerController::class)->scoped();
|
Route::resource('dynamics.ledgers', LedgerController::class)->scoped();
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
use App\Models\User;
|
use App\Models\User;
|
||||||
|
use App\Models\Dynamic;
|
||||||
|
use App\Models\Ledger;
|
||||||
|
use App\Models\Mutation;
|
||||||
|
use App\Models\Message;
|
||||||
|
use App\Services\ActivityService;
|
||||||
|
use Illuminate\Support\Carbon;
|
||||||
|
|
||||||
test('guests are redirected to the login page', function () {
|
test('guests are redirected to the login page', function () {
|
||||||
$response = $this->get(route('dashboard'));
|
$response = $this->get(route('dashboard'));
|
||||||
@ -13,4 +19,106 @@ test('authenticated users can visit the dashboard', function () {
|
|||||||
|
|
||||||
$response = $this->get(route('dashboard'));
|
$response = $this->get(route('dashboard'));
|
||||||
$response->assertOk();
|
$response->assertOk();
|
||||||
|
$response->assertInertia(fn ($page) => $page->component('Dashboard')->has('unreadEntities'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('visiting dynamic updates the read cursor', function () {
|
||||||
|
$user = User::factory()->create();
|
||||||
|
$dynamic = Dynamic::factory()->create();
|
||||||
|
$dynamic->participants()->attach($user->id, ['role' => 'owner']);
|
||||||
|
|
||||||
|
$this->actingAs($user);
|
||||||
|
|
||||||
|
$service = app(ActivityService::class);
|
||||||
|
$initialCursor = $service->getCursorReadAt($user, $dynamic);
|
||||||
|
expect($initialCursor->toIso8601String())->toBe('1970-01-01T00:00:00+00:00');
|
||||||
|
|
||||||
|
// Visit Dynamic Show
|
||||||
|
$this->get(route('dynamics.show', $dynamic->id))->assertOk();
|
||||||
|
|
||||||
|
// Re-check cursor is updated to near now
|
||||||
|
$updatedCursor = $service->getCursorReadAt($user, $dynamic);
|
||||||
|
expect($updatedCursor->gt($initialCursor))->toBeTrue();
|
||||||
|
expect($updatedCursor->diffInSeconds(Carbon::now()))->toBeLessThan(5);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('visiting ledger updates the read cursor', function () {
|
||||||
|
$user = User::factory()->create();
|
||||||
|
$dynamic = Dynamic::factory()->create();
|
||||||
|
$dynamic->participants()->attach($user->id, ['role' => 'owner']);
|
||||||
|
|
||||||
|
$ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
|
||||||
|
|
||||||
|
$this->actingAs($user);
|
||||||
|
|
||||||
|
$service = app(ActivityService::class);
|
||||||
|
$initialCursor = $service->getCursorReadAt($user, $ledger);
|
||||||
|
expect($initialCursor->toIso8601String())->toBe('1970-01-01T00:00:00+00:00');
|
||||||
|
|
||||||
|
// Visit Ledger Show
|
||||||
|
$this->get(route('dynamics.ledgers.show', [$dynamic->id, $ledger->id]))->assertOk();
|
||||||
|
|
||||||
|
// Re-check cursor is updated to near now
|
||||||
|
$updatedCursor = $service->getCursorReadAt($user, $ledger);
|
||||||
|
expect($updatedCursor->gt($initialCursor))->toBeTrue();
|
||||||
|
expect($updatedCursor->diffInSeconds(Carbon::now()))->toBeLessThan(5);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('dashboard groups and filters unread entities correctly based on cursor', function () {
|
||||||
|
$user = User::factory()->create();
|
||||||
|
$dynamic = Dynamic::factory()->create(['name' => 'Testing Dynamic']);
|
||||||
|
$dynamic->participants()->attach($user->id, ['role' => 'owner']);
|
||||||
|
|
||||||
|
// Create custom Chat so booted has chat available
|
||||||
|
$dynamic->chat()->create([]);
|
||||||
|
|
||||||
|
$this->actingAs($user);
|
||||||
|
|
||||||
|
// Create past message (already read)
|
||||||
|
$pastMsg = Message::create([
|
||||||
|
'chat_id' => $dynamic->chat->id,
|
||||||
|
'user_id' => $user->id,
|
||||||
|
'content' => 'Old message context',
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Artificially advance cursor to after past message
|
||||||
|
Carbon::setTestNow(Carbon::now()->addMinutes(5));
|
||||||
|
$service = app(ActivityService::class);
|
||||||
|
$service->updateCursor($user, $dynamic);
|
||||||
|
|
||||||
|
// Create new unread message
|
||||||
|
Carbon::setTestNow(Carbon::now()->addMinutes(5));
|
||||||
|
$unreadMsg = Message::create([
|
||||||
|
'chat_id' => $dynamic->chat->id,
|
||||||
|
'user_id' => $user->id,
|
||||||
|
'content' => 'New unread message alert',
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Retrieve unread groupings
|
||||||
|
$response = $this->get(route('dashboard'));
|
||||||
|
$response->assertOk();
|
||||||
|
|
||||||
|
// Verify unread grouping structure
|
||||||
|
$response->assertInertia(fn ($page) => $page
|
||||||
|
->component('Dashboard')
|
||||||
|
->where('unreadEntities.0.name', 'Testing Dynamic')
|
||||||
|
->where('unreadEntities.0.unread_count', 1)
|
||||||
|
->has('unreadEntities.0.context_activities', 1) // Should have old message as context
|
||||||
|
->where('unreadEntities.0.context_activities.0.description', 'Old message context')
|
||||||
|
->has('unreadEntities.0.new_activities', 1) // Should have unread message
|
||||||
|
->where('unreadEntities.0.new_activities.0.description', 'New unread message alert')
|
||||||
|
);
|
||||||
|
|
||||||
|
// Now visit the Dynamic, which clears the unread count
|
||||||
|
$this->get(route('dynamics.show', $dynamic->id))->assertOk();
|
||||||
|
|
||||||
|
// Dashboard should now show 0 unread groups (caught up)
|
||||||
|
$response2 = $this->get(route('dashboard'));
|
||||||
|
$response2->assertOk();
|
||||||
|
$response2->assertInertia(fn ($page) => $page
|
||||||
|
->component('Dashboard')
|
||||||
|
->has('unreadEntities', 0)
|
||||||
|
);
|
||||||
|
|
||||||
|
Carbon::setTestNow(); // Reset test time
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user