shoc-frontend-new/src/pages/workorders/view/WorkOrderViewPage.js

import React, { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router";
import { toast } from "react-toastify";
import { getWorkOrderById } from "../api";
import "./WorkOrderViewPage.css";

function formatDateTime(value) {
  const d = new Date(value.endsWith("Z") ? value : value + "Z");
  if (isNaN(d)) return value;
  const date = d.toLocaleDateString("en-CA");
  const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
  const tz = d.toLocaleTimeString(undefined, { timeZoneName: "short" }).split(" ").pop();
  return `${date} ${time} ${tz}`;
}

function CommentTimeline({ comments }) {
  if (!comments || comments.length === 0) {
    return <p className="woNoComments">No comments yet.</p>;
  }

  return (
    <div className="woTimeline">
      {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 ? formatDateTime(c.createdDate) : ""}
            </span>
          </div>
          <div className="woTimelineBody">{c.commenttext}</div>
        </div>
      ))}
    </div>
  );
}

function AuditTimeline({ entries }) {
  if (!entries || entries.length === 0) {
    return <p className="woNoComments">No changes recorded.</p>;
  }

  return (
    <div className="woTimeline">
      {entries.map((e) => (
        <div key={e.id} className="woTimelineItem woAuditItem">
          <div className="woTimelineHeader">
            <span className="woTimelineAuthor">{e.userName || "System"}</span>
            <span className="woTimelineDate">
              {e.createdAt ? formatDateTime(e.createdAt) : ""}
            </span>
          </div>
          <div className="woTimelineBody">
            <span className="woAuditField">{e.fieldName}</span>
            {e.oldValue && <span className="woAuditOld">{e.oldValue}</span>}
            <span className="woAuditArrow">→</span>
            <span className="woAuditNew">{e.newValue}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function WorkOrderViewPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [wo, setWo] = useState(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState("customer");

  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, "-");

  const allComments = wo.comments || [];
  const customerComments = allComments.filter((c) => c.commentType === "customer");
  const vendorComments = allComments.filter((c) => c.commentType === "vendor");
  const internalComments = allComments.filter((c) => c.commentType === "internal");
  const auditLog = wo.auditLog || [];

  const tabs = [
    { key: "customer", label: "Customer", count: customerComments.length },
    { key: "vendor", label: "Vendor", count: vendorComments.length },
    { key: "internal", label: "Internal", count: internalComments.length },
    { key: "audit", label: "Audit Log", count: auditLog.length },
  ];

  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.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
                  </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>

            <div className="woViewSection">
              <h4>Activity</h4>
              <div className="woCommentTabs">
                {tabs.map((tab) => (
                  <button
                    key={tab.key}
                    className={`woCommentTab ${activeTab === tab.key ? "active" : ""}`}
                    onClick={() => setActiveTab(tab.key)}
                  >
                    {tab.label} ({tab.count})
                  </button>
                ))}
              </div>
              {activeTab === "customer" && <CommentTimeline comments={customerComments} />}
              {activeTab === "vendor" && <CommentTimeline comments={vendorComments} />}
              {activeTab === "internal" && <CommentTimeline comments={internalComments} />}
              {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}