Skip to content

feat(dashboard): expandable report cards with photo, description, and short location#68

Merged
tkflare1 merged 3 commits into
mainfrom
feat/dashboard-report-details
May 22, 2026
Merged

feat(dashboard): expandable report cards with photo, description, and short location#68
tkflare1 merged 3 commits into
mainfrom
feat/dashboard-report-details

Conversation

@davidlu468
Copy link
Copy Markdown
Contributor

Summary

  • Make each report card on the dashboard click-to-expand to reveal the uploaded photo, the user's description, the AI summary, and the full address.
  • Lead the collapsed card with the issue type ("what the problem is") and a concise City, ST location derived from the verbose geocoded address.
  • Add a shortenAddress() helper in lib/constants.ts that strips countries, postal codes, and county segments, and abbreviates US state names.
    • e.g. Coupa Cafe, 538, Ramona Street, University South, Palo Alto, Santa Clara County, California, 94301, United StatesPalo Alto, CA
  • Select report.imageUrl in the dashboard query and render the stored image inside the expanded view (with a graceful "No photo attached" fallback).
  • New client component: src/components/dashboard/report-card.tsx (handles expand/collapse, stops click propagation on the existing Delete button, integrates with formatRelativeTime / formatFullDateTime).

Test plan

  • Sign in and visit /dashboard.
  • Verify each card now shows the issue type as the eyebrow label and a short City, ST location as the title.
  • Click a card and confirm it expands to show:
    • the report photo (or a "No photo attached" placeholder),
    • your typed description,
    • the AI summary,
    • the full address with a map-pin icon.
  • Click again to collapse; chevron rotates accordingly.
  • Clicking the Delete button does not toggle the card; confirming delete still works.
  • Reports without a description or without a photo render the appropriate fallbacks.
  • npm run lint and npx tsc --noEmit both pass.

Made with Cursor

… short location

- Make each report card on the dashboard click-to-expand to reveal the uploaded
  photo, the user's description, the AI summary, and the full address.
- Lead the collapsed card with the issue type ("what the problem is") and a
  concise "City, ST" location derived from the full address.
- Add a shortenAddress() helper that strips countries, postal codes, and county
  segments, and abbreviates US states. E.g. "Coupa Cafe, 538, Ramona Street,
  University South, Palo Alto, Santa Clara County, California, 94301, United
  States" -> "Palo Alto, CA".
- Select report.imageUrl in the dashboard query and render the stored image
  in the expanded view.

Co-authored-by: Cursor <cursoragent@cursor.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 21, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nexa Ready Ready Preview, Comment May 22, 2026 1:11am

Adds a Leaflet-powered map between the stats row and report list that
plots every report with valid coordinates. Pins use the app's purple/
green palette to mirror status pill colors, and clicking a pin opens a
popup with issue type, short address, status, and relative time.

Uses free OpenStreetMap/CARTO tiles rather than the server-side Google
Maps key so the unrestricted API key stays out of the browser bundle.
Leaflet is loaded only on the client (dynamic import in useEffect) to
avoid SSR access to `window`.

Co-authored-by: Cursor <cursoragent@cursor.com>
feat(dashboard): geographic map with pins for all reports
@tkflare1 tkflare1 merged commit 388345d into main May 22, 2026
2 checks passed
tkflare1 added a commit that referenced this pull request May 22, 2026
Resolve conflicts: keep ReportCard/ReportsMap from #68; retain edit page and DeleteReportButton enhancements.

Co-authored-by: Cursor <cursoragent@cursor.com>
@tkflare1
Copy link
Copy Markdown
Contributor

Merged to main in batch merge (5de3818) after resolving conflicts. Order: #64#68#67. Dashboard kept expandable ReportCard + ReportsMap from #68; #67 contributed /dashboard/reports/[id]/edit and enhanced DeleteReportButton.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants