feat(mobile): mobile cards for reminders, audit log, users
Three new <EntityCard> files using the shared <ListCard> shell, wired
into each list page's <DataTable> via cardRender.
- ReminderCard: Bell icon, related-entity subtitle (User/Anchor/
FileText icon by entity type), due-date meta with
past-due flag, accent bar (rose=past-due,
amber=pending, slate=snoozed, emerald=done).
Snooze/Complete/Edit/Delete in actions menu.
- AuditLogCard: Action icon (Plus/Pencil/Trash2/Eye), entity
title, "{verb} by {actor}" subtitle, timestamp
meta, optional changed-field chip line. Accent
bar by action (created=emerald, updated=blue,
deleted=rose). Immutable, no actions menu.
- UserCard: Initials avatar, displayName/email, role meta
(Shield icon), last-login distance, "Inactive"
pill when deactivated. Accent bar (violet=
super_admin, slate=inactive, none=active).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
256
src/components/reminders/reminder-card.tsx
Normal file
256
src/components/reminders/reminder-card.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Anchor,
|
||||
Bell,
|
||||
Calendar,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
FileText,
|
||||
MoreHorizontal,
|
||||
User,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { ListCard, ListCardAvatar, ListCardMeta } from '@/components/shared/list-card';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Reminder {
|
||||
id: string;
|
||||
title: string;
|
||||
note: string | null;
|
||||
dueAt: string;
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent';
|
||||
status: 'pending' | 'snoozed' | 'completed' | 'dismissed';
|
||||
assignedTo: string | null;
|
||||
createdBy: string;
|
||||
clientId: string | null;
|
||||
interestId: string | null;
|
||||
berthId: string | null;
|
||||
autoGenerated: boolean;
|
||||
snoozedUntil: string | null;
|
||||
completedAt: string | null;
|
||||
createdAt: string;
|
||||
client?: { id: string; fullName: string } | null;
|
||||
interest?: { id: string; pipelineStage: string } | null;
|
||||
berth?: { id: string; mooringNumber: string } | null;
|
||||
}
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
pending: { label: 'Pending', icon: Bell },
|
||||
snoozed: { label: 'Snoozed', icon: Clock },
|
||||
completed: { label: 'Completed', icon: CheckCircle2 },
|
||||
dismissed: { label: 'Dismissed', icon: XCircle },
|
||||
} as const;
|
||||
|
||||
const STATUS_PILL: Record<string, string> = {
|
||||
pending: 'bg-amber-100 text-amber-700',
|
||||
snoozed: 'bg-slate-100 text-slate-700',
|
||||
completed: 'bg-emerald-100 text-emerald-700',
|
||||
dismissed: 'bg-emerald-100 text-emerald-700',
|
||||
};
|
||||
|
||||
const PRIORITY_CONFIG = {
|
||||
urgent: { label: 'Urgent', className: 'bg-red-600 text-white' },
|
||||
high: { label: 'High', className: 'bg-orange-500 text-white' },
|
||||
medium: { label: 'Medium', className: 'bg-blue-500 text-white' },
|
||||
low: { label: 'Low', className: 'bg-gray-400 text-white' },
|
||||
} as const;
|
||||
|
||||
function accentForReminder(status: string, isPastDue: boolean): string {
|
||||
if (isPastDue) return 'bg-rose-400';
|
||||
if (status === 'pending') return 'bg-amber-400';
|
||||
if (status === 'snoozed') return 'bg-slate-400';
|
||||
if (status === 'completed' || status === 'dismissed') return 'bg-emerald-400';
|
||||
return 'bg-slate-300';
|
||||
}
|
||||
|
||||
interface ReminderCardProps {
|
||||
reminder: Reminder;
|
||||
portSlug: string;
|
||||
onComplete: (id: string) => void;
|
||||
onSnooze: (id: string) => void;
|
||||
onDismiss: (id: string) => void;
|
||||
onEdit: (reminder: Reminder) => void;
|
||||
}
|
||||
|
||||
export function ReminderCard({
|
||||
reminder,
|
||||
portSlug: _portSlug,
|
||||
onComplete,
|
||||
onSnooze,
|
||||
onDismiss,
|
||||
onEdit,
|
||||
}: ReminderCardProps) {
|
||||
const isPastDue =
|
||||
(reminder.status === 'pending' || reminder.status === 'snoozed') &&
|
||||
new Date(reminder.dueAt) < new Date();
|
||||
|
||||
const accentClass = accentForReminder(reminder.status, isPastDue);
|
||||
const statusConfig = STATUS_CONFIG[reminder.status];
|
||||
const StatusIcon = statusConfig.icon;
|
||||
const statusPill = STATUS_PILL[reminder.status] ?? 'bg-slate-100 text-slate-700';
|
||||
const priorityConfig = PRIORITY_CONFIG[reminder.priority];
|
||||
|
||||
const isResolved = reminder.status === 'completed' || reminder.status === 'dismissed';
|
||||
|
||||
// Subtitle: related-entity context
|
||||
let subtitleIcon: React.ReactNode = null;
|
||||
let subtitleText: string | null = null;
|
||||
if (reminder.client) {
|
||||
subtitleIcon = <User className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
|
||||
subtitleText = reminder.client.fullName;
|
||||
} else if (reminder.berth) {
|
||||
subtitleIcon = <Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />;
|
||||
subtitleText = `Berth ${reminder.berth.mooringNumber}`;
|
||||
} else if (reminder.interest) {
|
||||
subtitleIcon = (
|
||||
<FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
|
||||
);
|
||||
subtitleText = `Interest (${reminder.interest.pipelineStage})`;
|
||||
}
|
||||
|
||||
const hasActions = !isResolved;
|
||||
|
||||
return (
|
||||
<ListCard
|
||||
href="#"
|
||||
ariaLabel={`Reminder: ${reminder.title}`}
|
||||
accentClassName={accentClass}
|
||||
actions={
|
||||
hasActions ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={`Actions for reminder: ${reminder.title}`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onComplete(reminder.id);
|
||||
}}
|
||||
>
|
||||
<CheckCircle2 className="mr-2 h-3.5 w-3.5 text-green-600" />
|
||||
Complete
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onSnooze(reminder.id);
|
||||
}}
|
||||
>
|
||||
<Clock className="mr-2 h-3.5 w-3.5" />
|
||||
Snooze
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onEdit(reminder);
|
||||
}}
|
||||
>
|
||||
<Bell className="mr-2 h-3.5 w-3.5" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onDismiss(reminder.id);
|
||||
}}
|
||||
>
|
||||
<XCircle className="mr-2 h-3.5 w-3.5" />
|
||||
Dismiss
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<ListCardAvatar icon={<Bell className="h-5 w-5" />} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Title row + spacer for actions button */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{reminder.title}
|
||||
</h3>
|
||||
{hasActions ? <span aria-hidden className="block h-9 w-9 shrink-0" /> : null}
|
||||
</div>
|
||||
|
||||
{/* Related entity subtitle */}
|
||||
{subtitleText ? (
|
||||
<p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
|
||||
{subtitleIcon}
|
||||
<span className="truncate">{subtitleText}</span>
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Due date meta line */}
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
|
||||
<ListCardMeta
|
||||
icon={
|
||||
<Calendar
|
||||
className={cn(
|
||||
'h-3 w-3',
|
||||
isPastDue ? 'text-rose-500' : 'text-muted-foreground/80',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<span className={isPastDue ? 'font-medium text-rose-600' : ''}>
|
||||
Due {format(new Date(reminder.dueAt), 'MMM d, yyyy')}
|
||||
</span>
|
||||
</ListCardMeta>
|
||||
</div>
|
||||
|
||||
{/* Pills row: status + priority + past-due flag */}
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
{/* Status pill */}
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
|
||||
statusPill,
|
||||
)}
|
||||
>
|
||||
<StatusIcon className="h-3 w-3" aria-hidden />
|
||||
{statusConfig.label}
|
||||
</span>
|
||||
|
||||
{/* Priority pill */}
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
|
||||
priorityConfig.className,
|
||||
)}
|
||||
>
|
||||
{priorityConfig.label}
|
||||
</span>
|
||||
|
||||
{/* Past-due flag */}
|
||||
{isPastDue ? (
|
||||
<span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">
|
||||
Past due
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListCard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user