#10 — Roadmap

Project: crmoffice Last updated: 2026-05-30 Stack: Laravel 13.7 + Filament 5 + Tailwind 4 + Vue 3 + Inertia + MySQL + Meilisearch + Redis

Snapshot — what's built:

Metric	Count
Filament Resources	35
Eloquent Models	56
Database Migrations	63
Registered Routes	270+
Navigation Groups	9
Dashboard Widgets	7 (per-role visibility)
Report Pages	6
pSEO Routes	140+
User Roles	7
Docs files in /docs	17

---

#Phase 0 — Planning & Documentation

Status: ✅ Done (2026-05-14) Output: 17 doc files in /docs

Deliverable	Status
00-OVERVIEW.md	✅
01-PRD.md	✅
02-ERD.md	✅
03-ARCHITECTURE.md	✅
04-DATABASE-SCHEMA.md	✅
05-MODULES.md	✅
06-API-DESIGN.md	✅
07-ROLES-PERMISSIONS.md	✅
08-INTEGRATIONS.md	✅
09-PSEO.md	✅
10-ROADMAP.md	✅ (this file)
11-TECH-STACK.md	✅
12-USER-ACCESS-TUTORIAL.md	✅
13-DEPLOYMENT.md	✅
14-FLUTTER-MOBILE.md	✅
15-MULTI-TENANCY.md	✅
16-AI-FEATURES.md	✅
README.md (top-level)	✅

#Acceptance

• All 17 docs written and cross-linked
• ERD, schema, architecture, PRD reviewed for consistency

---

#Phase 1 — Foundation

Status: ✅ Done (2026-05-13 → 2026-05-15)

#Setup

• composer create-project laravel/laravel crmoffice → upgraded to 13.7
• Composer packages: filament 5, spatie/laravel-permission, spatie/laravel-medialibrary, laravel/sanctum, laravel/horizon, laravel/scout, meilisearch/meilisearch-php, pragmarx/google2fa-laravel, intervention/image, barryvdh/laravel-dompdf
• Tailwind 4 + Inertia + Vue 3 via Vite
• MySQL connection, Redis, Meilisearch configured
• Filament panel at /admin with custom premium theme.css (276 lines)
• Clean admin login — centered .fi-login-clean layout, no right-panel marketing, brand icon-only

#Auth & RBAC

• All 63 migrations — covers all tables in 04-DATABASE-SCHEMA.md
• User model + Sanctum API tokens + 2FA (TOTP via Google2FA)
• Spatie Permission seeder — full permission catalog
• Role seeder: 7 roles (owner, admin, sales, pm, support, accountant, staff)
• 2FA setup flow + RequireTwoFactor middleware
• Customer portal guard (customer guard, separate from web)
• Audit log table + automatic recording

#Core Domain Skeleton

• 56 Eloquent models with all relationships per ERD
• Custom field engine (polymorphic, JSON-based)
• File storage via Laravel Storage adapter (local + S3)
• Settings table + Filament admin page
• Provider model + Filament resource (dynamic integration config)
• Notification database table + bell icon component

#Acceptance

• php artisan migrate:fresh --seed runs clean
• Owner login at /admin, dashboard renders with widgets
• Contact portal guard functional, invitation flow wired
• All Filament resources scaffolded (even if minimal at this point)
• No console errors

---

#Phase 2 — Core CRM

Status: ✅ Done

#Clients & Contacts

• ClientResource — full CRUD with form sections, searchable, filterable
• ContactResource — full CRUD, primary toggle, portal invitation action
• Polymorphic Activities timeline on client/contact
• Polymorphic Notes on client/contact
• Custom fields rendered on client/contact forms

#Leads

• LeadResource — list view + kanban board view
• LeadSourceResource + LeadStatusResource CRUD
• Convert lead → client action
• Web-to-lead public endpoint
• Meilisearch index on Lead model

#Search

• Meilisearch setup complete
• Scout searchable trait on Client, Lead, Contact models
• Filament global search wired

#Acceptance

• Create client → add contacts → log activity → convert lead → see activity feed
• Portal access works for invited contact
• Meilisearch returns results under 300ms

---

#Phase 3 — Sales (Billing Core)

Status: ✅ Done

#Items, Tax, Currency

• ItemResource CRUD
• TaxRateResource CRUD
• CurrencyResource CRUD with rate management
• Number sequence service (atomic, configurable prefix per document type)

#Estimates

• EstimateResource with line items repeater + live total calculation
• PDF generation (Barryvdh/DomPDF, queued)
• Public estimate view /public/estimates/{token}
• Accept/decline public actions
• Convert estimate → invoice action

#Proposals

• ProposalResource with TipTap editor + merge tags
• Proposal template system
• Public proposal view /public/proposals/{token}
• Digital signature capture on public view (canvas + image)
• Accept/decline workflow

#Contracts

• ContractResource with TipTap editor
• Start/end date + renewal tracking
• Public sign flow
• Expiry tracking

#Invoices

• InvoiceResource with line items repeater
• Recurring invoice configuration + scheduled generation
• Multi-currency support
• PDF generation + download
• Public invoice view /public/invoices/{token} + pay button
• Mark-paid manually
• Apply credit note action

#Payments

• PaymentResource CRUD (manual record)
• Payment gateway webhook endpoint /webhooks/payment/{provider_id}
• ApplyPaymentToInvoice action
• Refund recording

#Credit Notes

• CreditNoteResource CRUD + apply-to-invoice action

#Expenses

• ExpenseResource CRUD
• ExpenseCategoryResource CRUD
• Billable flag on expenses

#Acceptance

• Estimate → Invoice → Payment flow end-to-end
• Recurring invoice generates correctly on schedule
• Public document views (estimate, proposal, contract, invoice) all render with token auth

---

#Phase 4 — Projects & Tasks

Status: ✅ Done

#Projects

• ProjectResource with tabs: overview, tasks, milestones, time, files, discussions, invoices, expenses, members
• Members management (multi-user assignment)
• Billing methods: fixed, hourly, milestone, non-billable

#Milestones

• MilestoneResource CRUD
• Auto-progress calculation from completed tasks
• Milestone-based invoicing action

#Tasks

• TaskResource — list view, kanban board view
• Multi-assignee support
• Priority levels, dependencies between tasks
• Checklist sub-items
• Custom Gantt chart page (Frappe Gantt JS)
• "My Tasks" filter for staff dashboard widget
• Visible-to-customer flag → portal view

#Time Entries

• TimeEntryResource CRUD
• Timer start/stop component (Alpine JS)
• Manual time entry
• Billable flag + invoice tracked time action

#Discussions

• DiscussionResource — per-project threaded discussions
• Nested replies support

#Portal — Project View

• /portal/projects — list of visible projects for logged-in contact
• /portal/projects/{id} — project detail with tasks, discussions, files

#Acceptance

• Project → milestones → tasks → time entries → invoice from time → paid
• Portal customer sees their project's progress
• Gantt chart renders with Frappe Gantt JS

---

#Phase 5 — Support

Status: ✅ Done

#Departments, Priorities, Statuses, SLA

• DepartmentResource CRUD
• TicketPriorityResource CRUD
• TicketStatusResource CRUD
• SLA policy configuration per department/priority

#Tickets

• TicketResource — queue view with priority + SLA timer display
• Conversation thread (replies tab, internal notes tab)
• Assign / escalate / status change actions
• File attachments on tickets + replies
• SLA checker scheduled command (every 1 minute)

#Email Pipe

• IMAP poll adapter — scheduled command
• Webhook inbound email route /webhooks/inbound-email/{token}
• Email-to-ticket logic: new ticket vs reply matching via [#TICKET-ID]
• Attachment extraction from inbound emails

#Knowledge Base

• KbCategoryResource CRUD
• KbArticleResource CRUD with TipTap editor
• Public KB pages (Blade views for SEO)
• Voting system (helpful/unhelpful, IP-rate-limited)
• Meilisearch index on KB articles

#Portal — Ticket View

• /portal/tickets — list + create new ticket
• /portal/tickets/{id} — view detail + replies

#Acceptance

• Email to support@ → creates ticket → agent replies → customer gets email update
• SLA breach triggers notification
• KB article published → indexed in sitemap + public view renders

---

#Phase 6 — Public Marketing + pSEO

Status: ✅ Done

#Marketing Landing Page (/)

• Hero section — value-prop headline + 2 CTA buttons
• Trust strip — 5 personas who benefit from CRM
• Problem/Solution — before/after card pair
• 8 feature sections with alternating layout (image left ↔ caption right)
• Screenshot gallery — 9 real app screenshots
• Use cases — 4 industry-specific personas
• Demo accounts table — all 7 roles + email + password
• Pricing — 3 tiers (Free, Growth, Enterprise/Whitelabel)
• Final CTA — full-width dark section
• Footer — product links, docs, contact
• Auth check → guest sees landing, logged-in redirects to /admin

#Documentation Page (/docs)

• Demo accounts table
• Navigation structure — card grid per group
• Step-by-step tutorial (8 phases, 25+ steps) following business flow
• Feature listing with real screenshots per navigation group
• Jump nav — sticky bar for quick section navigation
• CTA section — gradient card with link to admin

#pSEO Routes (140+)

• ProgrammaticSeoController with multiple route handlers
• Pattern: /best-crm-for-{industry} — top 10 listing per industry
• Pattern: /alternatives-to-{slug} — competitor alternatives
• Pattern: /compare/{a}-vs-{b} — head-to-head comparison pages
• Pattern: /crm-for-{use-case} — use-case landing pages
• Pattern: /best-crm-{year} — yearly roundups
• JSON-LD schema on every pSEO page (FAQPage, ItemList, Product)
• Meta tags: title, description, canonical, og:, twitter: on every page
• 300+ words unique content per page, generated from DB data
• Internal linking between pSEO pages

#Sitemap & SEO

• Dynamic sitemap.xml — cached, auto-includes all pSEO routes + public pages
• robots.txt — allow /, /docs, /kb, /marketing/, all pSEO patterns; disallow /admin, /api, /__pair, /webhooks
• Public document routes: /public/estimates/{token}, /public/proposals/{token}, /public/contracts/{token}, /public/invoices/{token}
• Public KB routes with full article views
• Public survey response page
• Web-to-lead public endpoint
• Newsletter subscription endpoint

#Acceptance

• 140+ pSEO routes return 200 with valid JSON-LD and 300+ words each
• Landing / renders full marketing page for guests
• /docs renders with all tutorial steps + screenshots + demo accounts
• Sitemap XML valid, robots.txt allows all public routes
• All public document views render via token auth

---

#Phase 6 Additions — Extra Polish (Completed Within Phase 6)

Status: ✅ Done

#Clean Admin Login

• Custom simple.blade.php — centered layout, no right-panel marketing
• .fi-login-clean CSS — max-width 420px, clean background, brand icon-only
• No double heading — Filament slot renders heading once

#Navigation Reorganization

• 9 navigation groups ordered by business flow:
  1. Master Data
  2. CRM
  3. Penjualan
  4. Finance
  5. Proyek
  6. Support
  7. Laporan
  8. Marketing
  9. Integrasi
• 35 Filament resources placed in correct groups
• Unique Heroicon per resource
• All labels in Bahasa Indonesia

#Dashboard Widgets (7 widgets, per-role visibility)

Widget	Visible To
StatsOverview	All roles
RevenueChartWidget	Owner, Admin, Accountant
RecentLeadsTable	Owner, Admin, Sales
PendingInvoicesTable	Owner, Admin, Accountant
MyTasksTable	PM, Staff (own tasks only)
SupportQueueTable	Owner, Admin, Support
AccountWidget	All roles (user info)

#Report Pages (6 pages)

Report	Description
SalesReport	Revenue by period, by client, by item; date range + group-by toggle
LeadsReport	Lead funnel, source breakdown, conversion rate
ProjectProfitabilityReport	Revenue vs cost per project, billable hours
TimeReport	Time entries by user/project/date range
TicketsReport	Avg response time, resolve time, SLA compliance
ExpenseReport	Expenses by category, by project, date range

• Each report: date filter, summary cards, chart (Chart.js), detail table, PDF export

#Customer Portal (/portal)

• Login/logout via customer guard
• Dashboard — stat cards: open invoices, active projects, open tickets
• /portal/invoices — list + detail + download PDF + upload payment proof
• /portal/projects — list + detail with tasks, discussions, progress
• /portal/tickets — list, create new, view detail + replies
• All Blade views, clean layout, responsive

#Acceptance

• Each role sees correct dashboard widgets
• All 6 report pages render with charts + data
• Customer portal flows: login → view invoices → view projects → submit ticket

---

#Phase 7 — Cross-Cutting & Polish

Status: ⬜️ Pending

#Notifications (Event-Driven)

• All event-driven email notifications: assigned, mentioned, SLA breached, due-date, invoice paid, contract expiring
• Notification preference UI per user
• Bell icon real-time (polling fallback, optional Pusher/Reverb)

#Survey — Public UX

• Public survey response page — clean form with progress bar
• Aggregate results view for admin

#i18n (Internationalization)

• Extract all UI strings to lang/ directory
• id (Bahasa Indonesia) + en (English) translations
• Per-user locale preference
• Email + PDF templates rendered in user's locale

#Advanced Search

• Filament global search across all resources
• /api/v1/search endpoint for frontend / Flutter

#Calendar

• ICS calendar feed — export tasks, milestones, ticket deadlines
• Calendar dashboard widget aggregating upcoming due dates

#Bulk Operations

• Bulk assign leads
• Bulk send invoices
• Bulk status change on tickets
• Bulk CSV export

#Advanced PDF Templates

• Multiple invoice/estimate template designs
• Per-brand PDF template selection
• Custom template upload

#Acceptance

• All 30 user stories from PRD passing acceptance
• 100+ feature tests, 200+ unit tests
• Coverage ≥ 70% on Domain + Actions
• All Filament resources keyboard-accessible

---

#Phase 8 — Hardening & Launch

Status: ⬜️ Pending

• CI pipeline — GitHub Actions with: pest, phpstan (level 5+), php-cs-fixer, Lighthouse CI
• PEST test coverage — target 200+ tests, 300+ assertions
• Rate limit tuning — per-route sensible limits, throttle middleware audit
• Security review — OWASP top 10, SSRF guard on provider URLs, log scrubbing for credentials
• Deploy guide final — Forge / Ploi / Docker Compose, .env.example complete, deploy/nginx.conf, deploy/supervisor.conf
• Backup strategy — mysqldump cron + S3 sync, recovery drill documented
• Production monitoring — Sentry integration, /healthz endpoint
• Load test — k6 or Artillery, 1000 concurrent users
• Final polish — empty states, loading spinners, error pages (403, 404, 500, 503)
• Release notes v1.0

#Acceptance

• CI pipeline green on every push
• All pest tests passing
• phpstan level 5 — zero errors
• Deploy guide executable in under 30 minutes
• Load test passes under 2s p95 response time

---

#Phase 9 — Post-MVP

Status: ⬜️ Deferred

#Flutter Mobile App (Staff + Customer)

Effort: 30+ days separate project

• Staff app: leads, tasks, time tracking (start/stop timer), tickets, calendar
• Customer app: invoices (pay), tickets (submit/reply), projects (view progress), KB
• Shared API already built in Phase 1–7 via Sanctum
• Push notifications (FCM)
• Offline-first with local cache
• Repo: D:\project flutter\crmoffice\ or mobile/ subfolder

#Multi-Tenancy

Effort: 14–21 days

• Decision: stancl/tenancy — database-per-tenant
• Tenant registration flow
• Subdomain routing
• Per-tenant branding

#AI Features (BYO LLM)

Effort: 10–14 days

• Generic LLM adapter already architected (Provider model) in Phase 1
• AI proposal drafting (lead context → proposal draft)
• AI ticket auto-tagging
• AI KB suggestion engine
• AI email summarization

#Workflow Automation (Zapier-style)

Effort: 21–30 days

• Trigger/action DSL
• Drag-drop node UI builder
• Webhook triggers + condition + action chains

#Marketplace Integrations

Effort: 14–21 days

• Pre-built connectors: WooCommerce, Shopify, Tokopedia, Shopee
• Order → invoice sync, inventory sync
• Abstracted via Provider model pattern

---

#Risk Register

Risk	Mitigation
Scope creep on pSEO content quality	pseo:audit gate in CI, owner sign-off on first 20 pages before scaling
Payment adapter format coverage	Start with redirect_flow (covers 80%); add embed/qr as user demand
Email pipe edge cases (attachments, threading)	Test against real Gmail/Outlook/Yahoo for first 2 weeks; iterate
Performance with 100k+ rows	Read replica + Meilisearch + cached aggregations from day 1
Filament UX rigidity for complex screens	Custom Pages for Kanban, Gantt, Reports; don't force into ResourceTable
Custom fields normalize vs JSON tradeoff	Hybrid (JSON denorm + mirror table) — pay for both, never refactor
Multi-currency reporting confusion	Each invoice forever in own currency; reports use snapshot rate
Customer portal session management	Strict separation of guards; tested with concurrent admin + portal login
Phase 7–9 timeline slip	Phases independent except testing; can parallelize or defer Phase 9

---

#Open Decisions

• Final brand colors + logo (for Filament theme + emails)
• Default invoice template design (1 to start; multiple in Phase 7)
• Hosting target: Forge vs Ploi vs self-hosted Docker (affects deploy docs)
• Initial demo content seeder (for sales demo — 10 clients, 50 leads, 30 invoices, 20 tickets)
• License model: MIT? Polyform Shield? GPL? Custom? (affects publishability)
• Domain name for production deployment (affects APP_URL, sitemap, OG tags, robots.txt)

---