✅ Alcance funcional 📊 Dashboard KPIs en tiempo real: Alumnos activos, deudores, ingresos del mes, egresos y resultado neto Gráficos de ingresos...
Generated Prompt
## APPLICATION OVERVIEW This application is a web-based dashboard designed for managing gym operations efficiently. It allows administrators to monitor real-time KPIs, manage students, track expenses, and oversee billing. The goal is to provide a streamlined experience for gym management with easy data handling and clear visualizations. ## CORE FEATURES - **Real-Time KPIs Dashboard**: Displays active students, debtors, monthly income, expenses, and net results, along with graphical representations of income vs. expenses, fee distribution, and daily occupancy. - **Student Management (CRUD)**: Full functionality for adding, editing, and deleting student records, including personal details and configurable attendance frequency, with options to send direct messages via WhatsApp. - **Weekly Calendar with Slots**: A daily view from Monday to Friday, featuring configurable maximum slots per session, real-time occupancy visualizations using a color-coded system (available, partial, nearly full, full), and quick enrollment options. - **Billing and Collections System**: Mass generation of monthly invoices with differentiated pricing based on attendance frequency. It includes status tracking for payments (Pending, Debtor, Paid) and options for total or partial payments with export capabilities to CSV. - **Expense Management**: Comprehensive CRUD functionality for expenses across various categories (Rent, Services, Maintenance, Supplies, Others), including monthly visualizations and summaries. - **Global Configuration**: Editable gym name and configurable maximum slots per session to tailor the application to specific business needs. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Emphasizes a clean, simple design with ample white space, a minimal color palette, and a strong focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern look. - **Layout**: The layout consists of a top navigation bar for easy access to different sections, a sidebar for quick feature navigation, and a main content area that displays data visually with charts and tables. Each feature section should have a clear header and adequate spacing for a clean appearance. - **Typography**: Use a sans-serif font for a modern and legible look. Headings should be bold and larger for hierarchy, while body text should be regular weight for readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for building a robust, type-safe web application. - **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design changes and a responsive layout. - **UI Components**: Use shadcn/ui for consistent UI components that align with the minimalist design. - **State Management**: Consider using React Context or Redux for managing global state across the application. ## IMPLEMENTATION STEPS 1. **Set up the React project** with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create the folder structure** for components, pages, and styles to maintain organization. 3. **Develop the Dashboard component**, integrating real-time data visuals using chart libraries (e.g., Chart.js). 4. **Implement Student Management functionalities** including forms for adding/editing student data, and integrate WhatsApp messaging. 5. **Build the Weekly Calendar component**, ensuring the color-coded occupancy feature works seamlessly with user interactions for quick student enrollment. 6. **Create the Billing and Collections module**, incorporating the ability to generate invoices and track payments. 7. **Develop the Expense Management feature**, ensuring a user-friendly interface for categorizing and visualizing expenses. 8. **Set up Global Configuration settings** for editing gym information and managing session slots. 9. **Test the entire application** for responsiveness and usability across various devices. 10. **Deploy the application** on a suitable hosting platform and perform final testing. ## USER EXPERIENCE Users will have a smooth onboarding experience with a clear dashboard overview upon login. They can easily navigate through student management, billing, and expenses using the sidebar. Each feature allows for intuitive interactions, such as quick forms for adding students or generating invoices, with real-time feedback on actions taken. The minimalist design ensures that users can focus on essential tasks without distractions, enhancing overall efficiency in gym management.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
