Adding Form Fields

This guide explains how to add new fields to MOC and PCR forms. The platform uses a component-based form architecture, so adding fields involves updating both the form component and the corresponding Mongoose model.

Adding a Field to a MOC Form

Step 1: Update the Mongoose Model

Open the model file for the form step you want to modify. All models are in src/models/.

Form Step	Model File
Originator	src/models/originator.ts
Implementer	src/models/implementer.ts
HSEQ	src/models/hseq.ts
Approver	src/models/approver.ts
Implementation	src/models/implementation.ts
Verifier	src/models/verifier.ts

Add the new field to the schema:

const originatorSchema = new mongoose.Schema(
  {
    // ...existing fields
    "new-field-name": { type: String, default: "" },
  },
  { strict: false, timestamps: true }
);

tip

All models use strict: false, which means MongoDB will accept fields not defined in the schema. However, defining fields explicitly ensures proper defaults and type validation.

Step 2: Update the Form Component

Open the corresponding form component under src/components/forms/:

Form Step	Component Directory
Originator	src/components/forms/orignator/
Implementer	src/components/forms/implementer/
HSEQ	src/components/forms/hseq/
Approval	src/components/forms/approval/
Implementation	src/components/forms/implementation/
Verification	src/components/forms/verification/

Add the new input field in the JSX:

<div className="form-group">
  <label htmlFor="new-field-name">New Field Label</label>
  <input
    type="text"
    id="new-field-name"
    value={formData["new-field-name"] || ""}
    onChange={(e) => handleChange("new-field-name", e.target.value)}
    disabled={!isEditing}
  />
</div>

Step 3: Update the Display Component

If the form has a read-only display view, update the corresponding display component in src/components/display components/ to show the new field:

<div className="display-row">
  <span className="label">New Field Label</span>
  <span className="value">{data["new-field-name"]}</span>
</div>

Adding a Boolean Table Row

Many forms use the BooleanTablePcr component for yes/no checklist tables. To add a new row:

1. Find the form component that renders the boolean table
2. Locate the array of row definitions
3. Add a new entry:

const rows = [
  // ...existing rows
  {
    label: "Has the environmental impact been assessed?",
    value: null,
    remarks: "",
  },
];

The boolean table automatically renders each row with a Yes/No toggle and remarks field.

Adding a Field to a PCR Form

Step 1: Update the PCR Model

File: src/models/pcr.ts

The PCR model stores form data inside a form object. Add the new field to the schema:

const pcrSchema = new mongoose.Schema(
  {
    originator_id: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
    form: {
      title: String,
      // ...existing form fields
      "new-field": { type: String, default: "" },
    },
    // ...other fields
  },
  { strict: false, timestamps: true }
);

Step 2: Update the PCR Form Component

File: src/features/pcrForms/initationPcr.tsx

Add the input field in the form JSX:

<div className="form-group">
  <label>New Field Label</label>
  <input
    type="text"
    value={form["new-field"] || ""}
    onChange={(e) => setForm({ ...form, "new-field": e.target.value })}
  />
</div>

Step 3: Update the PCR Display

File: src/features/allPcr/singlePcrDisplay.tsx

Add the field to the read-only display view.

Adding a New Form Step (Advanced)

Adding an entirely new step to the MOC workflow requires changes in multiple places:

1. Create a new Mongoose model in src/models/
2. Register the model in src/models/index.ts
3. Create a form component in src/components/forms/
4. Create a display component in src/components/display components/
5. Update the MOC model (src/models/moc.ts) to add a new ObjectId reference
6. Create/update API routes for the new step
7. Update the MOC detail page (src/app/dashboard/Moc/list/[moc_id]/page.tsx) to add a new tab
8. Update the submission pipeline if the step requires status advancement

This is a significant change and should be tested thoroughly before deployment.