ui developer
This commit is contained in:
Jaanu423
@@ -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()} />
|
||||
|
||||
<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",
|
||||
|
||||
@@ -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,
|
||||
@@ -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.parallel([
|
||||
Animated.timing(fadeAnim, {
|
||||
toValue: 1,
|
||||
duration: 600,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}),
|
||||
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}>
|
||||
{/* 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 style={styles.statusBadge}>
|
||||
<Ionicons name="shield-checkmark" size={16} color="#fff" />
|
||||
<Text style={styles.statusBadgeText}>
|
||||
{statusData?.profileStatus ? "Verified" : "Pending"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.infoRow}>
|
||||
<View>
|
||||
{/* Main Content */}
|
||||
<View style={styles.contentSection}>
|
||||
{/* LEFT SECTION - Stats */}
|
||||
<View style={styles.leftSection}>
|
||||
<View style={styles.infoGrid}>
|
||||
{[
|
||||
"Role",
|
||||
"Total Active Groups",
|
||||
"Total Joined Groups",
|
||||
"Total Created Groups",
|
||||
"Total Due Payment",
|
||||
"Total Completed Groups",
|
||||
].map((label, i) => (
|
||||
{ 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={i}
|
||||
style={styles.infoLabelBox}
|
||||
onPress={() => handlePress(label)}
|
||||
key={index}
|
||||
style={styles.infoCard}
|
||||
onPress={() => handlePress(item.label)}
|
||||
>
|
||||
<Text style={styles.infoLabel}>{label}</Text>
|
||||
<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>
|
||||
))}
|
||||
</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 onPress={()=>setMoreItem(!moreItem)}>
|
||||
<Ionicons name={"arrow-down"} color="#ffff" size={22}/>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.statusBox}>
|
||||
<Text style={styles.statusText}>
|
||||
{/* 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>
|
||||
<Text style={styles.statusText}>
|
||||
Profile Completed:{" "}
|
||||
{statusData?.profileStatus ? "Yes ✅" : "No ❌"}
|
||||
</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 - IMAGE */}
|
||||
{/* <TouchableOpacity
|
||||
{/* 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} />
|
||||
) : (
|
||||
<Ionicons name="person-circle-outline" size={80} color="#fff" />
|
||||
<View style={styles.avatarPlaceholder}>
|
||||
<Ionicons name="person" size={40} color="#fff" />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity> */}
|
||||
<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>
|
||||
<View style={styles.modalProgress}>
|
||||
<Text style={styles.modalProgressText}>Current Progress: 60%</Text>
|
||||
<View style={styles.modalProgressBar}>
|
||||
<View style={[styles.modalProgressFill, { width: '60%' }]} />
|
||||
</View>
|
||||
</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)}
|
||||
>
|
||||
<Text style={[styles.buttonText, styles.secondaryText]}>Later</Text>
|
||||
<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",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user