@finspringinnovations/fdsdk 0.0.1

package/src/screens/Employee.tsx

@@ -0,0 +1,822 @@
+
+
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Alert, TouchableWithoutFeedback, BackHandler, Platform, ActivityIndicator, KeyboardAvoidingView } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import SafeAreaWrapper from '../components/SafeAreaWrapper';
+import { Header } from '../components';
+import ActionButton from '../components/ActionButton';
+import TextFieldWithLabel from '../components/TextFieldWithLabel';
+import { useColors, useTypography, useTheme } from '../theme/ThemeContext';
+import { useMasterData } from '../providers/MasterDataProvider';
+import { useCustomerOccupationMutation, useGetCustomerApplicationDetailsMutation } from '../api/customerApi';
+import { useAppSelector } from '../store';
+import { getUserInfoForAPI } from '../config/appDataConfig';
+import { usePreviousStateMutation } from '../api/workflowApi';
+import { navigate } from '../navigation/helpers';
+import { useFocusEffect } from '@react-navigation/native';
+import { EMPLOYEE_STRINGS } from '../constants/strings/employee';
+import { COMMON_STRINGS } from '../constants/strings/common';
+
+export interface EmployeeProps {
+    onGoBack?: () => void;
+    onContinue?: (data: EmployeeData) => void;
+    initialData?: Partial<EmployeeData>;
+}
+
+export interface EmployeeData {
+    occupation: string;
+    natureOfBusiness: string;
+    customOccupation: string;
+    customNatureOfBusiness: string;
+    annualIncome: string;
+    sourceOfFund: string;
+    customSourceOfFund: string;
+    politicallyExposedPerson: string;
+}
+
+// These will be replaced/augmented with master data
+const defaultOccupationOptions = ['Salaried', 'Self Employed', 'Professional', 'Student', 'Retired', 'Other'];
+const defaultNatureOfBusinessOptions = ['IT Services', 'Manufacturing', 'Trading', 'Finance', 'Other'];
+const defaultAnnualIncomeOptions = ['< 2 lakhs', '3-5 lakhs', '5-10 lakhs', '10-20 lakhs', '> 20 lakhs'];
+const defaultSourceOfFundOptions = ['Salary', 'Business', 'Investment', 'Individual', 'Other'];
+const defaultPepOptions = ['Individual', 'Family Member', 'Associate', 'No'];
+
+const Employee: React.FC<EmployeeProps> = ({ onGoBack, onContinue, initialData }) => {
+
+    const colors = useColors();
+    const typography = useTypography();
+    const { themeName } = useTheme();
+    const styles = createStyles(colors, typography, themeName);
+    const { masterData, setMasterData } = useMasterData();
+    const workflowInstanceId = useAppSelector((state: any) => state?.onboarding?.workflowInstanceId);
+    const applicationId = useAppSelector((state: any) => state?.onboarding?.applicationId);
+    const customerId = useAppSelector((state: any) => state?.onboarding?.customerId);
+
+    // Get providerId from app data or use default
+    const defaultProviderId = useAppSelector((state: any) => state?.onboarding?.providerId);// Default Shriram provider ID
+
+
+    // Customer Occupation API
+    const [customerOccupation, {
+        data: customerOccupationResponse,
+        error: customerOccupationError,
+        isLoading: isLoadingCustomerOccupation,
+    }] = useCustomerOccupationMutation();
+
+    // Previous State API
+    const [previousState] = usePreviousStateMutation();
+
+    // Customer Application Details API (called on focus)
+    const [getCustomerApplicationDetails, {
+        data: customerApplicationDetailsResponse,
+        error: customerApplicationDetailsError,
+        isLoading: isLoadingCustomerApplicationDetails,
+    }] = useGetCustomerApplicationDetailsMutation();
+
+    // Call customer/application/details whenever this screen gains focus
+    useFocusEffect(
+        React.useCallback(() => {
+            let isActive = true;
+            (async () => {
+                try {
+                    const userInfo = getUserInfoForAPI();
+                    const req = {
+                        providerId: defaultProviderId,
+                        workflowInstanceId,
+                        userreferenceid: userInfo.userReferenceId,
+                        applicationid: applicationId,
+                        entityid: '',
+                        // Body params
+                        applicationId: applicationId,
+                        customerId: customerId,
+                    } as any;
+                    const res = await getCustomerApplicationDetails(req).unwrap();
+                    if (!isActive) return;
+
+                    // Set form data from employment object in API response
+                    if (res?.data?.employment) {
+                        const employment = res.data.employment;
+
+                        setForm(prev => ({
+                            ...prev,
+                            occupation: employment.occupation || '',
+                            natureOfBusiness: employment.nature_of_business || '',
+                            customOccupation: employment.custom_occupation || '',
+                            customNatureOfBusiness: employment.custom_nature_of_business || '',
+                            annualIncome: employment.income || '',
+                            sourceOfFund: employment.source_of_fund || '',
+                            customSourceOfFund: employment.custom_source_of_fund || '',
+                            politicallyExposedPerson: employment.politically_exposed_person || '',
+                        }));
+                    } else {
+                        // If employment is empty, clear all fields
+                        setForm(prev => ({
+                            ...prev,
+                            occupation: '',
+                            natureOfBusiness: '',
+                            customOccupation: '',
+                            customNatureOfBusiness: '',
+                            annualIncome: '',
+                            sourceOfFund: '',
+                            customSourceOfFund: '',
+                            politicallyExposedPerson: '',
+                        }));
+                    }
+                } catch (e) {
+                    if (!isActive) return;
+                }
+            })();
+            return () => { isActive = false; };
+        }, [defaultProviderId, workflowInstanceId, applicationId, customerId, getCustomerApplicationDetails])
+    );
+
+
+    // Customer occupation API status monitored
+
+    // Helper to normalize arrays/CSV strings to string[]
+    const normalizeOptions = (raw: any, fallback: string[]): string[] => {
+        if (Array.isArray(raw)) return raw.map((v) => String(v)).filter(Boolean);
+        if (typeof raw === 'string' && raw.trim().length) return raw.split(',').map((v) => v.trim()).filter(Boolean);
+        return fallback;
+    };
+
+    // Master data root may be data-wrapped
+    const md = (masterData as any)?.data || masterData || {};
+
+    // Get options from master data with fallbacks
+    const occupationOptions = React.useMemo(() => {
+        const fromGlobal = md?.occupation || masterData?.occupation;
+        return normalizeOptions(fromGlobal, defaultOccupationOptions);
+    }, [md, masterData]);
+
+    const natureOfBusinessOptions = React.useMemo(() => {
+        const raw = md?.natureOfBusiness || md?.natureOfBusinessOptions || md?.natureOfBusinessList;
+        return normalizeOptions(raw, defaultNatureOfBusinessOptions);
+    }, [md]);
+
+    const annualIncomeOptions = React.useMemo(() => {
+        const raw = md?.annualIncome || md?.annualIncomeOptions || md?.annualIncomeList;
+        return normalizeOptions(raw, defaultAnnualIncomeOptions);
+    }, [md]);
+
+    const sourceOfFundOptions = React.useMemo(() => {
+        const raw = md?.sourceOfFund || md?.sourceOfFundOptions || md?.sourceOfFundList || md?.sourceOfFunds;
+        return normalizeOptions(raw, defaultSourceOfFundOptions);
+    }, [md]);
+
+    const pepOptions = React.useMemo(() => {
+        const raw = md?.pepOptions
+            || md?.politicallyExposedPersonOptions
+            || md?.pepList
+            || md?.politicallyExposedPersonList
+            || md?.politicallyExposedPerson // sometimes provided as CSV/string
+            || md?.pep; // alternate short key
+        return normalizeOptions(raw, defaultPepOptions);
+    }, [md]);
+
+    const [form, setForm] = useState<EmployeeData>({
+        occupation: initialData?.occupation || (occupationOptions[0] || 'Self Employed'),
+        natureOfBusiness: initialData?.natureOfBusiness || (natureOfBusinessOptions[0] || 'Other'),
+        customOccupation: initialData?.customOccupation || '',
+        customNatureOfBusiness: (initialData as any)?.customNatureOfBusiness || '',
+        annualIncome: initialData?.annualIncome || (annualIncomeOptions[0] || defaultAnnualIncomeOptions[0]),
+        sourceOfFund: initialData?.sourceOfFund || (sourceOfFundOptions[0] || defaultSourceOfFundOptions[0]),
+        customSourceOfFund: (initialData as any)?.customSourceOfFund || '',
+        politicallyExposedPerson: initialData?.politicallyExposedPerson || (pepOptions[0] || defaultPepOptions[0]),
+    });
+
+    // Keep selections valid if options change after load
+    React.useEffect(() => {
+        setForm(prev => ({
+            ...prev,
+            occupation: occupationOptions.includes(prev.occupation) ? prev.occupation : (occupationOptions[0] || prev.occupation),
+            natureOfBusiness: natureOfBusinessOptions.includes(prev.natureOfBusiness) ? prev.natureOfBusiness : (natureOfBusinessOptions[0] || prev.natureOfBusiness),
+            annualIncome: annualIncomeOptions.includes(prev.annualIncome) ? prev.annualIncome : (annualIncomeOptions[0] || prev.annualIncome),
+            sourceOfFund: sourceOfFundOptions.includes(prev.sourceOfFund) ? prev.sourceOfFund : (sourceOfFundOptions[0] || prev.sourceOfFund),
+            politicallyExposedPerson: pepOptions.includes(prev.politicallyExposedPerson) ? prev.politicallyExposedPerson : (pepOptions[0] || prev.politicallyExposedPerson),
+        }));
+    }, [occupationOptions, natureOfBusinessOptions, annualIncomeOptions, sourceOfFundOptions, pepOptions]);
+
+    const [isGoingBack, setIsGoingBack] = useState(false);
+    const [openMenus, setOpenMenus] = useState({
+        occupation: false,
+        natureOfBusiness: false,
+        annualIncome: false,
+        sourceOfFund: false,
+        pep: false,
+    });
+
+    // Error states for custom fields
+    const [fieldErrors, setFieldErrors] = useState<{ [key: string]: string }>({});
+    // Track if continue button was pressed to disable it immediately
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    // Track if component is mounted to prevent API calls after unmount
+    const isMountedRef = React.useRef(true);
+    // Use ref for immediate synchronous check to prevent race conditions
+    const isApiCallInProgressRef = React.useRef(false);
+
+    // Validate custom fields when form data changes
+    React.useEffect(() => {
+        // Validate custom occupation
+        const occupationError = validateCustomField('customOccupation', form.customOccupation, 'occupation');
+        setFieldErrors(prev => ({ ...prev, customOccupation: occupationError }));
+
+        // Validate custom nature of business
+        const natureError = validateCustomField('customNatureOfBusiness', form.customNatureOfBusiness, 'natureOfBusiness');
+        setFieldErrors(prev => ({ ...prev, customNatureOfBusiness: natureError }));
+
+        // Validate custom source of fund
+        const sourceError = validateCustomField('customSourceOfFund', form.customSourceOfFund, 'sourceOfFund');
+        setFieldErrors(prev => ({ ...prev, customSourceOfFund: sourceError }));
+    }, [form.occupation, form.natureOfBusiness, form.sourceOfFund, form.customOccupation, form.customNatureOfBusiness, form.customSourceOfFund]);
+
+    // Validate custom field and set error
+    const validateCustomField = (field: keyof EmployeeData, value: string, parentField: keyof EmployeeData): string => {
+        const parentValue = String(form[parentField] || '').trim().toLowerCase();
+        const isOther = parentValue === 'other' || parentValue === 'others';
+
+        // Show error immediately when "Other" is selected, even if custom field is empty
+        if (isOther) {
+            if (!value || value.trim().length === 0) {
+
+                // Get user-friendly label based on parent field
+                let label = '';
+                switch (parentField) {
+                    case 'occupation':
+                        label = EMPLOYEE_STRINGS.OCCUPATION_LABEL;
+                        break;
+                    case 'natureOfBusiness':
+                        label = EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL;
+                        break;
+                    case 'sourceOfFund':
+                        label = EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL;
+                        break;
+                    default:
+                        label = parentField;
+                }
+
+                return `${label} is required`;
+            }
+
+            // Validate minimum 2 characters
+            if (value && value.trim().length > 0 && value.trim().length < 2) {
+                // Get user-friendly label based on parent field
+                let label = '';
+                switch (parentField) {
+                    case 'occupation':
+                        label = EMPLOYEE_STRINGS.OCCUPATION_LABEL;
+                        break;
+                    case 'natureOfBusiness':
+                        label = EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL;
+                        break;
+                    case 'sourceOfFund':
+                        label = EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL;
+                        break;
+                    default:
+                        label = parentField;
+                }
+
+                return `${label} must be at least 2 characters`;
+            }
+        }
+
+        return '';
+    };
+
+    // Render error message for a field
+    const renderFieldError = (field: keyof EmployeeData) => {
+        const error = fieldErrors[field];
+        if (!error) return null;
+
+        return (
+            <View style={styles.errorContainer}>
+                {Platform.OS === 'android' && (
+                    <Icon name="warning" size={16} color={colors.error || '#FF0000'} style={styles.errorIcon} />
+                )}
+                <Text style={styles.errorText}>{error}</Text>
+            </View>
+        );
+    };
+
+    // Check if occupation is "Self Employed" to conditionally show nature of business
+    const isSelfEmployed = React.useMemo(() => {
+        const occupation = String(form.occupation || '').trim().toLowerCase();
+        return occupation === 'self employed';
+    }, [form.occupation]);
+
+    // Validate required fields; require custom fields when "Other" selected
+    const isFormValid = React.useMemo(() => {
+        const hasBasic = Boolean(
+            String(form.occupation || '').trim() &&
+            (isSelfEmployed ? String(form.natureOfBusiness || '').trim() : true) &&
+            String(form.annualIncome || '').trim() &&
+            String(form.sourceOfFund || '').trim() &&
+            String(form.politicallyExposedPerson || '').trim()
+        );
+
+        const occ = String(form.occupation || '').trim().toLowerCase();
+        const nbf = String(form.natureOfBusiness || '').trim().toLowerCase();
+        const sof = String(form.sourceOfFund || '').trim().toLowerCase();
+
+        const needsCustomOcc = occ === 'other' || occ === 'others';
+        const needsCustomNob = isSelfEmployed && (nbf === 'other' || nbf === 'others');
+        const needsCustomSof = sof === 'other' || sof === 'others';
+
+        const customOk = (
+            (!needsCustomOcc || String(form.customOccupation || '').trim().length >= 2) &&
+            (!needsCustomNob || String(form.customNatureOfBusiness || '').trim().length >= 2) &&
+            (!needsCustomSof || String(form.customSourceOfFund || '').trim().length >= 2)
+        );
+
+        return hasBasic && customOk;
+    }, [form, isSelfEmployed]);
+
+    const updateField = (field: keyof EmployeeData, value: string) => {
+        setForm(prev => {
+            const newForm = { ...prev, [field]: value };
+
+            // Clear Nature of Business fields when occupation changes to non-self-employed
+            if (field === 'occupation') {
+                const occupation = String(value || '').trim().toLowerCase();
+                const isSelfEmployed = occupation === 'self employed';
+
+                if (!isSelfEmployed) {
+                    newForm.natureOfBusiness = '';
+                    newForm.customNatureOfBusiness = '';
+
+                    // Also clear any field errors for Nature of Business
+                    setFieldErrors(prev => ({
+                        ...prev,
+                        natureOfBusiness: '',
+                        customNatureOfBusiness: ''
+                    }));
+                }
+
+                // If occupation is not Other, clear customOccupation
+                const isOccOther = occupation === 'other' || occupation === 'others';
+                if (!isOccOther) {
+                    newForm.customOccupation = '';
+                    setFieldErrors(prev => ({
+                        ...prev,
+                        customOccupation: ''
+                    }));
+                }
+            }
+
+            // If Nature of Business changes away from Other, clear its custom field
+            if (field === 'natureOfBusiness') {
+                const nob = String(value || '').trim().toLowerCase();
+                const isOther = nob === 'other' || nob === 'others';
+                if (!isOther) {
+                    newForm.customNatureOfBusiness = '';
+                    setFieldErrors(prev => ({
+                        ...prev,
+                        customNatureOfBusiness: ''
+                    }));
+                }
+            }
+
+            // If Source of Fund changes away from Other, clear its custom field
+            if (field === 'sourceOfFund') {
+                const sof = String(value || '').trim().toLowerCase();
+                const isOther = sof === 'other' || sof === 'others';
+                if (!isOther) {
+                    newForm.customSourceOfFund = '';
+                    setFieldErrors(prev => ({
+                        ...prev,
+                        customSourceOfFund: ''
+                    }));
+                }
+            }
+
+            return newForm;
+        });
+
+        // Validate custom fields when they are updated
+        if (field === 'customOccupation') {
+            const error = validateCustomField('customOccupation', value, 'occupation');
+            setFieldErrors(prev => ({ ...prev, customOccupation: error }));
+        } else if (field === 'customNatureOfBusiness') {
+            const error = validateCustomField('customNatureOfBusiness', value, 'natureOfBusiness');
+            setFieldErrors(prev => ({ ...prev, customNatureOfBusiness: error }));
+        } else if (field === 'customSourceOfFund') {
+            const error = validateCustomField('customSourceOfFund', value, 'sourceOfFund');
+            setFieldErrors(prev => ({ ...prev, customSourceOfFund: error }));
+        }
+
+        // Also validate custom fields when parent fields change
+        if (field === 'occupation') {
+            const error = validateCustomField('customOccupation', form.customOccupation, 'occupation');
+            setFieldErrors(prev => ({ ...prev, customOccupation: error }));
+        } else if (field === 'natureOfBusiness') {
+            const error = validateCustomField('customNatureOfBusiness', form.customNatureOfBusiness, 'natureOfBusiness');
+            setFieldErrors(prev => ({ ...prev, customNatureOfBusiness: error }));
+        } else if (field === 'sourceOfFund') {
+            const error = validateCustomField('customSourceOfFund', form.customSourceOfFund, 'sourceOfFund');
+            setFieldErrors(prev => ({ ...prev, customSourceOfFund: error }));
+        }
+    };
+
+    const toggleMenu = (key: keyof typeof openMenus) => {
+        setOpenMenus(prev => ({
+            occupation: false,
+            natureOfBusiness: false,
+            annualIncome: false,
+            sourceOfFund: false,
+            pep: false,
+            [key]: !prev[key],
+        }));
+    };
+
+    const closeAllMenus = () => {
+        setOpenMenus({
+            occupation: false,
+            natureOfBusiness: false,
+            annualIncome: false,
+            sourceOfFund: false,
+            pep: false,
+        });
+    };
+
+    const renderDropdown = (
+        label: string,
+        value: string,
+        field: keyof EmployeeData,
+        options: string[],
+        menuKey: keyof typeof openMenus,
+    ) => (
+        <View>
+            <TextFieldWithLabel
+                label={label}
+                value={value || ''}
+                onChangeText={(text) => updateField(field, text)}
+                variant="dropdown"
+                options={options}
+                isDropdownOpen={openMenus[menuKey]}
+                onDropdownToggle={() => toggleMenu(menuKey)}
+                onDropdownSelect={(option) => {
+                    closeAllMenus();
+                    updateField(field, option);
+                    setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                }}
+                placeholder={EMPLOYEE_STRINGS.OCCUPATION_PLACEHOLDER}
+                placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+            />
+            {openMenus[menuKey] && (
+                <View style={styles.inlineMenu}>
+                    {options.map((option) => (
+                        <TouchableOpacity
+                            key={option}
+                            style={styles.modalOption}
+                            onPress={() => {
+                                closeAllMenus();
+                                updateField(field, option);
+                                setOpenMenus(prev => ({ ...prev, [menuKey]: false }));
+                            }}
+                        >
+                            <Text style={styles.modalOptionText}>{option}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            )}
+        </View>
+    );
+
+    // Reset button states when component mounts (in case user navigates back)
+    React.useEffect(() => {
+        isApiCallInProgressRef.current = false;
+        setIsSubmitting(false);
+    }, []);
+
+    // Cleanup on unmount
+    React.useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+
+    // customer/occupation API is ONLY called when user clicks Continue button on Employee screen
+    const handleContinue = async () => {
+        // Immediately disable button for double-click prevention
+        if (isApiCallInProgressRef.current || isSubmitting || isLoadingCustomerOccupation) {
+            return;
+        }
+
+        // Set lock synchronously
+        isApiCallInProgressRef.current = true;
+        setIsSubmitting(true);
+
+        try {
+            // Get user info from app data
+            const userInfo = getUserInfoForAPI();
+
+            // Prepare customer occupation request data
+            const customerOccupationRequest = {
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                customerId: customerId,
+                name: form.occupation,
+                natureOfBusiness: isSelfEmployed ? form.natureOfBusiness : '',
+                income: form.annualIncome,
+                sourceOfFund: form.sourceOfFund,
+                politicallyExposedPerson: form.politicallyExposedPerson,
+                customSourceOfFund: form.customSourceOfFund,
+                customNatureOfBusiness: isSelfEmployed ? form.customNatureOfBusiness : '',
+                customName: form.customOccupation,
+            };
+
+            const response = await customerOccupation(customerOccupationRequest as any).unwrap();
+
+            // Reset states before navigation to ensure button is enabled if user comes back
+            isApiCallInProgressRef.current = false;
+            setIsSubmitting(false);
+
+            if (!isMountedRef.current) return;
+            onContinue?.(form);
+        } catch (error) {
+            // Reset states on error so user can retry
+            isApiCallInProgressRef.current = false;
+            setIsSubmitting(false);
+
+            if (!isMountedRef.current) return;
+
+            const apiMessage =
+                (error && (error as any).data && ((error as any).data.message || (error as any).data.error || (error as any).data.detail)) ||
+                ((error as any)?.error) ||
+                ((error as any)?.message) ||
+                '';
+
+            const fieldErrorsArr = (error as any)?.data?.errors;
+            const fieldErrorsText = Array.isArray(fieldErrorsArr)
+                ? fieldErrorsArr.map((e: any) => (typeof e === 'string' ? e : e?.message)).filter(Boolean).join('\n')
+                : '';
+
+            const message = [apiMessage, fieldErrorsText]
+                .filter((s) => typeof s === 'string' && s.trim().length)
+                .join('\n') || 'Unable to save your occupation details. Please check your information and try again.';
+
+            Alert.alert('Occupation Details Save Failed', message, [{ text: COMMON_STRINGS.OK }]);
+        }
+    };
+
+    // Handler for back button (used by both header and hardware back button)
+    const handleBackPress = async () => {
+        setIsGoingBack(true);
+        try {
+            const userInfo = getUserInfoForAPI();
+            await previousState({
+                providerId: defaultProviderId,
+                workflowInstanceId,
+                userreferenceid: userInfo.userReferenceId,
+                applicationid: applicationId,
+                entityid: '',
+            });
+        } catch (e) {
+            // Handle error silently
+        } finally {
+            setIsGoingBack(false);
+            // Navigate to ReviewKYC screen instead of just going back
+            navigate('ReviewKYC');
+        }
+    };
+
+    // Handle Android hardware back button
+    useEffect(() => {
+        if (Platform.OS !== 'android') return;
+
+        const onHardwareBackPress = () => {
+            handleBackPress();
+            return true; // Prevent default behavior
+        };
+
+        const backHandler = BackHandler.addEventListener(
+            'hardwareBackPress',
+            onHardwareBackPress
+        );
+
+        return () => backHandler.remove();
+    }, [defaultProviderId, workflowInstanceId, applicationId]);
+
+    return (
+        <SafeAreaWrapper
+            includeTop={false}
+            bottomPadding={25}
+            statusBarColor="#000000"
+            statusBarStyle="light-content"
+        >
+            <Header
+                title={EMPLOYEE_STRINGS.OCCUPATION_DETAILS_TITLE}
+                onBackPress={handleBackPress}
+                backgroundColor={colors.primary}
+            />
+
+            <KeyboardAvoidingView
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                style={styles.keyboardAvoidingView}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+            >
+                <ScrollView
+                    style={styles.container}
+                    showsVerticalScrollIndicator={false}
+                    scrollEnabled={!(isLoadingCustomerOccupation || isSubmitting)}
+                    keyboardShouldPersistTaps="handled"
+                    contentContainerStyle={styles.scrollContent}
+                >
+                    <TouchableWithoutFeedback onPress={isLoadingCustomerOccupation || isSubmitting ? undefined : closeAllMenus}>
+                        <View>
+                            {renderDropdown(EMPLOYEE_STRINGS.OCCUPATION_LABEL, form.occupation, 'occupation', occupationOptions, 'occupation')}
+
+                            {(() => {
+                                const val = String(form.occupation || '').trim().toLowerCase();
+                                const isOther = val === 'other' || val === 'others';
+                                return isOther ? (
+                                    <View>
+                                        <TextFieldWithLabel
+                                            label=""
+                                            containerStyle={{ marginTop: -40 }}
+                                            value={form.customOccupation || ''}
+                                            onChangeText={(text) => {
+                                                const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                                closeAllMenus();
+                                                updateField('customOccupation', lettersOnly);
+                                            }}
+                                            placeholder={EMPLOYEE_STRINGS.CUSTOM_OCCUPATION_PLACEHOLDER}
+                                            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                                            variant="text"
+                                        />
+                                        {renderFieldError('customOccupation')}
+                                    </View>
+                                ) : null;
+                            })()}
+
+                            {/* Show Nature of Business only when occupation is "Self Employed" */}
+                            {isSelfEmployed && (
+                                <>
+                                    {renderDropdown(EMPLOYEE_STRINGS.NATURE_OF_BUSINESS_LABEL, form.natureOfBusiness, 'natureOfBusiness', natureOfBusinessOptions, 'natureOfBusiness')}
+
+                                    {(() => {
+                                        const val = String(form.natureOfBusiness || '').trim().toLowerCase();
+                                        const isOther = val === 'other' || val === 'others';
+                                        return isOther ? (
+                                            <View>
+                                                <TextFieldWithLabel
+                                                    label=""
+                                                    containerStyle={{ marginTop: -40 }}
+                                                    value={form.customNatureOfBusiness || ''}
+                                                    onChangeText={(text) => {
+                                                        const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                                        closeAllMenus();
+                                                        updateField('customNatureOfBusiness' as any, lettersOnly);
+                                                    }}
+                                                    placeholder={EMPLOYEE_STRINGS.CUSTOM_NATURE_OF_BUSINESS_PLACEHOLDER}
+                                                    placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                                                    variant="text"
+                                                />
+                                                {renderFieldError('customNatureOfBusiness')}
+                                            </View>
+                                        ) : null;
+                                    })()}
+                                </>
+                            )}
+
+                            {renderDropdown(EMPLOYEE_STRINGS.ANNUAL_INCOME_LABEL, form.annualIncome, 'annualIncome', annualIncomeOptions, 'annualIncome')}
+
+                            {renderDropdown(EMPLOYEE_STRINGS.SOURCE_OF_FUND_LABEL, form.sourceOfFund, 'sourceOfFund', sourceOfFundOptions, 'sourceOfFund')}
+
+                            {(() => {
+                                const val = String(form.sourceOfFund || '').trim().toLowerCase();
+                                const isOther = val === 'other' || val === 'others';
+                                return isOther ? (
+                                    <View>
+                                        <TextFieldWithLabel
+                                            label=""
+                                            containerStyle={{ marginTop: -40 }}
+                                            value={form.customSourceOfFund || ''}
+                                            onChangeText={(text) => {
+                                                const lettersOnly = text.replace(/[^A-Za-z ]/g, '');
+                                                closeAllMenus();
+                                                updateField('customSourceOfFund' as any, lettersOnly);
+                                            }}
+                                            placeholder={EMPLOYEE_STRINGS.CUSTOM_SOURCE_OF_FUND_PLACEHOLDER}
+                                            placeholderColor={themeName === 'dark' ? colors.placeholderColor : 'rgba(0,0,0,0.2)'}
+                                            variant="text"
+                                        />
+                                        {renderFieldError('customSourceOfFund')}
+                                    </View>
+                                ) : null;
+                            })()}
+
+                            {renderDropdown(EMPLOYEE_STRINGS.POLITICALLY_EXPOSED_PERSON_LABEL, form.politicallyExposedPerson, 'politicallyExposedPerson', pepOptions, 'pep')}
+
+                            {/* add bottom spacer so content not hidden behind footer */}
+                            <View style={{ height: 120 }} />
+                        </View>
+                    </TouchableWithoutFeedback>
+                </ScrollView>
+            </KeyboardAvoidingView>
+            <View style={styles.footer}>
+                <ActionButton
+                    title={COMMON_STRINGS.CONTINUE}
+                    onPress={handleContinue}
+                    disabled={isLoadingCustomerOccupation || isSubmitting || !isFormValid}
+                    loading={isLoadingCustomerOccupation || isSubmitting}
+                />
+            </View>
+            {/* Overlay to disable screen interactions during API call */}
+            {(isLoadingCustomerOccupation || isSubmitting) && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                </View>
+            )}
+            {/* Loading overlay for back navigation */}
+            {isGoingBack && (
+                <View style={styles.loadingOverlay} pointerEvents="auto">
+                    <ActivityIndicator size="large" color={colors.primary} />
+                </View>
+            )}
+        </SafeAreaWrapper>
+    );
+};
+
+const createStyles = (colors: any, typography: any, themeName: string) => StyleSheet.create({
+    keyboardAvoidingView: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 20,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    footer: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: colors.background,
+        paddingTop: 8,
+        paddingBottom: 16,
+    },
+    inlineMenu: {
+        backgroundColor: themeName === 'dark' ? colors.inputBackground : colors.background,
+        borderWidth: themeName === 'dark' ? 1 : 0.5,
+        borderColor: themeName === 'dark' ? '#ffffff' : 'rgba(0,0,0,0.2)',
+        borderRadius: 8,
+        marginTop: -20,
+        marginBottom: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    modalOption: {
+        paddingVertical: 14,
+    },
+    modalOptionText: {
+        ...typography.styles.bodyLarge,
+        color: colors.text,
+    },
+    debugButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 8,
+        marginBottom: 16,
+        alignItems: 'center',
+    },
+    debugButtonText: {
+        ...typography.styles.bodyMedium,
+        fontWeight: '600',
+    },
+    errorContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: -20,
+        marginBottom: 20,
+    },
+    errorIcon: {
+        marginRight: 6,
+    },
+    errorText: {
+        fontSize: 12,
+        color: colors.error || '#FF0000',
+        fontWeight: '500',
+        flex: 1,
+    },
+    loadingOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+});
+
+export default Employee;
+
+