restructured layout
This commit is contained in:
@@ -498,12 +498,13 @@ const AdminRegistrationBuilder = () => {
|
||||
<Card className="p-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-semibold">Steps</h2>
|
||||
<Button size="sm" variant="ghost" onClick={() => setAddStepDialogOpen(true)}>
|
||||
<Button size="sm" variant="ghost" className='w-32' onClick={() => setAddStepDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
<p>Add Step</p>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex space-y-2">
|
||||
<div className="flex">
|
||||
{sortedSteps.map((step, index) => (
|
||||
<div
|
||||
key={step.id}
|
||||
@@ -519,8 +520,7 @@ const AdminRegistrationBuilder = () => {
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-medium">Step: </div>
|
||||
<span className="font-medium text-sm">{step.title}</span>
|
||||
<div className="font-medium">Step: {index + 1} </div>
|
||||
</div>
|
||||
{/* Mod Buttons */}
|
||||
<div className="flex items-center gap-1">
|
||||
@@ -548,10 +548,11 @@ const AdminRegistrationBuilder = () => {
|
||||
>
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button> */}
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 text-red-500 hover:text-white ml-2"
|
||||
className="h-6 w-6 text-red-500 hover-text-background ml-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteStep(step.id);
|
||||
@@ -568,91 +569,66 @@ const AdminRegistrationBuilder = () => {
|
||||
{/* Sections for selected step */}
|
||||
{currentStep && (
|
||||
<>
|
||||
<div className="flex justify-between items-center mt-6 mb-4">
|
||||
<h2 className="text-lg font-semibold">Sections</h2>
|
||||
<Button size="sm" variant="ghost" onClick={() => setAddSectionDialogOpen(true)}>
|
||||
<div className="flex justify-between flex-col items-center mt-6 mb-4">
|
||||
<h2 className="text-lg font-semibold self-start">Sections</h2>
|
||||
<Button size="sm" className='w-full' variant="ghost" onClick={() => setAddSectionDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
<p>Add Section</p>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 ">
|
||||
{sortedSections.map((section) => (
|
||||
<div
|
||||
{sortedSections.map((section) => {
|
||||
const sortedFields = section.fields?.sort((a, b) => a.order - b.order) || [];
|
||||
|
||||
return (<div
|
||||
key={section.id}
|
||||
className={`p-3 rounded-lg border cursor-pointer transition-colors ${selectedSection === section.id
|
||||
? 'border-brand-purple bg-brand-lavender/10'
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
className='p-3 rounded-lg bg-background'
|
||||
onClick={() => {
|
||||
setSelectedSection(section.id);
|
||||
setSelectedField(null);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between ">
|
||||
<span className="text-sm">{section.title}</span>
|
||||
<div className='flex flex-col'>
|
||||
<span className="text-xl font-semibold">{section.title}</span>
|
||||
{section.description && (
|
||||
<p className="text-sm text-muted-foreground mb-4">{section.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
size="icon"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 text-red-500 hover:text-red-700"
|
||||
className=" text-red-500 self-start hover-text-background"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSection(section.id);
|
||||
}}
|
||||
>
|
||||
<p>Delete Section</p>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Center - Form Canvas */}
|
||||
<div className="lg:col-span-9">
|
||||
|
||||
<Card className="p-6">
|
||||
|
||||
<div className="p-6 mt-4 border-brand-purple rounded-xl bg-brand-lavender/10 ">
|
||||
<div className="flex justify-between items-center mb-6 ">
|
||||
<div className='relative -mx-11 -my-2 flex gap-2 items-center'>
|
||||
<Grip className="size-10 text-gray-400 py-2 bg-background" />
|
||||
|
||||
<h2 className="text-xl font-semibold">
|
||||
{currentStep?.title || 'Select a step'}
|
||||
</h2>
|
||||
</div>
|
||||
{selectedSection && (
|
||||
<Button size="sm" onClick={() => setAddFieldDialogOpen(true)}>
|
||||
<div>test</div>
|
||||
<Button size="sm" className='' onClick={() => setAddFieldDialogOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Field
|
||||
</Button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{currentStep?.description && (
|
||||
<p className="text-muted-foreground mb-6">{currentStep.description}</p>
|
||||
)}
|
||||
|
||||
{/* Sections and Fields */}
|
||||
{sortedSections.map((section) => {
|
||||
const sortedFields = section.fields?.sort((a, b) => a.order - b.order) || [];
|
||||
|
||||
return (
|
||||
{/* Fields */}
|
||||
<div
|
||||
key={section.id}
|
||||
className={`mb-6 p-4 rounded-lg border-2 ${selectedSection === section.id
|
||||
? 'border-brand-purple'
|
||||
: 'border-dashed border-gray-200'
|
||||
}`}
|
||||
onClick={() => setSelectedSection(section.id)}
|
||||
className='mb-6 p-4 rounded-lg border-2 border-dashed bg-background border-gray-200'
|
||||
|
||||
>
|
||||
<h3 className="text-lg font-medium mb-4">{section.title}</h3>
|
||||
{section.description && (
|
||||
<h3 className="text-lg font-medium mb-4">title</h3>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-4">{section.description}</p>
|
||||
)}
|
||||
|
||||
|
||||
{/* Fields */}
|
||||
<div className="space-y-3">
|
||||
@@ -692,7 +668,7 @@ const AdminRegistrationBuilder = () => {
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 text-red-500 hover:text-red-700"
|
||||
className="h-6 w-6 text-red-500 hover-text-background"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteField(field.id);
|
||||
@@ -702,10 +678,12 @@ const AdminRegistrationBuilder = () => {
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
{sortedFields.length === 0 && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
No fields in this section. Click "Add Field" to add one.
|
||||
@@ -713,23 +691,21 @@ const AdminRegistrationBuilder = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{sortedSections.length === 0 && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No sections in this step. Add a section from the left sidebar.
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* Right Sidebar - Field Properties */}
|
||||
<div className="lg:col-span-3">
|
||||
<Card className="p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">Field Properties</h2>
|
||||
<h2 className="text-lg font-semibold mb-4">Edit Options</h2>
|
||||
|
||||
{selectedFieldData ? (
|
||||
<div className="space-y-4">
|
||||
@@ -1038,7 +1014,7 @@ const AdminRegistrationBuilder = () => {
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 text-red-500"
|
||||
className="h-6 w-6 text-red-500 hover-text-background"
|
||||
onClick={() => {
|
||||
updateSchema((prev) => ({
|
||||
...prev,
|
||||
|
||||
Reference in New Issue
Block a user