Using vibecoding to replace typical SaaS solutions: Creating a CRM with vibe coding and Cursor

## **1) Product principles for a modern CRM (to guide design decisions)**

* **Fast to operate with one hand**: left nav + main canvas, minimal modals, keyboard shortcuts.

* **One global search** (contacts, leads, opportunities, quotes, orders, products).

* **Everything is an "entity page"** with a consistent layout: header + tabs + right-side activity timeline.

* **Activity-first**: reminders/notes are the same UI component across Leads, Opportunities, Quotations, Sales Orders.

* **Personal + team views**: users can create their own pipeline layouts while still working inside team pipelines.

---

## **2) Information architecture (screens)**

### **Primary modules**

1. **Dashboard**

2. **Leads** (list view, qualification, convert to opportunity)

3. **Pipeline** (kanban for opportunities)

4. **Contacts** (list + contact detail)

5. **Products** (list + product detail)

6. **Quotations** (list + quotation builder)

7. **Sales Orders** (list + order detail)

8. **Activities** (my reminders, overdue, due today, etc.)

9. **Settings** (teams, stages, fields, roles, templates)

---

## **3) App shell layout (global UI)**

### **Top bar (sticky)**

* **Left**: hamburger (collapse sidebar), logo/app name.

* **Center**: **Global Search** input

* Placeholder: "Search contacts, leads, opps, quotes…"

* Results grouped by entity type, with keyboard navigation.

* **Right**:

* "+ Create" button (dropdown): Lead, Opportunity, Contact, Quotation, Product, Activity

* Notification bell (optional)

* User avatar menu (profile, preferences, sign out)

### **Left sidebar (collapsible)**

* Dashboard

* Leads

* Pipeline

* Contacts

* Products

* Quotations

* Sales Orders

* Activities

* Settings (visible by role)

When collapsed: icons only, tooltips on hover.

### **Page structure (common)**

* **Page header row**:

* Title (e.g., "Pipeline")

* Context switchers (team, view, filters)

* Primary action button

* **Subheader**:

* Filter chips (Owner: Me, Team: Nordics, Stage: Qualified…)

* Saved views dropdown

* **Main content**:

* List/Kanban/Builder

* **Right panel** (optional on list pages, always on entity pages):

* Activity timeline and quick add note/reminder

---

## **4) Detailed layouts by feature**

## **A) Sales pipeline (Opportunities Kanban)**

### **Pipeline page layout**

**Header controls**

* **Team selector** (dropdown): "My Personal Pipeline", plus "Team: X" pipelines available to user

* **View selector**: Kanban (default), List, Forecast (optional)

* **Saved views** dropdown (personal/team)

* **Filter bar**:

* Owner (Me / Any / specific user)

* Team

* Stage

* Expected close (date range)

* Tags

* Value range

* **Primary buttons**:

* "+ Opportunity"

* "Customize view" (personal) / "Customize team board" (if permission)

### **Kanban board design**

* Horizontal columns = stages.

* Each column has:

* Stage name + count

* Sum of amounts (optional)

* "…" menu (stage settings if allowed)

* Cards show (compact but informative):

* Opportunity name (bold)

* Company/Contact (secondary)

* Amount + currency

* Expected close date (pill)

* Priority indicator (optional)

* Owner avatar

* Next activity due (small icon + date; red if overdue)

* Tags (1-2 visible + "+n")

**Interactions**

* Drag & drop between stages (updates stage + stage change timestamp)

* Card click opens **Opportunity Drawer** (right-side sliding drawer) OR navigates to detail page (designer choice)

* Quick inline actions on hover:

* Add activity

* Add note

* Set close date

* Change owner

### **"Customize pipeline" (key requirement: each user has custom kanban + team kanbans)**

You'll support **board configurations**:

* **Personal board**: user chooses:

* Which stages appear

* Column order

* WIP limits (optional)

* Card fields shown (toggle: amount, close date, tags, company, next activity)

* Default filters (e.g., Owner=Me)

* **Team board**: similar, but applies to team pipeline and requires permission.

* Personal boards can be created **per team** too (e.g., "My view of Team A pipeline").

UX:

* A "Customize view" panel with:

* "Columns" (drag order, toggle visible)

* "Card fields" (checkboxes)

* "Defaults" (filters, sort)

* "Save as…" (Personal / Team if allowed)

---

## **B) Lead management (List view → move to pipeline)**

### **Leads page (list)**

**Header controls**

* Saved views dropdown (e.g., "New inbound", "My unqualified", "All leads")

* Filters: status, source, owner, team, created date, tag

* Buttons: "+ Lead", "Import" (optional)

**Table columns** (suggested)

* Lead name

* Company

* Email / phone

* Source

* Owner

* Status (New/Contacted/Qualified/Disqualified)

* Last activity

* Next activity

* Created

**Row actions**

* "Qualify" / "Convert to opportunity"

* "Schedule activity"

* "Disqualify"

* "Assign owner"

### **Lead detail page (very important)**

Two-column layout:

**Left main**

* Header: Lead name + status pill + owner + team

* Quick actions: Convert, Disqualify, Create quotation (optional)

* Tabs:

1. Overview (default)

2. Notes & Activity (or this can be on right timeline)

3. Related (contacts, opportunities created from lead)

4. Audit (optional)

**Overview section blocks**

* Contact info (name, company, email, phone)

* Lead details (source, tags, estimated value, interest/product)

* Qualification checklist (optional)

* Custom fields section (configurable)

**Right side panel**

* **Activity timeline** (notes + reminders + system events)

* "Add note" input (supports @mentions optional)

* "Add reminder" quick form:

* Type: Call / Email / Follow-up / Meeting / Task

* Due date/time

* Assign to (default owner)

* Linked entity auto set to current lead

### **Convert lead → opportunity flow**

A light modal or drawer:

* Opportunity name (default from lead)

* Link/create contact + company

* Choose pipeline/team + initial stage

* Expected amount + close date

* Owner

* Option: mark lead as converted + keep reference

After convert:

* User lands in opportunity detail (or pipeline with highlight)

---

## **C) Contacts list + contact detail**

### **Contacts list page**

* Table with:

* Name

* Company (if person)

* Type (Person/Company)

* Email

* Phone

* Owner

* Tags

* Last activity / Next activity

* Row click opens Contact detail.

### **Contact detail page**

Two-column layout like others.

**Header**

* Name + type badge

* Primary actions: New opportunity, New quotation, Add activity

* Secondary: Merge (admin), Export (optional)

**Left main tabs**

* Overview: contact fields, addresses, VAT/ID (optional), owner/team

* Opportunities: list of related opportunities

* Quotations / Orders: related docs

* Products (optional "interests" or purchased items)

**Right panel**

* Activity timeline + add note/reminder

---

## **D) Products list + product detail**

### **Products list page**

* Table columns:

* SKU

* Name

* Sales price

* Cost (restricted by role)

* Active

* Category

* Actions: New product (permission)

### **Product detail page**

* Header: product name + SKU

* Tabs: Overview, Pricing, Metadata

* Keep it simple unless you're building inventory later.

---

## **E) Quotation builder (Odoo-like rows)**

### **Quotations list page**

* Table:

* Quote number

* Customer

* Opportunity (optional link)

* Status (Draft/Sent/Accepted/Rejected/Expired)

* Total

* Created / Valid until

* Owner

* Actions: New quotation

### **Quotation detail (builder) page layout**

This is the most "app-like" page; minimize scrolling.

**Top header**

* Quote number + status pill

* Customer (searchable dropdown)

* Linked opportunity (optional)

* Valid until date

* Currency

* Owner/team

* Buttons:

* Save

* Send (changes status to Sent)

* Mark accepted (→ optionally create Sales Order)

* PDF preview (optional)

**Main canvas split**

* **Left (70%)**: line items grid

* **Right (30%)**: totals + settings + activity

#### **Line items grid (Odoo-like)**

Row columns:

* Drag handle (reorder)

* Product (searchable)

* Description (editable textarea-like)

* Qty

* Unit

* Unit price

* Discount %

* Tax % (optional)

* Line total

* Trash icon

Features:

* "Add line" button

* Inline product search (typeahead)

* Keyboard friendly: Enter to next cell, Cmd/Ctrl+Enter add row

* Optional row types:

* Section header row

* Note row
  (If you want Odoo parity, keep these—they're extremely useful.)

#### **Totals card (right)**

* Subtotal

* Discount total (optional)

* Tax total (optional)

* Total

* "Optional: deposit / payment terms" (later)

* "Internal note" (for sales team)

**Right panel below totals**

* Activity timeline + add note/reminder

### **Create Sales Order from quotation**

* "Confirm" / "Mark accepted" creates Sales Order snapshot of quote lines.

* Sales Order becomes locked-ish (editable by role).

---

## **F) Sales orders**

### **Sales Orders list**

* Order number

* Customer

* Status (Draft/Confirmed/Delivered/Invoiced/Cancelled — or simpler)

* Total

* Linked quotation

* Owner

* Dates

### **Sales Order detail**

* Similar to quotation, but fewer editable controls.

* Tabs: Overview, Lines, Activity, Documents (optional)

---

## **G) Reminders/notes (unified Activity system)**

You want reminders/notes for Leads, Opportunities, Quotations, Sales Orders.

### **Activity types**

* **Note** (free text)

* **Reminder/Task** (due date/time, status open/done, assigned user)

* Optional: Call, Email, Meeting as "task categories"

### **UI component (consistent)**

In the right panel:

* Quick add "Note"

* Quick add "Reminder"

* Timeline list:

* Overdue reminders at top (red)

* Upcoming reminders

* Notes

* System events (stage changed, status changed, amount updated)

On list pages:

* Show "Next activity" column, clickable to open quick complete/reschedule.

---

## **5) Roles (simple but enough)**

Keep roles small, add permissions gradually.

1. **Admin**

 * Full access, settings, roles, delete records, manage pipelines/stages, manage teams.

2. **Sales Manager**

 * Manage team pipelines/boards, reassign owners, view all team records, approve discounts (optional), see revenue reports.

3. **Sales Rep**

 * Work on own leads/opportunities/quotes/orders, create/edit within permitted scope, personal views.

4. **Read-only / Finance**

 * Read access to contacts, quotes, orders; can export; can mark orders invoiced (if you need).

5. **Support (optional)**

 * Can view customers and notes, add activities, but cannot change pipeline financial fields.

Implementation-wise: role-based permissions + record-level rules:

* Reps can see their own + team's depending on settings.

* Managers can see all in their teams.

* Admin sees all.

# AGENTS.md — Diploi CRM Monorepo

## Project Overview

This is a monorepo for a CRM application built with **Laravel 11 + Inertia.js + React (TypeScript) + Tailwind CSS + PostgreSQL**, deployed via Diploi.

The repo contains two codebases:

| Path | Purpose | Modifiable? |
|------|---------|-------------|
| `/` (root) | Lovable-built React UI — **reference only** | ❌ Never modify |
| `/laravel` | Full-stack Laravel + Inertia.js app | ✅ All work goes here |

The Lovable UI (`src/`, `public/`, `index.html`, etc.) is a design reference. Extract component patterns, layouts, and styling from it, but **never edit it directly**. All production code lives under `/laravel`.

---

## Stack & Conventions

- **Backend:** Laravel 11 (PHP 8.2+), located in `/laravel`
- **Frontend:** React 18 + TypeScript, via Inertia.js (`/laravel/resources/js/`)
- **Styling:** Tailwind CSS (utility-first, no CSS modules)
- **Database:** PostgreSQL — connection URI: `postgres://postgres:postgres@postgres.postgres:5432/app`
- **ORM:** Eloquent (Laravel)
- **Routing:** Ziggy (`route()` helper in JS), Inertia `<Link>` components
- **Auth/Permissions:** Laravel Policies; frontend reads `auth.permissions` from Inertia shared data
- **Async jobs:** Laravel Queues (email, PDF generation); **no WebSockets yet**
- **Package manager:** Composer (PHP), npm/bun (JS)

---

## Directory Structure (under `/laravel`)

```
laravel/
├── app/
│   ├── Http/Controllers/      # Inertia controllers (thin, delegate to services)
│   ├── Models/                 # Eloquent models (match DB tables exactly)
│   ├── Policies/               # Authorization policies
│   ├── Services/               # Business logic (lead conversion, quote acceptance, etc.)
│   └── Jobs/                   # Queued jobs (SendQuotationEmail, GeneratePdf, etc.)
├── database/
│   ├── migrations/             # PostgreSQL migrations (source of truth for schema)
│   └── seeders/                # Dev seed data
├── resources/js/
│   ├── components/
│   │   ├── ui/                 # Button, Input, Select, Modal, Drawer, Badge, Tabs, Table, etc.
│   │   ├── layout/             # AppShell, Sidebar, Topbar, PageHeader, FiltersBar
│   │   ├── crm/                # KanbanBoard, KanbanColumn, KanbanCard, ActivityTimeline, etc.
│   │   └── forms/              # FormField, MoneyInput, PercentageInput, ProductSearchSelect, etc.
│   ├── pages/                  # Inertia pages (thin, composed of reusable components)
│   ├── types/                  # TypeScript interfaces matching backend DTOs
│   ├── hooks/                  # Shared React hooks (usePermissions, useFilters, etc.)
│   └── utils/                  # Helpers (can(), formatCurrency, etc.)
├── routes/
│   └── web.php                 # Inertia routes
└── config/
```

---

## Database Schema (Source of Truth)

Entity names **must** match the database. Never invent new entity names. If something is missing, add a `// TODO:` comment and a minimal placeholder type.

### Core Tables

| Domain | Tables |
|--------|--------|
| Users/Roles | `users`, `roles`, `role_user`, `teams`, `team_user` |
| Contacts | `contacts` (type: person/company, `parent_contact_id` for company relation) |
| Leads | `leads` (convertible to opportunities) |
| Pipeline | `opportunities`, `opportunity_stages` |
| Board Config | `pipeline_boards`, `pipeline_board_columns` |
| Products | `products` |
| Quotations | `quotations`, `quotation_lines` (line_type: item/section/note) |
| Sales Orders | `sales_orders`, `sales_order_lines` (line_type: item/section/note) |
| Activities | `activities` (polymorphic: `related_type` + `related_id`) |
| Tags | `tags`, `taggables` (polymorphic) |

### Key Relationships

- A **lead** converts to an **opportunity** (`leads.converted_opportunity_id`)
- An **opportunity** belongs to a **stage** and optionally a **contact**, **lead**, **team**
- A **quotation** links to a **contact** and optionally an **opportunity**
- Accepting a quotation creates a **sales order** (snapshot of quote lines)
- **Activities** are polymorphic: attached to leads, opportunities, quotations, sales orders, or contacts
- **Pipeline boards** can be personal (user) or team-scoped, with configurable column order and card fields

---

## Coding Rules

1. **Pages are thin.** Compose from reusable components; no giant single-file components.
2. **No duplicated UI logic.** If two pages share a pattern, abstract it.
3. **TypeScript types** under `resources/js/types/` must mirror backend DTOs.
4. **Permissions helper:** Use `can(permissionKey)` to conditionally show/hide UI actions.
5. **Data flow:** Inertia page props with typed DTOs. Use optimistic UI only where safe (e.g., stage move).
6. **Drawers** for entity quick view/edit (OpportunityDrawer, LeadDrawer, QuoteDrawer).
7. **List views** use DataTable + filters + saved views pattern.
8. **Entity detail pages** use 2-column layout: main content left, activity panel right.
9. **Kanban** supports drag-and-drop; keep implementation clean and replaceable.
10. **Currency** defaults to EUR; all money fields are `decimal(12,2)`.

---

## Key Backend Actions (Inertia Visits)

| Action | Route Pattern |
|--------|--------------|
| CRUD any entity | `POST/PUT/DELETE /entity` |
| Convert lead → opportunity | `POST /leads/{lead}/convert` |
| Move opportunity stage | `PUT /opportunities/{opportunity}/move` |
| Send quotation | `POST /quotations/{quotation}/send` |
| Accept quotation → create SO | `POST /quotations/{quotation}/accept` |
| Add activity (note/reminder) | `POST /activities` (polymorphic) |

---

## UX Principles

- **Fast, one-handed operation:** left nav + main canvas, minimal modals, keyboard shortcuts
- **One global search** across all entities
- **Activity-first:** same activity component everywhere
- **Personal + team views:** users create their own pipeline layouts within team pipelines
- **Modern CRM feel:** fast navigation, keyboard-friendly forms

You are working inside the `/laravel` directory of a monorepo. The repo root contains a Lovable-built React CRM UI that serves as a read-only design reference. All production code goes in `/laravel`.

Your task: Set up the Laravel + Inertia.js + React (TypeScript) + Tailwind CSS foundation.

Steps:
1. Install and configure Inertia.js server-side (Laravel adapter) and client-side (React adapter) in `/laravel`.
2. Configure Vite for React + TypeScript + Tailwind CSS in `/laravel`.
3. Set up the Inertia middleware (`HandleInertiaRequests`) to share:
   - `auth.user` (authenticated user with roles)
   - `auth.permissions` (flat object of permission keys → boolean)
   - `flash` messages
   - `ziggy` routes
4. Configure the PostgreSQL database connection in `.env`:
   DB_CONNECTION=pgsql
   DB_HOST=postgres.postgres
   DB_PORT=5432
   DB_DATABASE=app
   DB_USERNAME=postgres
   DB_PASSWORD=postgres
5. Create a base Inertia layout (`resources/js/layouts/AuthenticatedLayout.tsx`) with placeholder slots for sidebar, topbar, and main content.
6. Create a basic `resources/js/app.tsx` entry point that boots Inertia with React.
7. Verify the setup compiles and serves a "Hello CRM" page at the root route.

Do NOT create any CRM-specific pages or components yet. Focus purely on the scaffolding.

You are working in `/laravel`. Refer to the database schema defined in `AGENTS.md`.

Your task: Create all database migrations for the CRM schema using PostgreSQL.

Create migrations in this order (respecting foreign key dependencies):

1. `users` — add fields: timezone (default 'Europe/Helsinki'), locale, is_active (boolean)
2. `roles` — name (Admin, Sales Manager, Sales Rep, Finance, Support)
3. `role_user` — pivot with composite unique (user_id, role_id)
4. `teams` — name, description (nullable), manager_user_id (nullable FK to users)
5. `team_user` — pivot with role_in_team (nullable), unique (team_id, user_id)
6. `contacts` — type enum (person/company), name, company_name, parent_contact_id (self-referencing FK), email, phone, website, vat_number, address fields, owner_user_id FK. Add indexes on owner_user_id, parent_contact_id, email.
7. `leads` — title, contact_name, company_name, email, phone, source, status enum (new/contacted/qualified/disqualified/converted), disqualify_reason, estimated_value decimal(12,2), owner_user_id FK, team_id FK, converted_opportunity_id (nullable FK to opportunities — add after opportunities migration)
8. `opportunity_stages` — team_id (nullable FK), name, sort_order, is_won (default false), is_lost (default false)
9. `opportunities` — name, contact_id FK, lead_id FK, team_id FK, owner_user_id FK, stage_id FK, amount decimal(12,2), currency_code char(3) default 'EUR', expected_close_date, probability tinyint, status enum (open/won/lost), won_at, lost_at, lost_reason, last_stage_changed_at. Indexes on (team_id, stage_id), owner_user_id, expected_close_date.
10. `pipeline_boards` — name, scope enum (personal/team), team_id (nullable FK), user_id (nullable FK), default_filters json, card_fields json, sort json
11. `pipeline_board_columns` — pipeline_board_id FK, stage_id FK, sort_order, is_visible (default true). Unique (pipeline_board_id, stage_id).
12. `products` — sku (unique, nullable), name, description, sales_price decimal(12,2) default 0, cost_price decimal(12,2) nullable, currency_code char(3) default 'EUR', unit varchar(50) default 'pcs', is_active (default true)
13. `quotations` — quote_number (unique), status enum (draft/sent/accepted/rejected/expired), contact_id FK, opportunity_id FK (nullable), owner_user_id FK, team_id FK, currency_code, valid_until, notes_internal, notes_customer, subtotal, tax_total, total, sent_at, accepted_at
14. `quotation_lines` — quotation_id FK, line_type enum (item/section/note), sort_order, product_id FK (nullable), description, quantity decimal(12,3), unit, unit_price decimal(12,2), discount_percent decimal(5,2), tax_percent decimal(5,2), line_total decimal(12,2)
15. `sales_orders` — order_number (unique), status enum (draft/confirmed/fulfilled/invoiced/cancelled), contact_id FK, quotation_id FK (nullable), opportunity_id FK (nullable), owner_user_id FK, team_id FK, currency_code, subtotal, tax_total, total, confirmed_at
16. `sales_order_lines` — (same structure as quotation_lines, with sales_order_id FK)
17. `activities` — activity_type enum (note/task/call/email/meeting), subject, body, due_at (nullable), completed_at (nullable), status enum (open/done), assigned_user_id FK, created_by_user_id FK, related_type varchar(50), related_id bigint. Indexes on (related_type, related_id), (assigned_user_id, due_at), status.
18. `tags` — name (unique), color (nullable)
19. `taggables` — tag_id, taggable_type, taggable_id. Index on (taggable_type, taggable_id).
20. Add `converted_opportunity_id` FK to leads table (separate migration).

After writing all migrations, run `php artisan migrate` to verify they execute cleanly.

You are working in `/laravel`. The database migrations from the previous step are in place.

Your task: Create all Eloquent models with proper relationships, casts, and scopes.

For each model, define:
- `$fillable` or `$guarded` attributes
- `$casts` (especially for enums, decimals, dates, json fields)
- All relationships (`belongsTo`, `hasMany`, `belongsToMany`, `morphMany`, `morphTo`, `morphToMany`)
- Useful scopes where obvious (e.g., `Lead::scopeActive`, `Opportunity::scopeOpen`, `Activity::scopeOverdue`, `Activity::scopeDueToday`)

Models to create:
1. User — roles (belongsToMany), teams (belongsToMany), ownedContacts, ownedLeads, ownedOpportunities, assignedActivities, createdActivities, personalBoards
2. Role — users (belongsToMany)
3. Team — users (belongsToMany), manager (belongsTo User), leads, opportunities, quotations, salesOrders, stages, boards
4. Contact — parent (belongsTo self), children (hasMany self), leads, opportunities, quotations, salesOrders, activities (morphMany), tags (morphToMany), owner (belongsTo User)
5. Lead — contact relationship (optional), owner, team, convertedOpportunity, activities (morphMany), tags (morphToMany)
6. OpportunityStage — team, opportunities, boardColumns
7. Opportunity — contact, lead, team, owner, stage, quotations, salesOrders, activities (morphMany), tags (morphToMany)
8. PipelineBoard — team, user, columns (hasMany)
9. PipelineBoardColumn — board (belongsTo), stage (belongsTo)
10. Product — quotationLines, salesOrderLines
11. Quotation — contact, opportunity, owner, team, lines (hasMany), salesOrders, activities (morphMany)
12. QuotationLine — quotation, product
13. SalesOrder — contact, quotation, opportunity, owner, team, lines (hasMany), activities (morphMany)
14. SalesOrderLine — salesOrder, product
15. Activity — assignedUser, createdByUser, related (morphTo), polymorphic on related_type/related_id
16. Tag — taggables (morphedByMany for Contact, Lead, Opportunity)

Use `AGENTS.md` as the naming reference. If any table or relationship is ambiguous, add a `// TODO:` comment.

You are working in `/laravel/resources/js/`.

Your task: Create TypeScript type definitions and shared utilities.

1. Create `types/` directory with interfaces for all entities matching the backend DTOs:
   - `types/index.ts` — export all types
   - Types: User, Team, Role, Contact, Lead, Opportunity, OpportunityStage, Quotation, QuotationLine, SalesOrder, SalesOrderLine, Product, Activity, PipelineBoard, PipelineBoardColumn, Tag
   - Types for Inertia shared data: `PageProps` (extends InertiaPageProps with auth, flash, ziggy)
   - Types for filter/pagination: `PaginatedResponse<T>`, `Filters`, `SavedView`

2. Create `utils/permissions.ts`:
   - `can(permission: string): boolean` — reads from Inertia shared `auth.permissions`
   - Wrap it in a `usePermissions()` hook that returns `{ can }`

3. Create `utils/format.ts`:
   - `formatCurrency(amount: number, currency?: string): string`
   - `formatDate(date: string): string`
   - `formatRelativeDate(date: string): string`

4. Create `hooks/useFilters.ts`:
   - Hook for managing filter state with Inertia router (debounced search, URL-synced filters)

Keep types minimal but accurate. Use `// TODO:` for fields you're unsure about.

You are working in `/laravel/resources/js/components/`.

Your task: Create the base UI component library. Reference the Lovable UI at the repo root (`/src/`) for design patterns and styling, but create new, clean implementations.

Create under `components/ui/`:
1. `Button.tsx` — variants: primary, secondary, ghost, danger. Sizes: sm, md, lg. Loading state.
2. `Input.tsx` — text input with label, error state, help text.
3. `Select.tsx` — dropdown select with label and error state.
4. `Modal.tsx` — centered overlay modal with title, body, footer slots.
5. `Drawer.tsx` — right-side sliding panel (for entity quick view/edit).
6. `Badge.tsx` — status badges with color variants (e.g., for lead status, quote status).
7. `Tabs.tsx` — tab component with active state.
8. `DataTable.tsx` — sortable, paginated table that works with Inertia pagination.
9. `Dropdown.tsx` — action dropdown menu.
10. `Tooltip.tsx` — simple hover tooltip.
11. `Avatar.tsx` — user avatar with fallback initials.
12. `DatePicker.tsx` — date input (can use a simple native input for now, with TODO for upgrade).

All components should:
- Be fully typed with TypeScript props interfaces
- Use Tailwind CSS exclusively (no inline styles, no CSS modules)
- Be composable and accept `className` prop for extension
- Follow modern CRM aesthetic (clean, minimal, professional)

You are working in `/laravel/resources/js/components/layout/`.

Reference the Lovable UI's app shell design for the layout patterns.

Create:
1. `AppShell.tsx` — main layout wrapper with sidebar + topbar + content area.
2. `Sidebar.tsx` — collapsible left nav with links: Dashboard, Leads, Pipeline, Contacts, Products, Quotations, Sales Orders, Activities, Settings. Icons for each. Collapsed state shows icons only with tooltips. Persist collapse state.
3. `Topbar.tsx` — sticky top bar with:
   - Left: hamburger toggle for sidebar, logo/app name
   - Center: global search input (placeholder, wired later)
   - Right: "+ Create" dropdown (Lead, Opportunity, Contact, Quotation, Product, Activity), notification bell placeholder, user avatar menu (profile, sign out)
4. `PageHeader.tsx` — reusable page header with title, subtitle, context switchers slot, primary action button slot.
5. `FiltersBar.tsx` — horizontal bar of filter chips/dropdowns, reusable across list views.

Wire up `AppShell` as the authenticated layout in the Inertia app. All pages should render inside it.

You are working in `/laravel/resources/js/components/crm/`.

Create domain-specific CRM components:

1. `KanbanBoard.tsx` — horizontal scrolling board of columns. Accepts columns and cards as props. Supports drag-and-drop (use @dnd-kit/core or a simple implementation). Fires `onCardMove(cardId, fromColumn, toColumn)` callback.
2. `KanbanColumn.tsx` — single column with stage name, count, amount sum, and a list of cards.
3. `KanbanCard.tsx` — compact card showing: opportunity name, company/contact, amount + currency, expected close date pill, owner avatar, next activity indicator (red if overdue), up to 2 tags. Click fires `onCardClick`.
4. `ActivityTimeline.tsx` — vertical timeline of activities (notes, tasks, calls, emails, meetings). Shows overdue reminders at top (red), then upcoming, then notes, then system events. Each item shows type icon, subject, body preview, timestamp, assigned user.
5. `ActivityComposer.tsx` — quick add form for notes and reminders. Type selector (note/task/call/email/meeting), subject, body, due date, assigned user.
6. `EntityHeader.tsx` — reusable entity page header with: entity name, status badge, owner, team, quick action buttons.
7. `EntitySummaryCards.tsx` — summary stat cards (e.g., total value, open opportunities, quotes sent).

Keep drag-and-drop implementation clean and replaceable. Use callbacks, not direct Inertia calls inside components.

You are working in `/laravel/resources/js/components/forms/`.

Create specialized form components:

1. `FormField.tsx` — wrapper that provides label, error display, and help text for any form input.
2. `MoneyInput.tsx` — numeric input with currency symbol, formats to 2 decimal places, handles locale.
3. `PercentageInput.tsx` — numeric input constrained 0-100 with % suffix.
4. `ProductSearchSelect.tsx` — async typeahead search that queries `/products/search` endpoint. Shows product name, SKU, price. Fires `onSelect(product)`.
5. `ContactSearchSelect.tsx` — async typeahead search that queries `/contacts/search` endpoint. Shows contact name, company, type badge. Fires `onSelect(contact)`.

All form components should work with Inertia's `useForm()` hook. Accept `value`, `onChange`, and `error` props.

You are working in `/laravel`.

Create Inertia controllers, routes, and policies for Leads, Contacts, and Products.

For each entity, create:
- A controller (e.g., `LeadController`) with `index`, `show`, `create`, `store`, `update`, `destroy` methods
- A Policy (e.g., `LeadPolicy`) with `viewAny`, `view`, `create`, `update`, `delete` methods (stub logic based on roles)
- Routes in `routes/web.php` using `Route::resource()` with Inertia

Specific requirements:
1. **LeadController**:
   - `index` — paginated list with filters (status, source, owner, team, date range, tags), support saved views
   - `show` — lead detail with related activities, tabs data
   - `convert` — `POST /leads/{lead}/convert` — creates an Opportunity from the lead, optionally creates/links Contact, marks lead as converted

2. **ContactController**:
   - `index` — paginated list with filters (type, owner, tags)
   - `show` — contact detail with related opportunities, quotations, orders, activities

3. **ProductController**:
   - `index` — paginated list with filters (active, category)
   - `show` — product detail
   - `search` — `GET /products/search?q=` — returns JSON for typeahead (used by ProductSearchSelect)

Pass data to Inertia pages using typed props. Include `auth.permissions` in shared data for frontend permission checks.

You are working in `/laravel`.

Create controllers, routes, and policies for Pipeline, Quotations, Sales Orders, and Activities.

1. **OpportunityController**:
   - `index` — supports both Kanban and List view (toggle via query param). Returns stages + opportunities grouped by stage for Kanban mode.
   - `store`, `update`, `destroy`
   - `move` — `PUT /opportunities/{opportunity}/move` — updates stage_id and last_stage_changed_at. Use optimistic UI pattern (return minimal response).

2. **PipelineBoardController**:
   - `index` — list boards for current user (personal + team)
   - `store`, `update`, `destroy` — manage board configurations

3. **QuotationController**:
   - `index` — paginated list with filters
   - `show` — quotation detail with lines (supports item/section/note row types)
   - `store`, `update` — full quotation builder (create/update with lines in single request)
   - `send` — `POST /quotations/{quotation}/send` — marks as sent, queues email job
   - `accept` — `POST /quotations/{quotation}/accept` — marks as accepted, creates SalesOrder with snapshot of lines

4. **SalesOrderController**:
   - `index`, `show`, `update`

5. **ActivityController**:
   - `index` — "My Activities" with segments: overdue, due today, upcoming
   - `store` — create activity (polymorphic: pass `related_type` and `related_id`)
   - `update` — mark complete, reschedule
   - Supports note, task, call, email, meeting types

6. **SearchController**:
   - `GET /search?q=` — global search across contacts, leads, opportunities, quotes, orders, products. Return results grouped by entity type.

You are working in `/laravel/resources/js/pages/`.

Create Inertia pages for Leads, Contacts, and Products. Compose from the reusable components created earlier. Pages should be thin — logic lives in components and hooks.

1. **Leads/Index.tsx** — DataTable with filters (status, source, owner, team), saved views dropdown, "+ Lead" button, row actions (Qualify, Convert, Disqualify, Assign).
2. **Leads/Show.tsx** — 2-column: left main (header + tabs: Overview, Related) + right ActivityTimeline + ActivityComposer. "Convert to Opportunity" opens a Drawer with form fields.
3. **Contacts/Index.tsx** — DataTable with filters (type, owner, tags), row click navigates to detail.
4. **Contacts/Show.tsx** — 2-column: left main (tabs: Overview, Opportunities, Quotations, Orders) + right ActivityTimeline.
5. **Products/Index.tsx** — DataTable with filters (active, name search), "+ Product" button.
6. **Products/Show.tsx** — simple detail page with product info.

Each page receives typed Inertia props. Use `useForm()` for forms, `router.visit()` for navigation, `route()` for URL generation.

You are working in `/laravel/resources/js/pages/`.

Create remaining pages:

1. **Pipeline/Index.tsx** — Kanban view using KanbanBoard. Header: team selector, view selector (Kanban/List), saved views, filters (owner, team, stage, close date, tags, value range), "+ Opportunity" and "Customize view" buttons. Card click opens OpportunityDrawer. Drag-and-drop calls `move` endpoint.
2. **Pipeline/Show.tsx** — Opportunity detail (2-column with ActivityTimeline).
3. **Quotations/Index.tsx** — DataTable with filters (status, customer, date range), "+ Quotation" button.
4. **Quotations/Show.tsx** — Quotation builder page. Top header (quote number, status, customer search, linked opportunity, valid until, currency). Left 70%: line items grid (drag-to-reorder, product search, editable fields, section/note row types, "Add line" button, keyboard-friendly). Right 30%: totals card + activity panel. Actions: Save, Send, Mark Accepted, PDF Preview placeholder.
5. **SalesOrders/Index.tsx** — DataTable with filters.
6. **SalesOrders/Show.tsx** — Similar to quotation detail but fewer editable controls.
7. **Activities/Index.tsx** — "My Activities" list segmented: Overdue (red), Due Today, Upcoming. Each item shows type icon, subject, linked entity, due date, actions (complete, reschedule).
8. **Dashboard/Index.tsx** — Placeholder dashboard with summary cards.

Ensure all pages compile, use correct imports, and follow consistent styling.

You are working in `/laravel`.

Implement the authorization layer:

1. Define role-based permissions as constants/config:
   - **Admin**: full access to everything
   - **Sales Manager**: manage team pipelines/boards, reassign owners, view all team records
   - **Sales Rep**: CRUD own leads/opportunities/quotes/orders within permitted scope, personal views
   - **Finance (Read-only)**: read access to contacts, quotes, orders; can export; can mark orders invoiced
   - **Support**: view customers and notes, add activities, cannot change pipeline financial fields

2. Update `HandleInertiaRequests` middleware to compute and share `auth.permissions` as a flat `Record<string, boolean>` object. Include permissions like: `leads.create`, `leads.edit`, `leads.delete`, `leads.assign`, `opportunities.create`, `pipeline.customize_team`, `quotations.send`, `quotations.accept`, `products.view_cost`, etc.

3. Update all Policies to implement actual authorization checks based on roles and team membership.

4. Ensure frontend `can()` helper correctly reads from shared permissions. Add permission checks to all relevant UI elements (show/hide buttons, disable fields).

5. Seed a `DatabaseSeeder` with sample roles, a few users with different roles, a team, and sample data for development.

You are working in `/laravel`.

Final integration pass:

1. **Queued Jobs**:
   - `SendQuotationEmail` — triggered when quotation is marked as "sent"
   - `GenerateQuotationPdf` — placeholder job for PDF generation
   Configure the queue connection for database driver.

2. **Global Search**: Wire up the SearchController to the Topbar's global search input. Results grouped by entity type with keyboard navigation.

3. **"+ Create" Dropdown**: Wire up the Topbar create button to open the appropriate create form/drawer for each entity type.

4. **Settings Page** (stub): Create a basic Settings page accessible by Admin role, with placeholder sections for Teams, Stages, Roles.

5. **Error Handling**: Add Inertia error pages (403, 404, 500).

6. **Review all pages** for:
   - Correct TypeScript types (no `any`)
   - Consistent component usage
   - Permission checks on all CRUD actions
   - Proper loading states
   - Flash message display

7. Provide a summary of:
   - New component structure
   - Key reusable components created
   - TODOs for any missing backend endpoints or policies