Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage user permissions and route accessibility within a system. Its main purpose is to allow users to export permission matrices and route lists, implement filtering and searching functionalities, and provide detailed explanations of permissions through a user-friendly interface.

## CORE FEATURES
1. **Export Functionality**: Users can export the permission matrix and route lists by profile in CSV and PDF formats for easy sharing with team members.
2. **Filtering and Search**: A comprehensive filtering and search feature is available in the permissions table, enabling users to quickly find specific routes and actions associated with a particular profile.
3. **Interactive Permission Matrix**: Clicking on any cell (✓/✗) in the permission matrix opens a drawer that provides details about the permission, required permissions, and examples of access scenarios.
4. **Categorized Routes**: The "Routes by Profile" section is organized into categories (Dashboard, Scanner, Guests, Events, Profile) for faster navigation and improved user experience.
5. **Responsive Design**: The application will be fully responsive to ensure usability across different devices and screen sizes.

## 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 consist of a sidebar for navigation, a main content area for displaying the permission matrix and route lists, and modals/drawers for detailed information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand (as needed)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Route Structure**: Define routes for the main application pages (e.g., permission matrix, routes by profile).
3. **Build Components**: Develop reusable UI components for the permission matrix, filters, buttons, and drawers.
4. **Implement Export Functionality**: Integrate CSV and PDF export capabilities using libraries like `papaparse` for CSV and `jspdf` for PDF generation.
5. **Add Filtering and Searching**: Implement filtering and searching logic for the permissions table using React state and effect hooks.
6. **Create Interactive Matrix**: Build the interactive permission matrix component, linking each cell to the corresponding drawer for detailed explanations.
7. **Organize Routes**: Implement the categorization of the routes by profile in the designated section.
8. **Testing and Debugging**: Conduct thorough testing to ensure all functionalities work as expected and fix any bugs.
9. **Responsive Design Review**: Ensure the application is responsive and user-friendly across different devices.

## USER EXPERIENCE
Users will have a seamless experience navigating through the application. They can easily access the permission matrix, apply filters to find specific information, and quickly export data for team collaboration. The interactive elements, such as clicking on the matrix cells, will provide instant feedback with detailed explanations, enhancing the overall usability and efficiency of the application.