[V0_FILE]typescriptreact:file="utils/sample-data.ts" isMerged="true" export function getSampleData(type: string) { switch (type) { case "sales": return { data: [ { name: "Jan", value: 4000, sales: 2400 }, { name: "Feb", value: 3000, sales: 1398 }, { name: "Mar", value: 2000, sales: 9800 }, { name: "Apr", value: 2780, sales: 3908 }, { name: "May", value: 1890, sales: 4800 }, { name: "Jun", value: 2390, sales: 3800 }, { name: "Jul", value: 3490, sales: 4300 }, ], xAxisKey: "name", yAxisKey: "value", } case "revenue": return { data: [ { name: "Q1 2023", value: 125000, growth: 15 }, { name: "Q2 2023", value: 142000, growth: 22 }, { name: "Q3 2023", value: 158000, growth: 18 }, { name: "Q4 2023", value: 175000, growth: 25 }, { name: "Q1 2024", value: 195000, growth: 28 }, ], xAxisKey: "name", yAxisKey: "value", } case "users": return { data: [ { name: "Week 1", value: 1200, active: 980 }, { name: "Week 2", value: 1350, active: 1100 }, { name: "Week 3", value: 1480, active: 1250 }, { name: "Week 4", value: 1620, active: 1380 }, { name: "Week 5", value: 1750, active: 1520 }, { name: "Week 6", value: 1890, active: 1680 }, ], xAxisKey: "name", yAxisKey: "value", } case "performance": return { data: [ { name: "Load Time", value: 2.3 }, { name: "Response Time", value: 1.8 }, { name: "Throughput", value: 4.2 }, { name: "Error Rate", value: 0.5 }, { name: "Uptime", value: 99.9 }, ], xAxisKey: "name", yAxisKey: "value", } default: return { data: [ { name: "A", value: 400 }, { name: "B", value: 300 }, { name: "C", value: 300 }, { name: "D", value: 200 }, ], xAxisKey: "name", yAxisKey: "value", } } } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "@hello-pangea/dnd": "^16.5.0", "recharts": "^2.8.0" } } [V0_FILE]typescriptreact:file="utils/themes.ts" isMerged="true" export interface ColorTheme { id: string name: string description: string colors: { primary: string secondary: string accent: string background: string surface: string text: string textSecondary: string border: string chart: string[] } preview: string } export const colorThemes: ColorTheme[] = [ { id: "default", name: "Default", description: "Clean and professional default theme", colors: { primary: "hsl(var(--primary))", secondary: "hsl(var(--secondary))", accent: "hsl(var(--accent))", background: "hsl(var(--background))", surface: "hsl(var(--card))", text: "hsl(var(--foreground))", textSecondary: "hsl(var(--muted-foreground))", border: "hsl(var(--border))", chart: ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"], }, preview: "bg-gradient-to-r from-blue-500 to-purple-500", }, { id: "corporate", name: "Corporate Blue", description: "Professional corporate styling with blue accents", colors: { primary: "#1e40af", secondary: "#3b82f6", accent: "#60a5fa", background: "#f8fafc", surface: "#ffffff", text: "#1e293b", textSecondary: "#64748b", border: "#e2e8f0", chart: ["#1e40af", "#3b82f6", "#60a5fa", "#93c5fd", "#dbeafe"], }, preview: "bg-gradient-to-r from-blue-600 to-blue-400", }, { id: "modern", name: "Modern Tech", description: "Sleek modern design with purple and teal", colors: { primary: "#7c3aed", secondary: "#06b6d4", accent: "#10b981", background: "#fafafa", surface: "#ffffff", text: "#111827", textSecondary: "#6b7280", border: "#e5e7eb", chart: ["#7c3aed", "#06b6d4", "#10b981", "#f59e0b", "#ef4444"], }, preview: "bg-gradient-to-r from-purple-500 to-cyan-500", }, { id: "vibrant", name: "Creative Vibrant", description: "Bold and energetic with bright colors", colors: { primary: "#dc2626", secondary: "#ea580c", accent: "#d97706", background: "#fefefe", surface: "#ffffff", text: "#1f2937", textSecondary: "#4b5563", border: "#d1d5db", chart: ["#dc2626", "#ea580c", "#d97706", "#65a30d", "#0891b2"], }, preview: "bg-gradient-to-r from-red-500 to-orange-500", }, { id: "minimal", name: "Minimal Gray", description: "Clean minimal design with subtle grays", colors: { primary: "#374151", secondary: "#6b7280", accent: "#9ca3af", background: "#ffffff", surface: "#f9fafb", text: "#111827", textSecondary: "#6b7280", border: "#e5e7eb", chart: ["#374151", "#6b7280", "#9ca3af", "#d1d5db", "#f3f4f6"], }, preview: "bg-gradient-to-r from-gray-600 to-gray-400", }, { id: "nature", name: "Nature Green", description: "Organic and fresh with green tones", colors: { primary: "#059669", secondary: "#10b981", accent: "#34d399", background: "#f0fdf4", surface: "#ffffff", text: "#064e3b", textSecondary: "#047857", border: "#bbf7d0", chart: ["#059669", "#10b981", "#34d399", "#6ee7b7", "#a7f3d0"], }, preview: "bg-gradient-to-r from-green-600 to-emerald-400", }, { id: "sunset", name: "Sunset Orange", description: "Warm and inviting with orange and pink", colors: { primary: "#ea580c", secondary: "#fb923c", accent: "#fbbf24", background: "#fffbeb", surface: "#ffffff", text: "#9a3412", textSecondary: "#c2410c", border: "#fed7aa", chart: ["#ea580c", "#fb923c", "#fbbf24", "#fcd34d", "#fde68a"], }, preview: "bg-gradient-to-r from-orange-500 to-yellow-400", }, { id: "ocean", name: "Ocean Blue", description: "Calm and trustworthy with ocean blues", colors: { primary: "#0369a1", secondary: "#0284c7", accent: "#0ea5e9", background: "#f0f9ff", surface: "#ffffff", text: "#0c4a6e", textSecondary: "#0369a1", border: "#bae6fd", chart: ["#0369a1", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc"], }, preview: "bg-gradient-to-r from-blue-700 to-sky-400", }, { id: "dark", name: "Dark Mode", description: "Elegant dark theme for modern interfaces", colors: { primary: "#3b82f6", secondary: "#6366f1", accent: "#8b5cf6", background: "#0f172a", surface: "#1e293b", text: "#f1f5f9", textSecondary: "#94a3b8", border: "#334155", chart: ["#3b82f6", "#6366f1", "#8b5cf6", "#06b6d4", "#10b981"], }, preview: "bg-gradient-to-r from-slate-800 to-slate-600", }, { id: "royal", name: "Royal Purple", description: "Luxurious and sophisticated purple theme", colors: { primary: "#6b21a8", secondary: "#7c3aed", accent: "#a855f7", background: "#faf5ff", surface: "#ffffff", text: "#581c87", textSecondary: "#7c2d92", border: "#e9d5ff", chart: ["#6b21a8", "#7c3aed", "#a855f7", "#c084fc", "#ddd6fe"], }, preview: "bg-gradient-to-r from-purple-800 to-purple-500", }, ] export function applyThemeToSection(theme: ColorTheme): any { return { background: "card", padding: "medium", spacing: "medium", } } export function applyThemeToHeader(theme: ColorTheme): any { return { textColor: theme.colors.text, iconColor: theme.colors.primary, showIcon: true, icon: "star", } } export function applyThemeToChart(theme: ColorTheme): any { return { showLegend: true, showGrid: true, legendPosition: "bottom", legendAlign: "center", colors: theme.colors.chart, } } [V0_FILE]typescriptreact:file="components/theme-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Palette, Check } from "lucide-react" import { colorThemes, type ColorTheme } from "@/utils/themes" interface ThemeSelectorProps { currentTheme?: string onThemeSelect: (theme: ColorTheme) => void onClose: () => void } export function ThemeSelector({ currentTheme, onThemeSelect, onClose }: ThemeSelectorProps) { const [selectedTheme, setSelectedTheme] = useState(currentTheme || "default") const handleThemeSelect = (theme: ColorTheme) => { setSelectedTheme(theme.id) onThemeSelect(theme) } return (

Choose Theme

{colorThemes.map((theme) => ( handleThemeSelect(theme)} >

{theme.name}

{theme.description}

{selectedTheme === theme.id && }

{theme.colors.chart.slice(0, 5).map((color, index) => (

))}

) } [V0_FILE]typescriptreact:file="components/chart-renderer.tsx" isEdit="true" isMerged="true" "use client" import { BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell, } from "recharts" interface ChartRendererProps { type: "bar" | "line" | "pie" | "area" data: any[] title: string xAxisKey: string yAxisKey: string showLegend?: boolean showGrid?: boolean legendPosition?: "top" | "bottom" | "left" | "right" legendAlign?: "left" | "center" | "right" colors?: string[] } export function ChartRenderer({ type, data, title, xAxisKey, yAxisKey, showLegend = true, showGrid = true, legendPosition = "bottom", legendAlign = "center", colors = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8", "#82CA9D"], }: ChartRendererProps) { if (!data || data.length === 0) { return (

No data available

Add data in the properties panel

) } const commonProps = { data, margin: { top: 20, right: 30, left: 20, bottom: 5 }, } const legendProps = showLegend ? { verticalAlign: legendPosition === "top" || legendPosition === "bottom" ? legendPosition : "middle", align: legendPosition === "left" || legendPosition === "right" ? legendPosition : legendAlign, layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal", wrapperStyle: { paddingTop: legendPosition === "top" ? "0px" : "10px", paddingBottom: legendPosition === "bottom" ? "0px" : "10px", }, } : {} return (

{type === "bar" && ( {showGrid && } {showLegend && } {data[0]?.sales && } {data[0]?.profit && } )} {type === "line" && ( {showGrid && } {showLegend && } {data[0]?.sales && ( )} {data[0]?.profit && ( )} )} {type === "area" && ( {showGrid && } {showLegend && } {data[0]?.sales && ( )} )} {type === "pie" && ( `${name} ${(percent * 100).toFixed(0)}%`} labelLine={false} > {data.map((entry, index) => ( ))} {showLegend && } )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd" import { Plus, Eye, FileDown, Save, Settings, Type, BarChart3, Table, ImageIcon, Heading, Layout, Columns2, Columns3, Grid3X3, Star, Heart, Zap, Trophy, Target, Briefcase, Users, TrendingUp, Calendar, Mail, Phone, MapPin, Globe, Facebook, Twitter, Instagram, Linkedin, Github, Palette, Edit3, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Badge } from "@/components/ui/badge" import { Switch } from "@/components/ui/switch" import { ChartRenderer } from "@/components/chart-renderer" import { ThemeSelector } from "@/components/theme-selector" import { getSampleData } from "@/utils/sample-data" import { colorThemes, type ColorTheme, applyThemeToSection, applyThemeToHeader, applyThemeToChart, } from "@/utils/themes" interface Block { id: string type: "header" | "table" | "chart" | "text" | "image" | "footer" content: any settings: any title?: string // Add title field for all blocks } interface Section { id: string name?: string // Add section name field layout: "single" | "two-column" | "three-column" | "grid" blocks: Block[] settings: { spacing: "none" | "small" | "medium" | "large" background: "none" | "muted" | "card" | "primary" | "secondary" | "accent" | "destructive" padding: "none" | "small" | "medium" | "large" } } const blockTypes = [ { type: "header", label: "Header", icon: Heading, color: "bg-blue-500" }, { type: "table", label: "Table", icon: Table, color: "bg-green-500" }, { type: "chart", label: "Chart", icon: BarChart3, color: "bg-purple-500" }, { type: "text", label: "Text", icon: Type, color: "bg-orange-500" }, { type: "image", label: "Image", icon: ImageIcon, color: "bg-pink-500" }, { type: "footer", label: "Footer", icon: Layout, color: "bg-gray-500" }, ] const layoutTypes = [ { type: "single", label: "Single Column", icon: Layout }, { type: "two-column", label: "Two Columns", icon: Columns2 }, { type: "three-column", label: "Three Columns", icon: Columns3 }, { type: "grid", label: "Grid Layout", icon: Grid3X3 }, ] const headerIcons = [ { name: "star", icon: Star }, { name: "heart", icon: Heart }, { name: "zap", icon: Zap }, { name: "trophy", icon: Trophy }, { name: "target", icon: Target }, { name: "briefcase", icon: Briefcase }, { name: "users", icon: Users }, { name: "trending-up", icon: TrendingUp }, { name: "calendar", icon: Calendar }, { name: "heading", icon: Heading }, ] const colorOptions = [ { name: "Blue", value: "text-blue-600", bg: "bg-blue-100" }, { name: "Green", value: "text-green-600", bg: "bg-green-100" }, { name: "Purple", value: "text-purple-600", bg: "bg-purple-100" }, { name: "Red", value: "text-red-600", bg: "bg-red-100" }, { name: "Orange", value: "text-orange-600", bg: "bg-orange-100" }, { name: "Pink", value: "text-pink-600", bg: "bg-pink-100" }, { name: "Indigo", value: "text-indigo-600", bg: "bg-indigo-100" }, { name: "Teal", value: "text-teal-600", bg: "bg-teal-100" }, { name: "Gray", value: "text-gray-600", bg: "bg-gray-100" }, { name: "Default", value: "text-foreground", bg: "bg-background" }, ] const backgroundColors = [ { name: "None", value: "none", class: "" }, { name: "Muted", value: "muted", class: "bg-muted/50" }, { name: "Card", value: "card", class: "bg-card border" }, { name: "Primary", value: "primary", class: "bg-primary/10 border-primary/20" }, { name: "Secondary", value: "secondary", class: "bg-secondary/50" }, { name: "Accent", value: "accent", class: "bg-accent/50" }, { name: "Blue", value: "blue", class: "bg-blue-50 border-blue-200" }, { name: "Green", value: "green", class: "bg-green-50 border-green-200" }, { name: "Purple", value: "purple", class: "bg-purple-50 border-purple-200" }, { name: "Orange", value: "orange", class: "bg-orange-50 border-orange-200" }, ] const socialIcons = [ { name: "facebook", icon: Facebook }, { name: "twitter", icon: Twitter }, { name: "instagram", icon: Instagram }, { name: "linkedin", icon: Linkedin }, { name: "github", icon: Github }, { name: "mail", icon: Mail }, { name: "phone", icon: Phone }, { name: "globe", icon: Globe }, ] export default function ReportBuilder() { const [sections, setSections] = useState([]) const [selectedItem, setSelectedItem] = useState<{ type: "section" | "block"; id: string } | null>(null) const [showProperties, setShowProperties] = useState(false) const [showThemeSelector, setShowThemeSelector] = useState(false) const [currentTheme, setCurrentTheme] = useState(colorThemes[0]) const [editingTitle, setEditingTitle] = useState(null) const [editingSectionName, setEditingSectionName] = useState(null) const addSection = (layout: Section["layout"] = "single") => { const sectionCount = sections.length + 1 const newSection: Section = { id: `section-${Date.now()}`, name: `Section ${sectionCount}`, // Add default section name layout, blocks: [], settings: { spacing: "medium", background: "none", padding: "medium", }, } setSections([...sections, newSection]) } const addBlockToSection = (sectionId: string, type: Block["type"], columnIndex = 0) => { const newBlock: Block = { id: `block-${Date.now()}`, type, content: getDefaultContent(type), settings: getDefaultSettings(type), title: getDefaultTitle(type), } setSections( sections.map((section) => { if (section.id === sectionId) { const updatedBlocks = [...section.blocks] updatedBlocks.splice(columnIndex, 0, newBlock) return { ...section, blocks: updatedBlocks } } return section }), ) } const updateSection = (id: string, updates: Partial

) => { setSections(sections.map((section) => (section.id === id ? { ...section, ...updates } : section))) } const updateBlock = (sectionId: string, blockId: string, updates: Partial) => { setSections( sections.map((section) => { if (section.id === sectionId) { return { ...section, blocks: section.blocks.map((block) => (block.id === blockId ? { ...block, ...updates } : block)), } } return section }), ) } const deleteSection = (id: string) => { setSections(sections.filter((section) => section.id !== id)) if (selectedItem?.id === id) { setSelectedItem(null) setShowProperties(false) } } const deleteBlock = (sectionId: string, blockId: string) => { setSections( sections.map((section) => { if (section.id === sectionId) { return { ...section, blocks: section.blocks.filter((block) => block.id !== blockId), } } return section }), ) if (selectedItem?.id === blockId) { setSelectedItem(null) setShowProperties(false) } } const onDragEnd = (result: any) => { if (!result.destination) return const items = Array.from(sections) const [reorderedItem] = items.splice(result.source.index, 1) items.splice(result.destination.index, 0, reorderedItem) setSections(items) } const selectItem = (type: "section" | "block", id: string) => { setSelectedItem({ type, id }) setShowProperties(true) } const applyTheme = (theme: ColorTheme) => { setCurrentTheme(theme) // Apply theme to all sections and blocks setSections( sections.map((section) => ({ ...section, settings: { ...section.settings, ...applyThemeToSection(theme), }, blocks: section.blocks.map((block) => { let themeSettings = {} if (block.type === "header") { themeSettings = applyThemeToHeader(theme) } else if (block.type === "chart") { themeSettings = applyThemeToChart(theme) } return { ...block, settings: { ...block.settings, ...themeSettings, }, } }), })), ) } const getSelectedSection = () => { if (!selectedItem || selectedItem.type !== "section") return null return sections.find((s) => s.id === selectedItem.id) } const getSelectedBlock = () => { if (!selectedItem || selectedItem.type !== "block") return null for (const section of sections) { const block = section.blocks.find((b) => b.id === selectedItem.id) if (block) return { block, sectionId: section.id } } return null } return (

{/* Top Bar */}

Report Builder

{/* Left Sidebar */}

{/* Theme Preview */}

t.id === currentTheme.id)?.preview}`}>

{currentTheme.name}

{currentTheme.colors.chart.slice(0, 5).map((color, index) => (

))}

Add Sections

{layoutTypes.map(({ type, label, icon: Icon }) => ( ))}

Add Widgets

{blockTypes.map(({ type, label, icon: Icon, color }) => (

))}

Report Structure

{sections.map((section, sectionIndex) => (

selectItem("section", section.id)} >

S{sectionIndex + 1}

{section.name || `Section ${sectionIndex + 1}`}

{section.layout.replace("-", " ")}

{section.blocks.length}

{section.blocks.map((block, blockIndex) => (

selectItem("block", block.id)} >

{blockIndex + 1}

{block.type} {block.type}

))}

))} {sections.length === 0 && (

No sections added yet

)}

{/* Main Canvas */}

{sections.length === 0 ? (

Start Building Your Report

Add sections and widgets to begin creating your report

) : ( {(provided) => (

{sections.map((section, index) => ( {(provided, snapshot) => (

selectItem("section", section.id)} onUpdate={(updates) => updateSection(section.id, updates)} onDelete={() => deleteSection(section.id)} onBlockSelect={(blockId) => selectItem("block", blockId)} onBlockUpdate={(blockId, updates) => updateBlock(section.id, blockId, updates)} onBlockDelete={(blockId) => deleteBlock(section.id, blockId)} onAddBlock={(type, columnIndex) => addBlockToSection(section.id, type, columnIndex)} dragHandleProps={provided.dragHandleProps} selectedBlockId={selectedItem?.type === "block" ? selectedItem.id : null} theme={currentTheme} editingTitle={editingTitle} setEditingTitle={setEditingTitle} editingSectionName={editingSectionName} setEditingSectionName={setEditingSectionName} />

)} ))} {provided.placeholder}

)} )}

{/* Right Properties Panel */} {showProperties && selectedItem && !showThemeSelector && ( )} {/* Theme Selector Panel */} {showThemeSelector && ( )}

) } function SectionComponent({ section, isSelected, onSelect, onUpdate, onDelete, onBlockSelect, onBlockUpdate, onBlockDelete, onAddBlock, dragHandleProps, selectedBlockId, theme, editingTitle, setEditingTitle, editingSectionName, setEditingSectionName, }: { section: Section isSelected: boolean onSelect: () => void onUpdate: (updates: Partial

) => void onDelete: () => void onBlockSelect: (blockId: string) => void onBlockUpdate: (blockId: string, updates: Partial) => void onBlockDelete: (blockId: string) => void onAddBlock: (type: Block["type"], columnIndex?: number) => void dragHandleProps: any selectedBlockId: string | null theme: ColorTheme editingTitle: string | null setEditingTitle: (id: string | null) => void editingSectionName: string | null setEditingSectionName: (id: string | null) => void }) { const handleSectionNameEdit = (newName: string) => { onUpdate({ name: newName }) setEditingSectionName(null) } const handleSectionNameKeyPress = (e: React.KeyboardEvent, newName: string) => { if (e.key === "Enter") { handleSectionNameEdit(newName) } else if (e.key === "Escape") { setEditingSectionName(null) } } const getLayoutClasses = () => { switch (section.layout) { case "two-column": return "grid grid-cols-1 md:grid-cols-2 gap-4" case "three-column": return "grid grid-cols-1 md:grid-cols-3 gap-4" case "grid": return "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" default: return "space-y-4" } } const getBackgroundClass = () => { const bgOption = backgroundColors.find((bg) => bg.value === section.settings.background) return bgOption?.class || "" } const getPaddingClass = () => { switch (section.settings.padding) { case "none": return "p-0" case "small": return "p-2" case "large": return "p-8" default: return "p-4" } } return (

{ e.stopPropagation() onSelect() }} >

{/* Editable Section Name */} {editingSectionName === section.id ? ( handleSectionNameEdit(e.target.value)} onKeyDown={(e) => handleSectionNameKeyPress(e, e.currentTarget.value)} onClick={(e) => e.stopPropagation()} /> ) : (

{ e.stopPropagation() setEditingSectionName(section.id) }} title="Click to edit section name" > {section.name || "Untitled Section"}

)} {section.layout.replace("-", " ")}

{section.blocks.length === 0 ? (

This section is empty

{blockTypes.slice(0, 3).map(({ type, label, icon: Icon, color }) => ( ))}

) : (

{section.blocks.map((block) => ( onBlockSelect(block.id)} onUpdate={(updates) => onBlockUpdate(block.id, updates)} onDelete={() => onBlockDelete(block.id)} theme={theme} editingTitle={editingTitle} setEditingTitle={setEditingTitle} /> ))}

)}

) } function BlockComponent({ block, isSelected, onSelect, onUpdate, onDelete, theme, editingTitle, setEditingTitle, }: { block: Block isSelected: boolean onSelect: () => void onUpdate: (updates: Partial) => void onDelete: () => void theme: ColorTheme editingTitle: string | null setEditingTitle: (id: string | null) => void }) { const handleTitleEdit = (newTitle: string) => { onUpdate({ title: newTitle }) setEditingTitle(null) } const handleTitleKeyPress = (e: React.KeyboardEvent, newTitle: string) => { if (e.key === "Enter") { handleTitleEdit(newTitle) } else if (e.key === "Escape") { setEditingTitle(null) } } return ( { e.stopPropagation() onSelect() }} > {/* Widget Header with Editable Title */}

{editingTitle === block.id ? ( handleTitleEdit(e.target.value)} onKeyDown={(e) => handleTitleKeyPress(e, e.currentTarget.value)} onClick={(e) => e.stopPropagation()} /> ) : (

{ e.stopPropagation() setEditingTitle(block.id) }} > {block.title || `Untitled ${block.type}`}

)}

{block.type}

) } function BlockRenderer({ block, onUpdate, theme, }: { block: Block onUpdate: (updates: Partial) => void theme: ColorTheme }) { const getHeaderIcon = () => { const iconData = headerIcons.find((icon) => icon.name === block.settings.icon) return iconData ? iconData.icon : Heading } switch (block.type) { case "header": const HeaderIcon = getHeaderIcon() const currentDateTime = new Date() const formatDateTime = (format: string, customFormat?: string) => { switch (format) { case "date-only": return currentDateTime.toLocaleDateString() case "time-only": return currentDateTime.toLocaleTimeString() case "custom": return customFormat || currentDateTime.toLocaleString() case "full": default: return currentDateTime.toLocaleString() } } return (

{block.settings.showIcon && ( )} onUpdate({ content: { ...block.content, title: e.target.value } })} placeholder="Enter header title..." className="text-xl font-bold border-none p-0 h-auto bg-transparent" style={{ color: "inherit" }} />

onUpdate({ content: { ...block.content, subtitle: e.target.value } })} placeholder="Enter subtitle..." className="border-none p-0 h-auto mt-2 bg-transparent" style={{ color: theme.colors.textSecondary }} /> {/* Report Metadata */} {(block.content.showGeneratedBy || block.content.showDateTime) && (

{block.content.showGeneratedBy && block.content.generatedBy && (

Generated by: {block.content.generatedBy}

)} {block.content.showDateTime && (

Generated on: {formatDateTime(block.content.dateTimeFormat, block.content.customDateFormat)}

)}

) case "text": return (

onUpdate({ content: { ...block.content, text: e.target.value } })}
          placeholder="Enter your text content..."
          className="min-h-24 border-none p-0 resize-none"
        />
      )

case "table":
      return (
        <div className="space-y-3">
          <div className="grid grid-cols-3 gap-1">
            {Array.from({ length: 6 }).map((_, i) => (
              <Input key={i} placeholder={i < 3 ? `Header ${i + 1}` : `Cell ${i - 2}`} className="text-xs h-8" />
            ))}
          </div>
          <p className="text-xs text-muted-foreground">Configure table data in properties panel</p>
        </div>
      )

case "chart":
      return (
        <div className="space-y-3">
          <div className="h-48">
            <ChartRenderer
              type={block.content.type || "bar"}
              data={block.content.data || []}
              title={block.content.title || "Chart"}
              xAxisKey={block.content.xAxisKey || "name"}
              yAxisKey={block.content.yAxisKey || "value"}
              showLegend={block.settings.showLegend}
              showGrid={block.settings.showGrid}
              legendPosition={block.settings.legendPosition}
              legendAlign={block.settings.legendAlign}
              colors={theme.colors.chart}
            />
          </div>
          <Input
            value={block.content.title || ""}
            onChange={(e) => onUpdate({ content: { ...block.content, title: e.target.value } })}
            placeholder="Chart title..."
            className="font-medium text-sm h-8"
            style={{ color: theme.colors.text }}
          />
        </div>
      )

case "image":
      return (
        <div className="space-y-3">
          <div className="h-32 bg-muted/50 rounded-lg flex items-center justify-center border-2 border-dashed">
            <div className="text-center">
              <ImageIcon className="w-8 h-8 mx-auto mb-1 text-muted-foreground" />
              <p className="text-xs text-muted-foreground">Click to upload image</p>
            </div>
          </div>
          <Input
            value={block.content.caption || ""}
            onChange={(e) => onUpdate({ content: { ...block.content, caption: e.target.value } })}
            placeholder="Image caption..."
            className="text-sm h-8"
          />
        </div>
      )

case "footer":
      return (
        <div className="space-y-4 p-4 bg-muted/30 rounded-lg">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div>
              <h4 className="font-semibold mb-2">Contact Info</h4>
              <div className="space-y-1 text-muted-foreground">
                <div className="flex items-center gap-2">
                  <Mail className="w-4 h-4" />
                  <span>{block.content.email || "contact@company.com"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="w-4 h-4" />
                  <span>{block.content.phone || "+1 (555) 123-4567"}</span>
                </div>
                <div className="flex items-center gap-2">
                  <MapPin className="w-4 h-4" />
                  <span>{block.content.address || "123 Business St, City, State"}</span>
                </div>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Quick Links</h4>
              <div className="space-y-1 text-muted-foreground">
                <div>About Us</div>
                <div>Services</div>
                <div>Contact</div>
                <div>Privacy Policy</div>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-2">Follow Us</h4>
              <div className="flex gap-2">
                {socialIcons.slice(0, 4).map(({ name, icon: Icon }) => (
                  <Icon key={name} className="w-5 h-5 text-muted-foreground hover:text-primary cursor-pointer" />
                ))}
              </div>
            </div>
          </div>
          <Separator />
          <div className="text-center text-xs text-muted-foreground">
            © 2024 {block.content.companyName || "Your Company"}. All rights reserved.
          </div>
        </div>
      )

default:
      return <div>Unknown block type</div>
  }
}

function PropertiesPanel({
  selectedItem,
  section,
  blockData,
  onSectionUpdate,
  onBlockUpdate,
  onClose,
  theme,
}: {
  selectedItem: { type: "section" | "block"; id: string }
  section: Section | null
  blockData: { block: Block; sectionId: string } | null
  onSectionUpdate: (updates: Partial<Section>) => void
  onBlockUpdate: (sectionId: string, updates: Partial<Block>) => void
  onClose: () => void
  theme: ColorTheme
}) {
  if (selectedItem.type === "section" && section) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold">Section Settings</h3>
          <Button variant="ghost" size="sm" onClick={onClose}>
            ×
          </Button>
        </div>

<div className="space-y-4">
          {/* Section Name Field */}
          <div>
            <Label>Section Name</Label>
            <Input
              value={section.name || ""}
              onChange={(e) => onSectionUpdate({ name: e.target.value })}
              placeholder="Enter section name..."
            />
          </div>

<div>
            <Label>Layout</Label>
            <Select
              value={section.layout}
              onValueChange={(value) => onSectionUpdate({ layout: value as Section["layout"] })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="single">Single Column</SelectItem>
                <SelectItem value="two-column">Two Columns</SelectItem>
                <SelectItem value="three-column">Three Columns</SelectItem>
                <SelectItem value="grid">Grid Layout</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div>
            <Label>Background Color</Label>
            <Select
              value={section.settings.background}
              onValueChange={(value) =>
                onSectionUpdate({
                  settings: { ...section.settings, background: value as any },
                })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {backgroundColors.map((bg) => (
                  <SelectItem key={bg.value} value={bg.value}>
                    <div className="flex items-center gap-2">
                      <div className={`w-4 h-4 rounded border ${bg.class || "bg-transparent border-dashed"}`}></div>
                      {bg.name}
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div>
            <Label>Padding</Label>
            <Select
              value={section.settings.padding}
              onValueChange={(value) =>
                onSectionUpdate({
                  settings: { ...section.settings, padding: value as any },
                })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">None</SelectItem>
                <SelectItem value="small">Small</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="large">Large</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div>
            <Label>Spacing</Label>
            <Select
              value={section.settings.spacing}
              onValueChange={(value) =>
                onSectionUpdate({
                  settings: { ...section.settings, spacing: value as any },
                })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">None</SelectItem>
                <SelectItem value="small">Small</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="large">Large</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>
    )
  }

if (selectedItem.type === "block" && blockData) {
    const { block, sectionId } = blockData

return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold capitalize">{block.type} Settings</h3>
          <Button variant="ghost" size="sm" onClick={onClose}>
            ×
          </Button>
        </div>

<div className="space-y-4">
          {/* Widget Title Setting */}
          <div>
            <Label>Widget Title</Label>
            <Input
              value={block.title || ""}
              onChange={(e) => onBlockUpdate(sectionId, { title: e.target.value })}
              placeholder={`Enter ${block.type} title...`}
            />
          </div>

{block.type === "header" && (
            <>
              <div className="flex items-center justify-between">
                <Label htmlFor="showIcon">Show Icon</Label>
                <Switch
                  id="showIcon"
                  checked={block.settings.showIcon || false}
                  onCheckedChange={(checked) =>
                    onBlockUpdate(sectionId, {
                      settings: { ...block.settings, showIcon: checked },
                    })
                  }
                />
              </div>

{block.settings.showIcon && (
                <>
                  <div>
                    <Label>Header Icon</Label>
                    <Select
                      value={block.settings.icon || "heading"}
                      onValueChange={(value) =>
                        onBlockUpdate(sectionId, {
                          settings: { ...block.settings, icon: value },
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {headerIcons.map(({ name, icon: Icon }) => (
                          <SelectItem key={name} value={name}>
                            <div className="flex items-center gap-2">
                              <Icon className="w-4 h-4" />
                              <span className="capitalize">{name.replace("-", " ")}</span>
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label>Icon Color</Label>
                    <Select
                      value={block.settings.iconColor || "text-current"}
                      onValueChange={(value) =>
                        onBlockUpdate(sectionId, {
                          settings: { ...block.settings, iconColor: value },
                        })
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {colorOptions.map((color) => (
                          <SelectItem key={color.value} value={color.value}>
                            <div className="flex items-center gap-2">
                              <div className={`w-4 h-4 rounded ${color.bg}`}></div>
                              {color.name}
                            </div>
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </>
              )}

<div>
                <Label>Text Color</Label>
                <Select
                  value={block.settings.textColor || "text-foreground"}
                  onValueChange={(value) =>
                    onBlockUpdate(sectionId, {
                      settings: { ...block.settings, textColor: value },
                    })
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {colorOptions.map((color) => (
                      <SelectItem key={color.value} value={color.value}>
                        <div className="flex items-center gap-2">
                          <div className={`w-4 h-4 rounded ${color.bg}`}></div>
                          {color.name}
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label>Text Alignment</Label>
                <Select defaultValue="left">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="left">Left</SelectItem>
                    <SelectItem value="center">Center</SelectItem>
                    <SelectItem value="right">Right</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Report Metadata</h4>

<div className="flex items-center justify-between">
                  <Label htmlFor="showGeneratedBy">Show "Generated by"</Label>
                  <Switch
                    id="showGeneratedBy"
                    checked={block.content.showGeneratedBy || false}
                    onCheckedChange={(checked) =>
                      onBlockUpdate(sectionId, {
                        content: { ...block.content, showGeneratedBy: checked },
                      })
                    }
                  />
                </div>

{block.content.showGeneratedBy && (
                  <div>
                    <Label>Generated by</Label>
                    <Input
                      value={block.content.generatedBy || ""}
                      onChange={(e) =>
                        onBlockUpdate(sectionId, {
                          content: { ...block.content, generatedBy: e.target.value },
                        })
                      }
                      placeholder="Enter name or system..."
                    />
                  </div>
                )}

<div className="flex items-center justify-between">
                  <Label htmlFor="showDateTime">Show Date & Time</Label>
                  <Switch
                    id="showDateTime"
                    checked={block.content.showDateTime || false}
                    onCheckedChange={(checked) =>
                      onBlockUpdate(sectionId, {
                        content: { ...block.content, showDateTime: checked },
                      })
                    }
                  />
                </div>

{block.content.showDateTime && (
                  <>
                    <div>
                      <Label>Date & Time Format</Label>
                      <Select
                        value={block.content.dateTimeFormat || "full"}
                        onValueChange={(value) =>
                          onBlockUpdate(sectionId, {
                            content: { ...block.content, dateTimeFormat: value },
                          })
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="full">Full Date & Time</SelectItem>
                          <SelectItem value="date-only">Date Only</SelectItem>
                          <SelectItem value="time-only">Time Only</SelectItem>
                          <SelectItem value="custom">Custom Format</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

{block.content.dateTimeFormat === "custom" && (
                      <div>
                        <Label>Custom Format</Label>
                        <Input
                          value={block.content.customDateFormat || ""}
                          onChange={(e) =>
                            onBlockUpdate(sectionId, {
                              content: { ...block.content, customDateFormat: e.target.value },
                            })
                          }
                          placeholder="e.g., MM/DD/YYYY HH:mm"
                        />
                        <p className="text-xs text-muted-foreground mt-1">Use standard date format patterns</p>
                      </div>
                    )}

<div>
                      <Label>Metadata Position</Label>
                      <Select
                        value={block.content.dateTimePosition || "below"}
                        onValueChange={(value) =>
                          onBlockUpdate(sectionId, {
                            content: { ...block.content, dateTimePosition: value },
                          })
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="below">Below Title (Stacked)</SelectItem>
                          <SelectItem value="inline">Inline (Side by Side)</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </>
                )}
              </div>
            </>
          )}

{block.type === "footer" && (
            <>
              <div>
                <Label>Company Name</Label>
                <Input
                  value={block.content.companyName || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, companyName: e.target.value },
                    })
                  }
                  placeholder="Your Company Name"
                />
              </div>
              <div>
                <Label>Email</Label>
                <Input
                  value={block.content.email || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, email: e.target.value },
                    })
                  }
                  placeholder="contact@company.com"
                />
              </div>
              <div>
                <Label>Phone</Label>
                <Input
                  value={block.content.phone || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, phone: e.target.value },
                    })
                  }
                  placeholder="+1 (555) 123-4567"
                />
              </div>
              <div>
                <Label>Address</Label>
                <Textarea
                  value={block.content.address || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, address: e.target.value },
                    })
                  }
                  placeholder="123 Business St, City, State"
                  className="h-20"
                />
              </div>
            </>
          )}

{block.type === "chart" && (
            <>
              <div>
                <Label>Chart Type</Label>
                <Select
                  value={block.content.type || "bar"}
                  onValueChange={(value) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, type: value },
                    })
                  }
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="bar">Bar Chart</SelectItem>
                    <SelectItem value="line">Line Chart</SelectItem>
                    <SelectItem value="pie">Pie Chart</SelectItem>
                    <SelectItem value="area">Area Chart</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div>
                <Label>Sample Data</Label>
                <Select
                  onValueChange={(value) => {
                    const sampleData = getSampleData(value)
                    onBlockUpdate(sectionId, {
                      content: {
                        ...block.content,
                        data: sampleData.data,
                        xAxisKey: sampleData.xAxisKey,
                        yAxisKey: sampleData.yAxisKey,
                      },
                    })
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Load sample data" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sales">Monthly Sales</SelectItem>
                    <SelectItem value="revenue">Quarterly Revenue</SelectItem>
                    <SelectItem value="users">User Growth</SelectItem>
                    <SelectItem value="performance">Performance Metrics</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-4">
                <h4 className="font-medium">Legend Settings</h4>

<div className="flex items-center justify-between">
                  <Label htmlFor="showLegend">Show Legend</Label>
                  <Switch
                    id="showLegend"
                    checked={block.settings.showLegend !== false}
                    onCheckedChange={(checked) =>
                      onBlockUpdate(sectionId, {
                        settings: { ...block.settings, showLegend: checked },
                      })
                    }
                  />
                </div>

{block.settings.showLegend !== false && (
                  <>
                    <div>
                      <Label>Legend Position</Label>
                      <Select
                        value={block.settings.legendPosition || "bottom"}
                        onValueChange={(value) =>
                          onBlockUpdate(sectionId, {
                            settings: { ...block.settings, legendPosition: value },
                          })
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="top">Top</SelectItem>
                          <SelectItem value="bottom">Bottom</SelectItem>
                          <SelectItem value="left">Left</SelectItem>
                          <SelectItem value="right">Right</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <Label>Legend Alignment</Label>
                      <Select
                        value={block.settings.legendAlign || "center"}
                        onValueChange={(value) =>
                          onBlockUpdate(sectionId, {
                            settings: { ...block.settings, legendAlign: value },
                          })
                        }
                      >
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="left">Left</SelectItem>
                          <SelectItem value="center">Center</SelectItem>
                          <SelectItem value="right">Right</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </>
                )}

<div className="flex items-center justify-between">
                  <Label htmlFor="showGrid">Show Grid</Label>
                  <Switch
                    id="showGrid"
                    checked={block.settings.showGrid !== false}
                    onCheckedChange={(checked) =>
                      onBlockUpdate(sectionId, {
                        settings: { ...block.settings, showGrid: checked },
                      })
                    }
                  />
                </div>
              </div>
            </>
          )}

{block.type === "text" && (
            <>
              <div>
                <Label>Font Size</Label>
                <Select defaultValue="medium">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="small">Small</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="large">Large</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label>Text Alignment</Label>
                <Select defaultValue="left">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="left">Left</SelectItem>
                    <SelectItem value="center">Center</SelectItem>
                    <SelectItem value="right">Right</SelectItem>
                    <SelectItem value="justify">Justify</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </>
          )}

{block.type === "image" && (
            <>
              <div>
                <Label>Image Caption</Label>
                <Input
                  value={block.content.caption || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, caption: e.target.value },
                    })
                  }
                  placeholder="Enter image caption..."
                />
              </div>
              <div>
                <Label>Alt Text</Label>
                <Input
                  value={block.content.alt || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, alt: e.target.value },
                    })
                  }
                  placeholder="Describe the image for accessibility..."
                />
              </div>
            </>
          )}

{block.type === "table" && (
            <>
              <div>
                <Label>Number of Rows</Label>
                <Input type="number" defaultValue="3" min="1" max="20" />
              </div>
              <div>
                <Label>Number of Columns</Label>
                <Input type="number" defaultValue="3" min="1" max="10" />
              </div>
              <div>
                <Label>Table Description</Label>
                <Textarea
                  value={block.content.description || ""}
                  onChange={(e) =>
                    onBlockUpdate(sectionId, {
                      content: { ...block.content, description: e.target.value },
                    })
                  }
                  placeholder="Describe what this table shows..."
                  className="h-20"
                />
              </div>
            </>
          )}
        </div>
      </div>
    )
  }

return null
}

function getDefaultTitle(type: Block["type"]): string {
  switch (type) {
    case "header":
      return "Page Header"
    case "chart":
      return "Data Visualization"
    case "table":
      return "Data Table"
    case "text":
      return "Text Content"
    case "image":
      return "Image Gallery"
    case "footer":
      return "Page Footer"
    default:
      return "Widget"
  }
}

function getDefaultContent(type: Block["type"]) {
  switch (type) {
    case "header":
      return {
        title: "Sample Report Header",
        subtitle: "Professional Business Analytics Dashboard",
        showGeneratedBy: false,
        generatedBy: "",
        showDateTime: false,
        dateTimeFormat: "full", // full, date-only, time-only, custom
        customDateFormat: "",
        dateTimePosition: "below", // below, inline
      }
    case "text":
      return {
        text: "This is a sample text block. You can edit this content to add your own information, insights, and analysis. Use this space to provide context, explanations, or detailed descriptions for your report.",
      }
    case "table":
      return { rows: 3, columns: 3, data: [], description: "" }
    case "chart":
      return {
        type: "bar",
        data: [
          { name: "Q1 2024", value: 45000, sales: 32000, profit: 13000 },
          { name: "Q2 2024", value: 52000, sales: 38000, profit: 14000 },
          { name: "Q3 2024", value: 48000, sales: 35000, profit: 13000 },
          { name: "Q4 2024", value: 61000, sales: 44000, profit: 17000 },
        ],
        title: "Quarterly Performance Overview",
        xAxisKey: "name",
        yAxisKey: "value",
      }
    case "image":
      return { src: "", alt: "", caption: "" }
    case "footer":
      return {
        companyName: "Your Company Name",
        email: "contact@company.com",
        phone: "+1 (555) 123-4567",
        address: "123 Business Street\nCity, State 12345\nUnited States",
      }
    default:
      return {}
  }
}

function getDefaultSettings(type: Block["type"]) {
  switch (type) {
    case "header":
      return {
        alignment: "left",
        size: "large",
        showIcon: true,
        icon: "star",
        iconColor: "text-blue-600",
        textColor: "text-foreground",
        showGeneratedBy: false,
        showDateTime: false,
        dateTimeFormat: "full",
        dateTimePosition: "below",
      }
    case "text":
      return { fontSize: "medium", alignment: "left" }
    case "table":
      return { bordered: true, striped: false }
    case "chart":
      return {
        showLegend: true,
        showGrid: true,
        legendPosition: "bottom",
        legendAlign: "center",
      }
    case "image":
      return { width: "100%", alignment: "center" }
    case "footer":
      return { showSocial: true, showContact: true }
    default:
      return {}
  }
}</article></body></html>