Skip to content

feat: build group detail page at /groups/[id] (Closes #9) - #48

Open
ney9320 wants to merge 1 commit into
coopfinance:mainfrom
ney9320:feat/issue-9-group-detail-page
Open

feat: build group detail page at /groups/[id] (Closes #9)#48
ney9320 wants to merge 1 commit into
coopfinance:mainfrom
ney9320:feat/issue-9-group-detail-page

Conversation

@ney9320

@ney9320 ney9320 commented Jul 11, 2026

Copy link
Copy Markdown

/claim

Summary

Create src/app/groups/[id]/page.tsx — the individual group detail page that was previously a 404 from the groups list "View Group" link.

Closes #9

What's implemented

Header

  • Group name, description, Active/Inactive status badge
  • Admin address with copy-to-clipboard button (shortened display)
  • "Add Member" button visible only to the group admin (wallet check)

Stats Row (4 StatCards)

  • Chain Balance — live USDC balance from Stellar Horizon RPC (30s refresh)
  • Members — count from API
  • Active Loans — count of loans with status "Approved"
  • Total Contributions — sum from contribution history

4 Tabs (pill-style, following loans page pattern)

  • Members — table: address, display name, total contributed, joined date
  • Contributions — table: member, amount, period, tx hash (linked to stellar.expert/testnet)
  • Loans — reuses existing LoanCard component, filtered to group via API
  • Governance — reuses existing ProposalCard component, filtered via API

Edge cases

  • 404: calls notFound() when API returns 404
  • Loading: skeleton UI with animated placeholders
  • Empty states: contextual messages for each tab
  • Mobile: responsive columns (hidden on small screens)

API functions added to src/lib/api.ts

  • fetchGroup(id), fetchGroupMembers(id), fetchGroupContributions(id)
  • fetchGroupLoans(id), fetchGroupProposals(id)

Verification

  • tsc --noEmit: 0 errors on our code
  • Pre-existing build issue in analytics/page.tsx is unrelated to this PR

Create src/app/groups/[id]/page.tsx with:

Header — group name, description, status badge, admin address with
  copy-to-clipboard button, and 'Add Member' button (admin only).

Stats Row — 4 StatCards: on-chain USDC balance (live from Stellar
  Horizon), member count, active loans, total contributions.

4 Tabs:
  - Members: table with address, display name, total contributed,
    relative join date
  - Contributions: table with member, amount, period, tx hash
    (linked to stellar.expert/testnet)
  - Loans: reuses LoanCard, filtered to current group via API
  - Governance: reuses ProposalCard, filtered via API

Edge cases handled: 404 (notFound), loading skeleton, empty states,
  mobile-responsive (hidden columns on small screens).

Data fetching via React Query from /api/groups/:id endpoints.
Types added: fetchGroup, fetchGroupMembers, fetchGroupContributions,
  fetchGroupLoans, fetchGroupProposals in src/lib/api.ts
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.

[Frontend] Build individual group detail page at /groups/[id]

1 participant