Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
SignalFlow is a web application designed to provide users with a streamlined interface for monitoring and acting on intelligence reports. The application features a live dashboard that aggregates critical data, allowing users to navigate easily through different sections while taking immediate action on alerts.

## CORE FEATURES
1. **Single-Page Navigation**: Connect sidebar links to a state manager for seamless navigation between 'Intelligence', 'Watchlist', 'Security', and 'Archive' sections.
2. **Live Dashboard**: Display the most recent intelligence reports from the Supabase intelligence_reports table, highlighting the five latest 'Critical' alerts in a 'Priority Feed'.
3. **Actionable UX**: Each intelligence card includes a 'Take Action' button that opens a sidebar with a pre-generated email or LinkedIn message for quick responses.
4. **OSINT Layer**: Implement a 'Source Trust' badge for each report, showcasing a 'Verified' icon for known news sites.
5. **Search & Filter Functionality**: Enable users to search across titles and summaries, with an added filter for 'Threat Level' (Critical, High, Medium, Low).
6. **Visual Polish**: Refresh the color scheme to a 'Deep Midnight' theme with neon accents, using red for Critical alerts and blue for Low.

## 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 consists of a sidebar for navigation, a top bar for the dashboard title and search, and a central content area displaying the dashboard cards, priority feed, and actionable intelligence reports.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use a single-page state manager (e.g., Zustand or Redux) to manage application state for seamless navigation.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install dependencies including Tailwind CSS and shadcn/ui.
2. **Create Layout**: Develop the main layout with a sidebar, top navigation, and central dashboard area.
3. **Implement State Management**: Set up a state management solution to handle navigation and data state.
4. **Connect to Supabase**: Integrate Supabase to fetch intelligence reports and display them in the dashboard.
5. **Design Components**: Create UI components for intelligence cards, the priority feed, and action buttons, ensuring they adhere to the design specifications.
6. **Add Search and Filter**: Implement functionality for searching and filtering reports based on title, summary, and threat level.
7. **Test and Refine**: Conduct thorough testing for user interactions and flows, ensuring a smooth user experience.

## USER EXPERIENCE
Users will start on the live dashboard, where they can view the most recent intelligence reports and alerts. They can easily navigate through the sidebar to access different sections. Clicking on 'Take Action' will present a sidebar with a pre-generated message, allowing for quick engagement. The search and filter features will enable users to efficiently locate specific reports based on their interests, enhancing their ability to respond to critical information swiftly.