Skip to main content

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:

FieldSource
PCR Numberpcr.pcr_num (auto-generated)
Titlepcr.form.title
OriginatorPopulated from pcr.originator_id
Statuspcr.status
Created Datepcr.createdAt
Affected Partiespcr.affectedParties array

Status Flow

PCR status values and their visual indicators:

StatusBadge ColorMeaning
draftGrayCreated but not submitted
pendingYellowSubmitted, awaiting signatures
approvedGreenAll required signatures collected
declinedRedDeclined 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

  1. Originator creates PCR and lists affected parties
  2. Each affected party receives a notification
  3. Affected parties review and add their signature
  4. When all signatures are collected, status changes to approved
  5. 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

ColumnSourceSortable
PCR #pcr.pcr_numYes
Titlepcr.form.titleYes
Originatorpcr.originator_id.nameYes
Departmentpcr.originator_id.departmentYes
Statuspcr.statusYes
Createdpcr.createdAtYes
SignaturesCount of collected / totalYes

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:

  1. PCR document is created in MongoDB
  2. Email notifications are sent to all affected parties
  3. In-app notifications are created
  4. 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
PurposePath
PCR tracking wrappersrc/features/allPcr/AllPcrWrapper.tsx
Single PCR displaysrc/features/allPcr/singlePcrDisplay.tsx
PCR utilitiessrc/features/allPcr/pcrShowUtils.ts
PCR creation formsrc/features/pcrForms/initationPcr.tsx
PCR archive tablesrc/features/mocTable/pcrTableWrapper.tsx
PCR APIsrc/app/api/pcr/route.ts
PCR modelsrc/models/pcr.ts