feat(career): migrate overview and factual evidence

job-tracker-ui/src/views/career/CareerWorkspaceOverview.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import { Alert, Box, Button, Chip, LinearProgress, Paper, Skeleton, Stack, Typography } from "@mui/material";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
@@ -9,6 +9,7 @@ import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
 import { CvVariantSummary, cvBuilderApi } from "../../cvBuilder";
 import type { UserOperation } from "../../types";
 import { useI18n } from "../../i18n/I18nProvider";
+import { PageSection } from "../../layout/PageLayout";
 import { localizeCompletenessLabel } from "./careerCompletenessLabels";
 
 export type CareerWorkspaceCompleteness = {
@@ -40,10 +41,10 @@ function ActionCard({ title, body, href, label, icon, onNavigate }: {
   onNavigate?: () => void;
 }) {
   return (
-    <Paper variant="outlined" component="article" sx={{ p: 2, borderRadius: 3, display: "flex", flexDirection: "column", gap: 1.25 }}>
+    <Paper variant="outlined" component="article" sx={{ p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 1.25 }}>
       <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
         <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
-        <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>{title}</Typography>
+        <Typography component="h3" variant="sectionTitle" sx={{ overflowWrap: "anywhere" }}>{title}</Typography>
       </Box>
       <Typography variant="body2" color="text.secondary" sx={{ flex: 1 }}>{body}</Typography>
       <Button
@@ -58,20 +59,30 @@ function ActionCard({ title, body, href, label, icon, onNavigate }: {
   );
 }
 
-export default function CareerWorkspaceOverview({ completeness, runs, loading, loadError, onNavigate }: {
+export default function CareerWorkspaceOverview({ completeness, runs, loading, loadError, onNavigate, runsLoading = false, runsLoadError = null, onRetryProfile, onRetryRuns, profileDirty = false }: {
   completeness: CareerWorkspaceCompleteness | null;
   runs: CareerWorkspaceImportRun[];
   loading: boolean;
   loadError: string | null;
   onNavigate?: (section: "profile" | "import") => void;
+  runsLoading?: boolean;
+  runsLoadError?: string | null;
+  onRetryProfile?: () => void;
+  onRetryRuns?: () => void;
+  profileDirty?: boolean;
 }) {
   const { language, t } = useI18n();
   const [recentCvs, setRecentCvs] = useState<CvVariantSummary[]>([]);
   const [recentLoading, setRecentLoading] = useState(true);
   const [recentError, setRecentError] = useState(false);
+  const [recentAttempt, setRecentAttempt] = useState(0);
+  const profileLinkRef = useRef<HTMLAnchorElement>(null);
+  const importLinkRef = useRef<HTMLAnchorElement>(null);
+  const recentLinkRef = useRef<HTMLAnchorElement>(null);
 
   useEffect(() => {
     let cancelled = false;
+    setRecentLoading(true);
     cvBuilderApi.list()
       .then((items) => {
         if (!cancelled) {
@@ -88,7 +99,7 @@ export default function CareerWorkspaceOverview({ completeness, runs, loading, l
         if (!cancelled) setRecentLoading(false);
       });
     return () => { cancelled = true; };
-  }, []);
+  }, [recentAttempt]);
 
   const importState = useMemo(() => {
     const review = runs.filter((run) => run.status === "pending_review");
@@ -100,66 +111,60 @@ export default function CareerWorkspaceOverview({ completeness, runs, loading, l
     return { severity: "success" as const, label: t("careerOverviewImportCv"), message: t(runs.length > 0 ? "careerOverviewImportComplete" : "careerOverviewNoImport") };
   }, [runs, t]);
 
-  const isFirstRun = !loading && !recentLoading && !loadError && (completeness?.percent ?? 0) === 0 && runs.length === 0 && recentCvs.length === 0;
+  const profileKnown = !loading && !loadError && completeness !== null;
+  const importUnknown = runsLoading && runs.length === 0;
+  const importLabel = importUnknown || runsLoadError ? t("careerWorkspaceImportTab") : importState.label;
+  const isFirstRun = profileKnown && !runsLoading && !runsLoadError && !recentLoading && !recentError && completeness.percent === 0 && runs.length === 0 && recentCvs.length === 0;
 
   return (
-    <Box component="section" aria-labelledby="career-workspace-overview-title" sx={{ display: "grid", gap: 2 }}>
-      <Paper sx={{ p: { xs: 2, sm: 2.5 }, borderRadius: 4 }}>
-        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2, flexWrap: "wrap" }}>
-          <Box>
-            <Typography id="career-workspace-overview-title" component="h2" variant="h5" sx={{ fontWeight: 900 }}>{t("careerWorkspaceOverviewTab")}</Typography>
-            <Typography color="text.secondary">{t("careerOverviewSubtitle")}</Typography>
-          </Box>
-          <Button variant="contained" startIcon={<DescriptionOutlinedIcon />} href="/career/builder">{t("careerOverviewOpenBuilder")}</Button>
-        </Box>
-
-        {isFirstRun ? <Alert severity="info" sx={{ mt: 2 }}>{t("careerOverviewFirstRun")}</Alert> : null}
-        {loadError ? <Alert severity="error" sx={{ mt: 2 }}>{t("careerOverviewUnavailable")}</Alert> : null}
-
-        <Box sx={{ mt: 2, display: "grid", gridTemplateColumns: { xs: "1fr", md: "minmax(0, 1fr) minmax(0, 1fr)" }, gap: 2 }}>
-          <Box aria-label={t("careerOverviewProfileStatus")} sx={{ p: 2, borderRadius: 3, bgcolor: "background.default", border: "1px solid", borderColor: "divider" }}>
+    <PageSection title={t("careerWorkspaceOverviewTab")} description={t("careerOverviewSubtitle")} actions={
+      <Button variant="contained" startIcon={<DescriptionOutlinedIcon />} href="/career/builder">{t("careerOverviewOpenBuilder")}</Button>
+    }>
+      <Box sx={{ display: "grid", gap: "var(--app-section-gap)" }}>
+        {isFirstRun ? <Alert severity="info">{t("careerOverviewFirstRun")}</Alert> : null}
+        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "minmax(0, 1fr) minmax(0, 1fr)" }, gap: 2 }}>
+          <PageSection surface title={t("careerOverviewProfileStatus")} level="h3">
             <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center" }}>
-              <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>{t("careerOverviewCompleteness")}</Typography>
-              {loading ? <Skeleton width={42} /> : <Typography sx={{ fontWeight: 900 }}>{completeness?.percent ?? 0}%</Typography>}
+              <Typography variant="body2" color="text.secondary">{t("careerOverviewCompleteness")}</Typography>
+              {loading ? <Skeleton width={42} /> : profileKnown ? <Typography sx={{ fontWeight: 900 }}>{completeness.percent}%</Typography> : null}
             </Box>
-            <LinearProgress aria-label={t("careerOverviewCompletenessLabel")} variant={loading ? "indeterminate" : "determinate"} value={completeness?.percent ?? 0} sx={{ mt: 1, height: 8, borderRadius: 999 }} />
-            {!loading && completeness?.missing.length ? (
+            {loading || profileKnown ? <LinearProgress aria-label={t("careerOverviewCompletenessLabel")} variant={loading ? "indeterminate" : "determinate"} value={completeness?.percent} sx={{ mt: 1, height: 8, borderRadius: 999 }} /> : null}
+            {loadError ? <Alert severity="error" sx={{ mt: 1 }} action={onRetryProfile ? <Button color="inherit" disabled={loading || profileDirty} onClick={() => { profileLinkRef.current?.focus(); onRetryProfile(); }}>{t("retry")}</Button> : undefined}>
+              {t("careerOverviewUnavailable")}
+              {profileDirty ? <Typography variant="body2" sx={{ mt: 1 }}>{t("careerOverviewRetryDraftHint")}</Typography> : null}
+            </Alert> : null}
+            {profileKnown && completeness.missing.length ? (
               <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>{t("careerOverviewAddNext", { items: completeness.missing.slice(0, 3).map((label) => localizeCompletenessLabel(label, t)).join(", ") })}</Typography>
             ) : null}
-            <Button href="/career?section=profile" onClick={onNavigate ? (event) => { event.preventDefault(); onNavigate("profile"); } : undefined} size="small" sx={{ mt: 1, px: 0.5 }}>{t("careerOverviewImproveProfile")}</Button>
-          </Box>
-
-          <Alert severity={importState.severity} sx={{ borderRadius: 3, alignItems: "flex-start" }}>
-            <Typography variant="subtitle1" sx={{ fontWeight: 800 }}>{t("careerOverviewCvImport")}</Typography>
-            <Typography variant="body2">{importState.message}</Typography>
-            <Button href="/career?section=import" onClick={onNavigate ? (event) => { event.preventDefault(); onNavigate("import"); } : undefined} color="inherit" size="small" sx={{ mt: 0.75, px: 0.5 }}>{importState.label}</Button>
-          </Alert>
+            <Button ref={profileLinkRef} href="/career?section=profile" onClick={onNavigate ? (event) => { event.preventDefault(); onNavigate("profile"); } : undefined} size="small" sx={{ mt: 1, px: 0.5 }}>{t("careerOverviewImproveProfile")}</Button>
+          </PageSection>
+          <PageSection surface title={t("careerOverviewCvImport")} level="h3">
+            {importUnknown ? <Typography role="status" color="text.secondary">{t("loading")}</Typography>
+              : runsLoadError ? <Alert severity="error" action={onRetryRuns ? <Button color="inherit" disabled={runsLoading} onClick={() => { importLinkRef.current?.focus(); onRetryRuns(); }}>{t("retry")}</Button> : undefined}>{t("careerOverviewImportUnavailable")}</Alert>
+              : <Alert severity={importState.severity}>{importState.message}</Alert>}
+            <Button ref={importLinkRef} href="/career?section=import" onClick={onNavigate ? (event) => { event.preventDefault(); onNavigate("import"); } : undefined} size="small" sx={{ mt: 0.75, px: 0.5 }}>{importLabel}</Button>
+          </PageSection>
         </Box>
-      </Paper>
 
       <Box component="nav" aria-label={t("careerOverviewActions")} sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(2, minmax(0, 1fr))", xl: "repeat(4, minmax(0, 1fr))" }, gap: 1.5 }}>
         <ActionCard title={t("careerOverviewCareerProfile")} body={t("careerOverviewCareerProfileBody")} href="/career?section=profile" onNavigate={onNavigate ? () => onNavigate("profile") : undefined} label={t("careerOverviewEditProfile")} icon={<PersonOutlineIcon />} />
-        <ActionCard title={t("careerOverviewImportCv")} body={t("careerOverviewImportBody")} href="/career?section=import" onNavigate={onNavigate ? () => onNavigate("import") : undefined} label={importState.label} icon={<UploadFileOutlinedIcon />} />
+        <ActionCard title={t("careerOverviewImportCv")} body={t("careerOverviewImportBody")} href="/career?section=import" onNavigate={onNavigate ? () => onNavigate("import") : undefined} label={importLabel} icon={<UploadFileOutlinedIcon />} />
         <ActionCard title={t("careerOverviewGeneralCv")} body={t("careerOverviewGeneralCvBody")} href="/career/builder" label={t("careerOverviewCreateGeneralCv")} icon={<DescriptionOutlinedIcon />} />
         <ActionCard title={t("careerOverviewJobCv")} body={t("careerOverviewJobCvBody")} href="/jobs" label={t("careerOverviewChooseJob")} icon={<WorkOutlineIcon />} />
       </Box>
 
-      <Paper component="section" aria-labelledby="recent-cvs-title" sx={{ p: 2, borderRadius: 4 }}>
-        <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
-          <Typography id="recent-cvs-title" variant="h6" sx={{ fontWeight: 800 }}>{t("careerOverviewRecentCvs")}</Typography>
-          <Button href="/career/builder" size="small">{t("careerOverviewViewAll")}</Button>
-        </Box>
+      <PageSection surface title={t("careerOverviewRecentCvs")} level="h3" actions={<Button ref={recentLinkRef} href="/career/builder" size="small">{t("careerOverviewViewAll")}</Button>}>
         {recentLoading ? (
-          <Stack spacing={1} sx={{ mt: 1.5 }}><Skeleton height={32} /><Skeleton height={32} /></Stack>
+          <Stack spacing={1}><Typography role="status" color="text.secondary">{t("loading")}</Typography><Skeleton height={32} /><Skeleton height={32} /></Stack>
         ) : recentError ? (
-          <Alert severity="warning" sx={{ mt: 1.5 }}>{t("careerOverviewRecentFailed")}</Alert>
+          <Alert severity="warning" action={<Button color="inherit" onClick={() => { recentLinkRef.current?.focus(); setRecentAttempt((attempt) => attempt + 1); }}>{t("retry")}</Button>}>{t("careerOverviewRecentFailed")}</Alert>
         ) : recentCvs.length === 0 ? (
           <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>{t("careerOverviewNoCvs")}</Typography>
         ) : (
           <Stack spacing={1} sx={{ mt: 1 }}>
             {recentCvs.map((cv) => (
               <Box key={cv.id} sx={{ display: "flex", justifyContent: "space-between", gap: 1, alignItems: "center", flexWrap: "wrap" }}>
-                <Box>
+                <Box sx={{ minWidth: 0, overflowWrap: "anywhere" }}>
                   <Typography variant="body2" sx={{ fontWeight: 700 }}>{cv.name}</Typography>
                   <Typography variant="caption" color="text.secondary">{t("careerOverviewUpdated", { date: new Date(cv.updatedAtUtc).toLocaleDateString(language === "nb" ? "nb-NO" : "en-GB") })}</Typography>
                 </Box>
@@ -171,7 +176,8 @@ export default function CareerWorkspaceOverview({ completeness, runs, loading, l
             ))}
           </Stack>
         )}
-      </Paper>
-    </Box>
+      </PageSection>
+      </Box>
+    </PageSection>
   );
 }