feat(ux): onboarding checklist, dashboard-first landing (fixed)
Dashboard onboarding checklist: a dismissible card with 3 steps (add CV, import first job, check match score), each linking straight to where you'd do it. Auto-hides once both CV and a job exist; otherwise persists per-user via localStorage until dismissed. Fixes the actual authenticated-landing redirect to /dashboard: my earlier commit changed App.tsx's inner Shell route for "/", which turned out to be dead code -- the outer router claims "/" for LandingPage first, so Shell's own "/" route is never reached on a direct hit. The real redirect lives in LandingPage.tsx's post-auth-check navigate() and LoginPage.tsx's post-login nextPath default; both now point at /dashboard. Verified live: an authenticated visitor hitting "/" now lands on Dashboard with the onboarding checklist visible, confirmed via rendered page text and screenshot.
This commit is contained in:
@@ -23,6 +23,7 @@ import AutoGraphIcon from "@mui/icons-material/AutoGraph";
|
||||
|
||||
import { api } from "../api";
|
||||
import ViewStateNotice from "./ViewStateNotice";
|
||||
import OnboardingChecklist from "./OnboardingChecklist";
|
||||
import { getUserKeyFromToken } from "../themePrefs";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
import { statusLabel } from "../pipeline";
|
||||
@@ -287,6 +288,7 @@ export default function DashboardView() {
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<OnboardingChecklist hasJobs={(stats?.total ?? 0) > 0} />
|
||||
<SectionCard
|
||||
sx={{
|
||||
backgroundColor: "background.paper",
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { Box, Button, IconButton, Paper, Stack, Typography } from "@mui/material";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { alpha, useTheme } from "@mui/material/styles";
|
||||
|
||||
import { api } from "../api";
|
||||
import { getUserKeyFromToken } from "../themePrefs";
|
||||
import { useI18n } from "../i18n/I18nProvider";
|
||||
|
||||
function dismissKey() {
|
||||
return `onboardingChecklistDismissed:${getUserKeyFromToken()}`;
|
||||
}
|
||||
|
||||
type MeResponse = { profileCvText?: string | null };
|
||||
|
||||
export default function OnboardingChecklist({ hasJobs }: { hasJobs: boolean }) {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const { t } = useI18n();
|
||||
const [hasCv, setHasCv] = useState<boolean | null>(null);
|
||||
const [dismissed, setDismissed] = useState(() => window.localStorage.getItem(dismissKey()) === "1");
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
api.get<MeResponse>("/auth/me")
|
||||
.then((r) => { if (active) setHasCv(Boolean(r.data?.profileCvText?.trim())); })
|
||||
.catch(() => { if (active) setHasCv(false); });
|
||||
return () => { active = false; };
|
||||
}, []);
|
||||
|
||||
const allDone = hasCv === true && hasJobs;
|
||||
if (dismissed || allDone || hasCv === null) return null;
|
||||
|
||||
const dismiss = () => {
|
||||
window.localStorage.setItem(dismissKey(), "1");
|
||||
setDismissed(true);
|
||||
};
|
||||
|
||||
const steps = [
|
||||
{ done: hasCv, label: t("onboardingStepCv"), action: () => navigate("/profile"), actionLabel: t("onboardingStepCvAction") },
|
||||
{ done: hasJobs, label: t("onboardingStepJob"), action: () => navigate("/jobs"), actionLabel: t("onboardingStepJobAction") },
|
||||
{ done: hasCv === true && hasJobs, label: t("onboardingStepMatch"), action: () => navigate("/jobs"), actionLabel: t("onboardingStepMatchAction") },
|
||||
];
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
p: 2.25,
|
||||
mb: 2,
|
||||
borderRadius: 4,
|
||||
border: "1px solid",
|
||||
borderColor: alpha(theme.palette.primary.main, 0.25),
|
||||
background: alpha(theme.palette.primary.main, 0.04),
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<IconButton size="small" onClick={dismiss} aria-label={t("onboardingDismiss")} sx={{ position: "absolute", top: 8, right: 8 }}>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<Typography sx={{ fontWeight: 900, mb: 0.25 }}>{t("onboardingTitle")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("onboardingBody")}</Typography>
|
||||
<Stack spacing={1}>
|
||||
{steps.map((step) => (
|
||||
<Box key={step.label} sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1.5, flexWrap: "wrap" }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
|
||||
{step.done ? <CheckCircleIcon fontSize="small" color="success" /> : <RadioButtonUncheckedIcon fontSize="small" sx={{ color: "text.secondary" }} />}
|
||||
<Typography variant="body2" sx={{ fontWeight: step.done ? 400 : 700, color: step.done ? "text.secondary" : "text.primary", textDecoration: step.done ? "line-through" : "none" }}>
|
||||
{step.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
{!step.done ? <Button size="small" variant="text" onClick={step.action}>{step.actionLabel}</Button> : null}
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user