Janady13/missionmatch / frontend/src/tools/recruitmatch/ActivityFeed.tsx

1import { useState } from 'react' 2import { Bot, Mail, MessageSquare, Phone, StickyNote, Users } from 'lucide-react' 3 4import { Modal, Panel } from '../../components/ui' 5import type { RActivity } from '../../lib/types' 6import { useActivities, useLogActivity } from './activityQueries' 7 8const inputCls = 9 'w-full rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-recruit' 10 11const KINDS = ['call', 'email', 'inmail', 'text', 'meeting', 'note'] as const 12const OUTCOMES = ['logged', 'connected', 'no_answer', 'left_message', 'replied', 'bounced', 'declined'] as const 13 14// Only these two mean a person was actually reached, mirrored from the service. A hundred dials with two 15// conversations is a different day from a hundred conversations. 16const CONNECTS = new Set(['connected', 'replied']) 17 18function kindIcon(kind: string) { 19 switch (kind) { 20 case 'call': 21 return <Phone size={12} /> 22 case 'email': 23 case 'inmail': 24 return <Mail size={12} /> 25 case 'text': 26 return <MessageSquare size={12} /> 27 case 'meeting': 28 return <Users size={12} /> 29 case 'submission': 30 case 'screen': 31 return <Bot size={12} /> 32 default: 33 return <StickyNote size={12} /> 34 } 35} 36 37export function ActivityFeed({ 38 candidateId, 39 requisitionId, 40 applicationId, 41 title = 'Activity', 42}: { 43 candidateId?: string 44 requisitionId?: string 45 applicationId?: string 46 title?: string 47}) { 48 const [showCaptured, setShowCaptured] = useState(false) 49 const scope = { 50 candidate_id: candidateId, 51 requisition_id: requisitionId, 52 application_id: applicationId, 53 include_captured: showCaptured, 54 } 55 const q = useActivities(scope) 56 const log = useLogActivity() 57 58 const [open, setOpen] = useState(false) 59 const [kind, setKind] = useState<string>('call') 60 const [outcome, setOutcome] = useState<string>('logged') 61 const [note, setNote] = useState('') 62 const [when, setWhen] = useState('') 63 64 const rows = q.data?.activities ?? [] 65 66 const submit = () => { 67 log.mutate( 68 { 69 kind, 70 outcome, 71 body: note, 72 candidate_id: candidateId ?? '', 73 requisition_id: requisitionId ?? '', 74 application_id: applicationId ?? '', 75 // Backdating is allowed and forward dating is refused by the server, which is what keeps 76 // today's numbers honest. 77 occurred_at: when ? new Date(when).toISOString() : '', 78 }, 79 { 80 onSuccess: () => { 81 setNote('') 82 setWhen('') 83 setOutcome('logged') 84 setOpen(false) 85 }, 86 }, 87 ) 88 } 89 90 return ( 91 <Panel title={title} hint={q.isLoading ? 'loading' : `${q.data?.total ?? 0}`}> 92 <div className="mb-3 flex flex-wrap items-center justify-end gap-2"> 93 {/* Captured rows are opt in. A recruiter's log means what they did; mixing in everything the 94 platform recorded on their behalf would drown it. */} 95 <label className="flex items-center gap-1.5 text-[11px] text-faint"> 96 <input type="checkbox" checked={showCaptured} onChange={(e) => setShowCaptured(e.target.checked)} /> 97 Show what the platform recorded 98 </label> 99 <button 100 onClick={() => setOpen(true)} 101 className="flex items-center gap-2 rounded-lg border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 102 > 103 <Phone size={13} /> 104 Log activity 105 </button> 106 </div> 107 108 {q.isError ? ( 109 <p className="py-4 text-center text-sm text-warn">Could not load activity. {(q.error as Error)?.message}</p> 110 ) : rows.length === 0 ? ( 111 <p className="py-4 text-center text-[11px] text-faint"> 112 Nothing logged yet. Calls, emails and notes recorded here are what the recruiting metrics are 113 built from. 114 </p> 115 ) : ( 116 <ul className="space-y-2"> 117 {rows.map((a: RActivity) => ( 118 <li key={a.id} className="flex gap-2.5 rounded-lg border border-line/60 bg-navy-950/40 p-2.5"> 119 <span 120 className="mt-0.5 shrink-0" 121 style={{ color: a.auto_captured ? 'var(--color-faint)' : 'var(--color-recruit)' }} 122 > 123 {kindIcon(a.kind)} 124 </span> 125 <div className="min-w-0 flex-1"> 126 <p className="flex flex-wrap items-center gap-2 text-sm font-semibold"> 127 {a.kind} 128 <span 129 className="text-[10px] font-bold uppercase tracking-wide" 130 style={{ 131 color: CONNECTS.has(a.outcome) ? 'var(--color-ok)' : 'var(--color-faint)', 132 }} 133 > 134 {a.outcome.replace(/_/g, ' ')} 135 </span> 136 {a.auto_captured && ( 137 <span 138 className="rounded-full px-2 py-0.5 text-[9px] font-bold uppercase tracking-wide" 139 style={{ color: 'var(--color-muted)', background: 'color-mix(in srgb, var(--color-muted) 14%, transparent)' }} 140 title="Recorded by the platform, not typed by a person. Counted separately." 141 > 142 platform 143 </span> 144 )} 145 </p> 146 {a.body && <p className="text-[11px] text-muted">{a.body}</p>} 147 <p className="text-[10px] text-faint"> 148 {new Date(a.occurred_at).toLocaleString()} 149 {a.actor_name ? ` · ${a.actor_name}` : ''} 150 {a.candidate_name && !candidateId ? ` · ${a.candidate_name}` : ''} 151 </p> 152 </div> 153 </li> 154 ))} 155 </ul> 156 )} 157 158 <Modal open={open} onClose={() => setOpen(false)} title="Log an activity"> 159 <div className="space-y-3"> 160 <div className="grid grid-cols-2 gap-3"> 161 <label className="flex flex-col gap-1.5"> 162 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">What</span> 163 <select value={kind} onChange={(e) => setKind(e.target.value)} className={inputCls}> 164 {KINDS.map((k) => ( 165 <option key={k} value={k}> 166 {k} 167 </option> 168 ))} 169 </select> 170 </label> 171 <label className="flex flex-col gap-1.5"> 172 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Outcome</span> 173 <select value={outcome} onChange={(e) => setOutcome(e.target.value)} className={inputCls}> 174 {OUTCOMES.map((o) => ( 175 <option key={o} value={o}> 176 {o.replace(/_/g, ' ')} 177 </option> 178 ))} 179 </select> 180 </label> 181 </div> 182 <label className="flex flex-col gap-1.5"> 183 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">When</span> 184 <input type="datetime-local" value={when} onChange={(e) => setWhen(e.target.value)} className={inputCls} /> 185 <span className="text-[10px] text-faint"> 186 Leave blank for now. Yesterday's calls can be entered today; a future date is refused. 187 </span> 188 </label> 189 <label className="flex flex-col gap-1.5"> 190 <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Note</span> 191 <textarea value={note} onChange={(e) => setNote(e.target.value)} rows={3} className={inputCls} /> 192 </label> 193 <p className="text-[10px] text-faint"> 194 Once logged, only the note can be corrected. The type, time and outcome are fixed, because the 195 recruiting metrics are computed from them. 196 </p> 197 {log.isError && <p className="text-xs text-risk">{(log.error as Error).message}</p>} 198 <div className="flex justify-end gap-2 pt-1"> 199 <button 200 onClick={() => setOpen(false)} 201 className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink" 202 > 203 Cancel 204 </button> 205 <button 206 onClick={submit} 207 disabled={log.isPending} 208 className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 209 > 210 Log it 211 </button> 212 </div> 213 </div> 214 </Modal> 215 </Panel> 216 ) 217} 218