feat: dashboard page layout with stat cards and widgets

[kevinrutledge]

What needs to be built?

Rewrite the home page from a group card grid into the dashboard widget layout shown in the hi-fi. The page displays a "Dashboard" heading, three stat/action cards in the top row, and event/activity/message widgets in the bottom row. This issue wires together all the individual dashboard card components.

Design reference

Figma link: https://www.figma.com/design/O8reTcdtMARvnTzCtlsvmp/Paso-Food-Co-Op?node-id=407-4433&p=f&t=wZjCheHOOyiYBbH4-0

Documentation

Existing patterns:

• src/app/(protected)/home/page.tsx - current home page (server component), fetches groups
• src/app/(protected)/home/home-content.tsx - current client component, renders group card grid
• src/components/layout/sidebar.tsx - sidebar nav with "Home" label
• src/actions/event.ts - fetchDashboardData() returns totalMembers, eventsThisMonth, upcomingEvents, recentActivity, recentMessages

Dashboard card components (must be merged before this starts):

• src/components/dashboard/total-members-card.tsx
• src/components/dashboard/events-this-month-card.tsx
• src/components/dashboard/quick-actions-card.tsx
• src/components/dashboard/upcoming-events-card.tsx
• src/components/dashboard/recent-activity-card.tsx
• src/components/dashboard/recent-messages-card.tsx

Official docs:

• Next.js Server Components

Technical notes

This issue modifies existing files rather than creating new ones.

home/page.tsx changes:

• Remove group fetching (getAllGroups, getGroupsByOwner) and greeting logic
• Call fetchDashboardData() for widget data (already includes eventsThisMonth)
• Pass all data to HomeContent

home/home-content.tsx changes:

• Remove group card grid and fuzzy search
• Render the dashboard layout:
  • "Dashboard" heading in Angkor font, bold
  • Top row (3 columns): TotalMembersCard, EventsThisMonthCard, QuickActionsCard
  • Bottom section: UpcomingEventsCard on the left (wider), RecentActivityCard and RecentMessagesCard stacked on the right
• Quick Actions callbacks: navigate to /events, /groups, /messages (or open modals if available)

sidebar.tsx change:

• Rename "Home" label to "Dashboard" in the SIDEBAR_ITEMS array

Grid layout:

• Top row: grid grid-cols-1 gap-6 lg:grid-cols-3
• Bottom row: grid grid-cols-1 gap-6 lg:grid-cols-[2fr_1fr] with the right column as a flex column containing both activity and messages cards

Acceptance criteria

• "Dashboard" heading displays in Angkor font, bold
• Top row renders Total Members, Events This Month, and Quick Actions cards in 3 columns on desktop
• Bottom section renders Upcoming Events card on the left and Recent Activity + Recent Messages stacked on the right
• Page fetches data from fetchDashboardData()
• Quick Actions buttons navigate to /events, /groups, /messages
• All cards display empty states when data is empty
• Responsive layout collapses to single column on mobile
• Sidebar label changed from "Home" to "Dashboard"
• Old group card grid and greeting removed
• npm run build passes
• npm run lint passes