Frikky
516 lines
15 KiB
React
516 lines
15 KiB
React
import React from "react";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Typography,
|
|
Stack,
|
|
styled,
|
|
} from "@mui/material";
|
|
|
|
import theme from "../theme.jsx";
|
|
import { toast } from "react-toastify";
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
// Simple icon placeholders; replace with proper assets if desired
|
|
const StepIcon = styled("div")(({ completed }) => ({
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: "50%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontWeight: 700,
|
|
fontSize: 14,
|
|
color: completed ? "#0C111D" : "#ffffff",
|
|
background: completed ? "#43D17C" : "#2F2F2F",
|
|
border: completed ? "1px solid #43D17C" : "1px solid rgba(255,255,255,0.15)",
|
|
flexShrink: 0,
|
|
}));
|
|
|
|
// Single continuous rail will be drawn once for the entire steps list
|
|
|
|
const StepCard = styled(Box)(({ completed, flash }) => ({
|
|
display: "flex",
|
|
gap: "14px",
|
|
minHeight: 60,
|
|
backgroundColor: "#212121",
|
|
border: `1px solid ${flash ? "#f87171" : completed ? "#43D17C" : "rgba(255, 255, 255, 0.1)"}`,
|
|
borderRadius: "12px",
|
|
padding: "16px",
|
|
width: "100%",
|
|
flex: 1,
|
|
minWidth: 0,
|
|
}));
|
|
|
|
const PrimaryButton = styled(Button)({
|
|
background: "linear-gradient(90deg, #FF8544 0%, #FB47A0 100%)",
|
|
color: "#fff",
|
|
borderRadius: 6,
|
|
textTransform: "none",
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
padding: "8px 20px",
|
|
"&:hover": {
|
|
opacity: 0.95,
|
|
background: "linear-gradient(90deg, #FF8544 0%, #FB47A0 100%)",
|
|
},
|
|
});
|
|
|
|
const SecondaryButton = styled(Button)({
|
|
color: "#FF8544",
|
|
borderRadius: 6,
|
|
textTransform: "none",
|
|
fontWeight: 600,
|
|
fontSize: 14,
|
|
padding: "8px 12px",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
|
},
|
|
"&.Mui-disabled": {
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
backgroundColor: "rgba(255, 255, 255, 0.06)",
|
|
},
|
|
});
|
|
|
|
|
|
const StepItem = React.forwardRef(({ step, iconRef }, ref) => (
|
|
<Box ref={ref} sx={{ display: "flex", gap: 1.2, alignItems: "flex-start" }}>
|
|
<Box ref={iconRef} sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: 40, height: 28, zIndex: 1, mt: 1.5 }}>
|
|
<StepIcon completed={step.completed}>{step.index}</StepIcon>
|
|
</Box>
|
|
|
|
<StepCard completed={step.completed} flash={Array.isArray(step.flashKeys) && step.flashKeys.includes(step.key)}>
|
|
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", gap: 1, width: "100%" }}>
|
|
<Stack direction="column" spacing={1} sx={{ width: "70%" }}>
|
|
<Typography
|
|
sx={{
|
|
color: "#ffffff",
|
|
fontWeight: 600,
|
|
fontSize: 16,
|
|
fontFamily: theme.typography.fontFamily,
|
|
}}
|
|
>
|
|
{step.title}
|
|
</Typography>
|
|
{step.description && (
|
|
<Typography
|
|
sx={{
|
|
color: "#c5c5c5",
|
|
fontSize: 12,
|
|
fontFamily: theme.typography.fontFamily,
|
|
}}
|
|
>
|
|
{step.description}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={1}>
|
|
{step.secondaryCta && (
|
|
<SecondaryButton onClick={step.secondaryCta.onClick}>
|
|
{step.secondaryCta.label}
|
|
</SecondaryButton>
|
|
)}
|
|
{step.primaryCta && (
|
|
<PrimaryButton onClick={step.primaryCta.onClick}>
|
|
{step.primaryCta.label}
|
|
</PrimaryButton>
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
</StepCard>
|
|
</Box>
|
|
));
|
|
|
|
const DashboardOnboarding = ({
|
|
open,
|
|
onClose,
|
|
headerTitle = "Get started with your Dashboard",
|
|
headerSubtitle = "Follow these steps to unlock insights.",
|
|
footer,
|
|
globalUrl,
|
|
onExplore,
|
|
setOnboardingOpen,
|
|
isProdStatusOn,
|
|
isCloud,
|
|
}) => {
|
|
// Internal completion state only; handlers are defined separately
|
|
const [completed, setCompleted] = React.useState({
|
|
docs: false,
|
|
apps: false,
|
|
workflow: false,
|
|
wait: false,
|
|
invite: false,
|
|
});
|
|
const [checkingApps, setCheckingApps] = React.useState(false);
|
|
const [checkingWait, setCheckingWait] = React.useState(false);
|
|
const [flashKeys, setFlashKeys] = React.useState([]);
|
|
const [waitProgress, setWaitProgress] = React.useState(0);
|
|
const navigate = useNavigate();
|
|
|
|
// Load persisted completion state
|
|
React.useEffect(() => {
|
|
try {
|
|
const raw = localStorage.getItem("dashboard_onboarding_completed");
|
|
if (!raw) return;
|
|
const data = JSON.parse(raw);
|
|
if (data && typeof data === "object") {
|
|
setCompleted((prev) => ({ ...prev, ...data }));
|
|
}
|
|
} catch {}
|
|
}, []);
|
|
|
|
// Persist completion state
|
|
React.useEffect(() => {
|
|
try {
|
|
localStorage.setItem("dashboard_onboarding_completed", JSON.stringify(completed));
|
|
} catch {}
|
|
}, [completed]);
|
|
|
|
// Handlers
|
|
const handleDocsClick = React.useCallback(() => {
|
|
window.open('/docs', '_blank');
|
|
setCompleted((prev) => ({ ...prev, docs: true }));
|
|
}, []);
|
|
|
|
const handleDiscoverApps = React.useCallback(() => {
|
|
window.open('/apps?tab=discover_apps', '_blank');
|
|
}, []);
|
|
|
|
const handleCheckAppsStatus = React.useCallback(async () => {
|
|
if (checkingApps) return;
|
|
setCheckingApps(true);
|
|
try {
|
|
const resp = await fetch(`${globalUrl}/api/v1/apps`, {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|
credentials: 'include',
|
|
});
|
|
|
|
if (resp.status !== 200) return;
|
|
|
|
const data = await resp.json();
|
|
let count = 0;
|
|
if (Array.isArray(data)) {
|
|
count = data.length;
|
|
} else if (data && typeof data === 'object') {
|
|
count = Object.keys(data).length;
|
|
}
|
|
|
|
if (count >= 3) {
|
|
setCompleted((prev) => ({ ...prev, apps: true }));
|
|
}
|
|
} catch (_) {
|
|
// ignore
|
|
} finally {
|
|
setCheckingApps(false);
|
|
}
|
|
}, [checkingApps]);
|
|
|
|
const handleOpenWorkflow = React.useCallback(() => {
|
|
window.open('/workflows/b658f2a0-7316-40d9-97ed-350a54fe3adc', '_blank');
|
|
setCompleted((prev) => ({ ...prev, workflow: true }));
|
|
}, []);
|
|
|
|
const handleWaitCheck = React.useCallback(async () => {
|
|
if (checkingWait) return;
|
|
setCheckingWait(true);
|
|
|
|
try {
|
|
const days = 5;
|
|
const url = `${globalUrl}/api/v1/stats/workflow_executions_finished?days=${days}`;
|
|
const resp = await fetch(url, {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
|
|
credentials: 'include',
|
|
});
|
|
if (resp.status !== 200) return;
|
|
const data = await resp.json();
|
|
const entries = Array.isArray(data?.entries) ? data.entries : [];
|
|
|
|
const now = new Date();
|
|
let successDays = 0;
|
|
for (let i = 0; i < entries.length; i++) {
|
|
const e = entries[i];
|
|
const d = new Date(e?.Date || e?.date || e?.time || e?.timestamp);
|
|
const diffDays = Math.floor((now - d) / (24 * 60 * 60 * 1000));
|
|
const value = Number(e?.Value ?? e?.value ?? 0);
|
|
if (!isNaN(diffDays) && diffDays <= 4 && value > 0) {
|
|
successDays += 1;
|
|
}
|
|
}
|
|
|
|
const simulated = Math.min(5, successDays);
|
|
if (simulated < 5) {
|
|
setWaitProgress(simulated);
|
|
setFlashKeys(["wait"]);
|
|
setTimeout(() => setFlashKeys([]), 800);
|
|
setCheckingWait(false);
|
|
} else {
|
|
setCompleted((prev) => ({ ...prev, wait: true }));
|
|
setCheckingWait(false);
|
|
}
|
|
} catch (_) {
|
|
// ignore
|
|
} finally {
|
|
setCheckingWait(false);
|
|
}
|
|
setCheckingWait(false);
|
|
}, [checkingWait, globalUrl]);
|
|
|
|
const handleOpenUsers = React.useCallback(() => {
|
|
window.open('/admin?tab=users', '_blank');
|
|
setCompleted((prev) => ({ ...prev, invite: true }));
|
|
}, []);
|
|
|
|
|
|
const steps = [
|
|
{
|
|
index: 1,
|
|
key: 'docs',
|
|
title: 'Read our docs to understand Shuffle',
|
|
description: 'Explore the basics of Shuffle in our documentation. It will help you understand the platform and how to use it.',
|
|
primaryCta: { label: 'Read docs', onClick: handleDocsClick },
|
|
completed: completed.docs,
|
|
},
|
|
{
|
|
index: 2,
|
|
key: 'apps',
|
|
title: 'Activate at least 3 apps',
|
|
description: 'Go to Discover Apps and enable your first three integrations.',
|
|
primaryCta: { label: 'Discover apps', onClick: handleDiscoverApps },
|
|
secondaryCta: { label: checkingApps ? 'Checking…' : 'Check status', onClick: handleCheckAppsStatus, disabled: checkingApps },
|
|
completed: completed.apps,
|
|
},
|
|
{
|
|
index: 3,
|
|
key: 'workflow',
|
|
title: 'Save a public workflow and start its scheduler',
|
|
description: 'Open the public workflow, save it to your org, and start a daily scheduler.',
|
|
primaryCta: { label: 'Open public workflow', onClick: handleOpenWorkflow },
|
|
completed: completed.workflow,
|
|
},
|
|
{
|
|
index: 4,
|
|
key: 'wait',
|
|
title: `Wait for 5 days of runs${completed.wait ? '' : waitProgress > 0 ? ` (${waitProgress}/5)` : ''}`,
|
|
description: 'We will show daily stats after 5 runs. Come back to check again.',
|
|
primaryCta: { label: checkingWait ? 'Checking…' : 'Check status', onClick: handleWaitCheck, disabled: checkingWait },
|
|
completed: completed.wait,
|
|
},
|
|
{
|
|
index: 5,
|
|
key: 'invite',
|
|
title: 'Invite your team members',
|
|
description: 'Add teammates to collaborate in your org.',
|
|
primaryCta: { label: 'Open users page', onClick: handleOpenUsers },
|
|
completed: completed.invite,
|
|
},
|
|
];
|
|
|
|
const mandatoryKeys = ['docs', 'apps', 'workflow', 'wait'];
|
|
const handleFinalDone = React.useCallback(() => {
|
|
const missing = mandatoryKeys.filter((k) => !completed[k]);
|
|
if (missing.length === 0) {
|
|
try { localStorage.setItem("dashboard_onboarding_complete", "true"); } catch {}
|
|
if (typeof onExplore === 'function') {
|
|
try { onExplore(); } catch {}
|
|
}
|
|
if (onClose) onClose();
|
|
return;
|
|
}
|
|
|
|
setFlashKeys(missing);
|
|
setTimeout(() => setFlashKeys([]), 800);
|
|
}, [completed, onClose, onExplore]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<Box sx={{ position: "fixed", inset: 0, zIndex: 2000, }}>
|
|
{/* Blur overlay with visible background */}
|
|
<Box
|
|
onClick={onClose}
|
|
sx={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
backdropFilter: "blur(6px)",
|
|
background: "rgba(0,0,0,0.05)",
|
|
}}
|
|
/>
|
|
|
|
{/* Modal container */}
|
|
<Box
|
|
sx={{
|
|
position: "relative",
|
|
zIndex: 2001,
|
|
width: "100%",
|
|
height: "100%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
p: 2,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
maxWidth: 780,
|
|
backgroundColor: "#1A1A1A",
|
|
borderRadius: "16px",
|
|
border: "1px solid rgba(255,255,255,0.08)",
|
|
p: 3,
|
|
boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
|
|
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2 }}>
|
|
<Box>
|
|
<Typography
|
|
sx={{
|
|
color: "#f1f1f1",
|
|
fontWeight: 700,
|
|
fontSize: 22,
|
|
letterSpacing: "-0.2px",
|
|
fontFamily: theme.typography.fontFamily,
|
|
}}
|
|
>
|
|
{headerTitle}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
color: "#c5c5c5",
|
|
mt: 0.5,
|
|
fontSize: 14,
|
|
fontFamily: theme.typography.fontFamily,
|
|
}}
|
|
>
|
|
{headerSubtitle}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{!isCloud ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 20,
|
|
padding: "4px 10px",
|
|
marginLeft: "5px",
|
|
marginRight: "5px",
|
|
borderRadius: 20,
|
|
marginBottom: "14px",
|
|
background: isProdStatusOn
|
|
? "rgba(43, 192, 126, 0.1)"
|
|
: "rgba(255, 82, 82, 0.1)",
|
|
cursor: "pointer",
|
|
|
|
position: "absolute",
|
|
top: 20,
|
|
right: 20,
|
|
}}
|
|
onClick={() => {
|
|
navigate("/admin?admin_tab=billingstats")
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
marginLeft: 10,
|
|
background: isProdStatusOn ? "#2BC07E" : "#FD4C62",
|
|
borderRadius: 999,
|
|
display: "inline",
|
|
}}
|
|
/>
|
|
<Typography
|
|
style={{
|
|
fontFamily: "12px",
|
|
opacity: 0.9,
|
|
color: isProdStatusOn ? "#2BC07E" : "#FD4C62",
|
|
}}
|
|
>
|
|
{isProdStatusOn ? "Production" : "NOT Production"}
|
|
</Typography>
|
|
</div>
|
|
) : null}
|
|
|
|
</Box>
|
|
|
|
|
|
{/* Steps list with a single continuous rail */}
|
|
<Box sx={{ position: "relative", display: "flex", flexDirection: "column", gap: 3, marginLeft: -1.5, marginTop: 4 }}>
|
|
{/* Base grey rail */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
left: 20,
|
|
top: 30,
|
|
bottom: 60,
|
|
width: 2,
|
|
background: "rgba(255,255,255,0.2)",
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
|
|
{/* Green segments between consecutive completed steps */}
|
|
{steps.map((s, i) => ({ s, i }))
|
|
.filter(({ i }) => i < steps.length - 1)
|
|
.filter(({ i }) => steps[i].completed && steps[i + 1].completed)
|
|
.map(({ i }) => (
|
|
<Box
|
|
key={`seg-${i}`}
|
|
sx={{
|
|
position: "absolute",
|
|
left: 20,
|
|
top: 30 + i * 110, // approximate segment height per step
|
|
height: 130, // matches gap+card combined height; tuned visually
|
|
width: 2,
|
|
background: "#43D17C",
|
|
borderRadius: 2,
|
|
}}
|
|
/>
|
|
))}
|
|
|
|
{steps.map((step, idx) => (
|
|
<StepItem key={step.key || idx} step={{...step, flashKeys}} />
|
|
))}
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'center', gap: 1.5 }}>
|
|
{footer}
|
|
<Button variant="contained" color="primary" onClick={handleFinalDone}
|
|
sx={{
|
|
fontSize: 14,
|
|
padding: "8px 60px",
|
|
}}
|
|
>
|
|
Explore
|
|
</Button>
|
|
|
|
<Button variant="text" color="secondary" onClick={() => {
|
|
setOnboardingOpen(false)
|
|
|
|
toast.warn("The dashboard is not fully set up yet. You can complete the steps later from the onboarding section.", { timeout: 10000 })
|
|
}}
|
|
sx={{
|
|
fontSize: 14,
|
|
padding: "8px 60px",
|
|
}}
|
|
>
|
|
Skip for now
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default DashboardOnboarding;
|
|
|
|
|