lorentz
df78ab8fa5
- New EngagementProfileHeader: avatar (photo/initials fallback), name, jobTitle, department, mailto link, last-active relative/absolute label - New EngagementProfileMetricGrid: 2x2 grid of Hours/Billable/Days/Meetings cards - Page updated: imports Header+MetricGrid, placeholder div removed, real components mounted - D-01/D-22 guard rails: EngagementUserRow.tsx and data endpoint untouched
94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
/* EngagementProfileHeader — phase 08 (D-05, D-06, D-07).
|
|
* Purpose: Identity header card — avatar (photo or initials), display name, jobTitle,
|
|
* department, email mailto: link, and last-active row.
|
|
* Avatar: photo from /api/mobile/engagement/user/[userId]/photo; on error → initials.
|
|
* Last-active: relative (≤7d via date-fns) or absolute (>7d via formatInUserTimezone). */
|
|
|
|
import { useState } from 'react';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { getInitials } from '@/components/mobile/EngagementUserRow';
|
|
import { useUserTimezone, formatInUserTimezone } from '@/lib/hooks/use-user-timezone';
|
|
|
|
export interface EngagementProfileHeaderProps {
|
|
displayName: string;
|
|
email: string;
|
|
jobTitle: string | null;
|
|
department: string | null;
|
|
// Last-active source: caller derives from response (most recent of recentEntries[0].entry_date,
|
|
// or the most-recent snapshots[].period_end). null if no signal at all.
|
|
lastActiveAt: string | null; // ISO date string or null (D-06)
|
|
// Used to build the photo URL — userId is the same value as the route segment
|
|
userId: string;
|
|
}
|
|
|
|
export function EngagementProfileHeader({
|
|
displayName,
|
|
email,
|
|
jobTitle,
|
|
department,
|
|
lastActiveAt,
|
|
userId,
|
|
}: EngagementProfileHeaderProps) {
|
|
const [photoFailed, setPhotoFailed] = useState(false);
|
|
const tz = useUserTimezone();
|
|
|
|
// Compute last-active label (D-06)
|
|
let lastActiveLabel: string | null = null;
|
|
if (lastActiveAt) {
|
|
const ms = Date.now() - new Date(lastActiveAt).getTime();
|
|
if (ms <= 7 * 24 * 60 * 60 * 1000) {
|
|
// Relative — ≤7d
|
|
lastActiveLabel = `Active ${formatDistanceToNow(new Date(lastActiveAt), { addSuffix: true })}`;
|
|
} else {
|
|
// Absolute — >7d
|
|
const formatted = formatInUserTimezone(lastActiveAt, tz, { month: 'short', day: 'numeric', year: 'numeric' });
|
|
lastActiveLabel = `Last active ${formatted}`;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="py-0 shadow-none">
|
|
<CardContent className="px-4 py-4 flex items-center gap-3">
|
|
{/* Avatar — photo or initials fallback */}
|
|
{!photoFailed ? (
|
|
<img
|
|
src={`/api/mobile/engagement/user/${userId}/photo`}
|
|
alt={displayName}
|
|
className="h-14 w-14 rounded-full object-cover shrink-0"
|
|
onError={() => setPhotoFailed(true)}
|
|
/>
|
|
) : (
|
|
<span
|
|
aria-hidden="true"
|
|
className="h-14 w-14 rounded-full bg-muted flex items-center justify-center shrink-0 text-xs font-semibold text-foreground"
|
|
>
|
|
{getInitials(displayName)}
|
|
</span>
|
|
)}
|
|
|
|
{/* Identity stack */}
|
|
<div className="flex-1 min-w-0 space-y-1">
|
|
<p className="text-xl font-semibold truncate">{displayName}</p>
|
|
{jobTitle && (
|
|
<p className="text-xs text-muted-foreground truncate">{jobTitle}</p>
|
|
)}
|
|
{department && (
|
|
<p className="text-xs text-muted-foreground truncate">{department}</p>
|
|
)}
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="text-sm text-primary underline-offset-4 hover:underline truncate block min-h-[44px] flex items-center"
|
|
>
|
|
{email}
|
|
</a>
|
|
{lastActiveLabel && (
|
|
<p className="text-xs text-muted-foreground">{lastActiveLabel}</p>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|