Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage the members of the Hogar de la 3a Edad de Torrecilla en Cameros. It will allow administrators to efficiently track member information, payment statuses, and generate reports, all while providing a user-friendly experience tailored for older adults.

## CORE FEATURES
1. **Member Registration**: Allows the addition of new members with their personal details, including name, date of birth (optional), registration date, and current status.
2. **Status Management**: Enables changing a member's status from active to inactive and vice versa, with a record of the date when the change occurs.
3. **Payment Tracking**: Facilitates marking a member as having paid their annual fee (defaulting to €10) and updates their payment status accordingly.
4. **Outstanding Payments View**: Provides a quick overview of members who have not paid their fees for the current year.
5. **Member Listing and PDF Generation**: Displays a list of all active members for the current year with filtering options based on their payment status, and allows exporting this list as a PDF.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will feature a top navigation bar, a sidebar for quick access to different sections (registration, status management, payment tracking, and reports), and a central content area for displaying forms and data. Each section will be clearly delineated to avoid confusion.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing state, depending on complexity

## IMPLEMENTATION STEPS
1. **Set up the project environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install necessary dependencies**: Add Tailwind CSS, shadcn/ui, and any other required libraries.
3. **Create the main layout**: Build the layout structure with a navigation bar and sidebar, utilizing Tailwind CSS for styling.
4. **Implement routing**: Set up React Router for navigating between different sections of the application (registration, payment management, etc.).
5. **Develop core features**:
   - Create forms for member registration and payment tracking.
   - Implement functionality for changing member status and updating payment records.
   - Build a view for outstanding payments and a listing feature with filtering options.
6. **Integrate PDF generation**: Use a library like jsPDF to enable PDF export functionality for member listings.
7. **Test user interactions**: Ensure all features work seamlessly, especially focusing on usability for older adults.
8. **Deploy the application**: Host the application on a suitable platform like Vercel or Netlify for easy access.

## USER EXPERIENCE
The application will provide a straightforward interface with large buttons and clear labels, minimizing clutter. Members can easily navigate through the main features with intuitive forms and prompts that guide them through each step, ensuring that even users with limited technological experience can effectively use the tool. Quick feedback will be provided for actions like saving data or generating reports, enhancing user confidence and satisfaction.