From da09a5598f539da94c2d6a63fad840c3d6922da1 Mon Sep 17 00:00:00 2001
From: Jaanu423 <puja.mourya575@gmail.com>
Date: Wed, 22 Oct 2025 16:37:40 +0530
Subject: [PATCH] ui developer

---
 src/screens/home/Home.tsx              |  22 +-
 src/screens/home/UserProfileStatus.tsx | 929 +++++++++++++++++++++----
 2 files changed, 811 insertions(+), 140 deletions(-)

diff --git a/src/screens/home/Home.tsx b/src/screens/home/Home.tsx
index 1b9bdb8..f898c50 100644
--- a/src/screens/home/Home.tsx
+++ b/src/screens/home/Home.tsx
@@ -11,6 +11,7 @@ import {
   FlatList,
   ListRenderItem,
   ToastAndroid,
+  ScrollView,
 } from "react-native";
 import AppView from "../../components/AppView";
 import colors from "../../components/colors";
@@ -182,7 +183,8 @@ const Home: React.FC = () => {
   };
 
   return (
-    <AppView barStyle="dark-content" style={styles.container}>
+    // <AppView barStyle="dark-content" style={styles.container}>
+    <ScrollView style={styles.container}>
       <View style={styles.header}>
         <View>
           <Text style={styles.greeting}>Hello,</Text>
@@ -196,7 +198,12 @@ const Home: React.FC = () => {
 
       <UserProfileStatus profileImage={getProfileImageUri()} />
 
-      <Text style={styles.sectionTitle}>Quick Actions</Text>
+      <View style={{ justifyContent: 'space-between', flexDirection: 'row', alignItems: 'center', marginTop: 20, marginBottom: 10 }}>
+        <Text style={styles.sectionTitle}>Quick Actions</Text>
+        <TouchableOpacity style={{ padding: 8 , backgroundColor: colors.primary , marginRight: 15}} onPress={() => Alert.alert('Info', 'This will allow you to pay all pending contributions in your groups.')}>
+          <Text style={{ fontSize: 14, color: '#fff', fontWeight: 'bold' }}>Pay All</Text>
+        </TouchableOpacity>
+      </View>
 
       <FlatList
         data={actions}
@@ -205,14 +212,7 @@ const Home: React.FC = () => {
         numColumns={2}
         contentContainerStyle={{ paddingHorizontal: 8 }}
       />
-      {/* <CustomAlert
-        visible={alartVisible}
-        title={alartAction?.title as string}
-        buttons={alartAction?.buttons}
-        message={alartAction?.message as string}
-        alertType={'error'}
-      /> */}
-    </AppView>
+    </ScrollView>
   );
 };
 
@@ -222,6 +222,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: colors.white, // Set background to white
+    marginBottom: 100,
+    padding:10
   },
   header: {
     flexDirection: "row",
diff --git a/src/screens/home/UserProfileStatus.tsx b/src/screens/home/UserProfileStatus.tsx
index 7592dab..d7b9f73 100644
--- a/src/screens/home/UserProfileStatus.tsx
+++ b/src/screens/home/UserProfileStatus.tsx
@@ -1,3 +1,321 @@
+// import React, { useCallback, useEffect, useState } from "react";
+// import {
+//   StyleSheet,
+//   Text,
+//   View,
+//   TouchableOpacity,
+//   Modal,
+//   ToastAndroid,
+//   Image,
+//   Animated,
+// } 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 colors from "../../components/colors";
+// import LinearGradient from "react-native-linear-gradient";
+// import {Ionicons} from "@react-native-vector-icons/ionicons";
+
+// export type ApiResponse = {
+//   message: string;
+//   status: string;
+//   statusCode: number;
+//   data: {
+//     role: string;
+//     organizerStatus: string;
+//     profileStatus: boolean;
+//   };
+// };
+
+// type UserProfileStatusProps = {
+//   profileImage?: { uri: string };
+// };
+
+// const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) => {
+//   const navigation = useNavigation();
+//   const [loading, setLoading] = useState(true);
+//   const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
+//   const [showModal, setShowModal] = useState(false);
+//   const [intervalId, setIntervalId] = useState<null | number>(null);
+//   const fadeAnim = useState(new Animated.Value(0))[0];
+
+//   const userStatus = async () => {
+//     try {
+//       const credentials = await Keychain.getGenericPassword();
+//       if (!credentials) {
+//         ToastAndroid.show("You are not logged in", ToastAndroid.SHORT);
+//         return;
+//       }
+//       const token = credentials.password;
+
+//       setLoading(true);
+//       const response = await fetch(PUT_USER_STATUS, {
+//         method: "GET",
+//         headers: {
+//           Accept: "*/*",
+//           Authorization: `Bearer ${token}`,
+//         },
+//       });
+
+//       const json: ApiResponse = await response.json();
+//       if (json.status === "success") {
+//         setStatusData(json.data);
+//         if (json.data.profileStatus === false) {
+//           setShowModal(true);
+//         }
+//       } else {
+//         ToastAndroid.show("Failed to fetch status", ToastAndroid.SHORT);
+//       }
+//     } catch {
+//       ToastAndroid.show("Something went wrong", ToastAndroid.SHORT);
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   useFocusEffect(
+//     useCallback(() => {
+//       userStatus();
+//     }, [])
+//   );
+
+//   useEffect(() => {
+//     Animated.timing(fadeAnim, {
+//       toValue: 1,
+//       duration: 600,
+//       useNativeDriver: true,
+//     }).start();
+//   }, []);
+
+//   const handleGoToProfile = () => {
+//     if (intervalId) {
+//       clearInterval(intervalId);
+//       setIntervalId(null);
+//     }
+//     setShowModal(false);
+//     navigation.navigate("Profile" as never);
+//   };
+
+//   const handlePress = (label: string) => {
+//     ToastAndroid.show(`${label} clicked`, ToastAndroid.SHORT);
+//   };
+
+//   return (
+//     <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+//       <LinearGradient
+//         colors={[colors.primary, colors.pastelPink]}
+//         start={{ x: 0, y: 0 }}
+//         end={{ x: 1, y: 1 }}
+//         style={styles.card}
+//       >
+//         {/* LEFT SECTION */}
+//         <View style={styles.leftSection}>
+//           <Text style={styles.header}>Profile Overview</Text>
+
+//           <View style={styles.infoRow}>
+//             <View>
+//               {[
+//                 "Role",
+//                 "Total Active Groups",
+//                 "Total Joined Groups",
+//                 "Total Created Groups",
+//                 "Total Due Payment",
+//                 "Total Completed Groups",
+//               ].map((label, i) => (
+//                 <TouchableOpacity
+//                   key={i}
+//                   style={styles.infoLabelBox}
+//                   onPress={() => handlePress(label)}
+//                 >
+//                   <Text style={styles.infoLabel}>{label}</Text>
+//                 </TouchableOpacity>
+//               ))}
+//             </View>
+
+//             <View>
+//               {[
+//                 statusData?.role || "-",
+//                 "5",
+//                 "3",
+//                 "2",
+//                 "₹1500",
+//                 "4",
+//               ].map((value, i) => (
+//                 <TouchableOpacity
+//                   key={i}
+//                   style={styles.infoValueBox}
+//                   onPress={() => handlePress(value)}
+//                 >
+//                   <Text style={styles.infoValue}>{value}</Text>
+//                 </TouchableOpacity>
+//               ))}
+//             </View>
+//           </View>
+
+//           <View style={styles.statusBox}>
+//             <Text style={styles.statusText}>
+//               Organizer: {statusData?.organizerStatus || "-"}
+//             </Text>
+//             <Text style={styles.statusText}>
+//               Profile Completed:{" "}
+//               {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
+//             </Text>
+//           </View>
+//         </View>
+
+//         {/* RIGHT SECTION - IMAGE */}
+//         {/* <TouchableOpacity
+//           onPress={() => navigation.navigate("Profile" as never)}
+//           activeOpacity={0.8}
+//         >
+//           {profileImage ? (
+//             <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
+//           ) : (
+//             <Ionicons name="person-circle-outline" size={80} color="#fff" />
+//           )}
+//         </TouchableOpacity> */}
+//       </LinearGradient>
+
+//       {/* Modal */}
+//       {showModal && (
+//         <Modal visible transparent animationType="fade">
+//           <View style={styles.modalOverlay}>
+//             <View style={styles.modalBox}>
+//               <Ionicons name="alert-circle" size={50} color={colors.primary} />
+//               <Text style={styles.modalTitle}>Complete Your Profile</Text>
+//               <Text style={styles.modalText}>
+//                 Your profile is incomplete. Please update your details to continue.
+//               </Text>
+
+//               <TouchableOpacity style={styles.button} onPress={handleGoToProfile}>
+//                 <Text style={styles.buttonText}>Go to Profile</Text>
+//               </TouchableOpacity>
+
+//               <TouchableOpacity
+//                 style={[styles.button, styles.secondaryButton]}
+//                 onPress={() => setShowModal(false)}
+//               >
+//                 <Text style={[styles.buttonText, styles.secondaryText]}>Later</Text>
+//               </TouchableOpacity>
+//             </View>
+//           </View>
+//         </Modal>
+//       )}
+//     </Animated.View>
+//   );
+// };
+
+// export default UserProfileStatus;
+
+// const styles = StyleSheet.create({
+//   container: {
+//     margin: 12,
+//   },
+//   card: {
+//     flexDirection: "row",
+//     justifyContent: "space-between",
+//     alignItems: "center",
+//     borderRadius: 16,
+//     padding: 18,
+//     elevation: 5,
+//     shadowColor: "#000",
+//     shadowOpacity: 0.2,
+//     shadowRadius: 6,
+//   },
+//   header: {
+//     fontSize: 20,
+//     fontWeight: "700",
+//     color: "#fff",
+//     marginBottom: 10,
+//   },
+//   leftSection: {
+//     flex: 1,
+//   },
+//   infoRow: {
+//     flexDirection: "row",
+//     justifyContent: "space-between",
+//     marginBottom: 10,
+//   },
+//   infoLabelBox: {
+//     marginBottom: 6,
+//   },
+//   infoLabel: {
+//     color: "rgba(255,255,255,0.8)",
+//     fontSize: 13,
+//   },
+//   infoValueBox: {
+//     marginBottom: 6,
+//     alignItems: "flex-end",
+//   },
+//   infoValue: {
+//     color: "#fff",
+//     fontWeight: "600",
+//     fontSize: 13,
+//   },
+//   statusBox: {
+//     backgroundColor: "rgba(255,255,255,0.15)",
+//     padding: 10,
+//     borderRadius: 8,
+//   },
+//   statusText: {
+//     color: "#fff",
+//     fontSize: 13,
+//   },
+//   avatar: {
+//     width: 80,
+//     height: 80,
+//     borderRadius: 40,
+//     borderWidth: 2,
+//     borderColor: "#fff",
+//   },
+//   modalOverlay: {
+//     flex: 1,
+//     backgroundColor: "rgba(0,0,0,0.5)",
+//     justifyContent: "center",
+//     alignItems: "center",
+//   },
+//   modalBox: {
+//     width: "85%",
+//     backgroundColor: "#fff",
+//     borderRadius: 18,
+//     padding: 20,
+//     alignItems: "center",
+//     elevation: 6,
+//   },
+//   modalTitle: {
+//     fontSize: 20,
+//     fontWeight: "700",
+//     color: colors.primary,
+//     marginVertical: 8,
+//   },
+//   modalText: {
+//     textAlign: "center",
+//     color: "#444",
+//     fontSize: 14,
+//     marginBottom: 18,
+//   },
+//   button: {
+//     backgroundColor: colors.primary,
+//     paddingVertical: 10,
+//     paddingHorizontal: 30,
+//     borderRadius: 8,
+//     marginTop: 8,
+//   },
+//   buttonText: {
+//     color: "#fff",
+//     fontWeight: "600",
+//   },
+//   secondaryButton: {
+//     backgroundColor: "#eee",
+//   },
+//   secondaryText: {
+//     color: "#333",
+//   },
+// });
+
+
+
+
 import React, { useCallback, useEffect, useState } from "react";
 import {
   StyleSheet,
@@ -14,7 +332,7 @@ import { useFocusEffect, useNavigation } from "@react-navigation/native";
 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";
+import { Ionicons } from "@react-native-vector-icons/ionicons";
 
 export type ApiResponse = {
   message: string;
@@ -37,7 +355,9 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) =
   const [statusData, setStatusData] = useState<ApiResponse["data"] | null>(null);
   const [showModal, setShowModal] = useState(false);
   const [intervalId, setIntervalId] = useState<null | number>(null);
+  const [moreItem, setMoreItem] = useState(false)
   const fadeAnim = useState(new Animated.Value(0))[0];
+  const scaleAnim = useState(new Animated.Value(0.9))[0];
 
   const userStatus = async () => {
     try {
@@ -80,11 +400,18 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) =
   );
 
   useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 600,
-      useNativeDriver: true,
-    }).start();
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true,
+      }),
+    ]).start();
   }, []);
 
   const handleGoToProfile = () => {
@@ -100,104 +427,223 @@ const UserProfileStatus: React.FC<UserProfileStatusProps> = ({ profileImage }) =
     ToastAndroid.show(`${label} clicked`, ToastAndroid.SHORT);
   };
 
+  // Graphics and icons for different status items
+  const getStatusIcon = (index: number) => {
+    const icons = ["person", "people", "person-add", "create", "card", "checkmark-done"];
+    return icons[index];
+  };
+
+  const getValueColor = (value: string) => {
+    if (value.includes("₹")) return "#4CAF50"; // Green for money
+    if (value === "Active" || value === "Yes ✅") return "#4CAF50";
+    if (value === "Inactive" || value === "No ❌") return "#FF6B6B";
+    return "#fff";
+  };
+
   return (
-    <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
+    <Animated.View style={[styles.container, { opacity: fadeAnim, transform: [{ scale: scaleAnim }] }]}>
+      {/* Background Decorative Elements */}
+      <View style={styles.backgroundGraphics}>
+        <View style={[styles.floatingCircle, styles.circle1]} />
+        <View style={[styles.floatingCircle, styles.circle2]} />
+        <View style={[styles.floatingCircle, styles.circle3]} />
+      </View>
+
       <LinearGradient
         colors={[colors.primary, colors.pastelPink]}
         start={{ x: 0, y: 0 }}
         end={{ x: 1, y: 1 }}
         style={styles.card}
       >
-        {/* LEFT SECTION */}
-        <View style={styles.leftSection}>
-          <Text style={styles.header}>Profile Overview</Text>
-
-          <View style={styles.infoRow}>
-            <View>
-              {[
-                "Role",
-                "Total Active Groups",
-                "Total Joined Groups",
-                "Total Created Groups",
-                "Total Due Payment",
-                "Total Completed Groups",
-              ].map((label, i) => (
-                <TouchableOpacity
-                  key={i}
-                  style={styles.infoLabelBox}
-                  onPress={() => handlePress(label)}
-                >
-                  <Text style={styles.infoLabel}>{label}</Text>
-                </TouchableOpacity>
-              ))}
+        {/* Header with Graphics */}
+        <View style={styles.headerSection}>
+          <View style={styles.headerContent}>
+            <View style={styles.titleWithIcon}>
+              <Ionicons name="stats-chart" size={24} color="#fff" style={styles.headerIcon} />
+              <Text style={styles.header}>Profile Overview</Text>
             </View>
-
-            <View>
-              {[
-                statusData?.role || "-",
-                "5",
-                "3",
-                "2",
-                "₹1500",
-                "4",
-              ].map((value, i) => (
-                <TouchableOpacity
-                  key={i}
-                  style={styles.infoValueBox}
-                  onPress={() => handlePress(value)}
-                >
-                  <Text style={styles.infoValue}>{value}</Text>
-                </TouchableOpacity>
-              ))}
+            <View style={styles.statusBadge}>
+              <Ionicons name="shield-checkmark" size={16} color="#fff" />
+              <Text style={styles.statusBadgeText}>
+                {statusData?.profileStatus ? "Verified" : "Pending"}
+              </Text>
             </View>
           </View>
-
-          <View style={styles.statusBox}>
-            <Text style={styles.statusText}>
-              Organizer: {statusData?.organizerStatus || "-"}
-            </Text>
-            <Text style={styles.statusText}>
-              Profile Completed:{" "}
-              {statusData?.profileStatus ? "Yes ✅" : "No ❌"}
-            </Text>
-          </View>
         </View>
 
-        {/* RIGHT SECTION - IMAGE */}
-        {/* <TouchableOpacity
-          onPress={() => navigation.navigate("Profile" as never)}
-          activeOpacity={0.8}
-        >
-          {profileImage ? (
-            <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
-          ) : (
-            <Ionicons name="person-circle-outline" size={80} color="#fff" />
-          )}
-        </TouchableOpacity> */}
+        {/* Main Content */}
+        <View style={styles.contentSection}>
+          {/* LEFT SECTION - Stats */}
+          <View style={styles.leftSection}>
+            <View style={styles.infoGrid}>
+              {[
+                { label: "Role", value: statusData?.role || "-" },
+                { label: "Active Groups", value: "5" },
+                { label: "Joined Groups", value: "3" },
+                { label: "Created Groups", value: "2" },
+                { label: "Due Payment", value: "₹1500" },
+                { label: "Completed Groups", value: "4" },
+              ].map((item, index) => (
+                <TouchableOpacity
+                  key={index}
+                  style={styles.infoCard}
+                  onPress={() => handlePress(item.label)}
+                >
+                  <View style={styles.infoCardHeader}>
+                    <View style={styles.iconContainer}>
+                      <Ionicons
+                        name={getStatusIcon(index)}
+                        size={16}
+                        color={colors.primary}
+                      />
+                    </View>
+                    <Text style={styles.infoLabel}>{item.label}</Text>
+                  </View>
+                  <Text style={[styles.infoValue, { color: getValueColor(item.value) }]}>
+                    {item.value}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+              <TouchableOpacity onPress={()=>setMoreItem(!moreItem)}>
+              <Ionicons name={"arrow-down"} color="#ffff" size={22}/>
+              </TouchableOpacity>
+            </View>
+
+            {/* Status Overview Card */}
+            {
+              moreItem && (
+                <View style={styles.statusOverview}>
+                  <View style={styles.statusHeader}>
+                    <Ionicons name="information-circle" size={20} color="#fff" />
+                    <Text style={styles.statusOverviewTitle}>Status Overview</Text>
+                  </View>
+
+                  <View style={styles.statusItems}>
+                    <View style={styles.statusItem}>
+                      <View style={styles.statusIndicator}>
+                        <Ionicons
+                          name={statusData?.organizerStatus === "Active" ? "checkmark-circle" : "time"}
+                          size={16}
+                          color={statusData?.organizerStatus === "Active" ? "#4CAF50" : "#FFA500"}
+                        />
+                      </View>
+                      <Text style={styles.statusItemText}>
+                        Organizer: {statusData?.organizerStatus || "-"}
+                      </Text>
+                    </View>
+
+                    <View style={styles.statusItem}>
+                      <View style={styles.statusIndicator}>
+                        <Ionicons
+                          name={statusData?.profileStatus ? "checkmark-circle" : "close-circle"}
+                          size={16}
+                          color={statusData?.profileStatus ? "#4CAF50" : "#FF6B6B"}
+                        />
+                      </View>
+                      <Text style={styles.statusItemText}>
+                        Profile: {statusData?.profileStatus ? "Complete" : "Incomplete"}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              )}
+          </View>
+
+          {/* RIGHT SECTION - Profile Graphic */}
+          <TouchableOpacity
+            onPress={() => navigation.navigate("Profile" as never)}
+            activeOpacity={0.8}
+            style={styles.profileSection}
+          >
+            <LinearGradient
+              colors={['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.1)']}
+              style={styles.profileContainer}
+            >
+              {profileImage ? (
+                <Image source={{ uri: profileImage.uri }} style={styles.avatar} />
+              ) : (
+                <View style={styles.avatarPlaceholder}>
+                  <Ionicons name="person" size={40} color="#fff" />
+                </View>
+              )}
+              <View style={styles.profileBadge}>
+                <Ionicons name="camera" size={16} color={colors.primary} />
+              </View>
+              <Text style={styles.viewProfileText}>View Profile</Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+
+        {/* Progress Bar for Profile Completion */}
+        <View style={styles.progressSection}>
+          <View style={styles.progressHeader}>
+            <Text style={styles.progressText}>Profile Completion</Text>
+            <Text style={styles.progressPercent}>
+              {statusData?.profileStatus ? "100%" : "60%"}
+            </Text>
+          </View>
+          <View style={styles.progressBar}>
+            <Animated.View
+              style={[
+                styles.progressFill,
+                {
+                  width: statusData?.profileStatus ? '100%' : '60%',
+                  backgroundColor: statusData?.profileStatus ? '#4CAF50' : '#FFA500'
+                }
+              ]}
+            />
+          </View>
+        </View>
       </LinearGradient>
 
-      {/* Modal */}
+      {/* Enhanced Modal */}
       {showModal && (
         <Modal visible transparent animationType="fade">
           <View style={styles.modalOverlay}>
-            <View style={styles.modalBox}>
-              <Ionicons name="alert-circle" size={50} color={colors.primary} />
+            <Animated.View
+              style={[
+                styles.modalBox,
+                {
+                  opacity: fadeAnim,
+                  transform: [{ scale: scaleAnim }]
+                }
+              ]}
+            >
+              <View style={styles.modalGraphic}>
+                <Ionicons name="alert-circle" size={60} color={colors.primary} />
+                <View style={styles.modalPulse} />
+              </View>
+
               <Text style={styles.modalTitle}>Complete Your Profile</Text>
               <Text style={styles.modalText}>
-                Your profile is incomplete. Please update your details to continue.
+                Your profile is incomplete. Please update your details to unlock all features and improve your experience.
               </Text>
 
-              <TouchableOpacity style={styles.button} onPress={handleGoToProfile}>
-                <Text style={styles.buttonText}>Go to Profile</Text>
-              </TouchableOpacity>
+              <View style={styles.modalProgress}>
+                <Text style={styles.modalProgressText}>Current Progress: 60%</Text>
+                <View style={styles.modalProgressBar}>
+                  <View style={[styles.modalProgressFill, { width: '60%' }]} />
+                </View>
+              </View>
 
-              <TouchableOpacity
-                style={[styles.button, styles.secondaryButton]}
-                onPress={() => setShowModal(false)}
-              >
-                <Text style={[styles.buttonText, styles.secondaryText]}>Later</Text>
-              </TouchableOpacity>
-            </View>
+              <View style={styles.modalButtons}>
+                <TouchableOpacity
+                  style={[styles.button, styles.primaryButton]}
+                  onPress={handleGoToProfile}
+                >
+                  <Ionicons name="person" size={18} color="#fff" />
+                  <Text style={styles.buttonText}>Complete Profile</Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={[styles.button, styles.secondaryButton]}
+                  onPress={() => setShowModal(false)}
+                >
+                  <Ionicons name="time" size={18} color="#666" />
+                  <Text style={[styles.buttonText, styles.secondaryText]}>Remind Later</Text>
+                </TouchableOpacity>
+              </View>
+            </Animated.View>
           </View>
         </Modal>
       )}
@@ -209,106 +655,329 @@ export default UserProfileStatus;
 
 const styles = StyleSheet.create({
   container: {
-    margin: 12,
+    margin: 16,
+  },
+  backgroundGraphics: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: -1,
+  },
+  floatingCircle: {
+    position: 'absolute',
+    borderRadius: 50,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+  },
+  circle1: {
+    width: 80,
+    height: 80,
+    top: -20,
+    left: -20,
+  },
+  circle2: {
+    width: 60,
+    height: 60,
+    bottom: -10,
+    right: -10,
+  },
+  circle3: {
+    width: 40,
+    height: 40,
+    top: '40%',
+    right: '10%',
   },
   card: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderRadius: 16,
-    padding: 18,
-    elevation: 5,
+    borderRadius: 24,
+    padding: 20,
+    elevation: 8,
     shadowColor: "#000",
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
+    shadowOpacity: 0.3,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    overflow: 'hidden',
+  },
+  headerSection: {
+    marginBottom: 16,
+  },
+  headerContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  titleWithIcon: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerIcon: {
+    marginRight: 8,
   },
   header: {
-    fontSize: 20,
+    fontSize: 22,
     fontWeight: "700",
     color: "#fff",
-    marginBottom: 10,
+  },
+  statusBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  statusBadgeText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: '600',
+    marginLeft: 4,
+  },
+  contentSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   leftSection: {
     flex: 1,
+    marginRight: 16,
   },
-  infoRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginBottom: 10,
+  infoGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    marginBottom: 16,
   },
-  infoLabelBox: {
+  infoCard: {
+    width: '48%',
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
+  },
+  infoCardHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
     marginBottom: 6,
   },
+  iconContainer: {
+    width: 24,
+    height: 24,
+    backgroundColor: '#fff',
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 6,
+  },
   infoLabel: {
     color: "rgba(255,255,255,0.8)",
-    fontSize: 13,
-  },
-  infoValueBox: {
-    marginBottom: 6,
-    alignItems: "flex-end",
+    fontSize: 12,
+    fontWeight: '500',
   },
   infoValue: {
-    color: "#fff",
-    fontWeight: "600",
-    fontSize: 13,
+    fontWeight: "700",
+    fontSize: 16,
   },
-  statusBox: {
-    backgroundColor: "rgba(255,255,255,0.15)",
-    padding: 10,
-    borderRadius: 8,
+  statusOverview: {
+    backgroundColor: 'rgba(255,255,255,0.15)',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.2)',
   },
-  statusText: {
+  statusHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  statusOverviewTitle: {
     color: "#fff",
-    fontSize: 13,
+    fontSize: 16,
+    fontWeight: '600',
+    marginLeft: 6,
+  },
+  statusItems: {
+    gap: 8,
+  },
+  statusItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statusIndicator: {
+    marginRight: 8,
+  },
+  statusItemText: {
+    color: "#fff",
+    fontSize: 14,
+  },
+  profileSection: {
+    alignItems: 'center',
+  },
+  profileContainer: {
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.3)',
   },
   avatar: {
     width: 80,
     height: 80,
     borderRadius: 40,
-    borderWidth: 2,
+    borderWidth: 3,
     borderColor: "#fff",
   },
+  avatarPlaceholder: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: "#fff",
+  },
+  profileBadge: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 24,
+    height: 24,
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  viewProfileText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: '600',
+    marginTop: 8,
+  },
+  progressSection: {
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255,255,255,0.3)',
+  },
+  progressHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  progressText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  progressPercent: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  progressBar: {
+    height: 6,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 3,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 3,
+  },
   modalOverlay: {
     flex: 1,
-    backgroundColor: "rgba(0,0,0,0.5)",
+    backgroundColor: "rgba(0,0,0,0.6)",
     justifyContent: "center",
     alignItems: "center",
   },
   modalBox: {
     width: "85%",
     backgroundColor: "#fff",
-    borderRadius: 18,
-    padding: 20,
+    borderRadius: 24,
+    padding: 24,
     alignItems: "center",
-    elevation: 6,
+    elevation: 12,
+    shadowColor: "#000",
+    shadowOpacity: 0.3,
+    shadowRadius: 15,
+    shadowOffset: { width: 0, height: 6 },
+  },
+  modalGraphic: {
+    position: 'relative',
+    marginBottom: 16,
+  },
+  modalPulse: {
+    position: 'absolute',
+    top: -10,
+    left: -10,
+    right: -10,
+    bottom: -10,
+    borderRadius: 40,
+    backgroundColor: 'rgba(76, 175, 80, 0.2)',
   },
   modalTitle: {
-    fontSize: 20,
+    fontSize: 22,
     fontWeight: "700",
     color: colors.primary,
-    marginVertical: 8,
+    marginBottom: 8,
+    textAlign: 'center',
   },
   modalText: {
     textAlign: "center",
-    color: "#444",
+    color: "#666",
     fontSize: 14,
-    marginBottom: 18,
+    lineHeight: 20,
+    marginBottom: 20,
+  },
+  modalProgress: {
+    width: '100%',
+    marginBottom: 20,
+  },
+  modalProgressText: {
+    textAlign: 'center',
+    color: "#333",
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 6,
+  },
+  modalProgressBar: {
+    height: 4,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  modalProgressFill: {
+    height: '100%',
+    backgroundColor: colors.primary,
+    borderRadius: 2,
+  },
+  modalButtons: {
+    width: '100%',
+    gap: 8,
   },
   button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    gap: 8,
+  },
+  primaryButton: {
     backgroundColor: colors.primary,
-    paddingVertical: 10,
-    paddingHorizontal: 30,
-    borderRadius: 8,
-    marginTop: 8,
+  },
+  secondaryButton: {
+    backgroundColor: "#f5f5f5",
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
   },
   buttonText: {
     color: "#fff",
     fontWeight: "600",
-  },
-  secondaryButton: {
-    backgroundColor: "#eee",
+    fontSize: 14,
   },
   secondaryText: {
-    color: "#333",
+    color: "#666",
   },
-});
+});
\ No newline at end of file