[V0_FILE]png:file="public/images/manpower-deficit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-BAAL7PWOx7QUi3Pxsx2ddDBrwHuLeF.png" isMerged="true" [V0_FILE]png:file="public/images/center-visit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-1iL17zjPFADMCUEQOiziSc8aOqvu2F.png" isMerged="true" [V0_FILE]png:file="public/images/audit-observations.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rOzeMoXZrOWXTVCpTE886YlFz3SyEa.png" isMerged="true" [V0_FILE]png:file="public/images/priority-customers.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Ioyo3qaHJHb7nlVRyGclGfIENoGOiU.png" isMerged="true" [V0_FILE]png:file="public/images/tasks-empty.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yG02tbSzd2ilOA1oLwfSPjqTVqDBLQ.png" isMerged="true" [V0_FILE]png:file="public/images/disbursement.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-rFhX23WCgmL6EZninai2EVzk7fhTlF.png" isMerged="true" [V0_FILE]png:file="public/images/legal-notices.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-A4RP11qsqFpfqfSnHxqwb8xIBOUH3H.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useRef } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" import { Smartphone, Grid3X3, List, BarChart3, FileText, Bell, Navigation, Palette, Settings, Trash2, Copy, Save, Code, } from "lucide-react" const componentLibrary = [ { id: "header", name: "Header", icon: Navigation, description: "Screen header with title and actions", category: "Layout", defaultProps: { title: "Screen Title", showBack: true, showSubmit: true, backgroundColor: "#14b8a6", }, }, { id: "navigation-dots", name: "Navigation Dots", icon: Navigation, description: "Numbered navigation indicators", category: "Navigation", defaultProps: { totalDots: 8, activeDot: 6, color: "#f97316", }, }, { id: "data-grid", name: "Data Grid", icon: Grid3X3, description: "Grid layout for tabular data", category: "Data", defaultProps: { title: "Data Grid", columns: ["Col 1", "Col 2", "Col 3", "Col 4"], rows: ["Row 1", "Row 2", "Row 3"], dataSource: "/api/grid-data", }, }, { id: "status-list", name: "Status List", icon: List, description: "List with status indicators", category: "Data", defaultProps: { title: "Status List", showTotal: true, totalLabel: "Total Items", sections: ["Section 1", "Section 2"], dataSource: "/api/list-data", }, }, { id: "metrics-display", name: "Metrics Display", icon: BarChart3, description: "Key metrics with progress", category: "Data", defaultProps: { title: "Metrics", showProgress: true, metrics: [ { label: "Target", color: "blue" }, { label: "Achievement", color: "green" }, ], dataSource: "/api/metrics-data", }, }, { id: "text-list", name: "Text List", icon: FileText, description: "Simple text-based list", category: "Content", defaultProps: { title: "Text List", items: ["Item 1", "Item 2", "Item 3"], dataSource: "/api/text-data", }, }, { id: "action-items", name: "Action Items", icon: Bell, description: "Items with action buttons", category: "Interactive", defaultProps: { title: "Action Items", showActions: true, actionType: "dropdown", dataSource: "/api/action-data", }, }, ] export default function DragDropScreenBuilder() { const [activeTab, setActiveTab] = useState("builder") const [showPreview, setShowPreview] = useState(true) const [canvasComponents, setCanvasComponents] = useState([ { id: "header-1", type: "header", props: { title: "Task List", showBack: true, showSubmit: true, backgroundColor: "#14b8a6", }, }, { id: "nav-1", type: "navigation-dots", props: { totalDots: 8, activeDot: 6, color: "#f97316", }, }, ]) const [selectedComponent, setSelectedComponent] = useState(null) const [draggedComponent, setDraggedComponent] = useState(null) const canvasRef = useRef(null) const handleDragStart = (e, component) => { setDraggedComponent(component) e.dataTransfer.effectAllowed = "copy" } const handleDragOver = (e) => { e.preventDefault() e.dataTransfer.dropEffect = "copy" } const handleDrop = (e) => { e.preventDefault() if (draggedComponent) { const newComponent = { id: `${draggedComponent.id}-${Date.now()}`, type: draggedComponent.id, props: { ...draggedComponent.defaultProps }, } setCanvasComponents([...canvasComponents, newComponent]) setDraggedComponent(null) } } const handleComponentClick = (component) => { setSelectedComponent(component) } const updateComponentProps = (componentId, newProps) => { setCanvasComponents( canvasComponents.map((comp) => comp.id === componentId ? { ...comp, props: { ...comp.props, ...newProps } } : comp, ), ) if (selectedComponent && selectedComponent.id === componentId) { setSelectedComponent({ ...selectedComponent, props: { ...selectedComponent.props, ...newProps } }) } } const removeComponent = (componentId) => { setCanvasComponents(canvasComponents.filter((comp) => comp.id !== componentId)) if (selectedComponent && selectedComponent.id === componentId) { setSelectedComponent(null) } } const generateJSON = () => { return JSON.stringify( { screenConfig: { name: "Custom Screen", components: canvasComponents, settings: { refreshInterval: 30, showLocationInfo: true, }, }, }, null, 2, ) } const renderCanvasComponent = (component) => { const { type, props } = component switch (type) { case "header": return (

handleComponentClick(component)} >

{props.showBack && ←} {props.title}

{props.showSubmit && ( )}

) case "navigation-dots": return (

handleComponentClick(component)} > {Array.from({ length: props.totalDots }, (_, i) => i + 1).map((num) => (

{num}

))}

) case "data-grid": return (

handleComponentClick(component)} >

{props.title}

{props.columns.map((col, i) => (

{col}

))} {props.rows.map((row, i) => (

{row}

{props.columns.map((_, j) => (

{Math.floor(Math.random() * 10)}

))}

) case "status-list": return (

handleComponentClick(component)} >

{props.title}

{props.showTotal && (

{props.totalLabel}: 15

)} {props.sections.map((section, i) => (

{section}

Sample data: 5

))}

) case "metrics-display": return (

handleComponentClick(component)} >

{props.title}

{props.metrics.map((metric, i) => (

₹50,000

{metric.label}

))}

{props.showProgress &&

Achievement: 71.4%

}

) case "text-list": return (

handleComponentClick(component)} >

{props.title}

{props.items.map((item, i) => (

{item}

))}

) case "action-items": return (

handleComponentClick(component)} >

{props.title}

Action Item 1

Action Item 2

) default: return (

Unknown component: {type}

) } } return (

{/* Header */}

Drag & Drop Screen Builder

Visual mobile screen designer



      
        
          {/* Component Library */}
          
            
              
                
                  
                  Components
                
                Drag components to the canvas
              
              
                {["Layout", "Navigation", "Data", "Content", "Interactive"].map((category) => (
                  
                    {category}
                    
                      {componentLibrary
                        .filter((comp) => comp.category === category)
                        .map((component) => {
                          const IconComponent = component.icon
                          return (
                             handleDragStart(e, component)}
                              className="flex items-center space-x-3 p-3 bg-white border rounded-lg cursor-move hover:shadow-md transition-shadow"
                            >
                              
                                
                              
                              
                                {component.name}
                                {component.description}
                              
                            
                          )
                        })}
                    
                  
                ))}
              
            
          

          {/* Canvas */}
          
            
              
                Canvas
                Drop components here to build your screen
              
              
                
                  
                    
                      {canvasComponents.length === 0 ? (
                        
                          
                            
                            Drag components here to start building your screen
                          
                        
                      ) : (
                        
                          {canvasComponents.map((component) => (
                            
                              {renderCanvasComponent(component)}
                              
                                
                              
                            
                          ))}
                        
                      )}
                    
                  
                
              
            
          

          {/* Properties Panel */}
          
            
              
                
                  
                  Properties
                
                
                  {selectedComponent ? `Configure ${selectedComponent.type}` : "Select a component to edit"}
                
              
              
                {selectedComponent ? (
                  
                    {/* Common properties based on component type */}
                    {selectedComponent.type === "header" && (
                      <>
                        
                          Title
                           updateComponentProps(selectedComponent.id, { title: e.target.value })}
                          />
                        
                        
                          Background Color
                          
                              updateComponentProps(selectedComponent.id, { backgroundColor: e.target.value })
                            }
                          />
                        
                        
                          
                              updateComponentProps(selectedComponent.id, { showBack: checked })
                            }
                          />
                          Show Back Button
                        
                        
                          
                              updateComponentProps(selectedComponent.id, { showSubmit: checked })
                            }
                          />
                          Show Submit Button
                        
                      
                    )}

                    {selectedComponent.type === "navigation-dots" && (
                      <>
                        
                          Total Dots
                          
                              updateComponentProps(selectedComponent.id, { totalDots: Number.parseInt(e.target.value) })
                            }
                          />
                        
                        
                          Active Dot
                          
                              updateComponentProps(selectedComponent.id, { activeDot: Number.parseInt(e.target.value) })
                            }
                          />
                        
                        
                          Color
                           updateComponentProps(selectedComponent.id, { color: e.target.value })}
                          />
                        
                      
                    )}

                    {(selectedComponent.type === "data-grid" ||
                      selectedComponent.type === "status-list" ||
                      selectedComponent.type === "metrics-display" ||
                      selectedComponent.type === "text-list" ||
                      selectedComponent.type === "action-items") && (
                      <>
                        
                          Title
                           updateComponentProps(selectedComponent.id, { title: e.target.value })}
                          />
                        
                        
                          Data Source
                           updateComponentProps(selectedComponent.id, { dataSource: e.target.value })}
                          />
                        
                      
                    )}

                    
                    
                      
                      
                    
                  
                ) : (
                  
                    
                    Click on a component in the canvas to edit its properties
                  
                )}

)
}