botui/TODO.md

SMB Suite Implementation TODO

Overview

Complete sovereign SMB suite with CRM, Billing, Products, Tickets, and Forms. Following Microsoft Dynamics nomenclature (simplified for SMB).

---

✅ COMPLETED

• Create folder structure (crm, billing, products, tickets, forms)
• Create TODO.md
• Create /suite/crm/crm.html - Pipeline view (Kanban style)
• Create /suite/crm/crm.css - Styling
• Create /suite/billing/billing.html - Invoice list + dashboard
• Create /suite/billing/billing.css - Styling
• Create /suite/products/products.html - Product/Service catalog
• Create /suite/products/products.css - Styling
• Create /suite/tickets/tickets.html - AI-assisted support tickets
• Create /suite/tickets/tickets.css - Styling
• Create /suite/forms/forms.html - Redirect to Tasks with AI prompt
• Add CRM, Billing, Products, Tickets, Forms to dropdown menu
• Add i18n entries (en, pt-BR) for nav-crm, nav-billing, nav-products, nav-tickets, nav-forms

---

🔄 IN PROGRESS

Phase 1: Create HTML/CSS for New Apps

1.1 CRM (/suite/crm/)

• crm.html - Pipeline view (Kanban style)
• crm.css - Styling
• Entities (Dynamics nomenclature):
  • Lead - Unqualified prospect
  • Opportunity - Qualified, in sales process
  • Account - Company (converted customer)
  • Contact - Person at Account
  • Activity - Linked tasks/calls/emails

1.2 Billing (/suite/billing/)

• billing.html - Invoice list + dashboard
• billing.css - Styling
• Entities:
  • Invoice - Bill to customer
  • Payment - Payment received
  • Quote - Price quotation → converts to Invoice

1.3 Products (/suite/products/)

• products.html - Product/Service catalog
• products.css - Styling
• Entities:
  • Product - Physical/digital product
  • Service - Service offering
  • PriceList - Pricing tiers

1.4 Tickets (/suite/tickets/)

• tickets.html - AI-assisted support tickets
• tickets.css - Styling
• Entities:
  • Case - Support ticket (Dynamics term)
  • Resolution - AI-suggested solutions

1.5 Forms (/suite/forms/)

• forms.html - Redirect to Tasks with AI prompt
• Behavior: "Create a form for me about [topic]"

---

📋 TODO

Phase 2: Menu Integration (/suite/index.html)

• Add CRM to dropdown menu
• Add Billing to dropdown menu
• Add Products to dropdown menu
• Add Tickets to dropdown menu
• Add Forms to dropdown menu
• Update header tabs (add CRM)
• Update CSS breakpoints (/suite/css/app.css)

Phase 3: i18n Updates

English (/suite/js/i18n.js)

• nav-crm, nav-billing, nav-products, nav-tickets, nav-forms
• CRM: lead, opportunity, account, contact, pipeline, qualify, convert, won, lost
• Billing: invoice, payment, quote, due-date, overdue, paid, pending
• Products: product, service, price, sku, category, unit
• Tickets: case, priority, status, assigned, resolved, escalate

Portuguese (/suite/js/i18n.js)

• nav-crm: "CRM"
• nav-billing: "Faturamento"
• nav-products: "Produtos"
• nav-tickets: "Chamados"
• nav-forms: "Formulários"
• All entity labels in Portuguese

Phase 4: Chat @ Mentions

• Add @ autocomplete in chat input
• Entity types to reference:
  • @lead:name
  • @opportunity:name
  • @account:name
  • @contact:name
  • @invoice:number
  • @case:number
  • @product:name
• Show entity card on hover
• Navigate to entity on click

Phase 5: Reports (in Analytics/Dashboards)

CRM Reports

• Sales Pipeline (funnel)
• Lead Conversion Rate
• Opportunities by Stage
• Won/Lost Analysis
• Sales Forecast

Billing Reports

• Revenue Summary
• Aging Report (overdue invoices)
• Payment History
• Monthly Revenue

Support Reports

• Open Cases by Priority
• Resolution Time (avg)
• Cases by Category
• AI Resolution Rate

Phase 6: BotBook Documentation

• Add CRM chapter
• Add Billing chapter
• Add Products chapter
• Add Tickets chapter
• Document @ mentions
• Update SUMMARY.md

---

File Checklist

New Files to Create:

/suite/crm/crm.html
/suite/crm/crm.css
/suite/billing/billing.html
/suite/billing/billing.css
/suite/products/products.html
/suite/products/products.css
/suite/tickets/tickets.html
/suite/tickets/tickets.css
/suite/forms/forms.html

Files to Update:

/suite/index.html        - Menu items + HTMX routes
/suite/css/app.css       - Breakpoints for new tabs
/suite/js/i18n/en.json   - English labels
/suite/js/i18n/pt.json   - Portuguese labels
/suite/chat/chat.html    - @ mention UI
/suite/chat/chat.js      - @ autocomplete logic

BotBook Files:

/botbook/src/SUMMARY.md           - Add new chapters
/botbook/src/XX-crm/              - CRM documentation
/botbook/src/XX-billing/          - Billing documentation
/botbook/src/XX-products/         - Products documentation
/botbook/src/XX-tickets/          - Tickets documentation

---

Entity Relationships (Dynamics Style)

Lead ──(qualify)──► Opportunity ──(convert)──► Account + Contact
                         │
                         ▼
                       Quote ──(accept)──► Invoice ──(pay)──► Payment
                         │
                         └── Product/Service (line items)

Account ◄──► Contact (1:N)
Account ◄──► Case/Ticket (1:N)
Account ◄──► Invoice (1:N)
Account ◄──► Opportunity (1:N)

---

HTMX Patterns to Use

List with selection

<div hx-get="/api/crm/leads" hx-trigger="load" hx-target="#lead-list">
    Loading...
</div>

Pipeline drag-drop

<div class="pipeline-column" 
     hx-post="/api/crm/opportunity/{id}/stage" 
     hx-trigger="drop"
     hx-vals='{"stage": "qualified"}'>

@ Mention autocomplete

<input type="text" 
       hx-get="/api/search/entities?q=" 
       hx-trigger="keyup changed delay:300ms"
       hx-target="#mention-dropdown">

---

Notes

• Dynamics Nomenclature: Lead, Opportunity, Account, Contact, Case, Quote, Invoice
• SMB Focus: Simple, not enterprise complexity
• AI-First: Tickets use AI suggestions, Forms use AI generation
• HTMX: All interactions via HTMX
• Sovereign: No external dependencies, all data local
• @ Mentions: Reference any entity in chat with @type:name