managment screen upadte

2025-09-17 16:45:20 +05:30
parent 66b509e58e
commit 6bc12ecbbb
14 changed files with 823 additions and 201 deletions
@@ -0,0 +1,164 @@
+// components/MyGroupCard.tsx
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
+import colors from "./colors";
+
+interface MyGroup {
+  id: string;
+  groupName: string;
+  description: string;
+  visibility: "PUBLIC" | "PRIVATE";
+  createdByName: string;
+  currentParticipants: number;
+  maxParticipants: number;
+  contributionAmount: number;
+  cycleType: "MONTHLY" | "QUARTERLY" | "YEARLY";
+  status: "PENDING" | "ACTIVE" | "COMPLETED";
+}
+
+interface Props {
+  item: MyGroup;
+  onManage: (group: MyGroup) => void;
+}
+
+export const MyGroupCard: React.FC<Props> = ({ item, onManage }) => {
+  const getStatusColor = () => {
+    switch (item.status) {
+      case "ACTIVE":
+        return colors.pastelGreen;
+      case "PENDING":
+        return colors.pastelOrange; // amber
+      case "COMPLETED":
+        return colors.pastelBlue;
+      default:
+        return "#adb5bd";
+    }
+  };
+
+  return (
+    <View style={styles.card}>
+      {/* Left Content */}
+      <View style={{ flex: 1 }}>
+        <View style={styles.cardHeader}>
+          <Text style={styles.cardTitle} numberOfLines={1}>
+            {item.groupName}
+          </Text>
+          <View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
+            <Text style={styles.statusBadgeText}>{item.status === "ACTIVE" ? "Active" : "Not Active"}</Text>
+          </View>
+        </View>
+
+        <Text style={styles.cardSubtitle} numberOfLines={2}>
+          {item.description}
+        </Text>
+
+        <View style={styles.cardMetaContainer}>
+          <Text style={styles.cardMetaText}>
+            <Ionicons name="person-outline" size={14} /> {item.currentParticipants}/{item.maxParticipants}
+          </Text>
+          <Text style={styles.cardMetaText}>
+            <Ionicons name="cash-outline" size={14} /> ₹{item.contributionAmount}
+          </Text>
+          <Text style={styles.cardMetaText}>
+            <Ionicons name="time-outline" size={14} /> {item.cycleType}
+          </Text>
+        </View>
+
+        <Text style={styles.createdBy}>Created by {item.createdByName}</Text>
+      </View>
+
+      {/* Manage Button */}
+      <TouchableOpacity style={styles.manageButton} onPress={() => onManage(item)}>
+        <Ionicons name="settings-outline" size={24} color={colors.textDark} />
+        <Text style={styles.manageButtonText}>Manage</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+  },
+  cardHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 6,
+  },
+  cardTitle: {
+    fontSize: 17,
+    fontWeight: "bold",
+    color: "#343a40",
+    flex: 1,
+    marginRight: 10,
+  },
+  cardSubtitle: {
+    fontSize: 14,
+    color: "#6c757d",
+    marginBottom: 8,
+  },
+  cardMetaContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    marginBottom: 6,
+  },
+  manageButtonText: {
+    fontSize: 12,
+    color: colors.textDark,
+  },
+  cardMetaText: {
+    fontSize: 13,
+    color: "#495057",
+    fontWeight: "500",
+    marginRight: 16,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  statusBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 5,
+    elevation: 1,
+  },
+  statusBadgeText: {
+    color: colors.textDark,
+    fontSize: 10,
+    fontWeight: "bold",
+    textTransform: "uppercase",
+  },
+  manageButton: {
+    width: 100,
+    borderRadius:10,
+    flexDirection:"row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    padding: 6,
+    marginLeft: 10,
+    elevation:2,
+    backgroundColor: colors.pastelOrange,
+  },
+  createdBy: {
+    fontSize: 12,
+    color: "#868e96",
+    marginTop: 4,
+  },
+});
+
+export default MyGroupCard;