# 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:
```bash
cd sustApp/admin-frontend
```

2. Install dependencies:
```bash
npm install
```

## Development

Start the development server:
```bash
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

```bash
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`:

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

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

```typescript
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
```bash
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
```

### Port Already in Use
```bash
# Change port in vite.config.ts or
npm run dev -- --port 5175
```

## Support

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