fix: moved wizard pages to subfolders for clearance

src/App.tsx

@@ -38,7 +38,8 @@ import { SettingsPage } from './pages/Settings';
 import { GDPRPage } from './pages/GDPR';
 import StorePage from './pages/Store';
 import { FeatureViewPage } from './pages/FeatureView';
-import { AccessManagementHub, AdminMandatesPage, AdminUsersPage, AdminUserMandatesPage, AdminFeatureAccessPage, AdminInvitationsPage, AdminMandateRolesPage, AdminFeatureRolesPage, AdminFeatureInstanceUsersPage, AdminMandateRolePermissionsPage, AdminUserAccessOverviewPage, AdminAutomationEventsPage, AdminLogsPage, AdminMandateWizardPage, AdminInvitationWizardPage } from './pages/admin';
+import { AccessManagementHub, AdminMandatesPage, AdminUsersPage, AdminUserMandatesPage, AdminFeatureAccessPage, AdminInvitationsPage, AdminMandateRolesPage, AdminFeatureRolesPage, AdminFeatureInstanceUsersPage, AdminMandateRolePermissionsPage, AdminUserAccessOverviewPage, AdminAutomationEventsPage, AdminLogsPage } from './pages/admin';
+import { AdminMandateWizardPage, AdminInvitationWizardPage } from './pages/admin/wizards';
 import { PlaygroundPage, WorkflowsPage, AutomationsPage } from './pages/workflows';
 import { PromptsPage, FilesPage, ConnectionsPage } from './pages/basedata';
 import { BillingDataView, BillingAdmin } from './pages/billing';

src/pages/admin/AccessManagementHub.tsx

@@ -20,7 +20,7 @@ import api from '../../api';
 import styles from './Admin.module.css';
 import hubStyles from './AccessManagementHub.module.css';
 import { InstanceDetailModal } from './InstanceDetailModal';
-import { FeatureInstanceWizard } from './FeatureInstanceWizard';
+import { FeatureInstanceWizard } from './wizards/FeatureInstanceWizard';
 import { InstanceHierarchyView } from './InstanceHierarchyView';
 
 function getMandateName(mandate: Mandate): string {

src/pages/admin/index.ts

@@ -17,5 +17,3 @@ export { AdminMandateRolePermissionsPage } from './AdminMandateRolePermissionsPa
 export { AdminUserAccessOverviewPage } from './AdminUserAccessOverviewPage';
 export { AdminAutomationEventsPage } from './AdminAutomationEventsPage';
 export { AdminLogsPage } from './AdminLogsPage';
-export { default as AdminMandateWizardPage } from './AdminMandateWizardPage';
-export { default as AdminInvitationWizardPage } from './AdminInvitationWizardPage';

src/pages/admin/wizards/AdminInvitationWizardPage.tsx

@@ -10,10 +10,10 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { useInvitations, type InvitationCreate } from '../../hooks/useInvitations';
+import { useInvitations, type InvitationCreate } from '../../../hooks/useInvitations';
-import { useUserMandates, type Mandate, type Role } from '../../hooks/useUserMandates';
+import { useUserMandates, type Mandate, type Role } from '../../../hooks/useUserMandates';
-import { useFeatureAccess, type FeatureInstance, type FeatureInstanceRole } from '../../hooks/useFeatureAccess';
+import { useFeatureAccess, type FeatureInstance, type FeatureInstanceRole } from '../../../hooks/useFeatureAccess';
-import styles from './Admin.module.css';
+import styles from '../Admin.module.css';
 
 // =============================================================================
 // TYPES
@@ -439,7 +439,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
 
       {step < 5 && _renderStepIndicator()}
 
-      {/* ═══ STEP 1: SELECT MANDATE ═══ */}
+      {/* ── STEP 1: SELECT MANDATE ── */}
       {step === 1 && (
         <div style={_cardStyle}>
           <h3 style={{ margin: '0 0 16px 0', fontSize: '16px' }}>Schritt 1: Mandant auswaehlen</h3>
@@ -469,7 +469,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 2: MANDATE INVITEES ═══ */}
+      {/* ── STEP 2: MANDATE INVITEES ── */}
       {step === 2 && (
         <div>
           <div style={_cardStyle}>
@@ -498,7 +498,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 3: FEATURE INSTANCE (optional) ═══ */}
+      {/* ── STEP 3: FEATURE INSTANCE (optional) ── */}
       {step === 3 && !skipInstance && (
         <div>
           <div style={_cardStyle}>
@@ -535,7 +535,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 4: INSTANCE INVITEES ═══ */}
+      {/* ── STEP 4: INSTANCE INVITEES ── */}
       {step === 4 && !skipInstance && selectedInstance && (
         <div>
           <div style={_cardStyle}>
@@ -559,7 +559,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ DISPATCH / SUMMARY STEP ═══ */}
+      {/* ── DISPATCH / SUMMARY STEP ── */}
       {((step === 3 && skipInstance) || (step === 5 && !dispatchResults)) && (
         <div style={_cardStyle}>
           <h3 style={{ margin: '0 0 16px 0', fontSize: '16px' }}>Zusammenfassung &amp; Versand</h3>
@@ -610,7 +610,7 @@ export const AdminInvitationWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ RESULTS ═══ */}
+      {/* ── RESULTS ── */}
       {step === 5 && dispatchResults && (
         <div style={_cardStyle}>
           <h3 style={{ margin: '0 0 16px 0', fontSize: '16px' }}>Ergebnis</h3>

src/pages/admin/wizards/AdminMandateWizardPage.tsx

@@ -14,17 +14,17 @@ import {
   type MandateUser,
   type Mandate,
   type Role,
-} from '../../hooks/useUserMandates';
+} from '../../../hooks/useUserMandates';
 import {
   useFeatureAccess,
   type FeatureInstance,
   type FeatureAccessUser,
   type FeatureInstanceRole,
   type Feature,
-} from '../../hooks/useFeatureAccess';
+} from '../../../hooks/useFeatureAccess';
-import { useToast } from '../../contexts/ToastContext';
+import { useToast } from '../../../contexts/ToastContext';
-import api from '../../api';
+import api from '../../../api';
-import styles from './Admin.module.css';
+import styles from '../Admin.module.css';
 
 const TOTAL_STEPS = 4;
 const STEP_LABELS = ['Mandant', 'Benutzer', 'Instances', 'Feature-Benutzer'];
@@ -89,9 +89,9 @@ export const AdminMandateWizardPage: React.FC = () => {
   const [isAddingInstanceUser, setIsAddingInstanceUser] = useState(false);
   const [addInstanceUserForm, setAddInstanceUserForm] = useState({ userId: '', roleIds: [] as string[] });
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // HELPERS
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const getMandateName = (m: Mandate | Record<string, any>): string => {
     if (m.label) return m.label;
@@ -117,9 +117,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     return parts.length > 0 ? parts.join(' ') : u.username;
   };
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // DATA LOADING
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const loadMandates = useCallback(async () => {
     try {
@@ -194,9 +194,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     }
   }, [step, selectedInstance, loadInstanceUsers, loadInstanceRoles, loadMandateUsers]);
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // HANDLERS
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const handleCreateMandate = async () => {
     if (!mandateForm.name.trim()) { setError('Name ist erforderlich'); return; }
@@ -318,9 +318,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     }
   };
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // COMPUTED
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const availableUsersForMandate = allSystemUsers.filter(
     u => !mandateUsers.some(mu => mu.userId === u.id)
@@ -330,9 +330,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     mu => !instanceUsers.some(iu => iu.userId === mu.userId)
   );
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // SHARED UI
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const renderUserTable = (
     users: Array<{ userId?: string; id?: string; username: string; email?: string | null; fullName?: string; firstname?: string | null; lastname?: string | null; enabled?: boolean; roleLabels?: string[] }>,
@@ -454,9 +454,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     </div>
   );
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // STEP INDICATOR
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const renderStepIndicator = () => (
     <div style={{ display: 'flex', gap: '8px', marginBottom: '24px', flexWrap: 'wrap' }}>
@@ -492,9 +492,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     </div>
   );
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // CARD WRAPPER (reusable section container matching poweron theme)
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   const cardStyle: React.CSSProperties = {
     background: 'var(--surface-color, #fff)',
@@ -503,9 +503,9 @@ export const AdminMandateWizardPage: React.FC = () => {
     padding: '24px',
   };
 
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
   // RENDER
-  // ═══════════════════════════════════════════════════════════════════════════
+  // ─────────────────────────────────────────────────────────────────────────
 
   return (
     <div className={styles.adminPage} style={{ overflow: 'auto' }}>
@@ -529,7 +529,7 @@ export const AdminMandateWizardPage: React.FC = () => {
 
       {renderStepIndicator()}
 
-      {/* ═══ STEP 1: MANDATE ═══ */}
+      {/* ── STEP 1: MANDATE ── */}
       {step === 1 && (
         <div style={cardStyle}>
           <h3 style={{ fontSize: '15px', fontWeight: 600, marginBottom: '16px', marginTop: 0 }}>Mandant auswählen oder erstellen</h3>
@@ -590,7 +590,7 @@ export const AdminMandateWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 2: MANDATE USERS ═══ */}
+      {/* ── STEP 2: MANDATE USERS ── */}
       {step === 2 && selectedMandate && (
         <div style={cardStyle}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
@@ -632,7 +632,7 @@ export const AdminMandateWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 3: INSTANCES ═══ */}
+      {/* ── STEP 3: INSTANCES ── */}
       {step === 3 && selectedMandate && (
         <div style={cardStyle}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
@@ -754,7 +754,7 @@ export const AdminMandateWizardPage: React.FC = () => {
         </div>
       )}
 
-      {/* ═══ STEP 4: FEATURE INSTANCE USERS ═══ */}
+      {/* ── STEP 4: FEATURE INSTANCE USERS ── */}
       {step === 4 && selectedMandate && selectedInstance && (
         <div style={cardStyle}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
@@ -807,4 +807,3 @@ export const AdminMandateWizardPage: React.FC = () => {
 };
 
 export default AdminMandateWizardPage;
-

src/pages/admin/wizards/FeatureInstanceWizard.tsx

@@ -5,13 +5,13 @@
  */
 
 import React, { useState, useMemo } from 'react';
-import { useFeatureAccess } from '../../hooks/useFeatureAccess';
+import { useFeatureAccess } from '../../../hooks/useFeatureAccess';
-import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
+import { FormGeneratorForm, type AttributeDefinition } from '../../../components/FormGenerator/FormGeneratorForm';
-import { useToast } from '../../contexts/ToastContext';
+import { useToast } from '../../../contexts/ToastContext';
-import api from '../../api';
+import api from '../../../api';
-import type { Mandate } from '../../hooks/useUserMandates';
+import type { Mandate } from '../../../hooks/useUserMandates';
-import type { Feature } from '../../hooks/useFeatureAccess';
+import type { Feature } from '../../../hooks/useFeatureAccess';
-import styles from './Admin.module.css';
+import styles from '../Admin.module.css';
 import wizardStyles from './FeatureInstanceWizard.module.css';
 
 function getMandateName(m: Mandate): string {

src/pages/admin/wizards/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Wizards Index
+ *
+ * Export wizard pages and components for easy importing
+ */
+
+export { default as AdminMandateWizardPage } from './AdminMandateWizardPage';
+export { default as AdminInvitationWizardPage } from './AdminInvitationWizardPage';
+export { default as FeatureInstanceWizard } from './FeatureInstanceWizard';