PCR Tracking
The PCR (Plant Change Request) tracking view provides a dashboard for managing all PCR requests, including creation, signature collection, and status monitoring.
Components
AllPcrWrapper
File: src/features/allPcr/AllPcrWrapper.tsx (~289 lines)
The top-level wrapper that fetches and displays all PCRs. It manages:
- Fetching PCR data from
/api/getAllPcr - Filtering PCRs by status and department
- Rendering individual PCR cards
- Navigation to individual PCR views
SinglePcrDisplay
File: src/features/allPcr/singlePcrDisplay.tsx (~862 lines)
The detail view for a single PCR. This component handles:
- Displaying all PCR form sections
- Signature collection and validation
- Status transitions
- Print layout for official documents
PCR Card Display
Each PCR card in the tracking view shows:
| Field | Source |
|---|---|
| PCR Number | pcr.pcr_num (auto-generated) |
| Title | pcr.form.title |
| Originator | Populated from pcr.originator_id |
| Status | pcr.status |
| Created Date | pcr.createdAt |
| Affected Parties | pcr.affectedParties array |
Status Flow
PCR status values and their visual indicators:
| Status | Badge Color | Meaning |
|---|---|---|
draft | Gray | Created but not submitted |
pending | Yellow | Submitted, awaiting signatures |
approved | Green | All required signatures collected |
declined | Red | Declined by a signer |
Signature System
The PCR uses a multi-party signature workflow. Each affected party must sign before the PCR is approved.
Signature logic file: src/features/allPcr/pcrShowUtils.ts
Signature Collection Flow
- Originator creates PCR and lists affected parties
- Each affected party receives a notification
- Affected parties review and add their signature
- When all signatures are collected, status changes to
approved - If any party declines, status changes to
declined
Signature Display
Signatures are displayed in a table format showing:
- Signer name and designation
- Department
- Date signed
- Signature image (drawn or uploaded)
- Status (signed / pending / declined)
Archive Table
File: src/features/mocTable/pcrTableWrapper.tsx (~542 lines)
Similar to the MOC archive, the PCR archive table provides:
- Sortable columns via TanStack React Table
- Pagination
- Status filtering
- Date range filtering
- Export functionality
Table Columns
| Column | Source | Sortable |
|---|---|---|
| PCR # | pcr.pcr_num | Yes |
| Title | pcr.form.title | Yes |
| Originator | pcr.originator_id.name | Yes |
| Department | pcr.originator_id.department | Yes |
| Status | pcr.status | Yes |
| Created | pcr.createdAt | Yes |
| Signatures | Count of collected / total | Yes |
PCR Creation Form
File: src/features/pcrForms/initationPcr.tsx (~453 lines)
The PCR creation form includes:
- Title and description fields
- Department selection
- Affected parties multi-select (from user list)
- Change description rich text editor (TipTap)
- File attachments (via Cloudinary/S3)
- Reason for change
Form Submission
POST /api/pcr
The form data is sent as a JSON body. On successful creation:
- PCR document is created in MongoDB
- Email notifications are sent to all affected parties
- In-app notifications are created
- User is redirected to the PCR tracking view
Route Structure
/dashboard/pcr → PCR tracking card view
/dashboard/pcr/create → New PCR creation form
/dashboard/pcr/[id] → Individual PCR detail view
/dashboard/pcr/archive → PCR archive table
Related Files
| Purpose | Path |
|---|---|
| PCR tracking wrapper | src/features/allPcr/AllPcrWrapper.tsx |
| Single PCR display | src/features/allPcr/singlePcrDisplay.tsx |
| PCR utilities | src/features/allPcr/pcrShowUtils.ts |
| PCR creation form | src/features/pcrForms/initationPcr.tsx |
| PCR archive table | src/features/mocTable/pcrTableWrapper.tsx |
| PCR API | src/app/api/pcr/route.ts |
| PCR model | src/models/pcr.ts |