Add work order detail/view page

- Create WorkOrderViewPage with details grid, status badge, and activity timeline
- Add /workorders/:id route for view, keep /workorders/edit/:id for edit
- List page now navigates to view page instead of edit
- Include comments and commenter fields in API response mapping

src/App.js

@@ -27,6 +27,7 @@ import LocationFormPage from "./pages/locations/form/LocationFormPage";
 
 // WORK ORDERS
 import WorkOrdersList from "./pages/workorders/list/List";
+import WorkOrderViewPage from "./pages/workorders/view/WorkOrderViewPage";
 import WorkOrderFormPage from "./pages/workorders/form/WorkOrderFormPage";
 
 // FOLLOW UPS
@@ -98,6 +99,7 @@ export default function App() {
                       {/* WORK ORDERS */}
                       <Route path="/workorders" element={<WorkOrdersList />} />
                       <Route path="/workorders/new" element={<WorkOrderFormPage />} />
+                      <Route path="/workorders/:id" element={<WorkOrderViewPage />} />
                       <Route path="/workorders/edit/:id" element={<WorkOrderFormPage />} />
 
                       {/* FOLLOW UPS */}

src/pages/workorders/api.js

@@ -28,6 +28,7 @@ export const getWorkOrderById = async (id) => {
       estimatedHours: wo.estimatedHours ?? "",
       po: wo.po ?? "",
       tt: wo.tt ?? "",
+      comments: wo.comments ?? [],
     };
   } catch (error) {
     console.error("Error fetching work order:", error);

src/pages/workorders/list/List.js

@@ -136,7 +136,7 @@ export default function WorkOrdersList() {
           loading={loading}
           error={err}
           rows={rows}
-          onEdit={(item) => navigate(`/workorders/edit/${item.id}`)}
+          onEdit={(item) => navigate(`/workorders/${item.id}`)}
           onDelete={handleDeleteClick}
           page={page}
           setPage={setPage}

src/pages/workorders/view/WorkOrderViewPage.css

@@ -0,0 +1,133 @@
+.woViewPage {
+  padding: 0;
+}
+
+.woViewHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0 20px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 20px;
+}
+
+.woViewTitle h2 {
+  margin: 0 0 8px 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: #333;
+}
+
+.woStatusBadge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+  background: #6c757d;
+}
+
+.woStatusBadge.open { background: #007bff; }
+.woStatusBadge.in-progress { background: #ffc107; color: #333; }
+.woStatusBadge.on-hold { background: #fd7e14; }
+.woStatusBadge.done, .woStatusBadge.completed { background: #28a745; }
+.woStatusBadge.cancelled { background: #dc3545; }
+
+.woViewActions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.woViewGrid {
+  padding: 0 20px;
+}
+
+.woViewSection {
+  margin-bottom: 24px;
+}
+
+.woViewSection h4 {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #666;
+  margin: 0 0 12px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.woFieldGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.woField {
+  display: flex;
+  flex-direction: column;
+}
+
+.woFieldLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #999;
+  margin-bottom: 2px;
+}
+
+.woFieldValue {
+  font-size: 14px;
+  color: #333;
+}
+
+.woDescription {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.6;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.woTimeline {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.woTimelineItem {
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border-left: 3px solid #007bff;
+}
+
+.woTimelineHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.woTimelineAuthor {
+  font-weight: 600;
+  font-size: 13px;
+  color: #333;
+}
+
+.woTimelineDate {
+  font-size: 12px;
+  color: #999;
+}
+
+.woTimelineBody {
+  font-size: 13px;
+  color: #555;
+  line-height: 1.5;
+}
+
+.loading {
+  padding: 40px;
+  text-align: center;
+  color: #999;
+}

src/pages/workorders/view/WorkOrderViewPage.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { getWorkOrderById } from "../api";
+import "./WorkOrderViewPage.css";
+
+export default function WorkOrderViewPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [wo, setWo] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await getWorkOrderById(id);
+        setWo(data);
+      } catch (err) {
+        toast.error("Failed to load work order");
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [id]);
+
+  if (loading) return <div className="woViewPage"><div className="loading">Loading...</div></div>;
+  if (!wo) return <div className="woViewPage"><div className="loading">Work order not found.</div></div>;
+
+  const statusClass = (wo.status || "").toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <div className="woViewPage">
+      <div className="panel panel-default panel-connected">
+        <div className="panel-body">
+          <ol className="breadcrumb breadcrumb-alt">
+            <li>
+              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/workorders"); }}>
+                Work Orders
+              </a>
+            </li>
+            <li className="active">{wo.workOrderNumber}</li>
+          </ol>
+
+          <div className="woViewHeader">
+            <div className="woViewTitle">
+              <h2>{wo.title}</h2>
+              <span className={`woStatusBadge ${statusClass}`}>{wo.status}</span>
+            </div>
+            <div className="woViewActions">
+              <button className="btn btn-primary" onClick={() => navigate(`/workorders/edit/${id}`)}>
+                Edit
+              </button>
+              <button className="btn btn-default" onClick={() => navigate("/workorders")}>
+                Back to List
+              </button>
+            </div>
+          </div>
+
+          <div className="woViewGrid">
+            <div className="woViewSection">
+              <h4>Details</h4>
+              <div className="woFieldGrid">
+                <div className="woField">
+                  <span className="woFieldLabel">WO #</span>
+                  <span className="woFieldValue">{wo.workOrderNumber}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">Priority</span>
+                  <span className="woFieldValue">{wo.priority || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">Location</span>
+                  <span className="woFieldValue">{wo.location || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">Assigned To</span>
+                  <span className="woFieldValue">{wo.assignedTo || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">Created</span>
+                  <span className="woFieldValue">{wo.createdDate || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">Due Date</span>
+                  <span className="woFieldValue">{wo.dueDate || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">PO</span>
+                  <span className="woFieldValue">{wo.po || "—"}</span>
+                </div>
+                <div className="woField">
+                  <span className="woFieldLabel">TT</span>
+                  <span className="woFieldValue">{wo.tt || "—"}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="woViewSection">
+              <h4>Description</h4>
+              <p className="woDescription">{wo.description || "No description provided."}</p>
+            </div>
+
+            {wo.comments && wo.comments.length > 0 && (
+              <div className="woViewSection">
+                <h4>Activity ({wo.comments.length})</h4>
+                <div className="woTimeline">
+                  {wo.comments.map((c) => (
+                    <div key={c.id} className="woTimelineItem">
+                      <div className="woTimelineHeader">
+                        <span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
+                        <span className="woTimelineDate">
+                          {c.createdDate ? new Date(c.createdDate).toLocaleString() : ""}
+                        </span>
+                      </div>
+                      <div className="woTimelineBody">{c.commenttext}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}