feat: implement Story 2.4 — Dashboard Activity Feed with review fixes
Add role-scoped activity feed to the dashboard showing the 20 most recent workspace events. Owners/Managers see all activity (declarations, clients, team changes); Workers see only their assigned declarations. Includes French descriptions, relative timestamps, responsive layout (desktop sidebar, tablet inline, mobile collapsible), and 7 passing Pest tests. Review fixes applied: batch-load declarations/clients/users to eliminate N+1 queries, consistent soft-delete handling in URL resolution, French grammar singular/plural fix, missing icon map entry, and corrected tablet breakpoint per spec. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import {
|
||||
Briefcase,
|
||||
Building2,
|
||||
ChevronDown,
|
||||
ClipboardList,
|
||||
EllipsisVertical,
|
||||
Eye,
|
||||
@@ -11,12 +12,18 @@ import {
|
||||
UserRoundCog,
|
||||
Users,
|
||||
} from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import ActivityFeed from '@/components/dashboard/ActivityFeed.vue';
|
||||
import PriorityAlertsPanel from '@/components/dashboard/PriorityAlertsPanel.vue';
|
||||
import StatCard from '@/components/dashboard/StatCard.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -54,11 +61,13 @@ const breadcrumbs: BreadcrumbItem[] = [
|
||||
];
|
||||
|
||||
const hasWorkspace = computed(() => !!props.workspaceName);
|
||||
const showFeed = ref(false);
|
||||
|
||||
const isWorkerEmpty = computed(
|
||||
() =>
|
||||
props.isWorker &&
|
||||
props.declarations.length === 0 &&
|
||||
props.alerts.length === 0 &&
|
||||
props.statCards.every((c) => c.count === 0),
|
||||
);
|
||||
|
||||
@@ -158,11 +167,6 @@ function navigateToDeclaration(declaration: DashboardDeclaration): void {
|
||||
|
||||
<!-- Workspace dashboard -->
|
||||
<template v-if="hasWorkspace">
|
||||
<!-- Worker subtitle -->
|
||||
<p v-if="isWorker" class="text-sm text-muted-foreground">
|
||||
Mes déclarations
|
||||
</p>
|
||||
|
||||
<!-- Worker empty state -->
|
||||
<Card v-if="isWorkerEmpty">
|
||||
<CardContent
|
||||
@@ -175,186 +179,251 @@ function navigateToDeclaration(declaration: DashboardDeclaration): void {
|
||||
Aucune déclaration assignée
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Contactez votre responsable pour recevoir des
|
||||
déclarations
|
||||
Contactez votre responsable
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<template v-if="!isWorkerEmpty">
|
||||
<!-- KPI StatCards -->
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<StatCard
|
||||
v-for="card in statCards"
|
||||
:key="card.label"
|
||||
:label="card.label"
|
||||
:count="card.count"
|
||||
:status="card.status as StatCardLink['status']"
|
||||
:href="card.href"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Priority Alerts Panel -->
|
||||
<PriorityAlertsPanel
|
||||
:alerts="alerts"
|
||||
:view-all-url="viewAllAlertsUrl"
|
||||
/>
|
||||
|
||||
<!-- Urgent Declarations Table -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold">
|
||||
Déclarations urgentes
|
||||
</h2>
|
||||
<Button
|
||||
v-if="declarationsUrl"
|
||||
variant="outline"
|
||||
as-child
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<!-- Main content (2/3 on desktop) -->
|
||||
<div class="space-y-6 lg:col-span-2">
|
||||
<!-- Worker subtitle -->
|
||||
<p
|
||||
v-if="isWorker"
|
||||
class="text-sm text-muted-foreground"
|
||||
>
|
||||
<Link :href="declarationsUrl">
|
||||
Toutes les déclarations
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
Mes déclarations
|
||||
</p>
|
||||
|
||||
<Card
|
||||
v-if="declarations.length > 0"
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Client</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Date limite</TableHead>
|
||||
<TableHead v-if="!isWorker"
|
||||
>Assigné à</TableHead
|
||||
>
|
||||
<TableHead>Statut</TableHead>
|
||||
<TableHead class="w-10" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="declaration in declarations"
|
||||
:key="declaration.id"
|
||||
class="cursor-pointer"
|
||||
@click="
|
||||
navigateToDeclaration(
|
||||
declaration,
|
||||
)
|
||||
"
|
||||
>
|
||||
<TableCell class="font-medium">
|
||||
{{ declaration.clientName }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{{ declaration.typeLabel }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
:class="
|
||||
deadlineClass(
|
||||
declaration.dueDate,
|
||||
<!-- KPI StatCards -->
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4"
|
||||
>
|
||||
<StatCard
|
||||
v-for="card in statCards"
|
||||
:key="card.label"
|
||||
:label="card.label"
|
||||
:count="card.count"
|
||||
:status="
|
||||
card.status as StatCardLink['status']
|
||||
"
|
||||
:href="card.href"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Priority Alerts Panel -->
|
||||
<PriorityAlertsPanel
|
||||
:alerts="alerts"
|
||||
:view-all-url="viewAllAlertsUrl"
|
||||
/>
|
||||
|
||||
<!-- Urgent Declarations Table -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold">
|
||||
Déclarations urgentes
|
||||
</h2>
|
||||
<Button
|
||||
v-if="declarationsUrl"
|
||||
variant="outline"
|
||||
as-child
|
||||
>
|
||||
<Link :href="declarationsUrl">
|
||||
Toutes les déclarations
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
v-if="declarations.length > 0"
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead
|
||||
>Client</TableHead
|
||||
>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead
|
||||
>Date limite</TableHead
|
||||
>
|
||||
<TableHead v-if="!isWorker"
|
||||
>Assigné à</TableHead
|
||||
>
|
||||
<TableHead
|
||||
>Statut</TableHead
|
||||
>
|
||||
<TableHead class="w-10" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow
|
||||
v-for="declaration in declarations"
|
||||
:key="declaration.id"
|
||||
class="cursor-pointer"
|
||||
@click="
|
||||
navigateToDeclaration(
|
||||
declaration,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{
|
||||
declaration.dueDate ??
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell v-if="!isWorker">
|
||||
{{
|
||||
declaration.assigneeName ??
|
||||
'—'
|
||||
}}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
:variant="
|
||||
statusBadgeVariant(
|
||||
declaration.status,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{
|
||||
declaration.statusLabel
|
||||
}}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
as-child
|
||||
@click.stop
|
||||
<TableCell
|
||||
class="font-medium"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
>
|
||||
<EllipsisVertical
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
@click.stop="
|
||||
navigateToDeclaration(
|
||||
declaration,
|
||||
{{
|
||||
declaration.clientName
|
||||
}}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{{
|
||||
declaration.typeLabel
|
||||
}}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
:class="
|
||||
deadlineClass(
|
||||
declaration.dueDate,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Eye
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Voir
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
disabled
|
||||
{{
|
||||
declaration.dueDate ??
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell v-if="!isWorker">
|
||||
{{
|
||||
declaration.assigneeName ??
|
||||
'—'
|
||||
}}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
:variant="
|
||||
statusBadgeVariant(
|
||||
declaration.status,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Send
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Relancer
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
disabled
|
||||
>
|
||||
<UserRoundCog
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Réassigner
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Card>
|
||||
{{
|
||||
declaration.statusLabel
|
||||
}}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
as-child
|
||||
@click.stop
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8"
|
||||
>
|
||||
<EllipsisVertical
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
@click.stop="
|
||||
navigateToDeclaration(
|
||||
declaration,
|
||||
)
|
||||
"
|
||||
>
|
||||
<Eye
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Voir
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
disabled
|
||||
>
|
||||
<Send
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Relancer
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
disabled
|
||||
>
|
||||
<UserRoundCog
|
||||
class="mr-2 h-4 w-4"
|
||||
/>
|
||||
Réassigner
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card v-else>
|
||||
<CardContent
|
||||
class="flex flex-col items-center justify-center py-12"
|
||||
>
|
||||
<FolderOpen
|
||||
class="mb-3 h-12 w-12 text-muted-foreground"
|
||||
/>
|
||||
<p class="text-muted-foreground">
|
||||
Aucune déclaration urgente pour le moment.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card v-else>
|
||||
<CardContent
|
||||
class="flex flex-col items-center justify-center py-12"
|
||||
>
|
||||
<FolderOpen
|
||||
class="mb-3 h-12 w-12 text-muted-foreground"
|
||||
/>
|
||||
<p class="text-muted-foreground">
|
||||
Aucune déclaration urgente pour le
|
||||
moment.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Mobile (<768px): Collapsible activity feed -->
|
||||
<div class="md:hidden">
|
||||
<Collapsible v-model:open="showFeed">
|
||||
<CollapsibleTrigger
|
||||
class="flex w-full items-center justify-between rounded-lg border px-4 py-3 text-sm font-medium transition-colors hover:bg-muted/50"
|
||||
>
|
||||
<span
|
||||
>Activité récente ({{
|
||||
activities.length
|
||||
}})</span
|
||||
>
|
||||
<ChevronDown
|
||||
:class="[
|
||||
'h-4 w-4 transition-transform',
|
||||
showFeed ? 'rotate-180' : '',
|
||||
]"
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div class="pt-3">
|
||||
<ActivityFeed
|
||||
:activities="activities"
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
|
||||
<!-- Tablet (768-1023px): Inline activity feed below table -->
|
||||
<div class="hidden md:block lg:hidden">
|
||||
<ActivityFeed :activities="activities" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop: Activity feed sidebar (1/3) -->
|
||||
<div class="hidden lg:col-span-1 lg:block">
|
||||
<ActivityFeed :activities="activities" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user