cesnimda
91 lines
4.2 KiB
TypeScript
91 lines
4.2 KiB
TypeScript
import React from "react";
|
|
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, LinearProgress, Typography } from "@mui/material";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import { useI18n } from "../../i18n/I18nProvider";
|
|
import { localizeCompletenessLabel } from "./careerCompletenessLabels";
|
|
|
|
// Display-only slice of the Career Profile page: the completeness meter, the "missing" chips, and the
|
|
// version-history accordion. Extracted from CareerProfilePage as the first step of the Phase 1
|
|
// component split. It owns no state and makes no API calls — the parent still holds `completeness`
|
|
// and `versions` and performs the restore — so save/load behaviour is unchanged.
|
|
export type CareerCompletenessView = {
|
|
percent: number;
|
|
missing: string[];
|
|
};
|
|
|
|
export type CareerVersionView = {
|
|
version: number;
|
|
source: string;
|
|
createdAtUtc: string;
|
|
isCurrent: boolean;
|
|
};
|
|
|
|
export default function ProfileCompleteness({
|
|
completeness,
|
|
versions,
|
|
loading,
|
|
onRestore,
|
|
showSummary = true,
|
|
}: {
|
|
completeness: CareerCompletenessView | null;
|
|
versions: CareerVersionView[];
|
|
loading: boolean;
|
|
onRestore: (version: number) => void;
|
|
showSummary?: boolean;
|
|
}) {
|
|
const { language, t } = useI18n();
|
|
if ((!showSummary || !completeness) && versions.length <= 1) return null;
|
|
|
|
const locale = language === "nb" ? "nb-NO" : "en";
|
|
|
|
return (
|
|
<Box sx={{ mb: 2.5, p: 2, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.default" }}>
|
|
{showSummary && completeness ? (
|
|
<>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2, flexWrap: "wrap", mb: 1 }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 900 }}>{t("profileCvCompletenessTitle")}</Typography>
|
|
<Typography variant="h6" sx={{ fontWeight: 900 }}>{completeness.percent}%</Typography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={completeness.percent}
|
|
color={completeness.percent >= 80 ? "success" : completeness.percent >= 40 ? "primary" : "warning"}
|
|
sx={{ height: 8, borderRadius: 999 }}
|
|
/>
|
|
{completeness.missing.length > 0 ? (
|
|
<Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap", alignItems: "center", mt: 1.25 }}>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>{t("profileCvCompletenessMissing")}</Typography>
|
|
{completeness.missing.map((label) => (
|
|
<Chip key={label} size="small" label={localizeCompletenessLabel(label, t)} sx={{ height: 22, fontWeight: 700 }} />
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Typography variant="body2" sx={{ color: "success.main", mt: 1.25, fontWeight: 700 }}>{t("profileCvCompletenessComplete")}</Typography>
|
|
)}
|
|
</>
|
|
) : null}
|
|
{versions.length > 1 ? (
|
|
<Accordion disableGutters elevation={0} sx={{ mt: showSummary ? 1.5 : 0, "&:before": { display: "none" }, backgroundColor: "transparent" }}>
|
|
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0, minHeight: 0 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 700 }}>{t("profileCvVersionHistory", { count: versions.length })}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{ px: 0, pt: 0 }}>
|
|
<Box sx={{ display: "grid", gap: 0.75 }}>
|
|
{versions.slice(0, 12).map((v) => (
|
|
<Box key={v.version} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, flexWrap: "wrap" }}>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>
|
|
v{v.version} · {v.source} · {new Date(v.createdAtUtc).toLocaleString(locale)}{v.isCurrent ? ` · ${t("profileCvVersionCurrent")}` : ""}
|
|
</Typography>
|
|
{!v.isCurrent ? (
|
|
<Button size="small" variant="text" disabled={loading} onClick={() => onRestore(v.version)}>{t("profileCvVersionRestore")}</Button>
|
|
) : null}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
) : null}
|
|
</Box>
|
|
);
|
|
}
|