'use client' import React from 'react' import Link from 'next/link' import { usePathname } from 'next/navigation' import { useSDK, SDK_STEPS, SDK_PACKAGES, getStepsForPackage, type SDKPackageId, type SDKStep, } from '@/lib/sdk' // ============================================================================= // ICONS // ============================================================================= const CheckIcon = () => ( ) const LockIcon = () => ( ) const WarningIcon = () => ( ) const ChevronDownIcon = ({ className = '' }: { className?: string }) => ( ) const CollapseIcon = ({ collapsed }: { collapsed: boolean }) => ( ) // ============================================================================= // PROGRESS BAR // ============================================================================= interface ProgressBarProps { value: number className?: string } function ProgressBar({ value, className = '' }: ProgressBarProps) { return (
) } // ============================================================================= // PACKAGE INDICATOR // ============================================================================= interface PackageIndicatorProps { packageId: SDKPackageId order: number name: string icon: string completion: number isActive: boolean isExpanded: boolean isLocked: boolean onToggle: () => void collapsed: boolean } function PackageIndicator({ order, name, icon, completion, isActive, isExpanded, isLocked, onToggle, collapsed, }: PackageIndicatorProps) { if (collapsed) { return ( ) } return ( ) } // ============================================================================= // STEP ITEM // ============================================================================= interface StepItemProps { step: SDKStep isActive: boolean isCompleted: boolean isLocked: boolean checkpointStatus?: 'passed' | 'failed' | 'warning' | 'pending' collapsed: boolean } function StepItem({ step, isActive, isCompleted, isLocked, checkpointStatus, collapsed }: StepItemProps) { const content = (
{/* Step indicator */}
{isCompleted ? (
) : isLocked ? (
) : isActive ? (
) : (
)}
{/* Step name - hidden when collapsed */} {!collapsed && {step.nameShort}} {/* Checkpoint status - hidden when collapsed */} {!collapsed && checkpointStatus && checkpointStatus !== 'pending' && (
{checkpointStatus === 'passed' ? (
) : checkpointStatus === 'failed' ? (
!
) : (
)}
)}
) if (isLocked) { return content } return ( {content} ) } // ============================================================================= // ADDITIONAL MODULE ITEM // ============================================================================= interface AdditionalModuleItemProps { href: string icon: React.ReactNode label: string isActive: boolean collapsed: boolean } function AdditionalModuleItem({ href, icon, label, isActive, collapsed }: AdditionalModuleItemProps) { return ( {icon} {!collapsed && {label}} ) } // ============================================================================= // MAIN SIDEBAR // ============================================================================= interface SDKSidebarProps { collapsed?: boolean onCollapsedChange?: (collapsed: boolean) => void } export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarProps) { const pathname = usePathname() const { state, packageCompletion, completionPercentage, getCheckpointStatus } = useSDK() const [expandedPackages, setExpandedPackages] = React.useState>({ 'vorbereitung': true, 'analyse': false, 'dokumentation': false, 'rechtliche-texte': false, 'betrieb': false, }) // Auto-expand current package React.useEffect(() => { const currentStep = SDK_STEPS.find(s => s.url === pathname) if (currentStep) { setExpandedPackages(prev => ({ ...prev, [currentStep.package]: true, })) } }, [pathname]) const togglePackage = (packageId: SDKPackageId) => { setExpandedPackages(prev => ({ ...prev, [packageId]: !prev[packageId] })) } const isStepLocked = (step: SDKStep): boolean => { if (state.preferences?.allowParallelWork) return false return step.prerequisiteSteps.some(prereq => !state.completedSteps.includes(prereq)) } const isPackageLocked = (packageId: SDKPackageId): boolean => { if (state.preferences?.allowParallelWork) return false const pkg = SDK_PACKAGES.find(p => p.id === packageId) if (!pkg || pkg.order === 1) return false // Check if previous package is complete const prevPkg = SDK_PACKAGES.find(p => p.order === pkg.order - 1) if (!prevPkg) return false return packageCompletion[prevPkg.id] < 100 } const getStepCheckpointStatus = (step: SDKStep): 'passed' | 'failed' | 'warning' | 'pending' => { const status = getCheckpointStatus(step.checkpointId) if (!status) return 'pending' if (status.passed) return 'passed' if (status.errors.length > 0) return 'failed' if (status.warnings.length > 0) return 'warning' return 'pending' } const isStepActive = (stepUrl: string) => pathname === stepUrl const isPackageActive = (packageId: SDKPackageId) => { const steps = getStepsForPackage(packageId) return steps.some(s => s.url === pathname) } // Filter steps based on customer type const getVisibleSteps = (packageId: SDKPackageId): SDKStep[] => { const steps = getStepsForPackage(packageId) return steps.filter(step => { // Hide import step for new customers if (step.id === 'import' && state.customerType === 'new') { return false } return true }) } return ( ) }