207 lines
5.0 KiB
Markdown
207 lines
5.0 KiB
Markdown
# 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.
|