MOC Detail Page

The MOC detail page is the central orchestrator for viewing and editing all six steps of a Management of Change request. It renders different form views depending on the user's role and the current MOC status.

File: src/app/dashboard/Moc/list/[moc_id]/page.tsx (~1024 lines)

Route

/dashboard/Moc/list/[moc_id]

The page is a server component that receives params.moc_id and fetches the full MOC document from the API.

Data Fetching

The page loads the MOC via the internal API route:

GET /api/newmoc?id={moc_id}

This returns the MOC document with all populated references (originator, implementer, hseq, approver, implementation, verifier).

Six-Step Form Architecture

The page manages six tabs, each corresponding to a step in the MOC workflow:

Tab Key	Step Name	Model	Form Component Path
a	Originator	originator	src/components/forms/orignator/
b	Implementer	implementer	src/components/forms/implementer/
c	HSEQ Assessment	hseq	src/components/forms/hseq/
d	Approval	approver	src/components/forms/approval/
e	Implementation	implementation	src/components/forms/implementation/
f	Verification	verifier	src/components/forms/verification/

Key Functions

getEditingForms()

Determines which form tabs are editable for the current user based on their role and the MOC's current status. Returns an object mapping tab keys to booleans.

Logic:

• Admins can edit all forms at any stage
• HSEQ users can edit forms c through f when the MOC reaches their stage
• Regular users can only edit forms they are assigned to (originator step)

previewOrEdit()

Toggles a form between preview mode (read-only) and edit mode. Uses state tracking to manage which tab is currently in edit mode.

validate()

Runs client-side validation on the current form before submission. Each form step has its own validation rules defined in its respective component.

submit()

Handles saving or submitting the current form step. The submission flow:

1. Validates the current form
2. Sends a PUT request to the corresponding API endpoint
3. Optionally triggers the submission pipeline (/api/submit/*) to advance the MOC status
4. Refreshes the page data

State Management

The page maintains several key state variables:

// Currently active tab
const [activeTab, setActiveTab] = useState("a");

// Edit mode flags per tab
const [editMode, setEditMode] = useState({});

// Form data for all six steps
const [formData, setFormData] = useState({});

// Loading and submission states
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);

Role-Based Rendering

The page adjusts its UI based on the authenticated user's role:

Role	Visible Tabs	Can Edit	Can Submit
Originator (owner)	a	a only	a → advances to b
Implementer (assigned)	a, b	b only	b → advances to c
HSEQ	a–f	c, d	c → d → advances to e
Admin	a–f	All	Any step
Viewer (other users)	a–f	None	No

Navigation Integration

The page integrates with the main dashboard sidebar. When viewing a MOC, the sidebar highlights the current MOC in the tracking list. The page also includes:

• A breadcrumb trail showing Dashboard → MOC → Serial Number
• A back button to return to the MOC tracking list
• Print functionality via the print MOC feature (src/features/print moc/)

Related Files

Purpose	Path
MOC API routes	src/app/api/newmoc/route.ts
Submission pipeline	src/app/api/submit/*/route.ts
Form wrapper components	src/components/forms/
Print feature	src/features/print moc/
MOC model	src/models/moc.ts