+ {/* Error indicator for failed actions */}
+ {isError && (
+
+
+ Aktion fehlgeschlagen
+
+ )}
+
{/* Message content */}
{message.message && (
diff --git a/src/components/UiComponents/Messages/Messages.module.css b/src/components/UiComponents/Messages/Messages.module.css
index e5741d5..620e4ac 100644
--- a/src/components/UiComponents/Messages/Messages.module.css
+++ b/src/components/UiComponents/Messages/Messages.module.css
@@ -64,6 +64,29 @@
border-bottom-left-radius: 4px;
}
+/* Error/Failed Messages */
+.messageError .messageBubble {
+ background-color: var(--danger-bg, #fee2e2);
+ border: 1px solid var(--danger-color, #dc2626);
+}
+
+.errorIndicator {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--danger-color, #dc2626);
+ font-size: 12px;
+ font-weight: 500;
+ padding: 4px 8px;
+ background-color: rgba(220, 38, 38, 0.1);
+ border-radius: 4px;
+ margin-bottom: 4px;
+}
+
+.errorIcon {
+ font-size: 14px;
+}
+
/* Message Metadata */
.messageMetadata {
display: flex;
diff --git a/src/config/pageRegistry.tsx b/src/config/pageRegistry.tsx
index 62f8828..c71ba73 100644
--- a/src/config/pageRegistry.tsx
+++ b/src/config/pageRegistry.tsx
@@ -20,7 +20,7 @@ import {
FaCubes, FaEnvelopeOpenText, FaKey, FaUsersCog, FaCube, FaShieldAlt,
FaLightbulb, FaRegFileAlt, FaLink, FaComments, FaChartBar, FaMicrophone,
FaListAlt, FaCogs, FaChartLine, FaFileAlt, FaUserShield, FaDatabase,
- FaProjectDiagram, FaMapMarkedAlt
+ FaProjectDiagram, FaMapMarkedAlt, FaWallet, FaMoneyBillAlt
} from 'react-icons/fa';
// =============================================================================
@@ -47,6 +47,10 @@ export const PAGE_ICONS: Record
= {
'page.system.pek': ,
'page.system.speech': ,
+ // Billing pages
+ 'page.billing.dashboard': ,
+ 'page.billing.transactions': ,
+
// Admin pages
'page.admin.access': ,
'page.admin.users': ,
@@ -57,8 +61,10 @@ export const PAGE_ICONS: Record = {
'page.admin.user-mandates': ,
'page.admin.feature-roles': ,
'page.admin.feature-instances': ,
+ 'page.admin.featureInstances': ,
'page.admin.feature-users': ,
'page.admin.user-access-overview': ,
+ 'page.admin.billing': ,
// Feature pages - Trustee
'page.feature.trustee.dashboard': ,
diff --git a/src/hooks/playground/useDashboardInputForm.ts b/src/hooks/playground/useDashboardInputForm.ts
index 096c85b..e39494a 100644
--- a/src/hooks/playground/useDashboardInputForm.ts
+++ b/src/hooks/playground/useDashboardInputForm.ts
@@ -10,7 +10,7 @@ import type { Workflow, WorkflowMessage } from '../../api/workflowApi';
import { useWorkflowLifecycle } from './useWorkflowLifecycle';
import { useWorkflows } from './useWorkflows';
import { useDashboardLogTree } from './useDashboardLogTree';
-import { extractFileIdsFromMessage, convertFilesToDocuments, sortMessages } from './playgroundUtils';
+import { convertFilesToDocuments, sortMessages } from './playgroundUtils';
import type { WorkflowLog as LogTypesWorkflowLog } from '../../components/UiComponents/Log/LogTypes';
export interface WorkflowFile {
@@ -23,13 +23,14 @@ export interface WorkflowFile {
source?: 'user_uploaded' | 'ai_created';
}
-export function useDashboardInputForm() {
+export function useDashboardInputForm(instanceId: string) {
const [inputValue, setInputValue] = useState('');
const [pendingFiles, setPendingFiles] = useState([]);
const [isFileAttachmentPopupOpen, setIsFileAttachmentPopupOpen] = useState(false);
const [optimisticMessage, setOptimisticMessage] = useState(null);
const [selectedPromptId, setSelectedPromptId] = useState(null);
const [workflowMode, setWorkflowMode] = useState<'Dynamic' | 'Automation' | null>(null);
+ const [selectedProviders, setSelectedProviders] = useState([]); // AI provider selection (multiselect)
const { checkPermission, canView } = usePermissions();
const [playgroundUIPermission, setPlaygroundUIPermission] = useState(false);
@@ -54,7 +55,7 @@ export function useDashboardInputForm() {
resetWorkflow,
selectWorkflow,
setWorkflowStatusOptimistic
- } = useWorkflowLifecycle();
+ } = useWorkflowLifecycle(instanceId);
// Dashboard log tree hook
const {
@@ -278,44 +279,21 @@ export function useDashboardInputForm() {
useEffect(() => {
if (!messages || messages.length === 0) return;
+ if (!optimisticMessage) return;
- const messageTexts = new Set();
- messages.forEach((message: WorkflowMessage) => {
- if (message.message) {
- messageTexts.add(message.message.trim());
- }
- });
+ // Clear optimistic message when backend's "first" user message arrives via polling.
+ // The backend message contains the normalizedRequest (which differs from the original prompt),
+ // so we match by status="first" instead of content comparison.
+ const hasFirstMessage = messages.some((msg: WorkflowMessage) =>
+ (msg as any).status === 'first' && msg.role?.toLowerCase() === 'user'
+ );
- if (optimisticMessage && optimisticMessage.message) {
- const optimisticText = optimisticMessage.message.trim();
- const optimisticFileIds = extractFileIdsFromMessage(optimisticMessage);
-
- const matchingMessage = Array.from(messages).find((msg: WorkflowMessage) =>
- msg.message && msg.message.trim() === optimisticText
- );
-
- if (matchingMessage) {
- const matchingFileIds = extractFileIdsFromMessage(matchingMessage);
-
- if (optimisticFileIds.size > 0) {
- const allFilesConfirmed = Array.from(optimisticFileIds).every(fileId =>
- matchingFileIds.has(fileId)
- );
- if (allFilesConfirmed && matchingFileIds.size > 0) {
- setOptimisticMessage(null);
- }
- } else {
- if (messageTexts.has(optimisticText)) {
- setOptimisticMessage(null);
- }
- }
- }
+ if (hasFirstMessage) {
+ setOptimisticMessage(null);
}
}, [messages, optimisticMessage]);
const displayMessages = useMemo(() => {
- const optimisticText = optimisticMessage?.message?.trim();
-
const processedMessages = (messages || []).map((message: WorkflowMessage) => {
const files = (message as any).files as any[] | undefined;
const documents = (message as any).documents as MessageDocument[] | undefined;
@@ -330,37 +308,19 @@ export function useDashboardInputForm() {
return message;
});
- let replacedMessageTimestamp: number | undefined;
- const filteredMessages = processedMessages.filter((message: WorkflowMessage) => {
- const isUserMessage = message.role?.toLowerCase() === 'user';
- const messageText = message.message?.trim();
-
- if (optimisticMessage && optimisticText && isUserMessage && messageText === optimisticText) {
- const documents = (message as any).documents as MessageDocument[] | undefined;
- const files = (message as any).files as any[] | undefined;
- const hasDocuments = documents && Array.isArray(documents) && documents.length > 0;
- const hasFiles = files && Array.isArray(files) && files.length > 0;
-
- if (hasDocuments || hasFiles) {
- return true;
- }
-
- if (message.publishedAt !== undefined) {
- replacedMessageTimestamp = message.publishedAt;
- }
-
- return false;
- }
-
- return true;
- });
-
- const allMessages = [...filteredMessages];
+ // If optimistic message is still active (backend "first" message not yet polled),
+ // show the optimistic message instead of any backend user messages to avoid duplicates.
+ const allMessages = [...processedMessages];
if (optimisticMessage) {
- const optimisticWithTimestamp = replacedMessageTimestamp !== undefined
- ? { ...optimisticMessage, publishedAt: replacedMessageTimestamp }
- : optimisticMessage;
- allMessages.push(optimisticWithTimestamp);
+ // Find backend "first" user message to inherit its timestamp for correct ordering
+ const firstBackendMsg = processedMessages.find((msg: WorkflowMessage) =>
+ (msg as any).status === 'first' && msg.role?.toLowerCase() === 'user'
+ );
+ if (!firstBackendMsg) {
+ // Backend "first" message not yet arrived - show optimistic message
+ allMessages.push(optimisticMessage);
+ }
+ // If firstBackendMsg exists, the useEffect above will clear optimistic on next render
}
return allMessages.sort(sortMessages);
@@ -594,9 +554,13 @@ export function useDashboardInputForm() {
const requestBody = {
prompt: trimmedInput,
listFileId: fileIdsToSend.length > 0 ? fileIdsToSend : undefined,
- userLanguage: 'en'
+ userLanguage: 'en',
+ allowedProviders: selectedProviders.length > 0 ? selectedProviders : undefined // AI provider filter (multiselect)
};
+ // Debug: Log provider selection
+ console.log('🤖 Provider selection:', { selectedProviders, sentProviders: requestBody.allowedProviders });
+
const result = await startWorkflow(requestBody, workflowOptions);
if (result.success) {
@@ -636,7 +600,7 @@ export function useDashboardInputForm() {
setWorkflowStatusOptimistic('idle');
}
}
- }, [inputValue, pendingFiles, isRunning, workflowId, startingWorkflow, startWorkflow, stopWorkflow, resetWorkflow, refetchWorkflows, selectWorkflowFromContext, selectWorkflow, chatWorkflowPermission, workflowMode, setWorkflowStatusOptimistic]);
+ }, [inputValue, pendingFiles, isRunning, workflowId, startingWorkflow, startWorkflow, stopWorkflow, resetWorkflow, refetchWorkflows, selectWorkflowFromContext, selectWorkflow, chatWorkflowPermission, workflowMode, selectedProviders, setWorkflowStatusOptimistic]);
useEffect(() => {
const handleWorkflowCleared = () => {
@@ -820,11 +784,14 @@ export function useDashboardInputForm() {
allUserFiles: fileContext.files || [],
handleFileAttach,
handleFileUploadAndAttach,
- latestStats
+ latestStats,
+ // AI Provider selection (multiselect)
+ selectedProviders,
+ onProvidersChange: setSelectedProviders
};
}
-export function createDashboardHook() {
- return () => useDashboardInputForm();
+export function createDashboardHook(instanceId: string) {
+ return () => useDashboardInputForm(instanceId);
}
diff --git a/src/hooks/playground/useWorkflowLifecycle.ts b/src/hooks/playground/useWorkflowLifecycle.ts
index bc2dbc5..3fb301e 100644
--- a/src/hooks/playground/useWorkflowLifecycle.ts
+++ b/src/hooks/playground/useWorkflowLifecycle.ts
@@ -18,7 +18,54 @@ interface UnifiedChatDataItem {
createdAt: number;
}
-export function useWorkflowLifecycle() {
+/**
+ * =============================================================================
+ * WORKFLOW LIFECYCLE STATE MACHINE
+ * =============================================================================
+ *
+ * WORKFLOW STATUS (from Backend):
+ * • idle - No workflow
+ * • running - Workflow is processing
+ * • completed - Round finished (Backend processed "last" message)
+ * • stopped - User stopped the workflow
+ * • failed - Error occurred
+ *
+ * UI FLAG:
+ * • hasRenderedLastMessage: boolean
+ * - true: "last" message was rendered in UI
+ * - false: "last" message not yet in UI
+ *
+ * POLLING LOGIC:
+ * POLL ACTIVE when:
+ * status === 'running'
+ * OR (status === 'completed' AND !hasRenderedLastMessage)
+ *
+ * POLL STOPS when:
+ * status === 'stopped'
+ * OR status === 'failed'
+ * OR hasRenderedLastMessage === true
+ *
+ * TRANSITIONS:
+ * [Send Button] (from any status):
+ * → hasRenderedLastMessage = false (new round starts)
+ * → afterTimestamp = now
+ * → Start polling
+ *
+ * [Load Workflow]:
+ * → Load all data
+ * → Check if last message has status="last"
+ * → If yes: hasRenderedLastMessage = true, no polling
+ * → If no AND status=running: Start polling
+ *
+ * [Message with status="last" rendered]:
+ * → hasRenderedLastMessage = true
+ * → Stop polling
+ *
+ * =============================================================================
+ */
+
+export function useWorkflowLifecycle(instanceId: string) {
+ // === STATE ===
const [workflowId, setWorkflowId] = useState(null);
const [workflowStatus, setWorkflowStatus] = useState('idle');
const [currentRound, setCurrentRound] = useState(undefined);
@@ -26,48 +73,38 @@ export function useWorkflowLifecycle() {
const [logs, setLogs] = useState([]);
const [dashboardLogs, setDashboardLogs] = useState([]);
const [unifiedContentLogs, setUnifiedContentLogs] = useState([]);
- const [statusChangedFromRunningAt, setStatusChangedFromRunningAt] = useState(null);
const [latestStats, setLatestStats] = useState<{ priceUsd?: number; processingTime?: number; bytesSent?: number; bytesReceived?: number } | null>(null);
- const prevStatusRef = useRef('idle');
+
+ // === REFS FOR SYNC ACCESS ===
const statusRef = useRef('idle');
- const statusChangedFromRunningAtRef = useRef(null);
const lastRenderedTimestampRef = useRef(null);
- // Track processed stat IDs to avoid double-counting
const processedStatIdsRef = useRef>(new Set());
- // Track cumulative stats
const cumulativeStatsRef = useRef({ priceUsd: 0, processingTime: 0, bytesSent: 0, bytesReceived: 0 });
+
+ // === KEY STATE MACHINE FLAG ===
+ // This flag tracks if the UI has rendered a message with status="last"
+ // Polling continues until this is true (even if backend status is "completed")
+ const hasRenderedLastMessageRef = useRef(false);
+ const [hasRenderedLastMessage, setHasRenderedLastMessage] = useState(false);
+
+ // Flag to prevent useEffect from stopping polling during active workflow start
+ const isStartingWorkflowRef = useRef(false);
+
+ // === HOOKS ===
const { startWorkflow, stopWorkflow, startingWorkflow, stoppingWorkflows } = useWorkflowOperations();
const { request } = useApiRequest();
const pollingController = useWorkflowPolling();
-
- // Store polling controller methods in refs to avoid dependency issues
const pollingControllerRef = useRef(pollingController);
pollingControllerRef.current = pollingController;
-
- // Helper to update status and track transitions
+
+ // === HELPER: Update workflow status ===
const updateWorkflowStatus = useCallback((newStatus: string) => {
- const prevStatus = prevStatusRef.current;
- prevStatusRef.current = newStatus;
statusRef.current = newStatus;
setWorkflowStatus(newStatus);
-
- // Track when status changes from 'running' to something else
- if (prevStatus === 'running' && newStatus !== 'running') {
- const timestamp = Date.now();
- setStatusChangedFromRunningAt(timestamp);
- statusChangedFromRunningAtRef.current = timestamp;
- } else if (newStatus === 'running') {
- setStatusChangedFromRunningAt(null);
- statusChangedFromRunningAtRef.current = null;
- }
+ console.log('📍 Status updated to:', newStatus);
}, []);
-
- // Expose setWorkflowStatus for optimistic updates
- const setWorkflowStatusOptimistic = useCallback((status: string) => {
- updateWorkflowStatus(status);
- }, [updateWorkflowStatus]);
- // Convert backend log format to frontend format
+ // === HELPER: Convert backend log format to frontend format ===
const convertLogToFrontendFormat = useCallback((log: any): WorkflowLog => {
return {
id: log.id,
@@ -83,15 +120,15 @@ export function useWorkflowLifecycle() {
};
}, [workflowId]);
- // Process unified chat data chronologically
+ // === CORE: Process unified chat data ===
const processUnifiedChatData = useCallback((chatData: { messages: WorkflowMessage[]; logs: WorkflowLog[]; stats: any[] }) => {
- console.log('🔄 Processing unified chat data:', {
+ console.log('🔄 Processing chat data:', {
messages: chatData.messages?.length || 0,
logs: chatData.logs?.length || 0,
stats: chatData.stats?.length || 0
});
- // Build unified timeline of all items
+ // Build unified timeline
const timeline: UnifiedChatDataItem[] = [];
// Add messages
@@ -112,154 +149,132 @@ export function useWorkflowLifecycle() {
});
});
- // Add stats (if needed)
- (chatData.stats || []).forEach((stat: any) => {
+ // Add stats
+ const rawStats = chatData.stats || [];
+ rawStats.forEach((stat: any) => {
timeline.push({
type: 'stat',
item: stat,
- createdAt: stat.timestamp || stat.createdAt || Date.now()
+ createdAt: stat._createdAt || stat.createdAt || Date.now()
});
});
- console.log('📋 Timeline created with', timeline.length, 'items');
-
// Sort chronologically
timeline.sort((a, b) => a.createdAt - b.createdAt);
- // Process items sequentially to maintain chronological order
- // Update lastRenderedTimestamp after processing all items (use latest timestamp)
+ // Update lastRenderedTimestamp
if (timeline.length > 0) {
- const latestTimestamp = timeline[timeline.length - 1].createdAt;
- lastRenderedTimestampRef.current = latestTimestamp;
+ lastRenderedTimestampRef.current = timeline[timeline.length - 1].createdAt;
}
- // Use functional updates to avoid dependency on current state
+ // === CHECK FOR "LAST" MESSAGE ===
+ // This is the key state machine logic: detect when a "last" message arrives
+ let foundLastMessage = false;
+
+ timeline.forEach((item) => {
+ if (item.type === 'message') {
+ const message = item.item as WorkflowMessage;
+ if ((message as any).status === 'last') {
+ foundLastMessage = true;
+ console.log('🏁 Found "last" message:', message.id);
+ }
+ }
+ });
+
+ // === STATE MACHINE: Handle "last" message ===
+ if (foundLastMessage && !hasRenderedLastMessageRef.current) {
+ console.log('🛑 "last" message detected - stopping polling');
+ hasRenderedLastMessageRef.current = true;
+ setHasRenderedLastMessage(true);
+ pollingControllerRef.current.stopPolling();
+ }
+
+ // === UPDATE MESSAGES STATE ===
setMessages(prevMessages => {
const newMessages: WorkflowMessage[] = [...prevMessages];
let hasChanges = false;
- let messagesAdded = 0;
- let messagesUpdated = 0;
timeline.forEach((item) => {
if (item.type === 'message') {
const message = item.item as WorkflowMessage;
+ if (!message || !message.id) return;
- if (!message || !message.id) {
- console.warn('⚠️ Invalid message in timeline:', message);
- return;
- }
-
- // Check if message already exists
const existingIndex = newMessages.findIndex(m => m.id === message.id);
if (existingIndex >= 0) {
- // Always update existing message (don't compare, just update)
newMessages[existingIndex] = message;
hasChanges = true;
- messagesUpdated++;
} else {
newMessages.push(message);
hasChanges = true;
- messagesAdded++;
}
}
});
- console.log(`📨 Messages: ${messagesAdded} added, ${messagesUpdated} updated, total: ${newMessages.length}`);
- if (messagesAdded > 0 || messagesUpdated > 0) {
- console.log('📨 Sample messages:', newMessages.slice(0, 3).map(m => ({ id: m.id, message: m.message?.substring(0, 50) })));
- }
-
- // Always return sorted array if we processed any messages
if (hasChanges || timeline.some(item => item.type === 'message')) {
- const sorted = [...newMessages].sort(sortMessages);
- console.log(`✅ Returning ${sorted.length} sorted messages`);
- return sorted;
+ return [...newMessages].sort(sortMessages);
}
-
- console.log('⚠️ No changes detected, returning previous messages');
return prevMessages;
});
- setDashboardLogs(prevDashboardLogs => {
- const newDashboardLogs: WorkflowLog[] = [...prevDashboardLogs];
+ // === UPDATE DASHBOARD LOGS (with operationId) ===
+ setDashboardLogs(prevLogs => {
+ const newLogs: WorkflowLog[] = [...prevLogs];
let hasChanges = false;
timeline.forEach((item) => {
if (item.type === 'log') {
- const backendLog = item.item as any;
- const frontendLog = convertLogToFrontendFormat(backendLog);
-
- // Route logs based on operationId
+ const frontendLog = convertLogToFrontendFormat(item.item);
if (frontendLog.operationId) {
- // Logs WITH operationId → Dashboard
- const existingIndex = newDashboardLogs.findIndex(l => l.id === frontendLog.id);
+ const existingIndex = newLogs.findIndex(l => l.id === frontendLog.id);
if (existingIndex >= 0) {
- // Check if log actually changed
- const existingLog = newDashboardLogs[existingIndex];
- if (JSON.stringify(existingLog) !== JSON.stringify(frontendLog)) {
- newDashboardLogs[existingIndex] = frontendLog;
+ if (JSON.stringify(newLogs[existingIndex]) !== JSON.stringify(frontendLog)) {
+ newLogs[existingIndex] = frontendLog;
hasChanges = true;
}
} else {
- newDashboardLogs.push(frontendLog);
+ newLogs.push(frontendLog);
hasChanges = true;
}
}
}
});
- // Only return new array if there are changes
- if (!hasChanges) {
- return prevDashboardLogs;
- }
-
- return [...newDashboardLogs].sort(sortLogs);
+ return hasChanges ? [...newLogs].sort(sortLogs) : prevLogs;
});
- setUnifiedContentLogs(prevUnifiedContentLogs => {
- const newUnifiedContentLogs: WorkflowLog[] = [...prevUnifiedContentLogs];
+ // === UPDATE UNIFIED CONTENT LOGS (without operationId) ===
+ setUnifiedContentLogs(prevLogs => {
+ const newLogs: WorkflowLog[] = [...prevLogs];
let hasChanges = false;
timeline.forEach((item) => {
if (item.type === 'log') {
- const backendLog = item.item as any;
- const frontendLog = convertLogToFrontendFormat(backendLog);
-
- // Route logs based on operationId
+ const frontendLog = convertLogToFrontendFormat(item.item);
if (!frontendLog.operationId) {
- // Logs WITHOUT operationId → Unified Content Area
- const existingIndex = newUnifiedContentLogs.findIndex(l => l.id === frontendLog.id);
+ const existingIndex = newLogs.findIndex(l => l.id === frontendLog.id);
if (existingIndex >= 0) {
- // Check if log actually changed
- const existingLog = newUnifiedContentLogs[existingIndex];
- if (JSON.stringify(existingLog) !== JSON.stringify(frontendLog)) {
- newUnifiedContentLogs[existingIndex] = frontendLog;
+ if (JSON.stringify(newLogs[existingIndex]) !== JSON.stringify(frontendLog)) {
+ newLogs[existingIndex] = frontendLog;
hasChanges = true;
}
} else {
- newUnifiedContentLogs.push(frontendLog);
+ newLogs.push(frontendLog);
hasChanges = true;
}
}
}
});
- // Only return new array if there are changes
- if (!hasChanges) {
- return prevUnifiedContentLogs;
- }
-
- return [...newUnifiedContentLogs].sort(sortLogs);
+ return hasChanges ? [...newLogs].sort(sortLogs) : prevLogs;
});
- // Update combined logs for backward compatibility (using functional update)
+ // === UPDATE COMBINED LOGS ===
setLogs(prevLogs => {
const allLogs: WorkflowLog[] = [...prevLogs];
timeline.forEach((item) => {
if (item.type === 'log') {
- const backendLog = item.item as any;
- const frontendLog = convertLogToFrontendFormat(backendLog);
+ const frontendLog = convertLogToFrontendFormat(item.item);
const existingIndex = allLogs.findIndex(l => l.id === frontendLog.id);
if (existingIndex >= 0) {
allLogs[existingIndex] = frontendLog;
@@ -272,47 +287,36 @@ export function useWorkflowLifecycle() {
return [...allLogs].sort(sortLogs);
});
- // Process stats - aggregate only NEW stat entries (avoid double-counting)
+ // === PROCESS STATS ===
const statsItems = timeline.filter(item => item.type === 'stat');
+
if (statsItems.length > 0) {
let hasNewStats = false;
statsItems.forEach(statItem => {
- const statData = statItem.item || statItem;
- const statId = statData?.id || (statItem as any).id;
+ const statData = statItem.item;
+ const statId = statData?.id;
- // Skip if already processed
if (statId && processedStatIdsRef.current.has(statId)) {
- return;
+ return; // Skip already processed
}
if (statData) {
hasNewStats = true;
-
- // Mark as processed
if (statId) {
processedStatIdsRef.current.add(statId);
}
- // Add to cumulative stats
- if (statData.priceUsd !== undefined && statData.priceUsd !== null) {
- cumulativeStatsRef.current.priceUsd += statData.priceUsd;
- }
- if (statData.processingTime !== undefined && statData.processingTime !== null) {
- cumulativeStatsRef.current.processingTime += statData.processingTime;
- }
- if (statData.bytesSent !== undefined && statData.bytesSent !== null) {
- cumulativeStatsRef.current.bytesSent += statData.bytesSent;
- }
- if (statData.bytesReceived !== undefined && statData.bytesReceived !== null) {
- cumulativeStatsRef.current.bytesReceived += statData.bytesReceived;
- }
+ // Accumulate stats
+ const price = statData.priceCHF ?? statData.priceUsd ?? 0;
+ if (price > 0) cumulativeStatsRef.current.priceUsd += price;
+ if (statData.processingTime) cumulativeStatsRef.current.processingTime += statData.processingTime;
+ if (statData.bytesSent) cumulativeStatsRef.current.bytesSent += statData.bytesSent;
+ if (statData.bytesReceived) cumulativeStatsRef.current.bytesReceived += statData.bytesReceived;
}
});
- // Update state with cumulative totals
- if (hasNewStats || (cumulativeStatsRef.current.bytesSent > 0 || cumulativeStatsRef.current.bytesReceived > 0 ||
- cumulativeStatsRef.current.processingTime > 0 || cumulativeStatsRef.current.priceUsd > 0)) {
+ if (hasNewStats) {
setLatestStats({
priceUsd: cumulativeStatsRef.current.priceUsd,
processingTime: cumulativeStatsRef.current.processingTime,
@@ -323,10 +327,9 @@ export function useWorkflowLifecycle() {
}
}, [convertLogToFrontendFormat]);
- // Poll workflow data using unified chat data endpoint
+ // === POLLING FUNCTION ===
const pollWorkflowData = useCallback(async (id: string) => {
try {
- // Determine afterTimestamp for incremental polling
const afterTimestamp = lastRenderedTimestampRef.current || undefined;
// Fetch workflow status
@@ -334,213 +337,140 @@ export function useWorkflowLifecycle() {
if (workflowData) {
const status = workflowData.status || 'idle';
- const round = workflowData.currentRound !== undefined ? workflowData.currentRound : undefined;
+ const round = workflowData.currentRound;
updateWorkflowStatus(status);
- setCurrentRound(round);
+ if (round !== undefined) setCurrentRound(round);
+
+ // === STATE MACHINE: Check if polling should stop based on status ===
+ if (status === 'stopped' || status === 'failed') {
+ console.log(`🛑 Workflow ${status} - stopping polling immediately`);
+ pollingControllerRef.current.stopPolling();
+ return;
+ }
}
- // Fetch unified chat data
- const chatData = await fetchChatData(request, id, afterTimestamp);
+ // Fetch chat data
+ const chatData = await fetchChatData(request, instanceId, id, afterTimestamp);
- console.log('📊 Processed chat data:', {
- messagesCount: chatData.messages?.length || 0,
- logsCount: chatData.logs?.length || 0,
- statsCount: chatData.stats?.length || 0,
- afterTimestamp: afterTimestamp
+ console.log('📊 Polled chat data:', {
+ messages: chatData.messages?.length || 0,
+ logs: chatData.logs?.length || 0,
+ stats: chatData.stats?.length || 0,
+ afterTimestamp
});
- // If we got empty results and we're using afterTimestamp, the backend might be filtering incorrectly
- // Reset timestamp to null so next poll fetches all items (but only if we have existing data)
- const hasNoNewData = (chatData.messages?.length || 0) === 0 &&
- (chatData.logs?.length || 0) === 0 &&
- (chatData.stats?.length || 0) === 0;
-
- // Only reset if we're using afterTimestamp and got empty results
- // This handles cases where backend filtering might miss items due to timestamp precision issues
- if (hasNoNewData && afterTimestamp !== undefined && lastRenderedTimestampRef.current !== null) {
- console.warn('⚠️ Got empty results with afterTimestamp, resetting timestamp for next poll');
- // Don't reset immediately - let this poll complete, next poll will fetch all
- lastRenderedTimestampRef.current = null;
- }
-
- // Process unified chat data
+ // Process data (this will detect "last" message and stop polling if found)
processUnifiedChatData(chatData);
-
- // Determine if polling should continue
- const currentStatus = statusRef.current;
- // Stop polling immediately for failed or stopped workflows
- // For completed workflows, allow grace period (handled by useEffect)
- if (currentStatus === 'failed' || currentStatus === 'stopped') {
- pollingControllerRef.current.stopPolling();
- return;
- }
-
- // Continue polling for 'running' status
- // For 'completed' status, continue if within grace period (handled by useEffect)
- // Polling will be stopped by the useEffect when grace period expires or status changes to failed/stopped
- } catch (error: any) {
- // Handle rate limiting (429 errors)
- if (error?.status === 429 || error?.response?.status === 429) {
- throw error; // Let polling controller handle rate limit backoff
- }
- console.error('Error polling workflow data:', error);
- // Don't throw for other errors - allow polling to continue with backoff
- }
- }, [request, updateWorkflowStatus, processUnifiedChatData]);
-
- // Load initial workflow data (non-polling)
- const _loadWorkflowData = useCallback(async (id: string) => {
- try {
- const workflowData = await fetchWorkflowApi(request, id).catch(() => null);
-
- if (!workflowData) {
- setMessages([]);
- setLogs([]);
- setDashboardLogs([]);
- setUnifiedContentLogs([]);
- setLatestStats(null);
- // Reset stats tracking
- processedStatIdsRef.current.clear();
- cumulativeStatsRef.current = { priceUsd: 0, processingTime: 0, bytesSent: 0, bytesReceived: 0 };
- return;
- }
-
- const messagesData = Array.isArray(workflowData.messages) ? workflowData.messages : [];
- const logsData = Array.isArray(workflowData.logs) ? workflowData.logs : [];
- const status = workflowData.status || 'idle';
- const round = workflowData.currentRound !== undefined ? workflowData.currentRound : undefined;
-
- updateWorkflowStatus(status);
- setCurrentRound(round);
-
- // Always fetch unified chat data to get all messages and logs
- // Reset lastRenderedTimestamp to fetch all historical data
- lastRenderedTimestampRef.current = null;
- try {
- const chatData = await fetchChatData(request, id, undefined);
- console.log('📥 loadWorkflowData: Fetched unified chat data:', {
- messagesCount: chatData.messages?.length || 0,
- logsCount: chatData.logs?.length || 0
- });
- processUnifiedChatData(chatData);
- } catch (error) {
- console.warn('⚠️ Failed to fetch unified chat data, falling back to workflowData:', error);
- // Fallback to workflowData if unified chat data fails
- if (messagesData.length > 0) {
- setMessages([...messagesData].sort(sortMessages));
- }
-
- // Process logs and separate by operationId
- const dashboardLogsList: WorkflowLog[] = [];
- const unifiedContentLogsList: WorkflowLog[] = [];
-
- logsData.forEach((log: any) => {
- const frontendLog = convertLogToFrontendFormat(log);
- if (frontendLog.operationId) {
- dashboardLogsList.push(frontendLog);
- } else {
- unifiedContentLogsList.push(frontendLog);
- }
- });
-
- setDashboardLogs(dashboardLogsList.sort(sortLogs));
- setUnifiedContentLogs(unifiedContentLogsList.sort(sortLogs));
- setLogs([...dashboardLogsList, ...unifiedContentLogsList].sort(sortLogs));
- }
} catch (error) {
- console.error('Error loading workflow data:', error);
+ console.error('❌ Polling error:', error);
}
- }, [request, updateWorkflowStatus, convertLogToFrontendFormat, processUnifiedChatData]);
- void _loadWorkflowData; // Intentionally unused, reserved for future use
+ }, [request, instanceId, updateWorkflowStatus, processUnifiedChatData]);
- // Set up polling when workflow is running
+ // === POLLING CONTROL EFFECT ===
useEffect(() => {
if (!workflowId) {
- // Only clear state if not already cleared to avoid unnecessary updates
- setMessages(prev => prev.length > 0 ? [] : prev);
- setLogs(prev => prev.length > 0 ? [] : prev);
- setDashboardLogs(prev => prev.length > 0 ? [] : prev);
- setUnifiedContentLogs(prev => prev.length > 0 ? [] : prev);
- setLatestStats(null);
- // Reset stats tracking
- processedStatIdsRef.current.clear();
- cumulativeStatsRef.current = { priceUsd: 0, processingTime: 0, bytesSent: 0, bytesReceived: 0 };
- setCurrentRound(prev => prev !== undefined ? undefined : prev);
- if (statusChangedFromRunningAt !== null) {
- setStatusChangedFromRunningAt(null);
- statusChangedFromRunningAtRef.current = null;
- }
- lastRenderedTimestampRef.current = null;
pollingControllerRef.current.stopPolling();
return;
}
- // Continue polling if:
- // 1. Workflow is currently running, OR
- // 2. Workflow just completed (within last 10 seconds) - grace period to catch final messages
- // Stop polling for failed or stopped workflows immediately
- // Use ref for statusChangedFromRunningAt to get latest value (state updates are async)
- const changedAtRef = statusChangedFromRunningAtRef.current;
- const shouldPoll = workflowStatus === 'running' ||
- (workflowStatus === 'completed' && changedAtRef !== null && Date.now() - changedAtRef < 10000);
+ // Skip if we're actively starting a workflow - handleStartWorkflow manages polling
+ if (isStartingWorkflowRef.current) {
+ console.log('📍 Polling decision: Skipping - workflow start in progress');
+ return;
+ }
+
+ // === STATE MACHINE: Determine if polling should be active ===
+ // Use ref for immediate value (state may be stale)
+ const hasLastMessage = hasRenderedLastMessageRef.current;
+
+ const shouldPoll =
+ workflowStatus === 'running' ||
+ (workflowStatus === 'completed' && !hasLastMessage);
+
+ const shouldStopImmediately =
+ workflowStatus === 'stopped' ||
+ workflowStatus === 'failed' ||
+ hasLastMessage;
+
+ console.log('📍 Polling decision:', {
+ workflowStatus,
+ hasRenderedLastMessage: hasLastMessage,
+ shouldPoll,
+ shouldStopImmediately
+ });
if (shouldPoll) {
- // Reset lastRenderedTimestamp for first poll (fetch all historical data)
- if (lastRenderedTimestampRef.current === null) {
- lastRenderedTimestampRef.current = null; // null means fetch all
- }
-
- // Start polling
pollingControllerRef.current.startPolling(workflowId, pollWorkflowData);
- } else {
- // Stop polling for failed, stopped, or completed (after grace period) workflows
+ } else if (shouldStopImmediately) {
pollingControllerRef.current.stopPolling();
- // Clear the status change timestamp when we stop polling (only if not already null)
- if (statusChangedFromRunningAt !== null) {
- setStatusChangedFromRunningAt(null);
- statusChangedFromRunningAtRef.current = null;
- }
}
return () => {
pollingControllerRef.current.stopPolling();
};
- }, [workflowStatus, workflowId, pollWorkflowData]);
-
+ }, [workflowStatus, workflowId, hasRenderedLastMessage, pollWorkflowData]);
+
+ // === START WORKFLOW (Send Button) ===
const handleStartWorkflow = useCallback(async (
workflowData: StartWorkflowRequest,
options?: { workflowId?: string; workflowMode?: 'Dynamic' | 'Automation' }
) => {
try {
- const result = await startWorkflow(workflowData, options);
+ // Set flag to prevent useEffect from interfering during start
+ isStartingWorkflowRef.current = true;
+
+ const result = await startWorkflow(instanceId, workflowData, options);
if (result.success && result.data) {
const workflow = result.data as Workflow;
+
+ // === STATE MACHINE: New round starts ===
+ console.log('🚀 Starting workflow:', workflow.id);
+
+ // Reset state for new round - MUST update refs BEFORE state
+ hasRenderedLastMessageRef.current = false;
+
+ // Set afterTimestamp to NOW - only poll for new data
+ lastRenderedTimestampRef.current = Date.now();
+
+ // Start polling immediately (before state updates trigger useEffect)
+ pollingControllerRef.current.startPolling(workflow.id, pollWorkflowData);
+
+ // Now update state (will trigger re-renders)
setWorkflowId(workflow.id);
+ setHasRenderedLastMessage(false);
updateWorkflowStatus(workflow.status || 'running');
- // Reset lastRenderedTimestamp for new workflow
- lastRenderedTimestampRef.current = null;
+
+ // Clear the starting flag after a short delay to allow React to settle
+ setTimeout(() => {
+ isStartingWorkflowRef.current = false;
+ }, 100);
+
return { success: true, data: result.data };
} else {
+ isStartingWorkflowRef.current = false;
return { success: false, error: result.error || 'Failed to start workflow' };
}
} catch (error: any) {
+ isStartingWorkflowRef.current = false;
return { success: false, error: error.message || 'Failed to start workflow' };
}
- }, [startWorkflow, updateWorkflowStatus]);
-
+ }, [instanceId, startWorkflow, updateWorkflowStatus, pollWorkflowData]);
+
+ // === STOP WORKFLOW ===
const handleStopWorkflow = useCallback(async () => {
if (!workflowId) {
return { success: false, error: 'No workflow to stop' };
}
try {
- const result = await stopWorkflow(workflowId);
+ const result = await stopWorkflow(instanceId, workflowId);
if (result.success) {
updateWorkflowStatus('stopped');
+ pollingControllerRef.current.stopPolling();
return { success: true };
} else {
return { success: false, error: result.error || 'Failed to stop workflow' };
@@ -548,32 +478,45 @@ export function useWorkflowLifecycle() {
} catch (error: any) {
return { success: false, error: error.message || 'Failed to stop workflow' };
}
- }, [workflowId, stopWorkflow, updateWorkflowStatus]);
-
+ }, [instanceId, workflowId, stopWorkflow, updateWorkflowStatus]);
+
+ // === RESET WORKFLOW ===
const resetWorkflow = useCallback(() => {
+ console.log('🔄 Resetting workflow state');
+
setWorkflowId(null);
- prevStatusRef.current = 'idle';
- statusRef.current = 'idle';
updateWorkflowStatus('idle');
setCurrentRound(undefined);
+ setMessages([]);
+ setLogs([]);
+ setDashboardLogs([]);
+ setUnifiedContentLogs([]);
setLatestStats(null);
- // Reset stats tracking
+
+ // Reset refs
+ lastRenderedTimestampRef.current = null;
processedStatIdsRef.current.clear();
cumulativeStatsRef.current = { priceUsd: 0, processingTime: 0, bytesSent: 0, bytesReceived: 0 };
- setStatusChangedFromRunningAt(null);
- statusChangedFromRunningAtRef.current = null;
- lastRenderedTimestampRef.current = null;
+ hasRenderedLastMessageRef.current = false;
+ setHasRenderedLastMessage(false);
+
pollingControllerRef.current.stopPolling();
}, [updateWorkflowStatus]);
-
+
+ // === SELECT/LOAD WORKFLOW ===
const selectWorkflow = useCallback(async (workflowIdToSelect: string) => {
try {
+ console.log('📥 Loading workflow:', workflowIdToSelect);
+
+ // Reset state
setWorkflowId(workflowIdToSelect);
- // Reset lastRenderedTimestamp and stats for new workflow selection
lastRenderedTimestampRef.current = null;
processedStatIdsRef.current.clear();
cumulativeStatsRef.current = { priceUsd: 0, processingTime: 0, bytesSent: 0, bytesReceived: 0 };
+ hasRenderedLastMessageRef.current = false;
+ setHasRenderedLastMessage(false);
+ // Fetch workflow data
const workflowData = await fetchWorkflowApi(request, workflowIdToSelect).catch(() => null);
if (!workflowData) {
@@ -586,58 +529,66 @@ export function useWorkflowLifecycle() {
return;
}
- const messagesData = Array.isArray(workflowData.messages) ? workflowData.messages : [];
- const logsData = Array.isArray(workflowData.logs) ? workflowData.logs : [];
const status = workflowData.status || 'idle';
- const round = workflowData.currentRound !== undefined ? workflowData.currentRound : undefined;
+ const round = workflowData.currentRound;
updateWorkflowStatus(status);
- setCurrentRound(round);
+ if (round !== undefined) setCurrentRound(round);
- // Always fetch unified chat data to get all messages and logs (regardless of status)
- // This ensures completed workflows also show their logs
+ // Fetch all chat data (no afterTimestamp = get everything)
try {
- const chatData = await fetchChatData(request, workflowIdToSelect, undefined);
- console.log('📥 selectWorkflow: Fetched unified chat data:', {
- messagesCount: chatData.messages?.length || 0,
- logsCount: chatData.logs?.length || 0,
- status
+ const chatData = await fetchChatData(request, instanceId, workflowIdToSelect, undefined);
+ console.log('📥 Loaded chat data:', {
+ messages: chatData.messages?.length || 0,
+ logs: chatData.logs?.length || 0,
+ stats: chatData.stats?.length || 0
});
- processUnifiedChatData(chatData);
- } catch (error) {
- console.warn('⚠️ Failed to fetch unified chat data, falling back to workflowData:', error);
- // Fallback to workflowData if unified chat data fails
- if (messagesData.length > 0) {
- setMessages([...messagesData].sort(sortMessages));
+
+ // === STATE MACHINE: Check if last message has status="last" ===
+ const allMessages = chatData.messages || [];
+ const sortedMessages = [...allMessages].sort((a, b) => {
+ const aTime = a.publishedAt || a.timestamp || 0;
+ const bTime = b.publishedAt || b.timestamp || 0;
+ return bTime - aTime; // Sort descending (newest first)
+ });
+
+ const lastMessage = sortedMessages[0];
+ const lastMessageStatus = lastMessage ? (lastMessage as any).status : null;
+
+ console.log('📍 Last message status:', lastMessageStatus);
+
+ if (lastMessageStatus === 'last') {
+ // Round is complete - don't start polling
+ hasRenderedLastMessageRef.current = true;
+ setHasRenderedLastMessage(true);
+ console.log('✅ Workflow round complete - no polling needed');
+ } else if (status === 'running') {
+ // Workflow is running - polling will start via useEffect
+ console.log('🔄 Workflow is running - polling will start');
}
- // Process logs and separate by operationId
- const dashboardLogsList: WorkflowLog[] = [];
- const unifiedContentLogsList: WorkflowLog[] = [];
+ // Process the data
+ processUnifiedChatData(chatData);
- logsData.forEach((log: any) => {
- const frontendLog = convertLogToFrontendFormat(log);
- if (frontendLog.operationId) {
- dashboardLogsList.push(frontendLog);
- } else {
- unifiedContentLogsList.push(frontendLog);
- }
- });
-
- setDashboardLogs(dashboardLogsList.sort(sortLogs));
- setUnifiedContentLogs(unifiedContentLogsList.sort(sortLogs));
- setLogs([...dashboardLogsList, ...unifiedContentLogsList].sort(sortLogs));
+ } catch (error) {
+ console.warn('⚠️ Failed to fetch chat data:', error);
+ updateWorkflowStatus('idle');
}
- // If workflow is running, polling will start automatically via useEffect
} catch (error) {
- console.error('Error selecting workflow:', error);
+ console.error('❌ Error selecting workflow:', error);
}
- }, [request, updateWorkflowStatus, convertLogToFrontendFormat, processUnifiedChatData]);
-
+ }, [request, instanceId, updateWorkflowStatus, processUnifiedChatData]);
+
+ // === EXPOSE STATUS SETTER FOR OPTIMISTIC UPDATES ===
+ const setWorkflowStatusOptimistic = useCallback((status: string) => {
+ updateWorkflowStatus(status);
+ }, [updateWorkflowStatus]);
+
+ // === COMPUTED VALUES ===
const isRunning = workflowStatus === 'running';
const isStopping = workflowId ? stoppingWorkflows.has(workflowId) : false;
-
+
return {
workflowId,
workflowStatus,
@@ -650,6 +601,7 @@ export function useWorkflowLifecycle() {
dashboardLogs,
unifiedContentLogs,
latestStats,
+ hasRenderedLastMessage,
startWorkflow: handleStartWorkflow,
stopWorkflow: handleStopWorkflow,
resetWorkflow,
diff --git a/src/hooks/useAutomations.ts b/src/hooks/useAutomations.ts
index 4893fea..1120885 100644
--- a/src/hooks/useAutomations.ts
+++ b/src/hooks/useAutomations.ts
@@ -104,7 +104,7 @@ export function useAutomations() {
// Fetch permissions from backend
const fetchPermissions = useCallback(async () => {
try {
- const perms = await checkPermission('DATA', 'AutomationDefinition');
+ const perms = await checkPermission('DATA', 'data.automation.AutomationDefinition');
setPermissions(perms);
return perms;
} catch (error: any) {
@@ -507,7 +507,7 @@ export function useAutomationTemplates() {
const fetchPermissions = useCallback(async () => {
try {
- const perms = await checkPermission('DATA', 'AutomationTemplate');
+ const perms = await checkPermission('DATA', 'data.automation.AutomationTemplate');
setPermissions(perms);
return perms;
} catch (e: any) {
diff --git a/src/hooks/useBilling.ts b/src/hooks/useBilling.ts
new file mode 100644
index 0000000..8b79f77
--- /dev/null
+++ b/src/hooks/useBilling.ts
@@ -0,0 +1,289 @@
+/**
+ * useBilling Hook
+ *
+ * Hook für die Verwaltung von Billing-Daten.
+ * Bietet Zugriff auf Guthaben, Transaktionen, Statistiken und Admin-Funktionen.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { useApiRequest } from './useApi';
+import {
+ fetchBalances,
+ fetchBalanceForMandate,
+ fetchTransactions,
+ fetchStatistics,
+ fetchAllowedProviders,
+ fetchSettingsAdmin,
+ updateSettingsAdmin,
+ addCreditAdmin,
+ fetchAccountsAdmin,
+ fetchTransactionsAdmin,
+ fetchUsersForMandateAdmin,
+ type BillingBalance,
+ type BillingTransaction,
+ type BillingSettings,
+ type BillingSettingsUpdate,
+ type UsageReport,
+ type AccountSummary,
+ type CreditAddRequest,
+ type MandateUserSummary,
+} from '../api/billingApi';
+
+// Re-export types
+export type {
+ BillingBalance,
+ BillingTransaction,
+ BillingSettings,
+ BillingSettingsUpdate,
+ UsageReport,
+ AccountSummary,
+ CreditAddRequest,
+ MandateUserSummary,
+};
+
+export type { BillingModel, TransactionType, ReferenceType } from '../api/billingApi';
+
+/**
+ * Hook for user billing operations
+ */
+export function useBilling() {
+ const [balances, setBalances] = useState([]);
+ const [transactions, setTransactions] = useState([]);
+ const [statistics, setStatistics] = useState(null);
+ const [allowedProviders, setAllowedProviders] = useState([]);
+ const { request, isLoading: loading, error } = useApiRequest();
+
+ // Fetch all balances for the user
+ const loadBalances = useCallback(async () => {
+ try {
+ const data = await fetchBalances(request);
+ setBalances(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading balances:', err);
+ setBalances([]);
+ return [];
+ }
+ }, [request]);
+
+ // Fetch balance for a specific mandate
+ const loadBalanceForMandate = useCallback(async (mandateId: string) => {
+ try {
+ return await fetchBalanceForMandate(request, mandateId);
+ } catch (err) {
+ console.error('Error loading balance for mandate:', err);
+ return null;
+ }
+ }, [request]);
+
+ // Fetch transactions
+ const loadTransactions = useCallback(async (limit: number = 50, offset: number = 0) => {
+ try {
+ const data = await fetchTransactions(request, limit, offset);
+ setTransactions(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading transactions:', err);
+ setTransactions([]);
+ return [];
+ }
+ }, [request]);
+
+ // Fetch statistics
+ const loadStatistics = useCallback(async (
+ period: 'day' | 'month' | 'year',
+ year: number,
+ month?: number
+ ) => {
+ try {
+ const data = await fetchStatistics(request, period, year, month);
+ setStatistics(data);
+ return data;
+ } catch (err) {
+ console.error('Error loading statistics:', err);
+ setStatistics(null);
+ return null;
+ }
+ }, [request]);
+
+ // Fetch allowed providers
+ const loadAllowedProviders = useCallback(async () => {
+ try {
+ const data = await fetchAllowedProviders(request);
+ setAllowedProviders(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading allowed providers:', err);
+ setAllowedProviders([]);
+ return [];
+ }
+ }, [request]);
+
+ // Initial load
+ useEffect(() => {
+ loadBalances();
+ loadAllowedProviders();
+ }, []);
+
+ return {
+ balances,
+ transactions,
+ statistics,
+ allowedProviders,
+ loading,
+ error,
+ loadBalances,
+ loadBalanceForMandate,
+ loadTransactions,
+ loadStatistics,
+ loadAllowedProviders,
+ refetch: loadBalances,
+ };
+}
+
+/**
+ * Hook for admin billing operations
+ */
+export function useBillingAdmin(mandateId?: string) {
+ const [settings, setSettings] = useState(null);
+ const [accounts, setAccounts] = useState([]);
+ const [transactions, setTransactions] = useState([]);
+ const [users, setUsers] = useState([]);
+ const { request, isLoading: loading, error } = useApiRequest();
+
+ // Fetch settings for a mandate
+ const loadSettings = useCallback(async (targetMandateId?: string) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return null;
+
+ try {
+ const data = await fetchSettingsAdmin(request, mId);
+ setSettings(data);
+ return data;
+ } catch (err) {
+ console.error('Error loading billing settings:', err);
+ setSettings(null);
+ return null;
+ }
+ }, [request, mandateId]);
+
+ // Update settings
+ const saveSettings = useCallback(async (
+ settingsUpdate: BillingSettingsUpdate,
+ targetMandateId?: string
+ ) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return null;
+
+ try {
+ const data = await updateSettingsAdmin(request, mId, settingsUpdate);
+ setSettings(data);
+ return data;
+ } catch (err) {
+ console.error('Error saving billing settings:', err);
+ throw err;
+ }
+ }, [request, mandateId]);
+
+ // Add credit
+ const addCredit = useCallback(async (
+ creditRequest: CreditAddRequest,
+ targetMandateId?: string
+ ) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return null;
+
+ try {
+ const result = await addCreditAdmin(request, mId, creditRequest);
+ // Reload accounts after adding credit
+ await loadAccounts(mId);
+ return result;
+ } catch (err) {
+ console.error('Error adding credit:', err);
+ throw err;
+ }
+ }, [request, mandateId]);
+
+ // Fetch accounts for a mandate
+ const loadAccounts = useCallback(async (targetMandateId?: string) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return [];
+
+ try {
+ const data = await fetchAccountsAdmin(request, mId);
+ setAccounts(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading accounts:', err);
+ setAccounts([]);
+ return [];
+ }
+ }, [request, mandateId]);
+
+ // Fetch transactions for a mandate
+ const loadTransactions = useCallback(async (targetMandateId?: string, limit: number = 100) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return [];
+
+ try {
+ const data = await fetchTransactionsAdmin(request, mId, limit);
+ setTransactions(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading transactions:', err);
+ setTransactions([]);
+ return [];
+ }
+ }, [request, mandateId]);
+
+ // Fetch users for a mandate
+ const loadUsers = useCallback(async (targetMandateId?: string) => {
+ const mId = targetMandateId || mandateId;
+ if (!mId) return [];
+
+ try {
+ const data = await fetchUsersForMandateAdmin(request, mId);
+ setUsers(Array.isArray(data) ? data : []);
+ return data;
+ } catch (err) {
+ console.error('Error loading users:', err);
+ setUsers([]);
+ return [];
+ }
+ }, [request, mandateId]);
+
+ // Load data when mandateId changes
+ useEffect(() => {
+ if (mandateId) {
+ loadSettings();
+ loadAccounts();
+ loadTransactions();
+ loadUsers();
+ }
+ }, [mandateId]);
+
+ return {
+ settings,
+ accounts,
+ transactions,
+ users,
+ loading,
+ error,
+ loadSettings,
+ saveSettings,
+ addCredit,
+ loadAccounts,
+ loadTransactions,
+ loadUsers,
+ refetch: () => {
+ if (mandateId) {
+ loadSettings();
+ loadAccounts();
+ loadTransactions();
+ loadUsers();
+ }
+ },
+ };
+}
+
+export default useBilling;
diff --git a/src/hooks/useChatbot.ts b/src/hooks/useChatbot.ts
index c4db9f8..6fb79c0 100644
--- a/src/hooks/useChatbot.ts
+++ b/src/hooks/useChatbot.ts
@@ -256,26 +256,12 @@ export function useChatbot(): ChatbotHookReturn {
return prev;
}
- // For user messages, check if we already have a temporary one with same content
- // Only replace if it's the temporary message we just created (by ID match)
- if (message.role === 'user' && message.message === inputMessageContent) {
- // Check if we have the exact temporary message we created
- const hasTempMessage = prev.some(m => m.id === tempUserMessageId);
- if (hasTempMessage) {
- // Replace the temporary message with the real one from backend
- return prev.map(m =>
- m.id === tempUserMessageId ? message : m
- );
- }
- // If no temp message found, check if this is a duplicate of an existing real message
- const isDuplicate = prev.some(m =>
- m.role === 'user' &&
- m.message === inputMessageContent &&
- !m.id.startsWith('temp-')
+ // Backend sends the "first" message with the transformed/normalized user prompt
+ // Replace the temporary optimistic message with it
+ if (message.status === 'first') {
+ return prev.map(m =>
+ m.id === tempUserMessageId ? message : m
);
- if (isDuplicate) {
- return prev; // Don't add duplicate
- }
}
// For other messages, check for duplicates by role and content (more lenient check)
diff --git a/src/hooks/useInvitations.ts b/src/hooks/useInvitations.ts
index bd2514b..e8dbd79 100644
--- a/src/hooks/useInvitations.ts
+++ b/src/hooks/useInvitations.ts
@@ -51,6 +51,7 @@ export interface InvitationCreate {
email?: string;
roleIds: string[];
featureInstanceId?: string;
+ frontendUrl?: string;
expiresInHours?: number;
maxUses?: number;
}
@@ -117,6 +118,7 @@ export function useInvitations() {
try {
const params = new URLSearchParams();
+ params.append('frontendUrl', window.location.origin);
if (fetchOptions?.includeUsed) params.append('includeUsed', 'true');
if (fetchOptions?.includeExpired) params.append('includeExpired', 'true');
if (Object.keys(paginationParams).length > 0) {
@@ -160,7 +162,11 @@ export function useInvitations() {
setLoading(true);
setError(null);
try {
- const response = await api.post('/api/invitations/', data, {
+ const payload = {
+ ...data,
+ frontendUrl: data.frontendUrl || window.location.origin,
+ };
+ const response = await api.post('/api/invitations/', payload, {
headers: { 'X-Mandate-Id': mandateId }
});
return { success: true, data: response.data };
diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts
index 6d0cabb..3818047 100644
--- a/src/hooks/usePrompts.ts
+++ b/src/hooks/usePrompts.ts
@@ -524,15 +524,12 @@ export function usePromptOperations() {
}
};
- const handlePromptUpdate = async (promptId: string, updateData: { name: string; content: string }, _originalData?: any) => {
+ const handlePromptUpdate = async (promptId: string, updateData: Record, _originalData?: any) => {
setUpdateError(null);
try {
- // mandateId wird nicht mehr vom Client gesendet
- const requestBody = {
- name: updateData.name,
- content: updateData.content
- };
+ // Pass all provided fields (supports partial inline updates like isSystem toggle)
+ const { id, mandateId, _createdBy, _createdAt, _modifiedAt, _permissions, ...requestBody } = updateData;
const updatedPrompt = await updatePromptApi(request, promptId, requestBody);
@@ -555,8 +552,8 @@ export function usePromptOperations() {
};
// Generic inline update handler for FormGeneratorTable
- const handleInlineUpdate = async (promptId: string, changes: Partial<{ name: string; content: string }>) => {
- const result = await handlePromptUpdate(promptId, changes as { name: string; content: string });
+ const handleInlineUpdate = async (promptId: string, changes: Record) => {
+ const result = await handlePromptUpdate(promptId, changes);
if (!result.success) {
throw new Error(result.error || 'Failed to update');
}
diff --git a/src/hooks/useUserMandates.ts b/src/hooks/useUserMandates.ts
index 61758dd..f52b6f3 100644
--- a/src/hooks/useUserMandates.ts
+++ b/src/hooks/useUserMandates.ts
@@ -60,8 +60,10 @@ export interface Role {
export interface Mandate {
id: string;
name: string | { [key: string]: string };
+ label?: string;
code?: string;
language?: string;
+ isSystem?: boolean;
}
/**
@@ -226,7 +228,10 @@ export function useUserMandates() {
}, []);
/**
- * Fetch all available roles (global and mandate-specific)
+ * Fetch available roles for a mandate (mandate-instance roles only).
+ * Each mandate has its own instances of system roles (admin, user, viewer)
+ * copied from templates during mandate creation. Only these mandate-bound
+ * roles should be offered for user assignment - NOT global templates.
*/
const fetchRoles = useCallback(async (mandateId?: string): Promise => {
try {
@@ -238,13 +243,15 @@ export function useUserMandates() {
roles = response.data;
}
- // Filter to global roles and roles for this mandate
+ // Only mandate-instance roles (mandateId matches, no featureInstanceId)
+ // Global templates (mandateId=null) are NOT assignable to users
if (mandateId) {
return roles.filter(r =>
- !r.mandateId || r.mandateId === mandateId
+ !r.featureInstanceId && r.mandateId === mandateId
);
}
- return roles;
+ // Without mandateId, no roles available (roles are always mandate-specific)
+ return [];
} catch (err: any) {
console.error('Error fetching roles:', err);
return [];
diff --git a/src/hooks/useWorkflows.ts b/src/hooks/useWorkflows.ts
index 942d1e5..79c12cc 100644
--- a/src/hooks/useWorkflows.ts
+++ b/src/hooks/useWorkflows.ts
@@ -432,6 +432,7 @@ export function useWorkflowOperations() {
};
const startWorkflow = async (
+ instanceId: string,
workflowData: StartWorkflowRequest,
options?: { workflowId?: string; workflowMode?: 'Dynamic' | 'Automation' }
) => {
@@ -439,7 +440,7 @@ export function useWorkflowOperations() {
setStartingWorkflow(true);
try {
- const response = await startWorkflowApi(request, workflowData, options);
+ const response = await startWorkflowApi(request, instanceId, workflowData, options);
return { success: true, data: response };
} catch (error: any) {
const errorMessage = error.message || 'Failed to start workflow';
@@ -450,12 +451,12 @@ export function useWorkflowOperations() {
}
};
- const stopWorkflow = async (workflowId: string) => {
+ const stopWorkflow = async (instanceId: string, workflowId: string) => {
setStopError(null);
setStoppingWorkflows(prev => new Set(prev).add(workflowId));
try {
- await stopWorkflowApi(request, workflowId);
+ await stopWorkflowApi(request, instanceId, workflowId);
return { success: true };
} catch (error: any) {
const errorMessage = error.message || 'Failed to stop workflow';
diff --git a/src/layouts/FeatureLayout.module.css b/src/layouts/FeatureLayout.module.css
index 5cce883..aeca795 100644
--- a/src/layouts/FeatureLayout.module.css
+++ b/src/layouts/FeatureLayout.module.css
@@ -138,8 +138,12 @@
/* Feature Content */
.featureContent {
flex: 1;
- overflow: auto;
+ /* Let child components handle their own scrolling for sticky headers */
+ overflow: hidden;
padding: 1.5rem;
+ /* Maintain flex chain for child components */
+ display: flex;
+ flex-direction: column;
}
/* Dark Theme */
diff --git a/src/layouts/MainLayout.module.css b/src/layouts/MainLayout.module.css
index f245160..ac71c8b 100644
--- a/src/layouts/MainLayout.module.css
+++ b/src/layouts/MainLayout.module.css
@@ -81,7 +81,8 @@
/* Content */
.content {
flex: 1;
- overflow: auto;
+ /* Let child components handle their own scrolling for sticky headers */
+ overflow: hidden;
background: var(--bg-primary, #ffffff);
}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a94a979..686d86f 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -3,55 +3,44 @@
*
* System-Übersicht für den User.
* Zeigt alle verfügbaren Feature-Instanzen als Karten an.
+ * Daten kommen vom Backend via GET /api/navigation.
*/
import React from 'react';
import { Link } from 'react-router-dom';
-import { useMandates, useFeatureStore } from '../stores/featureStore';
-import { getLabel, FEATURE_REGISTRY } from '../types/mandate';
-import type { FeatureInstance } from '../types/mandate';
-import { FaBriefcase, FaRobot, FaPlay, FaArrowRight } from 'react-icons/fa';
+import useNavigation from '../hooks/useNavigation';
+import type { NavigationMandate, MandateFeature, FeatureInstance as NavFeatureInstance } from '../hooks/useNavigation';
+import { getPageIcon } from '../config/pageRegistry';
+import { FaArrowRight } from 'react-icons/fa';
import styles from './Dashboard.module.css';
-// =============================================================================
-// FEATURE ICONS
-// =============================================================================
-
-const FEATURE_ICONS: Record = {
- trustee: ,
- chatbot: ,
- chatworkflow: ,
-};
-
// =============================================================================
// INSTANCE CARD
// =============================================================================
interface InstanceCardProps {
- instance: FeatureInstance;
- featureLabel: string;
+ instance: NavFeatureInstance;
+ feature: MandateFeature;
+ mandateLabel: string;
}
-const InstanceCard: React.FC = ({ instance, featureLabel }) => {
- const basePath = `/mandates/${instance.mandateId}/${instance.featureCode}/${instance.id}`;
-
- // Ersten verfügbaren View finden
- const featureConfig = FEATURE_REGISTRY[instance.featureCode];
- const firstView = featureConfig?.views?.[0];
- const targetPath = firstView ? `${basePath}/${firstView.path}` : basePath;
-
+const InstanceCard: React.FC = ({ instance, feature, mandateLabel }) => {
+ // Ersten verfügbaren View-Pfad vom Backend nehmen
+ const targetPath = instance.views.length > 0 ? instance.views[0].uiPath : undefined;
+
+ if (!targetPath) return null;
+
return (
- {FEATURE_ICONS[instance.featureCode] || }
+ {getPageIcon(feature.uiComponent)}
- {featureLabel}
- {instance.userRoles?.join(', ') || '-'}
+ {feature.uiLabel}
-
{instance.instanceLabel}
-
{instance.mandateName}
+
{instance.uiLabel}
+
{mandateLabel}
@@ -78,59 +67,80 @@ const EmptyState: React.FC = () => (
// =============================================================================
export const DashboardPage: React.FC = () => {
- const mandates = useMandates();
- const { hasAnyInstance, getAllInstances } = useFeatureStore();
-
- // Alle Instanzen sammeln für Übersicht
- const allInstances = getAllInstances();
-
- // Gruppiere nach Feature
- const instancesByFeature = allInstances.reduce((acc, instance) => {
- const featureCode = instance.featureCode;
- if (!acc[featureCode]) {
- acc[featureCode] = [];
- }
- acc[featureCode].push(instance);
- return acc;
- }, {} as Record
);
-
- if (!hasAnyInstance()) {
+ const { dynamicBlock, loading } = useNavigation();
+
+ // Alle Mandate und deren Features/Instanzen aus der Navigation
+ const mandates: NavigationMandate[] = dynamicBlock?.mandates || [];
+
+ // Gesamtzahl Instanzen und Mandate berechnen
+ let totalInstances = 0;
+ const totalMandates = mandates.length;
+ mandates.forEach(m => m.features.forEach(f => {
+ totalInstances += f.instances.length;
+ }));
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (totalInstances === 0) {
return ;
}
-
+
+ // Gruppiere Instanzen nach Feature (über alle Mandate)
+ const featureGroups: { feature: MandateFeature; instances: { instance: NavFeatureInstance; mandateLabel: string }[] }[] = [];
+ const featureMap = new Map();
+
+ for (const mandate of mandates) {
+ for (const feature of mandate.features) {
+ const key = feature.uiComponent;
+ let group = featureMap.get(key);
+ if (!group) {
+ group = { feature, instances: [] };
+ featureMap.set(key, group);
+ featureGroups.push(group);
+ }
+ for (const instance of feature.instances) {
+ group.instances.push({ instance, mandateLabel: mandate.uiLabel });
+ }
+ }
+ }
+
return (
Übersicht
- Du hast Zugriff auf {allInstances.length} Feature-Instanz{allInstances.length !== 1 ? 'en' : ''}
- in {mandates.length} Mandant{mandates.length !== 1 ? 'en' : ''}.
+ Du hast Zugriff auf {totalInstances} Feature-Instanz{totalInstances !== 1 ? 'en' : ''} in {totalMandates} Mandant{totalMandates !== 1 ? 'en' : ''}.
-
+
- {Object.entries(instancesByFeature).map(([featureCode, instances]) => {
- const featureConfig = FEATURE_REGISTRY[featureCode];
- const featureLabel = featureConfig ? getLabel(featureConfig.label) : featureCode;
-
- return (
-
-
- {FEATURE_ICONS[featureCode]}
- {featureLabel}
-
-
- {instances.map(instance => (
-
- ))}
-
-
- );
- })}
+ {featureGroups.map(({ feature, instances }) => (
+
+
+ {getPageIcon(feature.uiComponent)}
+ {feature.uiLabel}
+
+
+ {instances.map(({ instance, mandateLabel }) => (
+
+ ))}
+
+
+ ))}
);
diff --git a/src/pages/FeatureView.tsx b/src/pages/FeatureView.tsx
index d49700c..7314af7 100644
--- a/src/pages/FeatureView.tsx
+++ b/src/pages/FeatureView.tsx
@@ -8,7 +8,7 @@
import React from 'react';
import { useCurrentInstance } from '../hooks/useCurrentInstance';
import { useCanViewFeatureView } from '../hooks/useInstancePermissions';
-import { getLabel, FEATURE_REGISTRY } from '../types/mandate';
+import useNavigation from '../hooks/useNavigation';
// Trustee Views
// Note: TrusteeOrganisationsView and TrusteeContractsView removed - Feature-Instanz = Organisation
@@ -25,6 +25,12 @@ import { ChatbotConversationsView } from './views/chatbot/ChatbotConversationsVi
// RealEstate Views
import { RealEstatePekView, RealEstateProjectsView, RealEstateParcelsView, RealEstateInstanceRolesPlaceholder } from './views/realestate';
+// Chat Playground Views (reusing existing workflow pages)
+import { PlaygroundPage, WorkflowsPage } from './workflows';
+
+// Automation Views (reusing existing workflow pages)
+import { AutomationsPage, AutomationTemplatesPage } from './workflows';
+
import styles from './FeatureView.module.css';
// =============================================================================
@@ -103,6 +109,15 @@ const VIEW_COMPONENTS: Record> = {
parcels: RealEstateParcelsView,
'instance-roles': RealEstateInstanceRolesPlaceholder,
},
+ chatplayground: {
+ playground: PlaygroundPage,
+ workflows: WorkflowsPage,
+ },
+ automation: {
+ definitions: AutomationsPage,
+ templates: AutomationTemplatesPage,
+ logs: () => ,
+ },
};
// =============================================================================
@@ -114,31 +129,13 @@ interface FeatureViewPageProps {
}
export const FeatureViewPage: React.FC = ({ view }) => {
- const { instance, featureCode, isValid } = useCurrentInstance();
+ const { instance, featureCode, mandateId, isValid } = useCurrentInstance();
+ const { dynamicBlock } = useNavigation();
// Berechtigungs-Check
const viewCode = `${featureCode}-${view}`;
const canView = useCanViewFeatureView(viewCode);
- // DEBUG: Log permission check for chatbot
- if (featureCode === 'chatbot') {
- console.log('🔍 [DEBUG] FeatureView Permission Check:', {
- featureCode,
- view,
- viewCode,
- instanceId: instance?.id,
- instanceLabel: instance?.instanceLabel,
- isValid,
- canView,
- permissions: instance?.permissions,
- views: instance?.permissions?.views,
- viewKeys: instance?.permissions?.views ? Object.keys(instance.permissions.views) : [],
- hasLegacyView: instance?.permissions?.views?.[viewCode],
- hasFullObjectKey: instance?.permissions?.views?.[`ui.feature.${featureCode}.${view}`],
- hasWildcard: instance?.permissions?.views?.['_all'],
- });
- }
-
// Nicht valider Kontext
if (!isValid || !featureCode || !instance) {
return ;
@@ -160,10 +157,17 @@ export const FeatureViewPage: React.FC = ({ view }) => {
return ;
}
- // View-Info aus Registry
- const featureConfig = FEATURE_REGISTRY[featureCode];
- const viewConfig = featureConfig?.views?.find(v => v.code === view);
- const viewLabel = viewConfig ? getLabel(viewConfig.label) : view;
+ // View-Label aus Backend-Navigation ermitteln
+ let viewLabel = view;
+ if (dynamicBlock) {
+ const navMandate = dynamicBlock.mandates.find(m => m.id === mandateId);
+ const navFeature = navMandate?.features.find(f => f.uiComponent.includes(featureCode));
+ const navInstance = navFeature?.instances.find(i => i.id === instance.id);
+ const navView = navInstance?.views.find(v => v.uiComponent.includes(view));
+ if (navView) {
+ viewLabel = navView.uiLabel;
+ }
+ }
return (
diff --git a/src/pages/InvitePage.tsx b/src/pages/InvitePage.tsx
index 1f9257a..f5cd0ab 100644
--- a/src/pages/InvitePage.tsx
+++ b/src/pages/InvitePage.tsx
@@ -44,6 +44,7 @@ export const InvitePage: React.FC = () => {
const [accepting, setAccepting] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState
(null);
+ const [userExists, setUserExists] = useState(null);
// Validate token on mount
useEffect(() => {
@@ -56,7 +57,6 @@ export const InvitePage: React.FC = () => {
const result = await validateInvitation(token);
setValidation(result);
- setValidating(false);
// If invitation is valid but user is not authenticated,
// store the token for later use after login/registration
@@ -64,7 +64,24 @@ export const InvitePage: React.FC = () => {
// (e.g., when user opens password reset email in a new tab)
if (result.valid && !isAuthenticated) {
localStorage.setItem(PENDING_INVITATION_KEY, token);
+
+ // Check if the target username already has an account
+ if (result.targetUsername) {
+ try {
+ const resp = await fetch(`/api/local/available?username=${encodeURIComponent(result.targetUsername)}`);
+ if (resp.ok) {
+ const data = await resp.json();
+ // available=true means username is free -> user does NOT exist
+ setUserExists(!data.available);
+ }
+ } catch {
+ // On error, default to showing both options
+ setUserExists(null);
+ }
+ }
}
+
+ setValidating(false);
};
validate();
@@ -222,7 +239,7 @@ export const InvitePage: React.FC = () => {
);
}
- // Not authenticated - show login/register options (NO inline registration form)
+ // Not authenticated - show appropriate options based on whether user account exists
return (
@@ -254,9 +271,11 @@ export const InvitePage: React.FC = () => {
- {validation.targetUsername
+ {userExists === true
? `Bitte melden Sie sich als "${validation.targetUsername}" an, um die Einladung anzunehmen.`
- : 'Bitte melden Sie sich an, um die Einladung anzunehmen.'}
+ : userExists === false
+ ? 'Bitte erstellen Sie ein Konto, um die Einladung anzunehmen.'
+ : 'Bitte melden Sie sich an oder erstellen Sie ein Konto, um die Einladung anzunehmen.'}
@@ -267,29 +286,48 @@ export const InvitePage: React.FC = () => {
)}
-
-
-
- oder
-
-
-
+ {userExists === true ? (
+
+ ) : userExists === false ? (
+
+ ) : (
+ <>
+
+
+ oder
+
+
+
+ )}
- Sie können sich mit Ihrem bestehenden Konto anmelden oder ein neues erstellen.
- Die Einladung wird automatisch nach der Anmeldung akzeptiert.
+ {userExists === true
+ ? 'Melden Sie sich mit Ihrem bestehenden Konto an. Die Einladung wird automatisch nach der Anmeldung akzeptiert.'
+ : userExists === false
+ ? 'Erstellen Sie ein neues Konto. Die Einladung wird automatisch nach der Registrierung akzeptiert.'
+ : 'Die Einladung wird automatisch nach der Anmeldung akzeptiert.'}
diff --git a/src/pages/admin/AccessManagementHub.tsx b/src/pages/admin/AccessManagementHub.tsx
index 5a64905..d522ea7 100644
--- a/src/pages/admin/AccessManagementHub.tsx
+++ b/src/pages/admin/AccessManagementHub.tsx
@@ -24,6 +24,7 @@ import { FeatureInstanceWizard } from './FeatureInstanceWizard';
import { InstanceHierarchyView } from './InstanceHierarchyView';
function getMandateName(mandate: Mandate): string {
+ if (mandate.label) return mandate.label;
if (typeof mandate.name === 'object') {
return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
}
diff --git a/src/pages/admin/Admin.module.css b/src/pages/admin/Admin.module.css
index 50e63ef..6e99486 100644
--- a/src/pages/admin/Admin.module.css
+++ b/src/pages/admin/Admin.module.css
@@ -6,7 +6,12 @@
.adminPage {
padding: 1.5rem;
- min-height: 100%;
+ /* Fill parent height and enable flex layout for sticky table headers */
+ height: 100%;
+ max-height: 100%;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
.pageHeader {
diff --git a/src/pages/admin/AdminFeatureAccessPage.tsx b/src/pages/admin/AdminFeatureAccessPage.tsx
index 682e171..fb0b92e 100644
--- a/src/pages/admin/AdminFeatureAccessPage.tsx
+++ b/src/pages/admin/AdminFeatureAccessPage.tsx
@@ -310,6 +310,7 @@ export const AdminFeatureAccessPage: React.FC = () => {
// Get mandate name
const getMandateName = (mandate: Mandate) => {
+ if (mandate.label) return mandate.label;
if (typeof mandate.name === 'object') {
return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
}
@@ -439,6 +440,7 @@ export const AdminFeatureAccessPage: React.FC = () => {
{
allOptions.push({
mandateId: mandate.id,
instanceId: inst.id,
- mandateName: typeof mandate.name === 'string' ? mandate.name : (mandate.name?.de || mandate.name?.en || Object.values(mandate.name || {})[0] || mandate.id),
+ mandateName: mandate.label || (typeof mandate.name === 'string' ? mandate.name : (mandate.name?.de || mandate.name?.en || Object.values(mandate.name || {})[0] || mandate.id)),
instanceLabel: inst.label || inst.id,
featureCode: inst.featureCode,
combinedKey: `${mandate.id}:${inst.id}`,
@@ -528,6 +528,7 @@ export const AdminFeatureInstanceUsersPage: React.FC = () => {
{
{
// Get mandate name
const getMandateName = (mandate: Mandate) => {
+ if (mandate.label) return mandate.label;
if (typeof mandate.name === 'object') {
return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
}
@@ -349,6 +350,7 @@ export const AdminInvitationsPage: React.FC = () => {
{
const {
roles,
@@ -41,9 +69,16 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
// State
const [mandates, setMandates] = useState([]);
const [selectedMandateId, setSelectedMandateId] = useState('');
- const [scopeFilter, setScopeFilter] = useState<'all' | 'mandate' | 'global'>('all');
+ const [scopeFilter, setScopeFilter] = useState<'all' | 'mandate' | 'global'>('mandate');
const [expandedRoleId, setExpandedRoleId] = useState(null);
+ // Cleanup state
+ const [showCleanupModal, setShowCleanupModal] = useState(false);
+ const [cleanupLoading, setCleanupLoading] = useState(false);
+ const [cleanupResult, setCleanupResult] = useState(null);
+ const [cleanupError, setCleanupError] = useState(null);
+ const [cleanupPhase, setCleanupPhase] = useState<'idle' | 'preview' | 'done'>('idle');
+
// Load mandates on mount
useEffect(() => {
const loadMandates = async () => {
@@ -82,19 +117,24 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
setExpandedRoleId(prev => prev === roleId ? null : roleId);
};
+ // Check if a role is a template (not bound to a specific mandate)
+ const _isTemplateRole = (role: Role): boolean => {
+ return !!role.isSystemRole || !role.mandateId;
+ };
+
// Get scope badge
const getScopeBadge = (role: Role) => {
if (role.isSystemRole) {
return (
- System
+ System-Template
);
}
if (!role.mandateId) {
return (
- Global
+ Template
);
}
@@ -105,11 +145,54 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
);
};
+ // --- Cleanup functions ---
+ const _openCleanupModal = useCallback(async () => {
+ setShowCleanupModal(true);
+ setCleanupError(null);
+ setCleanupResult(null);
+ setCleanupPhase('idle');
+ setCleanupLoading(true);
+ try {
+ const response = await api.post('/api/rbac/cleanup/duplicate-rules?dryRun=true');
+ setCleanupResult(response.data);
+ setCleanupPhase('preview');
+ } catch (err: any) {
+ setCleanupError(err?.response?.data?.detail || err?.message || 'Fehler beim Laden der Duplikate');
+ } finally {
+ setCleanupLoading(false);
+ }
+ }, []);
+
+ const _executeCleanup = useCallback(async () => {
+ setCleanupLoading(true);
+ setCleanupError(null);
+ try {
+ const response = await api.post('/api/rbac/cleanup/duplicate-rules?dryRun=false');
+ setCleanupResult(response.data);
+ setCleanupPhase('done');
+ // Refresh roles after cleanup
+ if (selectedMandateId) {
+ fetchRoles(selectedMandateId, { scopeFilter });
+ }
+ } catch (err: any) {
+ setCleanupError(err?.response?.data?.detail || err?.message || 'Fehler beim Bereinigen');
+ } finally {
+ setCleanupLoading(false);
+ }
+ }, [selectedMandateId, scopeFilter, fetchRoles]);
+
+ const _closeCleanupModal = useCallback(() => {
+ setShowCleanupModal(false);
+ setCleanupResult(null);
+ setCleanupError(null);
+ setCleanupPhase('idle');
+ }, []);
+
// Filter options for scope
const scopeOptions = useMemo(() => [
- { value: 'all', label: 'Alle Rollen' },
- { value: 'mandate', label: 'Nur Mandanten-Rollen' },
- { value: 'global', label: 'Nur globale Rollen' },
+ { value: 'mandate', label: 'Mandanten-Rollen' },
+ { value: 'all', label: 'Alle (inkl. Templates)' },
+ { value: 'global', label: 'Nur Templates' },
], []);
if (error) {
@@ -140,6 +223,14 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
+
@@ -207,9 +299,9 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
Keine Rollen gefunden
{scopeFilter === 'mandate'
- ? 'Es gibt noch keine mandantenspezifischen Rollen.'
+ ? 'Es gibt noch keine Mandanten-Rollen. System-Rollen werden bei der Mandant-Erstellung automatisch kopiert.'
: scopeFilter === 'global'
- ? 'Es gibt noch keine globalen Rollen.'
+ ? 'Es gibt noch keine Rollen-Templates.'
: 'Es gibt noch keine Rollen für diesen Mandanten.'}
+ {_isTemplateRole(role) && (
+
+
+
+ Dies ist eine Template-Rolle. Änderungen an den Berechtigungen wirken sich nur auf neu erstellte Mandanten aus.
+ Bestehende Mandanten-Instanzen werden nicht aktualisiert.
+
+
+ )}
@@ -256,6 +357,139 @@ export const AdminMandateRolePermissionsPage: React.FC = () => {
))}
+
e.stopPropagation()}>
+
+
+
+ Doppelte Regeln bereinigen
+
+
+
+
+
+ {/* Loading */}
+ {cleanupLoading && (
+
+
+
{cleanupPhase === 'idle' ? 'Analysiere Duplikate...' : 'Bereinige Duplikate...'}
+
+ )}
+
+ {/* Error */}
+ {cleanupError && (
+
+
+ {cleanupError}
+
+ )}
+
+ {/* Results */}
+ {cleanupResult && !cleanupLoading && (
+ <>
+ {/* Summary Cards */}
+
+
+
{cleanupResult.totalRules}
+
Regeln total
+
+
+
{cleanupResult.uniqueSignatures}
+
Eindeutige Regeln
+
+
0 ? '#fff5f5' : '#f0fff4', borderRadius: '8px', textAlign: 'center', border: `1px solid ${cleanupResult.duplicateGroups > 0 ? '#fc8181' : '#9ae6b4'}` }}>
+
0 ? '#c53030' : '#2f855a' }}>{cleanupResult.duplicateGroups}
+
Duplikat-Gruppen
+
+
0 ? '#fff5f5' : '#f0fff4', borderRadius: '8px', textAlign: 'center', border: `1px solid ${cleanupResult.duplicateRulesToDelete > 0 ? '#fc8181' : '#9ae6b4'}` }}>
+
0 ? '#c53030' : '#2f855a' }}>
+ {cleanupPhase === 'done' ? cleanupResult.deletedCount : cleanupResult.duplicateRulesToDelete}
+
+
+ {cleanupPhase === 'done' ? 'Geloescht' : 'Zu loeschen'}
+
+
+
+
+ {/* Status Message */}
+ {cleanupPhase === 'done' && (
+
+
+ {cleanupResult.deletedCount} doppelte Regeln wurden erfolgreich entfernt.
+
+ )}
+
+ {cleanupPhase === 'preview' && cleanupResult.duplicateGroups === 0 && (
+
+
+ Keine Duplikate gefunden. Alles sauber!
+
+ )}
+
+ {/* Details Table */}
+ {cleanupResult.details.length > 0 && (
+
+
+ Duplikat-Details {cleanupResult.details.length < cleanupResult.duplicateGroups && `(${cleanupResult.details.length} von ${cleanupResult.duplicateGroups})`}
+
+
+
+
+
+ | Kontext |
+ Item |
+ Total |
+ Duplikate |
+
+
+
+ {cleanupResult.details.map((group, idx) => (
+
+ |
+
+ {group.context}
+
+ |
+
+
+ {group.item}
+
+ |
+ {group.totalCount} |
+ {group.deleteCount} |
+
+ ))}
+
+
+
+
+ )}
+
+ )}
+
+
+
+
+ {cleanupPhase === 'preview' && cleanupResult && cleanupResult.duplicateRulesToDelete > 0 && (
+
+ )}
+
+
+
);
};
diff --git a/src/pages/admin/AdminMandateRolesPage.tsx b/src/pages/admin/AdminMandateRolesPage.tsx
index a6fc149..19ddff4 100644
--- a/src/pages/admin/AdminMandateRolesPage.tsx
+++ b/src/pages/admin/AdminMandateRolesPage.tsx
@@ -46,7 +46,7 @@ export const AdminMandateRolesPage: React.FC = () => {
const [showCreateModal, setShowCreateModal] = useState(false);
const [editingRole, setEditingRole] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
- const [scopeFilter, setScopeFilter] = useState<'all' | 'mandate' | 'global'>('all');
+ const [scopeFilter, setScopeFilter] = useState<'all' | 'mandate' | 'global'>('mandate');
const [backendAttributes, setBackendAttributes] = useState([]);
// Store current filter state for refetch
@@ -126,14 +126,14 @@ export const AdminMandateRolesPage: React.FC = () => {
if (value === 'system') {
return (
- System
+ System-Template
);
}
if (value === 'global') {
return (
- Global
+ Template
);
}
@@ -164,7 +164,7 @@ export const AdminMandateRolesPage: React.FC = () => {
default: 'mandate',
options: [
{ value: 'mandate', label: 'Nur dieser Mandant' },
- { value: 'global', label: 'Global (alle Mandanten)' },
+ { value: 'global', label: 'Template (wird bei neuen Mandanten kopiert)' },
]
});
}
@@ -285,6 +285,7 @@ export const AdminMandateRolesPage: React.FC = () => {
// Get mandate name
const getMandateName = (mandate: Mandate) => {
+ if (mandate.label) return mandate.label;
if (typeof mandate.name === 'object') {
return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
}
@@ -359,9 +360,9 @@ export const AdminMandateRolesPage: React.FC = () => {
onChange={(e) => setScopeFilter(e.target.value as 'all' | 'mandate' | 'global')}
style={{ minWidth: 150 }}
>
-
-
-
+
+
+
@@ -389,9 +390,9 @@ export const AdminMandateRolesPage: React.FC = () => {
- System-Rollen (admin, user, viewer) können nicht bearbeitet oder gelöscht werden.
- Globale Rollen gelten für alle Mandanten.
- Mandanten-Rollen gelten nur für den ausgewählten Mandanten.
+ System-Templates (admin, user, viewer) werden bei der Mandant-Erstellung automatisch als Mandanten-Instanz-Rollen kopiert.
+ Templates selbst können nicht gelöscht werden.
+ Mandanten-Rollen gelten nur für den ausgewählten Mandanten und sind den Benutzern zuweisbar.
)}
@@ -416,9 +417,9 @@ export const AdminMandateRolesPage: React.FC = () => {
Keine Rollen
{scopeFilter === 'mandate'
- ? 'Es gibt noch keine mandantenspezifischen Rollen.'
+ ? 'Es gibt noch keine Mandanten-Rollen. System-Rollen werden bei der Mandant-Erstellung automatisch kopiert.'
: scopeFilter === 'global'
- ? 'Es gibt noch keine globalen Rollen.'
+ ? 'Es gibt noch keine Rollen-Templates.'
: 'Es gibt noch keine Rollen für diesen Mandanten.'}
+ {editingMandate.isSystem && (
+
+
+
+ Dies ist ein System-Mandant. Er kann nicht gelöscht werden und der Name sollte nicht geändert werden.
+
+
+ )}
{formAttributes.length === 0 ? (
diff --git a/src/pages/admin/AdminUserAccessOverviewPage.tsx b/src/pages/admin/AdminUserAccessOverviewPage.tsx
index f509f6c..9416c86 100644
--- a/src/pages/admin/AdminUserAccessOverviewPage.tsx
+++ b/src/pages/admin/AdminUserAccessOverviewPage.tsx
@@ -188,7 +188,7 @@ export const AdminUserAccessOverviewPage: React.FC = () => {
{overview.mandates.length === 0 ? (
Keine Mandate-Zuordnungen vorhanden.
) : (
-
+
{overview.mandates.map(mandate => (
{
{overview.roles.length === 0 ? (
Keine Rollen zugewiesen.
) : (
-
+
{overview.roles.map(role => (
{
) : overview ? (
<>
{/* User Info */}
-
+
{overview.user.fullName || overview.user.username}
|
{overview.user.email}
@@ -610,7 +610,8 @@ export const AdminUserAccessOverviewPage: React.FC = () => {
gap: '0.5rem',
marginBottom: '1rem',
borderBottom: '1px solid var(--border-color)',
- paddingBottom: '0.5rem'
+ paddingBottom: '0.5rem',
+ flexShrink: 0
}}>