Skip to main content

​
Overview

PhotoFlow’s task management system allows you to track photography orders through their entire lifecycle - from initial booking to final delivery. Each task represents an order or project with details like client information, due dates, and current status.

​
Task Data Model

Each task in PhotoFlow contains the following information: 
interface Task {
  id: number;                      // Unique identifier
  created_at: DateTime;             // Creation timestamp
  dueAt: DateTime;                  // Due date
  task: string;                     // Task name/title
  additional_information: string;   // Description/notes
  status: string;                   // Current status
  is_finished: boolean;             // Completion flag
  taskColumn: string;               // Kanban column ID
  amount_of_comments: number;       // Comment count
}
This maps to the Tasks table in PostgreSQL. See the Prisma schema for technical details.

​
Creating Tasks

There are multiple ways to create tasks in PhotoFlow:

​
Via Kanban Board

1

Navigate to Dashboard

Access the Kanban board at http://localhost:4173/dashboard
2

Click Add Task

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

Fill in Details

Complete the task form:
  • Task Name - Brief description (e.g., “Wedding Photography - Smith Family”)
  • Description - Additional details about the order
  • Due Date - When the task should be completed
  • Status - Current status of the order
4

Save

Click save to create the task. It will appear immediately in the selected column.
The task is created in the column where you clicked the button, so choose the appropriate starting column for your workflow.

​
Via API

Create tasks programmatically using the API endpoint: 
POST /api/createNewTask

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

Response:
"Successful!"

​
API Implementation

The task creation endpoint is implemented in src/routes/api/(tasks-clients)/createNewTask/+server.ts: 
export const POST: RequestHandler = async ({ request }) => {
  try {
    const { taskID, dueAt, task, additional_information, taskColumn, status } =
      await request.json();
    
    if (taskID) {
      // Update existing task
      await prisma.tasks.update({
        where: { id: taskID },
        data: {
          dueAt: new Date(dueAt),
          task,
          additional_information,
          taskColumn,
          status
        }
      });
      return json('Successful!');
    } else {
      // Create new task
      await prisma.tasks.create({
        data: {
          dueAt: new Date(dueAt),
          task,
          additional_information,
          status
        }
      });
    }
    return json('Successful!');
  } catch {
    return json('Invalid!');
  }
};
The same endpoint handles both task creation (no taskID) and updates (with taskID).

​
Updating Tasks

Modify task details at any time:

​
From Kanban Board

1

Click Task Card

Click on any task card on the Kanban board to open the edit modal.
2

Edit Fields

Update any field:
  • Task name
  • Description
  • Due date
  • Status
  • Column (workflow stage)
3

Save Changes

Click “Aufgabe aktualisieren” (Update Task) to save your changes.
All changes are immediately visible to other users on the network via real-time sync.

​
Using the Helper Function

PhotoFlow provides a utility function for programmatic updates in src/lib/utils/generalHelpers.ts: 
export async function updateCreateTask(
  taskID: string,
  taskStatus: string,
  taskName: string,
  taskDueAt: string,
  taskDescription: string,
  taskIsFinished: boolean,
  taskColumn: string
) {
  const response = await fetch('/api/createNewTask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      taskID,
      dueAt: new Date(taskDueAt).toISOString().split('T')[0],
      task: taskName,
      additional_information: taskDescription,
      status: taskStatus,
      is_finished: taskIsFinished,
      taskColumn
    })
  });

  return response.json();
}
Usage example: 
await updateCreateTask(
  "123",                           // Task ID
  "In Progress",                   // Status
  "Wedding - Smith",               // Name
  "2026-03-15",                    // Due date
  "Outdoor ceremony, 100 guests",  // Description
  false,                            // Not finished
  "2"                               // Column ID
);

​
Moving Tasks Between Columns

Tasks can be moved between workflow stages:

​
Drag and Drop

The easiest method:
  1. Click and hold a task card
  2. Drag it to the target column
  3. Release to drop
The task’s taskColumn is automatically updated in the database.

​
Edit Modal

Alternatively:
  1. Click the task to open the edit modal
  2. Change the column/status field
  3. Save changes
See Kanban Board for more details on drag-and-drop workflow.

​
Finishing Tasks

Mark tasks as complete when the order is delivered:

​
From Task Overview

1

Navigate to Task Overview

Click “Aufgabenübersicht” from the dashboard or go to /taskOverview
2

Find the Task

Locate the task you want to mark as finished
3

Mark as Finished

Click the finish button or checkbox next to the task

​
Via API

Finish tasks programmatically: 
POST /api/finishUserTask

Request Body:
{
  "taskID": 123
}

Response:
"Successful!"
Finished tasks are hidden from the Kanban board but remain in the database. You can view them in the Task Overview by filtering for completed tasks.

​
Deleting Tasks

Deleting tasks is permanent and cannot be undone. Consider marking tasks as finished instead.
Delete tasks via the API: 
POST /api/deleteUserTask

Request Body:
{
  "taskID": 123
}

Response:
"Successful!"
When a task is deleted:
  • The task record is removed from the database
  • All associated comments are deleted (cascading delete)
  • The change syncs to all connected clients

​
Viewing Tasks

​
Kanban Board View

The primary view showing active tasks organized by workflow stage:
  • Visual, drag-and-drop interface
  • Only shows unfinished tasks
  • Grouped by column
  • Real-time updates
Access at /dashboard

​
Task Overview

An alternative list view with more details:
  • All tasks in a sortable list
  • Filter by status, date, or completion
  • Bulk operations
  • Detailed information display
Access at /taskOverview

​
Task Filters

​
Active Tasks Only

By default, the Kanban board filters out finished tasks: 
const cards = data.kanban.filter(
  (c) => c.taskColumn === column.id && c.is_finished === false
);

​
By Column

Tasks are filtered by their taskColumn property to show only relevant cards in each column.

​
Custom Filtering

You can implement custom filters in the Task Overview or by modifying the API endpoints to filter by:
  • Date range
  • Status
  • Client name
  • Priority

​
Task Comments

Every task can have comments for team collaboration. The amount_of_comments field tracks how many comments exist: 
amount_of_comments: number;  // Auto-incremented when comments are added
See Task Comments for detailed information on commenting features.

​
Bulk Operations

​
CSV Import

Import multiple tasks at once from a CSV file. See Data Export/Import for details.

​
Batch Updates

For programmatic batch updates, you can loop through tasks and call the API: 
const tasksToUpdate = [123, 124, 125];

for (const taskId of tasksToUpdate) {
  await fetch('/api/createNewTask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      taskID: taskId,
      status: 'Completed',
      // ... other fields
    })
  });
}

​
Real-Time Sync

All task operations trigger real-time updates via Socket.io:
1

Operation Occurs

A user creates, updates, or deletes a task
2

Database Updated

The change is persisted to PostgreSQL
3

Event Broadcast

Socket.io emits an update event to all connected clients
4

Clients Refresh

All PCs automatically refresh to show the latest data
This ensures your team always sees the current state of all orders without manual refreshing.

​
Best Practices

Descriptive Names

Use clear, consistent naming:
  • Include client name
  • Add event type or order number
  • Keep it concise but informative

Accurate Due Dates

Set realistic due dates:
  • Account for all workflow stages
  • Build in buffer time
  • Update if timeline changes

Regular Updates

Keep tasks current:
  • Move tasks as work progresses
  • Add comments for status changes
  • Mark finished when complete

Use Descriptions

Add helpful details:
  • Special client requests
  • Location information
  • Technical requirements

​
Sorting Tasks

PhotoFlow includes a utility function for sorting in src/lib/utils/generalHelpers.ts: 
export const sort_by = (field: string, reverse: boolean | number, primer: Function) => {
  const key = primer
    ? function(x) { return primer(x[field]); }
    : function(x: Object) { return x[field]; };

  reverse = !reverse ? 1 : -1;

  return function(a, b) {
    return (a = key(a)), (b = key(b)), reverse * ((a > b) - (b > a));
  };
};
Usage example: 
// Sort by due date, ascending
tasks.sort(sort_by('dueAt', false, (date) => new Date(date)));

// Sort by task name, descending
tasks.sort(sort_by('task', true, null));

​
Validation

Task creation and updates include basic validation:
  • Required fields: Task name and due date are required
  • Date format: Due dates must be valid ISO date strings
  • Status: Status field accepts any string value
  • Column: Must reference a valid column ID
For custom validation, modify the API endpoints or add frontend validation in the TaskModal component.

​
Troubleshooting

  1. Check browser console for API errors
  2. Verify database connection is working
  3. Ensure all required fields are provided
  4. Check Socket.io is connected for real-time updates
  1. Verify you have a valid taskID
  2. Check the API response for error messages
  3. Ensure database permissions allow UPDATE operations
  4. Verify the task exists in the database
The Kanban board filters finished tasks automatically. If they’re appearing:
  1. Verify is_finished is set to true
  2. Check the filter logic in the page component
  3. Refresh the page
If changes don’t appear on other PCs:
  1. Check Socket.io connection status
  2. Verify VITE_SOCKET_URL is configured
  3. Ensure no firewall is blocking WebSocket connections
  4. Check server logs for errors

​
API Reference Summary

EndpointMethodPurpose
/api/createNewTaskPOSTCreate or update task
/api/getUserTasksPOSTRetrieve tasks
/api/finishUserTaskPOSTMark task as finished
/api/deleteUserTaskPOSTDelete task
See the respective files in src/routes/api/(tasks-clients)/ for implementation details.

​
Next Steps

Kanban Board

Learn about the visual workflow interface

Task Comments

Add comments to tasks for team collaboration

CSV Import/Export

Bulk import/export tasks via CSV files

Database Setup

Understand the database schema

Build docs developers (and LLMs) love

Get started for freeTalk to us