Fix/multiple UI issues

.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/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/navigation/GroupsStackNavigator.js

@@ -12,9 +12,9 @@ const GroupsStackNavigator = () => {
     <Stack.Navigator>
       <Stack.Screen name="GroupsList" component={HomeScreen} options={{ headerShown: false }}/>
       <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />
-      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ title: 'Add Expense' }} />
+      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ headerShown: false }} />
       <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
-  <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ title: 'Group Settings' }} />
+      <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ headerShown: false }} />
     </Stack.Navigator>
   );
 };

frontend/package.json

@@ -24,7 +24,8 @@
     "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.13.1",
-    "react-native-web": "^0.20.0"
+    "react-native-web": "^0.20.0",
+    "react-native-reanimated": "~3.17.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"