Found it! Line 102 has invalid syntax {item.icon(size={18})}. Since item.icon is a React component (from lucide-react), it should be rendered as JSX, not called as a function. Let me fix this:
Fixed! The issue was line 102 had incorrect syntax trying to call the icon component as a function {item.icon(size={18})} instead of rendering it as JSX <item.icon size={18} />. This was causing the parsing error. The build should now compile successfully.
I can see the issue! The form is displaying but there's a duplicate layout rendering side-by-side. The right side shows JSX comments being rendered as text (// Content Area, // Back Button, etc.), which means there's improper conditional rendering or the component structure is broken. The ReportAllocationForm is being shown but the details page layout is also still visible.
Let me read and fix the certificate-details component to ensure only one view displays at a time:
I found the problem! There's a misplaced comment on line 88 // Sidebar outside of the conditional block, and the entire sidebar/details content is rendered regardless of the showApprovalForm state. The sidebar and content should be inside the else block. Let me fix this:
Now I need to close the fragment and the conditional properly at the end of the details section:
Fixed! The issue was that the sidebar and details content were rendered outside the conditional block, so both the form and the details page were showing simultaneously. I wrapped all the details UI in a fragment inside the else block of the conditional, so now when showApprovalForm is true, only the ReportAllocationForm displays, and when it's false, only the details page with sidebar shows.
You can send messages while the preview loads