MOC Tracking
The MOC tracking view is the primary dashboard for monitoring all active Management of Change requests. It presents MOCs as cards with status indicators, filters, and quick actions.
Components
MocTrackingCard
File: src/features/mocTracking/MocTrackingCard.tsx (~488 lines)
The main card component that displays a single MOC in the tracking view. Each card shows:
- Serial Number — Formatted as
{number}-{year}(e.g.,15-2026) - Status Badge — Color-coded current step indicator
- Title — MOC title from the originator form
- Originator — Name of the user who created the MOC
- Target Timeline — Due date from the implementer form
- Step Progress — Visual indicator showing which of the 6 steps is active
Status Indicators
Cards use color-coded badges to show the current step:
| Status | Color | Meaning |
|---|---|---|
| Originator | Blue | Step A — being created |
| Implementer | Orange | Step B — implementer review |
| HSEQ | Purple | Step C — HSEQ assessment |
| Approval | Yellow | Step D — awaiting approval |
| Implementation | Teal | Step E — being implemented |
| Verification | Green | Step F — verification |
| Completed | Gray | All steps done |
| Declined | Red | Declined at any step |
Sub-Components
The tracking card system includes several supporting components in src/features/mocTracking/:
| Component | Purpose |
|---|---|
MocTrackingCard.tsx | Main card layout and logic |
| Step indicator components | Progress bar showing 6-step state |
| Filter components | Dropdown filters for status, department, date range |
| Sort components | Sorting by serial number, date created, target timeline |
Data Flow
Dashboard Page
└─ GET /api/getAllMoc
└─ Returns array of MOC documents (populated)
└─ MocTrackingCard (one per MOC)
└─ onClick → navigate to /dashboard/Moc/list/[moc_id]
Filtering and Search
The tracking view supports multiple filter criteria:
- Status Filter — Filter by current step (originator, implementer, etc.)
- Department Filter — Filter by originator's department
- Date Range — Filter by creation date
- Search — Text search across serial number and title
- My MOCs — Toggle to show only MOCs where the current user is involved
Archive Table
For historical records and bulk operations, the archive table provides a tabular view:
File: src/features/mocTable/mocTableWrapper.tsx (~1163 lines)
The archive table uses TanStack React Table with:
- Column sorting on all fields
- Pagination with configurable page size
- Row selection for bulk actions
- Export capabilities
- Advanced column filtering
Table Columns
| Column | Source | Sortable |
|---|---|---|
| Serial # | moc.serial_num | Yes |
| Title | originator.title | Yes |
| Originator | originator.name | Yes |
| Department | originator.department | Yes |
| Status | moc.status | Yes |
| Created | moc.createdAt | Yes |
| Target Timeline | implementer.target-timeline | Yes |
| Last Updated | moc.updatedAt | Yes |
Route Structure
/dashboard/Moc → Tracking card view (active MOCs)
/dashboard/Moc/list → Archive table view
/dashboard/Moc/list/[id] → Individual MOC detail page
Related Files
| Purpose | Path |
|---|---|
| Tracking card | src/features/mocTracking/MocTrackingCard.tsx |
| Archive table | src/features/mocTable/mocTableWrapper.tsx |
| MOC list API | src/app/api/getAllMoc/route.ts |
| Dashboard layout | src/app/dashboard/layout.tsx |