@birhaus/patterns
Version:
BIRHAUS v3.0 Radical Minimalist Pattern Components - Glass morphism ApprovalWorkflow, RoleManager, SmartSearch, FinancialDashboard, AuditTimeline
638 lines (629 loc) • 22.9 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { BirhausBasePropsV3 } from '@birhaus/types/v3';
import * as react from 'react';
import react__default, { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';
type AuditEvent = {
id: string;
actor_id: string;
actor_name?: string;
verb: string;
entity: string | null;
entity_id: string | null;
payload: Record<string, any>;
request_id: string | null;
created_at: string;
};
type AuditTimelineProps = {
events: AuditEvent[];
showFilters?: boolean;
maxHeight?: string;
className?: string;
emptyMessage?: string;
filterAllEntitiesLabel?: string;
filterAllActionsLabel?: string;
clearFiltersLabel?: string;
showDetailsLabel?: string;
hideDetailsLabel?: string;
};
declare function AuditTimeline({ events, showFilters, maxHeight, className, emptyMessage, filterAllEntitiesLabel, filterAllActionsLabel, clearFiltersLabel, showDetailsLabel, hideDetailsLabel }: AuditTimelineProps): react_jsx_runtime.JSX.Element;
declare function useAuditTimeline(): {
events: AuditEvent[];
addEvent: (event: Omit<AuditEvent, "id" | "created_at">) => AuditEvent;
clearEvents: () => void;
};
/**
* BIRHAUS v3.0 Radical Minimalist Audit Timeline
*
* Enhanced audit timeline with glass morphism effects,
* generous spacing, and radical border radius for v3.0 design system.
*
* Features:
* - Glass morphism event cards
* - Generous spacing (2x traditional)
* - Radical border radius (24px+ curves)
* - Smooth GPU-accelerated animations
* - Spanish-first audit terminology
* - Enhanced progressive disclosure
*/
interface AuditTimelineV3Props extends Omit<BirhausBasePropsV3, 'variant'> {
/** Audit events to display */
events: AuditEvent[];
/** Show timeline filters */
showFilters?: boolean;
/** Maximum height for scrollable timeline */
maxHeight?: string;
/** v3.0 glass intensity preset */
glassVariant?: 'subtle' | 'medium' | 'heavy';
/** Enable floating event cards */
floatingCards?: boolean;
/** Enable magnetic hover effects on events */
magneticEvents?: boolean;
/** Enable enhanced glass morphism throughout timeline */
enableGlass?: boolean;
/** Performance optimization mode */
reducedMotion?: boolean;
/** v3 theme variant */
themeName?: 'financial' | 'healthcare' | 'education';
/** Enable glow effects for critical audit events */
glowCritical?: boolean;
emptyMessage?: string;
filterAllEntitiesLabel?: string;
filterAllActionsLabel?: string;
clearFiltersLabel?: string;
showDetailsLabel?: string;
hideDetailsLabel?: string;
/** Custom class name */
className?: string;
}
declare function AuditTimelineV3({ events, showFilters, maxHeight, glassVariant, floatingCards, magneticEvents, enableGlass, reducedMotion, themeName, glowCritical, emptyMessage, filterAllEntitiesLabel, filterAllActionsLabel, clearFiltersLabel, showDetailsLabel, hideDetailsLabel, className, ...props }: AuditTimelineV3Props): react_jsx_runtime.JSX.Element;
/**
* BIRHAUS v3.0 Enhanced Audit Event Component
*/
interface AuditEventV3Props extends AuditEvent {
/** v3 glass effect */
glass?: boolean;
/** v3 generous spacing */
generousSpacing?: boolean;
/** v3 radical border radius */
radicalBorderRadius?: boolean;
/** Enable magnetic hover effect */
magnetic?: boolean;
/** Enable glow effect for critical events */
glow?: boolean;
/** Event severity level */
severity?: 'info' | 'warning' | 'error' | 'critical';
/** Show expanded details */
expanded?: boolean;
/** Toggle expanded state */
onToggleExpanded?: () => void;
}
declare function AuditEventV3({ glass, generousSpacing, radicalBorderRadius, magnetic, glow, severity, expanded, onToggleExpanded, ...event }: AuditEventV3Props): react_jsx_runtime.JSX.Element;
declare function useAuditTimelineV3(events: AuditEvent[], initialConfiguration?: Partial<AuditTimelineV3Props>): {
v3Configuration: Partial<AuditTimelineV3Props>;
updateV3Configuration: (updates: Partial<AuditTimelineV3Props>) => void;
enableGlassMorphism: () => void;
enableFloatingCards: () => void;
enableMagneticEvents: () => void;
setTheme: (theme: "financial" | "healthcare" | "education") => void;
enablePerformanceMode: () => void;
isV3Enabled: boolean;
events: AuditEvent[];
addEvent: (event: Omit<AuditEvent, "id" | "created_at">) => AuditEvent;
clearEvents: () => void;
};
interface MetricaFinanciera {
id: string;
nombreEs: string;
nombreEn: string;
valor: number;
unidad: 'moneda' | 'porcentaje' | 'cantidad';
tendencia: {
direccion: 'subida' | 'bajada' | 'estable';
porcentaje: number;
anterior: number;
actual: number;
periodo: string;
};
estado: 'saludable' | 'precaucion' | 'critico';
categoria: 'ingresos' | 'gastos' | 'balance' | 'proyeccion';
objetivo?: number;
descripcionEs: string;
descripcionEn: string;
datosTemporales: PuntoDatoTemporal[];
ultimaActualizacion: Date;
}
interface PuntoDatoTemporal {
fecha: Date;
valor: number;
etiquetaEs?: string;
etiquetaEn?: string;
}
interface PosicionCaja {
balanceTotal: number;
cuentas: {
efectivo: number;
banco: number;
pendiente: number;
otros: number;
};
ultimaActualizacion: Date;
}
interface ProyeccionFlujo {
fecha: Date;
ingresosEsperados: number;
gastosEsperados: number;
balanceProyectado: number;
confianza: 'alta' | 'media' | 'baja';
detalles?: {
ingresosDetalle: DetalleFinanciero[];
gastosDetalle: DetalleFinanciero[];
};
}
interface DetalleFinanciero {
concepto: string;
monto: number;
categoria: string;
origen: 'programado' | 'historico' | 'estimado';
}
interface AlertaFinanciera {
id: string;
tipo: 'error' | 'advertencia' | 'informacion';
prioridad: 'alta' | 'media' | 'baja';
tituloEs: string;
tituloEn: string;
mensajeEs: string;
mensajeEn: string;
accionable: boolean;
confirmado: boolean;
timestamp: Date;
}
interface FiltrosPeriodo {
tipo: 'dia' | 'semana' | 'mes' | 'trimestre' | 'año' | 'personalizado';
fechaInicio?: Date;
fechaFin?: Date;
compararPeriodoAnterior: boolean;
}
interface ConfiguracionDashboard {
idioma: 'es' | 'en';
moneda: 'PYG' | 'USD' | 'EUR';
formatoNumero: 'es-PY' | 'en-US' | 'es-ES';
mostrarGraficos: boolean;
mostrarObjetivos: boolean;
mostrarProyecciones: boolean;
diasProyeccion: 7 | 14 | 30;
actualizacionAutomatica: boolean;
intervaloActualizacion: number;
}
interface PropsBirhausFinancialDashboard {
metricas: MetricaFinanciera[];
posicionCaja: PosicionCaja;
proyecciones?: ProyeccionFlujo[];
alertas?: AlertaFinanciera[];
configuracion?: Partial<ConfiguracionDashboard>;
filtrosPeriodo?: FiltrosPeriodo;
compacto?: boolean;
soloLectura?: boolean;
alCargarDatos?: () => Promise<void>;
alCambiarPeriodo?: (filtros: FiltrosPeriodo) => void;
alConfirmarAlerta?: (alertaId: string) => void;
alExportarDatos?: (formato: 'json' | 'csv' | 'pdf') => void;
alSeleccionarMetrica?: (metricaId: string) => void;
alMostrarDetalles?: (tipo: 'metrica' | 'proyeccion' | 'alerta', id: string) => void;
className?: string;
variante?: 'completo' | 'compacto' | 'metricas-solo';
}
declare function BirhausFinancialDashboard({ metricas, posicionCaja, proyecciones, alertas, configuracion: configuracionPersonalizada, filtrosPeriodo: _filtrosPeriodo, compacto, soloLectura, alCargarDatos, alCambiarPeriodo: _alCambiarPeriodo, alConfirmarAlerta, alExportarDatos, alSeleccionarMetrica, alMostrarDetalles, className, variante }: PropsBirhausFinancialDashboard): react_jsx_runtime.JSX.Element;
/**
* BIRHAUS v3.0 Radical Minimalist Financial Dashboard
*
* Enhanced financial dashboard with glass morphism effects,
* generous spacing, and radical border radius for v3.0 design system.
*
* Features:
* - Glass morphism metric cards
* - Generous spacing (2x traditional)
* - Radical border radius (24px+ curves)
* - Smooth GPU-accelerated animations
* - Spanish-first financial terminology
* - Enhanced readability for financial data
*/
interface BirhausFinancialDashboardV3Props extends Omit<PropsBirhausFinancialDashboard, 'className'>, Omit<BirhausBasePropsV3, 'variant'> {
/** v3.0 glass intensity preset */
glassVariant?: 'subtle' | 'medium' | 'heavy';
/** Enable floating metric cards */
floatingCards?: boolean;
/** Enable magnetic hover effects on interactive elements */
magneticInteractions?: boolean;
/** Enable enhanced glass morphism throughout dashboard */
enableGlass?: boolean;
/** Performance optimization mode */
reducedMotion?: boolean;
/** v3 theme variant */
themeName?: 'financial' | 'healthcare' | 'education';
/** Enable glow effects for critical financial alerts */
glowAlerts?: boolean;
}
declare function BirhausFinancialDashboardV3({ glassVariant, floatingCards, magneticInteractions, enableGlass, reducedMotion, themeName, glowAlerts, className, configuracion, ...props }: BirhausFinancialDashboardV3Props): react_jsx_runtime.JSX.Element;
/**
* BIRHAUS v3.0 Enhanced Financial Metric Component
*/
interface MetricaFinancieraV3Props extends MetricaFinanciera {
/** v3 glass effect */
glass?: boolean;
/** v3 generous spacing */
generousSpacing?: boolean;
/** v3 radical border radius */
radicalBorderRadius?: boolean;
/** Enable magnetic hover effect */
magnetic?: boolean;
/** Enable glow effect for critical states */
glow?: boolean;
}
declare function MetricaFinancieraV3({ glass, generousSpacing, radicalBorderRadius, magnetic, glow, estado, ...metrica }: MetricaFinancieraV3Props): react_jsx_runtime.JSX.Element;
declare function useBirhausFinancialDashboardV3(initialConfiguration?: Partial<BirhausFinancialDashboardV3Props>): {
configuration: Partial<BirhausFinancialDashboardV3Props>;
updateConfiguration: (updates: Partial<BirhausFinancialDashboardV3Props>) => void;
enableGlassMorphism: () => void;
enableFloatingCards: () => void;
enableMagneticInteractions: () => void;
setTheme: (theme: "financial" | "healthcare" | "education") => void;
enablePerformanceMode: () => void;
isV3Enabled: boolean;
};
interface BirhausApprovalAction {
key: string;
labelEs: string;
labelEn?: string;
variant: 'primary' | 'secondary' | 'danger';
icon?: LucideIcon;
requiresReason?: boolean;
confirmationMessageEs?: string;
confirmationMessageEn?: string;
}
interface BirhausApprovalWorkflowProps<T> {
item: T;
renderItem: (item: T) => ReactNode;
actions?: BirhausApprovalAction[];
onAction: (action: string, item: T, reason?: string) => Promise<void>;
onCancel?: () => void;
titleEs?: string;
titleEn?: string;
reasonLabelEs?: string;
reasonLabelEn?: string;
reasonPlaceholderEs?: string;
reasonPlaceholderEn?: string;
cancelButtonEs?: string;
cancelButtonEn?: string;
confirmButtonEs?: string;
confirmButtonEn?: string;
loading?: boolean;
error?: string;
locale?: 'es' | 'en';
className?: string;
itemClassName?: string;
actionsClassName?: string;
}
declare const BirhausApprovalWorkflow: react.ForwardRefExoticComponent<BirhausApprovalWorkflowProps<any> & react.RefAttributes<HTMLDivElement>>;
declare function useBirhausApprovalWorkflow<T>(): {
item: T | null;
loading: boolean;
error: string | null;
startApproval: (newItem: T) => void;
clearApproval: () => void;
handleAction: (actionKey: string, approvalItem: T, reason?: string, actionHandler?: (action: string, item: T, reason?: string) => Promise<void>) => Promise<void>;
setError: react.Dispatch<react.SetStateAction<string | null>>;
};
declare const birhausApprovalActions: {
approveReject: ({
key: string;
labelEs: string;
labelEn: string;
variant: "primary";
icon: LucideIcon;
confirmationMessageEs: string;
confirmationMessageEn: string;
requiresReason?: undefined;
} | {
key: string;
labelEs: string;
labelEn: string;
variant: "danger";
icon: LucideIcon;
requiresReason: boolean;
confirmationMessageEs: string;
confirmationMessageEn: string;
})[];
financialApproval: ({
key: string;
labelEs: string;
labelEn: string;
variant: "primary";
icon: LucideIcon;
confirmationMessageEs: string;
confirmationMessageEn: string;
requiresReason?: undefined;
} | {
key: string;
labelEs: string;
labelEn: string;
variant: "danger";
icon: LucideIcon;
requiresReason: boolean;
confirmationMessageEs: string;
confirmationMessageEn: string;
})[];
documentApproval: ({
key: string;
labelEs: string;
labelEn: string;
variant: "primary";
icon: LucideIcon;
confirmationMessageEs: string;
confirmationMessageEn: string;
requiresReason?: undefined;
} | {
key: string;
labelEs: string;
labelEn: string;
variant: "secondary";
requiresReason: boolean;
confirmationMessageEs: string;
confirmationMessageEn: string;
icon?: undefined;
} | {
key: string;
labelEs: string;
labelEn: string;
variant: "danger";
icon: LucideIcon;
requiresReason: boolean;
confirmationMessageEs: string;
confirmationMessageEn: string;
})[];
};
interface BirhausRole {
id: string;
code: string;
name: string;
description?: string | null;
module: 'general' | 'academic' | 'financial' | 'administrative';
hierarchyLevel: number;
isSystem?: boolean;
isActive?: boolean;
metadata?: Record<string, any>;
}
interface BirhausUser {
id: string;
email: string;
fullName: string;
primaryRole?: BirhausRole | null;
additionalRoles?: BirhausRole[];
createdAt?: string;
metadata?: Record<string, any>;
}
interface BirhausRoleChangeEvent {
type: 'primary_role_assigned' | 'primary_role_removed' | 'additional_role_added' | 'additional_role_removed' | 'metadata_updated';
userId: string;
roleId?: string;
role?: BirhausRole;
oldValue?: any;
newValue?: any;
metadata?: Record<string, any>;
timestamp: string;
}
interface BirhausRoleManagerProps {
user: BirhausUser;
availableRoles: BirhausRole[];
onRoleChange: (event: BirhausRoleChangeEvent) => Promise<void>;
onClose?: () => void;
onSuccess?: () => void;
titleEs?: string;
titleEn?: string;
primaryRoleLabelEs?: string;
primaryRoleLabelEn?: string;
additionalRolesLabelEs?: string;
additionalRolesLabelEn?: string;
assignPrimaryRoleLabelEs?: string;
assignPrimaryRoleLabelEn?: string;
addAdditionalRoleLabelEs?: string;
addAdditionalRoleLabelEn?: string;
changeLabelEs?: string;
changeLabelEn?: string;
removeLabelEs?: string;
removeLabelEn?: string;
showAdvancedLabelEs?: string;
showAdvancedLabelEn?: string;
hideAdvancedLabelEs?: string;
hideAdvancedLabelEn?: string;
cancelLabelEs?: string;
cancelLabelEn?: string;
saveLabelEs?: string;
saveLabelEn?: string;
warningTitleEs?: string;
warningTitleEn?: string;
warningMessageEs?: string;
warningMessageEn?: string;
loading?: boolean;
error?: string | null;
locale?: 'es' | 'en';
showAdvancedByDefault?: boolean;
maxAdditionalRoles?: number;
allowPrimaryRoleChange?: boolean;
allowMultipleRoles?: boolean;
renderUserInfo?: (user: BirhausUser) => ReactNode;
renderRoleMetadata?: (role: BirhausRole, metadata: Record<string, any>) => ReactNode;
getRoleIcon?: (module: string) => LucideIcon;
getRoleColor?: (module: string) => string;
className?: string;
headerClassName?: string;
contentClassName?: string;
actionsClassName?: string;
}
declare const BirhausRoleManager: react.ForwardRefExoticComponent<BirhausRoleManagerProps & react.RefAttributes<HTMLDivElement>>;
declare function useBirhausRoleManager(initialUser: BirhausUser): {
user: BirhausUser;
loading: boolean;
error: string | null;
changes: BirhausRoleChangeEvent[];
hasUnsavedChanges: boolean;
updateUser: (newUser: BirhausUser) => void;
handleRoleChange: (event: BirhausRoleChangeEvent, changeHandler?: (event: BirhausRoleChangeEvent) => Promise<void>) => Promise<void>;
clearChanges: () => void;
setError: react.Dispatch<react.SetStateAction<string | null>>;
};
declare const birhausRoleConfigurations: {
education: {
maxAdditionalRoles: number;
allowMultipleRoles: boolean;
modules: string[];
hierarchyLevels: {
superAdmin: number;
director: number;
coordinator: number;
teacher: number;
staff: number;
};
};
financial: {
maxAdditionalRoles: number;
allowMultipleRoles: boolean;
modules: string[];
hierarchyLevels: {
cfo: number;
manager: number;
analyst: number;
clerk: number;
};
};
corporate: {
maxAdditionalRoles: number;
allowMultipleRoles: boolean;
modules: string[];
hierarchyLevels: {
ceo: number;
vp: number;
director: number;
manager: number;
employee: number;
};
};
};
interface BirhausSearchItem {
id: string;
type: string;
title: string;
subtitle?: string;
description?: string;
metadata?: Record<string, any>;
searchableText?: string;
icon?: LucideIcon | ReactNode;
badge?: {
labelEs: string;
labelEn?: string;
variant: 'success' | 'warning' | 'error' | 'info' | 'neutral';
};
status?: {
labelEs: string;
labelEn?: string;
variant: 'success' | 'warning' | 'error' | 'info';
showIndicator?: boolean;
};
recentlyUsed?: boolean;
frequency?: number;
}
interface BirhausSearchFilter {
key: string;
labelEs: string;
labelEn?: string;
type: 'select' | 'multiselect' | 'boolean' | 'text' | 'date';
options?: {
value: string;
labelEs: string;
labelEn?: string;
}[];
defaultValue?: any;
visible?: boolean;
}
interface BirhausSearchResult<T extends BirhausSearchItem = BirhausSearchItem> {
items: T[];
total: number;
hasMore: boolean;
suggestions?: string[];
categories?: {
[key: string]: number;
};
}
interface BirhausSmartSearchProps<T extends BirhausSearchItem = BirhausSearchItem> {
placeholderEs?: string;
placeholderEn?: string;
emptyStateMessageEs?: string;
emptyStateMessageEn?: string;
loadingMessageEs?: string;
loadingMessageEn?: string;
searchDelay?: number;
minSearchLength?: number;
maxResults?: number;
fuzzyThreshold?: number;
enableRecentSearches?: boolean;
enableSuggestions?: boolean;
enableMultiSelect?: boolean;
maxSelections?: number;
showSelectedCount?: boolean;
filters?: BirhausSearchFilter[];
showFilters?: boolean;
enableAdvancedFilters?: boolean;
onSearch: (query: string, filters?: Record<string, any>) => Promise<BirhausSearchResult<T>>;
onSelect?: (item: T, selectedItems?: T[]) => void;
onMultiSelect?: (selectedItems: T[]) => void;
onClearSelection?: () => void;
onFiltersChange?: (filters: Record<string, any>) => void;
renderItem?: (item: T, isSelected: boolean, isMultiSelect: boolean) => ReactNode;
renderEmptyState?: () => ReactNode;
renderLoadingState?: () => ReactNode;
className?: string;
dropdownClassName?: string;
itemClassName?: string;
initialQuery?: string;
initialFilters?: Record<string, any>;
preselectedItems?: T[];
ariaLabel?: string;
ariaDescription?: string;
autoFocus?: boolean;
clearOnSelect?: boolean;
}
interface BirhausSmartSearchHandle {
focus: () => void;
clear: () => void;
getQuery: () => string;
getSelectedItems: () => BirhausSearchItem[];
setQuery: (query: string) => void;
}
declare const BirhausSmartSearch: react__default.ForwardRefExoticComponent<BirhausSmartSearchProps<BirhausSearchItem> & react__default.RefAttributes<BirhausSmartSearchHandle>>;
declare function useBirhausSmartSearch<T extends BirhausSearchItem = BirhausSearchItem>(): {
selectedItems: T[];
recentSearches: string[];
addToRecent: (query: string) => void;
clearRecent: () => void;
addSelection: (item: T) => void;
removeSelection: (itemId: string) => void;
clearSelections: () => void;
setSelectedItems: react__default.Dispatch<react__default.SetStateAction<T[]>>;
};
declare const birhausSearchUtils: {
/**
* Simple fuzzy matching implementation
* BIRHAUS: Cognitive load optimization through intelligent search
*/
fuzzyMatch: (query: string, text: string, threshold?: number) => boolean;
/**
* Highlight matching text
*/
highlightMatch: (text: string, query: string) => string;
/**
* Sort items by relevance
* BIRHAUS: Progressive disclosure - show most relevant first
*/
sortByRelevance: <T extends BirhausSearchItem>(items: T[], query: string) => T[];
};
export { type AlertaFinanciera, type AuditEvent, AuditEventV3, type AuditEventV3Props, AuditTimeline, AuditTimelineV3, type AuditTimelineV3Props, type BirhausApprovalAction, BirhausApprovalWorkflow, type BirhausApprovalWorkflowProps, BirhausFinancialDashboard, BirhausFinancialDashboardV3, type BirhausFinancialDashboardV3Props, type BirhausRole, type BirhausRoleChangeEvent, BirhausRoleManager, type BirhausRoleManagerProps, type BirhausSearchFilter, type BirhausSearchItem, type BirhausSearchResult, BirhausSmartSearch, type BirhausSmartSearchHandle, type BirhausSmartSearchProps, type BirhausUser, type ConfiguracionDashboard, type DetalleFinanciero, type FiltrosPeriodo, type MetricaFinanciera, MetricaFinancieraV3, type MetricaFinancieraV3Props, type PosicionCaja, type PropsBirhausFinancialDashboard, type ProyeccionFlujo, type PuntoDatoTemporal, birhausApprovalActions, birhausRoleConfigurations, birhausSearchUtils, useAuditTimeline, useAuditTimelineV3, useBirhausApprovalWorkflow, useBirhausFinancialDashboardV3, useBirhausRoleManager, useBirhausSmartSearch };