client/src/components/EditEmployeeModal.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { DEPARTMENTS } from '../data/departments';
 
 const s = {
   overlay: {
@@ -133,7 +134,12 @@ export default function EditEmployeeModal({ employee, onClose, onSaved }) {
               <div style={s.label}>Full Name</div>
               <input style={s.input} value={name} onChange={e => setName(e.target.value)} />
               <div style={s.label}>Department</div>
-              <input style={s.input} value={department} onChange={e => setDepartment(e.target.value)} placeholder="Optional" />
+              <select style={s.select} value={department} onChange={e => setDepartment(e.target.value)}>
+                <option value="">-- Select Department --</option>
+                {DEPARTMENTS.map(d => (
+                  <option key={d} value={d}>{d}</option>
+                ))}
+              </select>
               <div style={s.label}>Supervisor</div>
               <input style={s.input} value={supervisor} onChange={e => setSupervisor(e.target.value)} placeholder="Optional" />
               <div style={s.row}>