Tasks & Boards Management

<div class="features-wrapper"> <h2>Your Team's Project Command Center</h2> <p>The Tasks module is the entry point for all project management within Orbitus. It functions as a board directory — a visual grid showing all task boards created across your organization. Each board represents a distinct project, department, or workflow (e.g., "Software Development", "Marketing Campaigns", "Customer Onboarding"). From this page, you can create new boards, customize their appearance, manage visibility, set defaults, and navigate into any board's Kanban or List view.</p> <div class="feature-grid"> <div class="feature-card"> <h3>📋 Visual Board Grid</h3> <p>All existing boards are displayed in a responsive grid layout (1–5 columns depending on screen size). Each board card shows a colored header or custom cover image, board icon (from the Lucide icon library or a text fallback), board name, description, and metadata counters showing the number of <strong>columns</strong> and <strong>tasks</strong>. Default boards are marked with a gold star badge.</p> </div>

<div class="feature-card">
  <h3>🎨 Rich Board Customization</h3>
  <p>Each board offers deep visual customization via a context menu (three-dot icon on hover): <strong>Change Color</strong> from 12 preset colors or a custom color picker, <strong>Change Icon</strong> using the Lucide icon picker with search and favorites, <strong>Upload Cover Image</strong> (up to 10MB) with drag-to-reposition support, and <strong>Remove Cover</strong> to revert to the color header. All changes are saved instantly.</p>
</div>

<div class="feature-card">
  <h3>➕ Board Creation Dialog</h3>
  <p>Click the "Create Board" button to open a modal dialog with four fields: <strong>Name</strong> (required — the board's title), <strong>Description</strong> (optional — brief context), <strong>Color</strong> (10 preset swatches to choose from), and <strong>Visibility</strong> (Public or Members Only). The board is created instantly and appears in the grid.</p>
</div>

<div class="feature-card">
  <h3>⭐ Default Board &amp; Management</h3>
  <p>One board can be marked as the <strong>Default</strong> — this board is highlighted with a gold star badge and may serve as the primary workspace for new team members. The context menu also provides <strong>Delete Board</strong> (with confirmation dialog warning about permanent data loss) and <strong>Open Board</strong> for direct navigation.</p>
</div>

<div class="feature-card">
  <h3>🖼️ Cover Image Management</h3>
  <p>Upload a custom cover image to give each board a unique visual identity. After uploading, you can <strong>reposition</strong> the cover by entering reposition mode — drag the image up or down to adjust the vertical crop position, then click "Save" to persist the position. This creates visually distinctive boards that help teams quickly identify their workspace.</p>
</div>

<div class="feature-card">
  <h3>🔒 Visibility Control</h3>
  <p>Boards support two visibility levels: <strong>Public</strong> (visible to all authorized administrators) and <strong>Members Only</strong> (restricted to explicitly assigned team members). This ensures sensitive projects like "Executive Strategy" or "HR Reviews" remain confidential.</p>
</div>

</div> <h2>Board Creation Fields</h2> <table> <thead> <tr><th>Field</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr> </thead> <tbody> <tr><td><strong>Name</strong></td><td>Text Input</td><td>✅ Yes</td><td>—</td><td>Board title displayed on the card and in navigation</td></tr> <tr><td><strong>Description</strong></td><td>Textarea (2 rows)</td><td>❌ No</td><td>—</td><td>Brief description shown below the title on the card</td></tr> <tr><td><strong>Color</strong></td><td>Color Picker</td><td>✅ Yes</td><td>#6366f1 (indigo)</td><td>10 preset colors: indigo, violet, pink, red, orange, yellow, green, teal, blue, slate</td></tr> <tr><td><strong>Visibility</strong></td><td>Select Dropdown</td><td>✅ Yes</td><td>Public</td><td>Public (all admins) or Members Only (restricted access)</td></tr> </tbody> </table> <h2>Board Card Context Menu Actions</h2> <table> <thead> <tr><th>Action</th><th>Icon</th><th>Description</th></tr> </thead> <tbody> <tr><td>Open Board</td><td>🔗</td><td>Navigate to the board's Kanban view</td></tr> <tr><td>Set as Default</td><td>⭐</td><td>Mark this board as the organization's default (only for non-default boards)</td></tr> <tr><td>Change Color</td><td>🎨</td><td>Open inline color picker with 12 presets + custom hex input</td></tr> <tr><td>Change Icon</td><td>⭐</td><td>Open icon picker dialog with search, favorites, and the full Lucide library</td></tr> <tr><td>Change Cover</td><td>🖼️</td><td>Upload a cover image (max 10MB, image/* types)</td></tr> <tr><td>Reposition Cover</td><td>↕️</td><td>Enter drag mode to adjust cover image vertical position (only if cover exists)</td></tr> <tr><td>Remove Cover</td><td>✕</td><td>Remove the cover image and revert to color header (only if cover exists)</td></tr> <tr><td>Delete Board</td><td>🗑️</td><td>Permanently delete the board and all its columns/tasks (with confirmation dialog)</td></tr> </tbody> </table> <h2>Step-by-Step: Setting Up a New Project Board</h2> <ol> <li><strong>Navigate</strong> to <code>/admin/tasks</code>.</li> <li><strong>Click "Create Board"</strong> to open the creation dialog.</li> <li><strong>Enter Name</strong>: "Q2 Marketing Campaign".</li> <li><strong>Enter Description</strong>: "All tasks related to the Q2 product launch campaign".</li> <li><strong>Choose Color</strong>: Select pink (#ec4899) for marketing branding.</li> <li><strong>Set Visibility</strong>: Choose "Members Only" to restrict access to the marketing team.</li> <li><strong>Click Create</strong>: The board appears in the grid.</li> <li><strong>Upload Cover</strong>: Hover the new card, click the three-dot menu → "Change Cover" → upload the campaign banner image.</li> <li><strong>Reposition Cover</strong>: Click three-dot menu → "Reposition Cover" → drag to center the key visual → click "Save".</li> <li><strong>Set Icon</strong>: Click three-dot menu → "Change Icon" → search for "Megaphone" → select it.</li> <li><strong>Enter Board</strong>: Click the board card to navigate to the Kanban view and start creating columns (e.g., "To Do", "In Progress", "Review", "Done").</li> </ol> <div class="usecase-example"> <h3>Enterprise Use Case: Multi-Department Project Coordination</h3> <p>A mid-size SaaS company uses Orbitus Tasks to coordinate a major platform migration. The CTO creates 4 boards from the Tasks dashboard: <strong>"Infrastructure Migration"</strong> (blue, engineering icon, Members Only), <strong>"Data Migration"</strong> (teal, database icon, Members Only), <strong>"Customer Communication"</strong> (pink, megaphone icon, Public), and <strong>"Go-Live Checklist"</strong> (red, alert icon, Public). Each board gets a custom cover image from the project documentation. The "Go-Live Checklist" is marked as the <strong>Default</strong> board so that all stakeholders see it first when they open the Tasks module. Within each board, teams create Kanban columns matching their workflow stages. The grid dashboard provides the CTO an instant bird's-eye view: "Infrastructure" has 3 columns and 47 tasks, "Data" has 4 columns and 89 tasks — immediately revealing which workstream is the heaviest.</p> </div> </div>