cesnimda
652 lines
40 KiB
TypeScript
652 lines
40 KiB
TypeScript
import React, { useEffect, useMemo, useState } from "react";
|
|
|
|
import {
|
|
Box,
|
|
Button,
|
|
Chip,
|
|
CircularProgress,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogTitle,
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
Tab,
|
|
Tabs,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { ApplicationPackageResponse, CandidateFit, FocusPlanResponse, InterviewPrepResponse, JobApplication, ReadinessResponse } from "../types";
|
|
import { useToast } from "../toast";
|
|
import { useDialogActions } from "../dialogs";
|
|
|
|
import Correspondence from "./Correspondence";
|
|
import Attachments from "./Attachments";
|
|
import JobFlowBar from "./JobFlowBar";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
type AttachmentItem = {
|
|
id: number;
|
|
fileName: string;
|
|
uploadDate: string;
|
|
fileType: string;
|
|
fileSize: number;
|
|
};
|
|
|
|
type FollowUpDraft = {
|
|
subject: string;
|
|
body: string;
|
|
reason: string;
|
|
suggestedSendOn: string;
|
|
};
|
|
|
|
type GenerationMode = "default" | "concise" | "ats" | "achievement" | "interview";
|
|
type CoverLetterStyle = "balanced" | "concise" | "formal" | "bold";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
jobId: number | null;
|
|
onClose: () => void;
|
|
initialTab?: number;
|
|
initialFollowUpMode?: string;
|
|
}
|
|
|
|
function statusChipColor(status: string): "default" | "primary" | "warning" | "error" | "success" {
|
|
switch (status) {
|
|
case "Rejected":
|
|
return "error";
|
|
case "Waiting":
|
|
case "Ghosted":
|
|
return "warning";
|
|
case "Offer":
|
|
return "success";
|
|
case "Applied":
|
|
default:
|
|
return "primary";
|
|
}
|
|
}
|
|
|
|
function getFitLevel(candidateFit: CandidateFit | null): { label: string; color: "success" | "warning" | "default" } | null {
|
|
if (!candidateFit) return null;
|
|
if (candidateFit.fitLevel === "Strong match") return { label: candidateFit.fitLevel, color: "success" };
|
|
if (candidateFit.fitLevel === "Potential match") return { label: candidateFit.fitLevel, color: "warning" };
|
|
return { label: candidateFit.fitLevel, color: "default" };
|
|
}
|
|
|
|
function copyLines(items: string[]) {
|
|
return navigator.clipboard.writeText(items.map((item) => `• ${item}`).join("\n"));
|
|
}
|
|
|
|
export default function JobDetailsDialog({ open, jobId, onClose, initialTab = 0, initialFollowUpMode }: Props) {
|
|
const { toast } = useToast();
|
|
const { t } = useI18n();
|
|
const { confirmAction } = useDialogActions();
|
|
|
|
const [job, setJob] = useState<JobApplication | null>(null);
|
|
const [tab, setTab] = useState(0);
|
|
const [history, setHistory] = useState<{ id: number; type: string; oldValue?: string; newValue?: string; note?: string; at: string }[]>([]);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [followUpDraft, setFollowUpDraft] = useState<FollowUpDraft | null>(null);
|
|
const [loadingDraft, setLoadingDraft] = useState(false);
|
|
const [sendingDraft, setSendingDraft] = useState(false);
|
|
const [refreshingAi, setRefreshingAi] = useState(false);
|
|
const [candidateFit, setCandidateFit] = useState<CandidateFit | null>(null);
|
|
const [focusPlan, setFocusPlan] = useState<FocusPlanResponse | null>(null);
|
|
const [loadingCandidateFit, setLoadingCandidateFit] = useState(false);
|
|
const [loadingFocusPlan, setLoadingFocusPlan] = useState(false);
|
|
const [interviewPrep, setInterviewPrep] = useState<InterviewPrepResponse | null>(null);
|
|
const [loadingInterviewPrep, setLoadingInterviewPrep] = useState(false);
|
|
const [readiness, setReadiness] = useState<ReadinessResponse | null>(null);
|
|
const [loadingReadiness, setLoadingReadiness] = useState(false);
|
|
const [jobAttachments, setJobAttachments] = useState<AttachmentItem[]>([]);
|
|
const [selectedAttachmentIds, setSelectedAttachmentIds] = useState<number[]>([]);
|
|
const [savingTailoredCv, setSavingTailoredCv] = useState(false);
|
|
const [savingApplicationDrafts, setSavingApplicationDrafts] = useState(false);
|
|
const [generatingPackage, setGeneratingPackage] = useState(false);
|
|
const [applicationPackage, setApplicationPackage] = useState<ApplicationPackageResponse | null>(null);
|
|
const [generationMode, setGenerationMode] = useState<GenerationMode>("default");
|
|
const [coverLetterStyle, setCoverLetterStyle] = useState<CoverLetterStyle>("balanced");
|
|
const [tailoredCvText, setTailoredCvText] = useState("");
|
|
const [draftRecipient, setDraftRecipient] = useState("");
|
|
const [followUpMode, setFollowUpMode] = useState(initialFollowUpMode || "post-apply");
|
|
const [draftReloadToken, setDraftReloadToken] = useState(0);
|
|
const [draftSubject, setDraftSubject] = useState("");
|
|
const [draftBody, setDraftBody] = useState("");
|
|
const selectedAttachmentCsv = useMemo(() => selectedAttachmentIds.join(","), [selectedAttachmentIds]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId) return;
|
|
setTab(Math.max(0, Math.min(9, initialTab)));
|
|
setFollowUpDraft(null);
|
|
setCandidateFit(null);
|
|
setFocusPlan(null);
|
|
setInterviewPrep(null);
|
|
setReadiness(null);
|
|
setApplicationPackage(null);
|
|
setJobAttachments([]);
|
|
setSelectedAttachmentIds([]);
|
|
api.get<JobApplication>(`/jobapplications/${jobId}`).then((r) => {
|
|
setJob(r.data);
|
|
setTailoredCvText(r.data.tailoredCvText ?? "");
|
|
setDraftRecipient(r.data.company?.recruiterEmail ?? "");
|
|
setFollowUpMode(initialFollowUpMode || (r.data.status?.includes("Interview") ? "post-interview" : r.data.status === "Waiting" ? "waiting-update" : r.data.status === "Offer" ? "offer-checkin" : r.data.status === "Rejected" ? "feedback-request" : "post-apply"));
|
|
});
|
|
api.get<AttachmentItem[]>(`/attachments/${jobId}`).then((r) => {
|
|
const items = Array.isArray(r.data) ? r.data : [];
|
|
setJobAttachments(items);
|
|
setSelectedAttachmentIds(items.slice(0, 3).map((item) => item.id));
|
|
}).catch(() => {
|
|
setJobAttachments([]);
|
|
setSelectedAttachmentIds([]);
|
|
});
|
|
api.get(`/auth/me`).then((r) => setIsAdmin(Boolean(r.data?.roles?.includes("Admin")))).catch(() => setIsAdmin(false));
|
|
api.get(`/jobapplications/${jobId}/history`).then((r) => setHistory(r.data)).catch(() => setHistory([]));
|
|
}, [open, jobId, initialTab, initialFollowUpMode]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId || tab !== 4) return;
|
|
setLoadingDraft(true);
|
|
api.get<FollowUpDraft>(`/jobapplications/${jobId}/followup-draft`, { params: { mode: followUpMode, attachmentIds: selectedAttachmentCsv || undefined } }).then((r) => {
|
|
setFollowUpDraft(r.data);
|
|
setDraftSubject(r.data.subject);
|
|
setDraftBody(r.data.body);
|
|
}).catch(() => setFollowUpDraft(null)).finally(() => setLoadingDraft(false));
|
|
}, [open, jobId, tab, followUpMode, draftReloadToken, selectedAttachmentCsv]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId || tab !== 5 || candidateFit) return;
|
|
setLoadingCandidateFit(true);
|
|
api.get<CandidateFit>(`/jobapplications/${jobId}/candidate-fit`, { params: { attachmentIds: selectedAttachmentCsv || undefined } }).then((r) => setCandidateFit(r.data)).catch(() => setCandidateFit(null)).finally(() => setLoadingCandidateFit(false));
|
|
}, [open, jobId, tab, candidateFit, selectedAttachmentCsv]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId || tab !== 6 || focusPlan) return;
|
|
setLoadingFocusPlan(true);
|
|
api.get<FocusPlanResponse>(`/jobapplications/${jobId}/focus-plan`, { params: { attachmentIds: selectedAttachmentCsv || undefined } }).then((r) => setFocusPlan(r.data)).catch(() => setFocusPlan(null)).finally(() => setLoadingFocusPlan(false));
|
|
}, [open, jobId, tab, focusPlan, selectedAttachmentCsv]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId || tab !== 7 || interviewPrep) return;
|
|
setLoadingInterviewPrep(true);
|
|
api.get<InterviewPrepResponse>(`/jobapplications/${jobId}/interview-prep`, { params: { attachmentIds: selectedAttachmentCsv || undefined } }).then((r) => setInterviewPrep(r.data)).catch(() => setInterviewPrep(null)).finally(() => setLoadingInterviewPrep(false));
|
|
}, [open, jobId, tab, interviewPrep, selectedAttachmentCsv]);
|
|
|
|
useEffect(() => {
|
|
setFollowUpDraft(null);
|
|
setCandidateFit(null);
|
|
setFocusPlan(null);
|
|
setInterviewPrep(null);
|
|
}, [selectedAttachmentCsv]);
|
|
|
|
useEffect(() => {
|
|
if (!open || !jobId || tab !== 8 || readiness) return;
|
|
setLoadingReadiness(true);
|
|
api.get<ReadinessResponse>(`/jobapplications/${jobId}/readiness`).then((r) => setReadiness(r.data)).catch(() => setReadiness(null)).finally(() => setLoadingReadiness(false));
|
|
}, [open, jobId, tab, readiness]);
|
|
|
|
const tags: string[] = (() => {
|
|
const raw = job?.tags;
|
|
if (!raw) return [];
|
|
try {
|
|
const parsed = JSON.parse(raw);
|
|
return Array.isArray(parsed) ? parsed.filter((x) => typeof x === "string") : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
})();
|
|
|
|
const title = job ? `${job.company?.name ?? ""} - ${job.jobTitle}` : t("addJobApplication");
|
|
const checklist = [
|
|
job?.hasResume ? t("jobDetailsResume") : null,
|
|
job?.hasCoverLetter ? t("jobDetailsCoverLetter") : null,
|
|
job?.hasPortfolio ? t("jobDetailsPortfolio") : null,
|
|
job?.hasOtherAttachment ? t("jobDetailsOther") : null,
|
|
].filter(Boolean).join(", ") || t("jobDetailsNotAvailable");
|
|
const summaryFirstText = job?.fullSummary ?? job?.shortSummary ?? t("jobTableNoSummaryYet");
|
|
const translatedDescriptionText = job?.translatedDescription?.trim() || "";
|
|
const originalDescriptionText = job?.description?.trim() || "";
|
|
const showTranslatedText = translatedDescriptionText.length > 0;
|
|
const showOriginalText = originalDescriptionText.length > 0;
|
|
const fitLevel = useMemo(() => getFitLevel(candidateFit), [candidateFit]);
|
|
const showAiAttachmentPicker = tab >= 3 && tab <= 7 && jobAttachments.length > 0;
|
|
|
|
const attachmentPicker = showAiAttachmentPicker ? (
|
|
<Box sx={{ mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
|
|
<Typography variant="caption" sx={{ color: "text.secondary" }}>{t("jobDetailsAttachmentContextPicker")}</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
|
<Button size="small" variant="text" onClick={() => setSelectedAttachmentIds(jobAttachments.slice(0, 4).map((item) => item.id))}>{t("jobDetailsAttachmentSelectTop")}</Button>
|
|
<Button size="small" variant="text" onClick={() => setSelectedAttachmentIds([])}>{t("jobDetailsAttachmentClear")}</Button>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
|
{jobAttachments.map((attachment) => {
|
|
const selected = selectedAttachmentIds.includes(attachment.id);
|
|
return (
|
|
<Chip
|
|
key={attachment.id}
|
|
label={attachment.fileName}
|
|
color={selected ? "primary" : "default"}
|
|
variant={selected ? "filled" : "outlined"}
|
|
onClick={() => setSelectedAttachmentIds((current) => current.includes(attachment.id) ? current.filter((id) => id !== attachment.id) : [...current, attachment.id].slice(-4))}
|
|
/>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
) : null;
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
|
|
<DialogTitle sx={{ pb: 1 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
|
|
<Box>
|
|
<Typography variant="overline" sx={{ color: "text.secondary" }}>{t("jobTableOpen")}</Typography>
|
|
<Typography variant="h6">{title}</Typography>
|
|
</Box>
|
|
{job && <Chip label={job.status} color={statusChipColor(job.status)} size="small" />}
|
|
</Box>
|
|
</DialogTitle>
|
|
|
|
<DialogContent>
|
|
<JobFlowBar job={job} history={history} />
|
|
<Box sx={{ mt: 1.5, mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>{summaryFirstText}</Typography>
|
|
</Box>
|
|
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }} variant="scrollable" allowScrollButtonsMobile>
|
|
<Tab label={t("jobTableOverview")} />
|
|
<Tab label={t("jobDetailsTabCorrespondence")} />
|
|
<Tab label={t("jobDetailsTabAttachments")} />
|
|
<Tab label={t("jobDetailsTabTailoredCv")} />
|
|
<Tab label={t("jobTableFollowUp")} />
|
|
<Tab label={t("jobDetailsTabCandidateFit")} />
|
|
<Tab label={t("jobDetailsTabFocusPlan")} />
|
|
<Tab label={t("jobDetailsTabInterviewPrep")} />
|
|
<Tab label={t("jobTableReadiness")} />
|
|
{isAdmin ? <Tab label={t("jobDetailsTabHistory")} /> : null}
|
|
</Tabs>
|
|
|
|
{attachmentPicker}
|
|
|
|
{tab === 0 && (
|
|
<Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
|
|
<Box><Typography variant="overline">{t("jobDetailsDateApplied")}</Typography><Typography>{job ? new Date(job.dateApplied).toLocaleDateString() : ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsDaysSince")}</Typography><Typography>{job?.daysSince ?? ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobTableLocation")}</Typography><Typography>{job?.location ?? ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsSalary")}</Typography><Typography>{job?.salary ?? ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsNextAction")}</Typography><Typography>{job?.nextAction ?? ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsFollowUp")}</Typography><Typography>{job?.followUpAt ? new Date(job.followUpAt).toLocaleDateString() : ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsDeadline")}</Typography><Typography>{job?.deadline ? new Date(job.deadline).toLocaleDateString() : ""}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsTags")}</Typography><Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 0.5 }}>{tags.length === 0 ? <Typography sx={{ color: "text.secondary" }}>-</Typography> : tags.map((t) => <Chip key={t} label={t} size="small" />)}</Box></Box>
|
|
<Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobDetailsAttachmentTypes")}</Typography><Typography>{checklist}</Typography></Box>
|
|
<Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobDetailsJobUrl")}</Typography><Typography>{job?.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noreferrer">{job.jobUrl}</a> : ""}</Typography></Box>
|
|
<Box sx={{ gridColumn: "1 / -1", mt: 1 }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, alignItems: "center", flexWrap: "wrap", mb: 0.5 }}>
|
|
<Typography variant="overline">{t("jobDetailsSummaryAndSkills")}</Typography>
|
|
<Button size="small" variant="outlined" disabled={refreshingAi} onClick={async () => {
|
|
if (!jobId) return;
|
|
if (!(await confirmAction(t("jobDetailsRefreshAiConfirm"), { title: t("jobDetailsRefreshAiTitle"), confirmLabel: t("jobDetailsRefreshAi") }))) return;
|
|
setRefreshingAi(true);
|
|
try {
|
|
const res = await api.post<JobApplication>(`/jobapplications/${jobId}/refresh-ai`);
|
|
setJob(res.data);
|
|
toast(t("jobDetailsSummaryRefreshed"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsSummaryRefreshFailed")), "error");
|
|
} finally {
|
|
setRefreshingAi(false);
|
|
}
|
|
}}>{refreshingAi ? t("jobDetailsRefreshing") : t("jobDetailsRefreshAi")}</Button>
|
|
</Box>
|
|
<Typography sx={{ whiteSpace: "pre-wrap" }}>{summaryFirstText}</Typography>
|
|
</Box>
|
|
{showTranslatedText ? (
|
|
<Box sx={{ gridColumn: "1 / -1" }}>
|
|
<Typography variant="overline">{t("jobDetailsTranslatedRoleText")}</Typography>
|
|
<Typography sx={{ whiteSpace: "pre-wrap" }}>{translatedDescriptionText}</Typography>
|
|
</Box>
|
|
) : null}
|
|
{showOriginalText ? (
|
|
<Box sx={{ gridColumn: "1 / -1" }}>
|
|
<Typography variant="overline">{t("jobDetailsOriginalRoleText")}</Typography>
|
|
<Typography sx={{ whiteSpace: "pre-wrap", color: "text.secondary" }}>{originalDescriptionText}</Typography>
|
|
</Box>
|
|
) : null}
|
|
<Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("editJobNotes")}</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{job?.notes ?? ""}</Typography></Box>
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 1 && jobId && <Correspondence jobId={jobId} />}
|
|
{tab === 2 && jobId && <Attachments jobId={jobId} />}
|
|
|
|
{tab === 3 && (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
<Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
|
|
<Typography variant="overline">{t("jobDetailsTabTailoredCv")}</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
|
|
<FormControl size="small" sx={{ minWidth: 180 }}>
|
|
<InputLabel>{t("jobDetailsTailoredCvMode")}</InputLabel>
|
|
<Select value={generationMode} label={t("jobDetailsTailoredCvMode")} onChange={(e) => setGenerationMode(e.target.value as GenerationMode)}>
|
|
<MenuItem value="default">{t("jobDetailsGenerationDefault")}</MenuItem>
|
|
<MenuItem value="concise">{t("jobDetailsGenerationConcise")}</MenuItem>
|
|
<MenuItem value="ats">{t("jobDetailsGenerationAts")}</MenuItem>
|
|
<MenuItem value="achievement">{t("jobDetailsGenerationAchievement")}</MenuItem>
|
|
<MenuItem value="interview">{t("jobDetailsGenerationInterview")}</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl size="small" sx={{ minWidth: 190 }}>
|
|
<InputLabel>{t("jobDetailsCoverLetterStyle")}</InputLabel>
|
|
<Select value={coverLetterStyle} label={t("jobDetailsCoverLetterStyle")} onChange={(e) => setCoverLetterStyle(e.target.value as CoverLetterStyle)}>
|
|
<MenuItem value="balanced">{t("jobDetailsCoverLetterStyleBalanced")}</MenuItem>
|
|
<MenuItem value="concise">{t("jobDetailsCoverLetterStyleConcise")}</MenuItem>
|
|
<MenuItem value="formal">{t("jobDetailsCoverLetterStyleFormal")}</MenuItem>
|
|
<MenuItem value="bold">{t("jobDetailsCoverLetterStyleBold")}</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Button size="small" variant="outlined" onClick={async () => {
|
|
try {
|
|
const me = await api.get<{ profileCvText?: string | null }>("/auth/me");
|
|
setTailoredCvText(me.data?.profileCvText ?? "");
|
|
toast(t("jobDetailsLoadedMasterCv"), "success");
|
|
} catch {
|
|
toast(t("jobDetailsLoadMasterCvFailed"), "error");
|
|
}
|
|
}}>{t("jobDetailsStartFromMasterCv")}</Button>
|
|
<Button size="small" variant="outlined" disabled={generatingPackage} onClick={async () => {
|
|
if (!jobId) return;
|
|
setGeneratingPackage(true);
|
|
try {
|
|
const res = await api.post<ApplicationPackageResponse>(`/jobapplications/${jobId}/generate-application-package`, null, { params: { mode: generationMode, coverLetterStyle, attachmentIds: selectedAttachmentIds.join(",") || undefined } });
|
|
setApplicationPackage(res.data);
|
|
setTailoredCvText(res.data.tailoredCvText ?? "");
|
|
toast(t("jobDetailsPackageGenerated"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsPackageGenerationFailed")), "error");
|
|
} finally {
|
|
setGeneratingPackage(false);
|
|
}
|
|
}}>{generatingPackage ? t("jobDetailsGeneratingPackage") : t("jobDetailsGeneratePackage")}</Button>
|
|
<Button size="small" variant="outlined" onClick={() => setTailoredCvText("")}>{t("jobDetailsClear")}</Button>
|
|
<Button size="small" variant="outlined" onClick={() => navigator.clipboard.writeText(tailoredCvText)}>{t("jobDetailsCopy")}</Button>
|
|
<Button size="small" variant="contained" disabled={savingTailoredCv} onClick={async () => {
|
|
if (!jobId) return;
|
|
setSavingTailoredCv(true);
|
|
try {
|
|
await api.put(`/jobapplications/${jobId}/tailored-cv`, { tailoredCvText });
|
|
setJob((prev) => prev ? { ...prev, tailoredCvText, tailoredCvUpdatedAt: new Date().toISOString() } : prev);
|
|
setReadiness(null);
|
|
setInterviewPrep(null);
|
|
toast(t("jobDetailsTailoredCvSaved"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsTailoredCvSaveFailed")), "error");
|
|
} finally {
|
|
setSavingTailoredCv(false);
|
|
}
|
|
}}>{savingTailoredCv ? t("jobDetailsSaving") : t("jobDetailsSaveTailoredCv")}</Button>
|
|
</Box>
|
|
</Box>
|
|
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("jobDetailsTailoredCvIntro")}</Typography>
|
|
<TextField value={tailoredCvText} onChange={(e) => setTailoredCvText(e.target.value)} multiline minRows={14} fullWidth placeholder={t("jobDetailsTailoredCvPlaceholder")} />
|
|
<Typography variant="caption" sx={{ color: "text.secondary", mt: 1, display: "block" }}>{t("jobDetailsLastUpdated", { value: job?.tailoredCvUpdatedAt ? new Date(job.tailoredCvUpdatedAt).toLocaleString() : t("jobDetailsNotSavedYet") })}</Typography>
|
|
</Box>
|
|
|
|
{applicationPackage ? (
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
|
|
<DraftCard title={t("jobDetailsCoverLetterDraft")} content={applicationPackage.coverLetterDraft ?? t("jobDetailsNoDraftAvailable")} onSave={async (content) => {
|
|
if (!jobId) return;
|
|
setSavingApplicationDrafts(true);
|
|
try {
|
|
await api.put(`/jobapplications/${jobId}/application-drafts`, { coverLetterText: content });
|
|
setJob((prev) => prev ? { ...prev, coverLetterText: content } : prev);
|
|
setReadiness(null);
|
|
toast(t("jobDetailsCoverLetterSaved"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsCoverLetterSaveFailed")), "error");
|
|
} finally {
|
|
setSavingApplicationDrafts(false);
|
|
}
|
|
}} saving={savingApplicationDrafts} />
|
|
<DraftCard title={t("jobDetailsShortApplicationAnswer")} content={applicationPackage.applicationAnswerDraft ?? t("jobDetailsNoDraftAvailable")} onSave={async (content) => {
|
|
if (!jobId) return;
|
|
setSavingApplicationDrafts(true);
|
|
try {
|
|
await api.put(`/jobapplications/${jobId}/application-drafts`, { notes: `Application answer draft:\n${content}` });
|
|
setReadiness(null);
|
|
toast(t("jobDetailsApplicationAnswerSaved"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsApplicationAnswerSaveFailed")), "error");
|
|
} finally {
|
|
setSavingApplicationDrafts(false);
|
|
}
|
|
}} saving={savingApplicationDrafts} />
|
|
<DraftCard title={t("jobDetailsRecruiterMessageDraft")} content={applicationPackage.recruiterMessageDraft ?? t("jobDetailsNoDraftAvailable")} onSave={async (content) => {
|
|
if (!jobId) return;
|
|
setSavingApplicationDrafts(true);
|
|
try {
|
|
await api.put(`/jobapplications/${jobId}/application-drafts`, { recruiterMessageDraft: content });
|
|
setJob((prev) => prev ? { ...prev, recruiterMessageDraft: content } : prev);
|
|
toast(t("jobDetailsRecruiterMessageSaved"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsRecruiterMessageSaveFailed")), "error");
|
|
} finally {
|
|
setSavingApplicationDrafts(false);
|
|
}
|
|
}} saving={savingApplicationDrafts} />
|
|
<ListCard title={t("jobDetailsKeyPoints")} items={applicationPackage.keyPoints} />
|
|
<ListCard title={t("jobDetailsAttachmentSignals")} items={applicationPackage.attachmentSignals.length > 0 ? applicationPackage.attachmentSignals : [t("jobDetailsNoAttachmentSignals")]} subtitle={applicationPackage.attachmentFilesUsed.length > 0 ? applicationPackage.attachmentFilesUsed.join(", ") : undefined} />
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 4 && (
|
|
<Box>
|
|
{loadingDraft ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : followUpDraft ? (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 2 }}>
|
|
<Box><Typography variant="overline">{t("jobDetailsReason")}</Typography><Typography>{followUpDraft.reason}</Typography></Box>
|
|
<Box><Typography variant="overline">{t("jobDetailsSuggestedSendDate")}</Typography><Typography>{new Date(followUpDraft.suggestedSendOn).toLocaleDateString()}</Typography></Box>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
<FormControl size="small" sx={{ minWidth: 240 }}>
|
|
<InputLabel>{t("jobDetailsFollowUpMode")}</InputLabel>
|
|
<Select value={followUpMode} label={t("jobDetailsFollowUpMode")} onChange={(e) => setFollowUpMode(e.target.value)}>
|
|
<MenuItem value="post-apply">{t("jobDetailsFollowUpModePostApply")}</MenuItem>
|
|
<MenuItem value="waiting-update">{t("jobDetailsFollowUpModeWaiting")}</MenuItem>
|
|
<MenuItem value="post-interview">{t("jobDetailsFollowUpModePostInterview")}</MenuItem>
|
|
<MenuItem value="offer-checkin">{t("jobDetailsFollowUpModeOffer")}</MenuItem>
|
|
<MenuItem value="feedback-request">{t("jobDetailsFollowUpModeFeedback")}</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Button variant="outlined" onClick={() => setDraftReloadToken((value) => value + 1)}>{t("jobDetailsRegenerateDraft")}</Button>
|
|
</Box>
|
|
<TextField label={t("jobDetailsRecipient")} value={draftRecipient} onChange={(e) => setDraftRecipient(e.target.value)} helperText={t("jobDetailsRecipientHelp")} />
|
|
<TextField label={t("jobDetailsSubject")} value={draftSubject} onChange={(e) => setDraftSubject(e.target.value)} />
|
|
<TextField label={t("jobDetailsDraft")} multiline minRows={8} value={draftBody} onChange={(e) => setDraftBody(e.target.value)} />
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
|
|
<Button variant="outlined" onClick={() => navigator.clipboard.writeText(`${draftSubject}\n\n${draftBody}`)}>{t("jobDetailsCopyDraft")}</Button>
|
|
<Button variant="contained" disabled={sendingDraft || !draftSubject.trim() || !draftBody.trim()} onClick={async () => {
|
|
if (!jobId) return;
|
|
setSendingDraft(true);
|
|
try {
|
|
await api.post(`/jobapplications/${jobId}/send-followup`, { toEmail: draftRecipient || null, subject: draftSubject, body: draftBody, nextFollowUpAt: followUpDraft.suggestedSendOn || null });
|
|
setJob((prev) => prev ? { ...prev, followUpAt: followUpDraft.suggestedSendOn } : prev);
|
|
setReadiness(null);
|
|
toast(t("jobDetailsFollowUpSent"), "success");
|
|
} catch (error: any) {
|
|
toast(getApiErrorMessage(error, t("jobDetailsFollowUpSendFailed")), "error");
|
|
} finally {
|
|
setSendingDraft(false);
|
|
}
|
|
}}>{sendingDraft ? t("jobDetailsSending") : t("jobDetailsSendAndLogEmail")}</Button>
|
|
</Box>
|
|
</Box>
|
|
) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNoDraftAvailable")}</Typography>}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 5 && (
|
|
<Box>
|
|
{loadingCandidateFit ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : candidateFit ? (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
|
<Box><Typography variant="overline">{t("jobDetailsHowYouMatch")}</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{candidateFit.matchSummary}</Typography></Box>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
|
|
<Chip label={t("jobDetailsMatchPercent", { count: candidateFit.matchScore })} color={candidateFit.matchScore >= 75 ? "success" : candidateFit.matchScore >= 55 ? "warning" : "default"} size="small" />
|
|
{fitLevel ? <Chip label={fitLevel.label} color={fitLevel.color} size="small" /> : null}
|
|
</Box>
|
|
</Box>
|
|
<DraftCard title={t("jobDetailsTailoredPitch")} content={candidateFit.tailoredPitch} />
|
|
<SectionChips title={t("jobDetailsStrongMatches")} items={candidateFit.strengths} color="success" />
|
|
<SectionChips title={t("jobDetailsPossibleGaps")} items={candidateFit.gaps} color="warning" outlined />
|
|
<TwoColumnSection leftTitle={t("jobDetailsWhatToMention")} leftItems={candidateFit.mention} rightTitle={t("jobDetailsWhatNotToOverstate")} rightItems={candidateFit.avoid} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsImproveCv")} leftItems={candidateFit.cvImprovements} rightTitle={t("jobDetailsMissingKeywords")} rightItems={candidateFit.missingKeywords} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsTabInterviewPrep")} leftItems={candidateFit.interviewPrep} rightTitle={t("jobDetailsCvGuidance")} rightItems={candidateFit.guidance.cv} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsCoverLetterGuidance")} leftItems={candidateFit.guidance.coverLetter} rightTitle={t("jobDetailsRecruiterMessageGuidance")} rightItems={candidateFit.guidance.recruiterMessage} />
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
|
|
<DraftCard title={t("jobDetailsCoverLetterDraft")} content={candidateFit.coverLetterDraft ?? t("jobDetailsNoDraftAvailableYet")} />
|
|
<DraftCard title={t("jobDetailsRecruiterMessageDraft")} content={candidateFit.recruiterMessageDraft ?? t("jobDetailsNoDraftAvailableYet")} />
|
|
</Box>
|
|
</Box>
|
|
) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsCandidateFitEmpty")}</Typography>}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 6 && (
|
|
<Box>
|
|
{loadingFocusPlan ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : focusPlan ? (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
<DraftCard title={t("jobDetailsFocusSummary")} content={focusPlan.strategicSummary} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsImmediatePriorities")} leftItems={focusPlan.immediatePriorities} rightTitle={t("jobDetailsProofPoints")} rightItems={focusPlan.proofPointsToLeadWith} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsCvBulletIdeas")} leftItems={focusPlan.cvBulletIdeas} rightTitle={t("jobDetailsCoverLetterAngles")} rightItems={focusPlan.coverLetterAngles} />
|
|
<ListCard title={t("jobDetailsFollowUpApproach")} items={focusPlan.followUpApproach} />
|
|
</Box>
|
|
) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNoFocusPlan")}</Typography>}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 7 && (
|
|
<Box>
|
|
{loadingInterviewPrep ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : interviewPrep ? (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
<DraftCard title={t("jobDetailsInterviewPrepBrief")} content={interviewPrep.summary} />
|
|
<TwoColumnSection leftTitle={t("jobDetailsTalkingPoints")} leftItems={interviewPrep.talkingPoints} rightTitle={t("jobDetailsLikelyQuestions")} rightItems={interviewPrep.likelyQuestions} />
|
|
<ListCard title={t("jobDetailsWeakSpots")} items={interviewPrep.weakSpots} />
|
|
</Box>
|
|
) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNoInterviewPrep")}</Typography>}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 8 && (
|
|
<Box>
|
|
{loadingReadiness ? <Box sx={{ py: 4, display: "flex", justifyContent: "center" }}><CircularProgress size={28} /></Box> : readiness ? (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
|
<Typography variant="h6">{t("jobDetailsApplicationReadiness")}</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
|
<Chip label={t("jobDetailsReadyPercent", { count: readiness.score })} color={readiness.score >= 80 ? "success" : readiness.score >= 60 ? "warning" : "default"} />
|
|
<Chip label={readiness.level} variant="outlined" />
|
|
</Box>
|
|
</Box>
|
|
<TwoColumnSection leftTitle={t("jobDetailsCompleted")} leftItems={readiness.completed} rightTitle={t("jobDetailsStillMissing")} rightItems={readiness.missing} />
|
|
<ListCard title={t("jobDetailsSmartReminders")} items={readiness.reminders} />
|
|
</Box>
|
|
) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNoReadiness")}</Typography>}
|
|
</Box>
|
|
)}
|
|
|
|
{tab === 9 && isAdmin && (
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
|
|
{history.length === 0 ? <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNoHistory")}</Typography> : history.map((entry) => <PaperRow key={entry.id} type={entry.type} oldValue={entry.oldValue} newValue={entry.newValue} at={entry.at} note={entry.note} />)}
|
|
</Box>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function SectionChips({ title, items, color, outlined }: { title: string; items: string[]; color: "success" | "warning"; outlined?: boolean }) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
|
<Typography variant="overline">{title}</Typography>
|
|
<Button size="small" variant="outlined" onClick={() => copyLines(items)}>{t("jobDetailsCopy")}</Button>
|
|
</Box>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 0.5 }}>
|
|
{items.length ? items.map((item) => <Chip key={item} label={item} color={color} variant={outlined ? "outlined" : "filled"} size="small" />) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNothingHighlighted")}</Typography>}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function TwoColumnSection({ leftTitle, leftItems, rightTitle, rightItems }: { leftTitle: string; leftItems: string[]; rightTitle: string; rightItems: string[] }) {
|
|
return (
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
|
|
<ListCard title={leftTitle} items={leftItems} />
|
|
<ListCard title={rightTitle} items={rightItems} />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function ListCard({ title, items, subtitle }: { title: string; items: string[]; subtitle?: string }) {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
|
|
<Box>
|
|
<Typography variant="overline">{title}</Typography>
|
|
{subtitle ? <Typography variant="caption" sx={{ display: "block", color: "text.secondary" }}>{subtitle}</Typography> : null}
|
|
</Box>
|
|
<Button size="small" variant="outlined" onClick={() => copyLines(items)}>{t("jobDetailsCopy")}</Button>
|
|
</Box>
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.75 }}>
|
|
{items.length ? items.map((item, index) => <Typography key={`${title}-${index}-${item}`} sx={{ color: "text.primary" }}>• {item}</Typography>) : <Typography sx={{ color: "text.secondary" }}>{t("jobDetailsNothingHighlighted")}</Typography>}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function DraftCard({ title, content, onSave, saving }: { title: string; content: string; onSave?: (content: string) => Promise<void> | void; saving?: boolean }) {
|
|
const { t } = useI18n();
|
|
const [value, setValue] = React.useState(content);
|
|
|
|
React.useEffect(() => {
|
|
setValue(content);
|
|
}, [content]);
|
|
|
|
return (
|
|
<Box sx={{ p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, flexWrap: "wrap", mb: 1 }}>
|
|
<Typography variant="overline">{title}</Typography>
|
|
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
|
<Button size="small" variant="outlined" onClick={() => navigator.clipboard.writeText(value)}>{t("jobDetailsCopy")}</Button>
|
|
{onSave ? <Button size="small" variant="contained" disabled={saving} onClick={() => onSave(value)}>{saving ? t("jobDetailsSaving") : t("save")}</Button> : null}
|
|
</Box>
|
|
</Box>
|
|
<TextField value={value} onChange={(e) => setValue(e.target.value)} multiline minRows={6} fullWidth />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function PaperRow({ type, oldValue, newValue, at, note }: { type: string; oldValue?: string; newValue?: string; at: string; note?: string }) {
|
|
return (
|
|
<Box sx={{ border: "1px solid rgba(15,23,42,0.08)", borderRadius: 2, p: 1.25, background: "rgba(255,255,255,0.6)" }}>
|
|
<Typography sx={{ fontWeight: 900, lineHeight: 1.25 }}>
|
|
{type}
|
|
{oldValue || newValue ? <span style={{ fontWeight: 700, opacity: 0.7 }}>{" "}({oldValue ?? ""} {oldValue || newValue ? "->" : ""} {newValue ?? ""})</span> : null}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: "text.secondary" }}>
|
|
{at ? new Date(at).toLocaleString() : ""}
|
|
{note ? ` - ${note}` : ""}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|