# Abdelouhab: Your Bookkeeping Co-pilot Abdelouhab — Production-Quality Phase 1 SaaS Prototype 1. PRODUCT OVERVIEW Build a production-quality web app prototype called Abdelouhab. Abdelouhab is an AI pre-accounting SaaS for Dutch bookkeeping firms. It acts as an intelligent co-pilot on top of existing accounting software, specifically SnelStart for this prototype. SnelStart remains the system of record. Abdelouhab prepares: Invoices Bookings Bank matches Client queries Approved work is then synced to SnelStart. This is a UI-only prototype: Use realistic mock data. No real authentication. No real OCR. No real AI/LLM API. No real SnelStart API. Simulate AI processing with short delays and status transitions. Use shared in-memory application state so actions remain synchronized between Firm and Client environments during the session. Language: English only. Phase: Phase 1 only. Do NOT implement: Phase 2 biweekly reminders Phase 3 monthly financial summaries AI financial advice Billing/subscriptions Real authentication Real integrations Exact Online Twinfield Native mobile apps 2. PRIMARY DESIGN DIRECTION The product should feel like a premium Dutch accounting operations platform, not a generic AI SaaS dashboard. Think: Modern accounting workstation + intelligent workflow system + calm European enterprise software. The interface should communicate: Trust Accuracy Control Professionalism Financial seriousness AI assistance without looking like an "AI toy" High information density without visual clutter Avoid making the product look like: A marketing website A crypto dashboard A generic startup dashboard A purple AI product A banking consumer app A newspaper/editorial website The application should immediately feel suitable for a professional bookkeeping office. 3. DESIGN SYSTEM Brand Product name: Abdelouhab Primary brand color: #1B4D3E Primary hover: #153D32 Soft primary: #E4EFE9 Paper background: #F7F4EF White surface: #FFFFFF Muted surface: #F0EBE3 Ink: #1C2421 Muted text: #5C6B64 Border: #D9D2C7 Attention amber: #C47B2D Use restrained success and danger tones. Do not introduce purple, indigo, neon green, excessive blue, gradients, or glowing effects. 4. TYPOGRAPHY Use a distinctive professional typography combination. Display / Headings Prefer: Fraunces Use for: Page titles Large dashboard numbers where appropriate Important empty-state headings Major section headings The serif should be subtle and sophisticated, not decorative. UI / Body Use: Figtree Use for: Navigation Tables Labels Buttons Form controls Status badges Descriptions Metadata Numbers where readability is important Typography hierarchy: Page title: 28–34px Section heading: 18–22px Card heading: 15–17px Body: 14px Secondary text: 12–13px Table text: 13–14px Micro labels: 11–12px Use generous line height for descriptive text. Avoid excessive font weights. 5. ICONOGRAPHY — IMPORTANT Use a single coherent icon family throughout the entire application. Preferred: Lucide icons Use icons consistently for: Dashboard Clients Inbox Bank Queries Activity Settings Upload Search Filter Chevron Edit Check X Alert Link File Calendar Clock User Building Refresh Sync Eye More actions Download Icon rules Default size: 18px Compact controls: 16px Major empty states: 24–32px Never mix different icon libraries. Never use emoji as interface icons. Never use decorative random icons. Icons should support text, not replace important labels. Use subtle icon containers for navigation and KPI cards. Use filled backgrounds sparingly. Avoid oversized colorful icons. Navigation icons should be visually quiet when inactive and use the primary green when active. 6. VISUAL LANGUAGE Use: Thin borders Soft rounded corners Very subtle shadows Strong spacing rhythm White surfaces on paper background Green used primarily for actions and active states Amber for attention Muted colors for secondary information Border radius: Cards: 12px Inputs: 8px Buttons: 8px Badges: 999px Upload areas: 12–14px Do not use: Huge rounded cards Excessive glassmorphism Heavy shadows Gradient backgrounds Neon borders Floating blobs Shadow should be extremely subtle. 7. APPLICATION LAYOUT The application is a desktop-first operations application. Recommended maximum content width: 1440px Main desktop layout: ┌─────────────────────────────────────────────────────────────┐ │ Sidebar │ Top utility/header │ │ ├───────────────────────────────────────────────────┤ │ │ Page header │ │ │ │ │ │ Main content │ │ │ │ │ │ │ └─────────┴───────────────────────────────────────────────────┘ Sidebar width: Approximately 248px. Collapsed sidebar: Approximately 72px. Main content padding: 32px desktop. 24px tablet. 16px mobile. 8. FIRM SIDEBAR The Firm application uses a persistent left sidebar. Top: Abdelouhab Use a refined wordmark treatment. Under the logo, show a subtle environment label: FIRM Navigation: Workspace Dashboard Clients Inbox Bank matching Client queries Oversight Activity Configuration Booking rules Use appropriate Lucide icons. Active navigation item: Soft green background #E4EFE9 Forest green text Forest green icon Small visual indicator on the left Inactive navigation: Muted ink Transparent background Bottom of sidebar: User profile chip: Sara · Accountant Include: Small avatar with initials Name Role Also include a subtle environment switcher allowing the prototype to switch between: Firm Client portal 9. TOP BAR The Firm top bar should be minimal. Left: Breadcrumb / page context Right: Search Notification icon User profile Do not overcrowd the header. Use a thin bottom border. The header should visually merge with the application shell rather than looking like a separate marketing navbar. 10. ROLE PICKER Route: / Create a clean branded entry screen. This is NOT a login page. Layout: Centered application introduction with generous whitespace. Logo: Abdelouhab Heading: Your bookkeeping co-pilot Supporting text explaining that this is a Phase 1 clickable prototype using mock data. Then two large selection cards: Firm — Accountant Description: Access clients, document processing, AI booking suggestions, bank matching and approval workflows. Client portal Description: Upload documents, track processing and answer bookkeeping questions from your accountant. Cards should feel interactive. Selected card: Green border Soft green background Clear check/arrow indicator Add a small footer note: Phase 1 prototype · Mock data · SnelStart integration simulated 11. FIRM DASHBOARD — CORE LAYOUT Route: /firm This should be the most polished overview screen after Invoice Review. Page header Left: Eyebrow: Firm overview Large title: Good morning, Sara Subtitle: Here’s what needs your attention today. Right: Primary button: Go to inbox Secondary action: Upload document 12. DASHBOARD KPI DESIGN Create five KPI cards in a single responsive row. Needs review Auto-ready Open queries Sync failed Auto-book % Each KPI card should contain: Small descriptive label Large number Small contextual indicator Minimal Lucide icon Example: ┌──────────────────────────┐ │ Needs review ◉ │ │ │ │ 12 │ │ 4 new today │ └──────────────────────────┘ Do not make KPI cards huge. They should be compact operational metrics. Use semantic accents: Needs review → amber Auto-ready → green Open queries → neutral/amber Sync failed → danger Auto-book → green 13. DASHBOARD SECONDARY GRID Below KPIs, create a two-column layout. Desktop: ┌──────────────────────────────┬───────────────────────┐ │ Review queue │ Recent activity │ │ │ │ │ Invoice rows │ Timeline │ │ │ │ │ │ │ └──────────────────────────────┴───────────────────────┘ Approximately: 65% / 35% Review queue Header: Review queue Subtext: Invoices requiring your attention Show 5–6 invoice rows. Each row: Supplier Client Amount Confidence Status badge Date Chevron Rows should be clickable. Bottom: View all → Recent activity Show a compact chronological timeline. Examples: AI processed invoice Sara approved invoice Document uploaded Client answered query SnelStart sync completed Each activity item: Lucide icon Event description Actor Relative timestamp Use connecting timeline lines very subtly. 14. DASHBOARD QUICK ACTIONS Below the primary dashboard grid, include a compact action strip: Review invoices View bank matching Open client queries View activity Use outlined buttons with icons. Do not turn these into large marketing cards. 15. CLIENTS Route: /firm/clients Page title: Clients Subtitle: Manage your administraties and bookkeeping workflows. Top controls: Search clients Filter Add client Table columns: Client KvK Open documents Open queries Last upload SnelStart Status Seed clients: Bakkerij De Mol Studio Noord Installatie BV Café Haven SnelStart badges: Connected or Not connected Use compact badges. Row click opens client context. 16. DOCUMENT INBOX Route: /firm/inbox Page header: Document inbox Subtitle: Review, approve and prepare documents for SnelStart. Top filter bar: Search Status Client Date Confidence Actions: Upload documents Bulk approve Upload area Large but compact drag-and-drop zone. Icon: Lucide UploadCloud Text: Drop invoices or scanned documents here Secondary: PDF, JPG or PNG Button: Choose files After upload: Show file row Status becomes New Simulate AI processing After approximately 1–2 seconds transition to Needs review or Auto-ready Table Columns: Select File Client Supplier Amount Uploaded Confidence Status Bulk selection must work. Bulk actions: Approve Mark needs review 17. INVOICE REVIEW — MOST IMPORTANT SCREEN Route: /firm/invoices/:id Make this the most sophisticated workflow screen. Desktop layout: ┌──────────────────────────────────────────────────────────────────────┐ │ Breadcrumb / Invoice / Status Actions │ ├───────────────────────────────┬──────────────────────────────────────┤ │ │ │ │ Document preview │ AI booking suggestions │ │ │ │ │ Extracted fields │ Confidence │ │ │ │ │ Line items │ Ledger / VAT / Relation │ │ │ │ │ │ Workflow actions │ │ │ │ │ │ Ask client │ └───────────────────────────────┴──────────────────────────────────────┘ Recommended split: 55% document/data area 45% AI/workflow area Use a sticky right-side workflow panel on desktop. 18. INVOICE REVIEW HEADER Display: Invoice number Supplier Client Current status badge Confidence Actions: More Back to inbox Status machine must support: New AI processed Needs review Auto-ready Approved Rejected Synced Sync failed 19. DOCUMENT PREVIEW Create a realistic invoice preview placeholder. It should look like an actual scanned invoice document without using copyrighted real invoices. Include: Invoice header Supplier Invoice number Date Line items VAT Total Allow visual zoom controls. This is a mock preview only. 20. EXTRACTED FIELDS Editable fields: Supplier Invoice number Invoice date Due date VAT amount Total Currency Payment reference Use compact professional form fields. Changes should update shared state. Save button: Save changes After correction show toast: Correction saved for future suggestions 21. DUPLICATE DETECTION When applicable show an amber warning banner: Possible duplicate invoice Explain that supplier, amount, date and payment reference closely match an existing document. Include: View matching invoice Do not make this visually alarming. 22. LINE ITEMS Table: Description Quantity Unit price VAT Total Allow editing. Use compact rows. 23. AI SUGGESTION PANEL This should visually communicate AI assistance without looking gimmicky. Header: AI booking suggestion Show: 92% confidence Use a horizontal confidence progress bar. Color transitions: Low → danger/amber Medium → amber High → green Under confidence: Why this suggestion? Example: “Similar supplier invoices have previously been booked to Office expenses with VAT code NL21.” Suggestions: Ledger account Office expenses VAT code NL 21% Expense category Operating expenses Relation Supplier Each suggestion should be editable. When edited: show subtle label: Edited by Sara And toast: Correction saved for future suggestions 24. AUTO-READY LOGIC Default threshold: 85% If confidence >= threshold: Status: Auto-ready Otherwise: Needs review Only: Approved Auto-ready can sync to SnelStart. Sync button is disabled for other statuses. Tooltip/inline helper should explain why it is disabled. 25. INVOICE ACTIONS Primary: Approve Secondary: Reject Secondary: Ask the client Sync: Sync to SnelStart The Sync button should become available only after approval or Auto-ready. When clicked: show brief processing state: Syncing… Then: Synced to SnelStart For Café Haven, because SnelStart is not connected: Sync failed Show clear error: SnelStart is not connected for this client. Never pretend a real API call happened. 26. ASK CLIENT Within invoice review, include a compact query composer. Title: Ask the client Textarea placeholder: What do you need clarification on? Example: “Can you confirm what this purchase was for?” Button: Send query Sending creates a query linked to the invoice. 27. BANK MATCHING Route: /firm/bank Page title: Bank matching Subtitle: Match bank transactions with invoices and bookkeeping entries. Display 6–8 realistic mock transactions. Columns: Date Description Client Amount Suggested invoice Confidence Status Actions Statuses: Unmatched Suggested Matched Partial Ignored Actions: Match Unmatch Ignore Highlight: Partial payment and Combined payment with amber informational indicators. AI suggested matches should show confidence. 28. CLIENT QUERIES — FIRM Route: /firm/queries Page title: Client queries Subtitle: Keep bookkeeping questions moving. Tabs: Requested Delivered Approved All Each query should show: Client Question Related invoice Created date Status Last response When a client answers: status becomes: Delivered Firm action: Mark approved 29. ACTIVITY Route: /firm/activity Page title: Activity Subtitle: Audit trail for documents, approvals and client communication. Create chronological timeline. Events: Upload AI processed Approved Rejected Sync Query Answer Each event contains: Icon Event Actor Timestamp Related invoice/client Link Use subtle timeline styling. 30. BOOKING RULES Route: /firm/settings/rules Page title: Booking rules Subtitle: Control how AI suggestions become auto-ready bookings. Confidence threshold Slider: 85% Label: Auto-ready above 85% confidence Allow adjustment. Auto-sync Toggle: Allow auto-sync when Auto-ready Add explanatory text. Global rule Example editable rule card: Supplier invoices → default ledger based on historical bookings Client rules Cards for: Bakkerij De Mol Studio Noord Installatie BV Café Haven Each card should have an editable rule label. Settings are mock and persist in session state. 31. CLIENT PORTAL The Client environment uses a different shell. Do not use the Firm sidebar. Use a clean top navigation. Header: Abdelouhab Environment label: Client portal Navigation: My documents Upload Queries Right: Bakkerij De Mol Use a simple profile chip. Client portal should feel simpler and less operational than the Firm application. 32. CLIENT DOCUMENTS Route: /client Page title: My documents Subtitle: Track your invoices and documents sent to your accountant. Primary CTA: Upload document Display document list. Columns/cards: File Uploaded Status Supplier Amount Statuses use the same system as the Firm application. Client only sees: Bakkerij De Mol documents. 33. CLIENT UPLOAD Route: /client/upload Large centered upload area. Icon: Lucide UploadCloud Heading: Upload a document Description: Drop an invoice or scanned document here, or choose a file from your computer. Supported: PDF, JPG, PNG Button: Choose file After upload: Show uploaded filename Status = New Simulate AI processing Status becomes Needs review Show success message Provide button back to My documents 34. CLIENT QUERIES Route: /client/queries Page title: Questions from your accountant Show open questions. Each query: Question Related invoice Date Status Answer area: Textarea Button: Send answer Optional mock proof upload: Upload proof After answering: Status changes: Delivered Firm should immediately see the updated state. Previous answers should remain visible. 35. MOCK DATA Seed at least four clients: Bakkerij De Mol — SnelStart connected Studio Noord — connected Installatie BV — connected Café Haven — NOT connected Seed approximately 10–12 invoices across: New AI processed Needs review Auto-ready Approved Rejected Synced Sync failed Seed approximately 6–8 bank transactions: Matched Suggested Partial Unmatched Ignored Seed 4–5 queries: Requested Delivered Approved Use realistic Dutch business names, invoice numbers, VAT amounts and EUR currency. 36. SHARED APPLICATION STATE Create a centralized mock state/store. Firm and Client views must use the same state. For example: Client uploads document ↓ Shared state updated ↓ Firm inbox displays document ↓ AI processing simulation ↓ Status changes ↓ Firm approves ↓ Client document status updates Likewise: Firm creates query ↓ Client sees query ↓ Client answers ↓ Query becomes Delivered ↓ Firm sees Delivered ↓ Firm approves Do not hard-code independent screens that cannot communicate. 37. STATUS TRANSITIONS Implement the following state machine: New ↓ AI processed ↓ Needs review / Auto-ready ↓ Approved ↓ Synced Alternative: Needs review ↓ Rejected Sync failure: Approved / Auto-ready ↓ Sync attempted ↓ Sync failed For a client without SnelStart: Café Haven → Sync failed 38. INTERACTION FEEDBACK Use toast notifications for meaningful actions. Examples: Document uploaded AI processing complete Correction saved for future suggestions Invoice approved Invoice rejected Query sent to client Answer received Synced to SnelStart SnelStart connection unavailable Use subtle toast animations. Do not animate everything. 39. MOTION SYSTEM Use only 2–3 intentional motion patterns: 1. Upload processing Short progress/loading animation. 2. Status transitions Subtle badge transition when invoice state changes. 3. Toast notifications Small slide/fade animation. Everything else should remain stable. No: Parallax Floating cards Animated gradients Excessive page transitions Bouncing icons 40. RESPONSIVE BEHAVIOR Desktop-first. At tablet width: Sidebar can collapse. Tables remain horizontally scrollable. Two-column layouts can become stacked. At mobile: Sidebar becomes drawer. Top bar remains accessible. KPI cards become 2-column or 1-column. Invoice Review becomes vertically stacked. AI panel should remain easy to access. Tables horizontally scroll instead of breaking columns. Upload areas remain comfortable for touch. Never allow horizontal overflow of the entire application. 41. ACCESSIBILITY Implement: Keyboard accessible controls Visible focus states Proper button labels Accessible form labels Semantic headings Sufficient color contrast Status not communicated by color alone Tooltips for unfamiliar icons Touch targets at least approximately 40px Do not use icon-only buttons for critical actions without accessible labels. 42. EMPTY STATES Every list must have a polished empty state. Examples: No documents found “No invoices match your current filters.” No open queries “You’re all caught up with client questions.” No bank matches “No transactions need attention.” Include an appropriate Lucide icon and a relevant action where useful. 43. TABLE DESIGN Tables should be dense but highly readable. Use: 44–52px row heights Sticky headers where appropriate Subtle row hover Clear column alignment Right-align monetary values Consistent EUR formatting Example: €1,245.80 Status badges should be compact. Do not overuse borders between every cell. Prefer subtle row separators. 44. STATUS BADGES Create one reusable StatusBadge component. Statuses: New AI processed Needs review Auto-ready Approved Rejected Synced Sync failed Each status has: Semantic color Optional icon Text label Use consistent styling throughout Firm and Client environments. 45. CONFIDENCE COMPONENT Create reusable: ConfidenceIndicator Display: 92% plus progress bar. Variants: Low Medium High Use it consistently in: Inbox Invoice review Bank matching Dashboard 46. BUTTON SYSTEM Primary: Forest green background. Secondary: White/background with border. Tertiary: Transparent. Danger: Muted red background/text. Do not make every action a filled button. Hierarchy example: Primary: Approve Secondary: Ask the client Tertiary: Reject Separate destructive actions visually. 47. FORM DESIGN Inputs should be: Compact Clearly labeled White Thin border 8px radius Focus: Forest green border/ring. Error: Muted red. Success: Muted green. Avoid giant input fields. 48. SVELTE/REACT IMPLEMENTATION QUALITY Build reusable components rather than duplicating UI. Recommended component structure: AppShell FirmSidebar ClientNavbar PageHeader KpiCard StatusBadge ConfidenceIndicator DataTable FilterBar UploadDropzone InvoicePreview ExtractedFields LineItemsTable AiSuggestionPanel QueryComposer ActivityTimeline BankMatchCard EmptyState Toast Modal Create shared mock data/state utilities. Keep routing clean and predictable. Use route-driven pages rather than hiding the whole application in one component. 49. IMPORTANT UX PRINCIPLE The application should make the accountant feel: “Abdelouhab has already done the work; I only need to verify and approve it.” The UI should therefore prioritize: What needs attention? Why does Abdelouhab suggest this? How confident is it? What can I change? Can I approve it? Can I sync it? Do not bury these actions behind menus. 50. DASHBOARD VISUAL PRIORITY The dashboard hierarchy must be: Page context ↓ What needs attention ↓ KPIs ↓ Review queue ↓ Recent activity ↓ Quick navigation Avoid turning the dashboard into a collection of decorative cards. Every element should help the accountant operate the bookkeeping workflow. 51. INVOICE REVIEW VISUAL PRIORITY The Invoice Review page is the product heart. Priority: Invoice identity + status ↓ Document evidence ↓ Extracted accounting data ↓ AI recommendation ↓ Confidence + reasoning ↓ Accountant correction ↓ Approve ↓ Sync to SnelStart The AI should feel like a highly competent assistant, not the main visual attraction. 52. SNELSTART SYSTEM-OF-RECORD MESSAGE In Rules/Settings include a subtle information card: SnelStart is the system of record Supporting copy: Abdelouhab prepares and validates bookkeeping work before approved entries are synced to SnelStart. This is informational only. 53. DISABLED FUTURE FEATURES You may include a subtle disabled navigation hint: Reminders & monthly report — later Do not create screens or workflows for these features. 54. DEMO PATH — MUST WORK The prototype must support this exact demonstration: Demo 1 — Client upload As Client: Open Upload Upload mock invoice File appears as New AI processing begins After approximately 1–2 seconds becomes Needs review Demo 2 — Accountant approval Switch to Firm: Open Inbox Find uploaded invoice Open Invoice Review Edit ledger account Save Toast appears: Correction saved for future suggestions Approve Sync to SnelStart Status becomes Synced Demo 3 — Bank matching Open Bank matching Find Suggested transaction Review suggested invoice Match Status becomes Matched Demo 4 — Client query Open low-confidence invoice Click Ask the client Create query Switch to Client Open Queries Answer query Query becomes Delivered Switch back to Firm Mark approved Demo 5 — Sync failure Open Café Haven invoice Approve if necessary Click Sync to SnelStart Show: Sync failed Explain: SnelStart is not connected for this client. 55. FINAL QUALITY BAR Before considering the prototype complete, verify: Every route works. Every major button performs an action. Firm and Client state is shared. Upload simulation works. AI processing simulation works. Invoice status machine works. Approval works. Rejection works. Queries work end-to-end. Client answers appear in Firm. Bank matching works. SnelStart success works. SnelStart failure works. Bulk invoice selection works. Filters work. Editable invoice fields work. Confidence threshold affects Auto-ready behavior. Rules/settings work in session state. Empty states exist. Responsive layouts work. Keyboard focus states exist. No Phase 2 or Phase 3 screens are implemented. No real APIs are required. Most important instruction Do not redesign the product into a marketing website. Build Abdelouhab as a serious, production-quality accounting operations workspace. The design should feel calm, precise, trustworthy and efficient. Use the forest-green brand language consistently, sophisticated typography, excellent spacing, restrained iconography, dense but readable tables, polished workflow states and a particularly excellent Invoice Review experience. The final prototype should look like a real SaaS product that a Dutch bookkeeping firm could plausibly use every day. This project was built with [Lovable](https://lovable.dev). ## Build with Lovable Continue developing this project in the [Lovable editor](https://lovable.dev/projects/e136a83a-97e1-4a66-a152-8da6599c0638). - **Ship faster**: describe what you want to build and Lovable handles the code. - **Stay in sync**: every change made in Lovable is committed straight to this repository. - **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt. ## Development Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating). ```sh git clone cd npm i npm run dev ```