Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Vendor Management Hub is a comprehensive web application designed to streamline vendor relationships through features such as a vendor registry, contract expiry alerts, performance scores, and renewal pipelines. The application aims to enhance efficiency in managing vendors and ensure timely renewals and performance evaluations.

## CORE FEATURES
1. **Vendor Registry**: A centralized database where users can add, edit, and manage vendor information, including contact details, services provided, and contract information.
2. **Contract Expiry Alerts**: Automated notifications to remind users of upcoming contract expirations, ensuring timely renewals and negotiations.
3. **Performance Scores**: A scoring system that allows users to evaluate vendor performance based on predefined metrics, helping in decision-making for vendor selection and retention.
4. **Renewal Pipelines**: A visual workflow that tracks the status of renewal processes, allowing users to manage and oversee pending renewals easily.
5. **Dashboard Overview**: A comprehensive dashboard providing an at-a-glance view of vendor performance, contract statuses, and alerts.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography to enhance readability and user experience.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure clarity and comfort during prolonged use.
- **Layout**: A responsive grid layout featuring a sidebar for navigation, a main content area for displaying vendor information and metrics, and a top bar for alerts and user settings.
- **Typography**: Use a sans-serif font such as Inter or Roboto for body text, with a larger size for headings to create a clear hierarchy. Ensure consistent spacing and alignment for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application structure.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design adjustments and consistent styling across components.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible components to enhance design efficiency.
- **State Management**: Use React Context or Redux for managing application state effectively, particularly for user authentication and vendor data management.

## IMPLEMENTATION STEPS
1. **Set Up the Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Project Structure**: Organize directories for components, pages, and styles to maintain clarity.
3. **Build Core Components**: Develop components for the vendor registry, performance scores, alerts, and pipelines.
4. **Implement Routing**: Set up React Router to navigate between different sections of the application.
5. **Integrate State Management**: Establish state management to handle vendor data and alerts using React Context or Redux.
6. **Design the Dashboard**: Create a responsive dashboard layout that displays key metrics and alerts at a glance.
7. **Test Functionality**: Conduct thorough testing to ensure all features work seamlessly and fix any bugs.
8. **Deploy the Application**: Choose a hosting provider and deploy the application, ensuring it's accessible to users.

## USER EXPERIENCE
The application will provide an intuitive user experience with easy navigation through a sidebar menu. Users will receive alerts in real-time for contract expirations. The dashboard will highlight key metrics and performance scores, allowing users to quickly assess vendor statuses. The minimalist design will enhance usability, ensuring that users can focus on essential tasks without distractions. The responsive design will ensure that the application is accessible on both desktop and mobile devices.