feat(mobile): mobile card view for clients + interests lists
Adds optional cardRender prop to <DataTable> that switches the layout
to a vertical card list below lg: while keeping the same TanStack
table instance powering both views (pagination, sort, selection).
New shared shell:
- <ListCard> rounded card with optional left status accent bar,
whole-card link to detail page, top-right actions
slot, and tactile hover/active states.
- <ListCardAvatar> 40px brand-tinted circle (initials or domain icon).
- <ListCardMeta> inline icon + muted text segment.
- deriveInitials() shared helper that ignores numeric tokens (so
"Recovery Test 1777" -> "RT", not "R1").
Clients and interests pages now render mobile cards via cardRender
using this shell; desktop view (lg+) is unchanged. Interests cards
encode pipeline stage as a left-edge accent strip whose saturation
deepens with pipeline progression (open -> completed). Berths display
with an Anchor icon; null-berth interests fall back to a Compass +
"General interest" italic label. Hot leads get a discreet "Hot" pill.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
188
src/components/interests/interest-card.tsx
Normal file
188
src/components/interests/interest-card.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import { Anchor, Archive, Compass, MoreHorizontal, Pencil } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { TagBadge } from '@/components/shared/tag-badge';
|
||||
import {
|
||||
ListCard,
|
||||
ListCardAvatar,
|
||||
ListCardMeta,
|
||||
deriveInitials,
|
||||
} from '@/components/shared/list-card';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { InterestRow } from './interest-columns';
|
||||
|
||||
const STAGE_LABELS: Record<string, string> = {
|
||||
open: 'Open',
|
||||
details_sent: 'Details Sent',
|
||||
in_communication: 'In Communication',
|
||||
visited: 'Visited',
|
||||
signed_eoi_nda: 'Signed EOI/NDA',
|
||||
deposit_10pct: 'Deposit 10%',
|
||||
contract: 'Contract',
|
||||
completed: 'Completed',
|
||||
};
|
||||
|
||||
/** Pill colors (used for the stage badge in the meta row). */
|
||||
const STAGE_PILL: Record<string, string> = {
|
||||
open: 'bg-slate-100 text-slate-700',
|
||||
details_sent: 'bg-blue-100 text-blue-700',
|
||||
in_communication: 'bg-sky-100 text-sky-700',
|
||||
visited: 'bg-violet-100 text-violet-700',
|
||||
signed_eoi_nda: 'bg-amber-100 text-amber-700',
|
||||
deposit_10pct: 'bg-orange-100 text-orange-700',
|
||||
contract: 'bg-green-100 text-green-700',
|
||||
completed: 'bg-emerald-100 text-emerald-700',
|
||||
};
|
||||
|
||||
/** Accent-bar colors — saturate progressively so the pipeline depth reads at a glance. */
|
||||
const STAGE_ACCENT: Record<string, string> = {
|
||||
open: 'bg-slate-300',
|
||||
details_sent: 'bg-blue-400',
|
||||
in_communication: 'bg-sky-400',
|
||||
visited: 'bg-violet-400',
|
||||
signed_eoi_nda: 'bg-amber-400',
|
||||
deposit_10pct: 'bg-orange-400',
|
||||
contract: 'bg-green-500',
|
||||
completed: 'bg-emerald-500',
|
||||
};
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
general_interest: 'General',
|
||||
specific_qualified: 'Qualified',
|
||||
hot_lead: 'Hot lead',
|
||||
};
|
||||
|
||||
const SOURCE_LABELS: Record<string, string> = {
|
||||
website: 'Website',
|
||||
manual: 'Manual',
|
||||
referral: 'Referral',
|
||||
broker: 'Broker',
|
||||
};
|
||||
|
||||
interface InterestCardProps {
|
||||
interest: InterestRow;
|
||||
portSlug: string;
|
||||
onEdit: (interest: InterestRow) => void;
|
||||
onArchive: (interest: InterestRow) => void;
|
||||
}
|
||||
|
||||
export function InterestCard({ interest, portSlug, onEdit, onArchive }: InterestCardProps) {
|
||||
const stageLabel = STAGE_LABELS[interest.pipelineStage] ?? interest.pipelineStage;
|
||||
const stagePill = STAGE_PILL[interest.pipelineStage] ?? 'bg-gray-100 text-gray-700';
|
||||
const accentClass = STAGE_ACCENT[interest.pipelineStage] ?? 'bg-slate-300';
|
||||
const isHotLead = interest.leadCategory === 'hot_lead';
|
||||
const categoryLabel = interest.leadCategory ? CATEGORY_LABELS[interest.leadCategory] : null;
|
||||
const sourceLabel = interest.source ? (SOURCE_LABELS[interest.source] ?? interest.source) : null;
|
||||
const tags = interest.tags ?? [];
|
||||
|
||||
const clientName = interest.clientName ?? 'Unknown client';
|
||||
const berthLabel = interest.berthMooringNumber;
|
||||
|
||||
return (
|
||||
<ListCard
|
||||
href={`/${portSlug}/interests/${interest.id}`}
|
||||
ariaLabel={`Interest for ${clientName}`}
|
||||
accentClassName={accentClass}
|
||||
actions={
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={`Actions for ${clientName}'s interest`}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => onEdit(interest)}>
|
||||
<Pencil className="mr-2 h-3.5 w-3.5" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => onArchive(interest)}>
|
||||
<Archive className="mr-2 h-3.5 w-3.5" />
|
||||
Archive
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<ListCardAvatar initials={deriveInitials(clientName)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* Title row: name + spacer for the absolutely-positioned actions menu */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h3 className="truncate text-base font-semibold tracking-tight text-foreground">
|
||||
{clientName}
|
||||
</h3>
|
||||
<span aria-hidden className="block h-9 w-9 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* Berth or general-interest line */}
|
||||
<p className="mt-0.5 inline-flex items-center gap-1 truncate text-sm text-muted-foreground">
|
||||
{berthLabel ? (
|
||||
<>
|
||||
<Anchor className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
|
||||
<span className="truncate">{berthLabel}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Compass className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" aria-hidden />
|
||||
<span className="italic">General interest</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Stage pill + category + source */}
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
|
||||
stagePill,
|
||||
)}
|
||||
>
|
||||
{stageLabel}
|
||||
</span>
|
||||
|
||||
{isHotLead ? (
|
||||
<span className="inline-flex items-center rounded-full bg-rose-100 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-rose-700">
|
||||
Hot
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
{(categoryLabel && !isHotLead) || sourceLabel ? (
|
||||
<div className="flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
|
||||
{categoryLabel && !isHotLead ? <ListCardMeta>{categoryLabel}</ListCardMeta> : null}
|
||||
{categoryLabel && !isHotLead && sourceLabel ? <span aria-hidden>·</span> : null}
|
||||
{sourceLabel ? <ListCardMeta>{sourceLabel}</ListCardMeta> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{tags.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{tags.slice(0, 2).map((tag) => (
|
||||
<TagBadge key={tag.id} name={tag.name} color={tag.color} />
|
||||
))}
|
||||
{tags.length > 2 ? (
|
||||
<span className="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
|
||||
+{tags.length - 2}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ListCard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user