cesnimda
844 lines
40 KiB
TypeScript
844 lines
40 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useBlocker, useNavigate, useParams } from "react-router-dom";
|
|
|
|
import {
|
|
Alert, Box, Button, Chip, Collapse, Divider, FormControl, FormControlLabel, IconButton, InputLabel,
|
|
MenuItem, Paper, Select, Skeleton, Slider, Stack, Switch, Tab, Tabs, TextField, Tooltip, Typography,
|
|
} from "@mui/material";
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
|
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
|
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
|
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
|
|
import PublicIcon from "@mui/icons-material/Public";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
|
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
|
|
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
|
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import ZoomInIcon from "@mui/icons-material/ZoomIn";
|
|
import ZoomOutIcon from "@mui/icons-material/ZoomOut";
|
|
|
|
import { api, getApiErrorMessage } from "../api";
|
|
import { useToast } from "../toast";
|
|
import RichTextField from "../components/RichTextField";
|
|
import { useDragReorder } from "../hooks/useDragReorder";
|
|
import {
|
|
AI_ACTIONS, CvCustomSectionSetting, CvItemOverride, CvOutline, CvOutlineSection, CvSectionSetting,
|
|
CvTheme, CvVariant, CvVariantSettings, CvVariantVersionInfo, DEFAULT_SECTION_ORDER, SECTION_LABELS,
|
|
cvBuilderApi, moveItem,
|
|
} from "../cvBuilder";
|
|
import { useAccountPlan } from "../accountPlan";
|
|
import { useDialogActions } from "../dialogs";
|
|
|
|
const FONTS = [
|
|
"'Segoe UI', Roboto, Arial, sans-serif",
|
|
"Arial, Helvetica, sans-serif",
|
|
"Georgia, 'Times New Roman', serif",
|
|
"'Helvetica Neue', Arial, sans-serif",
|
|
"'Roboto', Arial, sans-serif",
|
|
"'Poppins', 'Segoe UI', Arial, sans-serif",
|
|
];
|
|
const FONT_LABELS = ["Segoe UI", "Arial", "Georgia (serif)", "Helvetica Neue", "Roboto", "Poppins"];
|
|
const A4_PAGE_PX = (297 / 25.4) * 96; // one A4 page height in CSS px at 96dpi
|
|
type SaveState = "idle" | "unsaved" | "saving" | "saved" | "error";
|
|
|
|
export default function CvBuilderEditor() {
|
|
const { id } = useParams();
|
|
const variantId = Number(id);
|
|
const navigate = useNavigate();
|
|
const { toast } = useToast();
|
|
const { confirmAction } = useDialogActions();
|
|
|
|
const [name, setName] = useState("");
|
|
const [settings, setSettings] = useState<CvVariantSettings | null>(null);
|
|
const [themes, setThemes] = useState<CvTheme[]>([]);
|
|
const [outline, setOutline] = useState<CvOutline | null>(null);
|
|
const [isPublic, setIsPublic] = useState(false);
|
|
const [publicSlug, setPublicSlug] = useState("");
|
|
const [tab, setTab] = useState(0);
|
|
const [html, setHtml] = useState("");
|
|
const [zoom, setZoom] = useState(0.62);
|
|
const [previewing, setPreviewing] = useState(false);
|
|
const [previewError, setPreviewError] = useState(false);
|
|
const [previewRevision, setPreviewRevision] = useState(0);
|
|
const [pages, setPages] = useState(1);
|
|
const [page, setPage] = useState(1);
|
|
const [saveState, setSaveState] = useState<SaveState>("idle");
|
|
const [versions, setVersions] = useState<CvVariantVersionInfo[]>([]);
|
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
|
|
const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const saveRevision = useRef(0);
|
|
const latestSettings = useRef<CvVariantSettings | null>(null);
|
|
const latestName = useRef("");
|
|
const previewTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
|
const scrollRef = useRef<HTMLDivElement | null>(null);
|
|
const contentHeight = useRef(A4_PAGE_PX);
|
|
const blockerPromptOpen = useRef(false);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
(async () => {
|
|
try {
|
|
const [variant, themeList, outlineData] = await Promise.all([
|
|
cvBuilderApi.get(variantId),
|
|
cvBuilderApi.themes(),
|
|
cvBuilderApi.outline().catch(() => null),
|
|
]);
|
|
if (!alive) return;
|
|
applyVariant(variant);
|
|
setThemes(themeList);
|
|
setOutline(outlineData);
|
|
} catch (err) {
|
|
if (alive) setLoadError(getApiErrorMessage(err, "Could not open this CV."));
|
|
}
|
|
})();
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [variantId]);
|
|
|
|
const applyVariant = (variant: CvVariant) => {
|
|
if (saveTimer.current) clearTimeout(saveTimer.current);
|
|
saveRevision.current += 1;
|
|
setName(variant.name);
|
|
setSettings(variant.settings);
|
|
latestName.current = variant.name;
|
|
latestSettings.current = variant.settings;
|
|
setIsPublic(variant.isPublic);
|
|
setPublicSlug(variant.publicSlug);
|
|
setSaveState("saved");
|
|
};
|
|
|
|
// Debounced live preview.
|
|
useEffect(() => {
|
|
if (!settings) return;
|
|
setPreviewing(true);
|
|
if (previewTimer.current) clearTimeout(previewTimer.current);
|
|
previewTimer.current = setTimeout(async () => {
|
|
try {
|
|
const render = await cvBuilderApi.previewSettings(settings);
|
|
setHtml(render.html);
|
|
setPreviewError(false);
|
|
} catch {
|
|
setPreviewError(true);
|
|
} finally {
|
|
setPreviewing(false);
|
|
}
|
|
}, 300);
|
|
return () => {
|
|
if (previewTimer.current) clearTimeout(previewTimer.current);
|
|
};
|
|
}, [settings, previewRevision]);
|
|
|
|
const performSave = useCallback(async (next: CvVariantSettings, nextName: string, revision: number) => {
|
|
setSaveState("saving");
|
|
try {
|
|
await cvBuilderApi.save(variantId, { name: nextName, settings: next, source: "autosave" });
|
|
if (saveRevision.current === revision) setSaveState("saved");
|
|
return true;
|
|
} catch {
|
|
if (saveRevision.current === revision) setSaveState("error");
|
|
return false;
|
|
}
|
|
}, [variantId]);
|
|
|
|
const scheduleSave = useCallback(
|
|
(next: CvVariantSettings, nextName = latestName.current) => {
|
|
latestSettings.current = next;
|
|
latestName.current = nextName;
|
|
const revision = ++saveRevision.current;
|
|
setSaveState("unsaved");
|
|
if (saveTimer.current) clearTimeout(saveTimer.current);
|
|
if (!nextName.trim()) return;
|
|
saveTimer.current = setTimeout(async () => {
|
|
await performSave(next, nextName, revision);
|
|
}, 800);
|
|
},
|
|
[performSave],
|
|
);
|
|
|
|
const retrySave = useCallback(async () => {
|
|
if (!latestSettings.current || !latestName.current.trim()) return false;
|
|
if (saveTimer.current) clearTimeout(saveTimer.current);
|
|
const revision = ++saveRevision.current;
|
|
return performSave(latestSettings.current, latestName.current, revision);
|
|
}, [performSave]);
|
|
|
|
const update = (patch: Partial<CvVariantSettings>) => {
|
|
setSettings((prev) => {
|
|
if (!prev) return prev;
|
|
const next = { ...prev, ...patch };
|
|
scheduleSave(next);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const renameVariant = (value: string) => {
|
|
setName(value);
|
|
latestName.current = value;
|
|
if (settings) scheduleSave(settings, value);
|
|
};
|
|
|
|
const hasUnsavedChanges = saveState === "unsaved" || saveState === "saving" || saveState === "error";
|
|
const blocker = useBlocker(hasUnsavedChanges);
|
|
|
|
useEffect(() => {
|
|
if (blocker.state !== "blocked") {
|
|
blockerPromptOpen.current = false;
|
|
return;
|
|
}
|
|
if (blockerPromptOpen.current) return;
|
|
blockerPromptOpen.current = true;
|
|
void confirmAction("This CV has unsaved changes. Leave and discard them?", {
|
|
title: "Discard unsaved CV changes?",
|
|
confirmLabel: "Discard and leave",
|
|
destructive: true,
|
|
}).then((confirmed) => {
|
|
blockerPromptOpen.current = false;
|
|
if (confirmed) blocker.proceed();
|
|
else blocker.reset();
|
|
});
|
|
}, [blocker, confirmAction]);
|
|
|
|
useEffect(() => {
|
|
const warnBeforeUnload = (event: BeforeUnloadEvent) => {
|
|
if (!hasUnsavedChanges) return;
|
|
event.preventDefault();
|
|
event.returnValue = "";
|
|
};
|
|
window.addEventListener("beforeunload", warnBeforeUnload);
|
|
return () => window.removeEventListener("beforeunload", warnBeforeUnload);
|
|
}, [hasUnsavedChanges]);
|
|
|
|
useEffect(() => () => {
|
|
if (saveTimer.current) clearTimeout(saveTimer.current);
|
|
}, []);
|
|
|
|
const togglePublic = async () => {
|
|
try {
|
|
const updated = await cvBuilderApi.setPublic(variantId, !isPublic);
|
|
setIsPublic(updated.isPublic);
|
|
setPublicSlug(updated.publicSlug);
|
|
toast(updated.isPublic ? "CV is now public." : "CV is now private.", "success");
|
|
} catch (err) {
|
|
toast(getApiErrorMessage(err, "Could not change visibility."), "error");
|
|
}
|
|
};
|
|
|
|
const copyPublicLink = () => {
|
|
navigator.clipboard?.writeText(`${window.location.origin}/cv/${publicSlug}`);
|
|
toast("Public link copied.", "success");
|
|
};
|
|
|
|
const exportPdf = async () => {
|
|
try {
|
|
const res = await api.post(cvBuilderApi.exportPdfUrl(variantId), {}, { responseType: "blob" });
|
|
const url = URL.createObjectURL(res.data as Blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = `${name || "cv"}.pdf`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (err) {
|
|
toast(getApiErrorMessage(err, "PDF export failed."), "error");
|
|
}
|
|
};
|
|
|
|
const loadVersions = async () => {
|
|
try {
|
|
setVersions(await cvBuilderApi.versions(variantId));
|
|
} catch (err) {
|
|
toast(getApiErrorMessage(err, "Could not load history."), "error");
|
|
}
|
|
};
|
|
|
|
const restore = async (version: number) => {
|
|
try {
|
|
const updated = await cvBuilderApi.restore(variantId, version);
|
|
applyVariant(updated);
|
|
await loadVersions();
|
|
toast(`Restored version ${version}.`, "success");
|
|
} catch (err) {
|
|
toast(getApiErrorMessage(err, "Restore failed."), "error");
|
|
}
|
|
};
|
|
|
|
// Measure rendered content to drive page count + break indicators.
|
|
const onIframeLoad = () => {
|
|
try {
|
|
const doc = iframeRef.current?.contentDocument;
|
|
const h = doc?.body?.scrollHeight ?? A4_PAGE_PX;
|
|
contentHeight.current = h;
|
|
if (iframeRef.current) iframeRef.current.style.height = `${h}px`;
|
|
setPages(Math.max(1, Math.round(h / A4_PAGE_PX)));
|
|
} catch {
|
|
setPages(1);
|
|
}
|
|
};
|
|
|
|
const goToPage = (p: number) => {
|
|
const clamped = Math.min(Math.max(1, p), pages);
|
|
setPage(clamped);
|
|
scrollRef.current?.scrollTo({ top: (clamped - 1) * A4_PAGE_PX * zoom, behavior: "smooth" });
|
|
};
|
|
|
|
if (loadError) {
|
|
return (
|
|
<Box sx={{ p: 3 }}>
|
|
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/career/builder")}>Back to CVs</Button>
|
|
<Alert severity="error" sx={{ mt: 2 }}>{loadError}</Alert>
|
|
</Box>
|
|
);
|
|
}
|
|
if (!settings) return <EditorSkeleton />;
|
|
|
|
return (
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "minmax(360px, 460px) 1fr" }, gap: 2, alignItems: "start" }}>
|
|
<Paper sx={{ p: 2, borderRadius: 4, position: { md: "sticky" }, top: 12 }}>
|
|
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
|
|
<Tooltip title="Back to CVs"><IconButton size="small" onClick={() => navigate("/career/builder")}><ArrowBackIcon fontSize="small" /></IconButton></Tooltip>
|
|
<TextField variant="standard" fullWidth value={name} onChange={(e) => renameVariant(e.target.value)}
|
|
error={!name.trim()} helperText={!name.trim() ? "Enter a name before saving." : undefined}
|
|
slotProps={{ input: { style: { fontWeight: 800, fontSize: "1.05rem" } }, htmlInput: { "aria-label": "CV name" } }} />
|
|
<SaveBadge state={saveState} canRetry={!!name.trim()} onRetry={() => void retrySave()} />
|
|
</Stack>
|
|
<Stack direction="row" spacing={1} sx={{ mb: 1, flexWrap: "wrap", gap: 1 }}>
|
|
<Button size="small" variant="outlined" startIcon={<PictureAsPdfIcon />} onClick={exportPdf}>PDF</Button>
|
|
<Button size="small" variant={isPublic ? "contained" : "outlined"} startIcon={<PublicIcon />} onClick={togglePublic}>
|
|
{isPublic ? "Public" : "Private"}
|
|
</Button>
|
|
{isPublic && <Button size="small" startIcon={<ContentCopyIcon />} onClick={copyPublicLink}>Copy link</Button>}
|
|
</Stack>
|
|
|
|
<Tabs value={tab} onChange={(_, v) => { setTab(v); if (v === 3) loadVersions(); }} variant="fullWidth" sx={{ mb: 1.5 }}>
|
|
<Tab label="Content" />
|
|
<Tab label="Customize" />
|
|
<Tab label="AI Tools" />
|
|
<Tab label="History" />
|
|
</Tabs>
|
|
|
|
{tab === 0 && <ContentTab settings={settings} update={update} outline={outline} />}
|
|
{tab === 1 && <CustomizeTab settings={settings} update={update} themes={themes} />}
|
|
{tab === 2 && <AiToolsTab />}
|
|
{tab === 3 && <HistoryTab versions={versions} onRestore={restore} />}
|
|
</Paper>
|
|
|
|
<Paper sx={{ p: 1.5, borderRadius: 4, bgcolor: "#e9edf2" }}>
|
|
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1, px: 1, flexWrap: "wrap" }}>
|
|
<Typography variant="caption" sx={{ fontWeight: 700 }}>Live preview</Typography>
|
|
{previewing && <Chip size="small" label="updating…" variant="outlined" />}
|
|
{previewError && <Chip size="small" label="Preview unavailable" color="error" variant="outlined" />}
|
|
{previewError && <Button size="small" onClick={() => setPreviewRevision((revision) => revision + 1)}>Retry preview</Button>}
|
|
<Box sx={{ flex: 1 }} />
|
|
{pages > 1 && (
|
|
<Stack direction="row" alignItems="center" spacing={0.5}>
|
|
<Button size="small" disabled={page <= 1} onClick={() => goToPage(page - 1)}>Prev</Button>
|
|
<Typography variant="caption">Page {page}/{pages}</Typography>
|
|
<Button size="small" disabled={page >= pages} onClick={() => goToPage(page + 1)}>Next</Button>
|
|
</Stack>
|
|
)}
|
|
<Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
|
|
<IconButton size="small" aria-label="Zoom out" onClick={() => setZoom((z) => Math.max(0.4, +(z - 0.1).toFixed(2)))}><ZoomOutIcon fontSize="small" /></IconButton>
|
|
<Slider size="small" value={zoom} min={0.4} max={1} step={0.02} onChange={(_, v) => setZoom(v as number)} sx={{ width: 90 }} aria-label="Zoom" />
|
|
<IconButton size="small" aria-label="Zoom in" onClick={() => setZoom((z) => Math.min(1, +(z + 0.1).toFixed(2)))}><ZoomInIcon fontSize="small" /></IconButton>
|
|
<Button size="small" onClick={() => setZoom(0.62)}>Fit</Button>
|
|
</Stack>
|
|
<Box ref={scrollRef} sx={{ overflow: "auto", maxHeight: "82vh", display: "flex", justifyContent: "center", p: 1 }}>
|
|
<Box sx={{ position: "relative", width: `calc(210mm * ${zoom})`, height: `calc(${contentHeight.current}px * ${zoom})`, flex: "0 0 auto" }}>
|
|
<iframe
|
|
ref={iframeRef}
|
|
title="CV preview"
|
|
srcDoc={html}
|
|
onLoad={onIframeLoad}
|
|
style={{
|
|
width: "210mm", height: `${contentHeight.current}px`, border: "none",
|
|
transform: `scale(${zoom})`, transformOrigin: "top left",
|
|
boxShadow: "0 8px 30px rgba(0,0,0,0.18)", background: "#fff", display: "block",
|
|
}}
|
|
/>
|
|
{Array.from({ length: Math.max(0, pages - 1) }).map((_, i) => (
|
|
<Box key={i} aria-hidden sx={{
|
|
position: "absolute", left: 0, right: 0, top: `calc(${(i + 1) * A4_PAGE_PX}px * ${zoom})`,
|
|
borderTop: "2px dashed rgba(220,38,38,0.55)", pointerEvents: "none",
|
|
}} />
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function EditorSkeleton() {
|
|
return (
|
|
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "minmax(360px, 460px) 1fr" }, gap: 2 }}>
|
|
<Paper sx={{ p: 2, borderRadius: 4 }}>
|
|
<Skeleton width="60%" height={32} />
|
|
<Skeleton width="100%" height={40} sx={{ mt: 1 }} />
|
|
<Skeleton variant="rounded" height={44} sx={{ mt: 2 }} />
|
|
{[0, 1, 2, 3, 4].map((i) => <Skeleton key={i} variant="rounded" height={40} sx={{ mt: 1 }} />)}
|
|
</Paper>
|
|
<Paper sx={{ p: 1.5, borderRadius: 4, bgcolor: "#e9edf2", display: "flex", justifyContent: "center" }}>
|
|
<Skeleton variant="rounded" width="70%" height={620} />
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function SaveBadge({ state, canRetry, onRetry }: { state: SaveState; canRetry: boolean; onRetry: () => void }) {
|
|
const map: Record<SaveState, { label: string; color: "default" | "warning" | "success" | "error" }> = {
|
|
idle: { label: "", color: "default" },
|
|
unsaved: { label: "Unsaved", color: "warning" },
|
|
saving: { label: "Saving…", color: "warning" },
|
|
saved: { label: "Saved", color: "success" },
|
|
error: { label: "Save failed", color: "error" },
|
|
};
|
|
const m = map[state];
|
|
if (!m.label) return null;
|
|
return (
|
|
<Stack spacing={0.5} alignItems="flex-end" aria-live="polite">
|
|
<Chip size="small" label={m.label} color={m.color} variant="outlined" />
|
|
{(state === "unsaved" || state === "error") ? (
|
|
<Button size="small" disabled={!canRetry} onClick={onRetry}>Save now</Button>
|
|
) : null}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
// ---------- Content tab ----------
|
|
|
|
function ContentTab({ settings, update, outline }: {
|
|
settings: CvVariantSettings;
|
|
update: (p: Partial<CvVariantSettings>) => void;
|
|
outline: CvOutline | null;
|
|
}) {
|
|
const { confirmAction } = useDialogActions();
|
|
// Full section list = configured order (once touched) else default, always including every known key.
|
|
const sectionRows: CvSectionSetting[] = useMemo(() => {
|
|
const base = settings.sections.length ? [...settings.sections] : DEFAULT_SECTION_ORDER.map((key) => ({ key }));
|
|
const have = new Set(base.map((s) => s.key));
|
|
for (const key of DEFAULT_SECTION_ORDER) if (!have.has(key)) base.push({ key });
|
|
return base;
|
|
}, [settings.sections]);
|
|
|
|
const writeSections = (rows: CvSectionSetting[]) => update({ sections: rows });
|
|
const sectionDrag = useDragReorder((from, to) => writeSections(moveItem(sectionRows, from, to)));
|
|
|
|
const patchSection = (key: string, patch: Partial<CvSectionSetting>) =>
|
|
writeSections(sectionRows.map((r) => (r.key === key ? { ...r, ...patch } : r)));
|
|
|
|
const outlineByKey = useMemo(() => {
|
|
const m: Record<string, CvOutlineSection> = {};
|
|
outline?.sections.forEach((s) => { m[s.key] = s; });
|
|
return m;
|
|
}, [outline]);
|
|
|
|
const addCustom = () => {
|
|
const key = `c${Date.now().toString(36)}`;
|
|
update({ customSections: [...settings.customSections, { key, title: "New section", items: [] }] });
|
|
};
|
|
const updateCustom = (key: string, patch: Partial<CvCustomSectionSetting>) =>
|
|
update({ customSections: settings.customSections.map((c) => (c.key === key ? { ...c, ...patch } : c)) });
|
|
const removeCustom = async (section: CvCustomSectionSetting) => {
|
|
if (!(await confirmAction(`Delete the custom section "${section.title || "Untitled"}" and all of its entries?`, {
|
|
title: "Delete custom section",
|
|
confirmLabel: "Delete section",
|
|
destructive: true,
|
|
}))) return;
|
|
update({ customSections: settings.customSections.filter((c) => c.key !== section.key) });
|
|
};
|
|
const moveCustom = (index: number, delta: number) =>
|
|
update({ customSections: moveItem(settings.customSections, index, index + delta) });
|
|
const updateCustomItem = (key: string, index: number, value: string) => {
|
|
const section = settings.customSections.find((item) => item.key === key);
|
|
if (!section) return;
|
|
updateCustom(key, { items: section.items.map((item, itemIndex) => itemIndex === index ? value : item) });
|
|
};
|
|
const removeCustomItem = async (section: CvCustomSectionSetting, index: number) => {
|
|
const value = section.items[index];
|
|
if (value.trim() && !(await confirmAction("Delete this custom section entry?", {
|
|
title: "Delete custom entry",
|
|
confirmLabel: "Delete entry",
|
|
destructive: true,
|
|
}))) return;
|
|
updateCustom(section.key, { items: section.items.filter((_, itemIndex) => itemIndex !== index) });
|
|
};
|
|
|
|
return (
|
|
<Stack spacing={2}>
|
|
<TextField label="Headline override" size="small" fullWidth value={settings.headline ?? ""}
|
|
onChange={(e) => update({ headline: e.target.value || null })}
|
|
helperText="Blank uses the headline from your master profile." />
|
|
|
|
<Box>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 0.5 }}>Sections</Typography>
|
|
<Typography variant="caption" color="text.secondary">Drag to reorder, or use the arrows. Content comes from your master profile.</Typography>
|
|
<Stack spacing={0.5} sx={{ mt: 1 }}>
|
|
{sectionRows.map((row, i) => (
|
|
<SectionRow
|
|
key={row.key}
|
|
row={row}
|
|
index={i}
|
|
total={sectionRows.length}
|
|
dragProps={sectionDrag.getItemProps(i)}
|
|
dragging={sectionDrag.dragIndex === i}
|
|
over={sectionDrag.overIndex === i && sectionDrag.dragIndex !== i}
|
|
outlineSection={outlineByKey[row.key]}
|
|
settings={settings}
|
|
onMove={(d) => writeSections(moveItem(sectionRows, i, i + d))}
|
|
onPatch={(p) => patchSection(row.key, p)}
|
|
onUpdateSettings={update}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>Custom sections</Typography>
|
|
<Button size="small" startIcon={<AddIcon />} onClick={addCustom}>Add</Button>
|
|
</Stack>
|
|
{settings.customSections.length === 0 && (
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: "block", mt: 0.5 }}>
|
|
Add sections unique to this CV (e.g. a portfolio note) without changing your master profile.
|
|
</Typography>
|
|
)}
|
|
<Stack spacing={1} sx={{ mt: 1 }}>
|
|
{settings.customSections.map((c, sectionIndex) => (
|
|
<Paper key={c.key} variant="outlined" sx={{ p: 1 }}>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<TextField variant="standard" fullWidth value={c.title ?? ""} placeholder="Section title"
|
|
error={!c.title?.trim()} helperText={!c.title?.trim() ? "Enter a section title." : undefined}
|
|
onChange={(e) => updateCustom(c.key, { title: e.target.value })} slotProps={{ htmlInput: { "aria-label": "Custom section title" } }} />
|
|
<IconButton size="small" aria-label="Move custom section up" disabled={sectionIndex === 0} onClick={() => moveCustom(sectionIndex, -1)}><ArrowUpwardIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" aria-label="Move custom section down" disabled={sectionIndex === settings.customSections.length - 1} onClick={() => moveCustom(sectionIndex, 1)}><ArrowDownwardIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" aria-label={c.hidden ? "Show custom section" : "Hide custom section"} onClick={() => updateCustom(c.key, { hidden: !c.hidden })}>
|
|
{c.hidden ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
|
|
</IconButton>
|
|
<IconButton size="small" aria-label="Remove custom section" onClick={() => void removeCustom(c)}><DeleteOutlineIcon fontSize="small" /></IconButton>
|
|
</Stack>
|
|
{!c.hidden ? (
|
|
<Stack spacing={1} sx={{ mt: 1 }}>
|
|
{c.items.map((item, itemIndex) => (
|
|
<Stack key={`${c.key}-${itemIndex}`} direction="row" alignItems="flex-start" spacing={0.5}>
|
|
<TextField fullWidth size="small" multiline minRows={2} label={`Entry ${itemIndex + 1}`} value={item}
|
|
error={!item.trim()} helperText={!item.trim() ? "Enter content or delete this entry." : undefined}
|
|
onChange={(event) => updateCustomItem(c.key, itemIndex, event.target.value)} />
|
|
<IconButton size="small" aria-label={`Move custom entry ${itemIndex + 1} up`} disabled={itemIndex === 0}
|
|
onClick={() => updateCustom(c.key, { items: moveItem(c.items, itemIndex, itemIndex - 1) })}><ArrowUpwardIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" aria-label={`Move custom entry ${itemIndex + 1} down`} disabled={itemIndex === c.items.length - 1}
|
|
onClick={() => updateCustom(c.key, { items: moveItem(c.items, itemIndex, itemIndex + 1) })}><ArrowDownwardIcon fontSize="small" /></IconButton>
|
|
<IconButton size="small" aria-label={`Delete custom entry ${itemIndex + 1}`} onClick={() => void removeCustomItem(c, itemIndex)}><DeleteOutlineIcon fontSize="small" /></IconButton>
|
|
</Stack>
|
|
))}
|
|
<Button size="small" startIcon={<AddIcon />} sx={{ alignSelf: "flex-start" }} onClick={() => updateCustom(c.key, { items: [...c.items, ""] })}>Add entry</Button>
|
|
</Stack>
|
|
) : (
|
|
<Typography variant="caption" color="text.secondary">Hidden from this CV.</Typography>
|
|
)}
|
|
</Paper>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function SectionRow({
|
|
row, index, total, dragProps, dragging, over, outlineSection, settings, onMove, onPatch, onUpdateSettings,
|
|
}: {
|
|
row: CvSectionSetting;
|
|
index: number;
|
|
total: number;
|
|
dragProps: React.HTMLAttributes<HTMLDivElement> & { draggable: boolean };
|
|
dragging: boolean;
|
|
over: boolean;
|
|
outlineSection?: CvOutlineSection;
|
|
settings: CvVariantSettings;
|
|
onMove: (delta: number) => void;
|
|
onPatch: (patch: Partial<CvSectionSetting>) => void;
|
|
onUpdateSettings: (p: Partial<CvVariantSettings>) => void;
|
|
}) {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const editable = outlineSection?.kind === "entries" && (outlineSection?.entries.length ?? 0) > 0;
|
|
const sectionLabel = row.title ?? SECTION_LABELS[row.key] ?? row.key;
|
|
|
|
return (
|
|
<Paper
|
|
variant="outlined"
|
|
{...dragProps}
|
|
sx={{
|
|
p: 0.5, opacity: dragging ? 0.4 : row.hidden ? 0.5 : 1,
|
|
borderTop: over ? "2px solid" : undefined, borderTopColor: over ? "primary.main" : undefined,
|
|
transition: "opacity 150ms ease, border-color 120ms ease", cursor: "grab",
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" gap={0.5}>
|
|
<DragIndicatorIcon sx={{ fontSize: 18, color: "text.disabled" }} aria-hidden />
|
|
<Stack>
|
|
<IconButton size="small" aria-label={`Move ${sectionLabel} section up`} disabled={index === 0} onClick={() => onMove(-1)}><ArrowUpwardIcon sx={{ fontSize: 15 }} /></IconButton>
|
|
<IconButton size="small" aria-label={`Move ${sectionLabel} section down`} disabled={index === total - 1} onClick={() => onMove(1)}><ArrowDownwardIcon sx={{ fontSize: 15 }} /></IconButton>
|
|
</Stack>
|
|
<TextField variant="standard" fullWidth value={row.title ?? SECTION_LABELS[row.key] ?? row.key}
|
|
onChange={(e) => onPatch({ title: e.target.value })}
|
|
slotProps={{ input: { disableUnderline: true }, htmlInput: { "aria-label": `Section name for ${row.key}` } }} />
|
|
{editable && (
|
|
<IconButton size="small" aria-label={`${expanded ? "Collapse" : "Expand"} ${sectionLabel} entries`} aria-expanded={expanded} onClick={() => setExpanded((e) => !e)}
|
|
sx={{ transform: expanded ? "rotate(180deg)" : "none", transition: "transform 150ms" }}>
|
|
<ExpandMoreIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
<IconButton size="small" aria-label={`${row.hidden ? "Show" : "Hide"} ${sectionLabel} section`} onClick={() => onPatch({ hidden: !row.hidden })}>
|
|
{row.hidden ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
|
|
</IconButton>
|
|
</Stack>
|
|
{editable && (
|
|
<Collapse in={expanded} unmountOnExit>
|
|
<Box sx={{ pl: 3, pt: 1 }}>
|
|
<EntryEditor section={outlineSection!} row={row} settings={settings} onPatch={onPatch} onUpdateSettings={onUpdateSettings} />
|
|
</Box>
|
|
</Collapse>
|
|
)}
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
function EntryEditor({ section, row, settings, onPatch, onUpdateSettings }: {
|
|
section: CvOutlineSection;
|
|
row: CvSectionSetting;
|
|
settings: CvVariantSettings;
|
|
onPatch: (patch: Partial<CvSectionSetting>) => void;
|
|
onUpdateSettings: (p: Partial<CvVariantSettings>) => void;
|
|
}) {
|
|
// Entry order: itemOrder if set, else master order; always covering every entry key.
|
|
const orderedKeys: string[] = useMemo(() => {
|
|
const master = section.entries.map((e) => e.key ?? "").filter(Boolean);
|
|
if (!row.itemOrder?.length) return master;
|
|
const set = new Set(row.itemOrder);
|
|
return [...row.itemOrder.filter((k) => master.includes(k)), ...master.filter((k) => !set.has(k))];
|
|
}, [row.itemOrder, section.entries]);
|
|
|
|
const entriesByKey = useMemo(() => {
|
|
const m: Record<string, (typeof section.entries)[number]> = {};
|
|
section.entries.forEach((e) => { if (e.key) m[e.key] = e; });
|
|
return m;
|
|
}, [section.entries]);
|
|
|
|
const drag = useDragReorder((from, to) => onPatch({ itemOrder: moveItem(orderedKeys, from, to) }));
|
|
|
|
const setOverride = (key: string, patch: Partial<CvItemOverride>) => {
|
|
const overrides = { ...settings.overrides, [key]: { ...settings.overrides[key], ...patch } };
|
|
onUpdateSettings({ overrides });
|
|
};
|
|
|
|
return (
|
|
<Stack spacing={0.75}>
|
|
{orderedKeys.map((key, i) => {
|
|
const entry = entriesByKey[key];
|
|
if (!entry) return null;
|
|
const ov = settings.overrides[key] ?? {};
|
|
const hidden = !!ov.hidden;
|
|
const entryLabel = ov.title || entry.title || "Untitled";
|
|
return (
|
|
<Paper key={key} variant="outlined" {...drag.getItemProps(i)}
|
|
sx={{
|
|
p: 0.75, opacity: drag.dragIndex === i ? 0.4 : hidden ? 0.5 : 1, cursor: "grab",
|
|
borderTop: drag.overIndex === i && drag.dragIndex !== i ? "2px solid" : undefined,
|
|
borderTopColor: "primary.main", transition: "opacity 150ms ease",
|
|
}}>
|
|
<Stack direction="row" alignItems="center" gap={0.5}>
|
|
<DragIndicatorIcon sx={{ fontSize: 16, color: "text.disabled" }} aria-hidden />
|
|
<Typography variant="body2" sx={{ fontWeight: 700, flex: 1 }}>{ov.title || entry.title || "Untitled"}</Typography>
|
|
<IconButton size="small" aria-label={`Move ${entryLabel} entry up`} disabled={i === 0} onClick={() => onPatch({ itemOrder: moveItem(orderedKeys, i, i - 1) })}><ArrowUpwardIcon sx={{ fontSize: 14 }} /></IconButton>
|
|
<IconButton size="small" aria-label={`Move ${entryLabel} entry down`} disabled={i === orderedKeys.length - 1} onClick={() => onPatch({ itemOrder: moveItem(orderedKeys, i, i + 1) })}><ArrowDownwardIcon sx={{ fontSize: 14 }} /></IconButton>
|
|
<IconButton size="small" aria-label={`${hidden ? "Show" : "Hide"} ${entryLabel} entry`} onClick={() => setOverride(key, { hidden: !hidden })}>
|
|
{hidden ? <VisibilityOffIcon sx={{ fontSize: 16 }} /> : <VisibilityIcon sx={{ fontSize: 16 }} />}
|
|
</IconButton>
|
|
</Stack>
|
|
{!hidden && (
|
|
<Stack spacing={0.75} sx={{ mt: 0.75 }}>
|
|
<TextField size="small" fullWidth label="Title" value={ov.title ?? entry.title ?? ""}
|
|
onChange={(e) => setOverride(key, { title: e.target.value })} />
|
|
<TextField size="small" fullWidth label="Subtitle" value={ov.subtitle ?? entry.subtitle ?? ""}
|
|
onChange={(e) => setOverride(key, { subtitle: e.target.value })} />
|
|
<RichTextField label="Bullet points (one per line)" minRows={2}
|
|
value={(ov.bullets ?? entry.bullets).join("\n")}
|
|
onChange={(v) => setOverride(key, { bullets: v.split("\n") })} />
|
|
{ov.bullets && (
|
|
<Button size="small" onClick={() => setOverride(key, { bullets: undefined })}>Reset to master bullets</Button>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
</Paper>
|
|
);
|
|
})}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
// ---------- Customize tab ----------
|
|
|
|
function CustomizeTab({ settings, update, themes }: {
|
|
settings: CvVariantSettings;
|
|
update: (p: Partial<CvVariantSettings>) => void;
|
|
themes: CvTheme[];
|
|
}) {
|
|
return (
|
|
<Stack spacing={2}>
|
|
<Box>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>Theme</Typography>
|
|
<Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1 }}>
|
|
{themes.map((t) => {
|
|
const active = t.id === settings.themeId;
|
|
const locked = t.available === false;
|
|
return (
|
|
<Paper key={t.id} variant="outlined" role="button" tabIndex={locked ? -1 : 0} aria-disabled={locked}
|
|
onClick={() => { if (!locked) update({ themeId: t.id }); }}
|
|
onKeyDown={(e) => { if (!locked && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); update({ themeId: t.id }); } }}
|
|
sx={{ p: 1, cursor: locked ? "not-allowed" : "pointer", opacity: locked ? 0.6 : 1, outline: "none", borderColor: active ? "primary.main" : undefined, borderWidth: active ? 2 : 1, "&:focus-visible": { boxShadow: 3 } }}>
|
|
<Stack direction="row" spacing={0.5} sx={{ mb: 0.5 }}>
|
|
{t.swatches.map((s, i) => <Box key={i} sx={{ width: 14, height: 14, borderRadius: "3px", bgcolor: s, border: "1px solid rgba(0,0,0,0.1)" }} />)}
|
|
</Stack>
|
|
<Typography variant="body2" sx={{ fontWeight: 700 }}>{t.name}</Typography>
|
|
<Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>{t.category}</Typography>
|
|
<Stack direction="row" spacing={0.5} sx={{ mt: 0.5 }}>
|
|
{t.atsFriendly && <Chip size="small" label="ATS-friendly" color="success" variant="outlined" sx={{ height: 18, fontSize: 10 }} />}
|
|
{t.requiresPro && <Chip size="small" label={locked ? "Pro" : "Pro unlocked"} color="secondary" variant="outlined" sx={{ height: 18, fontSize: 10 }} />}
|
|
</Stack>
|
|
</Paper>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<Typography variant="body2" sx={{ flex: 1 }}>Accent colour</Typography>
|
|
<input type="color" aria-label="Accent colour" value={settings.accentColor ?? "#2563eb"} onChange={(e) => update({ accentColor: e.target.value })} />
|
|
{settings.accentColor && <Button size="small" onClick={() => update({ accentColor: null })}>Reset</Button>}
|
|
</Stack>
|
|
|
|
<FormControl size="small" fullWidth>
|
|
<InputLabel>Heading font</InputLabel>
|
|
<Select label="Heading font" value={settings.headingFont ?? ""} onChange={(e) => update({ headingFont: e.target.value || null })}>
|
|
<MenuItem value="">Theme default</MenuItem>
|
|
{FONTS.map((f, i) => <MenuItem key={f} value={f}>{FONT_LABELS[i]}</MenuItem>)}
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl size="small" fullWidth>
|
|
<InputLabel>Body font</InputLabel>
|
|
<Select label="Body font" value={settings.bodyFont ?? ""} onChange={(e) => update({ bodyFont: e.target.value || null })}>
|
|
<MenuItem value="">Theme default</MenuItem>
|
|
{FONTS.map((f, i) => <MenuItem key={f} value={f}>{FONT_LABELS[i]}</MenuItem>)}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<FormControl size="small" fullWidth>
|
|
<InputLabel>Density</InputLabel>
|
|
<Select label="Density" value={settings.density ?? "balanced"} onChange={(e) => update({ density: e.target.value })}>
|
|
<MenuItem value="compact">Compact</MenuItem>
|
|
<MenuItem value="balanced">Balanced</MenuItem>
|
|
<MenuItem value="roomy">Roomy</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl size="small" fullWidth>
|
|
<InputLabel>Page size</InputLabel>
|
|
<Select label="Page size" value={settings.pageSize ?? "a4"} onChange={(e) => update({ pageSize: e.target.value })}>
|
|
<MenuItem value="a4">A4</MenuItem>
|
|
<MenuItem value="letter">Letter</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Divider />
|
|
<FormControlLabel control={<Switch checked={settings.showPhoto} onChange={(e) => update({ showPhoto: e.target.checked })} />} label="Show profile photo" />
|
|
<FormControlLabel control={<Switch checked={settings.showIcons} onChange={(e) => update({ showIcons: e.target.checked })} />} label="Contact icons (supported themes)" />
|
|
<FormControlLabel control={<Switch checked={settings.showPageNumbers} onChange={(e) => update({ showPageNumbers: e.target.checked })} />} label="Page numbers" />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function AiToolsTab() {
|
|
const { toast } = useToast();
|
|
const { canUseAi } = useAccountPlan();
|
|
const [text, setText] = useState("");
|
|
const [role, setRole] = useState("");
|
|
const [result, setResult] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const run = async (action: string) => {
|
|
if (!canUseAi) return;
|
|
if (!text.trim()) {
|
|
toast("Paste some text to work on first.", "info");
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
const res = await cvBuilderApi.aiAssist({ action, text, role: role || undefined });
|
|
setResult(res.result);
|
|
} catch (err) {
|
|
toast(getApiErrorMessage(err, "AI request failed."), "error");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Stack spacing={1.5}>
|
|
<Alert severity="info" sx={{ py: 0.5 }} action={!canUseAi ? <Button href="/settings" size="small">View Pro</Button> : undefined}>{canUseAi ? "AI suggestions never change your profile automatically. Copy what you like back into your CV." : "AI writing assistance requires Pro. Your CV content remains editable."}</Alert>
|
|
<TextField label="Text to improve" multiline minRows={4} fullWidth size="small" value={text} onChange={(e) => setText(e.target.value)}
|
|
placeholder="Paste a summary, a bullet, or a whole section…" />
|
|
<TextField label="Target role (optional)" size="small" fullWidth value={role} onChange={(e) => setRole(e.target.value)} />
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
|
{AI_ACTIONS.map((a) => (
|
|
<Button key={a.key} size="small" variant="outlined" disabled={busy || !canUseAi} startIcon={<AutoFixHighIcon />} onClick={() => run(a.key)}>{canUseAi ? a.label : "Pro required"}</Button>
|
|
))}
|
|
</Box>
|
|
{result && (
|
|
<Paper variant="outlined" sx={{ p: 1.5 }}>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.5 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>Suggestion</Typography>
|
|
<Button size="small" startIcon={<ContentCopyIcon />} onClick={() => { navigator.clipboard?.writeText(result); toast("Copied.", "success"); }}>Copy</Button>
|
|
</Stack>
|
|
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>{result}</Typography>
|
|
</Paper>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function HistoryTab({ versions, onRestore }: { versions: CvVariantVersionInfo[]; onRestore: (v: number) => void }) {
|
|
if (versions.length === 0) return <Typography variant="body2" color="text.secondary">No saved versions yet. Edits autosave and appear here.</Typography>;
|
|
return (
|
|
<Stack spacing={0.5}>
|
|
<Typography variant="caption" color="text.secondary">{versions.length} saved version{versions.length === 1 ? "" : "s"}. Restoring keeps history — it adds a new version.</Typography>
|
|
{versions.map((v) => (
|
|
<Paper key={v.version} variant="outlined" sx={{ p: 1, display: "flex", alignItems: "center", gap: 1 }}>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
|
Version {v.version} {v.isCurrent && <Chip size="small" label="current" sx={{ ml: 0.5, height: 18 }} />}
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary">{relTime(v.createdAtUtc)} · {v.source}</Typography>
|
|
</Box>
|
|
{!v.isCurrent && <Button size="small" onClick={() => onRestore(v.version)}>Restore</Button>}
|
|
</Paper>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function relTime(iso: string): string {
|
|
const then = new Date(iso).getTime();
|
|
const diff = Date.now() - then;
|
|
const mins = Math.round(diff / 60000);
|
|
if (mins < 1) return "just now";
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.round(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
return new Date(iso).toLocaleDateString();
|
|
}
|