dropdwon inserted

frontend/src/screens/Jobs.jsx

@@ -15,6 +15,7 @@ import AiFieldAssist from '../ui/AiFieldAssist'
 import DataTable from '../ui/DataTable'
 import Modal from '../ui/Modal'
 import PageHeader from '../ui/PageHeader'
+import { Tabs } from '../ui/Tabs'
 import { Badge, EmptyState, FieldError, Icon, SkeletonRows } from '../ui/primitives'
 import { useToast } from '../ui/Toast'
 import { useAuth } from '../auth/AuthContext'
@@ -981,17 +982,6 @@ function JobOwnership({ job, canEdit }) {
   const managersQuery = useManagerDirectory()
   const recruitersQuery = useRecruiterDirectory()
 
-  const historyQuery = useQuery({
-    queryKey: qk.assignments.job(job.id),
-    queryFn: async () => {
-      const res = await assignmentsApi.listJob(job.id, { currentOnly: false })
-      const rows = Array.isArray(res?.data) ? res.data : []
-      return rows.map((r) => assignmentsApi.toAssignmentView(r))
-    },
-    enabled: Boolean(job.id),
-    retry: false,
-  })
-
   const patch = useMutation({
     mutationFn: (body) => jobsApi.update(job.id, body),
     onSuccess: () => {
@@ -1003,8 +993,6 @@ function JobOwnership({ job, canEdit }) {
     onError: (err) => toast(friendlyAuthError(err, 'Could not update the assignment.'), 'error'),
   })
 
-  const history = historyQuery.data ?? []
-
   return (
     <>
       <div className="divider" />
@@ -1054,17 +1042,28 @@ function JobOwnership({ job, canEdit }) {
         {canEdit && recruitersQuery.isError && (
           <p className="text-muted text-sm">The recruiter list needs the <code>tasks.view</code> permission.</p>
         )}
+      </div>
+    </>
+  )
+}
 
-        <div style={{ ...SECTION_LABEL, marginTop: 8 }}>Assignment history</div>
-        {historyQuery.isError ? (
+function AssignmentHistory({ historyQuery }) {
+  const history = historyQuery.data ?? []
+
+  if (historyQuery.isError) {
+    return (
       <p className="text-muted text-sm">
         {friendlyAuthError(historyQuery.error, 'History did not load.')}
       </p>
-        ) : historyQuery.isPending ? (
-          <p className="text-muted text-sm">Loading…</p>
-        ) : history.length === 0 ? (
-          <p className="text-muted text-sm">No assignment history yet.</p>
-        ) : (
+    )
+  }
+  if (historyQuery.isPending) {
+    return <p className="text-muted text-sm">Loading…</p>
+  }
+  if (history.length === 0) {
+    return <p className="text-muted">No assignment history yet.</p>
+  }
+  return (
     <div className="list-tight">
       {history.map((row) => (
         <div className="list-row" key={row.id}>
@@ -1083,9 +1082,6 @@ function JobOwnership({ job, canEdit }) {
         </div>
       ))}
     </div>
-        )}
-      </div>
-    </>
   )
 }
 
@@ -1113,6 +1109,18 @@ function JobCover({ jobId }) {
 function JobDetail({
   job: j, canEdit, canDelete, statusBusy, deleteBusy, onClose, onPublish, onEdit, onStatus, onDelete,
 }) {
+  const [tab, setTab] = useState('details')
+  const historyQuery = useQuery({
+    queryKey: qk.assignments.job(j.id),
+    queryFn: async () => {
+      const res = await assignmentsApi.listJob(j.id, { currentOnly: false })
+      const rows = Array.isArray(res?.data) ? res.data : []
+      return rows.map((r) => assignmentsApi.toAssignmentView(r))
+    },
+    enabled: Boolean(j.id),
+    retry: false,
+  })
+
   return (
     <Modal
       title="Job Details"
@@ -1160,6 +1168,17 @@ function JobDetail({
         </div>
       </div>
 
+      <Tabs
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: 'details', label: 'Details' },
+          { key: 'history', label: 'History', count: historyQuery.data?.length },
+        ]}
+      />
+
+      {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">Location</div><div className="iv">{j.location || '—'}</div></div>
@@ -1191,6 +1210,10 @@ function JobDetail({
               <div className="k-tags">{j.skills.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
             </div>
           )}
+        </>
+      )}
+
+      {tab === 'history' && <AssignmentHistory historyQuery={historyQuery} />}
     </Modal>
   )
 }