MPA Developer Spec ( Pseudo Code )

Updated Routing Structure (React Router v6+)

App.tsx

<Routes>

<Route element={<Layout />}>

<Route path=”/vessels” element={<VesselList />} />

<Route path=”/vessels/:vesselId/tasks” element={<MaintenanceView />} />

<Route path=”/vessels/:vesselId/equipment/*” element={<EquipmentRouter />} />

<Route path=”/vessels/:vesselId/documents/*” element={<DocumentRouter />} />

<Route path=”/vessels/:vesselId/checklists/*” element={<ChecklistRouter />} />

<Route path=”/vessels/:vesselId/logs/*” element={<LogRouter />} />

<Route path=”/all/tasks” element={<AllTasksPage />} />

<Route path=”/all/documents” element={<AllDocumentsPage />} />

<Route path=”/all/checklists” element={<AllChecklistsPage />} />

<Route path=”/all/logs” element={<AllLogsPage />} />

</Route>

</Routes>

Remove:

/vessel/:vesselid/*

Module Pages Read vesselId from URL

const { vesselId } = useParams();

Global “All” Table Selectors

Tasks

const selectAllTasks = createSelector(

[state => state.maintenance.tasks],

tasks => tasks || []

);

Documents

const selectAllDocuments = createSelector(

[state => state.documents.files, state => state.vessels.vessels],

(files, vessels) => (files || []).map(f => ({

…f,

vesselName: vessels.find(v => v.id === f.vesselId)?.name || “Unknown”

}))

);

Example “All Tasks” Page

function AllTasksPage() {

const navigate = useNavigate()

const tasks = useAppSelector(selectAllTasks)

const [filters, setFilters] = useState({

search: “”,

status: “any”,

vesselId: “any”

})

const rows = useMemo(() => {

let r = tasks

if (filters.vesselId !== “any”) r = r.filter(t => t.vesselId === filters.vesselId)

if (filters.status !== “any”) r = r.filter(t => t.status === filters.status)

if (filters.search) r = r.filter(t =>

t.name.toLowerCase().includes(filters.search.toLowerCase())

)

return r

}, [tasks, filters])

return (

<Page>

<PageHeader title=”All Tasks” />

<Table data={rows} columns={[

{ key: “name”, title: “Task” },

{ key: “vessel”, title: “Vessel”,

render: t => <Link onClick={() =>

navigate(`/vessels/${t.vesselId}/tasks`)

}>{t.vesselName}</Link>

}

]} />

</Page>

)

}