restructured layout

src/App.js

@@ -62,19 +62,19 @@ import NotFound from './pages/NotFound';
 
 const PrivateRoute = ({ children, adminOnly = false }) => {
   const { user, loading } = useAuth();
-  
+
   if (loading) {
     return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
   }
-  
+
   if (!user) {
     return <Navigate to="/login" />;
   }
-  
+
   if (adminOnly && !['admin', 'superadmin'].includes(user.role)) {
     return <Navigate to="/dashboard" />;
   }
-  
+
   return children;
 };
 
@@ -239,6 +239,20 @@ function App() {
               </AdminLayout>
             </PrivateRoute>
           } />
+          <Route path="/admin/registration" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminRegistrationBuilder />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/member-tiers" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminMemberTiers />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
           <Route path="/admin/plans" element={
             <PrivateRoute adminOnly>
               <AdminLayout>
@@ -293,6 +307,7 @@ function App() {
               <Navigate to="/admin/settings/permissions" replace />
             </PrivateRoute>
           } />
+
           <Route path="/admin/settings" element={
             <PrivateRoute adminOnly>
               <AdminLayout>
@@ -303,9 +318,7 @@ function App() {
             <Route index element={<Navigate to="stripe" replace />} />
             <Route path="stripe" element={<AdminSettings />} />
             <Route path="permissions" element={<AdminRoles />} />
-            <Route path="member-tiers" element={<AdminMemberTiers />} />
             <Route path="theme" element={<AdminTheme />} />
-            <Route path="registration" element={<AdminRegistrationBuilder />} />
           </Route>
 
           {/* 404 - Catch all undefined routes */}

src/components/AdminSidebar.js

@@ -27,6 +27,8 @@ import {
   Heart,
   Sun,
   Moon,
+  Star,
+  FileEdit
 } from 'lucide-react';
 
 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
@@ -104,18 +106,31 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin',
       disabled: false
     },
+
     {
-      name: 'Staff',
+      name: 'Staff & Admins',
       icon: UserCog,
       path: '/admin/staff',
       disabled: false
     },
     {
-      name: 'Members',
+      name: 'Member Roster',
       icon: Users,
       path: '/admin/members',
       disabled: false
     },
+    {
+      name: 'Member Tiers',
+      icon: Star,
+      path: '/admin/member-tiers',
+      disabled: false
+    },
+    {
+      name: 'Registration',
+      icon: FileEdit,
+      path: '/admin/registration',
+      disabled: false
+    },
     {
       name: 'Validations',
       icon: CheckCircle,
@@ -316,6 +331,18 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Dashboard - Standalone */}
           {renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
 
+          {/* Onboarding Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Onboarding
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Registration'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+          </div>
           {/* MEMBERSHIP Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
@@ -325,9 +352,9 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             </div>
           )}
           <div className="space-y-1">
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff'))}
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Members'))}
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Roster'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Tiers'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff & Admins'))}
           </div>
 
           {/* FINANCIALS Section */}

src/components/SettingsSidebar.js

@@ -5,9 +5,8 @@ import { CreditCard, Shield, Star, Palette, FileEdit } from 'lucide-react';
 const settingsItems = [
   { label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
   { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
-  { label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
   { label: 'Theme', path: '/admin/settings/theme', icon: Palette },
-  { label: 'Registration Form', path: '/admin/settings/registration', icon: FileEdit },
+
 ];
 
 const SettingsTabs = () => {

src/pages/admin/AdminDashboard.js

@@ -71,7 +71,7 @@ const AdminDashboard = () => {
         </div>
         <Link to={'/'} className=''>
           <Button
-            className="btn-lavender mb-8 md:mb-0  "
+            className="btn-lavender mb-8 md:mb-0 mr-4 "
           >
             <Globe />
             View Public Site

src/pages/admin/AdminMemberTiers.js

@@ -150,9 +150,15 @@ const AdminMemberTiers = () => {
     <div className="space-y-6">
       {/* Header and Actions */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <p className="text-muted-foreground">
-          Configure tier names, time ranges, and badges displayed in the members directory.
-        </p>
+        <div>
+
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Members Tiers
+          </h1>
+          <p className="text-muted-foreground">
+            Configure tier names, time ranges, and badges displayed in the members directory.
+          </p>
+        </div>
         <div className="flex items-center gap-2">
           {hasChanges && (
             <Button variant="outline" onClick={handleDiscardChanges}>

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>
-                    <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,42 +569,132 @@ 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
+              <div className="space-y-2 ">
+                {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 items-center justify-between  ">
+                      <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>test</div>
+                        <Button size="sm" className='' onClick={() => setAddFieldDialogOpen(true)}>
+                          <Plus className="h-4 w-4 mr-2" />
+                          Add Field
+                        </Button>
+
+                      </div>
+                      {/* Fields */}
+                      <div
+                        className='mb-6 p-4 rounded-lg border-2 border-dashed bg-background border-gray-200'
+
+                      >
+                        <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">
+                          {sortedFields.map((field) => {
+                            const IconComponent = FIELD_TYPE_ICONS[field.type] || Type;
+                            return (
+                              <div
+                                key={field.id}
+                                className={`p-3 rounded-lg border cursor-pointer transition-all ${selectedField === field.id
+                                  ? 'border-brand-purple bg-brand-lavender/5 ring-2 ring-brand-purple/20'
+                                  : 'border-gray-200 hover:border-gray-300'
+                                  } ${field.is_fixed ? 'bg-gray-50' : ''}`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setSelectedSection(section.id);
+                                  setSelectedField(field.id);
+                                }}
+                              >
+                                <div className="flex items-center justify-between">
+                                  <div className="flex items-center gap-3">
+                                    <GripVertical className="h-4 w-4 text-gray-400" />
+                                    <IconComponent className="h-4 w-4 text-gray-500" />
+                                    <div>
+                                      <span className="font-medium text-sm">
+                                        {field.label}
+                                        {field.required && <span className="text-red-500 ml-1">*</span>}
+                                      </span>
+                                      <span className="text-xs text-muted-foreground ml-2">
+                                        ({FIELD_TYPE_LABELS[field.type] || field.type})
+                                      </span>
+                                    </div>
+                                    {field.is_fixed && (
+                                      <Lock className="h-3 w-3 text-gray-400" title="Fixed field - cannot be removed" />
+                                    )}
+                                  </div>
+                                  {!field.is_fixed && (
+                                    <Button
+                                      size="icon"
+                                      variant="ghost"
+                                      className="h-6 w-6 text-red-500 hover-text-background"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteField(field.id);
+                                      }}
+                                    >
+                                      <Trash2 className="h-3 w-3" />
+                                    </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.
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>)
+                }
+                )}
               </div>
             </>
           )}
@@ -611,125 +702,10 @@ const AdminRegistrationBuilder = () => {
       </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="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>
-
-            {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 ${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>
-                  {section.description && (
-                    <p className="text-sm text-muted-foreground mb-4">{section.description}</p>
-                  )}
-
-                  {/* Fields */}
-                  <div className="space-y-3">
-                    {sortedFields.map((field) => {
-                      const IconComponent = FIELD_TYPE_ICONS[field.type] || Type;
-                      return (
-                        <div
-                          key={field.id}
-                          className={`p-3 rounded-lg border cursor-pointer transition-all ${selectedField === field.id
-                            ? 'border-brand-purple bg-brand-lavender/5 ring-2 ring-brand-purple/20'
-                            : 'border-gray-200 hover:border-gray-300'
-                            } ${field.is_fixed ? 'bg-gray-50' : ''}`}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setSelectedSection(section.id);
-                            setSelectedField(field.id);
-                          }}
-                        >
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-3">
-                              <GripVertical className="h-4 w-4 text-gray-400" />
-                              <IconComponent className="h-4 w-4 text-gray-500" />
-                              <div>
-                                <span className="font-medium text-sm">
-                                  {field.label}
-                                  {field.required && <span className="text-red-500 ml-1">*</span>}
-                                </span>
-                                <span className="text-xs text-muted-foreground ml-2">
-                                  ({FIELD_TYPE_LABELS[field.type] || field.type})
-                                </span>
-                              </div>
-                              {field.is_fixed && (
-                                <Lock className="h-3 w-3 text-gray-400" title="Fixed field - cannot be removed" />
-                              )}
-                            </div>
-                            {!field.is_fixed && (
-                              <Button
-                                size="icon"
-                                variant="ghost"
-                                className="h-6 w-6 text-red-500 hover:text-red-700"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDeleteField(field.id);
-                                }}
-                              >
-                                <Trash2 className="h-3 w-3" />
-                              </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.
-                      </div>
-                    )}
-                  </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>
-            )}
-          </Card>
-
-
-        </div>
-
         {/* 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,
@@ -1135,7 +1111,7 @@ const AdminRegistrationBuilder = () => {
                                 <Label>
                                   {field.label}
                                   {field.required && (
-                                    <span className="text-red-500 ml-1">*</span>
+                                    <span className="text-red-500  ml-1">*</span>
                                   )}
                                 </Label>
                                 <Input disabled placeholder={field.placeholder || field.label} />