Feat: Implement comprehensive design revamp

.github/workflows/bundle-analysis.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@v4
       with:
         fetch-depth: 0
 

.github/workflows/preview.yml

@@ -1,21 +1,18 @@
 name: Create EAS Preview
 
 on:
-  pull_request_target:
+  pull_request:
 
 permissions:
   contents: read
   pull-requests: write
 
 jobs:
   preview:
-    if: contains(github.event.pull_request.labels.*.name, 'run-preview')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v5
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/publish.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🏗 Setup repo
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: 🏗 Setup Node
         uses: actions/setup-node@v4

.github/workflows/rn-bundle-analysis.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@v4
       with:
         fetch-depth: 0
 

.github/workflows/run-tests.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v5
+    - uses: actions/checkout@v4
       with:
         fetch-depth: 0  # Full history for better diff analysis
 

backend/app/expenses/routes.py

@@ -460,3 +460,52 @@
         raise HTTPException(status_code=404, detail=str(e))
     except Exception as e:
         raise HTTPException(status_code=500, detail="Failed to fetch analytics")
+
+
+# Debug endpoint (remove in production)
+@router.get("/expenses/{expense_id}/debug")
+async def debug_expense(
+    group_id: str,
+    expense_id: str,
+    current_user: Dict[str, Any] = Depends(get_current_user),
+):
+    """Debug endpoint to check expense details and user permissions"""
+    try:
+        from app.database import mongodb
+        from bson import ObjectId
+
+        # Check if expense exists
+        expense = await mongodb.database.expenses.find_one(
+            {"_id": ObjectId(expense_id)}
+        )
+        if not expense:
+            return {"error": "Expense not found", "expense_id": expense_id}
+
+        # Check group membership
+        group = await mongodb.database.groups.find_one(
+            {"_id": ObjectId(group_id), "members.userId": current_user["_id"]}
+        )
+
+        # Check if user created the expense
+        user_created = expense.get("createdBy") == current_user["_id"]
+
+        return {
+            "expense_exists": True,
+            "expense_id": expense_id,
+            "group_id": group_id,
+            "user_id": current_user["_id"],
+            "expense_created_by": expense.get("createdBy"),
+            "user_created_expense": user_created,
+            "user_in_group": group is not None,
+            "expense_group_id": expense.get("groupId"),
+            "group_id_match": expense.get("groupId") == group_id,
+            "expense_data": {
+                "description": expense.get("description"),
+                "amount": expense.get("amount"),
+                "splits_count": len(expense.get("splits", [])),
+                "created_at": expense.get("createdAt"),
+                "updated_at": expense.get("updatedAt"),
+            },
+        }
+    except Exception as e:
+        return {"error": str(e), "type": type(e).__name__}

frontend/App.js

@@ -2,8 +2,31 @@ import React from 'react';
 import AppNavigator from './navigation/AppNavigator';
 import { PaperProvider } from 'react-native-paper';
 import { AuthProvider } from './context/AuthContext';
+import { useFonts } from 'expo-font';
+import { ActivityIndicator, View } from 'react-native';
 
 export default function App() {
+  const [fontsLoaded] = useFonts({
+    'Inter-Black': require('./assets/fonts/Inter-Black.ttf'),
+    'Inter-BlackItalic': require('./assets/fonts/Inter-BlackItalic.ttf'),
+    'Inter-Bold': require('./assets/fonts/Inter-Bold.ttf'),
+    'Inter-BoldItalic': require('./assets/fonts/Inter-BoldItalic.ttf'),
+    'Inter-Italic': require('./assets/fonts/Inter-Italic.ttf'),
+    'Inter-Medium': require('./assets/fonts/Inter-Medium.ttf'),
+    'Inter-MediumItalic': require('./assets/fonts/Inter-MediumItalic.ttf'),
+    'Inter-Regular': require('./assets/fonts/Inter-Regular.ttf'),
+    'Inter-SemiBold': require('./assets/fonts/Inter-SemiBold.ttf'),
+    'Inter-SemiBoldItalic': require('./assets/fonts/Inter-SemiBoldItalic.ttf'),
+  });
+
+  if (!fontsLoaded) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
   return (
     <AuthProvider>
       <PaperProvider>

frontend/components/SkeletonLoader.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  interpolateColor,
+} from "react-native-reanimated";
+import { colors } from "../styles/theme";
+
+const SkeletonLoader = ({ style }) => {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, { duration: 1000 }), -1, true);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, 1],
+      [colors.secondary, colors.white]
+    );
+    return {
+      backgroundColor,
+    };
+  });
+
+  return <Animated.View style={[styles.skeleton, animatedStyle, style]} />;
+};
+
+const styles = StyleSheet.create({
+  skeleton: {
+    backgroundColor: colors.secondary,
+    borderRadius: 4,
+  },
+});
+
+export default SkeletonLoader;

frontend/components/v2/Button.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator, Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { colors, spacing, typography } from '../../styles/theme';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const Button = ({
+  title,
+  onPress,
+  mode = 'primary', // 'primary', 'secondary', 'tertiary'
+  disabled = false,
+  loading = false,
+  style,
+  textStyle,
+  ...props
+}) => {
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ scale: scale.value }],
+    };
+  });
+
+  const handlePressIn = () => {
+    scale.value = withTiming(0.98, { duration: 100 });
+  };
+
+  const handlePressOut = () => {
+    scale.value = withTiming(1, { duration: 100 });
+  };
+
+  const getButtonStyles = () => {
+    switch (mode) {
+      case 'secondary':
+        return styles.secondaryButton;
+      case 'tertiary':
+        return styles.tertiaryButton;
+      default:
+        return styles.primaryButton;
+    }
+  };
+
+  const getTextStyles = () => {
+    switch (mode) {
+      case 'secondary':
+        return styles.secondaryText;
+      case 'tertiary':
+        return styles.tertiaryText;
+      default:
+        return styles.primaryText;
+    }
+  };
+
+  const buttonStyle = [
+    styles.button,
+    getButtonStyles(),
+    disabled && styles.disabled,
+    style,
+  ];
+
+  const content = loading ? (
+    <ActivityIndicator color={mode === 'primary' ? colors.neutral.white : colors.brandAccent} />
+  ) : (
+    <Text style={[styles.text, getTextStyles(), textStyle]}>{title}</Text>
+  );
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled || loading}
+      style={[buttonStyle, animatedStyle]}
+      {...props}
+    >
+      {content}
+    </AnimatedPressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    ...typography.bodyBold,
+    textAlign: 'center',
+  },
+  primaryButton: {
+    backgroundColor: colors.brandAccent,
+  },
+  primaryText: {
+    color: colors.neutral.white,
+  },
+  secondaryButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1.5,
+    borderColor: colors.brandAccent,
+  },
+  secondaryText: {
+    color: colors.brandAccent,
+  },
+  tertiaryButton: {
+    backgroundColor: 'transparent',
+  },
+  tertiaryText: {
+    color: colors.brandAccent,
+  },
+  disabled: {
+    backgroundColor: '#9CA3AF',
+    opacity: 0.7,
+    borderColor: 'transparent',
+  },
+});
+
+export default Button;

frontend/components/v2/Card.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { colors, spacing } from '../../styles/theme';
+
+const Card = ({ children, style, intensity = 100, tint = 'light' }) => {
+  // The glassmorphic effect is a combination of a semi-transparent background and a blur.
+  // BlurView is not supported on all platforms (e.g., web, older Android), so we provide a fallback.
+  if (Platform.OS === 'ios' || Platform.OS === 'android') {
+    return (
+      <View style={[styles.cardContainer, style]}>
+        <BlurView
+          style={styles.blurView}
+          intensity={intensity}
+          tint={tint}
+        >
+          {children}
+        </BlurView>
+      </View>
+    );
+  }
+
+  // Fallback for platforms that don't support BlurView
+  return (
+    <View style={[styles.cardContainer, styles.fallbackCard, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    borderRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  },
+  blurView: {
+    padding: spacing.lg,
+    // The background color is set on the BlurView itself for a better effect
+    backgroundColor: 'rgba(255, 255, 255, 0.4)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  fallbackCard: {
+    backgroundColor: colors.neutral.white,
+    padding: spacing.lg,
+    borderWidth: 1,
+    borderColor: colors.borderSubtle,
+  },
+});
+
+export default Card;