Merge branch 'feature_contact' of https://git.zeptic.in/abintoppo_lincpay/CircleCollect into feature_profile

src/navigation/AppNavigator.tsx

@@ -40,6 +40,7 @@ export type RootStackParamList = {
   ManageJoinedGroup: { groupId: string | number };
   Invite: { groupId: string | number; code: string | number };
   ManagementTabs:{ groupId: string | number;}
+  TransactionList:undefined
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();

src/screens/home/Home.tsx

@@ -19,36 +19,108 @@ import { PROFILE_URL } from "../../utils/ApiUrls";
 import * as Keychain from "react-native-keychain";
 import { setUserData } from "../../redux/userSlice";
 import { TabNavigationProp } from "../../navigation/BottomTabs";
+import GroupsTabs from "./GroupsTabs";
+import UserProfileStatus from "./UserProfileStatus";
+import UserHome from "./user-home/UserHome";
+import AnimatedCard from "../../components/common/AnimatedCard";
+import { IoniconsIconName } from "@react-native-vector-icons/ionicons";
 
 // Enable layout animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
+type UserProfile = {
+  id: string;
+  userId: number;
+  firstName: string | null;
+  lastName: string | null;
+  imageBlob: string | null;
+  role?: string;
+}
 // --- TYPE DEFINITIONS ---
 interface ActionItem {
   id: string;
   title: string;
   action: string;
   tab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
-  imageUri: string;
+
+  iconName?: IoniconsIconName;
+  backOne?: string;
+  backTwo?: string;
+  subtitle?: string
 }
 
-// Data for the grid items
+
+
+// Organizer Actions
 const organizerActions: ActionItem[] = [
-  { id: "1", title: "My Groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", imageUri: "https://via.placeholder.com/60" },
+  {
-  { id: "2", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
+    id: "1",
-  { id: "3", title: "Requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", imageUri: "https://via.placeholder.com/60" },
+    title: "My Groups",
-
+    subtitle: "Manage your own groups",
+    action: "NAVIGATE_MANAGEMENT",
+    tab: "My Groups",
+    iconName: "people-outline",
+    backOne: "#4facfe",
+    backTwo: "#00f2fe",
+  },
+  {
+    id: "2",
+    title: "Joined Groups",
+    subtitle: "View groups you’ve joined",
+    action: "NAVIGATE_MANAGEMENT",
+    tab: "Joined Groups",
+    iconName: "person-outline",
+    backOne: "#43e97b",
+    backTwo: "#38f9d7",
+  },
+  {
+    id: "3",
+    title: "Requests",
+    subtitle: "Check group requests",
+    action: "NAVIGATE_MANAGEMENT",
+    tab: "Requests",
+    iconName: "notifications-outline",
+    backOne: "#fa709a",
+    backTwo: "#fee140",
+  },
 ];
 
+// User Actions
 const userActions: ActionItem[] = [
-  { id: "1", title: "Joined Groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", imageUri: "https://via.placeholder.com/60" },
+  {
-  { id: "2", title: "Your Requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", imageUri: "https://via.placeholder.com/60" },
+    id: "1",
-  { id: "3", title: "Action 3", action: "ACTION_3", imageUri: "https://via.placeholder.com/60" },
+    title: "Joined Groups",
-  { id: "4", title: "Action 4", action: "ACTION_4", imageUri: "https://via.placeholder.com/60" },
+    subtitle: "See your joined groups",
+    action: "NAVIGATE_MANAGEMENT",
+    tab: "Joined Groups",
+    iconName: "person-outline",
+    backOne: "#43e97b",
+    backTwo: "#38f9d7",
+  },
+  {
+    id: "2",
+    title: "Your Requests",
+    subtitle: "Track your group requests",
+    action: "NAVIGATE_MANAGEMENT",
+    tab: "Your Requests",
+    iconName: "mail-outline",
+    backOne: "#ff9a9e",
+    backTwo: "#fad0c4",
+  },
+  {
+    id: "3",
+    title: "Transaction",
+    subtitle: "View your transaction history",
+    action: "TRANSACTION",
+    iconName: "calculator-outline",
+    backOne: "#4facfe",
+    backTwo: "#00f2fe",
+  },
 ];
 
+
 const Home: React.FC = () => {
   const user = useSelector((state: any) => state.user);
   const navigation = useNavigation<TabNavigationProp>();
@@ -56,28 +128,66 @@ const Home: React.FC = () => {
 
   // --- FIXED: Conditional logic moved inside the component ---
   const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
+  const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
 
   const fetchUserProfile = async () => {
     try {
       const credentials = await Keychain.getGenericPassword();
-      if (!credentials) return;
+      if (!credentials) {
+        return;
+      }
       const token = credentials.password;
 
-      const response = await fetch(PROFILE_URL, {
+      console.log("token : ", token)
-        method: "GET",
+      const response = await fetch(
-        headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
+        PROFILE_URL,
-      });
+        {
+          method: "GET",
+          headers: {
+            Accept: "*/*",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
 
       const result = await response.json();
+      console.log("👤 Profile Response:", result);
       if (result.status === "success") {
-        // No need for apiUser state, just dispatch to Redux
+        setApiUser(result.data);
-        dispatch(setUserData({ ...result.data, profileStatus: true }));
+        dispatch(
+          setUserData({
+            id: result.data.id,
+            userId: result.data.userId,
+            username: result.data.username,
+            firstName: result.data.firstName,
+            lastName: result.data.lastName,
+            gender: result.data.gender,
+            mobile: result.data.mobile,
+            email: result.data.email,
+            address: result.data.address,
+            bankAccountNumber: result.data.bankAccountNumber,
+            bankName: result.data.bankName,
+            branchCode: result.data.branchCode,
+            profilePicture: result.data.filePath,
+            filePath: result.data.filePath,
+            imageBlob: result.data.imageBlob,
+            role: result.data.role,
+            organizerId: result.data.organizerId,
+            organizerStatus: result.data.organizerStatus,
+            profileStatus: true,
+          })
+        );
       }
     } catch (error) {
       console.error("❌ Error fetching profile:", error);
     }
   };
 
+  useEffect(() => {
+    fetchUserProfile();
+  }, []);
+
+
   useEffect(() => {
     fetchUserProfile();
   }, []);
@@ -86,8 +196,8 @@ const Home: React.FC = () => {
   const handleActionPress = (item: ActionItem) => {
     if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
       navigation.navigate('Management', { actionTab: item.tab });
-    } else if (item.action === "ACTION_3") {
+    } else if (item.action === "TRANSACTION") {
-      Alert.alert("Action 3 pressed");
+      navigation.navigate("TransactionList" as never)
     } else if (item.action === "ACTION_4") {
       Alert.alert("Action 4 pressed");
     } else {
@@ -97,29 +207,42 @@ const Home: React.FC = () => {
 
   // Render function for each grid item
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
-    <TouchableOpacity
+
-      style={styles.gridButton}
+    <AnimatedCard
+      key={item.id}
+      title={item.title}
+      subtitle={item.subtitle}
+      iconName={item.iconName}
+      backOne={item.backOne}
+      backTwo={item.backTwo}
       onPress={() => handleActionPress(item)}
-    >
+    />
-      {/* FIXED: 'imageUri' was missing from your data objects */}
-      <Image source={{ uri: item.imageUri }} style={styles.gridIcon} />
-      <Text style={styles.gridLabel}>{item.title}</Text>
-    </TouchableOpacity>
   );
 
   return (
     <AppView barStyle="dark-content" style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.headerTitle}>Home</Text>
+        <Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}👋</Text>
+        <TouchableOpacity onPress={() => navigation.navigate("Profile" as never)}>
+          <Image
+            source={
+              user.imageBlob
+              && { uri: user.imageBlob || apiUser?.imageBlob ? `data:image/jpeg;base64,${user.imageBlob || apiUser?.imageBlob}` : user.profilePicture || apiUser?.imageBlob }
+            }
+            style={{ width: 40, height: 40, borderRadius: 20, borderColor: colors.primary, borderWidth: 2 }}
+          />
+        </TouchableOpacity>
       </View>
-
+      {/* Status */}
+      <UserProfileStatus />
+      {/* {user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
+        <GroupsTabs />} */}
       <FlatList
         data={actions}
         renderItem={renderGridItem}
         keyExtractor={(item) => item.id}
-        numColumns={2}
+      // columnWrapperStyle={styles.row}
-        columnWrapperStyle={styles.row}
+      // contentContainerStyle={{ paddingHorizontal: 8 }}
-        contentContainerStyle={{ paddingHorizontal: 8 }}
       />
     </AppView>
   );
@@ -133,10 +256,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#F4F6F8'
   },
   header: {
-    justifyContent: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 12,
+    marginBottom: 12,
-    marginBottom: 16,
   },
   headerTitle: {
     fontSize: 22,
@@ -147,6 +270,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "space-around",
   },
+  greeting: { fontSize: 22, fontWeight: "600", color: colors.Home },
   gridButton: {
     flex: 1,
     margin: 8,

src/screens/home/UserProfileStatus.tsx

@@ -10,8 +10,10 @@ import {
 } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import {  PUT_USER_STATUS } from "../../utils/ApiUrls";
+import { PUT_USER_STATUS } from "../../utils/ApiUrls";
 import colors from "../../components/colors";
+import LinearGradient from "react-native-linear-gradient";
+import Ionicons from "@react-native-vector-icons/ionicons";
 
 export type ApiResponse = {
     message: string;
@@ -107,14 +109,23 @@ const UserProfileStatus: React.FC = () => {
         <View style={styles.container}>
             {/* <Text style={styles.title}>Welcome Back 👋</Text> */}
 
-            <View style={styles.card}>
+            <LinearGradient
-                <Text style={styles.cardTitle}>Profile Status</Text>
+                colors={[colors.primary, colors.Home]}
-                <Text>Role: {statusData?.role}</Text>
+                start={{ x: 0, y: 0 }}
-                <Text>Organizer: {statusData?.organizerStatus}</Text>
+                end={{ x: 1, y: 1 }}
-                <Text>
+                style={styles.card}
-                    Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+            >
-                </Text>
+                <View>
-            </View>
+                    <Text style={styles.cardTitle}>Profile Status</Text>
+                    <Text style={{ color: '#fff' }}>Role: {statusData?.role}</Text>
+                    <Text style={{ color: '#fff' }}>Organizer: {statusData?.organizerStatus}</Text>
+                    <Text style={{ color: '#fff' }}>
+                        Profile Completed: {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+                    </Text>
+                </View>
+                <Ionicons name="person-circle" color={'#fff'} size={100}/>
+            </LinearGradient>
+
 
             {/* Custom Modal */}
             {showModal && (
@@ -182,12 +193,15 @@ const styles = StyleSheet.create({
         elevation: 3,
         shadowOpacity: 0.1,
         shadowRadius: 6,
-        // marginBottom: 20,
+        marginBottom: 10,
+        justifyContent:'space-between',
+        flexDirection:'row'
     },
     cardTitle: {
         fontSize: 18,
         fontWeight: "600",
         marginBottom: 10,
+        color: '#fff'
     },
     button: {
         backgroundColor: "#007AFF",

src/screens/home/user-home/UserHome.tsx

@@ -122,9 +122,27 @@ const UserHome = () => {
     };
 
     return (
-        <>
+        <ScrollView>
             {/* Stats */}
-            <View style={[styles.statsRow, { marginTop:12 }]}>
+
+            {/* <Button title="Transaction List" onPress={()=>navigation.navigate('TransactionList')}/> */}
+            <AnimatedCard
+                onPress={() => navigation.navigate("TransactionList")}
+                title={"transaction list"} iconName="calculator-outline"
+                subtitle="View your transaction history"
+                backOne={colors.Home}
+                backTwo={colors.pastelPink}
+            />
+            <AnimatedCard
+                onPress={() => navigation.navigate("Management" as never)}
+                title={"Group Management"}
+                iconName="person-outline"
+                subtitle="Manage your joined  &  requested groups"
+                backOne={colors.Settings}
+                backTwo={colors.pastelOrange}
+            />
+
+            <View style={[styles.statsRow, { marginTop: 12 }]}>
                 <View style={styles.statBox}>
                     <Text style={styles.statValue}>{totalGroups}</Text>
                     <Text style={styles.statLabel}>Groups Joined</Text>
@@ -134,10 +152,7 @@ const UserHome = () => {
                     <Text style={styles.statLabel}>Cycle Contribution</Text>
                 </View>
             </View>
-            {/* <Button title="Transaction List" onPress={()=>navigation.navigate('TransactionList')}/> */}
+
-            <AnimatedCard
-            
-                onPress={() => navigation.navigate("TransactionList")} title={"transaction list"}  iconName="calculator-outline"  subtitle="View your transaction history"        />
 
             {/* Groups List */}
             <Text style={styles.sectionTitle}>Your Groups</Text>
@@ -149,7 +164,7 @@ const UserHome = () => {
                 onRefresh={onRefresh}
                 refreshing={refreshing}
             />
-        </>
+        </ScrollView>
     );
 };
 
@@ -171,6 +186,8 @@ const styles = StyleSheet.create({
         shadowOffset: { width: 0, height: 2 },
         shadowRadius: 6,
         elevation: 2,
+        borderWidth:1,
+        borderColor:colors.Home
     },
     statValue: {
         fontSize: 18,
@@ -187,6 +204,7 @@ const styles = StyleSheet.create({
         fontWeight: "600",
         color: colors.Home,
         marginBottom: 12,
+        marginTop:15
     },
     card: {
         backgroundColor: "#ffffff",