import * as React from "react"; import { CalendarCheck, FileCode, PlayCircle } from "lucide-react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DocsNavWorkflowTutorialProgressFour } from "@/registry/docs-nav-workflow-tutorial-progress-four/docs-nav-workflow-tutorial-progress-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof DocsNavWorkflowTutorialProgressFour >; const overview: ComponentProps["overview"] = { title: "Launch the guided migration tutorial", description: "Walk through planning, execution, and validation steps to migrate legacy data into the Nextbase workspace.", estimatedTime: "2.5 hours", difficulty: "intermediate", badges: [{ label: "Migration" }, { label: "Team-ready", variant: "outline" }], }; const steps: ComponentProps["steps"] = [ { id: "audit", title: "Audit legacy environment", description: "Inventory data sources, downstream integrations, and blockers.", estimatedMinutes: 20, completed: true, resources: [ { id: "audit-checklist", label: "Audit checklist", href: "https://usenextbase.com/migration/audit", icon: , }, ], }, { id: "plan", title: "Plan the migration", description: "Define phases, roles, regression scope, and rollback triggers.", estimatedMinutes: 35, resources: [ { id: "migration-template", label: "Migration plan template", href: "https://usenextbase.com/templates/migration", icon: , description: "Editable Notion doc", }, ], }, { id: "execute", title: "Execute guided migration", description: "Run scripted imports, validate jobs, and monitor dashboards.", estimatedMinutes: 60, resources: [ { id: "runbook", label: "Execution runbook", href: "https://usenextbase.com/runbooks/migration", icon: , }, ], optional: false, }, { id: "validate", title: "Validate and launch", description: "Confirm parity, flip routing, and communicate release.", estimatedMinutes: 30, resources: [ { id: "validation-kit", label: "Validation kit", href: "https://usenextbase.com/validation", }, ], }, ]; const resources: ComponentProps["resources"] = [ { id: "office-hours", label: "Migration office hours", href: "https://usenextbase.com/office-hours", description: "Book a session with the solution engineering team", }, { id: "slack", label: "Join #migration-support", href: "https://usenextbase.com/slack", description: "Community channel for best practices", }, ]; export function DocsNavWorkflowTutorialProgressFourDemo() { const [activeStepId, setActiveStepId] = React.useState( steps[1]?.id, ); const [stepState, setStepState] = React.useState(steps); const handleCompleteChange: ComponentProps["onStepCompleteChange"] = ( stepId: string, completed: boolean, ) => { setStepState((prev) => prev.map((step) => step.id === stepId ? { ...step, completed, } : step, ), ); }; const goToNext = () => { const currentIndex = stepState.findIndex( (step) => step.id === activeStepId, ); const next = stepState[currentIndex + 1]; if (next) { setActiveStepId(next.id); } }; const goToPrevious = () => { const currentIndex = stepState.findIndex( (step) => step.id === activeStepId, ); const previous = stepState[currentIndex - 1]; if (previous) { setActiveStepId(previous.id); } }; return (

Migration program

Guided migration tutorial

Follow the structured plan to migrate from your legacy system with confidence. The navigation to the left tracks step completion and keeps resources within reach.

Phase planning

Align stakeholders, define rollback triggers, and schedule cutover windows. Use the migration template to capture approvals and timelines.

Execute migration

Run tasks in sequence, monitor dashboards, and log blockers. Ticking the checkbox marks progress and updates the banner percentages for your team.

Heads up Pause before the final validation step to ensure downstream systems have caught up.

Validate and communicate

Confirm parity, update stakeholders, and archive migration artifacts for future audits.

); } export default DocsNavWorkflowTutorialProgressFourDemo;

Simple