ui fix

src/screens/home/Home.tsx

@@ -9,23 +9,20 @@ import {
   Image,
   Alert,
   FlatList,
-  ListRenderItem, // Import ListRenderItem for better typing
+  ListRenderItem,
 } from "react-native";
 import AppView from "../../components/AppView";
 import colors from "../../components/colors";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
 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";
+import { apiCall } from "../../utils/ApiHelper";
 
-// Enable layout animation for Android
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
@@ -37,212 +34,108 @@ type UserProfile = {
   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";
-
   iconName?: IoniconsIconName;
   backOne?: string;
   backTwo?: string;
-  subtitle?: string
+  subtitle?: string;
 }
 
-
-
-// Organizer Actions
+// Updated action items with a prettier pastel palette
 const organizerActions: ActionItem[] = [
-  {
-    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",
-  },
+    { id: "1", title: "My Groups", subtitle: "Manage your groups", action: "NAVIGATE_MANAGEMENT", tab: "My Groups", iconName: "people-circle-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
+    { id: "2", title: "Joined Groups", subtitle: "View member groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "people-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+    { id: "3", title: "Requests", subtitle: "Check new requests", action: "NAVIGATE_MANAGEMENT", tab: "Requests", iconName: "notifications-outline", backOne: '#DFF6DD', backTwo: '#88D18A' },
 ];
 
-// User Actions
 const userActions: ActionItem[] = [
-  {
-    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",
-  },
+    { id: "1", title: "Joined Groups", subtitle: "See your groups", action: "NAVIGATE_MANAGEMENT", tab: "Joined Groups", iconName: "person-outline", backOne: '#D7E9F7', backTwo: '#82AAE3' },
+    { id: "2", title: "Your Requests", subtitle: "Track your requests", action: "NAVIGATE_MANAGEMENT", tab: "Your Requests", iconName: "mail-open-outline", backOne: '#FFF4D2', backTwo: '#FFB344' },
+    { id: "3", title: "Transactions", subtitle: "View your history", action: "TRANSACTION", iconName: "receipt-outline", backOne: '#decbfcff', backTwo: '#B799FF' },
 ];
 
-
 const Home: React.FC = () => {
   const user = useSelector((state: any) => state.user);
   const navigation = useNavigation<TabNavigationProp>();
   const dispatch = useDispatch();
 
-  // --- FIXED: Conditional logic moved inside the component ---
   const actions = user.role === 'ORGANIZER' ? organizerActions : userActions;
-  const [apiUser, setApiUser] = useState<UserProfile | null | any>(null)
+  const [apiUser, setApiUser] = useState<UserProfile | null>(null);
 
-  const fetchUserProfile = async () => {
-    try {
-      const credentials = await Keychain.getGenericPassword();
-      if (!credentials) {
-        return;
-      }
-      const token = credentials.password;
-
-      console.log("token : ", token)
-      const response = await fetch(
-        PROFILE_URL,
-        {
-          method: "GET",
-          headers: {
-            Accept: "*/*",
-            Authorization: `Bearer ${token}`,
-          },
+  useEffect(() => {
+    const fetchUserProfile = async () => {
+      try {
+        const result = await apiCall(PROFILE_URL, "GET") as any;
+        if (result.status === "success") {
+          setApiUser(result.data);
+          dispatch(setUserData({ ...result.data, profileStatus: true }));
         }
-      );
-
-      const result = await response.json();
-      console.log("👤 Profile Response:", result);
-      if (result.status === "success") {
-        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);
       }
-    } catch (error) {
-      console.error("❌ Error fetching profile:", error);
-    }
-  };
-
-  useEffect(() => {
+    };
+    const unsubscribe = navigation.addListener('focus', fetchUserProfile);
     fetchUserProfile();
-  }, []);
+    return unsubscribe;
+  }, [navigation, dispatch]);
 
-
-  useEffect(() => {
-    fetchUserProfile();
-  }, []);
-
-  // --- REFACTORED: Simplified action handler ---
   const handleActionPress = (item: ActionItem) => {
     if (item.action === "NAVIGATE_MANAGEMENT" && item.tab) {
       navigation.navigate('Management', { actionTab: item.tab });
     } else if (item.action === "TRANSACTION") {
-      navigation.navigate("TransactionList" as never)
-    } else if (item.action === "ACTION_4") {
-      Alert.alert("Action 4 pressed");
+      navigation.navigate("TransactionList" as never);
     } else {
       Alert.alert("Unknown action", item.title);
     }
   };
 
-  // Render function for each grid item
   const renderGridItem: ListRenderItem<ActionItem> = ({ item }) => (
-
-    <AnimatedCard
-      key={item.id}
-      title={item.title}
-      subtitle={item.subtitle}
-      iconName={item.iconName}
-      backOne={item.backOne}
-      backTwo={item.backTwo}
-      onPress={() => handleActionPress(item)}
-    />
+    <View style={styles.cardWrapper}>
+        <AnimatedCard
+          key={item.id}
+          title={item.title}
+          subtitle={item.subtitle}
+          iconName={item.iconName}
+          backOne={item.backOne}
+          backTwo={item.backTwo}
+          onPress={() => handleActionPress(item)}
+        />
+    </View>
   );
 
+  const getProfileImageUri = () => {
+    const blob = user.imageBlob || apiUser?.imageBlob;
+    return blob ? { uri: `data:image/jpeg;base64,${blob}` } : require('../../assets/images/placeholder.png');
+  };
+
   return (
     <AppView barStyle="dark-content" style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.greeting}>Hello, {user.firstName || apiUser?.firstName} {user.lastName || apiUser?.lastName}</Text>
+        <View>
+          <Text style={styles.greeting}>Hello,</Text>
+          <Text style={styles.userName}>{user.firstName || apiUser?.firstName || 'User'}</Text>
+        </View>
         <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 }}
-          />
+          <Image source={getProfileImageUri()} style={styles.profileImage} />
         </TouchableOpacity>
       </View>
-      {/* Status */}
+      
       <UserProfileStatus />
-      {/* {user?.role === "USER" || apiUser?.role === "USER" ? <UserHome /> :
-        <GroupsTabs />} */}
+
+      <Text style={styles.sectionTitle}>Quick Actions</Text>
+      
       <FlatList
         data={actions}
         renderItem={renderGridItem}
         keyExtractor={(item) => item.id}
-      // columnWrapperStyle={styles.row}
-      // contentContainerStyle={{ paddingHorizontal: 8 }}
+        numColumns={2}
+        contentContainerStyle={{ paddingHorizontal: 8 }}
       />
     </AppView>
   );
@@ -253,48 +146,41 @@ export default Home;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#F4F6F8'
+    backgroundColor: colors.white, // Set background to white
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    marginBottom: 12,
+    paddingHorizontal: 20,
+    paddingTop: 24,
+    paddingBottom: 16,
   },
-  headerTitle: {
+  greeting: {
     fontSize: 22,
-    fontWeight: "600",
-    color: colors.Home,
+    color: colors.textSecondary,
   },
-  row: {
+  userName: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: colors.textDark,
+  },
+  profileImage: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    borderColor: colors.pastelPink, // Using pastelPink for border
+    borderWidth: 2,
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: colors.textDark,
+    paddingHorizontal: 20,
+    marginBottom: 8,
+  },
+  cardWrapper: {
     flex: 1,
-    justifyContent: "space-around",
-  },
-  greeting: { fontSize: 22, fontWeight: "600", color: colors.pastelPink },
-  gridButton: {
-    flex: 1,
-    margin: 8,
-    backgroundColor: "#FFFFFF",
-    borderRadius: 12,
-    padding: 16,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 5,
-    elevation: 4,
-  },
-  gridIcon: {
-    width: 60,
-    height: 60,
-    marginBottom: 12,
-    borderRadius: 8,
-    backgroundColor: '#E0E0E0',
-  },
-  gridLabel: {
-    fontSize: 16,
-    fontWeight: "500",
-    color: colors.Home,
-    textAlign: "center",
+    marginHorizontal: 8,
   },
 });