Skip to content

[Carbon Atlas] Add market explorer view #5876

@gautamp8

Description

@gautamp8

See Parent Issue for more context - #5874

Summary

Add a "Market Explorer" section to the carbon-atlas sidebar with pages for browsing all-registry project and credit data. This gives users a unified view of the voluntary carbon market beyond the single-methodology Guardian trust chain view.

Scope

Projects page (/market/projects)

  • Filter bar: registry, status, category, country dropdowns
  • Search input (project name/ID)
  • Data table (reuse existing data-table.tsx) with columns: project_id, name, registry, status, country, category, issued, retired
  • Pagination
  • Click row to navigate to project detail

Project detail page (/market/projects/[projectId])

  • Project metadata card (name, registry, status, country, category, proponent, methodology)
  • Issued/retired credit totals
  • Link to registry source (project_url)
  • Credit transactions table for this project

Credits page (/market/credits)

  • Filter bar: transaction type (issuance/retirement), vintage range, registry
  • Data table: project_id, quantity, vintage, transaction_date, transaction_type
  • Pagination

Data fetching

  • TanStack Query hooks hitting the FastAPI endpoints from #SUB1
  • Fetch client for market API with configurable base URL via NEXT_PUBLIC_MARKET_API_URL

Files to create/modify

Modified:
  components/app-sidebar.tsx          — Add "Market Explorer" nav section
  .env.example                        — Add NEXT_PUBLIC_MARKET_API_URL

New:
  app/market/projects/page.tsx                  — Projects list page
  app/market/projects/[projectId]/page.tsx      — Project detail page
  app/market/credits/page.tsx                   — Credits list page
  hooks/useMarketProjects.ts                    — TanStack Query hook
  hooks/useMarketCredits.ts                     — TanStack Query hook
  hooks/useMarketStats.ts                       — TanStack Query hook
  lib/api/market.ts                             — Fetch client
  lib/types/market.ts                           — TypeScript types

Acceptance criteria

  • "Market Explorer" section appears in sidebar with Projects and Credits sub-items
  • Projects page loads data from API, filters work, pagination works
  • Project detail page shows full metadata + credit history
  • Credits page loads and filters correctly
  • Consistent styling with existing carbon-atlas pages (shadcn/ui, Tailwind)
  • Responsive on mobile
  • Loading states and error handling

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions