## **Objective** Design and implement a **Kanban board experience** within SuiteX that mirrors the simplicity of Trello while integrating directly with SuiteX project task data (sourced from NetSuite and stored locally in the tenant’s database). The Kanban will support two views: 1. A **Global Tenant Kanban View** for cross-project visibility. 2. A **Project-Specific Kanban Tab** for individual project context. The goal is to maintain a lightweight, responsive user experience that feels natural for project managers while enabling real-time collaboration similar to the Gantt chart. --- ## UI/UX Behavior Element | Behavior -- | -- Kanban Columns | Represent statuses or configured workflow stages. Cards can be dragged between them. Task Cards | Display task title, assignee, priority, due date (configurable fields). Drag & Drop | Changes task status; updates persist immediately to local DB. Broadcast Message | When a task is changed by another user, others see a “Load Changes” overlay. Load Changes Overlay | Matches Gantt style; reloads only the changed data segment. Filters (Global View) | User selects projects; no tasks load until a selection is made. Column Configurations | Tenant admins and project managers define column mapping and visibility. Quick Edit Panel | Allows inline edits for assignee, due date, and priority. Role-Based Layouts | Layouts can differ for admin, manager, and contributor roles. --- ## Technical Considerations Area | Specification -- | -- Frontend | React + Laravel Livewire hybrid component; state managed via Vuex or React context (depending on stack). Persistence | Local MySQL tenant database via Laravel ORM. Sync Model | NetSuite sync remains unchanged; writes are queued until existing cycle runs. Broadcasting | Reuse Gantt broadcast system with 5s throttling; configurable in kanban.php. Configuration Storage | New kanban_config model/table separate from timeline filters. Caching | Progressive rendering for >1k cards; virtual scroll or lazy loading. Security | Role-based access filters applied on server-side queries. Performance | Debounced event emission, selective re-render, indexed DB lookups. --- ## **PHASE 1 — Project Kanban (MVP)** ### **Goal** Deliver a project-specific Kanban tab pre-filtered by project with direct updates, local persistence, and broadcast integration. ### **Deliverables** * Project tab Kanban (pre-filtered to the active project). * Column layout based on NetSuite default task statuses (fixed). * Task cards representing SuiteX project tasks. * Drag-and-drop between columns updates task status. * Updates persist immediately to the local tenant database. * Broadcasts notify other users viewing the same project Kanban or Gantt that updates exist. * “Load Changes” overlay prompts users to refresh when updates are detected. ### **Acceptance Criteria** 1. The Kanban tab displays all project tasks for the active project grouped by NetSuite task status. 2. Moving a card between columns updates the task’s status immediately in the local database. 3. The system emits a broadcast event notifying other users viewing the same project Kanban or Gantt chart of updates. 4. The broadcast listener displays a “Load Changes” overlay prompting users to refresh their view. 5. Clicking “Load Changes” refreshes the entire kanban board. 6. Kanban updates are **local** until the existing NetSuite sync cycle runs. This uses the existing payload functionality. 7. Broadcasts are throttled — if a similar broadcast event for the same project occurred within 3 seconds, no new event is emitted. 8. The 3-second threshold is stored as a configurable constant in a Kanban configuration file. 9. Cards persist changes without requiring a “Save Changes” button. **Post-Launch Enhancements (Phase 1.1):** * Lazy loading or pagination for large projects (>1,000 tasks). --- ## **PHASE 2 — Global Kanban View** ### **Goal** Introduce a global tenant-level Kanban accessible from navigation, allowing multi-project visualization with user-defined filters. ### **Deliverables** * Global Kanban page accessible via iPaaS workspace navigation. * Displays no data until filters are applied. * Multi-select filter controls modeled after the Timeline view. * User-defined filters to select one or more projects. * Filter persistence (session-based). * Drag-and-drop task updates persist immediately to the database. * Broadcast notifications apply globally (across projects). * Role-based visibility controls (user can only view/edit permitted tasks). * Optimized query and staggered caching strategy to improve performance on multi-project loads. * Throttled broadcast emission (<5s identical event suppression). ### **Acceptance Criteria** 1. Global Kanban is accessible under the tenant’s navigation. 2. By default, no data loads until the user selects one or more projects via filters. 3. Filter UI supports multi-select and matches Timeline View’s style and functionality. 4. Cards represent tasks from all selected projects. 5. Updates made via drag-and-drop persist immediately and emit broadcasts to affected project channels. 6. Role-based access ensures users only see and edit permitted tasks. 7. Broadcast events appear across all Kanban and Gantt views for those projects. 8. Duplicate broadcasts within 5 seconds are suppressed (configurable constant). 9. The Kanban remains performant and responsive even when displaying >1,000 tasks across multiple projects. --- ## **PHASE 3 — Column Customization & Role Configuration** ### **Goal** Enable admins and project managers to define custom columns, map statuses, and create role-based board configurations. ### **Deliverables** * Column configuration UI (tenant admin + project manager access). * Define columns from: * Default NetSuite statuses. * Custom lists. * Filtered attributes (e.g., “Expedite,” “Blocked”). * Role-based column configurations. * Save and reuse Kanban layouts (e.g., “My Team View,” “QA Workflow”). * Dedicated Kanban configuration model separate from Timeline filters. * Card customization: choose visible fields (e.g., priority, due date, assignee). * Quick-edit support on cards. * Badge/label system (e.g., color-coded priority or risk). ### **Acceptance Criteria** 1. Tenant admins and project managers can access a column configuration panel. 2. Admins can define columns based on NetSuite statuses, custom lists, or attributes. 3. Custom configurations are stored in a separate Kanban configuration table. 4. Users can save and load Kanban layouts by name. 5. Configurations can be role-based (e.g., “Project Manager,” “Developer”). 6. Card fields are customizable and persist between sessions. 7. Cards display configurable labels (priority, risk, etc.). 8. Quick-edit options are available for common fields (status, assignee, due date). 9. All configuration changes are immediately persisted to the configuration table and do not affect other users until applied. --- ## **PHASE 4 — Backlog and Advanced Collaboration** ### **Goal** Integrate backlog handling, improved real-time collaboration, and advanced performance optimization. ### **Deliverables** * Backlog handling for “Not Started” tasks excluded from the main Kanban. * “To-Do” = first active column for “Ready for Work.” * Toggle to show/hide backlog column. * Enhanced broadcasting with debounced emission logic and visual refresh prompts. * “Load Changes” overlay reused for backlog visibility updates. * Pagination or virtual scrolling for large datasets. * Passive update model (webhook-based) to reduce polling. * Optional webhook-triggered overlay message: * “There are changes not currently visible. Click ‘Load Changes’ to update the Kanban chart.” ### **Acceptance Criteria** 1. Tasks in “Not Started” status appear in a separate backlog column. 2. The backlog column can be toggled on or off. 3. “To-Do” column represents the first active Kanban column. 4. Broadcasts use debounced logic — no duplicate emits within the 5-second threshold. 5. When updates occur externally, a “Load Changes” overlay appears. 6. Clicking “Load Changes” refreshes the board data incrementally. 7. The Kanban can display large datasets with pagination or virtual scrolling without significant browser slowdown. 8. A webhook or event-driven listener allows passive updates without constant backend polling. 9. The overlay message for new changes follows the Gantt format for UX consistency. --- ## **Global Implementation Notes** * **Persistence:** All updates write to the local tenant database immediately and sync to NetSuite on the next scheduled cycle. * **Broadcasting:** Use the existing Gantt broadcast system with configurable throttling. * **Configuration:** Store Kanban settings in a dedicated config model, separate from the Timeline View filters. * **Performance:** Avoid loading large task sets upfront; progressively render as users scroll or expand columns. * **Security:** Respect role-based permissions when displaying and editing cards.