feat: add development environment setup

[devin-ai-integration]

feat: add development environment setup and convert dashboard to interactive components

Summary

This PR accomplishes two main objectives for the SmartBank React Native app:

1. Development Environment Setup: Fixes critical CSS compatibility issues and configures Supabase authentication

   • Updates NativeWind from 4.0.22 to 4.1.23 to resolve "Failed to set an indexed property [0] on 'CSSStyleDeclaration'" error
   • Adds react-native-css-interop 0.1.22 for improved React Native Web compatibility
   • Configures Supabase credentials in .env file for authentication backend

2. Interactive Dashboard Conversion: Replaces static dashboard image with functional React Native components

   • Converts making-your-money.png static image to interactive Pressable button components
   • Implements proper React Native UI structure with account header, balance display, action buttons, and transaction history
   • Adds onPress handlers for Top up, Transfer, and Exchange buttons (currently logging to console)

Review & Testing Checklist for Human

🔴 High Priority (4 items)

• Visual design verification - Compare the new component-based dashboard with the original static image to ensure pixel-perfect design consistency. Pay special attention to spacing, colors, typography, and icon alignment.

• Cross-platform testing - Test on actual iOS and Android devices using bun run ios and bun run android. React Native Web styling can behave differently than native platforms, especially for shadow effects and layout positioning.

• Authentication flow architecture review - The dashboard components (account balance, transaction history) are currently in the (unauthenticated) welcome screen. Consider whether these should be moved to an authenticated route structure for proper security.

• Button functionality planning - The onPress handlers currently only log to console as placeholder logic. Define and implement the proper navigation/functionality for each action button (Top up → payment flow, Transfer → send money, Exchange → currency conversion).

Recommended Test Plan

1. Test visual consistency across desktop web, mobile web, iOS, and Android
2. Verify all three buttons are interactive and provide visual feedback on press
3. Test the complete authentication flow from welcome → login → dashboard
4. Validate that hardcoded data (account name, balance) should be dynamic or static

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    subgraph "App Structure"
        layout["src/app/_layout.tsx<br/>(auth routing)"]:::context
        welcome["src/app/(unauthenticated)/<br/>welcome.tsx<br/>(dashboard components)"]:::major-edit
        env[".env<br/>(Supabase config)"]:::major-edit
    end
    
    subgraph "Dependencies"
        package["package.json<br/>(NativeWind 4.1.23)"]:::major-edit
        lockfile["bun.lockb"]:::minor-edit
        types["nativewind-env.d.ts<br/>(TypeScript defs)"]:::minor-edit
    end
    
    subgraph "Assets"
        oldimage["making-your-money.png<br/>(replaced static image)"]:::context
    end
    
    subgraph "New Components"
        buttons["Pressable Buttons<br/>(Top up, Transfer, Exchange)"]:::major-edit
        dashboard["Dashboard Layout<br/>(account, balance, transactions)"]:::major-edit
    end
    
    welcome -->|"replaced image with"| buttons
    welcome -->|"implemented"| dashboard
    welcome -->|"previously used"| oldimage
    layout -->|"routes to"| welcome
    package -->|"updated for compatibility"| welcome
    env -->|"configures auth for"| layout
    
    subgraph Legend
        L1["Major Edit"]:::major-edit
        L2["Minor Edit"]:::minor-edit
        L3["Context/No Edit"]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• CSS Error Resolution: The NativeWind update specifically addresses React Native Web 0.20.0 compatibility through the "v4 interop rewrite" in version 4.1.23
• Placeholder Logic: Current onPress handlers use console.log() for testing - these need to be replaced with proper navigation/functionality
• Hardcoded Data: Dashboard shows static account information ("ADRIAN'S ACCOUNT", "500,00 GBP") which may need to be made dynamic
• Mobile Screenshots:

Session Details:

• Requested by: Arthur Poon (@akkp-windsurf)
• Devin Session: https://app.devin.ai/sessions/090529ecab3045b4a84ae4b239d67409

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring