Edit Report Implementation Summary

What Was Done

I've started creating a dedicated edit route at app/routes/reports_.$id.edit.tsx that mirrors the structure of reports_.new.tsx but with the following key differences:

Locked Fields (Cannot be edited):

Report Date - Displayed as read-only
Shift - Displayed as read-only badge
Area - Displayed as read-only
Dredger Location - Displayed as read-only
Reclamation Location - Displayed as read-only

Editable Fields (3 Steps):

Step 1: Pipeline Details

Dredger Line Length
Shore Connection
Reclamation Height (Base & Extra)
Pipeline Length (Main, Ext1, Reserve, Ext2)

Step 2: Equipment & Time Sheet

Equipment Statistics (Auto-calculated from timesheet)
Foreman selection
Workers selection (with autocomplete)
Time Sheet entries

Step 3: Stoppages & Notes

Stoppage entries
Additional notes

Next Steps Required

Due to file size limitations, the implementation needs to be completed with:

Helper Functions (same as new report):
- calculateTimeDifference
- calculateStoppageTime
- Time sheet management functions
- Stoppage management functions
- Worker selection functions
JSX Render with 3 steps showing:
- Locked fields display at the top
- Step 1: Pipeline details form
- Step 2: Equipment & timesheet
- Step 3: Stoppages & notes
- Navigation buttons

Update reports.tsx to change Edit button:

<Link
  to={`/reports/${report.id}/edit`}
  className="text-indigo-600 hover:text-indigo-900"
>
  Edit
</Link>

File Structure

Route: /reports/:id/edit
File: app/routes/reports_.$id.edit.tsx
Uses same multi-step wizard as new report
Preserves all existing data
Updates workers via ShiftWorker table

Permissions

Regular users (level 1): Can only edit their latest report
Supervisors/Admins (level 2+): Can edit any report
Cannot change core identifying fields (date, shift, locations)

2.0 KiB Raw Blame History