GymFlow - Gym Management Attendance PWA

GymFlow is a responsive gym management dashboard built with React, Vite, TypeScript, Firebase Authentication, and Firestore. It helps gym owners manage member records, membership plans, payments, attendance check-ins, member retention status, and business reports from a mobile-friendly web app. The app includes Google sign-in, real-time Firestore data syncing, offline persistence support, PWA installation prompts, member filtering/search, payment tracking, attendance heatmaps, retention analytics, WhatsApp message templates, and CSV exports.

Features

• Google sign-in with Firebase Authentication
• Firestore database integration with real-time listeners
• Member management: add, edit, delete, view member profile
• Member fields for phone, plan, register number, gender, age, address, height, weight, interest area, photo, join date, validity dates, status, and last engagement
• Auto-generated member registration numbers using gym prefix
• Duplicate phone number validation
• Membership plan management with amount, duration, description, edit, and delete
• Payment recording and payment history
• Initial payment capture during member onboarding
• Outstanding due calculation based on plan amount and payments
• Attendance tracking with monthly heatmap
• Add/remove member check-ins
• Member visit statistics and most active member summary
• Retention status logic: Active, Expiring Soon, Payment Due, At-Risk, Lost
• Recovery tracking for previously at-risk or lost members
• Dashboard with member, revenue, dues, retention, and activity summaries
• Reports page with revenue trends, member growth, plan popularity, and retention stats
• CSV export for selected members, payment history, and revenue reports
• WhatsApp message links with predefined templates
• Customizable automation message templates in settings
• Command bar search/navigation with keyboard shortcut
• Voice search for members where browser speech recognition is supported
• Responsive desktop sidebar and mobile bottom navigation
• PWA support with install banner and app icons
• Firestore offline persistence and online/offline status indicator
• Toast notifications and confirmation modals
• Firestore security rules included

Requirements

• Node.js: needs confirmation; current local Node v16.20.2 fails Vite build. Use Node 18+ or preferably Node 20+ for Vite 6 compatibility.
• npm
• Firebase project
• Firebase Authentication with Google provider enabled
• Firestore database
• Firestore rules deployment
• Firestore composite indexes may be required for payments and attendance queries using uid plus descending date/timestamp
• Modern browser for PWA/offline features
• WhatsApp installed or WhatsApp Web available for message links

Instructions

1. Install dependencies: npm install
2. Replace firebase-applet-config.json with your own Firebase project configuration.
3. Enable Google Authentication in Firebase Console.
4. Create/enable Firestore database.
5. Deploy or apply the included firestore.rules.
6. Create required Firestore composite indexes if Firebase prompts for them.
7. Run locally: npm run dev
8. Build for production: npm run build
9. Deploy the generated dist folder to your preferred static hosting provider.