Harden staff assignment

web/app/appointments/page.js

@@ -203,6 +203,7 @@ function AppointmentsPage() {
   const didPreselectRef = useRef(false);
 
   const [stores, setStores] = useState([]);
+  const [employees, setEmployees] = useState([]);
   const [services, setServices] = useState([]);
   const [allPets, setAllPets] = useState([]);
   const [customerPets, setCustomerPets] = useState([]);
@@ -210,6 +211,7 @@ function AppointmentsPage() {
 
   const [storeId, setStoreId] = useState("");
   const [serviceId, setServiceId] = useState("");
+  const [employeeId, setEmployeeId] = useState("");
   const [appointmentDate, setAppointmentDate] = useState("");
   const [appointmentTime, setAppointmentTime] = useState("");
   const [selectedPetIds, setSelectedPetIds] = useState([]);
@@ -302,6 +304,33 @@ function AppointmentsPage() {
     loadAppointments();
   }, [loadAppointments]);
 
+  useEffect(() => {
+    if (!token || !storeId) {
+      setEmployees([]);
+      setEmployeeId("");
+      return;
+    }
+
+    fetch(`${API_BASE}/api/v1/dropdowns/stores/${storeId}/employees`, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((r) => r.json())
+      .then((data) => setEmployees(Array.isArray(data) ? data : []))
+      .catch(() => setEmployees([]));
+  }, [token, storeId]);
+
+  useEffect(() => {
+    if (!employees.length) {
+      setEmployeeId("");
+      return;
+    }
+
+    const currentExists = employees.some((employee) => String(employee.id) === String(employeeId));
+    if (!currentExists) {
+      setEmployeeId(String(employees[0].id));
+    }
+  }, [employees, employeeId]);
+
   useEffect(() => {
     if (!storeId || !serviceId || !appointmentDate) {
       setAvailableSlots([]);
@@ -401,6 +430,7 @@ function AppointmentsPage() {
         customerId: user.customerId,
         storeId: Number(storeId),
         serviceId: Number(serviceId),
+        employeeId: employeeId ? Number(employeeId) : undefined,
         appointmentDate,
         appointmentTime: appointmentTime + ":00",
         appointmentStatus: "Booked",
@@ -513,6 +543,21 @@ function AppointmentsPage() {
               </select>
             </label>
 
+            {employees.length > 0 && (
+              <label className="appt-label">
+                Employee
+                <select
+                  className="appt-select"
+                  value={employeeId}
+                  onChange={(e) => setEmployeeId(e.target.value)}
+                >
+                  {employees.map((employee) => (
+                    <option key={employee.id} value={employee.id}>{employee.label}</option>
+                  ))}
+                </select>
+              </label>
+            )}
+
             {selectedService && (
               <div className="appt-service-info">
                 <p>{selectedService.serviceDesc}</p>