dummy home screen

src/screens/home/GroupList.tsx

@@ -0,0 +1,206 @@
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  FlatList,
+  ActivityIndicator,
+  TouchableOpacity,
+  LayoutAnimation,
+  UIManager,
+  Platform,
+} from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import colors from "../../components/colors";
+
+// ✅ Enable LayoutAnimation for Android
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+const API_URL = "https://api.godemo.in/FundCollect/api/fund/getAll/my/groups";
+const TOKEN =
+  "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MjY1MjI5MzcxIiwidXNlcklkIjoiMTAwMDAxIiwiaWF0IjoxNzU4MDAyOTkxLCJleHAiOjE3NTgwODkzOTF9.mMRPsULcvdfdCrJJBDjnT2okE3dJsTn42JBqi_vP0Xk";
+
+// ✅ Each group card with expandable details
+const GroupCard = ({ item }: { item: any }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    LayoutAnimation.easeInEaseOut();
+    setExpanded(!expanded);
+  };
+
+  const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
+
+  return (
+    <View style={styles.groupCard}>
+      <View style={styles.groupHeader}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>{initial}</Text>
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.groupName}>{item.groupName}</Text>
+          <Text style={styles.groupDescription}>{item.description}</Text>
+          <Text style={styles.groupMeta}>
+            {item.visibility} • {item.cycleType}
+          </Text>
+        </View>
+        <TouchableOpacity onPress={toggleExpand}>
+          <Ionicons
+            name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
+            size={22}
+            color={colors.textLight}
+          />
+        </TouchableOpacity>
+      </View>
+
+      {expanded && (
+        <View style={styles.groupDetails}>
+          {Object.entries(item).map(([key, value]) => (
+            <Text key={key} style={styles.detailText}>
+              <Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
+              {Array.isArray(value) ? value.join(", ") : String(value)}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+// ✅ Group list with search
+const GroupList = () => {
+  const [groups, setGroups] = useState<any[]>([]);
+  const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    const fetchGroups = async () => {
+      try {
+        const res = await fetch(API_URL, {
+          headers: { Accept: "*/*", Authorization: TOKEN },
+        });
+        const data = await res.json();
+        setGroups(data.data || []);
+        setFilteredGroups(data.data || []);
+      } catch (e) {
+        console.error("API error", e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchGroups();
+  }, []);
+
+  useEffect(() => {
+    if (search.trim() === "") {
+      setFilteredGroups(groups);
+    } else {
+      setFilteredGroups(
+        groups.filter((g) =>
+          g.groupName.toLowerCase().includes(search.toLowerCase())
+        )
+      );
+    }
+  }, [search, groups]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        size="large"
+        color={colors.primary}
+        style={{ marginTop: 20 }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Search bar */}
+      <View style={styles.searchContainer}>
+        <Ionicons name="search" size={20} color={colors.textLight} />
+        <TextInput
+          placeholder="Search groups..."
+          placeholderTextColor={colors.textLight}
+          style={styles.searchInput}
+          value={search}
+          onChangeText={setSearch}
+        />
+      </View>
+
+      {/* Group list */}
+      <FlatList
+        data={filteredGroups}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => <GroupCard item={item} />}
+        ListEmptyComponent={
+          <Text style={styles.emptyText}>No groups found</Text>
+        }
+        contentContainerStyle={{ paddingBottom: 20 }}
+      />
+    </View>
+  );
+};
+
+export default GroupList;
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    margin: 10,
+    height: 45,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 5,
+    elevation: 2,
+  },
+  searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
+
+  groupCard: {
+    backgroundColor: colors.white,
+    padding: 14,
+    borderRadius: 14,
+    marginHorizontal: 10,
+    marginBottom: 12,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  groupHeader: { flexDirection: "row", alignItems: "center" },
+  avatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    backgroundColor: colors.primary + "33",
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  avatarText: { fontSize: 18, fontWeight: "700", color: colors.primary },
+  groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
+  groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
+  groupMeta: { fontSize: 12, color: colors.primary, marginTop: 2 },
+
+  groupDetails: {
+    marginTop: 10,
+    padding: 10,
+    borderRadius: 8,
+    backgroundColor: "#f9f9f9",
+  },
+  detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
+
+  emptyText: {
+    textAlign: "center",
+    color: colors.textLight,
+    marginTop: 20,
+    fontSize: 14,
+  },
+});