themed css apply on home screen for both user

src/navigation/AppNavigator.tsx

@@ -39,6 +39,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: "3", title: "Requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", imageUri: "https://via.placeholder.com/60" },
-
+  {
+    id: "1",
+    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: "3", title: "Action 3", action: "ACTION_3", imageUri: "https://via.placeholder.com/60" },
-  { id: "4", title: "Action 4", action: "ACTION_4", imageUri: "https://via.placeholder.com/60" },
+  {
+    id: "1",
+    title: "Joined Groups",
+    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, {
-        method: "GET",
-        headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
-      });
+      console.log("token : ", token)
+      const response = await fetch(
+        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
-        dispatch(setUserData({ ...result.data, profileStatus: true }));
+        setApiUser(result.data);
+        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") {
-      Alert.alert("Action 3 pressed");
+    } else if (item.action === "TRANSACTION") {
+      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}
-        contentContainerStyle={{ paddingHorizontal: 8 }}
+      // columnWrapperStyle={styles.row}
+      // 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: 16,
+    marginBottom: 12,
   },
   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,