SUST/sustApp/admin-frontend

SUST Admin Frontend

A modern, responsive Bootstrap-based admin dashboard for managing SUST members and payments.

Features

📊 Dashboard Overview

• Quick statistics on active, inactive, and deactivated members
• Payment and member count summary
• Quick navigation to management sections

👥 Member Management

• View all members in a searchable, sortable table
• Filter by name or email
• View detailed member information with modal
• Add new members with validation
• See member activity and payment history

💳 Payment Management

• View all payment records
• Associate payments with members
• Search and filter payments by member name
• Track payment dates and amounts

Project Structure

admin-frontend/
├── src/
│   ├── components/          # React components
│   │   ├── Navbar.tsx       # Navigation bar
│   │   ├── StatsCard.tsx    # Statistics dashboard cards
│   │   ├── MembersTable.tsx # Members list table
│   │   ├── MemberModal.tsx  # Member details modal
│   │   ├── PaymentsTable.tsx # Payments list
│   │   └── AddMemberForm.tsx # New member form
│   ├── api.ts               # API client helper functions
│   ├── types.ts             # TypeScript type definitions
│   ├── App.tsx              # Main application component
│   ├── App.css              # Custom styles
│   └── main.tsx             # Entry point
├── index.html               # HTML template
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Dependencies

Installation

1. Navigate to the admin-frontend directory:

cd sustApp/admin-frontend

2. Install dependencies:

npm install

Development

Start the development server:

npm run dev

The frontend will be available at http://localhost:5174

Important: Make sure your FastAPI backend is running on http://localhost:8000

Build for Production

npm run build

Output files will be in the dist/ directory.

API Integration

The frontend connects to these FastAPI endpoints:

Members

• GET /members/ - List members
• GET /member/{member_id} - Get member details
• POST /members/ - Create single member
• POST /fullmembers/ - Create multiple members

Payments

• GET /payments/ - List all payments
• GET /payments/{member_id} - Get member payments

Stats

• GET /activememberscount/ - Count active members
• GET /inactivememberscount/ - Count inactive members
• GET /deactivatedmemberscount/ - Count deactivated members

Configuration

To change the API base URL, edit src/api.ts:

const API_BASE = 'http://localhost:8000'

To change the development server port, edit vite.config.ts:

server: {
  port: 5174,
  ...
}

Technologies Used

• React 19 - UI framework
• TypeScript - Type safety
• Bootstrap 5 - CSS framework
• Axios - HTTP client
• Vite - Build tool

Features Overview

Dashboard Tab

• Real-time statistics cards
• Active/inactive/deactivated member counts
• Quick links to management sections

Members Tab

• Search/Filter: Find members by name or email
• View Details: Click "View" to see full member information
  • Contact details
  • Address information
  • Status and active/inactive status
  • Recent payment history
• Add Member: Create new members with comprehensive form
  • Required fields: First name, surname, street, city
  • Optional: Email, spouse name, ZIP code, etc.

Payments Tab

• Complete Payment History: View all payments with member associations
• Search: Filter by member name
• Details: Payment date, year, and amount

Responsive Design

The interface is fully responsive and works on:

• Desktop (1024px+)
• Tablet (768px-1024px)
• Mobile (< 768px)

Styling

Custom Bootstrap styles are in src/App.css with:

• Dark navbar
• Custom tab navigation
• Hover effects on buttons
• Modal styling
• Mobile-responsive adjustments

Error Handling

The frontend includes error handling for:

• API connection failures
• Missing data
• Form validation errors
• Loading states

Future Enhancements

• Edit member functionality
• Delete member confirmation
• Payment record management
• Member state transitions
• Bulk member import
• Export reports
• Authentication/authorization
• Member notes/comments
• Email notifications
• Advanced filtering and sorting

Troubleshooting

API Connection Issues

If you see "Failed to load data" errors:

1. Verify FastAPI backend is running on port 8000
2. Check CORS configuration in sustApp/main.py
3. Check browser console for specific errors

Build Issues

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Port Already in Use

# Change port in vite.config.ts or
npm run dev -- --port 5175

Support

For issues or questions, check the main SUST project documentation.