From 952e7ff9b8626c854d0c78a19651dcaaa03201de Mon Sep 17 00:00:00 2001
From: biancaisc <biancaiscru@gmail.com>
Date: Fri, 31 Jan 2025 21:07:37 +0200
Subject: [PATCH 1/9] BarCodeScanner but is deprecated

---
 CollectifyFrontend/app/(tabs)/_layout.tsx     |  24 ++
 CollectifyFrontend/app/(tabs)/qrCode.tsx      |  35 +++
 CollectifyFrontend/app/(tabs)/scan.tsx        |  90 ++++++
 CollectifyFrontend/app/_layout.tsx            |  14 +
 CollectifyFrontend/package-lock.json          | 270 ++++++++++++++++++
 CollectifyFrontend/package.json               |  11 +-
 .../src/library/IQRCodePayload.ts             |   4 +
 .../src/library/IStackScreenProps.ts          |   5 +
 8 files changed, 451 insertions(+), 2 deletions(-)
 create mode 100644 CollectifyFrontend/app/(tabs)/qrCode.tsx
 create mode 100644 CollectifyFrontend/app/(tabs)/scan.tsx
 create mode 100644 CollectifyFrontend/src/library/IQRCodePayload.ts
 create mode 100644 CollectifyFrontend/src/library/IStackScreenProps.ts

diff --git a/CollectifyFrontend/app/(tabs)/_layout.tsx b/CollectifyFrontend/app/(tabs)/_layout.tsx
index b199503..891f7d2 100644
--- a/CollectifyFrontend/app/(tabs)/_layout.tsx
+++ b/CollectifyFrontend/app/(tabs)/_layout.tsx
@@ -83,6 +83,30 @@ export default function TabLayout() {
           ),
         }}
       />
+       <Tabs.Screen
+        name="qrCode"
+        options={{
+          title: "QRCode",
+          headerRight: () => (
+            <HeaderProfileButton refreshLoginStatus={checkLoginStatus} />
+          ),
+          tabBarIcon: ({ color, focused }) => (
+            <FontAwesome name={focused ? 'file' : 'file-o'} color={color} size={27} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="scan"
+        options={{
+          title: "Scan",
+          headerRight: () => (
+            <HeaderProfileButton refreshLoginStatus={checkLoginStatus} />
+          ),
+          tabBarIcon: ({ color, focused }) => (
+            <FontAwesome name={focused ? 'file' : 'file-o'} color={color} size={27} />
+          ),
+        }}
+      />
     </Tabs>
   );
 }
diff --git a/CollectifyFrontend/app/(tabs)/qrCode.tsx b/CollectifyFrontend/app/(tabs)/qrCode.tsx
new file mode 100644
index 0000000..62899c8
--- /dev/null
+++ b/CollectifyFrontend/app/(tabs)/qrCode.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import { Layout, Text, List, ListItem, ApplicationProvider } from '@ui-kitten/components';
+
+import QRCode from 'react-native-qrcode-svg';
+import { IStackScreenProps } from '../../src/library/IStackScreenProps';
+import { IQRCodePayload } from '../../src/library/IQRCodePayload';
+
+const QRCodeScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
+    const { navigation } = props;
+    const payload: IQRCodePayload = { name: 'Cool Person', number: '1-234-567-8900' };
+
+    return (
+        <View style={styles.container}>
+            <QRCode value={JSON.stringify(payload)} />
+            <View style={styles.button}>
+                <Button title="Go to Scanner" onPress={() => navigation.navigate('Scan')} />
+            </View>
+        </View>
+    );
+};
+
+export default QRCodeScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    button: {
+        marginTop: 10
+    }
+});
\ No newline at end of file
diff --git a/CollectifyFrontend/app/(tabs)/scan.tsx b/CollectifyFrontend/app/(tabs)/scan.tsx
new file mode 100644
index 0000000..bac11ef
--- /dev/null
+++ b/CollectifyFrontend/app/(tabs)/scan.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import { Text, StyleSheet, Button } from 'react-native';
+import { Layout, List, ListItem, ApplicationProvider } from '@ui-kitten/components';
+
+import { IStackScreenProps } from '../../src/library/IStackScreenProps';
+import { IQRCodePayload } from '../../src/library/IQRCodePayload';
+ 
+const ScanScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
+    const [loading, setLoading] = useState(true);
+    const [scanData, setScanData] = useState<IQRCodePayload>();
+    const [permission, setPermission] = useState(true);
+
+    useEffect(() => {
+        requestCameraPermission();
+    }, []);
+
+    const requestCameraPermission = async () => {
+        try {
+            const { status, granted } = await BarCodeScanner.requestPermissionsAsync();
+            console.log(`Status: ${status}, Granted: ${granted}`);
+
+            if (status === 'granted') {
+                console.log('Access granted');
+                setPermission(true);
+            } else {
+                setPermission(false);
+            }
+        } catch (error) {
+            console.error(error);
+            setPermission(false);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loading) return <Text>Requesting permission ...</Text>;
+
+    if (scanData) {
+        return (
+            <>
+                <Text style={styles.text}>Name: {scanData.name}</Text>
+                <Text style={styles.text}>Number: {scanData.number}</Text>
+                {/* <Button title="Scan Again" onPress={() => setScanData(undefined)}>
+                    Scan Again
+                </Button> */}
+            </>
+        );
+    }
+
+    if (permission) {
+        return (
+            <BarCodeScanner
+                style={[styles.container]}
+                onBarCodeScanned={({ type, data }) => {
+                    try {
+                        console.log(type);
+                        console.log(data);
+                        let _data = JSON.parse(data);
+                        setScanData(_data);
+                    } catch (error) {
+                        console.error('Unable to parse string: ', error);
+                    }
+                }}
+            >
+                <Text style={styles.text}>Scan the QR code.</Text>
+            </BarCodeScanner>
+        );
+    } else {
+        return <Text style={styles.textError}>Permission rejected.</Text>;
+    }
+};
+
+export default ScanScreen;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 10,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    text: {
+        marginTop: 15,
+        backgroundColor: 'white'
+    },
+    textError: {
+        color: 'red'
+    }
+});
\ No newline at end of file
diff --git a/CollectifyFrontend/app/_layout.tsx b/CollectifyFrontend/app/_layout.tsx
index 99d8aab..b418ce4 100644
--- a/CollectifyFrontend/app/_layout.tsx
+++ b/CollectifyFrontend/app/_layout.tsx
@@ -41,6 +41,20 @@ export default function RootLayout() {
           title: "Notes"
         }}
       />
+
+      <Stack.Screen
+         name = "qrCode"
+         options={{
+          title: "QRCode"
+        }}
+        />
+         <Stack.Screen
+         name = "scan"
+         options={{
+          title: "Scan"
+        }}
+        />
+
     </Stack>
   );
 }
diff --git a/CollectifyFrontend/package-lock.json b/CollectifyFrontend/package-lock.json
index 7ff3db2..dbbbfa6 100644
--- a/CollectifyFrontend/package-lock.json
+++ b/CollectifyFrontend/package-lock.json
@@ -12,10 +12,13 @@
         "@expo/vector-icons": "^14.0.2",
         "@react-navigation/bottom-tabs": "^7.0.0",
         "@react-navigation/native": "^7.0.0",
+        "@react-navigation/stack": "^7.1.1",
         "@ui-kitten/components": "^5.3.1",
         "axios": "^1.7.9",
         "expo": "~52.0.15",
+        "expo-barcode-scanner": "^13.0.1",
         "expo-blur": "~14.0.1",
+        "expo-camera": "~16.0.14",
         "expo-constants": "~17.0.3",
         "expo-font": "~13.0.1",
         "expo-haptics": "~14.0.0",
@@ -33,6 +36,7 @@
         "react-dom": "18.3.1",
         "react-native": "0.76.3",
         "react-native-gesture-handler": "~2.20.2",
+        "react-native-qrcode-svg": "^6.3.14",
         "react-native-reanimated": "~3.16.1",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.1.0",
@@ -4032,6 +4036,23 @@
         "nanoid": "3.3.8"
       }
     },
+    "node_modules/@react-navigation/stack": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-7.1.1.tgz",
+      "integrity": "sha512-CBTKQlIkELp05zRiTAv5Pa7OMuCpKyBXcdB3PGMN2Mm55/5MkDsA1IaZorp/6TsVCdllITD6aTbGX/HA/88A6w==",
+      "dependencies": {
+        "@react-navigation/elements": "^2.2.5",
+        "color": "^4.2.3"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^7.0.14",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 2.0.0",
+        "react-native-safe-area-context": ">= 4.0.0",
+        "react-native-screens": ">= 4.0.0"
+      }
+    },
     "node_modules/@remix-run/node": {
       "version": "2.15.2",
       "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.15.2.tgz",
@@ -6259,6 +6280,14 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -6447,6 +6476,11 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -7051,6 +7085,25 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-barcode-scanner": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/expo-barcode-scanner/-/expo-barcode-scanner-13.0.1.tgz",
+      "integrity": "sha512-xBGLT1An2gpAMIQRTLU3oHydKohX8r8F9/ait1Fk9Vgd0GraFZbP4IiT7nHMlaw4H6E7Muucf7vXpGV6u7d4HQ==",
+      "dependencies": {
+        "expo-image-loader": "~4.7.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-barcode-scanner/node_modules/expo-image-loader": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.7.0.tgz",
+      "integrity": "sha512-cx+MxxsAMGl9AiWnQUzrkJMJH4eNOGlu7XkLGnAXSJrRoIiciGaKqzeaD326IyCTV+Z1fXvIliSgNW+DscvD8g==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-blur": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-14.0.1.tgz",
@@ -7062,6 +7115,25 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-camera": {
+      "version": "16.0.14",
+      "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-16.0.14.tgz",
+      "integrity": "sha512-nTQjb3Vtp0rA40fQdGLO+YCg7kHigBs9J4LkAXiL7Gsjl8lxYgFqHCCrFLOm/4D2TJSnqHSGQQflzwoWQDpZzw==",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-web": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/expo-constants": {
       "version": "17.0.3",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.3.tgz",
@@ -12029,6 +12101,22 @@
       ],
       "license": "MIT"
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/qrcode-terminal": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.11.0.tgz",
@@ -12037,6 +12125,152 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/query-string": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
@@ -12333,6 +12567,21 @@
         "react-native": ">=0.73.0"
       }
     },
+    "node_modules/react-native-qrcode-svg": {
+      "version": "6.3.14",
+      "resolved": "https://registry.npmjs.org/react-native-qrcode-svg/-/react-native-qrcode-svg-6.3.14.tgz",
+      "integrity": "sha512-YtMI/C3Vfhs/3Y/g3DEiEEG7ZOgLNsACiTjKMNYPr66Z1pgTG5Ci7KDoZFYuXwD5OSN19Lxi52QarZdybd0dWw==",
+      "dependencies": {
+        "prop-types": "^15.8.0",
+        "qrcode": "^1.5.4",
+        "text-encoding": "^0.7.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.63.4",
+        "react-native-svg": ">=14.0.0"
+      }
+    },
     "node_modules/react-native-reanimated": {
       "version": "3.16.3",
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.16.3.tgz",
@@ -12708,6 +12957,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "node_modules/requireg": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/requireg/-/requireg-0.2.2.tgz",
@@ -13164,6 +13418,11 @@
       "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
       "license": "MIT"
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
     "node_modules/set-cookie-parser": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
@@ -14186,6 +14445,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/text-encoding": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz",
+      "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==",
+      "deprecated": "no longer maintained"
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -14921,6 +15186,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz",
diff --git a/CollectifyFrontend/package.json b/CollectifyFrontend/package.json
index ebee023..4e5a476 100644
--- a/CollectifyFrontend/package.json
+++ b/CollectifyFrontend/package.json
@@ -19,9 +19,11 @@
     "@expo/vector-icons": "^14.0.2",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
+    "@react-navigation/stack": "^7.1.1",
     "@ui-kitten/components": "^5.3.1",
     "axios": "^1.7.9",
     "expo": "~52.0.15",
+    "expo-barcode-scanner": "^13.0.1",
     "expo-blur": "~14.0.1",
     "expo-constants": "~17.0.3",
     "expo-font": "~13.0.1",
@@ -40,11 +42,13 @@
     "react-dom": "18.3.1",
     "react-native": "0.76.3",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-qrcode-svg": "^6.3.14",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-camera": "~16.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -56,5 +60,8 @@
     "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },
-  "private": true
+  "private": true,
+  "resolutions": {
+    "@types/react": "17.0.24"
+  }
 }
diff --git a/CollectifyFrontend/src/library/IQRCodePayload.ts b/CollectifyFrontend/src/library/IQRCodePayload.ts
new file mode 100644
index 0000000..b6e6727
--- /dev/null
+++ b/CollectifyFrontend/src/library/IQRCodePayload.ts
@@ -0,0 +1,4 @@
+export interface IQRCodePayload {
+    name: string;
+    number: string;
+}
\ No newline at end of file
diff --git a/CollectifyFrontend/src/library/IStackScreenProps.ts b/CollectifyFrontend/src/library/IStackScreenProps.ts
new file mode 100644
index 0000000..1f0c037
--- /dev/null
+++ b/CollectifyFrontend/src/library/IStackScreenProps.ts
@@ -0,0 +1,5 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
+export interface IStackScreenProps {
+    navigation: StackNavigationProp<any>;
+}
\ No newline at end of file

From 54ad9e22f82f0486c1df1c1473d13e8c83e6eaeb Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sat, 1 Feb 2025 14:30:04 +0200
Subject: [PATCH 2/9] CUpdated BarCodeScanner model to BarcodeScanningResult

---
 CollectifyFrontend/app.json                  |  10 +-
 CollectifyFrontend/app/(tabs)/qrCode.tsx     |  12 +-
 CollectifyFrontend/app/(tabs)/scan.tsx       |  91 +--
 CollectifyFrontend/app/_layout.tsx           |  10 +-
 CollectifyFrontend/app/groups/[item].tsx     |  26 +-
 CollectifyFrontend/package-lock.json         | 716 ++++++++++++++++++-
 CollectifyFrontend/package.json              |   7 +-
 CollectifyFrontend/services/axiosInstance.ts |   1 +
 8 files changed, 796 insertions(+), 77 deletions(-)

diff --git a/CollectifyFrontend/app.json b/CollectifyFrontend/app.json
index f5fc1d9..c8450e0 100644
--- a/CollectifyFrontend/app.json
+++ b/CollectifyFrontend/app.json
@@ -33,7 +33,15 @@
           "backgroundColor": "#ffffff"
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
+          "recordAudioAndroid": true
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true
diff --git a/CollectifyFrontend/app/(tabs)/qrCode.tsx b/CollectifyFrontend/app/(tabs)/qrCode.tsx
index 62899c8..027eb1d 100644
--- a/CollectifyFrontend/app/(tabs)/qrCode.tsx
+++ b/CollectifyFrontend/app/(tabs)/qrCode.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
-import { Layout, Text, List, ListItem, ApplicationProvider } from '@ui-kitten/components';
-
+import { useRouter } from 'expo-router';
 import QRCode from 'react-native-qrcode-svg';
-import { IStackScreenProps } from '../../src/library/IStackScreenProps';
 import { IQRCodePayload } from '../../src/library/IQRCodePayload';
 
-const QRCodeScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
-    const { navigation } = props;
+const QRCodeScreen = () => {
+    const router = useRouter();
     const payload: IQRCodePayload = { name: 'Cool Person', number: '1-234-567-8900' };
 
     return (
         <View style={styles.container}>
             <QRCode value={JSON.stringify(payload)} />
             <View style={styles.button}>
-                <Button title="Go to Scanner" onPress={() => navigation.navigate('Scan')} />
+                <Button title="Go to Scanner" onPress={() => router.push('/scan')} />
             </View>
         </View>
     );
@@ -32,4 +30,4 @@ const styles = StyleSheet.create({
     button: {
         marginTop: 10
     }
-});
\ No newline at end of file
+});
diff --git a/CollectifyFrontend/app/(tabs)/scan.tsx b/CollectifyFrontend/app/(tabs)/scan.tsx
index bac11ef..8361248 100644
--- a/CollectifyFrontend/app/(tabs)/scan.tsx
+++ b/CollectifyFrontend/app/(tabs)/scan.tsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { BarCodeScanner } from 'expo-barcode-scanner';
-import { Text, StyleSheet, Button } from 'react-native';
-import { Layout, List, ListItem, ApplicationProvider } from '@ui-kitten/components';
-
-import { IStackScreenProps } from '../../src/library/IStackScreenProps';
+import { CameraView, Camera, BarcodeScanningResult } from 'expo-camera';
+import * as ImagePicker from "expo-image-picker";
+import { View, Text, StyleSheet, Button } from 'react-native';
+import { useRouter } from 'expo-router';
 import { IQRCodePayload } from '../../src/library/IQRCodePayload';
- 
-const ScanScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
+
+const ScanScreen = () => {
+    const router = useRouter();
     const [loading, setLoading] = useState(true);
     const [scanData, setScanData] = useState<IQRCodePayload>();
-    const [permission, setPermission] = useState(true);
+    const [permission, setPermission] = useState<boolean | null>(null);
 
     useEffect(() => {
         requestCameraPermission();
@@ -17,15 +17,8 @@ const ScanScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
 
     const requestCameraPermission = async () => {
         try {
-            const { status, granted } = await BarCodeScanner.requestPermissionsAsync();
-            console.log(`Status: ${status}, Granted: ${granted}`);
-
-            if (status === 'granted') {
-                console.log('Access granted');
-                setPermission(true);
-            } else {
-                setPermission(false);
-            }
+            const { status, granted } = await Camera.requestCameraPermissionsAsync();
+            setPermission(status === 'granted');
         } catch (error) {
             console.error(error);
             setPermission(false);
@@ -35,40 +28,31 @@ const ScanScreen: React.FunctionComponent<IStackScreenProps> = (props) => {
     };
 
     if (loading) return <Text>Requesting permission ...</Text>;
+    if (permission === false) return <Text>No access to camera</Text>;
 
-    if (scanData) {
-        return (
-            <>
-                <Text style={styles.text}>Name: {scanData.name}</Text>
-                <Text style={styles.text}>Number: {scanData.number}</Text>
-                {/* <Button title="Scan Again" onPress={() => setScanData(undefined)}>
-                    Scan Again
-                </Button> */}
-            </>
-        );
-    }
+    const handleBarcodeScanned = ({ type, data }: BarcodeScanningResult) => {
+        try {
+            console.log(type, data);
+            let _data = JSON.parse(data);
+            setScanData(_data);
+        } catch (error) {
+            console.error('Unable to parse QR code: ', error);
+        }
+        alert(`Scanned QR Code: ${data}`);
+    };
 
-    if (permission) {
-        return (
-            <BarCodeScanner
-                style={[styles.container]}
-                onBarCodeScanned={({ type, data }) => {
-                    try {
-                        console.log(type);
-                        console.log(data);
-                        let _data = JSON.parse(data);
-                        setScanData(_data);
-                    } catch (error) {
-                        console.error('Unable to parse string: ', error);
-                    }
-                }}
-            >
-                <Text style={styles.text}>Scan the QR code.</Text>
-            </BarCodeScanner>
-        );
-    } else {
-        return <Text style={styles.textError}>Permission rejected.</Text>;
-    }
+    return (
+        <View style={styles.container}>
+            <CameraView
+                onBarcodeScanned={scanData ? undefined : handleBarcodeScanned}
+                barcodeScannerSettings={{ barcodeTypes: ["qr", "pdf417"] }}
+                style={StyleSheet.absoluteFillObject}
+            />
+            {scanData && (
+                <Button title="Scan Again" onPress={() => setScanData(undefined)} />
+            )}
+        </View>
+    );
 };
 
 export default ScanScreen;
@@ -80,11 +64,4 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center'
     },
-    text: {
-        marginTop: 15,
-        backgroundColor: 'white'
-    },
-    textError: {
-        color: 'red'
-    }
-});
\ No newline at end of file
+});
diff --git a/CollectifyFrontend/app/_layout.tsx b/CollectifyFrontend/app/_layout.tsx
index b418ce4..6a8200d 100644
--- a/CollectifyFrontend/app/_layout.tsx
+++ b/CollectifyFrontend/app/_layout.tsx
@@ -5,7 +5,11 @@ import { Stack } from "expo-router";
 export default function RootLayout() {
   return (
     <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen 
+      name="(tabs)" 
+      options={{ 
+        headerShown: false
+         }} />
 
       <Stack.Screen
         name="profile"
@@ -43,13 +47,13 @@ export default function RootLayout() {
       />
 
       <Stack.Screen
-         name = "qrCode"
+         name = "(tabs)/qrCode"
          options={{
           title: "QRCode"
         }}
         />
          <Stack.Screen
-         name = "scan"
+         name = "(tabs)/scan"
          options={{
           title: "Scan"
         }}
diff --git a/CollectifyFrontend/app/groups/[item].tsx b/CollectifyFrontend/app/groups/[item].tsx
index b685b35..4bbfef9 100644
--- a/CollectifyFrontend/app/groups/[item].tsx
+++ b/CollectifyFrontend/app/groups/[item].tsx
@@ -8,6 +8,7 @@ import { getNotesByGroupId, addNote, deleteNote } from '../../services/noteServi
 import { getGroup, updateGroup } from '../../services/groupService';
 import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 
+
 type Note = {
   id: string;
   title: string;
@@ -120,6 +121,7 @@ export default function GroupNotesScreen() {
       >
         <Layout style={styles.container}>
           {/* Group Name Section */}
+        
           <Input
             style={styles.nameInput}
             textStyle={{ fontSize: 24, fontWeight: 'bold' }}
@@ -130,14 +132,26 @@ export default function GroupNotesScreen() {
             }}
             placeholder="Group Name"
           />
-
+          {/* QR Code Button */}
+          <View style={styles.qrButtonContainer}>
+              <Button
+                  status="info"
+                  onPress={() => router.push('/qrCode')} 
+                  style={styles.qrButton}
+              >
+                  Show QR Code
+              </Button>
+          </View>
+              
+      
+         
           {/* Notes List */}
           <List
             data={notes}
             renderItem={renderNote}
             keyExtractor={(note) => note.id.toString()} // Ensure note.id is a string
             style={styles.list}
-          />
+          /> 
           <Button
             status="warning"
             onPress={handleAddNote}
@@ -152,6 +166,14 @@ export default function GroupNotesScreen() {
 }
 
 const styles = StyleSheet.create({
+  qrButtonContainer: {
+    marginVertical: 10,
+    alignItems: 'center',
+  },
+  qrButton: {
+    borderRadius: 8,
+    paddingHorizontal: 15,
+  },
   container: {
     flex: 1,
     padding: 20,
diff --git a/CollectifyFrontend/package-lock.json b/CollectifyFrontend/package-lock.json
index dbbbfa6..b17f771 100644
--- a/CollectifyFrontend/package-lock.json
+++ b/CollectifyFrontend/package-lock.json
@@ -22,7 +22,7 @@
         "expo-constants": "~17.0.3",
         "expo-font": "~13.0.1",
         "expo-haptics": "~14.0.0",
-        "expo-image-picker": "^16.0.4",
+        "expo-image-picker": "~16.0.5",
         "expo-linking": "~7.0.3",
         "expo-router": "~4.0.11",
         "expo-secure-store": "~14.0.0",
@@ -32,6 +32,7 @@
         "expo-system-ui": "~4.0.5",
         "expo-web-browser": "~14.0.1",
         "jwt-decode": "^4.0.0",
+        "next": "^15.1.6",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-native": "0.76.3",
@@ -2240,6 +2241,16 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
+      "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eva-design/dss": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@eva-design/dss/-/dss-2.2.0.tgz",
@@ -2913,6 +2924,367 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -3469,6 +3841,140 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@next/env": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.6.tgz",
+      "integrity": "sha512-d9AFQVPEYNr+aqokIiPLNK/MTyt3DWa/dpKveiAaVccUadFbhFEvY6FXYX2LJO2Hv7PHnLBu2oWwB4uBuHjr/w==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.6.tgz",
+      "integrity": "sha512-u7lg4Mpl9qWpKgy6NzEkz/w0/keEHtOybmIl0ykgItBxEM5mYotS5PmqTpo+Rhg8FiOiWgwr8USxmKQkqLBCrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.6.tgz",
+      "integrity": "sha512-x1jGpbHbZoZ69nRuogGL2MYPLqohlhnT9OCU6E6QFewwup+z+M6r8oU47BTeJcWsF2sdBahp5cKiAcDbwwK/lg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.6.tgz",
+      "integrity": "sha512-jar9sFw0XewXsBzPf9runGzoivajeWJUc/JkfbLTC4it9EhU8v7tCRLH7l5Y1ReTMN6zKJO0kKAGqDk8YSO2bg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.6.tgz",
+      "integrity": "sha512-+n3u//bfsrIaZch4cgOJ3tXCTbSxz0s6brJtU3SzLOvkJlPQMJ+eHVRi6qM2kKKKLuMY+tcau8XD9CJ1OjeSQQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.6.tgz",
+      "integrity": "sha512-SpuDEXixM3PycniL4iVCLyUyvcl6Lt0mtv3am08sucskpG0tYkW1KlRhTgj4LI5ehyxriVVcfdoxuuP8csi3kQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.6.tgz",
+      "integrity": "sha512-L4druWmdFSZIIRhF+G60API5sFB7suTbDRhYWSjiw0RbE+15igQvE2g2+S973pMGvwN3guw7cJUjA/TmbPWTHQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.6.tgz",
+      "integrity": "sha512-s8w6EeqNmi6gdvM19tqKKWbCyOBvXFbndkGHl+c9YrzsLARRdCHsD9S1fMj8gsXm9v8vhC8s3N8rjuC/XrtkEg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.6.tgz",
+      "integrity": "sha512-6xomMuu54FAFxttYr5PJbEfu96godcxBTRk1OhAvJq0/EnmFU/Ybiax30Snis4vdWZ9LGpf7Roy5fSs7v/5ROQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4203,6 +4709,21 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -5459,6 +5980,17 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "license": "MIT"
     },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -7193,9 +7725,9 @@
       }
     },
     "node_modules/expo-image-picker": {
-      "version": "16.0.4",
-      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-16.0.4.tgz",
-      "integrity": "sha512-LeTdQxL+kS8wiFOf+mTxDZmr0Ok3KwcpvCaDnXwCdCQuszVd4sSml7lg+oaJfkWj793u74M+8j0hQaEDHCgkxg==",
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-16.0.5.tgz",
+      "integrity": "sha512-Rkc4vihqPN/48PV3QJkrG10Lg5s1LonKmpVnGwBSlHjRR5ngqJH++DYFndgD69hLaWrJukzCYpP3CyTMAAatWg==",
       "license": "MIT",
       "dependencies": {
         "expo-image-loader": "~5.0.0"
@@ -11193,6 +11725,88 @@
       "integrity": "sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==",
       "license": "MIT"
     },
+    "node_modules/next": {
+      "version": "15.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.1.6.tgz",
+      "integrity": "sha512-Hch4wzbaX0vKQtalpXvUiw5sYivBy4cm5rzUKrBnUB/y436LGrvOUqYvlSeNVCWFO/770gDlltR9gqZH62ct4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.1.6",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.15",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.1.6",
+        "@next/swc-darwin-x64": "15.1.6",
+        "@next/swc-linux-arm64-gnu": "15.1.6",
+        "@next/swc-linux-arm64-musl": "15.1.6",
+        "@next/swc-linux-x64-gnu": "15.1.6",
+        "@next/swc-linux-x64-musl": "15.1.6",
+        "@next/swc-win32-arm64-msvc": "15.1.6",
+        "@next/swc-win32-x64-msvc": "15.1.6",
+        "sharp": "^0.33.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -13485,6 +14099,69 @@
       "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
       "license": "MIT"
     },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
+      }
+    },
+    "node_modules/sharp/node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -13792,6 +14469,14 @@
       "integrity": "sha512-QzQxpoacatkreL6jsxnVb7X5R/pGw9OUv2qWTYWnmLpg4NdN31snPy/f3TdQE1ZUXaThRvj1Zw4/OGg0ZkaLMA==",
       "license": "MIT"
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -13980,6 +14665,29 @@
       "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==",
       "license": "MIT"
     },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/styleq": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz",
diff --git a/CollectifyFrontend/package.json b/CollectifyFrontend/package.json
index 4e5a476..77d065b 100644
--- a/CollectifyFrontend/package.json
+++ b/CollectifyFrontend/package.json
@@ -25,10 +25,11 @@
     "expo": "~52.0.15",
     "expo-barcode-scanner": "^13.0.1",
     "expo-blur": "~14.0.1",
+    "expo-camera": "~16.0.14",
     "expo-constants": "~17.0.3",
     "expo-font": "~13.0.1",
     "expo-haptics": "~14.0.0",
-    "expo-image-picker": "^16.0.4",
+    "expo-image-picker": "~16.0.5",
     "expo-linking": "~7.0.3",
     "expo-router": "~4.0.11",
     "expo-secure-store": "~14.0.0",
@@ -38,6 +39,7 @@
     "expo-system-ui": "~4.0.5",
     "expo-web-browser": "~14.0.1",
     "jwt-decode": "^4.0.0",
+    "next": "^15.1.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.3",
@@ -47,8 +49,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5",
-    "expo-camera": "~16.0.14"
+    "react-native-webview": "13.12.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
diff --git a/CollectifyFrontend/services/axiosInstance.ts b/CollectifyFrontend/services/axiosInstance.ts
index f0265ce..0e51f88 100644
--- a/CollectifyFrontend/services/axiosInstance.ts
+++ b/CollectifyFrontend/services/axiosInstance.ts
@@ -2,6 +2,7 @@ import axios from 'axios';
 
 const api = axios.create({
   baseURL: 'http://10.0.2.2:5251', 
+  // baseURL: '192.168.100.20',
   timeout: 10000,
   httpsAgent: {
     rejectUnauthorized: false, 

From c5a4867e447b3e286311d054d9879932555953d9 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sat, 1 Feb 2025 18:52:50 +0200
Subject: [PATCH 3/9] Implemented scanner and reload scanner

---
 CollectifyFrontend/app/(tabs)/_layout.tsx     |  13 +-
 CollectifyFrontend/app/(tabs)/scan.tsx        | 118 +++++++++++++-----
 CollectifyFrontend/app/_layout.tsx            |   6 -
 .../app/{(tabs) => }/qrCode.tsx               |   8 +-
 4 files changed, 89 insertions(+), 56 deletions(-)
 rename CollectifyFrontend/app/{(tabs) => }/qrCode.tsx (85%)

diff --git a/CollectifyFrontend/app/(tabs)/_layout.tsx b/CollectifyFrontend/app/(tabs)/_layout.tsx
index 891f7d2..28c96f0 100644
--- a/CollectifyFrontend/app/(tabs)/_layout.tsx
+++ b/CollectifyFrontend/app/(tabs)/_layout.tsx
@@ -83,18 +83,7 @@ export default function TabLayout() {
           ),
         }}
       />
-       <Tabs.Screen
-        name="qrCode"
-        options={{
-          title: "QRCode",
-          headerRight: () => (
-            <HeaderProfileButton refreshLoginStatus={checkLoginStatus} />
-          ),
-          tabBarIcon: ({ color, focused }) => (
-            <FontAwesome name={focused ? 'file' : 'file-o'} color={color} size={27} />
-          ),
-        }}
-      />
+      
       <Tabs.Screen
         name="scan"
         options={{
diff --git a/CollectifyFrontend/app/(tabs)/scan.tsx b/CollectifyFrontend/app/(tabs)/scan.tsx
index 8361248..03a0212 100644
--- a/CollectifyFrontend/app/(tabs)/scan.tsx
+++ b/CollectifyFrontend/app/(tabs)/scan.tsx
@@ -1,67 +1,117 @@
 import React, { useState, useEffect } from 'react';
-import { CameraView, Camera, BarcodeScanningResult } from 'expo-camera';
-import * as ImagePicker from "expo-image-picker";
 import { View, Text, StyleSheet, Button } from 'react-native';
-import { useRouter } from 'expo-router';
+import * as ImagePicker from 'expo-image-picker';
+import { Camera, CameraView } from 'expo-camera';
 import { IQRCodePayload } from '../../src/library/IQRCodePayload';
+import { useRouter } from 'expo-router';
 
 const ScanScreen = () => {
     const router = useRouter();
-    const [loading, setLoading] = useState(true);
-    const [scanData, setScanData] = useState<IQRCodePayload>();
-    const [permission, setPermission] = useState<boolean | null>(null);
+    const [scanData, setScanData] = useState<IQRCodePayload | undefined>(undefined);
+    const [imageUri, setImageUri] = useState<string | null>(null);
+    const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+    const [cameraKey, setCameraKey] = useState(0); // Key to force re-mount camera on scan again
 
-    useEffect(() => {
-        requestCameraPermission();
-    }, []);
+    // Request camera permission
+    const requestPermission = async () => {
+        const { status } = await Camera.requestCameraPermissionsAsync();
+        setHasPermission(status === 'granted');
+    };
 
-    const requestCameraPermission = async () => {
+    // Pick image from gallery and scan QR code
+    const pickImage = async () => {
+        let result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            allowsEditing: false,
+            quality: 1,
+        });
+
+        if (!result.canceled) {
+            setImageUri(result.assets[0].uri);
+            scanQRCodeFromImage(result.assets[0].uri);
+        }
+    };
+
+    // Scan QR code from image
+    const scanQRCodeFromImage = async (uri: string) => {
         try {
-            const { status, granted } = await Camera.requestCameraPermissionsAsync();
-            setPermission(status === 'granted');
+            const scannedResults = await Camera.scanFromURLAsync(uri);
+            if (scannedResults.length > 0) {
+                const qrData = scannedResults[0].data;
+                const parsedData: IQRCodePayload = JSON.parse(qrData);
+                setScanData(parsedData);
+                console.log('Scanned QR Code Data:', parsedData);
+            } else {
+                alert('No QR Code found');
+            }
         } catch (error) {
-            console.error(error);
-            setPermission(false);
-        } finally {
-            setLoading(false);
+            console.error('Error scanning QR code:', error);
+            alert('Error scanning QR Code');
         }
     };
 
-    if (loading) return <Text>Requesting permission ...</Text>;
-    if (permission === false) return <Text>No access to camera</Text>;
-
-    const handleBarcodeScanned = ({ type, data }: BarcodeScanningResult) => {
+    // Scan QR code live from camera
+    const handleBarcodeScanned = ({ type, data }: any) => {
         try {
-            console.log(type, data);
-            let _data = JSON.parse(data);
-            setScanData(_data);
+            const parsedData: IQRCodePayload = JSON.parse(data);
+            setScanData(parsedData);
+            alert(`Scanned QR Code: ${data}`);
         } catch (error) {
             console.error('Unable to parse QR code: ', error);
         }
-        alert(`Scanned QR Code: ${data}`);
     };
 
+    // Reset the scan state for re-scanning
+    const resetScanner = () => {
+        setScanData(undefined);
+        setImageUri(null);
+        setCameraKey(prevKey => prevKey + 1); // Force re-mount the camera view
+    };
+
+    // Render the view depending on the permission and scan data
+    useEffect(() => {
+        requestPermission();
+    }, []);
+
+    if (hasPermission === null) {
+        return <Text>Requesting permission...</Text>;
+    }
+    if (hasPermission === false) {
+        return <Text>No access to camera</Text>;
+    }
+
     return (
         <View style={styles.container}>
-            <CameraView
-                onBarcodeScanned={scanData ? undefined : handleBarcodeScanned}
-                barcodeScannerSettings={{ barcodeTypes: ["qr", "pdf417"] }}
-                style={StyleSheet.absoluteFillObject}
-            />
-            {scanData && (
-                <Button title="Scan Again" onPress={() => setScanData(undefined)} />
+            {!scanData ? (
+                <>
+                    {/* Button for picking an image */}
+                    <Button title="Pick an Image" onPress={pickImage} />
+                    {/* Camera View for live scanning */}
+                    <CameraView
+                        key={cameraKey}  // Forces re-mount on scan again
+                        onBarcodeScanned={handleBarcodeScanned}
+                        style={StyleSheet.absoluteFillObject}
+                    />
+                </>
+            ) : (
+                <>
+                    {/* Display the scanned QR code data */}
+                    <Text>Scanned Data: {JSON.stringify(scanData, null, 2)}</Text>
+                    {/* Button for re-scanning */}
+                    <Button title="Scan Again" onPress={resetScanner} />
+                </>
             )}
         </View>
     );
 };
 
-export default ScanScreen;
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         padding: 10,
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
     },
 });
+
+export default ScanScreen;
diff --git a/CollectifyFrontend/app/_layout.tsx b/CollectifyFrontend/app/_layout.tsx
index 6a8200d..61a4cd3 100644
--- a/CollectifyFrontend/app/_layout.tsx
+++ b/CollectifyFrontend/app/_layout.tsx
@@ -46,12 +46,6 @@ export default function RootLayout() {
         }}
       />
 
-      <Stack.Screen
-         name = "(tabs)/qrCode"
-         options={{
-          title: "QRCode"
-        }}
-        />
          <Stack.Screen
          name = "(tabs)/scan"
          options={{
diff --git a/CollectifyFrontend/app/(tabs)/qrCode.tsx b/CollectifyFrontend/app/qrCode.tsx
similarity index 85%
rename from CollectifyFrontend/app/(tabs)/qrCode.tsx
rename to CollectifyFrontend/app/qrCode.tsx
index 027eb1d..ea9b792 100644
--- a/CollectifyFrontend/app/(tabs)/qrCode.tsx
+++ b/CollectifyFrontend/app/qrCode.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
 import { useRouter } from 'expo-router';
 import QRCode from 'react-native-qrcode-svg';
-import { IQRCodePayload } from '../../src/library/IQRCodePayload';
+import { IQRCodePayload } from '../src/library/IQRCodePayload';
 
 const QRCodeScreen = () => {
     const router = useRouter();
@@ -11,9 +11,9 @@ const QRCodeScreen = () => {
     return (
         <View style={styles.container}>
             <QRCode value={JSON.stringify(payload)} />
-            <View style={styles.button}>
+            {/* <View style={styles.button}>
                 <Button title="Go to Scanner" onPress={() => router.push('/scan')} />
-            </View>
+            </View> */}
         </View>
     );
 };
@@ -30,4 +30,4 @@ const styles = StyleSheet.create({
     button: {
         marginTop: 10
     }
-});
+}); 
\ No newline at end of file

From c9e7421f51eb0f45aa0a4f97089cb379ba70b688 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sat, 1 Feb 2025 19:09:29 +0200
Subject: [PATCH 4/9] See members and qrcode buttons

---
 CollectifyFrontend/app/(tabs)/_layout.tsx     |  2 +-
 CollectifyFrontend/app/_layout.tsx            |  2 +-
 CollectifyFrontend/app/groups/[item].tsx      | 67 ++++++++++++++-----
 .../app/groups/groupmembers.tsx               |  3 +
 4 files changed, 54 insertions(+), 20 deletions(-)
 create mode 100644 CollectifyFrontend/app/groups/groupmembers.tsx

diff --git a/CollectifyFrontend/app/(tabs)/_layout.tsx b/CollectifyFrontend/app/(tabs)/_layout.tsx
index 28c96f0..5f541a0 100644
--- a/CollectifyFrontend/app/(tabs)/_layout.tsx
+++ b/CollectifyFrontend/app/(tabs)/_layout.tsx
@@ -87,7 +87,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="scan"
         options={{
-          title: "Scan",
+          title: "Scan QR",
           headerRight: () => (
             <HeaderProfileButton refreshLoginStatus={checkLoginStatus} />
           ),
diff --git a/CollectifyFrontend/app/_layout.tsx b/CollectifyFrontend/app/_layout.tsx
index 61a4cd3..68239db 100644
--- a/CollectifyFrontend/app/_layout.tsx
+++ b/CollectifyFrontend/app/_layout.tsx
@@ -49,7 +49,7 @@ export default function RootLayout() {
          <Stack.Screen
          name = "(tabs)/scan"
          options={{
-          title: "Scan"
+          title: "Scan QR"
         }}
         />
 
diff --git a/CollectifyFrontend/app/groups/[item].tsx b/CollectifyFrontend/app/groups/[item].tsx
index 4bbfef9..649a9a0 100644
--- a/CollectifyFrontend/app/groups/[item].tsx
+++ b/CollectifyFrontend/app/groups/[item].tsx
@@ -8,7 +8,6 @@ import { getNotesByGroupId, addNote, deleteNote } from '../../services/noteServi
 import { getGroup, updateGroup } from '../../services/groupService';
 import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 
-
 type Note = {
   id: string;
   title: string;
@@ -121,7 +120,6 @@ export default function GroupNotesScreen() {
       >
         <Layout style={styles.container}>
           {/* Group Name Section */}
-        
           <Input
             style={styles.nameInput}
             textStyle={{ fontSize: 24, fontWeight: 'bold' }}
@@ -132,19 +130,28 @@ export default function GroupNotesScreen() {
             }}
             placeholder="Group Name"
           />
-          {/* QR Code Button */}
-          <View style={styles.qrButtonContainer}>
-              <Button
-                  status="info"
-                  onPress={() => router.push('/qrCode')} 
-                  style={styles.qrButton}
-              >
-                  Show QR Code
-              </Button>
+          
+          {/* Button Group */}
+          <View style={styles.buttonGroup}>
+            {/* QR Code Button */}
+            <Button
+              status="info"
+              onPress={() => router.push('/qrCode')} 
+              style={styles.qrButton}
+            >
+              Show QR Code
+            </Button>
+
+            {/* Members Button */}
+            <Button
+              status="primary"
+              onPress={() => router.push('/groups/groupmembers')}
+              style={styles.membersButton}
+            >
+              See Members
+            </Button>
           </View>
-              
-      
-         
+
           {/* Notes List */}
           <List
             data={notes}
@@ -166,13 +173,37 @@ export default function GroupNotesScreen() {
 }
 
 const styles = StyleSheet.create({
-  qrButtonContainer: {
-    marginVertical: 10,
-    alignItems: 'center',
+  buttonGroup: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
   },
   qrButton: {
     borderRadius: 8,
-    paddingHorizontal: 15,
+    paddingVertical: 8,   // Slightly smaller vertical padding
+    paddingHorizontal: 12, // Slightly smaller horizontal padding
+    backgroundColor: 'rgba(255, 255, 255, 0.7)', // Light transparent background
+    borderColor: '#ccc',  // Light border
+    borderWidth: 1,       // Border width
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 3.84,
+    flex: 1,
+    marginRight: 10,
+  },
+  membersButton: {
+    borderRadius: 8,
+    paddingVertical: 8,   // Slightly smaller vertical padding
+    paddingHorizontal: 12, // Slightly smaller horizontal padding
+    backgroundColor: 'rgba(255, 255, 255, 0.7)', // Light transparent background
+    borderColor: '#ccc',  // Light border
+    borderWidth: 1,       // Border width
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 3.84,
+    flex: 1,
   },
   container: {
     flex: 1,
diff --git a/CollectifyFrontend/app/groups/groupmembers.tsx b/CollectifyFrontend/app/groups/groupmembers.tsx
new file mode 100644
index 0000000..6f7e2bc
--- /dev/null
+++ b/CollectifyFrontend/app/groups/groupmembers.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+import { Button, StyleSheet, View } from 'react-native';
+import { useRouter } from 'expo-router';

From c694d1da5e51d8bd9b53d7f98a8c4c0e60269d88 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sat, 1 Feb 2025 22:46:22 +0200
Subject: [PATCH 5/9] See members page

---
 CollectifyFrontend/app/groups/[item].tsx      |   7 +-
 .../app/groups/groupmembers.tsx               | 120 +++++++++++++++++-
 CollectifyFrontend/services/groupService.ts   |  25 ++++
 3 files changed, 148 insertions(+), 4 deletions(-)

diff --git a/CollectifyFrontend/app/groups/[item].tsx b/CollectifyFrontend/app/groups/[item].tsx
index 649a9a0..7f027e4 100644
--- a/CollectifyFrontend/app/groups/[item].tsx
+++ b/CollectifyFrontend/app/groups/[item].tsx
@@ -17,6 +17,8 @@ type Note = {
 export default function GroupNotesScreen() {
   const router = useRouter();
   const { item: groupId } = useLocalSearchParams<{ item: string }>();
+  //console.log("THIS IS THE GROUP ID from Ioana:", groupId); // Log to verify if groupId is valid
+
   const [groupName, setGroupName] = useState<string>(''); // State for group name
   const [notes, setNotes] = useState<Note[]>([]); // State for notes
   const [error, setError] = useState<string | null>(null); // State for errors
@@ -145,7 +147,10 @@ export default function GroupNotesScreen() {
             {/* Members Button */}
             <Button
               status="primary"
-              onPress={() => router.push('/groups/groupmembers')}
+              onPress={() => router.push({
+                pathname: './groupmembers',
+                params: { item:groupId } // Pass the groupId as a parameter
+              })}
               style={styles.membersButton}
             >
               See Members
diff --git a/CollectifyFrontend/app/groups/groupmembers.tsx b/CollectifyFrontend/app/groups/groupmembers.tsx
index 6f7e2bc..b083db9 100644
--- a/CollectifyFrontend/app/groups/groupmembers.tsx
+++ b/CollectifyFrontend/app/groups/groupmembers.tsx
@@ -1,3 +1,117 @@
-import React from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-import { useRouter } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import { Layout, Text, List, ListItem, ApplicationProvider, Avatar } from '@ui-kitten/components';
+import { StyleSheet } from 'react-native';
+import * as eva from '@eva-design/eva';
+import { getGroupMembers } from '../../services/groupService';
+import { getProfile } from '../../services/authService'; // Import getProfile
+import { useLocalSearchParams } from 'expo-router';
+import { useFocusEffect } from '@react-navigation/native';
+
+type UserProfile = {
+  id: string;
+  nickname: string;
+  avatarPath: string | null;
+};
+
+export default function GroupMembersScreen() {
+  const { item: groupId } = useLocalSearchParams<{ item: string }>();
+
+  const [groupMembers, setGroupMembers] = useState<UserProfile[]>([]);
+  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const fetchGroupMembers = async () => {
+    try {
+      if (!groupId) return;
+  
+      const response = await getGroupMembers(groupId as string);
+      const members: UserProfile[] = response?.$values ?? []; // Ensure members is typed correctly
+  
+      if (currentUserId) {
+        // Exclude the current user from the members list
+        const filteredMembers = members.filter((member: UserProfile) => member.id !== currentUserId);
+        setGroupMembers(filteredMembers);
+        console.log(groupMembers)
+      } else {
+        setGroupMembers(members);
+      }
+    } catch {
+      setError('Failed to load group members. Please try again.');
+    }
+  };
+  
+
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      try {
+        const profile = await getProfile();
+        setCurrentUserId(profile.id); // Assuming the profile response includes "id"
+      } catch {
+        setError('Failed to fetch user profile.');
+      }
+    };
+
+    fetchUserProfile();
+  }, []);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      fetchGroupMembers();
+    }, [groupId, currentUserId]) // Depend on currentUserId to ensure filtering
+  );
+
+  if (error) {
+    return (
+      <ApplicationProvider {...eva} theme={eva.light}>
+        <Layout style={styles.container}>
+          <Text style={{ color: 'red' }}>{error}</Text>
+        </Layout>
+      </ApplicationProvider>
+    );
+  }
+
+  return (
+    <ApplicationProvider {...eva} theme={eva.light}>
+      <Layout style={styles.container}>
+        {groupMembers.length > 0 ? (
+          <List
+            data={groupMembers}
+            renderItem={({ item }) => (
+              <ListItem
+                title={item.nickname}
+                description={item.avatarPath ? 'Has an avatar' : 'No avatar'}
+                accessoryLeft={() => (
+                  <Avatar source={{ uri: item.avatarPath ?? '' }} size="small" />
+                )}
+                style={styles.listItem}
+              />
+            )}
+            keyExtractor={(item) => item.id}
+          />
+        ) : (
+          <Text style={styles.noGroupsText}>No members. Add someone!</Text>
+        )}
+      </Layout>
+    </ApplicationProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'transparent',
+  },
+  noGroupsText: {
+    textAlign: 'center',
+    fontSize: 16,
+    color: '#888',
+    marginVertical: 20,
+  },
+  listItem: {
+    marginVertical: 4,
+    height: 50,
+    justifyContent: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+  },
+});
diff --git a/CollectifyFrontend/services/groupService.ts b/CollectifyFrontend/services/groupService.ts
index a00a3c7..9c88f5c 100644
--- a/CollectifyFrontend/services/groupService.ts
+++ b/CollectifyFrontend/services/groupService.ts
@@ -151,4 +151,29 @@ export const deleteGroup = async (id: string) => {
     }
     throw error;
   }
+
+};
+
+export const getGroupMembers = async (groupId: string) => {
+  try {
+    const accessToken = await SecureStore.getItemAsync('accessToken');
+    if (!accessToken) {
+      throw new Error('Access token is missing. Please log in.');
+    }
+    
+    //console.log("Sending request with groupId:", groupId);  // Log the groupId being sent
+
+    const response = await api.get('/api/groups/get_group_members', {
+      params: { groupId },
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    console.log("Response data:", response.data);  // Log the response
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching the group members:', error);
+    throw error;
+  }
 };
\ No newline at end of file

From 84b8649b8e99c11a038abb559109e4f265044deb Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sat, 1 Feb 2025 23:31:19 +0200
Subject: [PATCH 6/9] Generate group qr code

---
 CollectifyFrontend/app/(tabs)/scan.tsx   | 115 ++++++++---------------
 CollectifyFrontend/app/groups/[item].tsx |   5 +-
 CollectifyFrontend/app/qrCode.tsx        |  49 +++++-----
 3 files changed, 69 insertions(+), 100 deletions(-)

diff --git a/CollectifyFrontend/app/(tabs)/scan.tsx b/CollectifyFrontend/app/(tabs)/scan.tsx
index 03a0212..4be38fe 100644
--- a/CollectifyFrontend/app/(tabs)/scan.tsx
+++ b/CollectifyFrontend/app/(tabs)/scan.tsx
@@ -1,78 +1,49 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Button } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
+import { View, Text, StyleSheet, Button, Alert } from 'react-native';
 import { Camera, CameraView } from 'expo-camera';
-import { IQRCodePayload } from '../../src/library/IQRCodePayload';
 import { useRouter } from 'expo-router';
+import api from '../../services/axiosInstance'; // Ensure this points to your API setup
+import { getProfile } from '../../services/authService'; // Get current user ID
 
 const ScanScreen = () => {
     const router = useRouter();
-    const [scanData, setScanData] = useState<IQRCodePayload | undefined>(undefined);
-    const [imageUri, setImageUri] = useState<string | null>(null);
+    const [groupId, setGroupId] = useState<string | null>(null);
     const [hasPermission, setHasPermission] = useState<boolean | null>(null);
-    const [cameraKey, setCameraKey] = useState(0); // Key to force re-mount camera on scan again
 
-    // Request camera permission
-    const requestPermission = async () => {
-        const { status } = await Camera.requestCameraPermissionsAsync();
-        setHasPermission(status === 'granted');
-    };
+    useEffect(() => {
+        (async () => {
+            const { status } = await Camera.requestCameraPermissionsAsync();
+            setHasPermission(status === 'granted');
+        })();
+    }, []);
 
-    // Pick image from gallery and scan QR code
-    const pickImage = async () => {
-        let result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ['images'],
-            allowsEditing: false,
-            quality: 1,
-        });
+    const handleBarcodeScanned = async ({ data }: { data: string }) => {
+        setGroupId(data); // QR Code contains groupId
+        try {
+            const user = await getProfile(); // Get current user ID
+            if (!user || !user.id) {
+                Alert.alert("Error", "User not authenticated.");
+                return;
+            }
 
-        if (!result.canceled) {
-            setImageUri(result.assets[0].uri);
-            scanQRCodeFromImage(result.assets[0].uri);
-        }
-    };
+            const response = await api.post('/api/group/add_member', {
+                groupId: data,
+                memberId: user.id // Send memberId instead of userId
+            });
 
-    // Scan QR code from image
-    const scanQRCodeFromImage = async (uri: string) => {
-        try {
-            const scannedResults = await Camera.scanFromURLAsync(uri);
-            if (scannedResults.length > 0) {
-                const qrData = scannedResults[0].data;
-                const parsedData: IQRCodePayload = JSON.parse(qrData);
-                setScanData(parsedData);
-                console.log('Scanned QR Code Data:', parsedData);
+            if (response.status === 200) {
+                Alert.alert("Success", "You have been added to the group!");
+                // If you need to redirect to a generic group page or dashboard after adding the user:
+                router.push('./group'); // Redirect to a general group page or dashboard
             } else {
-                alert('No QR Code found');
+                Alert.alert("Error", "Failed to join group.");
             }
         } catch (error) {
-            console.error('Error scanning QR code:', error);
-            alert('Error scanning QR Code');
-        }
-    };
-
-    // Scan QR code live from camera
-    const handleBarcodeScanned = ({ type, data }: any) => {
-        try {
-            const parsedData: IQRCodePayload = JSON.parse(data);
-            setScanData(parsedData);
-            alert(`Scanned QR Code: ${data}`);
-        } catch (error) {
-            console.error('Unable to parse QR code: ', error);
+            console.error("Error joining group:", error);
+            Alert.alert("Error", "An error occurred.");
         }
     };
 
-    // Reset the scan state for re-scanning
-    const resetScanner = () => {
-        setScanData(undefined);
-        setImageUri(null);
-        setCameraKey(prevKey => prevKey + 1); // Force re-mount the camera view
-    };
-
-    // Render the view depending on the permission and scan data
-    useEffect(() => {
-        requestPermission();
-    }, []);
-
     if (hasPermission === null) {
         return <Text>Requesting permission...</Text>;
     }
@@ -82,36 +53,24 @@ const ScanScreen = () => {
 
     return (
         <View style={styles.container}>
-            {!scanData ? (
-                <>
-                    {/* Button for picking an image */}
-                    <Button title="Pick an Image" onPress={pickImage} />
-                    {/* Camera View for live scanning */}
-                    <CameraView
-                        key={cameraKey}  // Forces re-mount on scan again
-                        onBarcodeScanned={handleBarcodeScanned}
-                        style={StyleSheet.absoluteFillObject}
-                    />
-                </>
+            {!groupId ? (
+                <CameraView
+                    onBarcodeScanned={handleBarcodeScanned}
+                    style={StyleSheet.absoluteFillObject}
+                />
             ) : (
-                <>
-                    {/* Display the scanned QR code data */}
-                    <Text>Scanned Data: {JSON.stringify(scanData, null, 2)}</Text>
-                    {/* Button for re-scanning */}
-                    <Button title="Scan Again" onPress={resetScanner} />
-                </>
+                <Text>Joining group...</Text>
             )}
         </View>
     );
 };
 
+export default ScanScreen;
+
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        padding: 10,
         alignItems: 'center',
         justifyContent: 'center',
     },
 });
-
-export default ScanScreen;
diff --git a/CollectifyFrontend/app/groups/[item].tsx b/CollectifyFrontend/app/groups/[item].tsx
index 7f027e4..dedbb52 100644
--- a/CollectifyFrontend/app/groups/[item].tsx
+++ b/CollectifyFrontend/app/groups/[item].tsx
@@ -138,7 +138,10 @@ export default function GroupNotesScreen() {
             {/* QR Code Button */}
             <Button
               status="info"
-              onPress={() => router.push('/qrCode')} 
+              onPress={() => router.push({
+                pathname: '../qrCode',
+                params: { item:groupId } // Pass the groupId as a parameter
+              })}
               style={styles.qrButton}
             >
               Show QR Code
diff --git a/CollectifyFrontend/app/qrCode.tsx b/CollectifyFrontend/app/qrCode.tsx
index ea9b792..f8b77ad 100644
--- a/CollectifyFrontend/app/qrCode.tsx
+++ b/CollectifyFrontend/app/qrCode.tsx
@@ -1,33 +1,40 @@
 import React from 'react';
-import { Button, StyleSheet, View } from 'react-native';
-import { useRouter } from 'expo-router';
+import {  StyleSheet, View } from 'react-native';
+import { Layout, Text, List, ListItem, Button, Input, ApplicationProvider } from '@ui-kitten/components';
+
+import { useRouter, useLocalSearchParams } from 'expo-router';
 import QRCode from 'react-native-qrcode-svg';
-import { IQRCodePayload } from '../src/library/IQRCodePayload';
 
 const QRCodeScreen = () => {
-    const router = useRouter();
-    const payload: IQRCodePayload = { name: 'Cool Person', number: '1-234-567-8900' };
+  const router = useRouter();
+  const { item: groupId } = useLocalSearchParams<{ item: string }>(); 
+  console.log("From qrcode the groupid: ", groupId)
 
+  if (!groupId) {
     return (
-        <View style={styles.container}>
-            <QRCode value={JSON.stringify(payload)} />
-            {/* <View style={styles.button}>
-                <Button title="Go to Scanner" onPress={() => router.push('/scan')} />
-            </View> */}
-        </View>
+      <View style={styles.container}>
+        <Text category='h3'>No group ID provided</Text>
+      </View>
     );
+  }
+
+  return (
+    <View style={styles.container}>
+      <QRCode value={groupId} /> 
+    </View>
+  );
 };
 
 export default QRCodeScreen;
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    button: {
-        marginTop: 10
-    }
-}); 
\ No newline at end of file
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    marginTop: 10,
+  },
+});

From 9ddea632c4d51461133d0b2a40ee44496200be17 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sun, 2 Feb 2025 01:27:37 +0200
Subject: [PATCH 7/9] Add member using scanner functionality

---
 CollectifyFrontend/app/(tabs)/scan.tsx        | 155 +++++++++++-------
 .../app/groups/groupmembers.tsx               | 101 ++++++++----
 CollectifyFrontend/app/qrCode.tsx             |  12 +-
 3 files changed, 175 insertions(+), 93 deletions(-)

diff --git a/CollectifyFrontend/app/(tabs)/scan.tsx b/CollectifyFrontend/app/(tabs)/scan.tsx
index 4be38fe..e684188 100644
--- a/CollectifyFrontend/app/(tabs)/scan.tsx
+++ b/CollectifyFrontend/app/(tabs)/scan.tsx
@@ -1,76 +1,119 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Button, Alert } from 'react-native';
+import { View, Text, StyleSheet, Alert, Button as RNButton } from 'react-native';
 import { Camera, CameraView } from 'expo-camera';
 import { useRouter } from 'expo-router';
 import api from '../../services/axiosInstance'; // Ensure this points to your API setup
-import { getProfile } from '../../services/authService'; // Get current user ID
+import { getProfile } from '../../services/authService'; 
+import { getGroupMembers } from '../../services/groupService';
 
 const ScanScreen = () => {
-    const router = useRouter();
-    const [groupId, setGroupId] = useState<string | null>(null);
-    const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const router = useRouter();
+  const [groupId, setGroupId] = useState<string | null>(null);
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState<boolean>(false); // Loading state
 
-    useEffect(() => {
-        (async () => {
-            const { status } = await Camera.requestCameraPermissionsAsync();
-            setHasPermission(status === 'granted');
-        })();
-    }, []);
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === 'granted');
+    })();
+  }, []);
 
-    const handleBarcodeScanned = async ({ data }: { data: string }) => {
-        setGroupId(data); // QR Code contains groupId
-        try {
-            const user = await getProfile(); // Get current user ID
-            if (!user || !user.id) {
-                Alert.alert("Error", "User not authenticated.");
-                return;
-            }
+  // Reset groupId and loading when navigating back to allow a new scan.
+  useEffect(() => {
+    setGroupId(null);
+    setLoading(false);
+  }, [router]);
 
-            const response = await api.post('/api/group/add_member', {
-                groupId: data,
-                memberId: user.id // Send memberId instead of userId
-            });
+  const handleBarcodeScanned = async ({ data }: { data: string }) => {
+    setGroupId(data); // QR Code contains groupId
+    setLoading(true); // Set loading to true while processing
 
-            if (response.status === 200) {
-                Alert.alert("Success", "You have been added to the group!");
-                // If you need to redirect to a generic group page or dashboard after adding the user:
-                router.push('./group'); // Redirect to a general group page or dashboard
-            } else {
-                Alert.alert("Error", "Failed to join group.");
-            }
-        } catch (error) {
-            console.error("Error joining group:", error);
-            Alert.alert("Error", "An error occurred.");
-        }
-    };
+    try {
+      const user = await getProfile(); // Get current user ID
+      if (!user || !user.id) {
+        Alert.alert("Error", "User not authenticated.");
+        setLoading(false);
+        return;
+      }
 
-    if (hasPermission === null) {
-        return <Text>Requesting permission...</Text>;
-    }
-    if (hasPermission === false) {
-        return <Text>No access to camera</Text>;
+      // Check if the user is already in the group using the scanned groupId directly
+      const response = await getGroupMembers(data);
+      // Extract members from the response (wrapped in $values)
+      const members: Array<{ id: string }> = response?.$values ?? [];
+      const isUserInGroup = members.some(member => member.id === user.id);
+
+      if (isUserInGroup) {
+        Alert.alert("Already in the group", "You are already a member of this group.");
+        router.push('/(tabs)/groups');
+        setLoading(false);
+        return;
+      }
+
+      // If not, proceed to add the user
+      const addResponse = await api.post('/api/groups/add_member', {
+        groupId: data,
+        memberId: user.id,
+      });
+
+      setLoading(false);
+
+      if (addResponse.status === 200) {
+        Alert.alert("Success", "You have been added to the group!");
+        router.push('/(tabs)/groups');
+      } else {
+        Alert.alert("Error", "Failed to join group.");
+      }
+    } catch (error: any) {
+      setLoading(false);
+      console.error("Error joining group:", error.response || error);
+      Alert.alert("Error", "An error occurred.");
     }
+  };
+
+  if (hasPermission === null) {
+    return <Text>Requesting permission...</Text>;
+  }
+  if (hasPermission === false) {
+    return <Text>No access to camera</Text>;
+  }
 
-    return (
-        <View style={styles.container}>
-            {!groupId ? (
-                <CameraView
-                    onBarcodeScanned={handleBarcodeScanned}
-                    style={StyleSheet.absoluteFillObject}
-                />
-            ) : (
-                <Text>Joining group...</Text>
-            )}
+  return (
+    <View style={styles.container}>
+      {groupId === null ? (
+        <CameraView
+          onBarcodeScanned={handleBarcodeScanned}
+          style={StyleSheet.absoluteFillObject}
+        />
+      ) : (
+        <View style={styles.messageContainer}>
+          <Text style={styles.messageText}>
+            {loading ? "Joining group..." : "Successfully added to group!"}
+          </Text>
+          {/* Add a button to reset state and allow re-scanning */}
+          <RNButton title="Scan Again" onPress={() => {
+            setGroupId(null);
+            setLoading(false);
+          }} />
         </View>
-    );
+      )}
+    </View>
+  );
 };
 
 export default ScanScreen;
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  messageContainer: {
+    alignItems: 'center',
+  },
+  messageText: {
+    fontSize: 18,
+    marginBottom: 10,
+  },
 });
diff --git a/CollectifyFrontend/app/groups/groupmembers.tsx b/CollectifyFrontend/app/groups/groupmembers.tsx
index b083db9..98d3492 100644
--- a/CollectifyFrontend/app/groups/groupmembers.tsx
+++ b/CollectifyFrontend/app/groups/groupmembers.tsx
@@ -1,11 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, Text, List, ListItem, ApplicationProvider, Avatar } from '@ui-kitten/components';
+import {
+  Layout,
+  Text,
+  List,
+  ListItem,
+  ApplicationProvider,
+  Avatar,
+  Spinner,
+} from '@ui-kitten/components';
 import { StyleSheet } from 'react-native';
 import * as eva from '@eva-design/eva';
 import { getGroupMembers } from '../../services/groupService';
-import { getProfile } from '../../services/authService'; // Import getProfile
+import { getProfile } from '../../services/authService';
 import { useLocalSearchParams } from 'expo-router';
-import { useFocusEffect } from '@react-navigation/native';
 
 type UserProfile = {
   id: string;
@@ -19,45 +26,43 @@ export default function GroupMembersScreen() {
   const [groupMembers, setGroupMembers] = useState<UserProfile[]>([]);
   const [currentUserId, setCurrentUserId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const fetchGroupMembers = async () => {
-    try {
-      if (!groupId) return;
-  
-      const response = await getGroupMembers(groupId as string);
-      const members: UserProfile[] = response?.$values ?? []; // Ensure members is typed correctly
-  
-      if (currentUserId) {
-        // Exclude the current user from the members list
-        const filteredMembers = members.filter((member: UserProfile) => member.id !== currentUserId);
-        setGroupMembers(filteredMembers);
-        console.log(groupMembers)
-      } else {
-        setGroupMembers(members);
-      }
-    } catch {
-      setError('Failed to load group members. Please try again.');
-    }
-  };
-  
+  const [loading, setLoading] = useState<boolean>(true);
 
+  // Fetch the current user's profile once when the component mounts.
   useEffect(() => {
     const fetchUserProfile = async () => {
       try {
         const profile = await getProfile();
-        setCurrentUserId(profile.id); // Assuming the profile response includes "id"
+        setCurrentUserId(profile.id); // Assuming the profile includes "id"
       } catch {
         setError('Failed to fetch user profile.');
       }
     };
-
     fetchUserProfile();
   }, []);
 
-  useFocusEffect(
-    React.useCallback(() => {
-      fetchGroupMembers();
-    }, [groupId, currentUserId]) // Depend on currentUserId to ensure filtering
-  );
+  // Fetch group members whenever groupId or currentUserId changes.
+  useEffect(() => {
+    const fetchMembers = async () => {
+      try {
+        if (!groupId) return;
+        const response = await getGroupMembers(groupId as string);
+        // The backend wraps the members inside $values.
+        const members: UserProfile[] = response?.$values ?? [];
+        // Exclude the current user from the group members.
+        const filteredMembers = currentUserId
+          ? members.filter((member: UserProfile) => member.id !== currentUserId)
+          : members;
+        setGroupMembers(filteredMembers);
+      } catch {
+        setError('Failed to load group members. Please try again.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMembers();
+  }, [groupId, currentUserId]);
 
   if (error) {
     return (
@@ -69,6 +74,17 @@ export default function GroupMembersScreen() {
     );
   }
 
+  if (loading) {
+    return (
+      <ApplicationProvider {...eva} theme={eva.light}>
+        <Layout style={styles.loadingContainer}>
+          <Spinner size="giant" />
+          <Text style={styles.loadingText}>Loading the members...</Text>
+        </Layout>
+      </ApplicationProvider>
+    );
+  }
+
   return (
     <ApplicationProvider {...eva} theme={eva.light}>
       <Layout style={styles.container}>
@@ -77,10 +93,11 @@ export default function GroupMembersScreen() {
             data={groupMembers}
             renderItem={({ item }) => (
               <ListItem
-                title={item.nickname}
-                description={item.avatarPath ? 'Has an avatar' : 'No avatar'}
+                title={() => (
+                  <Text style={styles.memberText}>{item.nickname}</Text>
+                )}
                 accessoryLeft={() => (
-                  <Avatar source={{ uri: item.avatarPath ?? '' }} size="small" />
+                  <Avatar source={{ uri: item.avatarPath ?? '' }} size="medium" />
                 )}
                 style={styles.listItem}
               />
@@ -101,6 +118,17 @@ const styles = StyleSheet.create({
     padding: 20,
     backgroundColor: 'transparent',
   },
+  loadingContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 16,
+    color: '#888',
+    textAlign: 'center',
+  },
   noGroupsText: {
     textAlign: 'center',
     fontSize: 16,
@@ -109,9 +137,14 @@ const styles = StyleSheet.create({
   },
   listItem: {
     marginVertical: 4,
-    height: 50,
+    height: 70,
     justifyContent: 'center',
     backgroundColor: 'white',
     borderRadius: 10,
+    paddingHorizontal: 10,
+  },
+  memberText: {
+    fontSize: 18,
+    fontWeight: 'bold',
   },
 });
diff --git a/CollectifyFrontend/app/qrCode.tsx b/CollectifyFrontend/app/qrCode.tsx
index f8b77ad..90f195a 100644
--- a/CollectifyFrontend/app/qrCode.tsx
+++ b/CollectifyFrontend/app/qrCode.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import {  StyleSheet, View } from 'react-native';
-import { Layout, Text, List, ListItem, Button, Input, ApplicationProvider } from '@ui-kitten/components';
+import { StyleSheet, View } from 'react-native';
+import { Text } from '@ui-kitten/components'; // UI Kitten Text component
 
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import QRCode from 'react-native-qrcode-svg';
@@ -20,7 +20,9 @@ const QRCodeScreen = () => {
 
   return (
     <View style={styles.container}>
-      <QRCode value={groupId} /> 
+      {/* Add text above the QR Code */}
+      {/* <Text category='h5' style={styles.qrText}>Screenshot and send this QR code to your friend!</Text> */}
+      <QRCode value={groupId} />
     </View>
   );
 };
@@ -34,6 +36,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  qrText: {
+    marginBottom: 20, // Add space between the text and the QR code
+    textAlign: 'center',
+  },
   button: {
     marginTop: 10,
   },

From 02986b4844eb90e59584c011d3b6df92b768d0d2 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sun, 2 Feb 2025 01:33:36 +0200
Subject: [PATCH 8/9] Put anonymous name if nickname is not provided

---
 CollectifyFrontend/app/groups/groupmembers.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/CollectifyFrontend/app/groups/groupmembers.tsx b/CollectifyFrontend/app/groups/groupmembers.tsx
index 98d3492..0cc1180 100644
--- a/CollectifyFrontend/app/groups/groupmembers.tsx
+++ b/CollectifyFrontend/app/groups/groupmembers.tsx
@@ -16,7 +16,7 @@ import { useLocalSearchParams } from 'expo-router';
 
 type UserProfile = {
   id: string;
-  nickname: string;
+  nickname: string | null;
   avatarPath: string | null;
 };
 
@@ -94,7 +94,9 @@ export default function GroupMembersScreen() {
             renderItem={({ item }) => (
               <ListItem
                 title={() => (
-                  <Text style={styles.memberText}>{item.nickname}</Text>
+                  <Text style={styles.memberText}>
+                    {item.nickname ? item.nickname : 'Anonymous'} {/* Fallback to "Anonymous" if no nickname */}
+                  </Text>
                 )}
                 accessoryLeft={() => (
                   <Avatar source={{ uri: item.avatarPath ?? '' }} size="medium" />

From 0a223aa8698d30bd5b3011a907ece24fbc881131 Mon Sep 17 00:00:00 2001
From: unknown <biancaiscru@gmail.com>
Date: Sun, 2 Feb 2025 02:12:31 +0200
Subject: [PATCH 9/9] Remove user from group

---
 .../app/groups/groupmembers.tsx               | 23 +++++++++++++++
 CollectifyFrontend/services/groupService.ts   | 29 +++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/CollectifyFrontend/app/groups/groupmembers.tsx b/CollectifyFrontend/app/groups/groupmembers.tsx
index 0cc1180..df2cce0 100644
--- a/CollectifyFrontend/app/groups/groupmembers.tsx
+++ b/CollectifyFrontend/app/groups/groupmembers.tsx
@@ -7,12 +7,14 @@ import {
   ApplicationProvider,
   Avatar,
   Spinner,
+  Button,
 } from '@ui-kitten/components';
 import { StyleSheet } from 'react-native';
 import * as eva from '@eva-design/eva';
 import { getGroupMembers } from '../../services/groupService';
 import { getProfile } from '../../services/authService';
 import { useLocalSearchParams } from 'expo-router';
+import { deleteMemberFromGroup } from '../../services/groupService'; // Import the delete function
 
 type UserProfile = {
   id: string;
@@ -64,6 +66,18 @@ export default function GroupMembersScreen() {
     fetchMembers();
   }, [groupId, currentUserId]);
 
+  // Handle member deletion
+  const handleDeleteMember = async (memberId: string) => {
+    try {
+      await deleteMemberFromGroup(groupId as string, memberId);
+      // Update the UI after successful deletion
+      setGroupMembers((prevMembers) => prevMembers.filter((member) => member.id !== memberId));
+      alert('Member removed successfully.');
+    } catch (error) {
+      alert('Failed to remove member.');
+    }
+  };
+
   if (error) {
     return (
       <ApplicationProvider {...eva} theme={eva.light}>
@@ -101,6 +115,15 @@ export default function GroupMembersScreen() {
                 accessoryLeft={() => (
                   <Avatar source={{ uri: item.avatarPath ?? '' }} size="medium" />
                 )}
+                accessoryRight={() => (
+                  <Button
+                    status="danger"
+                    size="small"
+                    onPress={() => handleDeleteMember(item.id)} // Call delete when pressed
+                  >
+                    Delete
+                  </Button>
+                )}
                 style={styles.listItem}
               />
             )}
diff --git a/CollectifyFrontend/services/groupService.ts b/CollectifyFrontend/services/groupService.ts
index 9c88f5c..c89b113 100644
--- a/CollectifyFrontend/services/groupService.ts
+++ b/CollectifyFrontend/services/groupService.ts
@@ -176,4 +176,33 @@ export const getGroupMembers = async (groupId: string) => {
     console.error('Error fetching the group members:', error);
     throw error;
   }
+};
+
+export const deleteMemberFromGroup = async (groupId: string, memberId: string) => {
+  try {
+    const accessToken = await SecureStore.getItemAsync('accessToken');
+
+    if (!accessToken) {
+      throw new Error('Access token is missing. Please log in.');
+    }
+
+    const response = await api.delete('/api/groups/remove_member', {
+      data: {
+        groupId: groupId,
+        memberId: memberId,
+      },
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error('Error deleting the member', error.response?.data || error.message);
+    } else {
+      console.error('An unknown error occurred:', error);
+    }
+    throw error;
+  }
 };
\ No newline at end of file