PowerOn/frontend_nyla
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: moved wizard pages to subfolders for clearance

Browse source
This commit is contained in:
Ida Dittrich 2026-02-26 08:18:49 +01:00
parent 312efb894b
commit ba06b786cc
8 changed files with 54 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.tsx
View file

@ -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';

2
src/pages/admin/AccessManagementHub.tsx
View file

@ -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 {

2
src/pages/admin/index.ts
View file

@ -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';

20
src/pages/admin/AdminInvitationWizardPage.tsx → src/pages/admin/wizards/AdminInvitationWizardPage.tsx
View file

@ -10,10 +10,10 @@
*/
import React, { useState, useEffect } from 'react';
import { useInvitations, type InvitationCreate } from '../../hooks/useInvitations';
import { useUserMandates, type Mandate, type Role } from '../../hooks/useUserMandates';
import { useFeatureAccess, type FeatureInstance, type FeatureInstanceRole } from '../../hooks/useFeatureAccess';
import styles from './Admin.module.css';
import { useInvitations, type InvitationCreate } from '../../../hooks/useInvitations';
import { useUserMandates, type Mandate, type Role } from '../../../hooks/useUserMandates';
import { useFeatureAccess, type FeatureInstance, type FeatureInstanceRole } from '../../../hooks/useFeatureAccess';
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>

51
src/pages/admin/AdminMandateWizardPage.tsx → src/pages/admin/wizards/AdminMandateWizardPage.tsx
View file

@ -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';
import { useToast } from '../../contexts/ToastContext';
import api from '../../api';
import styles from './Admin.module.css';
} from '../../../hooks/useFeatureAccess';
import { useToast } from '../../../contexts/ToastContext';
import api from '../../../api';
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;

0
src/pages/admin/FeatureInstanceWizard.module.css → src/pages/admin/wizards/FeatureInstanceWizard.module.css
View file

14
src/pages/admin/FeatureInstanceWizard.tsx → src/pages/admin/wizards/FeatureInstanceWizard.tsx
View file

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

9
src/pages/admin/wizards/index.ts Normal file
View file

@ -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';