Add candidate search dropdown

apps/admin_dashboard/src/main.tsx

@@ -1822,7 +1822,7 @@ function App() {
   async function addGigApplication(gigId: string, crmProfile: string) {
     const normalizedProfile = crmProfile.trim()
     if (!normalizedProfile) {
-      showToast("Paste a CRM Contact profile first", "warning")
+      showToast("Choose a candidate first", "warning")
       return false
     }
     setBusy(`gig:${gigId}:addCandidate`, true)
@@ -2798,6 +2798,7 @@ function App() {
               limit={gigLimit}
               staleDays={staleRecruitingDays}
               canWrite={can("gigs:write")}
+              canSearchCandidates={can("people:read")}
               canManageLeads={can("people:read")}
               canIncludeHistorical={can("people:read")}
               crmContactUrl={crmContactUrl}
@@ -5172,6 +5173,7 @@ function GigsView(props: {
   limit: number
   staleDays: number
   canWrite: boolean
+  canSearchCandidates: boolean
   canManageLeads: boolean
   canIncludeHistorical: boolean
   crmContactUrl: (contactId?: string) => string
@@ -5449,9 +5451,11 @@ function GigsView(props: {
       <>
         {filterBar}
         <GigDetailPage
+          key={props.selectedGig.id}
           gig={props.selectedGig}
           loading={props.loading}
           canWrite={props.canWrite}
+          canSearchCandidates={props.canSearchCandidates}
           crmContactUrl={props.crmContactUrl}
           crmAttachmentUrl={props.crmAttachmentUrl}
           staleDays={props.staleDays}
@@ -6011,10 +6015,15 @@ function candidateDisplayName(application: GigApplication) {
   )
 }
 
+function personSearchLabel(person: Person) {
+  return person.name || person.email_508 || person.email || person.crm_contact_id || "CRM person"
+}
+
 function GigDetailPage({
   gig,
   loading,
   canWrite,
+  canSearchCandidates,
   crmContactUrl,
   crmAttachmentUrl,
   staleDays,
@@ -6026,6 +6035,7 @@ function GigDetailPage({
   gig: Gig
   loading: Record<string, boolean>
   canWrite: boolean
+  canSearchCandidates: boolean
   crmContactUrl: (contactId?: string) => string
   crmAttachmentUrl: (attachmentId?: string) => string
   staleDays: number
@@ -6034,16 +6044,76 @@ function GigDetailPage({
   onAddApplication: (gigId: string, crmProfile: string) => Promise<boolean>
   onUpdateApplicationStatus: (gigId: string, applicationId: string, status: string) => void
 }) {
+  const [candidateQuery, setCandidateQuery] = useState("")
+  const [candidateMatches, setCandidateMatches] = useState<Person[]>([])
+  const [selectedCandidate, setSelectedCandidate] = useState<Person | null>(null)
+  const [candidateSearchError, setCandidateSearchError] = useState("")
   const [crmProfile, setCrmProfile] = useState("")
   const applications = Array.isArray(gig.applications) ? gig.applications : []
   const isRecruiting = gig.status === "recruiting"
+  const candidateQueryReady = candidateQuery.trim().length >= 2
+  const selectedCandidateId = selectedCandidate?.crm_contact_id || ""
+  const candidateProfile = selectedCandidateId
+    ? crmContactUrl(selectedCandidateId) || selectedCandidateId
+    : ""
+  const profileForAdd = canSearchCandidates ? candidateProfile : crmProfile.trim()
   const threadUrl =
     gig.discord_guild_id && gig.discord_thread_id
       ? `https://discord.com/channels/${encodeURIComponent(
           gig.discord_guild_id,
         )}/${encodeURIComponent(gig.discord_thread_id)}`
       : ""
   const staleAge = staleRecruitingAge(gig, staleDays)
+
+  useEffect(() => {
+    if (!canWrite || !canSearchCandidates) return
+    const query = candidateQuery.trim()
+    if (selectedCandidate && query === personSearchLabel(selectedCandidate)) {
+      setCandidateMatches([])
+      setCandidateSearchError("")
+      return
+    }
+    if (query.length < 2) {
+      setCandidateMatches([])
+      setCandidateSearchError("")
+      return
+    }
+
+    const controller = new AbortController()
+    const timer = window.setTimeout(() => {
+      const params = new URLSearchParams({ limit: "8", query })
+      void requestJson<Person[]>(`/dashboard/api/people?${params.toString()}`, {
+        signal: controller.signal,
+      })
+        .then((people) => {
+          setCandidateMatches(people.filter((person) => Boolean(person.crm_contact_id)))
+          setCandidateSearchError("")
+        })
+        .catch((error) => {
+          if (
+            controller.signal.aborted ||
+            (error instanceof DOMException && error.name === "AbortError")
+          ) {
+            return
+          }
+          setCandidateMatches([])
+          setCandidateSearchError(messageFromUnknown(error, "Unable to search candidates"))
+        })
+    }, 300)
+
+    return () => {
+      controller.abort()
+      window.clearTimeout(timer)
+    }
+  }, [candidateQuery, canSearchCandidates, canWrite, selectedCandidate])
+
+  function chooseCandidate(person: Person) {
+    setSelectedCandidate(person)
+    setCandidateQuery(personSearchLabel(person))
+    setCandidateMatches([])
+    setCandidateSearchError("")
+  }
+
   return (
     <div className="grid gap-5">
       <Card
@@ -6160,24 +6230,89 @@ function GigDetailPage({
             className="grid gap-2 border-t p-4 md:grid-cols-[minmax(220px,1fr)_auto]"
             onSubmit={(event) => {
               event.preventDefault()
-              void onAddApplication(gig.id, crmProfile).then((added) => {
-                if (added) setCrmProfile("")
+              void onAddApplication(gig.id, profileForAdd).then((added) => {
+                if (added) {
+                  setCandidateQuery("")
+                  setCandidateMatches([])
+                  setSelectedCandidate(null)
+                  setCrmProfile("")
+                }
               })
             }}
           >
-            <Label className="min-w-0">
-              CRM profile
-              <Input
-                value={crmProfile}
-                onChange={(event) => setCrmProfile(event.target.value)}
-                placeholder="https://crm.508.dev/#Contact/view/..."
-                aria-label="CRM profile for candidate"
-              />
-            </Label>
+            {canSearchCandidates ? (
+              <div className="relative min-w-0">
+                <Label>
+                  Candidate
+                  <Input
+                    value={candidateQuery}
+                    autoComplete="off"
+                    placeholder="Search by name or email"
+                    aria-label="Search candidates to add"
+                    onChange={(event) => {
+                      setCandidateQuery(event.target.value)
+                      setCandidateMatches([])
+                      setCandidateSearchError("")
+                      setSelectedCandidate(null)
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key !== "Enter" || candidateMatches.length !== 1) return
+                      event.preventDefault()
+                      chooseCandidate(candidateMatches[0])
+                    }}
+                  />
+                </Label>
+                {candidateQueryReady && !selectedCandidate ? (
+                  <div className="absolute z-20 mt-1 max-h-64 w-full overflow-auto rounded-md border bg-background shadow-lg">
+                    {candidateSearchError ? (
+                      <div className="px-3 py-2 text-sm text-destructive">
+                        {candidateSearchError}
+                      </div>
+                    ) : candidateMatches.length ? (
+                      candidateMatches.map((person) => {
+                        const label = personSearchLabel(person)
+                        const detail = [person.email_508 || person.email, person.contact_type]
+                          .filter(Boolean)
+                          .join(" | ")
+                        return (
+                          <button
+                            key={person.crm_contact_id}
+                            type="button"
+                            className="grid w-full gap-0.5 px-3 py-2 text-left hover:bg-secondary focus:bg-secondary focus:outline-none"
+                            onClick={() => chooseCandidate(person)}
+                          >
+                            <span className="truncate text-sm font-bold">{label}</span>
+                            {detail ? (
+                              <span className="truncate text-xs text-muted-foreground">
+                                {detail}
+                              </span>
+                            ) : null}
+                          </button>
+                        )
+                      })
+                    ) : (
+                      <div className="px-3 py-2 text-sm text-muted-foreground">
+                        No candidates match this search
+                      </div>
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            ) : (
+              <Label className="min-w-0">
+                CRM profile
+                <Input
+                  value={crmProfile}
+                  onChange={(event) => setCrmProfile(event.target.value)}
+                  placeholder="https://crm.508.dev/#Contact/view/..."
+                  aria-label="CRM profile for candidate"
+                />
+              </Label>
+            )}
             <Button
               type="submit"
               className="self-end"
-              disabled={loading[`gig:${gig.id}:addCandidate`] || !crmProfile.trim()}
+              disabled={loading[`gig:${gig.id}:addCandidate`] || !profileForAdd}
             >
               <UserPlus />
               Add candidate

apps/api/src/five08/backend/static/dashboard/.vite/manifest.json

@@ -1,6 +1,6 @@
 {
   "index.html": {
-    "file": "assets/index-_nigGMGP.js",
+    "file": "assets/index-BRLPZTtg.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,

apps/api/src/five08/backend/static/dashboard/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>508 Operations Dashboard</title>
-    <script type="module" crossorigin src="/dashboard/assets/index-_nigGMGP.js"></script>
+    <script type="module" crossorigin src="/dashboard/assets/index-BRLPZTtg.js"></script>
     <link rel="stylesheet" crossorigin href="/dashboard/assets/index-2UypYUrJ.css">
   </head>
   <body>

tests/integration/test_dashboard_playwright.py

@@ -158,6 +158,17 @@ def _people_payload() -> list[dict[str, object]]:
     ]
 
 
+def _candidate_search_payload() -> list[dict[str, object]]:
+    return [
+        {
+            "crm_contact_id": "contact-candidate-2",
+            "name": "Devon Candidate",
+            "email": "devon@example.com",
+            "contact_type": "Prospect",
+        }
+    ]
+
+
 def _onboarding_payload() -> list[dict[str, object]]:
     return [
         {
@@ -465,10 +476,15 @@ def job_detail_route(route: Any) -> None:
 
         def people_route(route: Any) -> None:
             people_requests.append(route.request.url)
+            query = parse_qs(urlparse(route.request.url).query).get("query", [""])[0]
             route.fulfill(
                 status=200,
                 content_type="application/json",
-                body=json.dumps(_people_payload()),
+                body=json.dumps(
+                    _candidate_search_payload()
+                    if query == "Devon"
+                    else _people_payload()
+                ),
             )
 
         def onboarding_route(route: Any) -> None:
@@ -911,9 +927,9 @@ def sync_route(route: Any) -> None:
                 "href",
                 f"{crm_base_url}/#Contact/view/contact-candidate-1",
             )
-            page.get_by_label("CRM profile for candidate").fill(
-                f"{crm_base_url}/#Contact/view/contact-candidate-2"
-            )
+            page.get_by_label("Search candidates to add").fill("Devon")
+            page.get_by_text("Devon Candidate", exact=True).click()
+            assert any("query=Devon" in url for url in people_requests)
             page.get_by_role("button", name="Add candidate").click()
             assert gig_application_add_requested.wait(timeout=5)
             page.get_by_text("Devon Candidate").wait_for()