Add Kanban view mode to WebPortal for proposals, orders and invoices

[gigarun]

Add Kanban view mode to WebPortal for invoices, orders and proposals

Summary

Add Kanban view mode to WebPortal module for customer-facing portal, allowing clients to view their invoices, orders, and proposals in a visual card-based layout instead of just table view.

Features

✅ View toggle buttons to switch between List and Kanban modes
✅ Responsive grid layout adapting to screen size (4/3/2/1 columns)
✅ Rich kanban cards displaying:

• Document reference
• Status badge (validated, paid, etc.)
• Total amount with tax
• Remainder to pay (for invoices)
• PDF download link
  ✅ Mode parameter persistence via URL and forms
  ✅ CSS styling with hover effects and smooth transitions

Technical Implementation

Modified Files

Core classes:

• htdocs/webportal/class/html.formlistwebportal.class.php
  • Added elementKanban() method for kanban rendering
  • Added renderKanbanCard() method for card generation
  • Support for mode parameter ('list' or 'kanban')

Controllers:

• htdocs/webportal/controllers/invoicelist.controller.class.php
• htdocs/webportal/controllers/orderlist.controller.class.php
• htdocs/webportal/controllers/propallist.controller.class.php
  • Added view toggle buttons in display() method
  • Pass mode parameter to elementList()

Styling:

• htdocs/public/webportal/css/kanban.css (new file)
  • Responsive grid with flexbox
  • Card styling with hover effects
  • Mobile-friendly breakpoints (@media queries)
• htdocs/public/webportal/css/style.css.php
  • Import kanban.css

Code Quality

• ✅ No database changes required
• ✅ Backward compatible (list view remains default)
• ✅ Respects existing webportal permissions
• ✅ Follows Dolibarr coding standards
• ✅ Reuses existing translation keys
• ✅ Multilingue support (fr_FR, en_US)

Testing

Tested with:

• ✅ Invoices with various statuses (draft, validated, paid, unpaid)
• ✅ Orders and proposals
• ✅ Desktop and mobile viewports
• ✅ French and English translations
• ✅ Pagination (multiple pages)
• ✅ Search filters applied
• ✅ Sorting by different fields

Screenshots

Desktop View (4 columns responsive grid)

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ FA2510-0001 │ │ FA2510-0002 │ │ FA2510-0003 │ │ FA2510-0004 │
│ Payé        │ │ Impayé      │ │ Validée     │ │ Payé        │
│ 1 234,56 €  │ │ 987,65 €    │ │ 456,78 €    │ │ 2 345,67 €  │
│ [📄 PDF]    │ │ Reste: 500€ │ │ Reste: 456€ │ │ [📄 PDF]    │
│             │ │ [📄 PDF]    │ │ [📄 PDF]    │ │             │
└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘

Mobile View (1 column stacked)

┌─────────────────────┐
│ FA2510-0001         │
│ Payé                │
│ Montant: 1 234,56 € │
│ [📄 PDF]            │
└─────────────────────┘
┌─────────────────────┐
│ FA2510-0002         │
│ Impayé              │
│ Montant: 987,65 €   │
│ Reste: 500,00 €     │
│ [📄 PDF]            │
└─────────────────────┘

Compatibility

• Dolibarr version: 22.0+ (tested on 22.0.2)
• PHP version: 7.4+ / 8.0+
• Browsers: Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile: Responsive design tested on iOS and Android

User Experience Improvements

Before (List view only):

• Table layout with many columns
• Difficult to read on mobile
• No visual hierarchy
• Lots of scrolling

After (Kanban option):

• Clean card-based interface
• Mobile-friendly responsive grid
• Visual status badges with colors
• Quick access to PDF downloads
• Easy scanning of important info

Future Enhancements (Out of scope for this PR)

Potential future additions could include:

• Drag & drop to change status (for internal kanban)
• Filters by status directly on kanban view
• Grouping by status columns (like Trello)
• Online payment button for unpaid invoices (requires payment modules)

Migration Notes

No migration required. This is a pure addition:

• Default behavior unchanged (list view)
• Users can opt-in to kanban view via toggle button
• No configuration changes needed
• Works immediately after upgrade

---

Pull Request Checklist:

• Code follows Dolibarr coding standards
• No PHP errors or warnings
• Tested on multiple browsers
• Responsive design verified
• No database schema changes
• Backward compatible
• Translation keys exist (reused from core)
• Documentation updated (inline comments)

---