Enhancements

2026-06-25 11:19:08 +02:00
parent 8804d21c32
commit 9343657d20
62 changed files with 10210 additions and 976 deletions
@@ -0,0 +1,206 @@
+# 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.