-
-
- {getToastIcon(type)}
-
-
- {message}
+ return (
+
+
+
+ {getToastIcon(type)}
+
+
+ {message}
+
+
-
+ {autoClose > 0 && (
+
+ )}
- {autoClose > 0 && (
-
- )}
-
- );
-});
+ );
+ }
+);
// Toast container component
export const ToastContainer: React.FC
= ({
@@ -149,15 +157,12 @@ export const ToastContainer: React.FC = ({
limit = 3,
containerClassName,
theme = 'light',
- rtl = false
+ rtl = false,
}) => {
- const containerClasses = classNames(
- 'toast-container',
- containerClassName
- );
+ const containerClasses = classNames('toast-container', containerClassName);
// Group toasts by position
- const groupedToasts = toasts.reduce((acc, toast) => {
+ const groupedToasts = toasts.reduce>((acc, toast) => {
if (!acc[toast.position]) {
acc[toast.position] = [];
}
@@ -173,22 +178,14 @@ export const ToastContainer: React.FC = ({
className={containerClasses}
style={{
...styles.container,
- ...getPositionStyles(position as ToastPosition)
+ ...getPositionStyles(position as ToastPosition),
}}
aria-label="Notifications"
role="region"
>
- {positionToasts
- .slice(-limit)
- .map(toast => (
-
- ))}
+ {positionToasts.slice(-limit).map((toast) => (
+
+ ))}
))}
@@ -206,6 +203,8 @@ const getToastIcon = (type: ToastType): JSX.Element => {
return
âš ;
case ToastType.INFO:
return
ℹ;
+ default:
+ return
ℹ;
}
};
@@ -213,7 +212,7 @@ const getToastIcon = (type: ToastType): JSX.Element => {
const getPositionStyles = (position: ToastPosition): React.CSSProperties => {
const baseStyles: React.CSSProperties = {
position: 'fixed',
- zIndex: 'var(--z-index-toast)'
+ zIndex: 9999,
};
switch (position) {
@@ -225,62 +224,63 @@ const getPositionStyles = (position: ToastPosition): React.CSSProperties => {
return { ...baseStyles, bottom: 20, right: 20 };
case ToastPosition.BOTTOM_LEFT:
return { ...baseStyles, bottom: 20, left: 20 };
+ default:
+ return { ...baseStyles, top: 20, right: 20 };
}
};
// Styles
-const styles = {
+const styles: ToastStyles = {
container: {
display: 'flex',
- flexDirection: 'column' as const,
- gap: 'var(--spacing-sm)'
+ flexDirection: 'column',
+ gap: 8,
},
toast: {
backgroundColor: 'var(--color-background)',
- borderRadius: 'var(--border-radius-md)',
- boxShadow: 'var(--shadow-md)',
- minWidth: '300px',
- maxWidth: '500px',
- overflow: 'hidden'
+ borderRadius: 8,
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+ minWidth: 300,
+ maxWidth: 500,
+ overflow: 'hidden',
},
content: {
display: 'flex',
alignItems: 'center',
- padding: 'var(--spacing-md)',
- gap: 'var(--spacing-sm)'
+ padding: 12,
+ gap: 8,
},
icon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
- width: '24px',
- height: '24px'
+ width: 24,
+ height: 24,
+ flexShrink: 0,
},
message: {
flex: 1,
- fontSize: 'var(--font-size-sm)',
- lineHeight: 'var(--line-height-normal)',
- color: 'var(--color-text)'
+ marginRight: 8,
+ fontSize: 14,
+ lineHeight: 1.5,
},
closeButton: {
background: 'none',
border: 'none',
- padding: 'var(--spacing-xs)',
+ padding: '4px 8px',
cursor: 'pointer',
- fontSize: '20px',
- color: 'var(--color-text)',
- opacity: 0.7,
- transition: 'opacity var(--transition-fast)'
+ fontSize: 18,
+ opacity: 0.6,
+ transition: 'opacity 0.2s',
},
progressBar: {
- height: '3px',
- background: 'var(--color-accent)',
+ height: 4,
+ background: 'var(--color-primary)',
animation: 'progress-bar linear forwards',
- transformOrigin: 'left'
- }
+ },
};
Toast.displayName = 'Toast';
ToastContainer.displayName = 'ToastContainer';
-export default Toast;
\ No newline at end of file
+export default Toast;
diff --git a/src/web/src/components/common/Tooltip.tsx b/src/web/src/components/common/Tooltip.tsx
index 193b32797b..daebfc7ccb 100644
--- a/src/web/src/components/common/Tooltip.tsx
+++ b/src/web/src/components/common/Tooltip.tsx
@@ -4,9 +4,11 @@ import '../../styles/theme.css';
import '../../styles/animations.css';
// Types and Interfaces
+type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+
interface TooltipProps {
content: React.ReactNode;
- position?: 'top' | 'right' | 'bottom' | 'left';
+ position?: TooltipPosition;
children: React.ReactNode;
className?: string;
delay?: number;
@@ -21,8 +23,19 @@ interface Position {
left: string;
}
+interface TooltipContainerProps {
+ tooltipPosition: TooltipPosition;
+ isVisible: boolean;
+ style?: React.CSSProperties;
+}
+
// Styled Components
-const TooltipContainer = styled.div<{ position: string; isVisible: boolean }>`
+const TooltipContainer = styled.div.attrs
(
+ (props: TooltipContainerProps) => ({
+ style: props.style,
+ 'data-testid': 'tooltip-container',
+ })
+)`
position: fixed;
background-color: var(--color-primary);
color: #ffffff;
@@ -32,7 +45,7 @@ const TooltipContainer = styled.div<{ position: string; isVisible: boolean }>`
max-width: 300px;
z-index: var(--z-index-tooltip);
pointer-events: none;
- opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
+ opacity: ${({ isVisible }: TooltipContainerProps) => (isVisible ? 1 : 0)};
transition: opacity var(--transition-fast) ease-in-out;
box-shadow: var(--shadow-md);
@@ -50,97 +63,70 @@ const TooltipTrigger = styled.div`
const getTooltipPosition = (
triggerRect: DOMRect,
tooltipRect: DOMRect,
- position: string,
+ position: TooltipPosition,
offset: number
): Position => {
- const spacing = offset || 8;
- let top = 0;
- let left = 0;
+ let top = '0';
+ let left = '0';
switch (position) {
case 'top':
- top = triggerRect.top - tooltipRect.height - spacing;
- left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+ top = `${triggerRect.top - tooltipRect.height - offset}px`;
+ left = `${triggerRect.left + (triggerRect.width - tooltipRect.width) / 2}px`;
break;
case 'right':
- top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
- left = triggerRect.right + spacing;
+ top = `${triggerRect.top + (triggerRect.height - tooltipRect.height) / 2}px`;
+ left = `${triggerRect.right + offset}px`;
break;
case 'bottom':
- top = triggerRect.bottom + spacing;
- left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+ top = `${triggerRect.bottom + offset}px`;
+ left = `${triggerRect.left + (triggerRect.width - tooltipRect.width) / 2}px`;
break;
case 'left':
- top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
- left = triggerRect.left - tooltipRect.width - spacing;
+ top = `${triggerRect.top + (triggerRect.height - tooltipRect.height) / 2}px`;
+ left = `${triggerRect.left - tooltipRect.width - offset}px`;
break;
}
- // Viewport boundary checks
- const viewport = {
- width: window.innerWidth,
- height: window.innerHeight,
- };
-
- if (left < 0) left = spacing;
- if (left + tooltipRect.width > viewport.width) {
- left = viewport.width - tooltipRect.width - spacing;
- }
- if (top < 0) top = spacing;
- if (top + tooltipRect.height > viewport.height) {
- top = viewport.height - tooltipRect.height - spacing;
- }
-
- return {
- top: `${Math.round(top)}px`,
- left: `${Math.round(left)}px`,
- };
+ return { top, left };
};
-// Custom Hook for Position Management
const useTooltipPosition = (
triggerRef: React.RefObject,
tooltipRef: React.RefObject,
- position: string,
+ position: TooltipPosition,
offset: number
-) => {
- const [tooltipPosition, setTooltipPosition] = useState({ top: '0', left: '0' });
+): Position | null => {
+ const [tooltipPosition, setTooltipPosition] = useState(null);
const updatePosition = useCallback(() => {
- if (triggerRef.current && tooltipRef.current) {
- const triggerRect = triggerRef.current.getBoundingClientRect();
- const tooltipRect = tooltipRef.current.getBoundingClientRect();
- const newPosition = getTooltipPosition(triggerRect, tooltipRect, position, offset);
- setTooltipPosition(newPosition);
- }
- }, [triggerRef, tooltipRef, position, offset]);
+ if (!triggerRef.current || !tooltipRef.current) return null;
- useEffect(() => {
- updatePosition();
+ const triggerRect = triggerRef.current.getBoundingClientRect();
+ const tooltipRect = tooltipRef.current.getBoundingClientRect();
+ const newPosition = getTooltipPosition(triggerRect, tooltipRect, position, offset);
- const resizeObserver = new ResizeObserver(updatePosition);
- const scrollHandler = () => {
- requestAnimationFrame(updatePosition);
- };
+ setTooltipPosition(newPosition);
+ return newPosition;
+ }, [position, offset]);
- if (triggerRef.current) {
- resizeObserver.observe(triggerRef.current);
- }
+ useEffect(() => {
+ const handleScroll = (): void => {
+ updatePosition();
+ };
- window.addEventListener('scroll', scrollHandler, true);
- window.addEventListener('resize', updatePosition);
+ window.addEventListener('scroll', handleScroll, true);
+ window.addEventListener('resize', handleScroll);
return () => {
- resizeObserver.disconnect();
- window.removeEventListener('scroll', scrollHandler, true);
- window.removeEventListener('resize', updatePosition);
+ window.removeEventListener('scroll', handleScroll, true);
+ window.removeEventListener('resize', handleScroll);
};
}, [updatePosition]);
return tooltipPosition;
};
-// Main Component
export const Tooltip: React.FC = ({
content,
position = 'top',
@@ -155,33 +141,35 @@ export const Tooltip: React.FC = ({
const [isVisible, setIsVisible] = useState(false);
const triggerRef = useRef(null);
const tooltipRef = useRef(null);
- const timeoutRef = useRef();
+ const timeoutRef = useRef();
+
const tooltipPosition = useTooltipPosition(triggerRef, tooltipRef, position, offset);
const showTooltip = useCallback(() => {
if (disabled) return;
- timeoutRef.current = setTimeout(() => {
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = window.setTimeout(() => {
setIsVisible(true);
onShow?.();
}, delay);
- }, [disabled, delay, onShow]);
+ }, [delay, disabled, onShow]);
const hideTooltip = useCallback(() => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
+ clearTimeout(timeoutRef.current);
setIsVisible(false);
onHide?.();
}, [onHide]);
useEffect(() => {
return () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
+ clearTimeout(timeoutRef.current);
};
}, []);
+ if (disabled) {
+ return <>{children};
+ }
+
return (
= ({
onBlur={hideTooltip}
>
{children}
- {isVisible && (
+ {isVisible && tooltipPosition && (
{content}
@@ -208,4 +198,4 @@ export const Tooltip: React.FC = ({
);
};
-export default Tooltip;
\ No newline at end of file
+export default Tooltip;
diff --git a/src/web/src/components/layout/Header.tsx b/src/web/src/components/layout/Header.tsx
index c1923e7276..e6d79fa382 100644
--- a/src/web/src/components/layout/Header.tsx
+++ b/src/web/src/components/layout/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, memo } from 'react';
import { useNavigate } from 'react-router-dom'; // v6.0.0
import { useMetrics } from '../../hooks/useMetrics';
import { ProfileMenu } from '../user/ProfileMenu';
@@ -13,14 +13,14 @@ interface HeaderProps {
onThemeChange: (theme: 'light' | 'dark') => void;
}
-export const Header: React.FC = React.memo(
+const Header: React.FC = memo(
({ className = '', testId = 'main-header', onThemeChange }) => {
const navigate = useNavigate();
const { loading } = useMetrics();
// Handle logo click navigation
const handleLogoClick = useCallback(
- (event: React.MouseEvent | React.KeyboardEvent) => {
+ (event: React.MouseEvent | React.KeyboardEvent) => {
event.preventDefault();
if (event.type === 'keydown' && (event as React.KeyboardEvent).key !== 'Enter') {
return;
diff --git a/src/web/src/components/layout/Layout.tsx b/src/web/src/components/layout/Layout.tsx
index 13b6812dde..ec8f6dd148 100644
--- a/src/web/src/components/layout/Layout.tsx
+++ b/src/web/src/components/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, memo } from 'react';
import styled from '@emotion/styled';
import Header from './Header';
import Footer from './Footer';
@@ -14,6 +14,8 @@ interface LayoutProps {
direction?: 'ltr' | 'rtl';
}
+type SessionStatus = 'valid' | 'invalid' | 'loading';
+
// Styled Components
const LayoutContainer = styled.div<{ direction: 'ltr' | 'rtl' }>`
display: flex;
@@ -58,127 +60,126 @@ const SkipLink = styled.a`
`;
// Layout Component
-const Layout: React.FC = React.memo(
- ({ children, className = '', direction = 'ltr' }) => {
- // State Management
- const [sidebarOpen, setSidebarOpen] = useState(true);
- const { validateSession, sessionStatus } = useAuth();
- const [theme, setTheme] = useState<'light' | 'dark'>('light');
- const { showToast } = useToast();
-
- // Session Monitoring
- useEffect(() => {
- const checkSession = async () => {
- try {
- const isValid = await validateSession();
- if (!isValid) {
- showToast(
- 'Your session has expired. Please log in again.',
- ToastType.WARNING,
- ToastPosition.TOP_RIGHT
- );
- }
- } catch (error) {
- console.error('Session validation failed:', error);
+const Layout: React.FC = memo(({ children, className = '', direction = 'ltr' }) => {
+ // State Management
+ const [sidebarOpen, setSidebarOpen] = useState(true);
+ const { validateSession, sessionStatus } = useAuth();
+ const [theme, setTheme] = useState<'light' | 'dark'>('light');
+ const { showToast } = useToast();
+
+ // Session Monitoring
+ useEffect(() => {
+ const checkSession = async () => {
+ try {
+ const isValid = await validateSession();
+ if (!isValid) {
+ showToast(
+ 'Your session has expired. Please log in again.',
+ ToastType.WARNING,
+ ToastPosition.TOP_RIGHT
+ );
}
- };
-
- const sessionInterval = setInterval(checkSession, 60000); // Check every minute
- return () => clearInterval(sessionInterval);
- }, [validateSession]);
-
- // Theme Change Handler
- const handleThemeChange = useCallback((newTheme: 'light' | 'dark') => {
- setTheme(newTheme);
- document.documentElement.classList.toggle('theme-dark', newTheme === 'dark');
- }, []);
-
- // Sidebar Toggle Handler
- const toggleSidebar = useCallback(() => {
- setSidebarOpen((prev) => !prev);
- }, []);
-
- // Error Handler
- const handleError = useCallback((error: Error) => {
- showToast(error.message, ToastType.ERROR, ToastPosition.TOP_RIGHT);
- }, []);
-
- // Keyboard Navigation Handler
- const handleKeyDown = useCallback(
- (event: KeyboardEvent) => {
- if (event.altKey) {
- switch (event.key) {
- case 'n':
- const skipLink = document.querySelector('#skip-to-content');
- if (skipLink instanceof HTMLElement) {
- skipLink.focus();
- }
- break;
- case 'm':
- toggleSidebar();
- break;
- default:
- break;
+ } catch (error) {
+ console.error('Session validation failed:', error);
+ }
+ };
+
+ const sessionInterval = setInterval(checkSession, 60000); // Check every minute
+ return () => clearInterval(sessionInterval);
+ }, [validateSession]);
+
+ // Theme Change Handler
+ const handleThemeChange = useCallback((newTheme: 'light' | 'dark') => {
+ setTheme(newTheme);
+ document.documentElement.classList.toggle('theme-dark', newTheme === 'dark');
+ }, []);
+
+ // Sidebar Toggle Handler
+ const toggleSidebar = useCallback(() => {
+ setSidebarOpen((prev) => !prev);
+ }, []);
+
+ // Error Handler
+ const handleError = useCallback((error: Error) => {
+ showToast(error.message, ToastType.ERROR, ToastPosition.TOP_RIGHT);
+ }, []);
+
+ // Keyboard Navigation Handler
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (event.altKey) {
+ switch (event.key) {
+ case 'n': {
+ const skipLink = document.querySelector('#skip-to-content') as HTMLElement | null;
+ if (skipLink) {
+ skipLink.focus();
+ }
+ break;
}
+ case 'm':
+ toggleSidebar();
+ break;
+ default:
+ break;
}
- },
- [toggleSidebar]
- );
-
- useEffect(() => {
- window.addEventListener('keydown', handleKeyDown);
- return () => window.removeEventListener('keydown', handleKeyDown);
- }, [handleKeyDown]);
-
- return (
-
- {
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [handleKeyDown]);
+
+ return (
+
+
+ {/* Skip Navigation Link */}
+
+ Skip to main content
+
+
+ {/* Header Component */}
+
+
+ {/* Sidebar Component */}
+
+
+ {/* Main Content Area */}
+
- {/* Skip Navigation Link */}
-
- Skip to main content
-
-
- {/* Header Component */}
-
-
- {/* Sidebar Component */}
-
-
- {/* Main Content Area */}
-
- {children}
-
-
- {/* Footer Component */}
-
-
-
- );
- }
-);
+ {children}
+
+
+ {/* Footer Component */}
+
+
+
+ );
+});
// Display name for debugging
Layout.displayName = 'Layout';
diff --git a/src/web/src/components/layout/Navigation.tsx b/src/web/src/components/layout/Navigation.tsx
index 9607a5e692..2d62af418e 100644
--- a/src/web/src/components/layout/Navigation.tsx
+++ b/src/web/src/components/layout/Navigation.tsx
@@ -14,7 +14,8 @@ import {
ListItemText,
Collapse,
useMediaQuery,
- Theme
+ Theme,
+ useTheme,
} from '@mui/material';
import {
Dashboard as DashboardIcon,
@@ -24,13 +25,20 @@ import {
ExpandLess,
ExpandMore,
ChevronLeft,
- ChevronRight
+ ChevronRight,
} from '@mui/icons-material';
import { useAuth } from '../../hooks/useAuth';
-import { analytics } from '@analytics/react';
+import { AnalyticsBrowser } from '@segment/analytics-next';
import { UI_CONSTANTS } from '../../config/constants';
-// Interfaces
+interface IUser {
+ id: string;
+ role: string;
+ permissions: string[];
+ name?: string;
+ email?: string;
+}
+
interface NavigationProps {
isCollapsed: boolean;
theme: Theme;
@@ -49,12 +57,30 @@ interface NavItem {
ariaLabel?: string;
}
+interface StyledNavigationProps {
+ isCollapsed: boolean;
+ theme: Theme;
+}
+
+interface StyledListItemProps {
+ active?: boolean;
+ theme: Theme;
+ onClick?: () => void;
+ 'aria-label'?: string;
+ 'aria-expanded'?: boolean;
+ 'aria-current'?: 'page' | undefined;
+}
+
+// Constants
+const MOBILE_BREAKPOINT = '768px'; // Mobile breakpoint from UI_CONSTANTS
+const DEFAULT_SPACING = 2; // Default spacing in rem
+
// Styled Components
-const StyledNavigation = styled.nav<{ isCollapsed: boolean; theme: Theme }>`
- width: ${props => props.isCollapsed ? '64px' : UI_CONSTANTS.SIDEBAR_WIDTH};
+const StyledNavigation = styled('nav')`
+ width: ${({ isCollapsed }) => (isCollapsed ? '64px' : UI_CONSTANTS.SIDEBAR_WIDTH)};
height: 100vh;
- background-color: ${props => props.theme.palette.primary.main};
- color: ${props => props.theme.palette.primary.contrastText};
+ background-color: ${({ theme }) => theme.palette.primary.main};
+ color: ${({ theme }) => theme.palette.primary.contrastText};
transition: width 0.3s ease;
overflow-x: hidden;
overflow-y: auto;
@@ -62,9 +88,9 @@ const StyledNavigation = styled.nav<{ isCollapsed: boolean; theme: Theme }>`
left: 0;
top: ${UI_CONSTANTS.HEADER_HEIGHT};
z-index: 1000;
-
- @media (max-width: ${UI_CONSTANTS.BREAKPOINTS.MOBILE}) {
- width: ${props => props.isCollapsed ? '0' : UI_CONSTANTS.SIDEBAR_WIDTH};
+
+ @media (max-width: ${MOBILE_BREAKPOINT}) {
+ width: ${({ isCollapsed }) => (isCollapsed ? '0' : UI_CONSTANTS.SIDEBAR_WIDTH)};
}
/* Scrollbar styling */
@@ -73,21 +99,21 @@ const StyledNavigation = styled.nav<{ isCollapsed: boolean; theme: Theme }>`
}
&::-webkit-scrollbar-track {
- background: ${props => props.theme.palette.primary.dark};
+ background: ${({ theme }) => theme.palette.primary.light};
}
&::-webkit-scrollbar-thumb {
- background: ${props => props.theme.palette.primary.light};
+ background: ${({ theme }) => theme.palette.primary.dark};
border-radius: 3px;
}
`;
-const StyledListItem = styled(ListItem)<{ active?: boolean }>`
- padding: ${props => props.theme.spacing(2)};
- color: ${props => props.active ? props.theme.palette.secondary.main : 'inherit'};
-
+const StyledListItem = styled(ListItem)`
+ padding: ${DEFAULT_SPACING}rem;
+ color: ${({ active, theme }) => (active ? theme.palette.secondary.main : 'inherit')};
+
&:hover {
- background-color: ${props => props.theme.palette.primary.dark};
+ background-color: ${({ theme }) => theme.palette.primary.light};
}
.MuiListItemIcon-root {
@@ -105,7 +131,7 @@ const NAV_ITEMS: NavItem[] = [
icon: ,
roles: ['user', 'admin'],
permissions: ['view:dashboard'],
- ariaLabel: 'Navigate to Dashboard'
+ ariaLabel: 'Navigate to Dashboard',
},
{
id: 'benchmarks',
@@ -114,7 +140,7 @@ const NAV_ITEMS: NavItem[] = [
icon: ,
roles: ['user', 'admin'],
permissions: ['view:benchmarks'],
- ariaLabel: 'Navigate to Benchmarks'
+ ariaLabel: 'Navigate to Benchmarks',
},
{
id: 'metrics',
@@ -123,7 +149,7 @@ const NAV_ITEMS: NavItem[] = [
icon: ,
roles: ['user', 'admin'],
permissions: ['view:metrics', 'edit:metrics'],
- ariaLabel: 'Navigate to Company Metrics'
+ ariaLabel: 'Navigate to Company Metrics',
},
{
id: 'admin',
@@ -132,62 +158,70 @@ const NAV_ITEMS: NavItem[] = [
icon: ,
roles: ['admin'],
permissions: ['admin:access'],
- ariaLabel: 'Navigate to Admin Panel'
- }
+ ariaLabel: 'Navigate to Admin Panel',
+ },
];
export const Navigation: React.FC = ({
isCollapsed,
theme,
ariaLabel = 'Main Navigation',
- onNavigationError
+ onNavigationError,
}) => {
const { user, validateSession } = useAuth();
const navigate = useNavigate();
const location = useLocation();
- const isMobile = useMediaQuery(`(max-width: ${UI_CONSTANTS.BREAKPOINTS.MOBILE})`);
+ const muiTheme = useTheme();
+ const isMobile = useMediaQuery(`(max-width: ${MOBILE_BREAKPOINT})`);
const [expandedItems, setExpandedItems] = useState([]);
// Filter navigation items based on user role and permissions
- const filteredNavItems = NAV_ITEMS.filter(item => {
- if (!user) return false;
- return item.roles.includes(user.role) &&
- item.permissions.every(permission => user.permissions?.includes(permission));
+ const filteredNavItems = NAV_ITEMS.filter((item) => {
+ if (!user || !user.permissions) return false;
+ return (
+ item.roles.includes(user.role) &&
+ item.permissions.every((permission) => user.permissions.includes(permission))
+ );
});
// Handle navigation item click
- const handleNavClick = useCallback(async (path: string, item: NavItem) => {
- try {
- // Validate session before navigation
- const isSessionValid = await validateSession();
- if (!isSessionValid) {
- throw new Error('Session expired');
- }
+ const handleNavClick = useCallback(
+ async (path: string, item: NavItem) => {
+ try {
+ // Validate session before navigation
+ const isSessionValid = await validateSession();
+ if (!isSessionValid) {
+ throw new Error('Session expired');
+ }
- // Track navigation event
- analytics.track('navigation_click', {
- path,
- itemId: item.id,
- timestamp: new Date().toISOString()
- });
+ const analyticsInstance = AnalyticsBrowser.load({
+ writeKey: process.env.VITE_SEGMENT_WRITE_KEY || '',
+ });
- // Handle mobile menu
- if (isMobile) {
- setExpandedItems([]);
- }
+ // Track navigation event
+ analyticsInstance.track('navigation_click', {
+ path,
+ itemId: item.id,
+ timestamp: new Date().toISOString(),
+ });
- navigate(path);
- } catch (error) {
- onNavigationError?.(error as Error);
- }
- }, [navigate, validateSession, isMobile, onNavigationError]);
+ // Handle mobile menu
+ if (isMobile) {
+ setExpandedItems([]);
+ }
+
+ navigate(path);
+ } catch (error) {
+ onNavigationError?.(error as Error);
+ }
+ },
+ [navigate, validateSession, isMobile, onNavigationError]
+ );
// Toggle expanded state for items with children
const toggleExpand = (itemId: string) => {
- setExpandedItems(prev =>
- prev.includes(itemId)
- ? prev.filter(id => id !== itemId)
- : [...prev, itemId]
+ setExpandedItems((prev) =>
+ prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
);
};
@@ -207,10 +241,11 @@ export const Navigation: React.FC = ({
item.children ? toggleExpand(item.id) : handleNavClick(item.path, item)}
+ onClick={() => (item.children ? toggleExpand(item.id) : handleNavClick(item.path, item))}
aria-label={item.ariaLabel}
aria-expanded={item.children ? isExpanded : undefined}
aria-current={isActive ? 'page' : undefined}
+ theme={theme}
>
{item.icon}
{!isCollapsed && (
@@ -223,7 +258,7 @@ export const Navigation: React.FC = ({
{item.children && (
- {item.children.map(child => renderNavItem(child))}
+ {item.children.map((child) => renderNavItem(child))}
)}
@@ -231,6 +266,14 @@ export const Navigation: React.FC = ({
);
};
+ const handleBackNavigation = () => {
+ if (isCollapsed) {
+ navigate('/');
+ } else {
+ navigate(-1);
+ }
+ };
+
return (
= ({
{filteredNavItems.map(renderNavItem)}
{!isMobile && (
- navigate(isCollapsed ? '/' : -1)}>
- {isCollapsed ? : }
-
+ {isCollapsed ? : }
)}
);
};
-export default Navigation;
\ No newline at end of file
+export default Navigation;
diff --git a/src/web/src/components/layout/Sidebar.tsx b/src/web/src/components/layout/Sidebar.tsx
index 800558f980..92fc05e228 100644
--- a/src/web/src/components/layout/Sidebar.tsx
+++ b/src/web/src/components/layout/Sidebar.tsx
@@ -5,19 +5,20 @@
*/
import React, { useCallback, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
-import { Drawer, IconButton, useTheme, useMediaQuery } from '@mui/material';
+import { Drawer, IconButton, useMediaQuery, Box } from '@mui/material';
+import { Theme, useTheme } from '@mui/material/styles';
import { ChevronLeft, ChevronRight } from '@mui/icons-material';
import { Navigation } from './Navigation';
import { useAuth } from '../../hooks/useAuth';
import { UI_CONSTANTS } from '../../config/constants';
+import styled from '@emotion/styled';
// Constants
-const DRAWER_WIDTH = parseInt(UI_CONSTANTS.SIDEBAR_WIDTH);
+const DRAWER_WIDTH = 240;
const COLLAPSED_WIDTH = 64;
const TRANSITION_DURATION = 225;
const KEYBOARD_SHORTCUTS = {
- TOGGLE: 'mod+b'
+ TOGGLE: 'mod+b',
} as const;
// Interfaces
@@ -27,28 +28,20 @@ interface SidebarProps {
onError?: (error: Error) => void;
className?: string;
ariaLabel?: string;
+ isMobile?: boolean;
}
-// Styled Components
-const StyledDrawer = styled(Drawer)<{ open: boolean; theme: any }>`
- width: ${props => props.open ? DRAWER_WIDTH : COLLAPSED_WIDTH}px;
+const StyledDrawer = styled(Drawer)`
+ width: var(--spacing-xxl);
flex-shrink: 0;
white-space: nowrap;
- background-color: ${props => props.theme.palette.primary.main};
- transition: width ${TRANSITION_DURATION}ms cubic-bezier(0.4, 0, 0.6, 1);
- direction: ${props => props.theme.direction};
& .MuiDrawer-paper {
- width: ${props => props.open ? DRAWER_WIDTH : COLLAPSED_WIDTH}px;
- overflow-x: hidden;
- background-color: ${props => props.theme.palette.primary.main};
- color: ${props => props.theme.palette.primary.contrastText};
- transition: width ${TRANSITION_DURATION}ms cubic-bezier(0.4, 0, 0.6, 1);
- border-right: 1px solid ${props => props.theme.palette.divider};
-
- @media (max-width: ${UI_CONSTANTS.BREAKPOINTS.MOBILE}) {
- width: ${props => props.open ? DRAWER_WIDTH : 0}px;
- }
+ width: var(--spacing-xxl);
+ box-sizing: border-box;
+ background-color: var(--color-primary);
+ color: var(--color-surface);
+ transition: var(--transition-fast);
}
`;
@@ -56,21 +49,35 @@ const DrawerHeader = styled.div`
display: flex;
align-items: center;
justify-content: flex-end;
- padding: ${props => props.theme.spacing(0, 1)};
- min-height: ${UI_CONSTANTS.HEADER_HEIGHT};
+ padding: var(--spacing-sm);
+ min-height: 64px;
position: sticky;
top: 0;
z-index: 1;
background-color: inherit;
- border-bottom: 1px solid ${props => props.theme.palette.divider};
+ border-bottom: 1px solid var(--color-surface);
`;
-const ToggleButton = styled(IconButton)`
- margin: ${props => props.theme.spacing(0, 0.5)};
- color: ${props => props.theme.palette.primary.contrastText};
-
+const ToggleButton = styled.button`
+ width: var(--spacing-lg);
+ height: var(--spacing-lg);
+ margin: 0 var(--spacing-xs);
+ border: none;
+ border-radius: 50%;
+ background-color: var(--color-surface);
+ color: var(--color-primary);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: var(--transition-fast);
+
+ &:hover {
+ background-color: var(--color-background);
+ }
+
&:focus-visible {
- outline: 2px solid ${props => props.theme.palette.secondary.main};
+ outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
`;
@@ -78,102 +85,132 @@ const ToggleButton = styled(IconButton)`
/**
* Enhanced Sidebar component with accessibility and performance optimizations
*/
-export const Sidebar: React.FC = React.memo(({
- isOpen,
- onToggle,
- onError,
- className,
- ariaLabel = 'Main Sidebar Navigation'
-}) => {
- const theme = useTheme();
- const { validateSession } = useAuth();
- const isMobile = useMediaQuery(`(max-width: ${UI_CONSTANTS.BREAKPOINTS.MOBILE})`);
- const sidebarRef = useRef(null);
-
- // Handle keyboard shortcuts
- useEffect(() => {
- const handleKeyPress = async (event: KeyboardEvent) => {
- const isMod = event.metaKey || event.ctrlKey;
- if (isMod && event.key === 'b') {
- event.preventDefault();
- try {
- const isValid = await validateSession();
- if (isValid) {
- onToggle();
+export const Sidebar: React.FC = React.memo(
+ ({
+ isOpen,
+ onToggle,
+ onError,
+ className,
+ ariaLabel = 'Main Sidebar Navigation',
+ isMobile = false,
+ }) => {
+ const theme = useTheme();
+ const { validateSession, isAuthenticated } = useAuth();
+ const sidebarRef = useRef(null);
+
+ // Handle keyboard shortcuts
+ useEffect(() => {
+ const handleKeyPress = async (event: KeyboardEvent) => {
+ const isMod = event.metaKey || event.ctrlKey;
+ if (isMod && event.key === 'b') {
+ event.preventDefault();
+ try {
+ const isValid = await validateSession();
+ if (isValid) {
+ onToggle();
+ }
+ } catch (error) {
+ onError?.(error as Error);
}
- } catch (error) {
- onError?.(error as Error);
}
- }
- };
+ };
- window.addEventListener('keydown', handleKeyPress);
- return () => window.removeEventListener('keydown', handleKeyPress);
- }, [onToggle, validateSession, onError]);
+ window.addEventListener('keydown', handleKeyPress);
+ return () => window.removeEventListener('keydown', handleKeyPress);
+ }, [onToggle, validateSession, onError]);
- // Handle focus management
- useEffect(() => {
- if (!isOpen && document.activeElement instanceof HTMLElement) {
- if (sidebarRef.current?.contains(document.activeElement)) {
- document.activeElement.blur();
+ // Handle focus management
+ useEffect(() => {
+ if (!isOpen && document.activeElement instanceof HTMLElement) {
+ if (sidebarRef.current?.contains(document.activeElement)) {
+ document.activeElement.blur();
+ }
}
- }
- }, [isOpen]);
-
- // Memoized toggle handler
- const handleToggle = useCallback(async () => {
- try {
- const isValid = await validateSession();
- if (isValid) {
- onToggle();
+ }, [isOpen]);
+
+ // Memoized toggle handler
+ const handleToggle = useCallback(async () => {
+ try {
+ const isValid = await validateSession();
+ if (isValid) {
+ onToggle();
+ }
+ } catch (error) {
+ onError?.(error as Error);
}
- } catch (error) {
- onError?.(error as Error);
+ }, [onToggle, validateSession, onError]);
+
+ if (!isAuthenticated) {
+ return null;
}
- }, [onToggle, validateSession, onError]);
-
- return (
-
-
-
- {theme.direction === 'rtl' ? (
- isOpen ? :
- ) : (
- isOpen ? :
- )}
-
-
-
-
-
- );
-});
+
+ return (
+
+
+
+ {document.dir === 'rtl' ? (
+ isOpen ? (
+
+ ) : (
+
+ )
+ ) : isOpen ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+ }
+);
Sidebar.displayName = 'Sidebar';
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/src/web/src/components/metrics/CompanyMetricForm.tsx b/src/web/src/components/metrics/CompanyMetricForm.tsx
index 111943b91f..2de287e1a2 100644
--- a/src/web/src/components/metrics/CompanyMetricForm.tsx
+++ b/src/web/src/components/metrics/CompanyMetricForm.tsx
@@ -1,9 +1,18 @@
import React, { useCallback, useEffect } from 'react';
import styled from '@emotion/styled';
import { useForm } from 'react-hook-form';
-import { Input, InputProps } from '../common/Input';
+import { Input } from '../common/Input';
import { ICompanyMetric } from '../../interfaces/ICompanyMetric';
import { useCompanyMetrics } from '../../hooks/useCompanyMetrics';
+import { AxiosError } from 'axios';
+import { useAuth } from '../../hooks/useAuth';
+
+interface ApiError {
+ errors: Array<{
+ field: string;
+ message: string;
+ }>;
+}
// Styled components with enterprise-ready styling
const StyledForm = styled.form`
@@ -46,8 +55,10 @@ const StyledButton = styled.button<{ variant?: 'primary' | 'secondary' }>`
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast);
cursor: pointer;
-
- ${({ variant = 'secondary' }) => variant === 'primary' ? `
+
+ ${({ variant = 'secondary' }) =>
+ variant === 'primary'
+ ? `
background-color: var(--color-primary);
color: white;
border: none;
@@ -55,7 +66,8 @@ const StyledButton = styled.button<{ variant?: 'primary' | 'secondary' }>`
&:hover:not(:disabled) {
background-color: var(--color-primary-dark);
}
- ` : `
+ `
+ : `
background-color: transparent;
color: var(--color-text);
border: 1px solid var(--border-color-normal);
@@ -74,7 +86,7 @@ const StyledButton = styled.button<{ variant?: 'primary' | 'secondary' }>`
// Props interface
interface CompanyMetricFormProps {
initialData?: ICompanyMetric;
- onSubmitSuccess: () => void;
+ onSubmitSuccess: (metricData: ICompanyMetric) => Promise;
onCancel: () => void;
isSubmitting: boolean;
}
@@ -83,28 +95,31 @@ interface CompanyMetricFormProps {
interface FormValues {
value: number;
metricId: string;
- metadata?: Record;
+ metadata: Record;
}
export const CompanyMetricForm: React.FC = ({
initialData,
onSubmitSuccess,
onCancel,
- isSubmitting
+ isSubmitting,
}) => {
+ // Get user info
+ const { user } = useAuth();
+
// Initialize form with react-hook-form
const {
register,
handleSubmit,
formState: { errors, isDirty },
reset,
- setError
+ setError,
} = useForm({
defaultValues: {
- value: initialData?.value || 0,
- metricId: initialData?.metricId || '',
- metadata: initialData?.metadata || {}
- }
+ value: initialData?.value ?? 0,
+ metricId: initialData?.metricId ?? '',
+ metadata: initialData?.metadata ?? {},
+ },
});
// Get company metrics operations
@@ -116,51 +131,95 @@ export const CompanyMetricForm: React.FC = ({
reset({
value: initialData.value,
metricId: initialData.metricId,
- metadata: initialData.metadata
+ metadata: initialData.metadata ?? {},
});
}
}, [initialData, reset]);
// Form submission handler
- const onSubmit = useCallback(async (formData: FormValues) => {
- try {
- if (initialData) {
- // Update existing metric
- await updateMetric(initialData.id, {
- value: formData.value,
- metadata: formData.metadata
- });
- } else {
- // Create new metric
- await createMetric({
- value: formData.value,
- metricId: formData.metricId,
- metadata: formData.metadata,
- timestamp: new Date().toISOString()
- });
- }
- onSubmitSuccess();
- } catch (error) {
- // Handle validation errors
- if (error.response?.data?.errors) {
- error.response.data.errors.forEach((err: any) => {
- setError(err.field as keyof FormValues, {
+ const onSubmit = useCallback(
+ async (formData: FormValues) => {
+ try {
+ if (isNaN(formData.value)) {
+ setError('value', {
type: 'manual',
- message: err.message
+ message: 'Please enter a valid number',
});
- });
+ return;
+ }
+
+ const now = new Date().toISOString();
+ let metricData: ICompanyMetric;
+
+ if (initialData) {
+ // Update existing metric
+ metricData = {
+ ...initialData,
+ value: Number(formData.value),
+ metadata: formData.metadata ?? {},
+ lastModified: now,
+ };
+ await updateMetric(initialData.id, metricData);
+ } else {
+ if (!user?.id) {
+ throw new Error('User not authenticated');
+ }
+ // Create new metric
+ metricData = {
+ id: '', // Will be set by the server
+ userId: user.id,
+ value: Number(formData.value),
+ metricId: formData.metricId,
+ metadata: formData.metadata ?? {},
+ timestamp: now,
+ isActive: true,
+ metric: {
+ id: formData.metricId,
+ name: '', // Will be populated by the server
+ description: '', // Will be populated by the server
+ category: 'financial', // Default category, will be updated by server
+ valueType: 'number', // Default type, will be updated by server
+ validationRules: {}, // Will be populated by server
+ isActive: true,
+ displayOrder: 0,
+ tags: [],
+ metadata: {},
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ },
+ lastModified: now,
+ createdAt: now,
+ };
+ await createMetric(metricData);
+ }
+ await onSubmitSuccess(metricData);
+ } catch (error) {
+ // Handle validation errors
+ if (error instanceof AxiosError && error.response?.data?.errors) {
+ const apiError = error.response.data as ApiError;
+ apiError.errors.forEach((err) => {
+ setError(err.field as keyof FormValues, {
+ type: 'manual',
+ message: err.message,
+ });
+ });
+ }
}
- }
- }, [initialData, createMetric, updateMetric, onSubmitSuccess, setError]);
+ },
+ [initialData, createMetric, updateMetric, onSubmitSuccess, setError, user]
+ );
// Handle form cancellation
- const handleCancel = useCallback((e: React.MouseEvent) => {
- e.preventDefault();
- onCancel();
- }, [onCancel]);
+ const handleCancel = useCallback(
+ (e: React.MouseEvent) => {
+ e.preventDefault();
+ onCancel();
+ },
+ [onCancel]
+ );
return (
- = ({
{!initialData && (
= ({
)}
-
+
Cancel
-
+
{isSubmitting ? 'Saving...' : initialData ? 'Update' : 'Create'}
@@ -220,4 +273,4 @@ export const CompanyMetricForm: React.FC = ({
);
};
-export default CompanyMetricForm;
\ No newline at end of file
+export default CompanyMetricForm;
diff --git a/src/web/src/components/metrics/MetricCard.tsx b/src/web/src/components/metrics/MetricCard.tsx
index 60eff5e43f..1b359b6fb2 100644
--- a/src/web/src/components/metrics/MetricCard.tsx
+++ b/src/web/src/components/metrics/MetricCard.tsx
@@ -1,9 +1,75 @@
-import React from 'react'; // ^18.2.0
-import classnames from 'classnames'; // ^2.3.2
-import { Card, CardProps } from '../common/Card';
+import React from 'react';
+import classnames from 'classnames';
+import styled from '@emotion/styled';
+import { Card } from '../common/Card';
import { IMetric, MetricCategory } from '../../interfaces/IMetric';
import { formatMetricValue } from '../../utils/numberFormatters';
+const StyledCard = styled(Card)<{ isSelected: boolean; isInteractive: boolean }>`
+ min-width: 200px;
+ min-height: 120px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ transition: all var(--transition-fast);
+ position: relative;
+ transform: ${({ isSelected }) => (isSelected ? 'translateY(-2px)' : 'none')};
+
+ &:hover {
+ transform: ${({ isInteractive }) => (isInteractive ? 'translateY(-1px)' : 'none')};
+ }
+
+ @media (max-width: var(--breakpoint-mobile)) {
+ min-width: 100%;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+`;
+
+const CardContent = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+`;
+
+const Title = styled.h3`
+ font-size: var(--font-size-md);
+ font-weight: var(--font-weight-medium);
+ color: var(--color-text);
+ line-height: var(--line-height-tight);
+ margin: 0;
+`;
+
+const Value = styled.div<{ categoryColor: string }>`
+ font-size: var(--font-size-xl);
+ font-weight: var(--font-weight-bold);
+ color: ${({ categoryColor }) => categoryColor};
+ transition: color var(--transition-fast);
+
+ @media (max-width: var(--breakpoint-mobile)) {
+ font-size: var(--font-size-lg);
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+`;
+
+const Category = styled.div`
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+`;
+
+const Description = styled.div`
+ font-size: var(--font-size-sm);
+ color: var(--color-text-secondary);
+ margin-top: var(--spacing-xs);
+`;
+
interface MetricCardProps {
metric: IMetric;
value: number;
@@ -26,142 +92,58 @@ const getCategoryColor = (category: MetricCategory): string => {
}
};
-const MetricCard: React.FC = React.memo(({
- metric,
- value,
- selected = false,
- onClick,
- className,
- testId = 'metric-card',
-}) => {
- const formattedValue = React.useMemo(() => {
- try {
- return formatMetricValue(value, metric.valueType,
- metric.validationRules.precision || 2,
- { ariaLabel: `${metric.name}: ${value}` }
- );
- } catch (error) {
- console.error('Error formatting metric value:', error);
- return 'Error';
- }
- }, [value, metric]);
-
- const handleKeyDown = React.useCallback((event: React.KeyboardEvent) => {
- if (onClick && (event.key === 'Enter' || event.key === ' ')) {
- event.preventDefault();
- onClick();
- }
- }, [onClick]);
-
- const cardClasses = classnames(
- 'metric-card',
- {
- 'metric-card--selected': selected,
- 'metric-card--interactive': !!onClick,
- },
- className
- );
-
- return (
-
-
-
{metric.name}
-
-
- {metric.category.toUpperCase()}
-
- {metric.description && (
-
- {metric.description}
-
- )}
-
Loading...
;
}
- }, 300), [metric.id, compareBenchmark, validateMetricValue, onComparisonComplete]);
-
- /**
- * Formats percentile values based on metric type
- */
- const formatPercentileValue = useCallback((value: number, valueType: MetricValueType): string => {
- return formatMetricValue(value, valueType);
- }, []);
-
- /**
- * Gets accessibility label for comparison result
- */
- const getComparisonAriaLabel = useCallback((result: ComparisonResult): string => {
- const percentile = result.percentile;
- const direction = result.trend?.direction;
- const magnitude = result.trend?.magnitude;
-
- return `Your ${metric.name} is in the ${percentile}th percentile. ${
- direction && magnitude
- ? `Trending ${direction} by ${magnitude}%`
- : ''
- }`;
- }, [metric.name]);
-
- // Initial data fetch
- useEffect(() => {
- fetchBenchmarkData(metric.id, revenueRange);
- }, [metric.id, revenueRange, fetchBenchmarkData]);
-
- // Update comparison when company value changes
- useEffect(() => {
- if (typeof companyValue === 'number') {
- handleComparisonUpdate(companyValue);
+
+ if (localError || benchmarkError) {
+ const errorMessage =
+ localError || (benchmarkError as unknown as BenchmarkError)?.message || 'An error occurred';
+ return {errorMessage};
}
- }, [companyValue, handleComparisonUpdate]);
- // Render loading state
- if (loading) {
- return (
-
-
-
Loading comparison data...
-
No benchmark data available.
;
+ }
- // Render error state
- if (error || localError) {
return (
-
-
{error || localError}
-
-
- {/* Chart Section */}
-
-
- {/* Percentile Breakdown */}
-
- {benchmarks[0] && (
-
- {(['p10', 'p25', 'p50', 'p75', 'p90'] as const).map((percentile) => (
-
-
- {percentile.substring(1)}th Percentile
-
-
- {formatPercentileValue(benchmarks[0][percentile], metric.valueType)}
-
-
- ))}
-
-
- {/* Comparison Results */}
- {comparison && (
-
-
-
Comparison Result
-
- Your {metric.name} is in the {comparison.percentile}th percentile
- {comparison.trend && (
-
- {comparison.trend.direction === 'up' ? '↑' : '↓'} {comparison.trend.magnitude}%
-
- )}
-
-
- )}
-
-
-
-
-
- {error && (
-
- {error.fetchMetricsByCategory}
-
- )}
-
- {/* Screen reader announcements for state changes */}
-
- {isLoading && 'Loading metric categories...'}
- {error && `Error: ${error.fetchMetricsByCategory}`}
-
-
-
-
-
-
- );
-});
+ };
+
+ fetchMetrics();
+ }, [category, getMetricsByCategory, errorRetryCount, retryCount]);
+
+ // Reset retry count when category changes
+ useEffect(() => {
+ setRetryCount(0);
+ }, [category]);
+
+ // Clean up debounce on unmount
+ useEffect(() => {
+ return () => {
+ handleSearch.cancel();
+ };
+ }, [handleSearch]);
+
+ return (
+
+
+
+ );
+ }
+);
// Display name for debugging
MetricSelector.displayName = 'MetricSelector';
-export default MetricSelector;
\ No newline at end of file
+export default MetricSelector;
diff --git a/src/web/src/components/metrics/RevenueRangeSelector.tsx b/src/web/src/components/metrics/RevenueRangeSelector.tsx
index 5726c1090c..f9c2b2c63a 100644
--- a/src/web/src/components/metrics/RevenueRangeSelector.tsx
+++ b/src/web/src/components/metrics/RevenueRangeSelector.tsx
@@ -1,15 +1,36 @@
import React, { useCallback, useMemo } from 'react';
+import styled from '@emotion/styled';
import Select from '../common/Select';
-import { REVENUE_RANGES } from '../../config/constants';
+import { REVENUE_RANGES, RevenueRange } from '../../config/constants';
+
+const StyledContainer = styled.div`
+ width: 100%;
+ max-width: 200px;
+ margin-bottom: var(--spacing-3);
+ font-family: var(--font-family-base);
+ font-size: var(--font-size-base);
+
+ @media (forced-colors: active) {
+ select {
+ border: 1px solid CanvasText;
+ }
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ select {
+ transition: none;
+ }
+ }
+`;
/**
* Props interface for the RevenueRangeSelector component
*/
interface RevenueRangeSelectorProps {
/** Currently selected revenue range value */
- selectedRange: string;
+ selectedRange: RevenueRange;
/** Callback function triggered when range selection changes */
- onRangeChange: (range: string) => void;
+ onRangeChange: (range: RevenueRange) => void;
/** Whether the selector is disabled */
disabled?: boolean;
/** Additional CSS classes for styling customization */
@@ -21,7 +42,7 @@ interface RevenueRangeSelectorProps {
/**
* A revenue range selector component with comprehensive accessibility features
* that allows users to filter metrics based on company revenue ranges.
- *
+ *
* @component
* @example
* handleRangeChange(range)}
* />
*/
-const RevenueRangeSelector: React.FC = React.memo(({
- selectedRange,
- onRangeChange,
- disabled = false,
- className = '',
- ariaLabel = 'Select Revenue Range'
-}) => {
- // Transform revenue ranges into select options format
- const revenueOptions = useMemo(() => {
- return REVENUE_RANGES.ranges.map(range => ({
- value: range,
- label: range.replace('M', ' Million').replace('+', ' or more')
- }));
- }, []);
-
- // Handle range change with type safety
- const handleRangeChange = useCallback((value: string | number) => {
- onRangeChange(value.toString());
- }, [onRangeChange]);
-
- return (
-
-
-
-
-
- );
-});
+ return (
+
+
+
+ );
+ }
+);
// Display name for debugging
RevenueRangeSelector.displayName = 'RevenueRangeSelector';
-export default RevenueRangeSelector;
\ No newline at end of file
+export default RevenueRangeSelector;
diff --git a/src/web/src/components/reports/ExportButton.tsx b/src/web/src/components/reports/ExportButton.tsx
index bb69fd8a98..82d657a3d9 100644
--- a/src/web/src/components/reports/ExportButton.tsx
+++ b/src/web/src/components/reports/ExportButton.tsx
@@ -1,12 +1,42 @@
import React, { useState, useRef, useCallback } from 'react';
+import styled from '@emotion/styled';
import Button, { ButtonProps } from '../common/Button';
-import { exportService } from '../../services/export';
-import { useToast, ToastPosition } from '../../hooks/useToast';
+import { exportService, ExportFormat, ExportOptions } from '../../services/export';
+import { useToast, ToastPosition, ToastType } from '../../hooks/useToast';
import { IMetric } from '../../interfaces/IMetric';
import { IBenchmark } from '../../interfaces/IBenchmark';
-// Export format type
-export type ExportFormat = 'PDF' | 'CSV';
+const VisuallyHidden = styled.span`
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+`;
+
+const ProgressContainer = styled.div`
+ width: 100%;
+ height: 4px;
+ background-color: var(--color-background-secondary);
+ border-radius: var(--border-radius-sm);
+ margin-top: var(--spacing-xs);
+ overflow: hidden;
+`;
+
+const ProgressBar = styled.div<{ progress: number }>`
+ width: ${({ progress }) => `${progress}%`};
+ height: 100%;
+ background-color: var(--color-primary);
+ transition: width 0.3s ease-in-out;
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+`;
// Enhanced props interface for ExportButton
export interface ExportButtonProps {
@@ -34,96 +64,105 @@ export const ExportButton: React.FC = ({
size = 'medium',
disabled = false,
onProgress,
- onCancel
+ onCancel,
}) => {
// State management
const [isLoading, setIsLoading] = useState(false);
const [progress, setProgress] = useState(0);
- const cancelRef = useRef<() => void>();
+ const cancelRef = useRef<(() => void) | undefined>();
const { showToast } = useToast();
// Progress tracking handler
- const handleProgress = useCallback((currentProgress: number) => {
- setProgress(currentProgress);
- onProgress?.(currentProgress);
-
- // Update ARIA live region for screen readers
- const liveRegion = document.getElementById('export-progress');
- if (liveRegion) {
- liveRegion.textContent = `Export progress: ${currentProgress}%`;
- }
- }, [onProgress]);
+ const handleProgress = useCallback(
+ (currentProgress: number) => {
+ setProgress(currentProgress);
+ onProgress?.(currentProgress);
+
+ // Update ARIA live region for screen readers
+ const liveRegion = document.getElementById('export-progress');
+ if (liveRegion) {
+ liveRegion.textContent = `Export progress: ${currentProgress}%`;
+ }
+ },
+ [onProgress]
+ );
// Export handler with enhanced error handling
- const handleExport = useCallback(async (event: React.MouseEvent) => {
- event.preventDefault();
-
- if (!metrics.length || !benchmarks.length) {
- showToast('No data available for export', 'error', ToastPosition.TOP_RIGHT);
- return;
- }
-
- try {
- setIsLoading(true);
- setProgress(0);
-
- // Create ARIA live region for progress announcements
- const liveRegion = document.createElement('div');
- liveRegion.id = 'export-progress';
- liveRegion.setAttribute('role', 'status');
- liveRegion.setAttribute('aria-live', 'polite');
- document.body.appendChild(liveRegion);
-
- // Configure export options
- const exportOptions = {
- format,
- metrics,
- benchmarks,
- revenueRange,
- includeCharts: true,
- customFileName: `benchmark_report_${revenueRange}_${new Date().toISOString().split('T')[0]}`
- };
-
- // Set up cancellation handler
- cancelRef.current = () => {
+ const handleExport = useCallback(
+ async (event: React.MouseEvent) => {
+ event.preventDefault();
+
+ if (!metrics.length || !benchmarks.length) {
+ showToast('No data available for export', ToastType.ERROR, ToastPosition.TOP_RIGHT);
+ return;
+ }
+
+ try {
+ setIsLoading(true);
+ setProgress(0);
+
+ // Create ARIA live region for progress announcements
+ const liveRegion = document.createElement('div');
+ liveRegion.id = 'export-progress';
+ liveRegion.setAttribute('role', 'status');
+ liveRegion.setAttribute('aria-live', 'polite');
+ document.body.appendChild(liveRegion);
+
+ // Configure export options
+ const exportOptions: ExportOptions = {
+ format,
+ metrics,
+ benchmarks,
+ revenueRange,
+ includeCharts: true,
+ customFileName: `benchmark_report_${revenueRange}_${
+ new Date().toISOString().split('T')[0]
+ }`,
+ };
+
+ // Set up cancellation handler
+ cancelRef.current = () => {
+ setIsLoading(false);
+ setProgress(0);
+ onCancel?.();
+ };
+
+ // Execute export based on type
+ if (format === 'PDF') {
+ await exportService.exportBenchmarkReport(exportOptions);
+ } else {
+ await exportService.exportMetricComparison(exportOptions);
+ }
+
+ // Success notification
+ showToast(
+ `Export completed successfully. Your ${format} file is ready.`,
+ ToastType.SUCCESS,
+ ToastPosition.TOP_RIGHT
+ );
+
+ // Clean up
+ document.body.removeChild(liveRegion);
setIsLoading(false);
setProgress(0);
- onCancel?.();
- };
-
- // Execute export based on type
- if (format === 'PDF') {
- await exportService.exportBenchmarkReport(exportOptions);
- } else {
- await exportService.exportMetricComparison(exportOptions);
- }
+ } catch (error) {
+ console.error('Export failed:', error);
+
+ // Enhanced error feedback
+ showToast(
+ `Export failed: ${
+ error instanceof Error ? error.message : 'Unknown error'
+ }. Please try again.`,
+ ToastType.ERROR,
+ ToastPosition.TOP_RIGHT
+ );
- // Success notification
- showToast(
- `Export completed successfully. Your ${format} file is ready.`,
- 'success',
- ToastPosition.TOP_RIGHT
- );
-
- // Clean up
- document.body.removeChild(liveRegion);
- setIsLoading(false);
- setProgress(0);
-
- } catch (error) {
- console.error('Export failed:', error);
-
- // Enhanced error feedback
- showToast(
- `Export failed: ${error instanceof Error ? error.message : 'Unknown error'}. Please try again.`,
- 'error',
- ToastPosition.TOP_RIGHT
- );
-
- setIsLoading(false);
- setProgress(0);
- }
- }, [format, metrics, benchmarks, revenueRange, showToast, onCancel]);
+ setIsLoading(false);
+ setProgress(0);
+ }
+ },
+ [format, metrics, benchmarks, revenueRange, showToast, onCancel]
+ );
return (
<>
@@ -135,21 +174,14 @@ export const ExportButton: React.FC = ({
aria-busy={isLoading}
aria-disabled={disabled || isLoading}
role="button"
- className={`export-button ${isLoading ? 'loading' : ''}`}
>
{isLoading ? (
<>
-
- Exporting... {progress}% complete
-
-
- Exporting... {progress}%
-
+ Exporting... {progress}% complete
+ Exporting... {progress}%
) : (
- <>
- Export {format}
-
+ <>Export {format}
)}
@@ -158,7 +190,6 @@ export const ExportButton: React.FC = ({
variant="text"
size="small"
onClick={() => cancelRef.current?.()}
- className="cancel-button"
aria-label="Cancel export"
>
Cancel
@@ -167,21 +198,17 @@ export const ExportButton: React.FC = ({
{/* Progress indicator for visual feedback */}
{isLoading && (
-
+
+
)}
);
};
-export default ExportButton;
\ No newline at end of file
+export default ExportButton;
diff --git a/src/web/src/components/reports/ReportGenerator.tsx b/src/web/src/components/reports/ReportGenerator.tsx
index 0180d56ef4..ab09ac3267 100644
--- a/src/web/src/components/reports/ReportGenerator.tsx
+++ b/src/web/src/components/reports/ReportGenerator.tsx
@@ -1,25 +1,49 @@
import React, { useState, useCallback } from 'react';
+import styled from '@emotion/styled';
import Button from '../common/Button';
import Select from '../common/Select';
-import { exportService } from '../../services/export';
+import { exportService, ExportFormat, ExportOptions } from '../../services/export';
import { useToast, ToastType, ToastPosition } from '../../hooks/useToast';
import { IMetric } from '../../interfaces/IMetric';
import { IBenchmark } from '../../interfaces/IBenchmark';
+interface SelectOption {
+ value: string;
+ label: string;
+ ariaLabel?: string;
+}
+
// Constants for export options and error messages
-const EXPORT_FORMAT_OPTIONS = [
+const EXPORT_FORMAT_OPTIONS: SelectOption[] = [
{ value: 'PDF', label: 'PDF Document', ariaLabel: 'Export as PDF document' },
- { value: 'CSV', label: 'CSV Spreadsheet', ariaLabel: 'Export as CSV spreadsheet' }
-] as const;
+ { value: 'CSV', label: 'CSV Spreadsheet', ariaLabel: 'Export as CSV spreadsheet' },
+];
const ERROR_MESSAGES = {
NO_METRICS: 'Please select at least one metric for the report',
NO_BENCHMARKS: 'Benchmark data is required for comparison',
NO_REVENUE_RANGE: 'Please select a revenue range',
NO_FORMAT: 'Please select an export format',
- EXPORT_FAILED: 'Failed to generate report. Please try again'
+ EXPORT_FAILED: 'Failed to generate report. Please try again',
} as const;
+const Container = styled.div`
+ padding: var(--spacing-md);
+ border-radius: var(--border-radius-md);
+ background-color: var(--color-background);
+`;
+
+const ExportControls = styled.div`
+ display: flex;
+ gap: var(--spacing-md);
+ align-items: flex-end;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ align-items: stretch;
+ }
+`;
+
// Props interface with comprehensive type safety
interface ReportGeneratorProps {
metrics: IMetric[];
@@ -38,11 +62,11 @@ const ReportGenerator: React.FC = ({
onExportStart,
onExportProgress,
onExportComplete,
- onError
+ onError,
}) => {
// State management
const [isLoading, setIsLoading] = useState(false);
- const [exportFormat, setExportFormat] = useState<'PDF' | 'CSV' | ''>('');
+ const [exportFormat, setExportFormat] = useState('');
const { showToast } = useToast();
// Validate required data before export
@@ -79,12 +103,12 @@ const ReportGenerator: React.FC = ({
onExportStart?.();
// Create export options
- const exportOptions = {
- format: exportFormat,
+ const exportOptions: ExportOptions = {
+ format: exportFormat as ExportFormat,
metrics,
benchmarks,
revenueRange,
- includeCharts: true
+ includeCharts: true,
};
// Track export progress
@@ -93,9 +117,11 @@ const ReportGenerator: React.FC = ({
};
// Add progress event listener
- window.addEventListener('exportProgress', ((event: CustomEvent) => {
+ const progressListener = ((event: CustomEvent<{ progress: number }>) => {
handleProgress(event.detail.progress);
- }) as EventListener);
+ }) as EventListener;
+
+ window.addEventListener('exportProgress', progressListener);
// Execute export based on format
if (exportFormat === 'PDF') {
@@ -104,18 +130,12 @@ const ReportGenerator: React.FC = ({
await exportService.exportMetricComparison(exportOptions);
}
- showToast(
- 'Export completed successfully',
- ToastType.SUCCESS,
- ToastPosition.TOP_RIGHT
- );
+ showToast('Export completed successfully', ToastType.SUCCESS, ToastPosition.TOP_RIGHT);
onExportComplete?.();
-
} catch (error) {
const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.EXPORT_FAILED;
showToast(errorMessage, ToastType.ERROR, ToastPosition.TOP_RIGHT);
onError?.(error instanceof Error ? error : new Error(ERROR_MESSAGES.EXPORT_FAILED));
-
} finally {
setIsLoading(false);
window.removeEventListener('exportProgress', (() => {}) as EventListener);
@@ -130,16 +150,16 @@ const ReportGenerator: React.FC = ({
onExportProgress,
onExportComplete,
onError,
- showToast
+ showToast,
]);
return (
-
-
+
+
-
-
-