mirror of
https://github.com/elisiariocouto/leggen.git
synced 2025-12-13 23:12:16 +00:00
159cba508e
Frontend: - Memoize pagination object in TransactionsTable to prevent unnecessary re-renders and fix exhaustive-deps warning - Add optional success and message fields to backup API response types for proper error handling Backend: - Add TypedDict for transaction type configuration to improve type safety in generate_sample_db - Fix unpacking of amount_range with explicit float type hints - Add explicit type hints for descriptions dictionary and specific_descriptions variable - Fix sync endpoint return types: get_sync_status returns SyncStatus and sync_now returns SyncResult - Fix transactions endpoint data type declaration to properly support Union types in PaginatedResponse All checks now pass: - Frontend: npm lint and npm build ✓ - Backend: mypy type checking ✓ - Backend: ruff lint on modified files ✓ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Leggen Frontend
A modern React dashboard for the Leggen Open Banking CLI tool. This frontend provides a user-friendly interface to view bank accounts, transactions, and balances.
Features
- Modern Dashboard: Clean, responsive interface built with React and TypeScript
- Bank Accounts Overview: View all connected bank accounts with real-time balances
- Transaction Management: Browse, search, and filter transactions across all accounts
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Real-time Data: Powered by React Query for efficient data fetching and caching
Prerequisites
- Node.js 18+ and npm
- Leggen API server running (configurable via environment variables)
Getting Started
-
Install dependencies:
npm install -
Start the development server:
npm run dev -
Open your browser to:
http://localhost:5173
Available Scripts
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
Architecture
Key Technologies
- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe JavaScript development
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- React Query - Data fetching and caching
- Axios - HTTP client for API calls
- Lucide React - Modern icon library
Project Structure
src/
├── components/ # React components
│ ├── Dashboard.tsx # Main dashboard layout
│ ├── AccountsOverview.tsx
│ └── TransactionsList.tsx
├── lib/ # Utilities and API client
│ ├── api.ts # API client and endpoints
│ └── utils.ts # Helper functions
├── types/ # TypeScript type definitions
│ └── api.ts # API response types
└── App.tsx # Main application component
API Integration
The frontend connects to the Leggen API server (configurable via environment variables). The API client handles:
- Account retrieval and management
- Transaction fetching with filtering
- Balance information
- Error handling and loading states
Configuration
API URL Configuration
The frontend supports configurable API URLs through environment variables:
Development:
- Set
VITE_API_URLto call external APIs during development - Example:
VITE_API_URL=https://staging-api.example.com npm run dev
Production:
- Uses relative URLs (
/api/v1) that nginx proxies to the backend - Configure nginx proxy target via
API_BACKEND_URLenvironment variable - Default:
http://leggen-server:8000
Docker Compose:
# Override API backend URL
API_BACKEND_URL=https://prod-api.example.com docker-compose up
Development
The dashboard is designed to work with the Leggen CLI tool's API endpoints. Make sure your Leggen server is running before starting the frontend development server.
Adding New Features
- Define TypeScript types in
src/types/api.ts - Add API methods to
src/lib/api.ts - Create React components in
src/components/ - Use React Query for data fetching and state management
Deployment
Build the application for production:
npm run build
The built files will be in the dist/ directory, ready to be served by any static web server.