frontend/src/screens/Jobs.jsx

@@ -41,6 +41,14 @@ async function fetchJobs() {
   return rows.map(jobsApi.toJobView)
 }
 
+function deptValue(j) {
+  return String(j.requisitionDepartment || j.department || '').trim()
+}
+
+function deptLabel(j) {
+  return deptValue(j) || '—'
+}
+
 function splitLines(text) {
   return String(text || '')
     .split('\n')
@@ -193,7 +201,7 @@ export default function Jobs() {
   })
 
   const departmentOptions = useMemo(
-    () => [...new Set(jobs.map((j) => j.department).filter(Boolean))].sort(),
+    () => [...new Set(jobs.map(deptValue).filter(Boolean))].sort(),
     [jobs],
   )
   const typeOptions = useMemo(
@@ -204,12 +212,12 @@ export default function Jobs() {
   const rows = useMemo(
     () =>
       jobs.filter((j) => {
-        if (dept && j.department !== dept) return false
+        if (dept && deptValue(j) !== dept) return false
         if (status && j.status !== status) return false
         if (type && j.type !== type) return false
         if (q) {
           const term = q.toLowerCase()
-          const hay = [j.title, j.department, j.recruiter, j.hiringManager, j.location]
+          const hay = [j.title, deptValue(j), j.recruiter, j.hiringManager, j.location]
             .filter(Boolean)
             .join(' ')
             .toLowerCase()
@@ -242,11 +250,11 @@ export default function Jobs() {
       render: (j) => (
         <>
           <div className="cell-primary">{j.title}</div>
-          <div className="cell-sub">{j.department || '—'}</div>
+          <div className="cell-sub">{deptLabel(j)}</div>
         </>
       ),
     },
-    { key: 'department', label: 'Department', sortable: true, render: (j) => j.department || '—' },
+    { key: 'department', label: 'Department', sortable: true, sortValue: deptValue, render: (j) => deptLabel(j) },
     { key: 'location', label: 'Location', sortable: true, render: (j) => <span className="text-muted">{j.location || '—'}</span> },
     { key: 'type', label: 'Type', render: (j) => j.type ? <Badge className="b-gray">{j.type}</Badge> : '—' },
     { key: 'platform', label: 'Platform', sortable: true, sortValue: (j) => platformLabel(j.platform), render: (j) => j.platform ? <Badge className="b-gray">{platformLabel(j.platform)}</Badge> : '—' },
@@ -998,7 +1006,7 @@ function EditJobForm({ job: j, departmentOptions, busy, onClose, onSubmit }) {
   return (
     <Modal
       title="Edit Job"
-      subtitle={j.department || undefined}
+      subtitle={deptValue(j) || undefined}
       size="modal-lg"
       onClose={onClose}
       footer={
@@ -1340,7 +1348,7 @@ function JobDetail({
   return (
     <Modal
       title="Job Details"
-      subtitle={j.department || undefined}
+      subtitle={deptValue(j) || undefined}
       size="modal-lg"
       onClose={onClose}
       footer={
@@ -1366,7 +1374,7 @@ function JobDetail({
         </span>
         <div>
           <div style={{ fontSize: 19, fontWeight: 700 }}>{j.title}</div>
-          <div className="text-muted">{[j.department, j.location].filter(Boolean).join(' · ') || '—'}</div>
+          <div className="text-muted">{[deptValue(j), j.location].filter(Boolean).join(' · ') || '—'}</div>
         </div>
         <div style={{ marginLeft: 'auto' }}>
           {canEdit ? (
@@ -1396,7 +1404,7 @@ function JobDetail({
       {tab === 'details' && (
         <>
           <div className="info-grid mb-18">
-            <div className="info-item"><div className="il">Department</div><div className="iv">{j.department || '—'}</div></div>
+            <div className="info-item"><div className="il">Department</div><div className="iv">{deptLabel(j)}</div></div>
             <div className="info-item"><div className="il">Location</div><div className="iv">{j.location || '—'}</div></div>
             <div className="info-item"><div className="il">Employment Type</div><div className="iv">{j.type || '—'}</div></div>
             <div className="info-item"><div className="il">Platform</div><div className="iv">{platformLabel(j.platform) || '—'}</div></div>