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

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
-                  label="Enter OTP"
-                  labelStyle={{ fontWeight: 'bold', fontSize: 16 }}
-                  placeholder="e.g. 881433"
-                  keyboardType="numeric"
-                  autoCapitalize="none"
-                  value={otp}
-                  onChangeText={setOtp}
-                />
+                <View style={{ marginBottom: 16 }}>
+                  <Typography variant="body" weight="bold" style={{ marginBottom: 12, fontSize: 16, color: '#111827' }}>
+                    Enter OTP
+                  </Typography>
+                  <OtpInput
+                    length={6}
+                    value={otp}
+                    onChange={setOtp}
+                    error={!!error}
+                  />
+                </View>
               )}
 
               <Button