UI

app/app/(auth)/login.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { CustomAlertModal } from '@/components/profile/CustomAlertModal';
 import {
   Alert,
   Animated,
   Dimensions,
   KeyboardAvoidingView,
@@ -22,9 +22,9 @@
 import { useAuthStore } from '@/store/auth.store';
 import { signUp, signIn, signInWithGoogle } from '@/services/auth.service';
 
 const { width, height } = Dimensions.get('window');
 
-// ── Design tokens — same palette as the rest of Swasthya AI ──────────────────
+// ── Design tokens ──────────────────────────────────────────────────────────────
 const C = {
   primary: '#0474FC',
   primaryDark: '#0355C5',
@@ -81,7 +81,7 @@
       toValue: focused ? 1 : 0,
       tension: 60, friction: 8, useNativeDriver: false,
     }).start();
   }, [focused]);
 
   const borderColor = borderAnim.interpolate({
     inputRange: [0, 1],
@@ -231,7 +231,7 @@
     ]).start();
     floatOrb(orb1, 0);
     floatOrb(orb2, 1800);
   }, []);
 
   // Tab slide animation
   const slideTab = (newTab: 'signin' | 'signup') => {
@@ -278,6 +278,7 @@
 
   // ── Handlers ─────────────────────────────────────────────────────────────────
   const handleSignIn = async () => {
+    if (loading) return;
     if (!validateSignIn()) return;
     setLoading(true);
     try {
@@ -304,6 +305,7 @@
   };
 
   const handleSignUp = async () => {
+    if (loading) return;
     if (!validateSignUp()) return;
     setLoading(true);
     try {
@@ -315,7 +317,6 @@
         isLoggedIn: true,
         hasProfile: false,
         hasFamilyGroup: false,
-        onboardingComplete: false,
       });
       router.replace('/');
     } catch (e: any) {
@@ -326,11 +327,12 @@
   };
 
   const handleGoogle = async () => {
+    if (loading) return;
     setLoading(true);
     try {
       const result = await signInWithGoogle();
       if (result && result.user) {
         const { getPatientById } = require('@/services/auth.service');
         const dbPatient = await getPatientById(result.user.id);
         setSessionState({
           userId: result.user.id,
@@ -349,6 +351,21 @@
     }
   };
 
+  // ── Skip Handler ────────────────────────────────────────────────────────────
+  const handleSkip = () => {
+    setSessionState({
+      userId: 'skip-user-123',
+      patientId: 'skip-patient-123',
+      phoneNumber: '+91 9324474812',
+      isLoggedIn: true,
+      hasProfile: false,
+      hasFamilyGroup: false,
+      isHydrated: true,
+      hasShownIntro: true,
+    });
+    router.replace('/(onboarding)/family-setup');
+  };
+
   // ── Render ───────────────────────────────────────────────────────────────────
   return (
     <View style={s.root}>
@@ -363,6 +380,18 @@
       <Animated.View style={[s.orb, s.orb1, { transform: [{ translateY: orb1Y }, { scale: orb1S }] }]} />
       <Animated.View style={[s.orb, s.orb2, { transform: [{ translateY: orb2Y }, { scale: orb2S }] }]} />
 
+      {/* Skip Button */}
+      <TouchableOpacity style={s.skipButton} onPress={handleSkip} activeOpacity={0.8}>
+        <LinearGradient
+          colors={['#10B981', '#059669']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={s.skipButtonGradient}
+        >
+          <Text style={s.skipButtonText}>Skip →</Text>
+        </LinearGradient>
+      </TouchableOpacity>
+
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={{ flex: 1 }}
@@ -641,6 +670,32 @@
     minHeight: height,
   },
 
+  // Skip Button
+  skipButton: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 50 : 30,
+    right: 20,
+    zIndex: 100,
+    borderRadius: 12,
+    overflow: 'hidden',
+    shadowColor: '#10B981',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  skipButtonGradient: {
+    paddingHorizontal: 18,
+    paddingVertical: 10,
+    borderRadius: 12,
+  },
+  skipButtonText: {
+    fontFamily: FONT.semibold,
+    fontSize: 14,
+    color: '#FFFFFF',
+    letterSpacing: 0.5,
+  },
+
   // Orbs
   orb: { position: 'absolute', borderRadius: 999, opacity: 0.18 },
   orb1: {
@@ -803,4 +858,4 @@
     fontSize: 12,
     color: C.primary,
   },
-});
+});