Work Orders

Manage active work orders through Kanban board and list views with drag-and-drop status updates

Overview

Work Orders are accepted maintenance requests that have been assigned to technicians. This module provides multiple views for tracking and managing active work orders through their lifecycle.

Work Orders are tickets with is_accepted = true. They progress through statuses: Pendiente → En Ejecución → Finalizadas.

View Modes

The Work Orders module supports two distinct view modes:

Board View (Kanban)

A visual Kanban board with columns for each status:

• Pendiente - Orders awaiting execution
• En Ejecución - Orders currently being worked on
• Finalizadas - Completed orders
• Archivadas (optional) - Archived orders

Drag & Drop

Move orders between columns by dragging tickets to update status

Visual Priority

Color-coded priority badges for quick identification

Quick Actions

Click any ticket to view details and edit

Real-time Sync

Changes sync instantly across all users

List View

A table-based view showing all work orders with detailed information:

• Sortable columns
• Pagination controls
• Quick edit access
• Bulk operations support

Grouping Modes

Organize work orders using different grouping strategies:

Manual

Manual Ordering

Arrange tickets in custom order within each column. Your order is saved locally and persists across sessions.

• Drag tickets vertically to reorder
• Order saved in browser localStorage
• Independent ordering per status column

Date Ascending

Date Ascending (Oldest First)

Sort tickets by incident date, oldest first.

• Prioritizes older issues
• Tickets without dates appear last
• Sorted automatically

Date Descending

Date Descending (Newest First)

Sort tickets by incident date, newest first.

• Shows recent issues first
• Tickets without dates appear last
• Sorted automatically

Advanced Filtering

Filter work orders using multiple criteria:

Search

Search by ID, title, description, or requester name (minimum 2 characters)

Location

Filter by facility location

Assignee

Filter by assigned technician (primary or secondary)

Priority

Multi-select: Baja, Media, Alta

Status

Multi-select: Pendiente, En Ejecución, Finalizadas

Date Range

Filter by creation date range

Images

Show only orders with attached images

Drag-and-Drop Status Changes

Update work order status by dragging tickets between columns:

1. Select a ticket

   Click and hold on any ticket card in the board view.

2. Drag to target column

   Drag the ticket to the desired status column (Pendiente, En Ejecución, or Finalizadas).

3. Drop to update

   Release the ticket in the target column. The status updates immediately.

4. Confirmation

   The ticket appears in the new column, and changes sync across all users.

Status changes are validated server-side. Only accepted, non-archived work orders can be moved. Permission checks are enforced by RLS policies.

Archiving Work Orders

Archive completed work orders to keep the board clean:

1. Open a work order by clicking on it
2. In the detail modal, click the “Archive” button
3. The work order moves to the Archivadas column (if visible)
4. Archived orders can be unarchived if needed

The Archivadas column is toggled on/off using the “Archivadas” button in board view. Archived orders remain in the database and can be restored.

Multi-Assignee Support

Work orders support primary and secondary assignees:

Primary Assignee

• Required for acceptance
• Main responsible technician
• Set during work request acceptance
• Displayed prominently on ticket cards

Secondary Assignees

• Optional support technicians
• Can be added after acceptance
• Multiple secondary assignees allowed
• Filter work orders by any assignee (primary or secondary)

import { setSecondaryAssignees } from '@/services/ticketService';

// Add secondary assignees to work order
await setSecondaryAssignees(workOrderId, [userId1, userId2]);

See ~/workspace/source/src/services/ticketService.ts:746 for implementation.

Data Model

interface WorkOrder {
  id: number;
  title: string;
  description: string;
  location_id: number;
  location_name?: string;
  priority: 'Baja' | 'Media' | 'Alta';
  status: 'Pendiente' | 'En Ejecución' | 'Finalizadas';
  assignee: string; // Primary assignee name
  assignee_id: number; // Primary assignee user ID
  requester: string;
  created_by: string;
  incident_date: string;
  image?: string;
  is_accepted: true; // Always true for work orders
  is_archived: boolean;
  finalized_at?: string;
  created_at: string;
  updated_at: string;
}

Service Integration

Loading Work Orders

import { getTicketsByWorkOrdersFiltersPaginated } from '@/services/ticketService';

const { data, count } = await getTicketsByWorkOrdersFiltersPaginated(
  {
    q: 'search term',
    location_id: 1,
    assignee_id: 5,
    priority: ['Alta'],
    status: ['Pendiente', 'En Ejecución'],
  },
  page,
  pageSize
);

See ~/workspace/source/src/services/ticketService.ts:530 for details.

Moving Status (Drag & Drop)

import { moveWorkOrderStatus } from '@/services/ticketService';

// Update work order status
await moveWorkOrderStatus(workOrderId, 'En Ejecución');

Validation at ~/workspace/source/src/services/ticketService.ts:164:

• Validates work order ID
• Checks status is valid
• Enforces is_accepted = true and is_archived = false
• RLS policies enforce permissions

Updating Work Orders

import { updateTicket } from '@/services/ticketService';

// Update work order fields
await updateTicket(workOrderId, {
  title: 'Updated title',
  priority: 'Alta',
  description: 'Updated description',
});

See ~/workspace/source/src/services/ticketService.ts:142 for the update method.

UI Components

WorkOrdersPage

Main page at ~/workspace/source/src/pages/WorkOrdersPage.tsx:20

Features:

• View switcher (Board / List)
• Grouping mode selector
• Archived column toggle
• Filter bar integration
• Modal for editing work orders

WorkOrdersBoard

Kanban board at ~/workspace/source/src/components/dashboard/workOrder/WorkOrdersBoard.tsx:181

Responsibilities:

• Render status columns
• Handle drag-and-drop
• Manage manual ordering
• Load and paginate work orders
• Real-time updates

WorkOrdersList

List view at ~/workspace/source/src/components/dashboard/workOrder/WorkOrdersList.tsx

Features:

• Tabular display
• Sortable columns
• Pagination
• Click to open detail modal

WorkOrdersFiltersBar

Filter bar at ~/workspace/source/src/components/dashboard/workOrder/WorkOrdersFiltersBar.tsx

Controls:

• Search input
• Location filter
• Assignee filter
• Priority multi-select
• Status multi-select
• Date range picker
• Image filter
• View mode switcher
• Grouping mode selector

Real-time Updates

Work orders sync in real-time:

import { onDataInvalidated } from '@/lib/dataInvalidation';

// Subscribe to changes
useEffect(() => {
  return onDataInvalidated('tickets', () => {
    // Reload work orders
    refreshWorkOrders();
  });
}, []);

Changes trigger reloads:

• Status updates
• Field edits
• Assignments
• Archive/unarchive
• Comments added

Permissions

View Work Orders

• Users see work orders for their location
• Technicians see orders assigned to them
• Admins see all work orders

Manage Work Orders

• Requires tickets:manage permission
• Update status, fields, assignees
• Archive/unarchive
• Add comments

RLS Policies

Database enforces access control:

• Row-level security on tickets table
• Status changes validated server-side
• Assignee filters use v_work_order_assignees_current view

Performance Optimization

Board Pagination

• Loads 200 tickets per page (configurable)
• Maximum 8 pages (1600 tickets)
• Filtered server-side via getTicketsByWorkOrdersFiltersPaginated

Manual Order Storage

• Saved in browser localStorage
• Key: work_orders_manual_order_v1
• Persists across sessions
• Syncs with server data on load

Server-side Filtering

All filters processed by database:

• Search uses ILIKE for text matching
• Location uses exact match
• Assignee uses subquery to v_work_order_assignees_current
• Priority and status use IN clause
• Date range uses GTE/LTE

Best Practices

For Technicians

1. Update Status Regularly - Move tickets as you start and complete work
2. Use Comments - Document progress and findings
3. Attach Completion Photos - Provide visual proof of completed work
4. Set Priorities - Adjust priority if issue severity changes

For Managers

1. Monitor Board Daily - Review ticket distribution and progress
2. Balance Workload - Reassign tickets if technicians are overloaded
3. Track Completion Times - Use finalized_at timestamps for metrics
4. Archive Completed Work - Keep active board focused on current work

Troubleshooting

Cannot drag tickets

• Check browser compatibility (modern browsers required)
• Verify you have edit permissions
• Ensure ticket is not archived
• Confirm ticket is accepted

Status not updating

• Check network connection
• Verify RLS permissions
• Ensure ticket meets validation criteria
• Check browser console for errors

Manual order not saving

• Verify localStorage is enabled
• Check storage quota (clear if full)
• Ensure JSON serialization works
• Try clearing saved order and recreating

Filter performance issues

• Reduce date range
• Use more specific filters
• Clear unused filters
• Check database indexes

Related Documentation

• Work Requests - Convert requests to work orders
• Kanban Board - Deep dive into Kanban functionality
• My Tickets - Personal ticket view
• Notifications - Get alerts for work order updates