Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to manage user permissions within a system, allowing users to easily navigate, filter, and export data related to profiles and routes. The main purpose is to enhance team collaboration by providing export options for route matrices and permissions, as well as facilitating quick access to detailed permission explanations.

## CORE FEATURES
1. **Export Options**: Allow users to export the matrix and list of routes per profile in CSV and PDF formats for easy sharing with the team.
2. **Filter and Search Functionality**: Implement filters and search capabilities in the permissions table to quickly locate specific routes and actions available to a chosen profile.
3. **Interactive Permission Matrix**: Enable users to click on a cell (✓/✗) in the matrix, which opens a drawer with detailed explanations of permissions, required permissions, and access examples.
4. **Categorized Routes Tab**: Organize the "Routes by Profile" section into categories (Dashboard, Scanner, Guests, Events, Profile) for quicker navigation and usability.

## 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 should consist of a top navigation bar, a main content area displaying the matrix and tables, and a sidebar for quick access to different sections and filters.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed for more complex state management)

## IMPLEMENTATION STEPS
1. Set up the React project with TypeScript and install Tailwind CSS.
2. Create the main components: NavigationBar, PermissionMatrix, PermissionTable, and RoutesByProfile.
3. Implement routing to manage navigation between different sections of the application.
4. Develop the export functionality for CSV and PDF formats, ensuring data from the matrix and table is correctly formatted.
5. Add filter and search functionality to the PermissionTable component.
6. Create the interactive PermissionMatrix component, including the drawer for permission details.
7. Organize the RoutesByProfile section into categories and implement the corresponding UI.
8. Style the application using Tailwind CSS, adhering to the specified design specifications.
9. Test the application across different devices to ensure responsiveness and user experience.

## USER EXPERIENCE
Users will interact with a clean, intuitive interface that allows them to easily navigate through profiles and routes. The search and filter functionalities will enable them to quickly find the information they need. By clicking on the permission matrix, users will access detailed explanations in a user-friendly drawer, enhancing their understanding of permissions. The categorized routes will streamline navigation, making it efficient for users to find relevant information without unnecessary clicks.