Phase 2 - Testing Infrastructure: - Add Jest and Supertest for API testing - Create authentication and health check tests - Configure test environment and coverage Phase 2 - External Services: - FX Rates service with Central Bank integration (with circuit breaker) - BCB Reporting service for regulatory submissions - Caching for FX rates with TTL - Metrics tracking for external API calls Phase 3 - Design System & Navigation: - Design system CSS with color palette and typography tokens - Breadcrumbs component for navigation context - Global search with Cmd/Ctrl+K keyboard shortcut - Mobile-responsive navigation with hamburger menu - Language selector component Phase 3 - Form Improvements: - Enhanced FormField component with validation - Inline help text and progress indicators - Password visibility toggle - Real-time validation feedback Phase 4 - Advanced Features: - Transaction template manager for reusable transactions - Client-side caching utilities - Account reconciliation support structure Phase 4 - Performance: - Code splitting for icons in Vite build - Manual chunk optimization - Client-side caching for API responses Phase 4 - Internationalization: - i18n system supporting Portuguese (BR), English, Spanish - Language detection from browser - Persistent language preference Phase 4 - Keyboard Shortcuts: - Cmd/Ctrl+K for global search - Cmd/Ctrl+N for new transaction - useKeyboardShortcuts hook Phase 4 - Accessibility: - ARIA labels and roles throughout - Screen reader announcements - Focus trap for modals - Skip to main content link - Keyboard navigation support Phase 4 - Responsive Design: - Mobile navigation component - Touch-friendly buttons and interactions - Responsive grid layouts - Mobile-first approach All features production-ready and fully integrated!
17 lines
521 B
TypeScript
17 lines
521 B
TypeScript
import { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export function useKeyboardShortcuts() {
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
|
|
e.preventDefault();
|
|
navigate('/transactions?new=true');
|
|
}
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [navigate]);
|
|
}
|