From 0ccf8bdbbcdfb11b0e0647cc361865604a5bbf91 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Thu, 16 Apr 2026 17:45:19 -0400
Subject: [PATCH] Populate location dropdown from API in work order form

- Fetch locations from /api/Contact/GetLocations on mount
- Replace hardcoded dropdown options with dynamic list
- Switch form field from location (string) to locationId (int)
- Include locationId in API response mapping
---
 src/pages/workorders/api.js                   |  1 +
 .../workorders/form/WorkOrderFormPage.js      | 25 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/pages/workorders/api.js b/src/pages/workorders/api.js
index 28f12834..57f899e0 100644
--- a/src/pages/workorders/api.js
+++ b/src/pages/workorders/api.js
@@ -19,6 +19,7 @@ export const getWorkOrderById = async (id) => {
       workOrderNumber: wo.workerOrderNumber ?? wo.workOrderNumber ?? "",
       title: wo.title ?? wo.workerOrderTitle ?? "",
       location: wo.location ?? "",
+      locationId: wo.locationId != null ? String(wo.locationId) : "",
       assignedTo: wo.assignee ?? wo.assignedTo ?? "",
       dueDate: wo.dueDate ? wo.dueDate.split("T")[0] : "",
       createdDate: wo.createdDate ? wo.createdDate.split("T")[0] : "",
diff --git a/src/pages/workorders/form/WorkOrderFormPage.js b/src/pages/workorders/form/WorkOrderFormPage.js
index 94aa2e32..97a5aadb 100644
--- a/src/pages/workorders/form/WorkOrderFormPage.js
+++ b/src/pages/workorders/form/WorkOrderFormPage.js
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router";
 import { toast } from "react-toastify";
 import { getWorkOrderById, addWorkOrder, editWorkOrder } from "../api";
+import { get } from "../../../apiUtil";
+import { API_URL } from "../../../constants";
 import "./WorkOrderFormPage.css";
 
 export default function WorkOrderFormPage() {
@@ -12,7 +14,7 @@ export default function WorkOrderFormPage() {
   const [formData, setFormData] = useState({
     workOrderNumber: "",
     title: "",
-    location: "",
+    locationId: "",
     priority: "Medium",
     status: "Open",
     createdDate: new Date().toISOString().split("T")[0],
@@ -23,6 +25,13 @@ export default function WorkOrderFormPage() {
   });
 
   const [loading, setLoading] = useState(false);
+  const [locations, setLocations] = useState([]);
+
+  useEffect(() => {
+    get(`${API_URL}/Contact/GetLocations`)
+      .then((data) => setLocations(data || []))
+      .catch(() => {});
+  }, []);
 
   useEffect(() => {
     if (isEdit && id) {
@@ -151,19 +160,19 @@ export default function WorkOrderFormPage() {
                 <div className="row">
                   <div className="col-sm-6">
                     <div className="form-group">
-                      <label className="required-field" htmlFor="location">Location</label>
+                      <label className="required-field" htmlFor="locationId">Location</label>
                       <select
                         className="form-control"
-                        id="location"
-                        name="location"
-                        value={formData.location}
+                        id="locationId"
+                        name="locationId"
+                        value={formData.locationId}
                         onChange={handleChange}
                         required
                       >
                         <option value="">Select Location</option>
-                        <option value="Springfield Office">Springfield Office</option>
-                        <option value="Chicago Distribution Center">Chicago Distribution Center</option>
-                        <option value="Indianapolis Warehouse">Indianapolis Warehouse</option>
+                        {locations.map((loc) => (
+                          <option key={loc.id} value={loc.id}>{loc.name}</option>
+                        ))}
                       </select>
                     </div>
                   </div>