restructured layout

src/pages/admin/AdminRegistrationBuilder.js

@@ -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>
+                    <div className="font-medium">Step: {index + 1} </div>
-                    <span className="font-medium text-sm">{step.title}</span>
                   </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">
+              <div className="flex justify-between flex-col items-center mt-6 mb-4">
-                <h2 className="text-lg font-semibold">Sections</h2>
+                <h2 className="text-lg font-semibold self-start">Sections</h2>
-                <Button size="sm" variant="ghost" onClick={() => setAddSectionDialogOpen(true)}>
+                <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">
+              <div className="space-y-2 ">
-                {sortedSections.map((section) => (
+                {sortedSections.map((section) => {
-                  <div
+                  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
+                    className='p-3 rounded-lg bg-background'
-                      ? 'border-brand-purple bg-brand-lavender/10'
-                      : 'border-gray-200 hover:border-gray-300'
-                      }`}
                     onClick={() => {
                       setSelectedSection(section.id);
                       setSelectedField(null);
                     }}
                   >
-                    <div className="flex items-center justify-between">
+                    <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 className="p-6 mt-4 border-brand-purple rounded-xl bg-brand-lavender/10 ">
-                ))}
+                      <div className="flex justify-between items-center mb-6  ">
-              </div>
-            </>
-          )}
-        </Card>
-      </div>
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
 
-        {/* Center - Form Canvas */}
+                        <div>test</div>
-        <div className="lg:col-span-9">
+                        <Button size="sm" className='' onClick={() => setAddFieldDialogOpen(true)}>
-
-          <Card className="p-6">
-
-            <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)}>
                           <Plus className="h-4 w-4 mr-2" />
                           Add Field
                         </Button>
-              )}
+
                       </div>
-
+                      {/* Fields */}
-            {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 (
                       <div
-                  key={section.id}
+                        className='mb-6 p-4 rounded-lg border-2 border-dashed bg-background border-gray-200'
-                  className={`mb-6 p-4 rounded-lg border-2 ${selectedSection === section.id
+
-                    ? 'border-brand-purple'
-                    : 'border-dashed border-gray-200'
-                    }`}
-                  onClick={() => setSelectedSection(section.id)}
                       >
-                  <h3 className="text-lg font-medium mb-4">{section.title}</h3>
+                        <h3 className="text-lg font-medium mb-4">title</h3>
-                  {section.description && (
+
                         <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,