Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive web application designed as a Progressive Web App (PWA) for managing clinic operations. It allows authorized users to access various modules while providing patients with a simplified front page akin to Linktree, ensuring seamless navigation and information access. The application prioritizes security and user experience, enabling administrative tasks with ease.

## CORE FEATURES
1. **Main Dashboard**: Displays key performance indicators (KPIs) such as patient count, attendance, critical inventory levels, and open issues, along with an adjustable notification bar.
2. **Notifications System**: Includes a customizable notification bar and a popup feature for important alerts (e.g., doctor absences) that supports images and links.
3. **Bilingual Support**: Fully supports Arabic (RTL) and English (LTR) layouts, allowing users to switch languages as needed.
4. **Patient Front Page**: A professional Linktree-style page for patients showcasing specialties, doctor schedules, and contact links, with no access to administrative features.
5. **Internal Communication Channels**: Dedicated channels for medical and administrative teams with instant notifications and Slack integration for team updates.
6. **Inventory Management**: Tracks medical supplies with visual alerts for critical stock levels and allows real-time updates and reporting and near to expire date alert.

## 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 incorporate a sidebar for navigation, a top notification bar, and a content area for displaying dashboards and reports, ensuring a responsive design suitable for both desktop and mobile devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API or Redux if needed for handling global state.

## IMPLEMENTATION STEPS
1. Set up the project with React and TypeScript, ensuring all dependencies for Tailwind CSS and shadcn/ui are installed.
2. Create a Supabase backend to manage user authentication, notifications, and data storage for dashboard statistics.
3. Implement the main dashboard component with KPI cards and the adjustable notification bar.
4. Develop the notifications system including popup alerts and integrate it with the main dashboard.
5. Build the patient front page using Linktree design principles, ensuring limited access to administrative features.
6. Create the internal communication system with designated channels and Slack integration for notifications.
7. Develop the inventory management module with real-time stock tracking and alert features.
8. Test the application for responsiveness across devices and ensure that security measures are in place to protect against vulnerabilities.
9. Deploy the application following best practices for PWAs, ensuring it is installable on mobile devices.

## USER EXPERIENCE
The application provides a streamlined user experience where authorized users can easily navigate between different modules. Patients will interact primarily with the front page, accessing necessary information without any confusion. The dashboard will allow staff to monitor daily operations efficiently, and the notification system will ensure timely updates on critical issues. All features will be designed to be intuitive, with clear calls-to-action and accessible layouts.