Abin ToppoandClaude Opus 4.8
dd672f39f5
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1115 lines
31 KiB
TypeScript
1115 lines
31 KiB
TypeScript
import React, { useEffect, useMemo, useState, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
ScrollView,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
RefreshControl,
|
|
ActivityIndicator,
|
|
Dimensions,
|
|
Platform,
|
|
ViewStyle,
|
|
TextStyle,
|
|
Modal,
|
|
TextInput,
|
|
KeyboardAvoidingView,
|
|
Alert,
|
|
StatusBar,
|
|
Image,
|
|
} from 'react-native';
|
|
import LinearGradient from 'react-native-linear-gradient';
|
|
import Animated, { FadeInDown, FadeInUp, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
|
|
import {
|
|
AlertCircle,
|
|
UserCircle,
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
Briefcase,
|
|
Building2,
|
|
Building,
|
|
Tag,
|
|
Network,
|
|
Globe,
|
|
Award,
|
|
MapPin,
|
|
Home,
|
|
Map,
|
|
Mailbox,
|
|
FileText,
|
|
CreditCard,
|
|
Type,
|
|
Calendar,
|
|
Receipt,
|
|
ClipboardCheck,
|
|
Star,
|
|
List,
|
|
Factory,
|
|
CheckCircle2,
|
|
CheckCircle,
|
|
CalendarClock,
|
|
ShieldCheck,
|
|
LucideIcon,
|
|
Edit,
|
|
X,
|
|
Save,
|
|
ChevronRight,
|
|
LogOut
|
|
} from 'lucide-react-native';
|
|
import { useFocusEffect, useNavigation } from '@react-navigation/native';
|
|
import { useContractorProfile, useUpdateUserProfile, useESetuAdharVarification } from '../../Services/ApiCall/Hooks';
|
|
import { useSelector } from 'react-redux';
|
|
import ConfirmDialog from '../../Constant/Dialog/ConfirmDialog';
|
|
import { generateTransactionId } from '../../Helper/uniqueId';
|
|
import NavigationString from '../../Constant/NavigationString';
|
|
import { useTheme } from '../../Hooks/useTheme';
|
|
import AppText from '../../components/AppText';
|
|
import ImagePath from '../../Constant/ImagePath';
|
|
|
|
const { width } = Dimensions.get('window');
|
|
|
|
// Type Definitions
|
|
interface ContractorData {
|
|
contractorId: number;
|
|
firstName: string;
|
|
middleName: string;
|
|
lastName: string;
|
|
fullName: string;
|
|
emailId: string;
|
|
mobileNo: string;
|
|
company: string;
|
|
contractorType: string;
|
|
dialCode: string;
|
|
twoFactorAuthEnabled: boolean;
|
|
colorCodeHSL: string | null;
|
|
isActive: string;
|
|
isEnabled: boolean | null;
|
|
role: string;
|
|
contractorStatus: boolean;
|
|
designation: string | null;
|
|
contOtherId: number;
|
|
contCompanyType: string | null;
|
|
contOrganization: string;
|
|
agentAddress: string;
|
|
agentPincode: string;
|
|
agentCity: string;
|
|
agentState: string | null;
|
|
agentWebsite: string;
|
|
agentRegno: string;
|
|
orgPAN: string;
|
|
orgPANdob: string;
|
|
orgPANname: string;
|
|
gistnNo: string;
|
|
comAadharNo: string;
|
|
contractorClass: string;
|
|
socialCategory: string;
|
|
wizardStepStatus: string;
|
|
registrationStatus: string;
|
|
indianOrgName: string;
|
|
expiryDate: string;
|
|
msmeStatus: string;
|
|
}
|
|
|
|
interface ProfileHeaderProps {
|
|
data: ContractorData;
|
|
displayName: string;
|
|
}
|
|
|
|
interface QuickStatsProps {
|
|
data: ContractorData;
|
|
onAadhaarPress: () => void;
|
|
}
|
|
|
|
interface InfoSectionProps {
|
|
title: string;
|
|
IconComponent: LucideIcon;
|
|
children: React.ReactNode;
|
|
delay?: number;
|
|
onEdit?: () => void;
|
|
showEdit?: boolean;
|
|
}
|
|
|
|
interface InfoRowProps {
|
|
label: string;
|
|
value: string | null | undefined;
|
|
IconComponent: LucideIcon;
|
|
valueColor?: string;
|
|
}
|
|
|
|
interface StatItem {
|
|
Icon: LucideIcon;
|
|
label: string;
|
|
value: string;
|
|
color: string;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
interface UpdateProfilePayload {
|
|
firstName: string;
|
|
middleName: string;
|
|
lastName: string;
|
|
mobileNo: string;
|
|
emailId: string;
|
|
fullname: string;
|
|
}
|
|
|
|
// Helper function to check if value is valid
|
|
const isValidValue = (value: any): boolean => {
|
|
if (value === null || value === undefined) return false;
|
|
if (typeof value === 'string') {
|
|
const trimmed = value.trim();
|
|
return trimmed.length > 0 && trimmed.toLowerCase() !== 'n/a';
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// Helper function to check if section has any valid data
|
|
const hasSectionData = (values: any[]): boolean => {
|
|
return values.some(value => isValidValue(value));
|
|
};
|
|
|
|
// Main Component
|
|
const ProfileTab: React.FC = () => {
|
|
const { colors, spacing, shadows, isDarkMode } = useTheme();
|
|
const styles = useMemo(() => createStyles(colors), [colors]);
|
|
const { data, refetch, isLoading, error } = useContractorProfile();
|
|
const user = useSelector((state: any) => state.token?.token);
|
|
console.log("User: ", user)
|
|
const Navigation: any = useNavigation();
|
|
const { mutateAsync: eSetuAdharVarification, isPending } = useESetuAdharVarification();
|
|
|
|
const [editModalVisible, setEditModalVisible] = useState(false);
|
|
const [showDialog, setShowDialog] = useState<boolean>(false);
|
|
const [isNavigating, setIsNavigating] = useState<boolean>(false);
|
|
|
|
|
|
|
|
const handleAadhaarPress = () => {
|
|
if (user?.esetuVerified === 'Not Verified' || user?.esetuVerified === null) {
|
|
setShowDialog(true);
|
|
}
|
|
};
|
|
|
|
useFocusEffect(() => {
|
|
setIsNavigating(false)
|
|
})
|
|
|
|
const handleProceedVerification = async () => {
|
|
try {
|
|
setIsNavigating(true);
|
|
|
|
const payload = {
|
|
contId: user.id,
|
|
transactionId: generateTransactionId(),
|
|
udf1: "23.77",
|
|
udf2: "77.34",
|
|
udf3: "string",
|
|
udf4: "string",
|
|
// responseUrl: "http://dev.192.168.6.194:8090/"
|
|
};
|
|
|
|
const res = await eSetuAdharVarification(payload);
|
|
|
|
setShowDialog(false);
|
|
|
|
Navigation.navigate(NavigationString.KycWebViewScreen, { res });
|
|
|
|
} catch (err) {
|
|
Alert.alert('Error', 'Failed to initiate verification. Please try again.');
|
|
setIsNavigating(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={styles.centerContainer}>
|
|
<ActivityIndicator size="large" color={colors.primary} />
|
|
<AppText style={styles.loadingText}>Loading profile...</AppText>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<View style={styles.centerContainer}>
|
|
<AlertCircle size={64} color={colors.error} />
|
|
<AppText style={styles.screenErrorText}>{error instanceof Error ? error.message : String(error)}</AppText>
|
|
<TouchableOpacity style={styles.retryButton} onPress={() => refetch()}>
|
|
<AppText style={styles.retryButtonText}>Retry</AppText>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!data) return null;
|
|
|
|
return (
|
|
<>
|
|
<ScrollView
|
|
style={[styles.container, { backgroundColor: colors.background }]}
|
|
contentContainerStyle={styles.contentContainer}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isLoading}
|
|
onRefresh={refetch}
|
|
colors={[colors.primary]}
|
|
tintColor={colors.primary}
|
|
/>
|
|
}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header with Gradient */}
|
|
<ProfileHeader data={data} displayName={data?.fullName} />
|
|
|
|
{/* Quick Stats */}
|
|
<QuickStats data={data} onAadhaarPress={handleAadhaarPress} />
|
|
|
|
{/* Personal Information - Always show */}
|
|
<InfoSection
|
|
title="Personal Information"
|
|
IconComponent={UserCircle}
|
|
delay={0}
|
|
showEdit={true}
|
|
onEdit={() => setEditModalVisible(true)}
|
|
>
|
|
<InfoRow
|
|
label="Full Name"
|
|
value={`${data.firstName} ${data.middleName} ${data.lastName}`.trim()}
|
|
IconComponent={User}
|
|
/>
|
|
<InfoRow label="Email" value={data.emailId} IconComponent={Mail} />
|
|
<InfoRow
|
|
label="Mobile"
|
|
value={`${data.dialCode} ${data.mobileNo}`}
|
|
IconComponent={Phone}
|
|
/>
|
|
<InfoRow label="Designation" value={data.designation} IconComponent={Briefcase} />
|
|
</InfoSection>
|
|
|
|
{/* Company Details - Only show if has data */}
|
|
{hasSectionData([
|
|
data.company,
|
|
data.contractorType,
|
|
data.contOrganization,
|
|
data.agentWebsite,
|
|
data.agentRegno
|
|
]) && (
|
|
<InfoSection title="Company Details" IconComponent={Building2} delay={0}>
|
|
<InfoRow label="Company" value={data.company} IconComponent={Building} />
|
|
<InfoRow label="Type" value={data.contractorType} IconComponent={Tag} />
|
|
<InfoRow label="Organization" value={data.contOrganization} IconComponent={Network} />
|
|
<InfoRow label="Website" value={data.agentWebsite} IconComponent={Globe} />
|
|
<InfoRow label="Registration No" value={data.agentRegno} IconComponent={Award} />
|
|
</InfoSection>
|
|
)}
|
|
|
|
{/* Address Information - Only show if has data */}
|
|
{hasSectionData([
|
|
data.agentAddress,
|
|
data.agentCity,
|
|
data.agentState,
|
|
data.agentPincode
|
|
]) && (
|
|
<InfoSection title="Address Information" IconComponent={MapPin} delay={0}>
|
|
<InfoRow label="Address" value={data.agentAddress} IconComponent={Home} />
|
|
<InfoRow label="City" value={data.agentCity} IconComponent={Building2} />
|
|
<InfoRow label="State" value={data.agentState} IconComponent={Map} />
|
|
<InfoRow label="Pincode" value={data.agentPincode} IconComponent={Mailbox} />
|
|
</InfoSection>
|
|
)}
|
|
|
|
{/* Tax & Legal - Only show if has data */}
|
|
{hasSectionData([
|
|
data.orgPAN,
|
|
data.orgPANname,
|
|
data.orgPANdob,
|
|
data.gistnNo,
|
|
data.comAadharNo
|
|
]) && (
|
|
<InfoSection title="Tax & Legal Information" IconComponent={FileText} delay={0}>
|
|
<InfoRow label="PAN Number" value={data.orgPAN} IconComponent={CreditCard} />
|
|
<InfoRow label="PAN Name" value={data.orgPANname} IconComponent={Type} />
|
|
<InfoRow label="PAN DOB" value={data.orgPANdob} IconComponent={Calendar} />
|
|
<InfoRow label="GSTIN" value={data.gistnNo} IconComponent={Receipt} />
|
|
<InfoRow label="Aadhar" value={data.comAadharNo} IconComponent={FileText} />
|
|
</InfoSection>
|
|
)}
|
|
|
|
{/* Registration Status - Only show if has data */}
|
|
{hasSectionData([
|
|
data.contractorClass,
|
|
data.socialCategory,
|
|
data.msmeStatus,
|
|
data.expiryDate
|
|
]) && (
|
|
<InfoSection title="Registration Details" IconComponent={ClipboardCheck} delay={0}>
|
|
<InfoRow label="Class" value={data.contractorClass} IconComponent={Star} />
|
|
<InfoRow label="Category" value={data.socialCategory} IconComponent={List} />
|
|
<InfoRow label="MSME Status" value={data.msmeStatus} IconComponent={Factory} />
|
|
<InfoRow
|
|
label="Expiry Date"
|
|
value={data.expiryDate}
|
|
IconComponent={CalendarClock}
|
|
valueColor={colors.text}
|
|
/>
|
|
</InfoSection>
|
|
)}
|
|
|
|
<View style={{ height: 40 }} />
|
|
</ScrollView>
|
|
|
|
{/* Edit Modal */}
|
|
<EditProfileModal
|
|
visible={editModalVisible}
|
|
onClose={() => setEditModalVisible(false)}
|
|
data={data}
|
|
onSuccess={refetch}
|
|
/>
|
|
|
|
{/* Aadhaar Verification Dialog */}
|
|
<ConfirmDialog
|
|
visible={showDialog}
|
|
title="Aadhaar Verification Required"
|
|
message="To access all features, please complete your Aadhaar verification."
|
|
confirmText={isPending || isNavigating ? "Processing..." : "Proceed"}
|
|
cancelText="Cancel"
|
|
onConfirm={handleProceedVerification}
|
|
onClose={() => !isPending && !isNavigating && setShowDialog(false)}
|
|
loading={isPending || isNavigating}
|
|
/>
|
|
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
// Edit Profile Modal Component
|
|
interface EditProfileModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
data: ContractorData;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
const EditProfileModal: React.FC<EditProfileModalProps> = ({
|
|
visible,
|
|
onClose,
|
|
data,
|
|
onSuccess,
|
|
}) => {
|
|
const { colors } = useTheme();
|
|
const styles = useMemo(() => createStyles(colors), [colors]);
|
|
const [formData, setFormData] = useState<UpdateProfilePayload>({
|
|
firstName: data.firstName || '',
|
|
middleName: data.middleName || '',
|
|
lastName: data.lastName || '',
|
|
mobileNo: data.mobileNo || '',
|
|
emailId: data.emailId || '',
|
|
fullname: data.fullName || '',
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Partial<UpdateProfilePayload>>({});
|
|
|
|
const updateProfileMutation = useUpdateUserProfile();
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setFormData({
|
|
firstName: data.firstName || '',
|
|
middleName: data.middleName || '',
|
|
lastName: data.lastName || '',
|
|
mobileNo: data.mobileNo || '',
|
|
emailId: data.emailId || '',
|
|
fullname: data.fullName || '',
|
|
});
|
|
setErrors({});
|
|
}
|
|
}, [visible, data]);
|
|
|
|
const validateForm = (): boolean => {
|
|
const newErrors: Partial<UpdateProfilePayload> = {};
|
|
|
|
if (!formData.firstName.trim()) {
|
|
newErrors.firstName = 'First name is required';
|
|
}
|
|
|
|
if (!formData.lastName.trim()) {
|
|
newErrors.lastName = 'Last name is required';
|
|
}
|
|
|
|
if (!formData.emailId.trim()) {
|
|
newErrors.emailId = 'Email is required';
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.emailId)) {
|
|
newErrors.emailId = 'Invalid email format';
|
|
}
|
|
|
|
if (!formData.mobileNo.trim()) {
|
|
newErrors.mobileNo = 'Mobile number is required';
|
|
} else if (!/^\d{10}$/.test(formData.mobileNo.replace(/\s/g, ''))) {
|
|
newErrors.mobileNo = 'Invalid mobile number';
|
|
}
|
|
|
|
const generatedFullName = `${formData.firstName} ${formData.middleName} ${formData.lastName}`.trim();
|
|
setFormData(prev => ({ ...prev, fullname: generatedFullName }));
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await updateProfileMutation.mutateAsync(formData);
|
|
Alert.alert('Success', 'Profile updated successfully');
|
|
onSuccess();
|
|
onClose();
|
|
} catch (error: any) {
|
|
Alert.alert('Error', error?.message || 'Failed to update profile');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
animationType="slide"
|
|
transparent={true}
|
|
onRequestClose={onClose}
|
|
>
|
|
<KeyboardAvoidingView
|
|
style={styles.modalOverlay}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={[styles.modalContent, { backgroundColor: colors.background }]}>
|
|
<View style={styles.modalHeader}>
|
|
<AppText variant="h3" style={styles.modalTitle}>Edit Personal Information</AppText>
|
|
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
<X size={24} color={colors.text} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<ScrollView style={styles.formContainer} showsVerticalScrollIndicator={false}>
|
|
<View style={styles.inputGroup}>
|
|
<AppText variant="bodySmall" style={styles.inputLabel}>First Name *</AppText>
|
|
<TextInput
|
|
style={[styles.input, errors.firstName && styles.inputError]}
|
|
value={formData.firstName}
|
|
onChangeText={(text) => setFormData({ ...formData, firstName: text })}
|
|
placeholder="Enter first name"
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
{errors.firstName && (
|
|
<AppText variant="caption" style={styles.errorText}>{errors.firstName}</AppText>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.inputGroup}>
|
|
<AppText variant="bodySmall" style={styles.inputLabel}>Middle Name</AppText>
|
|
<TextInput
|
|
style={styles.input}
|
|
value={formData.middleName}
|
|
onChangeText={(text) => setFormData({ ...formData, middleName: text })}
|
|
placeholder="Enter middle name"
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputGroup}>
|
|
<AppText variant="bodySmall" style={styles.inputLabel}>Last Name *</AppText>
|
|
<TextInput
|
|
style={[styles.input, errors.lastName && styles.inputError]}
|
|
value={formData.lastName}
|
|
onChangeText={(text) => setFormData({ ...formData, lastName: text })}
|
|
placeholder="Enter last name"
|
|
placeholderTextColor={colors.textSecondary}
|
|
/>
|
|
{errors.lastName && (
|
|
<AppText variant="caption" style={styles.errorText}>{errors.lastName}</AppText>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.inputGroup}>
|
|
<AppText variant="bodySmall" style={styles.inputLabel}>Email *</AppText>
|
|
<TextInput
|
|
style={[styles.input, errors.emailId && styles.inputError]}
|
|
value={formData.emailId}
|
|
onChangeText={(text) => setFormData({ ...formData, emailId: text })}
|
|
placeholder="Enter email"
|
|
placeholderTextColor={colors.textSecondary}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
/>
|
|
{errors.emailId && (
|
|
<AppText variant="caption" style={styles.errorText}>{errors.emailId}</AppText>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.inputGroup}>
|
|
<AppText variant="bodySmall" style={styles.inputLabel}>Mobile Number *</AppText>
|
|
<TextInput
|
|
style={[styles.input, errors.mobileNo && styles.inputError]}
|
|
value={formData.mobileNo}
|
|
onChangeText={(text) => setFormData({ ...formData, mobileNo: text })}
|
|
placeholder="Enter mobile number"
|
|
placeholderTextColor={colors.textSecondary}
|
|
keyboardType="phone-pad"
|
|
maxLength={10}
|
|
/>
|
|
{errors.mobileNo && (
|
|
<AppText variant="caption" style={styles.errorText}>{errors.mobileNo}</AppText>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View style={styles.modalFooter}>
|
|
<TouchableOpacity
|
|
style={[styles.button, styles.cancelButton]}
|
|
onPress={onClose}
|
|
disabled={updateProfileMutation.isPending}
|
|
>
|
|
<AppText variant="button" style={styles.cancelButtonText}>Cancel</AppText>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, styles.saveButton]}
|
|
onPress={handleSave}
|
|
disabled={updateProfileMutation.isPending}
|
|
>
|
|
{updateProfileMutation.isPending ? (
|
|
<ActivityIndicator size="small" color={colors.primary} />
|
|
) : (
|
|
<>
|
|
<Save size={18} color={colors.buttonText} />
|
|
<AppText variant="button" style={styles.saveButtonText}>Save</AppText>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
// Profile Header Component - OPTIMIZED
|
|
const ProfileHeader: React.FC<ProfileHeaderProps> = React.memo(({ data, displayName }) => {
|
|
const { colors } = useTheme();
|
|
const styles = useMemo(() => createStyles(colors), [colors]);
|
|
|
|
const getInitials = (name: string): string => {
|
|
if (!name || typeof name !== 'string' || name.trim().length === 0) {
|
|
const fallbackName = `${data.firstName || ''} ${data.lastName || ''}`.trim();
|
|
if (fallbackName) {
|
|
return fallbackName
|
|
.split(' ')
|
|
.filter((n) => n.length > 0)
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.substring(0, 2);
|
|
}
|
|
return 'NA';
|
|
}
|
|
|
|
return (
|
|
name
|
|
.split(' ')
|
|
.filter((n) => n.length > 0)
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.substring(0, 2) || 'NA'
|
|
);
|
|
};
|
|
|
|
const getStatusColor = (): string => {
|
|
if (data.isActive === 'Active') return colors.success;
|
|
return colors.error;
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<View
|
|
style={styles.headerGradient}
|
|
>
|
|
<View style={styles.avatarContainer}>
|
|
<View style={styles.avatar}>
|
|
<AppText variant="h1" color={colors.text} style={styles.avatarText}>{getInitials(displayName)}</AppText>
|
|
</View>
|
|
<View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
|
|
<View style={styles.statusDot} />
|
|
</View>
|
|
</View>
|
|
|
|
<AppText variant="h2" style={styles.headerName}>
|
|
{displayName || 'Unknown User'}
|
|
</AppText>
|
|
|
|
<View style={styles.roleBadge}>
|
|
<ShieldCheck size={16} color={colors.text} />
|
|
<AppText variant="caption" style={styles.roleText}>{data.role}</AppText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
});
|
|
|
|
ProfileHeader.displayName = 'ProfileHeader';
|
|
|
|
// Quick Stats Component - Glass Cards
|
|
const QuickStats: React.FC<QuickStatsProps> = React.memo(({ data, onAadhaarPress }) => {
|
|
const user = useSelector((state: any) => state.token?.token);
|
|
const { colors } = useTheme();
|
|
|
|
const stats: StatItem[] = useMemo(
|
|
() => [
|
|
{
|
|
Icon: CheckCircle,
|
|
label: 'Aadhaar',
|
|
value: user?.esetuVerified || 'Pending',
|
|
color: user?.esetuVerified === 'Not Verified' ? colors.error : colors.success,
|
|
onPress: onAadhaarPress,
|
|
},
|
|
{
|
|
Icon: ShieldCheck,
|
|
label: '2FA',
|
|
value: data.twoFactorAuthEnabled ? 'Enabled' : 'Disabled',
|
|
color: data.twoFactorAuthEnabled ? colors.success : colors.textSecondary,
|
|
},
|
|
// ...
|
|
],
|
|
[data.twoFactorAuthEnabled, user?.esetuVerified, onAadhaarPress, colors]
|
|
);
|
|
|
|
return (
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 24 }}>
|
|
{stats.map((stat, index) => {
|
|
const content = (
|
|
<Animated.View
|
|
entering={FadeInUp.duration(600).delay(index * 100)}
|
|
style={{
|
|
flex: 1, backgroundColor: colors.glass, borderColor: colors.overlay, borderWidth: 1,
|
|
borderRadius: 20, padding: 12, alignItems: 'center', marginHorizontal: 4,
|
|
minHeight: 100, justifyContent: 'center'
|
|
}}
|
|
>
|
|
<View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: stat.color + '10', alignItems: 'center', justifyContent: 'center', marginBottom: 8 }}>
|
|
<stat.Icon size={20} color={stat.color} />
|
|
</View>
|
|
<AppText variant="bodySmall" color={colors.text} numberOfLines={1} style={{ textAlign: 'center' }}>{stat.value}</AppText>
|
|
<AppText variant="caption" color={colors.textSecondary}>{stat.label}</AppText>
|
|
</Animated.View>
|
|
);
|
|
|
|
return stat.onPress ? (
|
|
<TouchableOpacity key={stat.label} style={{ flex: 1 }} onPress={stat.onPress}>{content}</TouchableOpacity>
|
|
) : (
|
|
<View key={stat.label} style={{ flex: 1 }}>{content}</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
});
|
|
|
|
// Info Section Component - Glass Card Container
|
|
const InfoSection: React.FC<InfoSectionProps> = React.memo(
|
|
({ title, IconComponent, children, onEdit, showEdit = false, delay = 0 }) => {
|
|
const { colors } = useTheme();
|
|
|
|
return (
|
|
<Animated.View
|
|
entering={FadeInUp.duration(600).delay(delay)}
|
|
style={{
|
|
backgroundColor: colors.glass,
|
|
borderColor: colors.overlay,
|
|
borderWidth: 1,
|
|
borderRadius: 24,
|
|
padding: 20,
|
|
marginBottom: 16
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View style={{ padding: 8, backgroundColor: colors.primary + '10', borderRadius: 10, marginRight: 12 }}>
|
|
<IconComponent size={20} color={colors.primary} />
|
|
</View>
|
|
<AppText variant="h4" color={colors.text}>{title}</AppText>
|
|
</View>
|
|
{showEdit && onEdit && (
|
|
<TouchableOpacity onPress={onEdit} style={{ padding: 4 }}>
|
|
<Edit size={18} color={colors.primary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
<View>{children}</View>
|
|
</Animated.View>
|
|
);
|
|
}
|
|
);
|
|
|
|
// Info Row Component
|
|
const InfoRow: React.FC<InfoRowProps> = React.memo(
|
|
({ label, value, IconComponent, valueColor }) => {
|
|
const { colors } = useTheme();
|
|
|
|
if (!isValidValue(value)) return null;
|
|
|
|
return (
|
|
<View style={{ flexDirection: 'row', marginBottom: 16, alignItems: 'flex-start' }}>
|
|
<IconComponent size={16} color={colors.textSecondary} style={{ marginTop: 4, marginRight: 12 }} />
|
|
<View style={{ flex: 1 }}>
|
|
<AppText variant="caption" color={colors.textSecondary} style={{ marginBottom: 2 }}>{label}</AppText>
|
|
<AppText variant='bodySmall' color={valueColor || colors.text}>{value}</AppText>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
);
|
|
|
|
// Styles
|
|
const createStyles = (colors: any) => StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
paddingHorizontal: 20
|
|
},
|
|
contentContainer: {
|
|
paddingBottom: 20,
|
|
},
|
|
centerContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.background,
|
|
padding: 20,
|
|
},
|
|
loadingText: {
|
|
marginTop: 16,
|
|
fontSize: 16,
|
|
color: colors.textSecondary,
|
|
fontWeight: '500',
|
|
},
|
|
screenErrorText: {
|
|
marginTop: 16,
|
|
fontSize: 16,
|
|
color: colors.error,
|
|
textAlign: 'center',
|
|
fontWeight: '500',
|
|
},
|
|
retryButton: {
|
|
marginTop: 20,
|
|
backgroundColor: colors.primary,
|
|
paddingHorizontal: 32,
|
|
paddingVertical: 12,
|
|
borderRadius: 12,
|
|
elevation: 2,
|
|
shadowColor: colors.shadow,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 4,
|
|
},
|
|
retryButtonText: {
|
|
color: colors.white,
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
|
|
headerGradient: {
|
|
paddingTop: Platform.OS === 'ios' ? 60 : 40,
|
|
paddingBottom: 30,
|
|
alignItems: 'center',
|
|
},
|
|
avatarContainer: {
|
|
position: 'relative',
|
|
marginBottom: 16,
|
|
},
|
|
avatar: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 50,
|
|
backgroundColor: colors.card,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 4,
|
|
borderColor: colors.card,
|
|
elevation: 4,
|
|
shadowColor: colors.shadow,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 4,
|
|
},
|
|
avatarText: {
|
|
fontSize: 36,
|
|
fontWeight: '700',
|
|
color: colors.primary,
|
|
},
|
|
statusBadge: {
|
|
position: 'absolute',
|
|
bottom: 4,
|
|
right: 4,
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 12,
|
|
borderWidth: 3,
|
|
borderColor: colors.card, // Updated
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
statusDot: {
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: colors.white,
|
|
},
|
|
headerName: {
|
|
fontSize: 26,
|
|
fontWeight: '700',
|
|
color: colors.text, // Updated
|
|
marginBottom: 8,
|
|
textAlign: 'center',
|
|
paddingHorizontal: 20,
|
|
},
|
|
roleBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: colors.primary + '20', // Updated opacity approach
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
gap: 6,
|
|
},
|
|
roleText: {
|
|
color: colors.primary, // Updated
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
|
|
statsContainer: {
|
|
flexDirection: 'row',
|
|
marginHorizontal: 16,
|
|
marginTop: -30,
|
|
gap: 12,
|
|
zIndex: 10,
|
|
},
|
|
statCard: {
|
|
flex: 1,
|
|
backgroundColor: colors.card,
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
alignItems: 'center',
|
|
elevation: 4,
|
|
shadowColor: colors.shadow,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.15,
|
|
shadowRadius: 6,
|
|
},
|
|
statValue: {
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
marginTop: 8,
|
|
textAlign: 'center',
|
|
},
|
|
statLabel: {
|
|
fontSize: 12,
|
|
color: colors.textSecondary,
|
|
marginTop: 4,
|
|
},
|
|
|
|
section: {
|
|
marginHorizontal: 16,
|
|
marginTop: 24,
|
|
backgroundColor: colors.card,
|
|
borderRadius: 20,
|
|
padding: 20,
|
|
elevation: 2,
|
|
shadowColor: colors.shadow,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 16,
|
|
paddingBottom: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
sectionHeaderLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
sectionIconContainer: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 12,
|
|
backgroundColor: colors.primary + '10', // Updated
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 12,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
flex: 1,
|
|
},
|
|
sectionContent: {
|
|
gap: 12,
|
|
},
|
|
editButton: {
|
|
padding: 8,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.primary + '10', // Updated
|
|
},
|
|
|
|
infoRow: {
|
|
borderRadius: 12,
|
|
overflow: 'hidden',
|
|
},
|
|
infoRowTouchable: {
|
|
padding: 14,
|
|
backgroundColor: colors.background, // Updated
|
|
borderRadius: 12,
|
|
},
|
|
infoRowContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
},
|
|
infoIconContainer: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
backgroundColor: colors.card, // Updated
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 12,
|
|
marginTop: 2,
|
|
},
|
|
infoTextContainer: {
|
|
flex: 1,
|
|
gap: 4,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
fontWeight: '500',
|
|
lineHeight: 18,
|
|
},
|
|
infoValue: {
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
fontWeight: '600',
|
|
lineHeight: 21,
|
|
},
|
|
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
modalContent: {
|
|
borderTopLeftRadius: 24,
|
|
borderTopRightRadius: 24,
|
|
maxHeight: '90%',
|
|
paddingTop: 20,
|
|
borderRadius: 30
|
|
},
|
|
modalHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
modalTitle: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
color: colors.text,
|
|
},
|
|
closeButton: {
|
|
padding: 4,
|
|
},
|
|
formContainer: {
|
|
padding: 20,
|
|
maxHeight: 500,
|
|
},
|
|
inputGroup: {
|
|
marginBottom: 20,
|
|
},
|
|
inputLabel: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 12,
|
|
padding: 14,
|
|
fontSize: 15,
|
|
color: colors.text,
|
|
backgroundColor: colors.card, // Updated
|
|
},
|
|
inputError: {
|
|
borderColor: colors.error,
|
|
},
|
|
errorText: {
|
|
fontSize: 12,
|
|
color: colors.error,
|
|
marginTop: 4,
|
|
},
|
|
modalFooter: {
|
|
flexDirection: 'row',
|
|
padding: 20,
|
|
gap: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: colors.border,
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
cancelButton: {
|
|
backgroundColor: colors.background, // Updated
|
|
},
|
|
saveButton: {
|
|
backgroundColor: colors.primary,
|
|
},
|
|
cancelButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.text,
|
|
},
|
|
saveButtonText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: colors.white,
|
|
},
|
|
navigationOverlay: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 999,
|
|
},
|
|
});
|
|
|
|
export default ProfileTab;
|