feat(sdk): add global seq numbering and visibleWhen for SDK flow navigation

Fix interleaved step ordering by introducing global sequence numbers (100-4700)
instead of package-relative order. Add conditional visibility (visibleWhen) for
optional steps like Import and DSFA. Fix TOM/workflow prerequisite bugs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Boenisch
2026-02-25 22:26:40 +01:00
parent 16e3c251cc
commit 3efa391de5
4 changed files with 272 additions and 207 deletions

View File

@@ -264,13 +264,11 @@ function SidebarContent({ onNavigate }: SidebarContentProps) {
return packageCompletion[prevPkg.id] < 100
}
// Get visible steps based on customer type
const getVisibleSteps = (packageId: SDKPackageId): SDKStep[] => {
// Filter steps based on visibleWhen conditions
const getVisibleStepsForPackage = (packageId: SDKPackageId): SDKStep[] => {
const steps = getStepsForPackage(packageId)
return steps.filter(step => {
if (step.id === 'import' && state.customerType === 'new') {
return false
}
if (step.visibleWhen) return step.visibleWhen(state)
return true
})
}
@@ -282,7 +280,7 @@ function SidebarContent({ onNavigate }: SidebarContentProps) {
<PackageSection
key={pkg.id}
pkg={pkg}
steps={getVisibleSteps(pkg.id)}
steps={getVisibleStepsForPackage(pkg.id)}
completion={packageCompletion[pkg.id]}
currentStepId={currentStepId}
completedSteps={state.completedSteps}
@@ -296,43 +294,6 @@ function SidebarContent({ onNavigate }: SidebarContentProps) {
{/* Pipeline Flow */}
<PipelineFlow />
{/* Zusatzmodule */}
<div className="pt-3 border-t border-slate-200 dark:border-gray-700">
<div className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-2 px-1">
Zusatzmodule
</div>
<div className="space-y-1">
{[
{ href: '/sdk/rag', label: 'Legal RAG', icon: '🔍' },
{ href: '/sdk/quality', label: 'AI Quality', icon: '✅' },
{ href: '/sdk/security-backlog', label: 'Security Backlog', icon: '⚠️' },
{ href: '/sdk/compliance-hub', label: 'Compliance Hub', icon: '📊' },
{ href: '/sdk/dsms', label: 'DSMS', icon: '🛡️' },
{ href: '/sdk/academy', label: 'Academy', icon: '🎓' },
{ href: '/sdk/whistleblower', label: 'Whistleblower', icon: '📢' },
{ href: '/sdk/incidents', label: 'Incidents', icon: '🚨' },
{ href: '/sdk/reporting', label: 'Reporting', icon: '📈' },
{ href: '/sdk/industry-templates', label: 'Branchenvorlagen', icon: '🏢' },
{ href: '/sdk/document-crawler', label: 'Doc Crawler', icon: '📄' },
{ href: '/sdk/advisory-board', label: 'Beirat', icon: '💬' },
].map(mod => (
<Link
key={mod.href}
href={mod.href}
onClick={onNavigate}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
pathname === mod.href
? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium'
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-800'
}`}
>
<span className="text-base">{mod.icon}</span>
<span className="truncate">{mod.label}</span>
</Link>
))}
</div>
</div>
{/* Quick Info */}
{currentStep && (
<div className="pt-3 border-t border-slate-200 dark:border-gray-700">