Fix form keyboard issues and sticky footers in agent screens

2026-05-26 16:34:05 +05:30
commit 9ac5e95d52
410 changed files with 86650 additions and 0 deletions
@@ -0,0 +1,98 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
+import { useTheme } from '../../../theme';
+import { haptics } from '../../../services/haptics/haptics';
+import type { LoginRole } from '../../../types/app';
+
+interface LoginRoleTabsProps {
+  activeRole: LoginRole;
+  onRoleChange: (role: LoginRole) => void;
+}
+
+const ROLES: LoginRole[] = ['User', 'Employee', 'Agent'];
+
+const ActiveTabBackground = () => (
+  <Animated.View 
+    entering={FadeIn.duration(300)} 
+    exiting={FadeOut.duration(200)}
+    layout={Layout.springify().damping(15)}
+    style={StyleSheet.absoluteFill}
+  >
+    <Svg width="100%" height="100%" viewBox="0 0 110 36" preserveAspectRatio="none">
+      <Path d="M 0,36 L 0,12 Q 0,0 12,0 L 80,0 Q 88,0 92,6 L 110,36 Z" fill="#143e6c" />
+    </Svg>
+  </Animated.View>
+);
+
+export const LoginRoleTabs: React.FC<LoginRoleTabsProps> = ({ activeRole, onRoleChange }) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.container}>
+      {ROLES.map((role, index) => {
+        const isActive = activeRole === role;
+        
+        return (
+          <Pressable
+            key={role}
+            onPress={() => {
+              if (!isActive) {
+                haptics.selection();
+                onRoleChange(role);
+              }
+            }}
+            style={({ pressed }) => [
+              styles.tab,
+              index > 0 && { marginLeft: isActive ? -10 : 0 },
+              isActive && { zIndex: 10 },
+              pressed && !isActive && { opacity: 0.6 },
+              pressed && isActive && { transform: [{ scale: 0.98 }] }
+            ]}
+          >
+            {isActive && <ActiveTabBackground />}
+            
+            <Animated.Text
+              layout={Layout.springify().damping(15)}
+              style={[
+                styles.tabText,
+                isActive ? styles.activeText : [styles.inactiveText, { color: theme.colors.textSecondary }],
+              ]}
+            >
+              {role}
+            </Animated.Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginBottom: -1,
+    zIndex: 10,
+    marginLeft: 0,
+  },
+  tab: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 38,
+    width: 110,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '700',
+    zIndex: 2,
+    transform: [{ translateX: -4 }],
+  },
+  activeText: {
+    color: '#FFFFFF',
+  },
+  inactiveText: {
+    fontWeight: '600',
+  },
+});