feat: implement payment profile management and caregiver authentication services with theme and UI components

src/components/ui/Header.tsx

@@ -10,9 +10,10 @@ interface HeaderProps {
   title: string;
   showBack?: boolean;
   rightComponent?: React.ReactNode;
+  onBack?: () => void;
 }
 
-export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent }) => {
+export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent, onBack }) => {
   const navigation = useNavigation();
   const { screenPadding } = useResponsiveLayout();
 
@@ -21,7 +22,7 @@ export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightCo
       <View style={styles.leftContainer}>
         {showBack && (
           <TouchableOpacity 
-            onPress={() => navigation.goBack()} 
+            onPress={() => onBack ? onBack() : navigation.goBack()} 
             style={styles.backButton}
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
           >

src/components/ui/OtpInput.tsx

@@ -0,0 +1,116 @@
+import React, { useState, useRef } from 'react';
+import { View, TextInput, StyleSheet, Pressable } from 'react-native';
+
+interface OtpInputProps {
+  length?: number;
+  value: string;
+  onChange: (value: string) => void;
+  error?: boolean;
+}
+
+export const OtpInput: React.FC<OtpInputProps> = ({ length = 6, value, onChange, error }) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const handlePress = () => {
+    inputRef.current?.focus();
+  };
+
+  const renderBoxes = () => {
+    const boxes = [];
+    for (let i = 0; i < length; i++) {
+      const char = value[i] || '';
+      const isCurrentDigit = i === value.length;
+      const isLastDigit = i === length - 1;
+      const isBoxFocused = isFocused && (isCurrentDigit || (value.length === length && isLastDigit));
+
+      boxes.push(
+        <View
+          key={i}
+          style={[
+            styles.box,
+            isBoxFocused && styles.boxFocused,
+            error && styles.boxError,
+          ]}
+        >
+          <TextInput
+            style={styles.text}
+            value={char}
+            editable={false}
+            selectTextOnFocus={false}
+          />
+        </View>
+      );
+    }
+    return boxes;
+  };
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.boxesContainer} onPress={handlePress}>
+        {renderBoxes()}
+      </Pressable>
+      <TextInput
+        ref={inputRef}
+        value={value}
+        onChangeText={(text) => {
+          // Allow only numbers and up to `length`
+          const cleanedText = text.replace(/[^0-9]/g, '');
+          if (cleanedText.length <= length) {
+            onChange(cleanedText);
+          }
+        }}
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        maxLength={length}
+        style={styles.hiddenInput}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+    alignItems: 'center',
+    width: '100%',
+  },
+  boxesContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  box: {
+    width: 45,
+    height: 55,
+    borderWidth: 1,
+    borderColor: '#D1D5DB', // gray-300
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F9FAFB', // gray-50
+  },
+  boxFocused: {
+    borderColor: '#4F46E5', // indigo-600
+    borderWidth: 2,
+    backgroundColor: '#EEF2FF', // indigo-50
+  },
+  boxError: {
+    borderColor: '#DC2626', // red-600
+    backgroundColor: '#FEF2F2', // red-50
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111827', // gray-900
+    textAlign: 'center',
+  },
+  hiddenInput: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});

src/constants/theme.ts

@@ -1,12 +1,12 @@
 export const THEME = {
   colors: {
-    primary: 'navy',
+    primary: '#1E3A8A',
     primaryLight: '#E0E7FF',
     primaryLighter: '#EEF2FF',
     background: '#F9FAFB',
     surface: '#FFFFFF',
     text: {
-      primary: '#111827',
+      primary: '#1e3a8aff',
       secondary: '#6B7280',
       muted: '#9CA3AF',
     },

src/navigation/AppNavigator.tsx

@@ -15,6 +15,7 @@ import { AddSkillScreen } from '../screens/AddSkillScreen';
 import { AvailabilityListScreen } from '../screens/AvailabilityListScreen';
 import { AddAvailabilityScreen } from '../screens/AddAvailabilityScreen';
 import { EditAvailabilityScreen } from '../screens/EditAvailabilityScreen';
+import { PaymentProfileScreen } from '../screens/PaymentProfileScreen';
 
 export type RootStackParamList = {
   Login: undefined;
@@ -30,6 +31,7 @@ export type RootStackParamList = {
     start_time: string; 
     end_time: string; 
   };
+  PaymentProfile: undefined;
 };
 
 export type TabParamList = {
@@ -117,6 +119,7 @@ export const AppNavigator = () => {
         <Stack.Screen name="AvailabilityList" component={AvailabilityListScreen} />
         <Stack.Screen name="AddAvailability" component={AddAvailabilityScreen} />
         <Stack.Screen name="EditAvailability" component={EditAvailabilityScreen} />
+        <Stack.Screen name="PaymentProfile" component={PaymentProfileScreen} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/screens/LoginScreen.tsx

@@ -4,6 +4,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../navigation/AppNavigator';
 import { Typography } from '../components/ui/Typography';
 import { Input } from '../components/ui/Input';
+import { OtpInput } from '../components/ui/OtpInput';
 import { Button } from '../components/ui/Button';
 import { authService } from '../services/authService';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -108,15 +109,17 @@ export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
                   onChangeText={setPhone}
                 />
               ) : (
-                <Input
+                <View style={{ marginBottom: 16 }}>
-                  label="Enter OTP"
+                  <Typography variant="body" weight="bold" style={{ marginBottom: 12, fontSize: 16, color: '#111827' }}>
-                  labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
+                    Enter OTP
-                  placeholder="e.g. 881433"
+                  </Typography>
-                  keyboardType="numeric"
+                  <OtpInput
-                  autoCapitalize="none"
+                    length={6}
-                  value={otp}
+                    value={otp}
-                  onChangeText={setOtp}
+                    onChange={setOtp}
-                />
+                    error={!!error}
+                  />
+                </View>
               )}
 
               <Button

src/screens/PaymentProfileScreen.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, ScrollView, Alert, KeyboardAvoidingView, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { Header } from '../components/ui/Header';
+import { Input } from '../components/ui/Input';
+import { Button } from '../components/ui/Button';
+import { Typography } from '../components/ui/Typography';
+import { profileService, PaymentProfile } from '../services/profileService';
+import { THEME } from '../constants/theme';
+import { CreditCard } from 'lucide-react-native';
+
+interface PaymentProfileScreenProps {
+  navigation: NativeStackNavigationProp<RootStackParamList, 'PaymentProfile'>;
+}
+
+export const PaymentProfileScreen: React.FC<PaymentProfileScreenProps> = ({ navigation }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [existingId, setExistingId] = useState<number | undefined>(undefined);
+
+  const [form, setForm] = useState<Partial<PaymentProfile>>({
+    payment_method: 'bank',
+    account_holder_name: '',
+    account_number: '',
+    ifsc_code: '',
+    bank_name: '',
+    branch_name: '',
+    account_type: 'savings',
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    fetchPaymentProfile();
+  }, []);
+
+  const fetchPaymentProfile = async () => {
+    try {
+      setIsLoading(true);
+      const response = await profileService.getPaymentProfile();
+      if (response.success && response.data && response.data.id) {
+        setExistingId(response.data.id);
+        setForm({
+          payment_method: response.data.payment_method || 'bank',
+          account_holder_name: response.data.account_holder_name || '',
+          account_number: response.data.account_number || '',
+          ifsc_code: response.data.ifsc_code || '',
+          bank_name: response.data.bank_name || '',
+          branch_name: response.data.branch_name || '',
+          account_type: response.data.account_type || 'savings',
+        });
+      }
+    } catch (error: any) {
+      // If 404 or not found, it means no profile exists yet.
+      console.log('No existing payment profile found or error fetching.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleChange = (field: keyof PaymentProfile, value: string) => {
+    setForm(prev => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+    if (!form.account_holder_name) newErrors.account_holder_name = 'Account holder name is required';
+    if (!form.account_number) newErrors.account_number = 'Account number is required';
+    if (!form.ifsc_code) newErrors.ifsc_code = 'IFSC code is required';
+    if (!form.bank_name) newErrors.bank_name = 'Bank name is required';
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSave = async () => {
+    if (!validate()) {
+      Alert.alert('Validation Error', 'Please fill in all required fields.');
+      return;
+    }
+
+    try {
+      setIsSaving(true);
+      const payload = form as PaymentProfile;
+      
+      if (existingId) {
+        await profileService.updatePaymentProfile(payload);
+        Alert.alert('Success', 'Payment profile updated successfully.');
+      } else {
+        const response = await profileService.addPaymentProfile(payload);
+        if (response.data && response.data.id) {
+          setExistingId(response.data.id);
+        }
+        Alert.alert('Success', 'Payment profile added successfully.');
+      }
+      navigation.goBack();
+    } catch (error: any) {
+      console.error('Error saving payment profile:', error);
+      Alert.alert('Error', error?.response?.data?.message || 'Failed to save payment profile. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    // @ts-ignore - TS types for SafeAreaView in this version incorrectly omit the style prop
+    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
+      <Header title="Payment Profile" showBack onBack={() => navigation.goBack()} />
+      
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <ScrollView style={styles.content} contentContainerStyle={styles.scrollContent}>
+          {isLoading ? (
+            <View style={styles.centerContainer}>
+              <Typography>Loading...</Typography>
+            </View>
+          ) : (
+            <>
+              <View style={styles.iconContainer}>
+                <View style={styles.iconWrapper}>
+                  <CreditCard color={THEME.colors.primary} size={32} />
+                </View>
+                <Typography variant="body" style={styles.headerSubtitle}>
+                  Add your bank details to receive payments.
+                </Typography>
+              </View>
+
+              <View style={styles.formContainer}>
+                <Input
+                  label="Account Holder Name *"
+                  placeholder="e.g. John Doe"
+                  value={form.account_holder_name}
+                  onChangeText={(val) => handleChange('account_holder_name', val)}
+                  error={errors.account_holder_name}
+                />
+                <Input
+                  label="Account Number *"
+                  placeholder="e.g. 9876543210"
+                  keyboardType="numeric"
+                  value={form.account_number}
+                  onChangeText={(val) => handleChange('account_number', val)}
+                  error={errors.account_number}
+                />
+                <Input
+                  label="IFSC Code *"
+                  placeholder="e.g. SBIN0001234"
+                  autoCapitalize="characters"
+                  value={form.ifsc_code}
+                  onChangeText={(val) => handleChange('ifsc_code', val)}
+                  error={errors.ifsc_code}
+                />
+                <Input
+                  label="Bank Name *"
+                  placeholder="e.g. State Bank of India"
+                  value={form.bank_name}
+                  onChangeText={(val) => handleChange('bank_name', val)}
+                  error={errors.bank_name}
+                />
+                <Input
+                  label="Branch Name"
+                  placeholder="e.g. Koramangala"
+                  value={form.branch_name}
+                  onChangeText={(val) => handleChange('branch_name', val)}
+                />
+                <Input
+                  label="Account Type"
+                  placeholder="e.g. savings or current"
+                  value={form.account_type}
+                  onChangeText={(val) => handleChange('account_type', val)}
+                />
+              </View>
+
+              <Button
+                title={existingId ? "Update Profile" : "Save Profile"}
+                onPress={handleSave}
+                loading={isSaving}
+                style={styles.saveButton}
+              />
+            </>
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: THEME.colors.background,
+  },
+  content: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 24,
+    paddingBottom: 40,
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 100,
+  },
+  iconContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  iconWrapper: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: THEME.colors.primaryLighter,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  headerSubtitle: {
+    color: THEME.colors.text.secondary,
+    textAlign: 'center',
+  },
+  formContainer: {
+    marginBottom: 32,
+  },
+  saveButton: {
+    backgroundColor: THEME.colors.primary,
+  },
+});

src/screens/SettingsScreen.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Alert } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Typography } from '../components/ui/Typography';
 import { Header } from '../components/ui/Header';
 import { Card } from '../components/ui/Card';
-import { User, ChevronRight } from 'lucide-react-native';
+import { User, ChevronRight, LogOut, CreditCard } from 'lucide-react-native';
 import { CompositeNavigationProp } from '@react-navigation/native';
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { TabParamList, RootStackParamList } from '../navigation/AppNavigator';
+import { authService } from '../services/authService';
 
 type SettingsScreenNavigationProp = CompositeNavigationProp<
   BottomTabNavigationProp<TabParamList, 'Settings'>,
@@ -20,6 +21,30 @@ interface SettingsScreenProps {
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) => {
+  const handleLogout = () => {
+    Alert.alert(
+      "Logout",
+      "Are you sure you want to log out?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        { 
+          text: "Logout", 
+          onPress: async () => {
+            await authService.logout();
+            (navigation as unknown as NativeStackNavigationProp<RootStackParamList>).reset({
+              index: 0,
+              routes: [{ name: 'Login' }],
+            });
+          },
+          style: "destructive"
+        }
+      ]
+    );
+  };
+
   return (
     // @ts-ignore
     <SafeAreaView edges={['top', 'left', 'right']} style={styles.container as any}>
@@ -43,6 +68,40 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({ navigation }) =>
           </Card>
         </TouchableOpacity>
 
+        <TouchableOpacity onPress={() => navigation.navigate('PaymentProfile')}>
+          <Card noPadding style={styles.menuItem}>
+            <View style={styles.menuIconContainer}>
+              <CreditCard color="#4F46E5" size={24} />
+            </View>
+            <View style={styles.menuTextContainer}>
+              <Typography variant="body" weight="bold" style={styles.menuTitle}>
+                Payment Profile
+              </Typography>
+              <Typography variant="caption" style={styles.menuSubtitle}>
+                Manage your bank details
+              </Typography>
+            </View>
+            <ChevronRight color="#9CA3AF" size={20} />
+          </Card>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={handleLogout}>
+          <Card noPadding style={styles.menuItem}>
+            <View style={[styles.menuIconContainer, { backgroundColor: '#FEE2E2' }]}>
+              <LogOut color="#EF4444" size={24} />
+            </View>
+            <View style={styles.menuTextContainer}>
+              <Typography variant="body" weight="bold" style={[styles.menuTitle, { color: '#EF4444' }]}>
+                Logout
+              </Typography>
+              <Typography variant="caption" style={styles.menuSubtitle}>
+                Sign out of your account
+              </Typography>
+            </View>
+            <ChevronRight color="#9CA3AF" size={20} />
+          </Card>
+        </TouchableOpacity>
+
       </View>
     </SafeAreaView>
   );

src/services/authService.ts

@@ -1,4 +1,5 @@
 import { apiClient } from './apiClient';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export interface LoginResponse {
   // Define expected response based on your backend
@@ -50,4 +51,14 @@ export const authService = {
       throw error;
     }
   },
+
+  logout: async (): Promise<void> => {
+    try {
+      await AsyncStorage.removeItem('token');
+      await AsyncStorage.removeItem('refresh_token');
+    } catch (error) {
+      console.error('Logout Error:', error);
+      throw error;
+    }
+  },
 };

src/services/profileService.ts

@@ -51,6 +51,20 @@ export interface CaregiverAvailability {
   is_available: number;
 }
 
+export interface PaymentProfile {
+  id?: number;
+  caregiver_profile_id?: number;
+  payment_method: string;
+  account_holder_name: string;
+  account_number: string;
+  ifsc_code: string;
+  bank_name: string;
+  branch_name: string;
+  account_type: string;
+  upi_id?: string | null;
+  is_verified?: boolean;
+}
+
 export const profileService = {
   getProfile: async (): Promise<CaregiverProfileResponse> => {
     try {
@@ -172,5 +186,35 @@ export const profileService = {
       console.error('Error deleting day availability:', error);
       throw error;
     }
+  },
+
+  getPaymentProfile: async (): Promise<any> => {
+    try {
+      const response = await apiClient.get('/v1/resource/caregiver/payment-profile');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching payment profile:', error);
+      throw error;
+    }
+  },
+
+  addPaymentProfile: async (data: PaymentProfile): Promise<any> => {
+    try {
+      const response = await apiClient.post('/v1/resource/caregiver/payment-profile', data);
+      return response.data;
+    } catch (error) {
+      console.error('Error adding payment profile:', error);
+      throw error;
+    }
+  },
+
+  updatePaymentProfile: async (data: PaymentProfile): Promise<any> => {
+    try {
+      const response = await apiClient.patch('/v1/resource/caregiver/payment-profile', data);
+      return response.data;
+    } catch (error) {
+      console.error('Error updating payment profile:', error);
+      throw error;
+    }
   }
 };