Client Work — React + TypeScript
Daily Reconciliation Dashboard
November 2025 – Present
An internal financial dashboard that transforms complex POS data into clear, actionable insights for restaurant managers and accountants. Compares point-of-sale transactions with actual payment tenders across multiple payment methods, highlighting discrepancies in real time. This ongoing project demonstrates expertise in data visualisation, business logic implementation, and building practical tools that solve real operational challenges.
Payment reconciliation interface with colour-coded status indicators and difference calculations (sample data).
Technical Implementation
Frontend Framework
- React with functional components
- TypeScript for type safety
- React Hooks (useState, useEffect, useCallback)
- Component-based architecture
- Modern React patterns
Business Logic
- Complex payment method routing
- Multi-source data comparison
- Real-time difference calculations
- Conditional rendering logic
- Status-based visual feedback
Data & Integration
- RESTful API integration
- Backend collaboration
- POS system data processing
- Payment tender verification
- Multi-location support
Key Features
Multi-Payment Tracking
Handles iZettle, Vipps, Cash, Gift Cards, and multiple payment methods with separate tip tracking.
Visual Status Indicators
Colour-coded differences (green for matched, yellow for minor, red for significant) with clear icons.
Multi-Location Support
Tracks three locations (DLC, Cafe, Odins) with location-specific colour schemes.
Date Navigation
Easy navigation between days with period status tracking and validation checks.
Smart Alerts
Automatic warnings for open tables, unclosed periods, and open food items.
Cash Counter Integration
Built-in cash counting modal with API submission to payment system.
Development Process
The Business Challenge
Before this dashboard, managers had to manually scroll through raw POS data to reconcile daily transactions. The process was time-consuming, error-prone, and required mental math to spot discrepancies across multiple payment methods and tip categories.
Transform Raw Data into Clear Tables
Before: raw numbers requiring scrolling and manual calculations.
After: clean, organised table showing POS vs Tenders with automatic difference calculations and visual status indicators.
Impact: saves several minutes per closing and reduces accounting errors.
Complex Payment Logic
The most technically challenging aspect was implementing the payment method routing logic. Different payment methods appear in different columns (POS-only, Tenders-only, or both), and tips are tracked separately for specific methods. This required careful conditional rendering and business rule implementation.
Implementation Highlights
shouldShowInPOS(): determines which methods display in POS column (excludes delivery types).
shouldShowInTenders(): filters POS-only methods like faktura, offline, brekk.
Tip Tracking: separate logic for POS tips vs Tender tips per payment method.
Ongoing Development & Iteration
This project is actively developed and improved based on real user feedback from managers and accountants. Working in test mode allows safe development while the backend team builds out remaining features.
Current Status
Completed: core reconciliation UI, payment routing, visual indicators, date navigation.
In Progress: cash counter backend integration, testing with staff.
Next: production rollout to all locations.
Challenges & Solutions
Payment Method Routing Logic
Challenge: Different payment methods need to appear in different table columns with specific tip handling rules.
Solution: Created helper functions (shouldShowInPOS, shouldShowInTenders, shouldShowPOSTips) that encapsulate business rules and keep components clean.
Data Visualisation for Complex Financial Data
Challenge: Making 6+ payment methods with separate amounts, tips, and differences immediately understandable.
Solution: Colour-coded status system, clear icons, and organised table layout with distinct POS vs Tenders columns.
State Management for Multi-Source Data
Challenge: Managing period status, open tables, open items, payment data, and location state efficiently.
Solution: React hooks (useState, useEffect, useCallback) with proper dependency arrays and memoisation for optimal performance.
Backend Collaboration
Challenge: Coordinating frontend development with backend API development by Jerome.
Solution: Test mode flag for safe frontend development, clear API contract definition, and iterative integration testing.
Planned Enhancements
Cash Tender Backend
Complete cash counter API integration for direct submission to payment system.
Mobile Optimisation
Enhanced mobile layout for managers doing closing on tablets or phones.
Historical Trends
Add charts showing reconciliation patterns over time to identify recurring issues.
Export Functionality
Export reconciliation data to CSV for accounting software integration.