feat: implement admin panel for group management

[nifanpinc]

Summary

Implements the admin panel for group management within the group detail page, addressing Issue #38.

Changes

New File: src/components/AdminPanel.tsx

• Admin-only panel (renders nothing for non-admin users)
• Start Group button (visible when status is Forming)
• Pause/Resume toggle (visible when status is Active or Paused)
• Remove Member with member selection modal
• Transfer Admin with member selection modal
• Emergency Withdraw with confirmation dialog (type "WITHDRAW" to confirm)
• Error/success message banners with dismiss buttons
• Loading states for all async operations

Modified: src/app/groups/[id]/page.tsx

• Integrated AdminPanel component in the sidebar
• Added refresh callback for post-action data updates

Acceptance Criteria Checklist

• Show admin controls only when connected wallet matches group admin
• Start group button (visible when status is Forming)
• Pause/Resume toggle (visible when status is Active/Paused)
• Transfer admin functionality with address input
• Emergency withdraw button with confirmation dialog

Technical Details

• Uses execAction helper to DRY transaction execution logic
• Modal-based UX for destructive actions (remove member, transfer admin, emergency withdraw)
• Emergency withdraw requires typing "WITHDRAW" as safety confirmation
• All buttons show loading states and disable during transactions
• Responsive design with Tailwind CSS

Closes #38

[nifanpinc]

Code Review Summary

Status: Request Changes

Issues Found:

1. Component too large: 273 lines for single component - needs refactoring
2. DRY violations: execAction callback pattern repeated 5 times
3. Modal JSX duplication: Remove/Transfer modals share 80% similar structure

Suggested Changes:

• Extract useAdminActions hook
• Create AdminModal component for member selection
• Break into: AdminActions + AdminModals + AdminPanel

Please refactor to keep components under 150 lines.

[nifanpinc]

Hi,

I've taken a look at the AdminPanel component and noticed it's grown quite large at 273 lines. Here's a refactoring suggestion that splits it into smaller, more focused parts:

Suggested structure:
src/ ????? hooks/useAdminActions.ts ????? components/AdminModals.tsx ????? components/AdminActions.tsx ????? components/AdminPanel.tsx (cleaned up ~80 lines)

The main changes:

1. useAdminActions hook - Extracts all the transaction logic (start/pause/remove/transfer/withdraw) into one reusable place. This removes the repeated execAction pattern.

2. AdminModals component - Handles the member selection and confirmation dialogs in one place, removing the duplication between remove/transfer/withdraw modals.

3. AdminActions component - Uses a config array to render the action buttons, makes it easier to add/remove actions later.

4. AdminPanel - Becomes just a thin wrapper that checks admin permissions and renders the sub-components.

Benefits:

• Each file does one thing well
• Easier to test individual pieces
• Can reuse useAdminActions in other places if needed
• AdminPanel goes from 273 ??~80 lines

Can send a PR with these changes if interested.

---