feat: replace department text input with preloaded select dropdown

client/src/components/ViolationForm.jsx

@@ -6,6 +6,7 @@ import CpasBadge from './CpasBadge';
 import TierWarning from './TierWarning';
 import ViolationHistory from './ViolationHistory';
 import { useToast } from './ToastProvider';
+import { DEPARTMENTS } from '../data/departments';
 
 const s = {
   content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
@@ -171,12 +172,21 @@ export default function ViolationForm() {
         )}
 
         <div style={s.grid}>
-          {[['employeeName','Employee Name','text','John Doe'],['department','Department','text','Engineering'],['supervisor','Supervisor Name','text','Jane Smith'],['witnessName','Witness Name (Officer)','text','Officer Name']].map(([name,label,type,ph]) => (
+          {[['employeeName','Employee Name','John Doe'],['supervisor','Supervisor Name','Jane Smith'],['witnessName','Witness Name (Officer)','Officer Name']].map(([name,label,ph]) => (
             <div key={name} style={s.item}>
               <label style={s.label}>{label}:</label>
-              <input style={s.input} type={type} name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
+              <input style={s.input} type="text" name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
             </div>
           ))}
+          <div style={s.item}>
+            <label style={s.label}>Department:</label>
+            <select style={s.input} name="department" value={form.department} onChange={handleChange}>
+              <option value="">-- Select Department --</option>
+              {DEPARTMENTS.map(d => (
+                <option key={d} value={d}>{d}</option>
+              ))}
+            </select>
+          </div>
         </div>
       </div>