Admin Panel Frontend Development Prompt

Use this document when building the FishingLog admin panel web application.

Project Overview

FishingLog Admin Panel is a comprehensive administrative interface for managing the FishingLog platform. It provides tools for user management, content moderation, payment processing, analytics, and system configuration.

Backend API

Base URL: https://api.fishinglog.com/api/admin Authentication: AWS Cognito JWT Bearer tokens (Admin/Owner roles only) User Pool ID: us-east-2_TZtGx1T3X Client ID: 6i1opt39o2n5h5ihq471l1ev07

Authentication & Authorization

Admin endpoints require UserRole.Admin or UserRole.Owner
Owner-only endpoints require UserRole.Owner
Permission-based endpoints check specific permissions
Token must be included: Authorization: Bearer {token}

Recommended Tech Stack

Framework

React (v18+) with TypeScript
Next.js (recommended) or Vite + React Router
TamaGUI (Pro version) - UI component library
Tailwind CSS - Additional styling

State Management

TanStack Query (React Query) - Server state
Zustand - Client state
React Context - Auth state

Forms & Validation

react-hook-form - Form management
zod - Schema validation
TamaGUI Form Components - Form UI components

Charts & Visualization

recharts or Chart.js - Charts
TamaGUI Chart Components - Chart UI components

Data Tables

TamaGUI Table or TanStack Table - Advanced tables
Sorting, filtering, pagination built-in

API Client

axios with interceptors
Auto token refresh
Error handling

Project Structure

src/
├── app/                      # Next.js app directory
│   ├── (auth)/
│   ├── admin/
│   │   ├── dashboard/
│   │   ├── users/
│   │   ├── moderation/
│   │   ├── circles/
│   │   └── ...
│   └── api/
├── components/
│   ├── admin/               # Admin-specific components
│   │   ├── ModerationQueue/
│   │   ├── UserManagement/
│   │   └── ...
│   ├── charts/              # Chart components
│   └── common/              # Shared components
├── lib/
│   ├── api/
│   │   ├── client.ts
│   │   └── endpoints/
│   │       ├── admin.ts
│   │       ├── moderation.ts
│   │       ├── circles.ts
│   │       └── ...
│   └── auth/
├── hooks/
│   ├── useAdmin.ts
│   ├── useModeration.ts
│   ├── useCircles.ts
│   └── ...
├── store/
│   ├── authStore.ts
│   └── ...
└── types/
    └── admin.ts

Core Features & Implementation

1. Dashboard

Page: /admin/dashboard

Features:

System overview statistics
User growth charts
Revenue analytics
Content trends
Popular content/species
Geographic data
Recent activity feed

Key Endpoints:

GET /api/admin/dashboard/overview - System stats
GET /api/admin/dashboard/analytics/user-growth - User growth
GET /api/admin/dashboard/analytics/revenue - Revenue
GET /api/admin/dashboard/analytics/popular - Popular content
GET /api/admin/dashboard/analytics/geographic - Geographic data

Components:

Stats cards (users, posts, revenue, etc.)
Line charts (user growth, revenue)
Bar charts (popular content)
Map visualization (geographic data)
Activity timeline

2. User Management

Page: /admin/users

Features:

List all users with filtering/search
View user details
Change user roles
Update subscription tiers
View user activity timeline
Ban/unban users
Deactivate users

Key Endpoints:

GET /api/admin/users - List users
GET /api/admin/users/{id} - User details
PUT /api/admin/users/{id}/role - Change role
PUT /api/admin/users/{id}/subscription - Update subscription
GET /api/admin/users/{id}/activity-timeline - Activity timeline
POST /api/admin/user-bans - Ban user
POST /api/admin/user-bans/{id}/lift - Unban user

Components:

User table with filters
User detail modal/page
Role change form
Activity timeline component
Ban form

3. Content Moderation

Page: /admin/moderation

Features:

Pending review queue
Approve/reject content
View AI risk scores
Override AI decisions
Moderation statistics
Moderation settings

Key Endpoints:

GET /api/admin/moderation/pending - Pending items
POST /api/admin/moderation/post/{id}/approve - Approve post
POST /api/admin/moderation/post/{id}/reject - Reject post
GET /api/admin/moderation/statistics - Statistics
GET /api/admin/moderation-settings - Settings
PUT /api/admin/moderation-settings - Update settings
POST /api/admin/moderation-settings/test - Test moderation

Components:

Moderation queue table
Content preview card
Risk score indicator
Category tags
Approve/reject buttons
Settings form
Test moderation form

4. Payment Management

Page: /admin/payments

Features:

List all payments
Filter by type (tournament, booking, advertiser)
View failed payments
Process refunds via Stripe API
Payment statistics
Export payment data
View Stripe payment details

Key Endpoints:

GET /api/admin/payments - List payments
GET /api/admin/payments/failed - Failed payments
GET /api/admin/payments/statistics - Statistics
POST /api/admin/payments/tournament-registration/{id}/refund - Process refund (Stripe API)

Stripe Integration:

Real refund processing through Stripe API
Refund amount validation
Refund reason tracking
Audit logging with Stripe refund IDs
See stripe-integration.md for implementation details

Components:

Payment table with Stripe status
Payment detail modal (shows Stripe payment intent ID, charge ID)
Refund form (amount, reason)
Payment statistics cards
Export button
Stripe payment link (open in Stripe Dashboard)

5. User Reports

Page: /admin/reports

Features:

List user reports/complaints
Review reports
Resolve/dismiss reports
Link reports to bans
Report statistics

Key Endpoints:

GET /api/admin/reports - List reports
GET /api/admin/reports/{id} - Report details
POST /api/admin/reports/{id}/resolve - Resolve report
POST /api/admin/reports/{id}/dismiss - Dismiss report
POST /api/admin/reports/{id}/mark-duplicate - Mark duplicate

Components:

Reports table
Report detail view
Action buttons (resolve, dismiss, ban)
Report statistics

6. Circle Management

Page: /admin/circles

Features:

List all circles with filtering (search, public/private, requires approval)
View circle details (members, applications, rules)
Update circle settings (admin override)
Delete circles (admin override)
Transfer circle ownership
View circle statistics
Monitor circle activity

Key Endpoints:

GET /api/admin/circles - List circles (with filters: search, isPublic, requiresApproval, pagination)
GET /api/admin/circles/{id} - Get circle details (includes members, applications)
PUT /api/admin/circles/{id} - Update circle settings (admin override)
DELETE /api/admin/circles/{id} - Delete circle (admin override, prevents if has content)
POST /api/admin/circles/{id}/transfer-ownership - Transfer ownership to another user
GET /api/admin/circles/statistics - Get circle statistics

Permissions Required:

Circles.View - View circles
Circles.Edit - Edit circles, transfer ownership
Circles.Delete - Delete circles
Circles.Moderate - Moderate circle content

Circle Data Structure:

interface CircleSummary {
  id: string;
  name: string;
  description?: string;
  ownerUserId: string;
  ownerUserName: string;
  isPublic: boolean;
  requiresApproval: boolean;
  memberCount: number;
  postCount: number;
  logEntryCount: number;
  pendingApplicationCount: number;
  createdAt: string;
  updatedAt: string;
}

interface CircleDetail {
  id: string;
  name: string;
  description?: string;
  color?: string;
  icon?: string;
  rules?: string; // JSON string
  enforceRules: boolean;
  autoShare: boolean;
  isPublic: boolean;
  requiresApproval: boolean;
  ownerUserId: string;
  ownerUserName: string;
  memberCount: number;
  postCount: number;
  logEntryCount: number;
  pendingApplicationCount: number;
  createdAt: string;
  updatedAt: string;
  members: CircleMemberSummary[];
  pendingApplications: CircleApplicationSummary[];
}

interface CircleMemberSummary {
  userId: string;
  userName: string;
  role: 'Member' | 'Moderator' | 'Admin' | 'Owner';
  joinedAt: string;
}

interface CircleApplicationSummary {
  id: number;
  userId: string;
  userName: string;
  message?: string;
  appliedAt: string;
}

interface CircleStatistics {
  totalCircles: number;
  publicCircles: number;
  privateCircles: number;
  circlesWithRules: number;
  totalMembers: number;
  pendingApplications: number;
  averageMembersPerCircle: number;
}

Components:

Circle table with filters (search, public/private, approval required)
Circle detail modal/page
Circle settings form (admin override)
Member list with roles
Pending applications list
Transfer ownership form
Circle statistics cards
Delete confirmation modal (with content check warning)

Implementation Notes:

Filtering: Support search by name/description, filter by public/private, requires approval
Admin Override: Admins can update any circle settings regardless of ownership
Deletion Protection: Cannot delete circles with active content (posts/log entries)
Ownership Transfer: Transfer ownership to any user (they must be a member first)
Statistics: Show overview of all circles (total, public/private, members, etc.)
Audit Logging: All admin actions are logged automatically

7. Tournament Management

Page: /admin/tournaments

Features:

Approve/reject tournaments
View pending tournaments
Monitor high-value tournaments
View financial summaries
Suspend tournaments

Key Endpoints:

GET /api/admin/tournaments/pending-approval - Pending tournaments
GET /api/admin/tournaments/{id} - Tournament details
POST /api/admin/tournaments/{id}/approve - Approve
POST /api/admin/tournaments/{id}/reject - Reject
GET /api/admin/tournaments/high-value - High-value tournaments
GET /api/admin/tournaments/{id}/financial-summary - Financial summary

Components:

Tournament table
Tournament detail view
Approval workflow
Financial summary card

8. System Settings

Page: /admin/settings (Owner only)

Features:

Manage system settings
Configure AI moderation
Manage site announcements
View audit logs
Manage employees and permissions

Key Endpoints:

GET /api/admin/system-settings - List settings
PUT /api/admin/system-settings/{key} - Update setting
GET /api/admin/moderation-settings - Moderation settings
PUT /api/admin/moderation-settings - Update moderation
GET /api/admin/announcements - List announcements
POST /api/admin/announcements - Create announcement
GET /api/admin/audit-logs - Audit logs
GET /api/admin/employees - List employees

Components:

Settings form
Moderation settings form
Announcement editor
Audit log table
Employee management table
Permission management

10. Analytics & Reporting

Page: /admin/analytics

Features:

User growth analytics
Content trends
Revenue analytics
Geographic analytics
Popular content
Custom date ranges
Export reports

Key Endpoints:

GET /api/admin/dashboard/analytics/user-growth - User growth
GET /api/admin/dashboard/analytics/content-trends - Content trends
GET /api/admin/dashboard/analytics/revenue - Revenue
GET /api/admin/dashboard/analytics/geographic - Geographic
GET /api/admin/dashboard/analytics/popular - Popular content

Components:

Chart components
Date range picker
Export buttons
Filter controls

UI/UX Guidelines

Design System

Layout:

Sidebar navigation (collapsible)
Top bar with user info
Main content area
Breadcrumbs for navigation

Colors:

Primary: Admin blue
Success: Green (approved, success)
Warning: Yellow (pending, review)
Error: Red (rejected, errors)
Info: Blue (information)

Components:

Data tables with sorting/filtering
Cards for statistics
Charts for analytics
Modals for actions
Forms with validation
Toast notifications

Key UI Patterns

Tables:

Sortable columns
Filterable/searchable
Pagination
Row actions (view, edit, delete)
Bulk actions (select multiple)

Forms:

Clear labels
Validation feedback
Required field indicators
Help text
Submit/cancel buttons

Modals:

Clear titles
Action buttons (primary/secondary)
Close button
Loading states

Charts:

Clear labels
Legends
Tooltips
Responsive sizing
Export options

API Integration Patterns

API Client Setup

// lib/api/client.ts
import axios from 'axios';
import { getAuthToken } from '@/lib/auth';

export const adminApi = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_URL}/api/admin`,
});

adminApi.interceptors.request.use(async (config) => {
  const token = await getAuthToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

adminApi.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Redirect to login
      window.location.href = '/admin/login';
    } else if (error.response?.status === 403) {
      // Show permission denied message
      showError('You do not have permission to perform this action');
    }
    return Promise.reject(error);
  }
);

React Query Hooks

// hooks/useModeration.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { moderationApi } from '@/lib/api/endpoints/moderation';

export const usePendingModeration = (filters?: Filters) => {
  return useQuery({
    queryKey: ['moderation', 'pending', filters],
    queryFn: () => moderationApi.getPending(filters),
    refetchInterval: 30000, // Refresh every 30 seconds
  });
};

export const useApproveContent = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ contentType, id, notes }: ApproveParams) =>
      moderationApi.approve(contentType, id, notes),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['moderation'] });
    },
  });
};

// hooks/useCircles.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { circlesApi } from '@/lib/api/endpoints/circles';

export const useCircles = (filters?: CircleFilters) => {
  return useQuery({
    queryKey: ['admin', 'circles', filters],
    queryFn: () => circlesApi.getCircles(filters),
  });
};

export const useCircleDetail = (id: string) => {
  return useQuery({
    queryKey: ['admin', 'circles', id],
    queryFn: () => circlesApi.getCircle(id),
  });
};

export const useCircleStatistics = () => {
  return useQuery({
    queryKey: ['admin', 'circles', 'statistics'],
    queryFn: () => circlesApi.getStatistics(),
  });
};

export const useUpdateCircle = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ id, data }: { id: string; data: UpdateCircleRequest }) =>
      circlesApi.updateCircle(id, data),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'circles'] });
      queryClient.invalidateQueries({ queryKey: ['admin', 'circles', variables.id] });
    },
  });
};

export const useTransferOwnership = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: ({ id, newOwnerId }: { id: string; newOwnerId: string }) =>
      circlesApi.transferOwnership(id, newOwnerId),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'circles'] });
      queryClient.invalidateQueries({ queryKey: ['admin', 'circles', variables.id] });
    },
  });
};

export const useDeleteCircle = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (id: string) => circlesApi.deleteCircle(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'circles'] });
    },
  });
};

Key Implementation Details

Real-Time Updates (SignalR)

SignalR is implemented for real-time admin updates. Use SignalR instead of polling:

Setup:

// lib/signalr/adminHub.ts
import * as signalR from '@microsoft/signalr';

const connection = new signalR.HubConnectionBuilder()
  .withUrl(`${API_URL}/hubs/admin`, {
    accessTokenFactory: () => getAuthToken(),
  })
  .build();

connection.on('NewModerationItem', (item) => {
  // Update moderation queue
});

connection.on('NewReport', (report) => {
  // Update reports list
});

await connection.start();

Available Events:

NewModerationItem - New content needs moderation
NewReport - New report created
PaymentStatusChanged - Payment status updated

See docs/infrastructure/real-time-updates-strategy.md for complete details.

Bulk Operations

Implement bulk actions for:

Approve/reject multiple items
Ban multiple users
Process multiple refunds

Export Functionality

Add export for:

User lists (CSV)
Payment data (CSV/Excel)
Analytics reports (PDF/Excel)
Audit logs (CSV)

Permission Handling

Check user role/permissions
Hide/disable features based on permissions
Show permission denied messages
Redirect unauthorized users

Security Considerations

Role-based Access: Check roles before rendering
Permission Checks: Verify permissions client-side and server-side
Secure Storage: Don't store sensitive data in localStorage
HTTPS Only: Always use HTTPS
Token Refresh: Handle token expiration gracefully

Performance Optimization

Pagination: Use pagination for large lists
Virtual Scrolling: For very long tables
Lazy Loading: Load data as needed
Caching: Cache API responses appropriately
Debouncing: For search inputs

Testing

Unit Tests: Components and utilities
Integration Tests: API integration
E2E Tests: Critical admin workflows
Accessibility Tests: WCAG compliance

Deployment

Hosting: Vercel, Netlify, or dedicated server
Environment Variables: Separate for admin panel
Access Control: Restrict access to admin domain/IP
Monitoring: Error tracking and analytics

Stripe Payment Integration

See Stripe Integration Guide for:

Payment processing implementation
Refund processing via Stripe API
Payment status tracking
Error handling

Key Endpoints:

POST /api/admin/payments/tournament-registration/{id}/refund - Process refunds
GET /api/admin/payments - List all payments
GET /api/admin/payments/statistics - Payment statistics

Feature Flags Management

See Feature Flags Guide for:

Feature flag management UI
Environment-specific toggles
Rollout percentage controls
User targeting for beta testing

Key Endpoints:

GET /api/admin/feature-flags - List all flags
PUT /api/admin/feature-flags/{key} - Update flag
GET /api/admin/feature-flags/current-environment - Current environment status

Additional Resources

See ADMIN_DOCUMENTATION.md for complete admin API documentation
See ADMIN_PANEL_DESIGN.md for design details
See AI_MODERATION_SETUP.md for AI moderation setup
Backend uses Swagger/OpenAPI for API docs
Stripe Integration - Payment processing guide
Feature Flags - Feature flag implementation guide
Admin Panel Build Prompt - Complete build guide for this admin panel

Key Considerations

Real-time Updates: How often to refresh data?
Bulk Operations: Which operations need bulk support?
Export Formats: What formats are needed?
Notifications: How to notify admins of new items?
Audit Trail: Show admin actions clearly
Circle Management: Monitor circle growth, moderate circle content, handle ownership transfers

Project Overview​

Backend API​

Authentication & Authorization​

Recommended Tech Stack​

Framework​

State Management​

Forms & Validation​

Charts & Visualization​

Data Tables​

API Client​

Project Structure​

Core Features & Implementation​

1. Dashboard​

2. User Management​

3. Content Moderation​

4. Payment Management​

5. User Reports​

6. Circle Management​

7. Tournament Management​

8. System Settings​

10. Analytics & Reporting​

UI/UX Guidelines​

Design System​

Key UI Patterns​

API Integration Patterns​

API Client Setup​

React Query Hooks​

Key Implementation Details​

Real-Time Updates (SignalR)​

Bulk Operations​

Export Functionality​

Permission Handling​

Security Considerations​

Performance Optimization​

Testing​

Deployment​

Stripe Payment Integration​

Feature Flags Management​

Additional Resources​

Key Considerations​

Project Overview

Backend API

Authentication & Authorization

Recommended Tech Stack

Framework

State Management

Forms & Validation

Charts & Visualization

Data Tables

API Client

Project Structure

Core Features & Implementation

1. Dashboard

2. User Management

3. Content Moderation

4. Payment Management

5. User Reports

6. Circle Management

7. Tournament Management

8. System Settings

10. Analytics & Reporting

UI/UX Guidelines

Design System

Key UI Patterns

API Integration Patterns

API Client Setup

React Query Hooks

Key Implementation Details

Real-Time Updates (SignalR)

Bulk Operations

Export Functionality

Permission Handling

Security Considerations

Performance Optimization

Testing

Deployment

Stripe Payment Integration

Feature Flags Management

Additional Resources

Key Considerations