nucleus-core-ts 0.8.128 → 0.8.130

package/dist/fe/components/VerificationFlowPage/components/FlowNode.d.ts

@@ -1,9 +1,9 @@
-import type { ReactElement } from 'react';
-import type { NotificationChannel } from '../types';
+import type { ReactElement } from "react";
+import type { NotificationChannel } from "../types";
 interface StepNodeDataProps {
     label?: string;
     description?: string;
-    nodeType: 'step';
+    nodeType: "step";
     stepOrder: number;
     selected?: boolean;
     [key: string]: unknown;
@@ -11,9 +11,9 @@ interface StepNodeDataProps {
 interface VerifierNodeDataProps {
     label?: string;
     description?: string;
-    nodeType: 'verifier';
+    nodeType: "verifier";
     stepOrder: number;
-    verifierType?: 'user' | 'role';
+    verifierType?: "user" | "role";
     verifierRole?: string;
     verifierUserEmail?: string;
     requireSignature?: boolean;
@@ -24,20 +24,20 @@ interface VerifierNodeDataProps {
 interface NotificationNodeDataProps {
     label?: string;
     description?: string;
-    nodeType: 'notification';
+    nodeType: "notification";
     stepOrder: number;
     trigger?: string;
     channels?: NotificationChannel[];
     selected?: boolean;
     [key: string]: unknown;
 }
-export declare function StepFlowNode({ data }: {
+export declare function StepFlowNode({ data, }: {
     data: StepNodeDataProps;
 }): ReactElement;
-export declare function VerifierFlowNode({ data }: {
+export declare function VerifierFlowNode({ data, }: {
     data: VerifierNodeDataProps;
 }): ReactElement;
-export declare function NotificationFlowNode({ data }: {
+export declare function NotificationFlowNode({ data, }: {
     data: NotificationNodeDataProps;
 }): ReactElement;
 export {};

package/dist/fe/components/VerificationFlowPage/components/FlowNode.js

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Handle, Position } from '@xyflow/react';
-import { verificationFlowPageTheme } from '../theme';
+import { Handle, Position } from "@xyflow/react";
+import { getActiveTheme } from "../theme/store";
 // ─── Shared icon components ───────────────────────────────────────
 const StepIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
         className: className,
@@ -56,7 +56,7 @@ const NotificationIcon = ({ className })=>/*#__PURE__*/ _jsxs("svg", {
     });
 // ─── Step Node ────────────────────────────────────────────────────
 export function StepFlowNode({ data }) {
-    const theme = verificationFlowPageTheme.stepNode;
+    const theme = getActiveTheme().stepNode;
     const isSelected = data.selected === true;
     return /*#__PURE__*/ _jsxs("div", {
         className: isSelected ? theme.containerSelected : theme.container,
@@ -100,9 +100,9 @@ export function StepFlowNode({ data }) {
 }
 // ─── Verifier Node ────────────────────────────────────────────────
 export function VerifierFlowNode({ data }) {
-    const theme = verificationFlowPageTheme.verifierNode;
+    const theme = getActiveTheme().verifierNode;
     const isSelected = data.selected === true;
-    const assignedLabel = data.verifierType === 'role' ? data.verifierRole || 'No role' : data.verifierUserEmail || 'No user';
+    const assignedLabel = data.verifierType === "role" ? data.verifierRole || "No role" : data.verifierUserEmail || "No user";
     return /*#__PURE__*/ _jsxs("div", {
         className: isSelected ? theme.containerSelected : theme.container,
         children: [
@@ -125,7 +125,7 @@ export function VerifierFlowNode({ data }) {
             }),
             /*#__PURE__*/ _jsx("p", {
                 className: theme.nameLabel,
-                children: data.label || 'Verifier'
+                children: data.label || "Verifier"
             }),
             data.description ? /*#__PURE__*/ _jsx("p", {
                 className: theme.description,
@@ -137,7 +137,7 @@ export function VerifierFlowNode({ data }) {
                     /*#__PURE__*/ _jsxs("span", {
                         className: theme.assignedBadge,
                         children: [
-                            data.verifierType === 'role' ? '⛊' : '⚇',
+                            data.verifierType === "role" ? "⛊" : "⚇",
                             " ",
                             assignedLabel
                         ]
@@ -158,11 +158,11 @@ export function VerifierFlowNode({ data }) {
 }
 // ─── Notification Node ────────────────────────────────────────────
 export function NotificationFlowNode({ data }) {
-    const theme = verificationFlowPageTheme.notificationNode;
+    const theme = getActiveTheme().notificationNode;
     const isSelected = data.selected === true;
     const channels = data.channels || [];
-    const trigger = data.trigger || 'on_step_reached';
-    const triggerLabel = trigger.replace(/^on_/, '').replace(/_/g, ' ');
+    const trigger = data.trigger || "on_step_reached";
+    const triggerLabel = trigger.replace(/^on_/, "").replace(/_/g, " ");
     return /*#__PURE__*/ _jsxs("div", {
         className: isSelected ? theme.containerSelected : theme.container,
         children: [
@@ -185,7 +185,7 @@ export function NotificationFlowNode({ data }) {
             }),
             /*#__PURE__*/ _jsx("p", {
                 className: theme.nameLabel,
-                children: data.label || 'Notification'
+                children: data.label || "Notification"
             }),
             data.description ? /*#__PURE__*/ _jsx("p", {
                 className: theme.description,

package/dist/fe/components/VerificationFlowPage/components/NodePropertiesPanel.d.ts

@@ -1,3 +1,3 @@
-import type { ReactElement } from 'react';
+import type { ReactElement } from "react";
 export declare function NodePalette(): ReactElement;
 //# sourceMappingURL=NodePropertiesPanel.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/NodePropertiesPanel.js

@@ -1,28 +1,28 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../../utils/cn';
-import { verificationFlowPageTheme } from '../theme';
+import { cn } from "../../../utils/cn";
+import { getActiveTheme } from "../theme/store";
 const paletteItems = [
     {
-        type: 'step',
-        label: 'Step',
-        description: 'A verification checkpoint in the flow',
-        iconBg: 'bg-blue-500/20 text-blue-400',
-        themeKey: 'stepItem'
+        type: "step",
+        label: "Step",
+        description: "A verification checkpoint in the flow",
+        iconBg: "bg-blue-500/20 text-blue-400",
+        themeKey: "stepItem"
     },
     {
-        type: 'verifier',
-        label: 'Verifier',
-        description: 'Assign a user or role to approve',
-        iconBg: 'bg-amber-500/20 text-amber-400',
-        themeKey: 'verifierItem'
+        type: "verifier",
+        label: "Verifier",
+        description: "Assign a user or role to approve",
+        iconBg: "bg-amber-500/20 text-amber-400",
+        themeKey: "verifierItem"
     },
     {
-        type: 'notification',
-        label: 'Notification',
-        description: 'Send alerts via portal, email, or webhook',
-        iconBg: 'bg-violet-500/20 text-violet-400',
-        themeKey: 'notificationItem'
+        type: "notification",
+        label: "Notification",
+        description: "Send alerts via portal, email, or webhook",
+        iconBg: "bg-violet-500/20 text-violet-400",
+        themeKey: "notificationItem"
     }
 ];
 const StepPaletteIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
@@ -82,10 +82,10 @@ const iconComponents = {
     notification: NotificationPaletteIcon
 };
 export function NodePalette() {
-    const theme = verificationFlowPageTheme.palette;
+    const theme = getActiveTheme().palette;
     const onDragStart = (e, nodeType)=>{
-        e.dataTransfer.setData('application/reactflow-nodetype', nodeType);
-        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData("application/reactflow-nodetype", nodeType);
+        e.dataTransfer.effectAllowed = "move";
     };
     return /*#__PURE__*/ _jsxs("div", {
         className: theme.container,

package/dist/fe/components/VerificationFlowPage/components/PendingTab.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react';
-import type { VerificationDecideAction, VerificationPendingAction } from '../types';
+import type { ReactElement } from "react";
+import type { VerificationDecideAction, VerificationPendingAction } from "../types";
 interface PendingTabProps {
     pendingAction: VerificationPendingAction;
     decideAction: VerificationDecideAction;

package/dist/fe/components/VerificationFlowPage/components/PendingTab.js

@@ -1,21 +1,24 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useEffectEvent } from 'react';
-import { useVerificationFlowStore } from '../store';
-import { verificationFlowPageTheme } from '../theme';
+import { useEffect, useEffectEvent } from "react";
+import { useVerificationFlowStore } from "../store";
+import { getActiveTheme } from "../theme/store";
 export function PendingTab({ pendingAction, decideAction, onDecisionMade }) {
-    const theme = verificationFlowPageTheme;
+    const theme = getActiveTheme();
     const store = useVerificationFlowStore();
     const loadPending = useEffectEvent(()=>{
         store.setLoadingPending(true);
+        console.log("[PendingTab] Loading pending verifications...");
         pendingAction.start({
             payload: undefined,
             onAfterHandle: (res)=>{
+                console.log("[PendingTab] Pending response:", res);
                 const data = res.data;
                 store.setPendingItems(data ?? []);
                 store.setLoadingPending(false);
             },
-            onErrorHandle: ()=>{
+            onErrorHandle: (err)=>{
+                console.error("[PendingTab] Pending error:", err);
                 store.setLoadingPending(false);
             }
         });
@@ -33,7 +36,7 @@ export function PendingTab({ pendingAction, decideAction, onDecisionMade }) {
             },
             onAfterHandle: ()=>{
                 store.setDecidingId(null);
-                store.setDecisionReason('');
+                store.setDecisionReason("");
                 onDecisionMade?.(item.entity_name, item.entity_id);
                 loadPending();
             }
@@ -123,13 +126,13 @@ export function PendingTab({ pendingAction, decideAction, onDecisionMade }) {
                                     }),
                                     /*#__PURE__*/ _jsx("button", {
                                         type: "button",
-                                        onClick: ()=>handleDecide(item, 'approved'),
+                                        onClick: ()=>handleDecide(item, "approved"),
                                         className: theme.pending.approveButton,
                                         children: "Approve"
                                     }),
                                     /*#__PURE__*/ _jsx("button", {
                                         type: "button",
-                                        onClick: ()=>handleDecide(item, 'rejected'),
+                                        onClick: ()=>handleDecide(item, "rejected"),
                                         className: theme.pending.rejectButton,
                                         children: "Reject"
                                     }),
@@ -137,7 +140,7 @@ export function PendingTab({ pendingAction, decideAction, onDecisionMade }) {
                                         type: "button",
                                         onClick: ()=>{
                                             store.setDecidingId(null);
-                                            store.setDecisionReason('');
+                                            store.setDecisionReason("");
                                         },
                                         className: theme.pending.cancelButton,
                                         children: "Cancel"

package/dist/fe/components/VerificationFlowPage/components/PropertiesPanel.d.ts

@@ -1,4 +1,5 @@
 import type { ReactElement } from "react";
+import type { VerificationFlowPageTheme } from "../theme";
 import type { ListRolesAction, ListUsersAction, NodeType, NotificationChannel, RecipientType, VerificationTrigger } from "../types";
 interface NodeData {
     nodeType: NodeType;
@@ -28,7 +29,8 @@ interface PropertiesPanelProps {
     onClose: () => void;
     listUsersAction?: ListUsersAction;
     listRolesAction?: ListRolesAction;
+    panelTheme: VerificationFlowPageTheme["propertiesPanel"];
 }
-export declare function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, }: PropertiesPanelProps): ReactElement;
+export declare function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme, }: PropertiesPanelProps): ReactElement;
 export {};
 //# sourceMappingURL=PropertiesPanel.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/PropertiesPanel.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from "react";
-import { verificationFlowPageTheme } from "../theme";
 // ─── Constants ────────────────────────────────────────────────────
 const ALL_CHANNELS = [
     "portal",
@@ -55,8 +54,8 @@ const ALL_RECIPIENT_TYPES = [
     }
 ];
 // ─── Channel Multi-Select ─────────────────────────────────────────
-function ChannelMultiSelect({ selected, onChange }) {
-    const theme = verificationFlowPageTheme.propertiesPanel.multiSelect;
+function ChannelMultiSelect({ selected, onChange, msTheme }) {
+    const theme = msTheme;
     const [isOpen, setIsOpen] = useState(false);
     const toggle = (channel)=>{
         if (selected.includes(channel)) {
@@ -130,11 +129,14 @@ function ChannelMultiSelect({ selected, onChange }) {
         ]
     });
 }
+// ─── Module-level caches ─────────────────────────────────────────
+let cachedUsers = [];
+let cachedRoles = [];
 // ─── User/Role Search List ────────────────────────────────────────
-function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
-    const theme = verificationFlowPageTheme.propertiesPanel.userRoleSearch;
+function UserSearchList({ listUsersAction, selectedUserId, onSelect, ursTheme }) {
+    const theme = ursTheme;
     const [searchTerm, setSearchTerm] = useState("");
-    const [users, setUsers] = useState([]);
+    const [users, setUsers] = useState(cachedUsers);
     const [page, setPage] = useState(1);
     const [hasMore, setHasMore] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -155,6 +157,7 @@ function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
                 const nextPage = meta?.hasNextPage === true || items.length >= 20;
                 if (pageNum === 1) {
                     setUsers(items);
+                    if (!search) cachedUsers = items;
                 } else {
                     setUsers((prev)=>[
                             ...prev,
@@ -170,6 +173,10 @@ function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
         });
     });
     useEffect(()=>{
+        if (searchTerm === "" && cachedUsers.length > 0) {
+            setUsers(cachedUsers);
+            return;
+        }
         loadUsers(1, searchTerm);
         setPage(1);
     }, [
@@ -186,9 +193,32 @@ function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
             children: "No user data source configured"
         });
     }
+    const selectedUser = selectedUserId ? users.find((u)=>u.id === selectedUserId) : null;
     return /*#__PURE__*/ _jsxs("div", {
         className: theme.container,
         children: [
+            selectedUser && /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2 rounded-lg bg-blue-500/15 border border-blue-500/25 px-3 py-2",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "w-6 h-6 rounded-full bg-blue-500/20 flex items-center justify-center text-[10px] font-bold text-blue-300 flex-shrink-0",
+                        children: (selectedUser.name || selectedUser.email || "?").charAt(0).toUpperCase()
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "flex flex-col min-w-0",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-[11px] font-medium text-blue-300 truncate",
+                                children: selectedUser.name || selectedUser.email
+                            }),
+                            selectedUser.name && /*#__PURE__*/ _jsx("span", {
+                                className: "text-[10px] text-blue-300/50 truncate",
+                                children: selectedUser.email
+                            })
+                        ]
+                    })
+                ]
+            }),
             /*#__PURE__*/ _jsx("input", {
                 type: "text",
                 className: theme.searchInput,
@@ -206,13 +236,16 @@ function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
                     users.map((user)=>/*#__PURE__*/ _jsxs("button", {
                             type: "button",
                             className: user.id === selectedUserId ? theme.listItemSelected : theme.listItem,
-                            onClick: ()=>onSelect(user),
+                            onClick: ()=>{
+                                onSelect(user);
+                            },
                             children: [
                                 /*#__PURE__*/ _jsx("span", {
                                     className: theme.listItemAvatar,
                                     children: (user.name || user.email || "?").charAt(0).toUpperCase()
                                 }),
                                 /*#__PURE__*/ _jsxs("span", {
+                                    className: "flex flex-col min-w-0",
                                     children: [
                                         /*#__PURE__*/ _jsx("span", {
                                             className: theme.listItemName,
@@ -237,10 +270,10 @@ function UserSearchList({ listUsersAction, selectedUserId, onSelect }) {
         ]
     });
 }
-function RoleSearchList({ listRolesAction, selectedRole, onSelect }) {
-    const theme = verificationFlowPageTheme.propertiesPanel.userRoleSearch;
+function RoleSearchList({ listRolesAction, selectedRole, onSelect, ursTheme }) {
+    const theme = ursTheme;
     const [searchTerm, setSearchTerm] = useState("");
-    const [roles, setRoles] = useState([]);
+    const [roles, setRoles] = useState(cachedRoles);
     const [page, setPage] = useState(1);
     const [hasMore, setHasMore] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -261,6 +294,7 @@ function RoleSearchList({ listRolesAction, selectedRole, onSelect }) {
                 const nextPage = meta?.hasNextPage === true || items.length >= 20;
                 if (pageNum === 1) {
                     setRoles(items);
+                    if (!search) cachedRoles = items;
                 } else {
                     setRoles((prev)=>[
                             ...prev,
@@ -276,6 +310,10 @@ function RoleSearchList({ listRolesAction, selectedRole, onSelect }) {
         });
     });
     useEffect(()=>{
+        if (searchTerm === "" && cachedRoles.length > 0) {
+            setRoles(cachedRoles);
+            return;
+        }
         loadRoles(1, searchTerm);
         setPage(1);
     }, [
@@ -344,8 +382,8 @@ function RoleSearchList({ listRolesAction, selectedRole, onSelect }) {
     });
 }
 // ─── Main Properties Panel ────────────────────────────────────────
-export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction }) {
-    const theme = verificationFlowPageTheme.propertiesPanel;
+export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode, onClose, listUsersAction, listRolesAction, panelTheme }) {
+    const theme = panelTheme;
     const data = nodeData;
     const nodeType = data.nodeType;
     const update = (partial)=>{
@@ -487,14 +525,16 @@ export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode,
                                         onSelect: (user)=>update({
                                                 verifierUserId: user.id,
                                                 verifierUserEmail: user.email
-                                            })
+                                            }),
+                                        ursTheme: theme.userRoleSearch
                                     }),
                                     (data.verifierType === "role" || !data.verifierType) && /*#__PURE__*/ _jsx(RoleSearchList, {
                                         listRolesAction: listRolesAction,
                                         selectedRole: data.verifierRole,
                                         onSelect: (role)=>update({
                                                 verifierRole: role.name
-                                            })
+                                            }),
+                                        ursTheme: theme.userRoleSearch
                                     })
                                 ]
                             }),
@@ -590,7 +630,8 @@ export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode,
                                         selected: data.channels || [],
                                         onChange: (channels)=>update({
                                                 channels
-                                            })
+                                            }),
+                                        msTheme: theme.multiSelect
                                     })
                                 ]
                             }),
@@ -627,14 +668,16 @@ export function PropertiesPanel({ nodeId, nodeData, onUpdateNode, onDeleteNode,
                                         selectedUserId: data.recipientUserId,
                                         onSelect: (user)=>update({
                                                 recipientUserId: user.id
-                                            })
+                                            }),
+                                        ursTheme: theme.userRoleSearch
                                     }),
                                     data.recipientType === "role" && /*#__PURE__*/ _jsx(RoleSearchList, {
                                         listRolesAction: listRolesAction,
                                         selectedRole: data.recipientRole,
                                         onSelect: (role)=>update({
                                                 recipientRole: role.name
-                                            })
+                                            }),
+                                        ursTheme: theme.userRoleSearch
                                     })
                                 ]
                             }),

package/dist/fe/components/VerificationFlowPage/components/VerificationEntityList.d.ts

@@ -40,8 +40,9 @@ export type VerificationEntityListProps = {
     entityName: string;
     entityStatusesAction: VerificationEntityStatusesAction;
     theme?: Partial<VerificationEntityListTheme>;
+    themeMode?: "dark" | "light";
     onEntityClick?: (item: VerificationBulkStatusItem) => void;
     pageSize?: number;
 };
-export declare function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, onEntityClick, pageSize, }: VerificationEntityListProps): import("react/jsx-runtime").JSX.Element;
+export declare function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode, onEntityClick, pageSize, }: VerificationEntityListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VerificationEntityList.d.ts.map

package/dist/fe/components/VerificationFlowPage/components/VerificationEntityList.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffectEvent } from "react";
-const defaultTheme = {
+import { useEffect, useState, useEffectEvent } from "react";
+const darkTheme = {
     container: "space-y-4",
     header: "space-y-1",
     title: "text-lg font-bold text-white/90 tracking-tight",
@@ -38,6 +38,43 @@ const defaultTheme = {
     pageInfo: "text-xs text-white/30",
     loadingSpinner: "flex items-center justify-center py-8"
 };
+const lightTheme = {
+    container: "space-y-4",
+    header: "space-y-1",
+    title: "text-lg font-bold text-gray-900 tracking-tight",
+    description: "text-sm text-gray-500",
+    tabs: "flex items-center gap-1 p-1 rounded-xl bg-gray-100 border border-gray-200",
+    tab: "px-3.5 py-1.5 rounded-lg text-xs font-medium text-gray-400 transition-all cursor-pointer hover:text-gray-600",
+    tabActive: "px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-white text-gray-900 shadow-sm cursor-pointer",
+    tabCount: "ml-1 text-[10px] opacity-50",
+    list: "space-y-2",
+    listItem: "flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white transition-all",
+    listItemHover: "hover:bg-gray-50 hover:border-gray-300",
+    entityInfo: "flex-1 min-w-0 space-y-0.5",
+    entityName: "text-sm font-semibold text-gray-800 truncate",
+    entityId: "text-[11px] text-gray-400 font-mono truncate",
+    flowName: "text-[11px] text-gray-500",
+    statusBadge: "px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider shrink-0",
+    statusActive: "bg-amber-100 text-amber-700 ring-1 ring-amber-200",
+    statusCompleted: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
+    statusRejected: "bg-red-100 text-red-700 ring-1 ring-red-200",
+    statusCancelled: "bg-gray-100 text-gray-400 ring-1 ring-gray-200",
+    progressSection: "flex items-center gap-2.5 shrink-0 w-[140px]",
+    progressBar: "flex-1 h-1.5 rounded-full bg-gray-200 overflow-hidden",
+    progressFill: "h-full rounded-full transition-all duration-500",
+    progressLabel: "text-[10px] text-gray-500 font-medium whitespace-nowrap w-[45px] text-right",
+    metaSection: "flex items-center gap-4 shrink-0",
+    metaLabel: "text-[10px] text-gray-400 uppercase tracking-wider",
+    metaValue: "text-xs text-gray-600",
+    emptyState: "flex flex-col items-center gap-3 py-12",
+    emptyIcon: "text-gray-300",
+    emptyText: "text-sm text-gray-400",
+    pagination: "flex items-center justify-center gap-2 pt-2",
+    pageButton: "px-3 py-1.5 rounded-lg text-xs font-medium text-gray-500 bg-white border border-gray-200 hover:bg-gray-50 transition-all cursor-pointer",
+    pageButtonActive: "px-3 py-1.5 rounded-lg text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-300",
+    pageInfo: "text-xs text-gray-400",
+    loadingSpinner: "flex items-center justify-center py-8"
+};
 const STATUS_TABS = [
     {
         value: "all",
@@ -60,9 +97,10 @@ const STATUS_TABS = [
         label: "Cancelled"
     }
 ];
-export function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, onEntityClick, pageSize = 20 }) {
+export function VerificationEntityList({ entityName, entityStatusesAction, theme: themeOverrides, themeMode = "dark", onEntityClick, pageSize = 20 }) {
+    const baseTheme = themeMode === "light" ? lightTheme : darkTheme;
     const t = {
-        ...defaultTheme,
+        ...baseTheme,
         ...themeOverrides
     };
     const [activeTab, setActiveTab] = useState("all");
@@ -86,6 +124,9 @@ export function VerificationEntityList({ entityName, entityStatusesAction, theme
         setCurrentPage(page);
         loadStatuses(activeTab === "all" ? undefined : activeTab, page);
     });
+    useEffect(()=>{
+        loadStatuses(undefined, 1);
+    }, []);
     const data = entityStatusesAction.state.data;
     const isPending = entityStatusesAction.state.isPending;
     const responseData = data;
@@ -157,7 +198,7 @@ export function VerificationEntityList({ entityName, entityStatusesAction, theme
             isPending ? /*#__PURE__*/ _jsx("div", {
                 className: t.loadingSpinner,
                 children: /*#__PURE__*/ _jsx("div", {
-                    className: "w-6 h-6 rounded-full border-2 border-white/10 border-t-cyan-400 animate-spin"
+                    className: `w-6 h-6 rounded-full border-2 animate-spin ${themeMode === "light" ? "border-gray-200 border-t-blue-500" : "border-white/10 border-t-cyan-400"}`
                 })
             }) : items.length === 0 ? /*#__PURE__*/ _jsxs("div", {
                 className: t.emptyState,

package/dist/fe/components/VerificationFlowPage/components/VerificationFlowPage.d.ts

@@ -1,5 +1,5 @@
 import "@xyflow/react/dist/style.css";
 import type { ReactElement } from "react";
 import type { VerificationFlowPageProps } from "../types";
-export declare function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, flowSaveAction, flowPublishAction, pendingAction, decideAction, listUsersAction, listRolesAction, entityStatusesAction, onFlowSelected, onDecisionMade, onEntityClick, showPending, showEntityStatuses, className, }: VerificationFlowPageProps): ReactElement;
+export declare function VerificationFlowPage({ entityName, title, subtitle, flowListAction, flowGetAction, flowSaveAction, flowPublishAction, flowDeleteAction, pendingAction, decideAction, listUsersAction, listRolesAction, entityStatusesAction, onFlowSelected, onDecisionMade, onEntityClick, onBack, showPending, showEntityStatuses, className, themeMode, }: VerificationFlowPageProps): ReactElement;
 //# sourceMappingURL=VerificationFlowPage.d.ts.map