Refactor Dropdown Handlers and Update WordPress Integration

- Updated dropdown onChange handlers across multiple components to use direct value passing instead of event target value for improved clarity and consistency.
- Changed `url` to `site_url` in WordPress integration configuration for better semantic clarity.
- Enhanced Vite configuration to include `fast-deep-equal` for compatibility with `react-dnd`.
- Updated navigation paths in `SiteContentEditor` and `SiteList` for consistency with new routing structure.

frontend/src/components/integration/PlatformSelector.tsx

@@ -22,7 +22,7 @@ export default function PlatformSelector({ value, onChange, disabled }: Platform
     <SelectDropdown
       options={PLATFORMS}
       value={value}
-      onChange={(e) => onChange(e.target.value)}
+      onChange={(optionValue) => onChange(optionValue)}
       disabled={disabled}
       placeholder="Select platform"
     />

frontend/src/components/publishing/PublishingRules.tsx

@@ -142,8 +142,8 @@ export default function PublishingRules({ rules, onChange }: PublishingRulesProp
                     <SelectDropdown
                       options={CONTENT_TYPES}
                       value={rule.content_type}
-                      onChange={(e) =>
+                      onChange={(value) =>
-                        handleUpdateRule(rule.id, 'content_type', e.target.value)
+                        handleUpdateRule(rule.id, 'content_type', value)
                       }
                     />
                   </div>
@@ -153,8 +153,8 @@ export default function PublishingRules({ rules, onChange }: PublishingRulesProp
                     <SelectDropdown
                       options={TRIGGERS}
                       value={rule.trigger}
-                      onChange={(e) =>
+                      onChange={(value) =>
-                        handleUpdateRule(rule.id, 'trigger', e.target.value)
+                        handleUpdateRule(rule.id, 'trigger', value)
                       }
                     />
                   </div>

frontend/src/components/sites/TemplateCustomizer.tsx

@@ -133,7 +133,7 @@ export default function TemplateCustomizer({
                   { value: 'fullwidth', label: 'Full Width' },
                 ]}
                 value={customization.layout}
-                onChange={(e) => updateCustomization({ layout: e.target.value })}
+                onChange={(value) => updateCustomization({ layout: value })}
               />
             </div>
 
@@ -147,7 +147,7 @@ export default function TemplateCustomizer({
                   { value: 'minimal', label: 'Minimal' },
                 ]}
                 value={customization.headerStyle}
-                onChange={(e) => updateCustomization({ headerStyle: e.target.value })}
+                onChange={(value) => updateCustomization({ headerStyle: value })}
               />
             </div>
 
@@ -161,7 +161,7 @@ export default function TemplateCustomizer({
                   { value: 'none', label: 'No Footer' },
                 ]}
                 value={customization.footerStyle}
-                onChange={(e) => updateCustomization({ footerStyle: e.target.value })}
+                onChange={(value) => updateCustomization({ footerStyle: value })}
               />
             </div>
 
@@ -175,7 +175,7 @@ export default function TemplateCustomizer({
                     { value: 'none', label: 'No Sidebar' },
                   ]}
                   value={customization.sidebarPosition}
-                  onChange={(e) => updateCustomization({ sidebarPosition: e.target.value as 'left' | 'right' | 'none' })}
+                  onChange={(value) => updateCustomization({ sidebarPosition: value as 'left' | 'right' | 'none' })}
                 />
               </div>
             )}
@@ -196,7 +196,7 @@ export default function TemplateCustomizer({
                   { value: 'auto', label: 'Auto (System)' },
                 ]}
                 value={customization.colorScheme}
-                onChange={(e) => updateCustomization({ colorScheme: e.target.value })}
+                onChange={(value) => updateCustomization({ colorScheme: value })}
               />
             </div>
 
@@ -271,7 +271,7 @@ export default function TemplateCustomizer({
                   { value: 'custom', label: 'Custom' },
                 ]}
                 value={customization.typography}
-                onChange={(e) => updateCustomization({ typography: e.target.value })}
+                onChange={(value) => updateCustomization({ typography: value })}
               />
             </div>
 
@@ -285,9 +285,9 @@ export default function TemplateCustomizer({
                   { value: 'xlarge', label: 'Extra Large' },
                 ]}
                 value={customization.customStyles?.headingSize || 'medium'}
-                onChange={(e) =>
+                onChange={(value) =>
                   updateCustomization({
-                    customStyles: { ...customization.customStyles, headingSize: e.target.value },
+                    customStyles: { ...customization.customStyles, headingSize: value },
                   })
                 }
               />
@@ -302,9 +302,9 @@ export default function TemplateCustomizer({
                   { value: 'large', label: 'Large (18px)' },
                 ]}
                 value={customization.customStyles?.bodySize || 'medium'}
-                onChange={(e) =>
+                onChange={(value) =>
                   updateCustomization({
-                    customStyles: { ...customization.customStyles, bodySize: e.target.value },
+                    customStyles: { ...customization.customStyles, bodySize: value },
                   })
                 }
               />
@@ -327,7 +327,7 @@ export default function TemplateCustomizer({
                   { value: 'spacious', label: 'Spacious' },
                 ]}
                 value={customization.spacing}
-                onChange={(e) => updateCustomization({ spacing: e.target.value })}
+                onChange={(value) => updateCustomization({ spacing: value })}
               />
             </div>
 
@@ -341,9 +341,9 @@ export default function TemplateCustomizer({
                   { value: 'large', label: 'Large' },
                 ]}
                 value={customization.customStyles?.sectionPadding || 'medium'}
-                onChange={(e) =>
+                onChange={(value) =>
                   updateCustomization({
-                    customStyles: { ...customization.customStyles, sectionPadding: e.target.value },
+                    customStyles: { ...customization.customStyles, sectionPadding: value },
                   })
                 }
               />
@@ -360,9 +360,9 @@ export default function TemplateCustomizer({
                   { value: 'full', label: 'Full Width' },
                 ]}
                 value={customization.customStyles?.containerWidth || 'lg'}
-                onChange={(e) =>
+                onChange={(value) =>
                   updateCustomization({
-                    customStyles: { ...customization.customStyles, containerWidth: e.target.value },
+                    customStyles: { ...customization.customStyles, containerWidth: value },
                   })
                 }
               />

frontend/src/components/sites/WordPressIntegrationCard.tsx

@@ -17,8 +17,7 @@ interface WordPressIntegration {
   sync_status: 'success' | 'failed' | 'pending';
   last_sync_at?: string;
   config_json?: {
-    url?: string;
+    site_url?: string;
-    username?: string;
   };
 }
 
@@ -75,7 +74,7 @@ export default function WordPressIntegrationCard({
                 WordPress Integration
               </h3>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                {integration.config_json?.url || 'WordPress Site'}
+                {integration.config_json?.site_url || 'WordPress Site'}
               </p>
             </div>
           </div>

frontend/src/components/sites/WordPressIntegrationModal.tsx

@@ -4,10 +4,10 @@
  */
 import React, { useState } from 'react';
 import { X, Globe, AlertCircle } from 'lucide-react';
-import Modal from '../ui/modal/Modal';
+import { Modal } from '../ui/modal';
 import Button from '../ui/button/Button';
 import Label from '../form/Label';
-import Input from '../form/input/Input';
+import Input from '../form/input/InputField';
 import Checkbox from '../form/input/Checkbox';
 import { useToast } from '../ui/toast/ToastContainer';
 

frontend/src/pages/Sites/Editor.tsx

@@ -144,7 +144,7 @@ export default function SiteContentEditor() {
               <p className="text-gray-600 dark:text-gray-400 mb-4">
                 No pages found in this blueprint
               </p>
-              <Button onClick={() => navigate('/site-builder')} variant="primary">
+              <Button onClick={() => navigate('/sites/builder')} variant="primary">
                 Generate Pages
               </Button>
             </Card>

frontend/src/pages/Sites/List.tsx

@@ -5,7 +5,7 @@
  */
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon, PlugIcon, FileTextIcon } from 'lucide-react';
+import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon, PlugIcon, FileTextIcon, MoreVerticalIcon, Building2Icon } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
@@ -515,10 +515,6 @@ export default function SiteList() {
             </p>
           </div>
           <div className="flex gap-2">
-            <Button onClick={() => navigate('/sites/manage')} variant="outline">
-              <SettingsIcon className="w-4 h-4 mr-2" />
-              Site Management
-            </Button>
             <Button onClick={() => navigate('/sites/builder')} variant="outline">
               <PlusIcon className="w-4 h-4 mr-2" />
               Create with Builder
@@ -583,7 +579,7 @@ export default function SiteList() {
             <SelectDropdown
               options={SITE_TYPES}
               value={siteTypeFilter}
-              onChange={(e) => setSiteTypeFilter(e.target.value)}
+              onChange={(value) => setSiteTypeFilter(value)}
             />
           </div>
 
@@ -595,7 +591,7 @@ export default function SiteList() {
             <SelectDropdown
               options={HOSTING_TYPES}
               value={hostingTypeFilter}
-              onChange={(e) => setHostingTypeFilter(e.target.value)}
+              onChange={(value) => setHostingTypeFilter(value)}
             />
           </div>
 
@@ -607,7 +603,7 @@ export default function SiteList() {
             <SelectDropdown
               options={STATUS_OPTIONS}
               value={statusFilter}
-              onChange={(e) => setStatusFilter(e.target.value)}
+              onChange={(value) => setStatusFilter(value)}
             />
           </div>
         </div>
@@ -619,7 +615,7 @@ export default function SiteList() {
           <SelectDropdown
             options={INTEGRATION_OPTIONS}
             value={integrationFilter}
-            onChange={(e) => setIntegrationFilter(e.target.value)}
+            onChange={(value) => setIntegrationFilter(value)}
           />
         </div>
       </Card>
@@ -738,19 +734,21 @@ export default function SiteList() {
                       variant="outline"
                       size="sm"
                       onClick={() => handleSettings(site.id)}
-                      className="shadow-theme-xs inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400"
+                      className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
                       title="Configure Sectors"
                     >
-                      <SettingsIcon className="w-4 h-4" />
+                      <Building2Icon className="w-4 h-4 mr-1" />
+                      <span className="text-xs">Sectors</span>
                     </Button>
                     <Button
                       variant="outline"
                       size="sm"
                       onClick={() => navigate(`/sites/${site.id}/settings`)}
-                      className="shadow-theme-xs inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400"
+                      className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
                       title="Site Settings"
                     >
-                      <SettingsIcon className="w-4 h-4" />
+                      <SettingsIcon className="w-4 h-4 mr-1" />
+                      <span className="text-xs">Settings</span>
                     </Button>
                   </div>
                   <Switch

frontend/src/pages/Sites/PostEditor.tsx

@@ -327,7 +327,7 @@ export default function PostEditor() {
                   <SelectDropdown
                     options={CONTENT_TYPES}
                     value={content.content_type}
-                    onChange={(e) => setContent({ ...content, content_type: e.target.value })}
+                    onChange={(value) => setContent({ ...content, content_type: value })}
                   />
                 </div>
 
@@ -336,7 +336,7 @@ export default function PostEditor() {
                   <SelectDropdown
                     options={STATUS_OPTIONS}
                     value={content.status}
-                    onChange={(e) => setContent({ ...content, status: e.target.value })}
+                    onChange={(value) => setContent({ ...content, status: value })}
                   />
                 </div>
               </div>

frontend/src/pages/Sites/Settings.tsx

@@ -225,7 +225,10 @@ export default function SiteSettings() {
         <div className="flex gap-4">
           <button
             type="button"
-            onClick={() => setActiveTab('general')}
+            onClick={() => {
+              setActiveTab('general');
+              navigate(`/sites/${siteId}/settings`, { replace: true });
+            }}
             className={`px-4 py-2 font-medium border-b-2 transition-colors ${
               activeTab === 'general'
                 ? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -237,7 +240,10 @@ export default function SiteSettings() {
           </button>
           <button
             type="button"
-            onClick={() => setActiveTab('seo')}
+            onClick={() => {
+              setActiveTab('seo');
+              navigate(`/sites/${siteId}/settings?tab=seo`, { replace: true });
+            }}
             className={`px-4 py-2 font-medium border-b-2 transition-colors ${
               activeTab === 'seo'
                 ? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -249,7 +255,10 @@ export default function SiteSettings() {
           </button>
           <button
             type="button"
-            onClick={() => setActiveTab('og')}
+            onClick={() => {
+              setActiveTab('og');
+              navigate(`/sites/${siteId}/settings?tab=og`, { replace: true });
+            }}
             className={`px-4 py-2 font-medium border-b-2 transition-colors ${
               activeTab === 'og'
                 ? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -261,7 +270,10 @@ export default function SiteSettings() {
           </button>
           <button
             type="button"
-            onClick={() => setActiveTab('schema')}
+            onClick={() => {
+              setActiveTab('schema');
+              navigate(`/sites/${siteId}/settings?tab=schema`, { replace: true });
+            }}
             className={`px-4 py-2 font-medium border-b-2 transition-colors ${
               activeTab === 'schema'
                 ? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -273,7 +285,10 @@ export default function SiteSettings() {
           </button>
           <button
             type="button"
-            onClick={() => setActiveTab('integrations')}
+            onClick={() => {
+              setActiveTab('integrations');
+              navigate(`/sites/${siteId}/settings?tab=integrations`, { replace: true });
+            }}
             className={`px-4 py-2 font-medium border-b-2 transition-colors ${
               activeTab === 'integrations'
                 ? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -316,7 +331,7 @@ export default function SiteSettings() {
                 <SelectDropdown
                   options={SITE_TYPES}
                   value={formData.site_type}
-                  onChange={(e) => setFormData({ ...formData, site_type: e.target.value })}
+                  onChange={(value) => setFormData({ ...formData, site_type: value })}
                 />
               </div>
 
@@ -325,7 +340,7 @@ export default function SiteSettings() {
                 <SelectDropdown
                   options={HOSTING_TYPES}
                   value={formData.hosting_type}
-                  onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value })}
+                  onChange={(value) => setFormData({ ...formData, hosting_type: value })}
                 />
               </div>
 
@@ -572,8 +587,8 @@ export default function SiteSettings() {
           initialData={
             wordPressIntegration
               ? {
-                  url: wordPressIntegration.config_json?.url || '',
+                  url: wordPressIntegration.config_json?.site_url || '',
-                  username: wordPressIntegration.config_json?.username || '',
+                  username: wordPressIntegration.credentials_json?.username || '',
                   app_password: '', // Never show password
                   is_active: wordPressIntegration.is_active,
                   sync_enabled: wordPressIntegration.sync_enabled,

frontend/src/services/integration.api.ts

@@ -10,6 +10,7 @@ export interface SiteIntegration {
   platform: 'wordpress' | 'shopify' | 'custom';
   platform_type: 'cms' | 'ecommerce' | 'custom_api';
   config_json: Record<string, any>;
+  credentials_json?: Record<string, any>;
   is_active: boolean;
   sync_enabled: boolean;
   last_sync_at?: string;
@@ -23,7 +24,7 @@ export interface CreateIntegrationData {
   platform: 'wordpress' | 'shopify' | 'custom';
   platform_type?: 'cms' | 'ecommerce' | 'custom_api';
   config_json: Record<string, any>;
-  credentials?: Record<string, string>;
+  credentials_json?: Record<string, string>;
   is_active?: boolean;
   sync_enabled?: boolean;
 }
@@ -126,10 +127,10 @@ export const integrationApi = {
       platform: 'wordpress',
       platform_type: 'cms',
       config_json: {
-        url: data.url,
+        site_url: data.url,
-        username: data.username,
       },
-      credentials: {
+      credentials_json: {
+        username: data.username,
         app_password: data.app_password,
       },
       is_active: data.is_active ?? true,

frontend/vite.config.ts

@@ -120,6 +120,8 @@ export default defineConfig(({ mode, command }) => {
         "zustand/middleware", // Required for persist middleware used in stores
         // Include apexcharts for proper module resolution (skip during marketing-only build)
         ...(isMarketingBuild ? [] : ["apexcharts", "react-apexcharts"]),
+        // Force include fast-deep-equal for react-dnd compatibility
+        "fast-deep-equal",
       ],
       // Exclude heavy dependencies that are only used in specific pages
       // They will be lazy-loaded when needed
@@ -132,8 +134,6 @@ export default defineConfig(({ mode, command }) => {
         "@fullcalendar/timegrid",
         "@react-jvectormap/core",
         "@react-jvectormap/world",
-        "react-dnd",
-        "react-dnd-html5-backend",
         "swiper",
       ],
       esbuildOptions: {