Kanban Board - PhotoFlow

Overview

The Kanban board is PhotoFlow’s central feature for managing photography orders. It provides a visual, drag-and-drop interface that makes it easy to track the status of every task at a glance.

The Kanban board replaces the pen-and-paper lists that many photography studios use, eliminating the need to constantly rewrite lists as tasks move through different stages.

Accessing the Kanban Board

The Kanban board is the main dashboard view, accessible at:

http://localhost:4173/dashboard

It’s the first screen you see when opening PhotoFlow.

Board Structure

Columns

The board is organized into columns representing different workflow stages. Each column contains tasks that are in that particular stage.

Column configuration is customizable in the source code. By default, PhotoFlow supports multiple workflow stages that you can adapt to your photography business needs.

Cards

Each task appears as a card within a column. Cards display:

Task Name

The order or project title (e.g., “Wedding Photography - Smith Family”)

Description

Additional details about the order

Time Remaining

Days until the due date

Status

Current status indicator

Drag and Drop Workflow

The core feature of the Kanban board is the ability to move tasks between columns by dragging and dropping.

How It Works

Click and Hold

Click on a task card and hold the mouse button down.

Drag to New Column

While holding, drag the card over the target column. The column will highlight with a dashed blue border.

Drop the Card

Release the mouse button to drop the card into the new column.

Automatic Sync

The task’s column is immediately updated in the database, and all other PCs on the network see the change instantly via Socket.io.

Technical Implementation

PhotoFlow uses custom drag-and-drop utilities located in src/lib/utils/dnd.ts:

// Column as drop zone
use:dropzone={{
  on_dropzone(card_id) {
    card_id = parseInt(card_id);
    const card = data.kanban.find((c) => c.id === card_id);
    card.taskColumn = column.id;
    data = data;
    updateKanbanDatabase(card);
  }
}}

// Card as draggable element
use:draggable={card.id}

When a card is dropped:

The card’s taskColumn property is updated
An API call updates the database
Socket.io broadcasts the change to all connected clients
All clients refresh to show the updated board state

Creating Tasks

Add new tasks directly from the Kanban board:

Click Add Task Button

At the bottom of any column, click the ”+ Neue Aufgabe hinzufügen” (Add New Task) button.

+ Neue Aufgabe hinzufügen

Fill Task Details

A modal appears with fields for:

Task Name - Order or project title
Description - Additional information about the photography order
Due Date - When the task should be completed
Status - Current status (in progress, waiting, etc.)

The task will be created in the column where you clicked the button.

Save

Click save, and the task immediately appears in the column.

API Endpoint

Task creation uses the /api/createNewTask endpoint:

POST /api/createNewTask

{
  "dueAt": "2026-03-15",
  "task": "Wedding Photography - Smith Family",
  "additional_information": "Outdoor ceremony, 100 guests, reception at Grand Hall",
  "status": "In Progress",
  "taskColumn": "1"
}

See Task Management for more details on task operations.

Editing Tasks

Update task details without leaving the Kanban view:

Click on a Card

Click anywhere on the task card to open the edit modal.

Modify Details

Update any field:

Task name
Description
Due date
Status

Save Changes

Click “Aufgabe aktualisieren” (Update Task) to save.

Changes are immediately visible to all users on the network.

Task Overview

For a different view of your tasks, access the Task Overview page:

http://localhost:4173/taskOverview

Click the “Aufgabenübersicht” button at the top of the Kanban board to navigate there. The Task Overview provides:

List view of all tasks
Filtering and sorting options
Detailed task information
Mark tasks as finished

Real-Time Synchronization

One of PhotoFlow’s most powerful features is real-time synchronization across all PCs on your network.

How It Works

User Makes a Change

Any user creates, updates, or moves a task on their PC.

Database Updated

The change is saved to the PostgreSQL database on the server PC.

Socket.io Broadcasts

The server emits a Socket.io event to all connected clients.

All Clients Refresh

Every PC receives the event and automatically refreshes the board - no manual refresh needed.

This solves the synchronization problem that occurs with Excel spreadsheets or shared files, where multiple users can create conflicts by editing simultaneously.

Testing Real-Time Sync

To verify synchronization is working:

Open PhotoFlow on two different PCs (or two browser windows)
Drag a task to a different column on one PC
Watch it update automatically on the other PC within seconds

Filtering and Organization

Hide Finished Tasks

By default, the Kanban board only shows active tasks:

const cards = data.kanban.filter(
  (c) => c.taskColumn === column.id && c.is_finished === false
);

Finished tasks are hidden from the board but remain in the database. Access them via the Task Overview page.

Column Organization

Each column displays:

Column header (e.g., “To Do”, “In Progress”, “Done”)
All tasks in that stage
Add task button at the bottom

Column definitions are configured in the page loader (+page.server.ts). You can customize column labels and IDs to match your workflow.

Keyboard Accessibility

While drag-and-drop is the primary interaction method, tasks can also be moved using:

Click to open task edit modal
Change the column/status in the form
Save changes

This provides an alternative for users who prefer keyboard navigation or have accessibility needs.

Visual Indicators

Drop Zone Highlighting

When dragging a card, columns highlight with a dashed blue border to show valid drop zones:

.column:global(.droppable) {
  border-radius: 0.5rem;
  outline-style: dashed;
  outline-offset: 2px;
  outline-color: #3b82f6;
  outline-width: 2px;
}

Time Indicators

Cards show time remaining until the due date:

Days remaining displayed on card
Color coding for urgency (configurable)
Visual warnings for overdue tasks

Best Practices

Clear Task Names

Use descriptive names that identify the order at a glance:

“Wedding - Smith (03/15)”
“Portrait Session - Johnson Family”

Consistent Columns

Define columns that match your actual workflow:

“Scheduled” → “In Progress” → “Editing” → “Ready for Delivery” → “Completed”

Use Descriptions

Add important details in the description field:

Special requests
Location information
Client contact preferences

Regular Updates

Move cards as soon as tasks progress to keep the board accurate and useful for the whole team.

Data Structure

Tasks in the Kanban board use this interface:

interface KanbanCard {
  id: number;
  dueAt: Date;
  task: string;
  additional_information: string;
  taskColumn: string;
  status: string;
  is_finished: boolean;
  amount_of_comments: number;
}

This maps directly to the Tasks table in PostgreSQL. See Database Setup for schema details.

Performance Considerations

Large Boards

For boards with many tasks (100+):

The board renders efficiently using Svelte’s reactive updates
Only visible cards are fully rendered
Drag-and-drop operations are optimized for smooth performance

Network Latency

In networks with higher latency:

Drag-and-drop provides immediate visual feedback
Database updates happen asynchronously
Socket.io reconnects automatically if connection drops

Troubleshooting

Cards not updating on other PCs

Check Socket.io connection:

Open browser console (F12)
Look for Socket.io connection errors
Verify VITE_SOCKET_URL is set correctly
Ensure no firewall is blocking WebSocket connections

Drag and drop not working

Ensure JavaScript is enabled
Try a different browser (Chrome/Firefox recommended)
Check browser console for errors
Verify you’re not in a column’s drag-disabled state

Tasks appearing in wrong columns

Verify task’s taskColumn value in database
Check column definitions match expected IDs
Try refreshing the page
Check for any JavaScript errors in console

Can't add new tasks

Verify database connection is working
Check API endpoint is accessible: /api/createNewTask
Review browser console for error messages
Ensure database user has INSERT permissions

Next Steps

Task Management

Learn about creating, updating, and finishing tasks

Comments

Add comments to tasks for team collaboration

Data Export

Export your Kanban data to CSV

Network Setup

Configure multi-PC access for your team

Get Started

Installation

Core Features

Configuration

Deployment

​Overview

​Accessing the Kanban Board

​Board Structure

​Columns

​Cards

Task Name

Description

Time Remaining

Status

​Drag and Drop Workflow

​How It Works

​Technical Implementation

​Creating Tasks

​API Endpoint

​Editing Tasks

​Task Overview

​Real-Time Synchronization

​How It Works

​Testing Real-Time Sync

​Filtering and Organization

​Hide Finished Tasks

​Column Organization

​Keyboard Accessibility

​Visual Indicators

​Drop Zone Highlighting

​Time Indicators

​Best Practices

Clear Task Names

Consistent Columns

Use Descriptions

Regular Updates

​Data Structure

​Performance Considerations

​Large Boards

​Network Latency

​Troubleshooting

​Next Steps

Task Management

Comments

Data Export

Network Setup

Build docs developers (and LLMs) love

Overview

Accessing the Kanban Board

Board Structure

Columns

Cards

Drag and Drop Workflow

How It Works

Technical Implementation

Creating Tasks

API Endpoint

Editing Tasks

Task Overview

Real-Time Synchronization

How It Works

Testing Real-Time Sync

Filtering and Organization

Hide Finished Tasks

Column Organization

Keyboard Accessibility

Visual Indicators

Drop Zone Highlighting

Time Indicators

Best Practices

Data Structure

Performance Considerations

Large Boards

Network Latency

Troubleshooting

Next Steps