Lesson 6 of 10 · 4 min
Reading the Jobs List: Cards, Table, and Bulk Actions
Navigate grid and table views, read job cards accurately, and use bulk selection to act on multiple jobs at once.
Reading the Jobs List: Cards, Table, and Bulk Actions
Video coming soon
Lesson Notes
The grid view renders JobCard components — one card per job. Each card shows: the property address with a map pin icon, the scheduled date and time (or 'Scheduling pending' in amber text if not yet set), the status badge with its color-coded icon (orange clock for Pending, blue calendar for Assigned, purple camera for In Progress, amber pencil for Editing, and green check for Delivered), the priority badge (Standard / Rush / Urgent), the client name, the assigned technician's avatar and name, and media type icons. On pending jobs with no assigned technician, a 'Find Technician' button appears on the card.
The table view adds a header row with column labels and renders all the same data in a compact row layout. The Status column in table view uses an inline JobStatusSelect dropdown — clicking the status badge opens a select control right in the row without opening the job detail. This is the fastest way to update status for multiple jobs one at a time in sequence. The Technician column shows the avatar + name or 'Unassigned' text. The Actions column on pending-and-unassigned rows has a 'Find Technician' button; all rows have a 'View' button that opens the sheet.
Bulk selection is available in the table view. A checkbox appears on the left of each row. Click a row's checkbox to select it; the header checkbox selects all jobs on the current page. When one or more jobs are selected, a bulk action bar appears above the table showing the count and four action buttons: Assign (opens a role-tab popover to assign Technician, Project Manager, Editor, or Customer to all selected jobs), Status (opens a dropdown to set all selected jobs to Pending / Assigned / In Progress / Editing / Delivered / Cancelled), Enable Delivery (activates the delivery link for all selected jobs — requires confirmation), and Delete (destroys all selected jobs — requires Owner or Admin role and confirmation). All bulk operations run in parallel via Promise.allSettled and report per-item success and failure counts via toast notifications.
When you select all jobs on the current page, a secondary banner appears below the bulk action bar: 'All N jobs on this page are selected. Select all X jobs.' Clicking this link fetches all matching job IDs across all pages (not just the current page) using the /projects/ids endpoint with the same filter parameters as the current view. The selection expands to every matching job in the database, and the banner changes to 'All X jobs are selected' with a 'Clear selection' link. This lets you, for example, set all 200 Pending jobs to Assigned in a single operation.
A Refresh from Aryeo button appears in the bulk action bar only when at least one selected job was imported from Aryeo (importSource === 'aryeo'). Clicking it re-fetches each selected Aryeo job from the Aryeo API and updates the local record. This is the mechanism for pulling updated media, scheduling, or order metadata from Aryeo without re-importing the job from scratch. The button count shows how many of the selected jobs are eligible for refresh.
Key Takeaways
- Grid view shows JobCard components; table view adds inline status dropdowns and checkboxes for bulk selection.
- Status, Technician, Priority, and Package are all visible without opening a job — table view is the fastest way to scan many jobs.
- Bulk actions (Assign, Status, Enable Delivery, Delete) run in parallel on all selected IDs and report success/failure per item.
- 'Select all X jobs' expands selection across all pages using a server-side ID fetch with the same active filters.
- Aryeo-imported jobs show a 'Refresh from Aryeo' bulk action for syncing updated data from the source platform.