Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
The "Scailer Business Engine" (SBE) is an enterprise-grade internal CRM and Order Management system designed specifically for a high-end AI & IT consultancy firm. This web application will provide a streamlined interface for managing clients, orders, and services, enhancing operational efficiency and providing insightful data analytics.

# CORE FEATURES
1. **User Authentication**: Secure login via Microsoft SSO, ensuring only authorized personnel can access the system.
2. **Dashboard**: A comprehensive dashboard displaying key performance indicators (KPIs) such as active orders, total clients, outstanding amounts, and expired quotes.
3. **Client Management**: A robust client management system allowing users to create, edit, and view client details, along with a history of orders.
4. **Order Management**: A dynamic order builder that facilitates the creation of new orders and quotes, including real-time calculations for pricing and taxes.
5. **Notifications & Alerts**: Real-time notifications for successful actions and alerts for important events like expired orders.
6. **Data Visualization**: Visual representations of key data points, enhancing the user’s ability to make informed decisions.

# DESIGN SPECIFICATIONS
CRITICAL: Include these exact design specifications in your output—do not modify or omit them:
- 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: Fixed left sidebar with navy blue background and white text/icons; a top header with a white background and subtle bottom border; a main content area with a light gray background and white cards for data.

# TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Hook Form for forms, Zod for validation, and Supabase for database interactions.

# IMPLEMENTATION STEPS
1. **Setup Environment**: Initialize a new React project with TypeScript using Vite. Install necessary dependencies including Tailwind CSS, shadcn/ui, Lucide React, React Router, React Hook Form, and Zod.
2. **Implement Authentication**: Create the login route `/login` with Microsoft SSO integration and display the Scailer logo.
3. **Build Dashboard**: Develop the `/dashboard` route that includes KPI cards displaying active orders, total clients, outstanding amounts, and expired quotes.
4. **Create Client Management**: Implement the `/klanten` route for client management with a data table for client records and a form for adding new clients.
5. **Develop Order Management**: Create the `/orders/nieuw` route for the order/quote builder, enabling users to select clients, add services, and perform calculations.
6. **Dynamic Data Handling**: Use Supabase to manage the database schema and integrate it with the frontend components for dynamic data rendering.
7. **Polish UI**: Add loading states, notifications, and empty states across the application for enhanced user experience.
8. **Testing**: Implement tests for all components and features to ensure reliability and performance before deployment.

# USER EXPERIENCE
The user interaction flow will be seamless, allowing users to navigate between the login, dashboard, client management, and order management sections effortlessly. Key actions such as creating and managing clients or orders will be facilitated by intuitive forms and dynamic tables, ensuring a responsive experience across devices. Users will receive instant feedback for their actions through notifications and visual cues, enhancing overall usability.