Lovable Prompt Creator - AI Prompt Generator

Act as a Senior Full-Stack SaaS Architect and UI/UX Expert. You are tasked with building the "Scailer Business Engine" (SBE), an enterprise-grade internal CRM and Order Management system for a high-end AI & IT Consultancy firm ("Scailer"). 

Strictly adhere to the following tech stack, brand guidelines, and architectural rules. All user-facing UI copy must be in professional, flawless Dutch.

# 1. Tech Stack & Architecture
* Frontend Framework: React (Vite) with TypeScript. Strict type checking enabled.
* Styling: Tailwind CSS.
* UI Components: shadcn/ui. Use this extensively for consistency.
* Icons: Lucide React.
* Routing: React Router v6.
* Forms & Validation: React Hook Form coupled with Zod for strict schema validation.
* Backend/BaaS: Supabase (PostgreSQL, Auth, Edge Functions).

# 2. Brand Identity & Visual Design (CRITICAL: Match scailer.ai exactly)
* Reference Image: Analyze the attached Scailer logo. Extract the deep Navy Blue (e.g., #0A1931) and the vibrant tech-gradient (blue-to-purple, e.g., `bg-gradient-to-r from-[#2563EB] to-[#9333EA]`).
* Typography: Use 'Inter'. Implement strict hierarchical sizing: H1 (text-3xl, tracking-tight, font-bold, navy), H2 (text-xl, font-semibold), Body (text-sm, text-slate-600).
* UI Feel: B2B, minimalist, data-dense, no-nonsense. Do not use playful animations or excessive border-radiuses (`rounded-md` max). Use crisp white backgrounds with subtle borders (`border-slate-200`) and light gray (`bg-slate-50`) for contrast.
* Layout Structure:
  - Fixed left Sidebar (Navy blue background, white text/icons).
  - Top header (White, subtle bottom border, breadcrumbs, user profile placeholder).
  - Main content area (Light gray background, white cards for data).

# 3. Database Schema & Data Models (Supabase)
Generate the UI and state management logic for these exact relational models:
* Clients (Klanten): `id` (uuid), `company_name` (string), `contact_person` (string), `email` (string), `phone` (string), `address` (text), `sync_to_sharepoint` (boolean, default false), `created_at` (timestamp).
* Services (Diensten): `id` (uuid), `title` (string), `description` (text), `base_price` (numeric), `is_vat_applicable` (boolean, default true). 
  -> PRE-FILL DUMMY DATA: "Workflow Automatisering (n8n & Low-code)" (€110/u), "Microsoft Copilot Training" (€1500/sessie), "Strategisch AI Advies" (€110/u).
* Orders (Orders): `id` (uuid), `client_id` (foreign key), `order_number` (string, e.g., 'SCA-2026-0001'), `status` (enum: 'Concept', 'Verzonden', 'Geaccepteerd', 'Verlopen', 'Gereed'), `internal_notes` (text), `created_at` (timestamp), `valid_until` (timestamp, created_at + 14 days).
* Order_Items (Orderregels): `id` (uuid), `order_id` (foreign key), `service_name` (string, snapshot), `quantity` (numeric), `unit_price` (numeric, snapshot).

# 4. Detailed Screen Specifications
Implement the following routes and complex views:

* Route `/login`: Clean login screen. Scailer logo centered. One prominent button: "Inloggen met Microsoft SSO" (use Lucide Microsoft icon).
* Route `/dashboard`: 
  - Top row: 4 KPI Cards (shadcn Card component) showing 'Actieve Orders', 'Totaal Klanten', 'Openstaand Bedrag (€)', 'Verlopen Offertes'.
  - Bottom row: A Data Table (shadcn Table) showing the 5 most recent orders with dynamic status badges (Green = Geaccepteerd/Gereed, Yellow = Concept/Verzonden, Red = Verlopen).
* Route `/klanten`: 
  - Use shadcn DataTable with search, pagination, and sorting.
  - Add a "Nieuwe Klant" button triggering a Sheet (shadcn Sheet/Slide-over) with a Zod-validated Form to add a client. Include the "Sync naar SharePoint" switch.
* Route `/klanten/:id`: 
  - Client detail view. Left column: Client metadata. Right column: List of all historic/active orders for this specific client.
* Route `/orders/nieuw` (Order/Quote Builder): 
  - Complex form. Select Client (ComboBox/Select). 
  - Dynamic Line Items: Use `useFieldArray` from react-hook-form to add/remove services. 
  - Real-time calculations: Show 'Subtotaal Excl. BTW', toggle for 'BTW 21%', and 'Totaal Incl. BTW'.
  - Rich text area for internal project notes.
* Route `/orders/:id`: 
  - View order details. 
  - Primary actions block: 
    1. "Genereer PDF Offerte" (Creates a clean, B2B quote view. Add footer: "Microsoft Gecertificeerd | Officiële Flowdesk Partner. Geen vage PowerPoints, maar tastbare resultaten.").
    2. "Verzend via E-mail & SharePoint" (Mock API call button).
    3. "Exporteer naar Agenda" (Generates .ics file).
    4. "Markeer als Betaald" (Changes status to 'Gereed').
  - Drag-and-drop file upload zone for attachments (UI only, note: "Gesynchroniseerd met SharePoint").

# 5. UX/UI Polish & Business Logic
* Loading States: Use Skeleton loaders (shadcn Skeleton) for all data-fetching areas.
* Empty States: Beautiful empty states with a subtle icon and a call-to-action (e.g., "Nog geen klanten gevonden. Voeg uw eerste klant toe.").
* Notifications: Use shadcn Sonner/Toast to confirm actions (e.g., "Klant succesvol opgeslagen", "Offerte PDF gegenereerd").
* Logic Rule: If an order's `valid_until` date is in the past and status is 'Verzonden', visually enforce the 'Verlopen' status in all tables.

Build the complete frontend structure, routing, dummy data integration, and UI components for this Phase 1 MVP. Ensure the code is modular, well-commented, and ready to be hooked up to a real Supabase backend.