feat: entity card component

[kevinrutledge]

What needs to be built?

A reusable card component for displaying contact groups in a responsive grid. The card shows the entity name, member count, and description preview. Clicking a card triggers a callback (used by the parent page to open a detail modal). A special "add" variant renders a "+" icon as a call-to-action for creating new groups.

Design reference

Figma — Paso Food Co-Op

Design system colors: Paso Red #831002 for member count text, Paso Brown #523019 for add icon

Documentation

Existing patterns:

• src/components/ui/card.tsx — shadcn Card primitives (Card, CardHeader, CardContent)
• src/components/ui/avatar.tsx — shadcn Avatar with AvatarFallback
• src/utils/avatar.ts — getInitials() and getAvatarColor() for deterministic avatar colors
• src/services/contact-group.ts — GroupWithCount type (has name, description, memberCount)

Official docs:

• shadcn Card
• Lucide Icons — ChevronRight, Users, Plus

Technical notes

Create the component at src/components/groups/entity-card.tsx.

The card has two variants:

Group variant (default):

• Left: Avatar circle with group initials (using getInitials + getAvatarColor)
• Group name in bold, chevron-right icon on the right
• Member count below name in Paso Red with Users icon (e.g., "5 members")
• Description preview truncated to 2 lines with ellipsis
• White background, subtle border/shadow
• Hover state (slight shadow increase or border highlight)

Add variant:

• Centered "+" icon in Paso Brown with a group people silhouette
• Same card dimensions as group variant
• Hover state

interface EntityCardProps {
  variant?: "group" | "add";
  name?: string;
  memberCount?: number;
  description?: string | null;
  onClick?: () => void;
}

This is a presentational component — receives data via props and calls onClick when clicked. Does not fetch data or call server actions.

Acceptance criteria

• Component created at src/components/groups/entity-card.tsx
• Group variant displays: avatar with initials, group name (bold), chevron icon, member count (Paso Red #831002), description preview
• Add variant displays: centered "+" icon with group silhouette (Paso Brown #523019)
• Description truncates after 2 lines with text ellipsis
• Card has hover state (shadow or border change)
• onClick callback fires when card is clicked
• Uses shadcn Card primitives and Avatar with AvatarFallback
• Uses getInitials() and getAvatarColor() from src/utils/avatar.ts
• Icons from lucide-react
• Exported as named export
• npm run build passes