feat: major UI/UX overhaul + user management + ticket detail refactor

- 5-tab navigation (Home/Clients/Collect/Tickets/Profile)
- Inline styles throughout (17px min font, SafeAreaView)
- Dashboard fixed to match real API shape
- Ticket detail: 2 tabs (Details + Comments), always-visible comment input
- Installation confirmation: GPS coordinate capture + client location update
- User management screens (Admin only): list, create, detail + role/active toggle
- Tasks folder replaces tickets folder
- Remittance detail: inline styles
- Record payment: prefill from client, live button text
- Icon component with SVG icons
- Color system: primary #0891B2

app/(app)/users/[id].tsx

@@ -0,0 +1,183 @@
+import { useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, Alert, ActivityIndicator, Switch } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useLocalSearchParams, router } from 'expo-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../services/api';
+
+const ROLE_COLOR: Record<string, string> = { ADMIN: '#7C3AED', STAFF: '#0891B2', TECHNICIAN: '#059669', COLLECTOR: '#D97706' };
+const ROLE_BG: Record<string, string>   = { ADMIN: '#F5F3FF', STAFF: '#ECFEFF', TECHNICIAN: '#F0FDF4', COLLECTOR: '#FFFBEB' };
+
+const ROLES = [
+  { value: 'TECHNICIAN', label: 'Technician', desc: 'Field work & installations' },
+  { value: 'COLLECTOR',  label: 'Collector',  desc: 'Payments & remittances' },
+  { value: 'STAFF',      label: 'Staff',      desc: 'General access' },
+  { value: 'ADMIN',      label: 'Admin',      desc: 'Full access + user mgmt' },
+];
+
+function InfoRow({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <View style={{ paddingHorizontal: 20, paddingVertical: 16, borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
+      <Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{label}</Text>
+      <Text style={{ fontSize: 17, fontWeight: '500', color: '#0F172A' }}>{value ?? '—'}</Text>
+    </View>
+  );
+}
+
+export default function UserDetailScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const qc = useQueryClient();
+  const [editingRole, setEditingRole] = useState(false);
+  const [newRole, setNewRole] = useState('');
+
+  const { data: user, isLoading } = useQuery({
+    queryKey: ['user', id],
+    queryFn: () => api.get(`/api/v1/users/${id}`).then(r => r.data),
+  });
+
+  const toggleActive = useMutation({
+    mutationFn: (isActive: boolean) => api.patch(`/api/v1/users/${id}`, { isActive }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['user', id] }),
+    onError: () => Alert.alert('Error', 'Could not update user status.'),
+  });
+
+  const changeRole = useMutation({
+    mutationFn: (role: string) => api.patch(`/api/v1/users/${id}`, { role }),
+    onSuccess: () => {
+      setEditingRole(false);
+      qc.invalidateQueries({ queryKey: ['user', id] });
+      qc.invalidateQueries({ queryKey: ['users'] });
+    },
+    onError: () => Alert.alert('Error', 'Could not update role.'),
+  });
+
+  if (isLoading) {
+    return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+        <View style={{ flex: 1, backgroundColor: '#F8FAFC', alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator color="#0891B2" size="large" />
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  const role       = user?.roleAssignments?.[0]?.role ?? 'STAFF';
+  const roleColor  = ROLE_COLOR[role] ?? '#6B7280';
+  const roleBg     = ROLE_BG[role]    ?? '#F1F5F9';
+  const initials   = `${user?.firstName?.[0] ?? ''}${user?.lastName?.[0] ?? ''}`.toUpperCase();
+  const isActive   = user?.isActive ?? true;
+  const lastLogin  = user?.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString('en-PH', { month: 'long', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Never';
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <ScrollView style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        {/* Header */}
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 16, paddingTop: 12, paddingBottom: 24, alignItems: 'center' }}>
+          <TouchableOpacity onPress={() => router.back()} style={{ alignSelf: 'flex-start', marginBottom: 16 }} activeOpacity={0.7}>
+            <Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
+          </TouchableOpacity>
+          <View style={{ width: 72, height: 72, borderRadius: 36, backgroundColor: roleBg, alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
+            <Text style={{ fontSize: 26, fontWeight: '800', color: roleColor }}>{initials}</Text>
+          </View>
+          <Text style={{ color: '#FFF', fontSize: 22, fontWeight: '800' }}>{user?.firstName} {user?.lastName}</Text>
+          <View style={{ borderRadius: 20, paddingHorizontal: 14, paddingVertical: 6, backgroundColor: roleBg, marginTop: 8 }}>
+            <Text style={{ fontSize: 14, fontWeight: '700', color: roleColor }}>{role}</Text>
+          </View>
+          {!isActive && (
+            <View style={{ borderRadius: 20, paddingHorizontal: 14, paddingVertical: 6, backgroundColor: '#FEE2E2', marginTop: 6 }}>
+              <Text style={{ fontSize: 13, fontWeight: '700', color: '#DC2626' }}>Inactive Account</Text>
+            </View>
+          )}
+        </View>
+
+        <View style={{ padding: 16 }}>
+          {/* Info Card */}
+          <View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', marginBottom: 16, overflow: 'hidden' }}>
+            <InfoRow label="Email" value={user?.email} />
+            <InfoRow label="Phone" value={user?.phone} />
+            <InfoRow label="Last Login" value={lastLogin} />
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              <Text style={{ fontSize: 12, fontWeight: '600', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 12 }}>Account Status</Text>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <View>
+                  <Text style={{ fontSize: 17, fontWeight: '600', color: isActive ? '#166534' : '#DC2626' }}>
+                    {isActive ? 'Active' : 'Inactive'}
+                  </Text>
+                  <Text style={{ fontSize: 13, color: '#94A3B8', marginTop: 2 }}>
+                    {isActive ? 'User can log in' : 'Login is blocked'}
+                  </Text>
+                </View>
+                <Switch
+                  value={isActive}
+                  onValueChange={(val) => Alert.alert(
+                    val ? 'Activate User' : 'Deactivate User',
+                    val ? `Allow ${user?.firstName} to log in?` : `Block ${user?.firstName} from logging in?`,
+                    [
+                      { text: 'Cancel', style: 'cancel' },
+                      { text: val ? 'Activate' : 'Deactivate', onPress: () => toggleActive.mutate(val), style: val ? 'default' : 'destructive' },
+                    ]
+                  )}
+                  trackColor={{ false: '#E2E8F0', true: '#0891B2' }}
+                  thumbColor="#FFF"
+                />
+              </View>
+            </View>
+          </View>
+
+          {/* Role Change */}
+          <View style={{ backgroundColor: '#FFF', borderRadius: 20, borderWidth: 1, borderColor: '#F1F5F9', marginBottom: 16, overflow: 'hidden' }}>
+            <View style={{ paddingHorizontal: 20, paddingVertical: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottomWidth: editingRole ? 1 : 0, borderBottomColor: '#F1F5F9' }}>
+              <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A' }}>Role</Text>
+              <TouchableOpacity onPress={() => { setEditingRole(!editingRole); setNewRole(role); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                <Text style={{ fontSize: 15, fontWeight: '600', color: '#0891B2' }}>{editingRole ? 'Cancel' : 'Change'}</Text>
+              </TouchableOpacity>
+            </View>
+            {editingRole && (
+              <View style={{ padding: 16 }}>
+                {ROLES.map(r => {
+                  const isSelected = (newRole || role) === r.value;
+                  const rc = ROLE_COLOR[r.value] ?? '#6B7280';
+                  const rb = ROLE_BG[r.value]   ?? '#F1F5F9';
+                  return (
+                    <TouchableOpacity
+                      key={r.value}
+                      onPress={() => setNewRole(r.value)}
+                      style={{ flexDirection: 'row', alignItems: 'center', borderRadius: 14, padding: 14, marginBottom: 8, borderWidth: 2, borderColor: isSelected ? rc : '#E2E8F0', backgroundColor: isSelected ? rb : '#FFF' }}
+                      activeOpacity={0.7}
+                    >
+                      <View style={{ flex: 1 }}>
+                        <Text style={{ fontSize: 15, fontWeight: '700', color: isSelected ? rc : '#0F172A' }}>{r.label}</Text>
+                        <Text style={{ fontSize: 13, color: '#64748B' }}>{r.desc}</Text>
+                      </View>
+                      <View style={{ width: 20, height: 20, borderRadius: 10, borderWidth: 2, borderColor: isSelected ? rc : '#CBD5E1', backgroundColor: isSelected ? rc : 'transparent', alignItems: 'center', justifyContent: 'center' }}>
+                        {isSelected && <View style={{ width: 7, height: 7, borderRadius: 4, backgroundColor: '#FFF' }} />}
+                      </View>
+                    </TouchableOpacity>
+                  );
+                })}
+                <TouchableOpacity
+                  style={{ backgroundColor: newRole && newRole !== role ? '#0891B2' : '#CBD5E1', borderRadius: 14, paddingVertical: 16, alignItems: 'center', marginTop: 4 }}
+                  onPress={() => newRole && newRole !== role && Alert.alert(
+                    'Change Role',
+                    `Change ${user?.firstName}'s role to ${newRole}?`,
+                    [
+                      { text: 'Cancel', style: 'cancel' },
+                      { text: 'Change', onPress: () => changeRole.mutate(newRole) },
+                    ]
+                  )}
+                  disabled={changeRole.isPending || !newRole || newRole === role}
+                  activeOpacity={0.8}
+                >
+                  {changeRole.isPending
+                    ? <ActivityIndicator color="#FFF" />
+                    : <Text style={{ color: '#FFF', fontSize: 16, fontWeight: '700' }}>Apply Role Change</Text>
+                  }
+                </TouchableOpacity>
+              </View>
+            )}
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

app/(app)/users/_layout.tsx

@@ -0,0 +1,4 @@
+import { Stack } from 'expo-router';
+export default function UsersLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}

app/(app)/users/index.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { View, Text, FlatList, TextInput, TouchableOpacity, ActivityIndicator, RefreshControl, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { router } from 'expo-router';
+import { api } from '../../../services/api';
+
+const ROLE_COLOR: Record<string, string> = {
+  ADMIN:       '#7C3AED',
+  STAFF:       '#0891B2',
+  TECHNICIAN:  '#059669',
+  COLLECTOR:   '#D97706',
+};
+const ROLE_BG: Record<string, string> = {
+  ADMIN:       '#F5F3FF',
+  STAFF:       '#ECFEFF',
+  TECHNICIAN:  '#F0FDF4',
+  COLLECTOR:   '#FFFBEB',
+};
+
+export default function UsersScreen() {
+  const [search, setSearch] = useState('');
+  const qc = useQueryClient();
+
+  const { data, isLoading, refetch, isRefetching } = useQuery({
+    queryKey: ['users'],
+    queryFn: () => api.get('/api/v1/users').then(r => Array.isArray(r.data) ? r.data : r.data?.data ?? []),
+  });
+
+  const toggleActive = useMutation({
+    mutationFn: ({ id, isActive }: { id: string; isActive: boolean }) =>
+      api.patch(`/api/v1/users/${id}`, { isActive }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] }),
+    onError: () => Alert.alert('Error', 'Could not update user.'),
+  });
+
+  const users = (data ?? []).filter((u: any) =>
+    `${u.firstName} ${u.lastName} ${u.email}`.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        {/* Header */}
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+          <View>
+            <TouchableOpacity onPress={() => router.back()} activeOpacity={0.7} style={{ marginBottom: 8 }}>
+              <Text style={{ color: '#A5F3FC', fontSize: 15, fontWeight: '600' }}>← Back</Text>
+            </TouchableOpacity>
+            <Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Users</Text>
+            <Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 2 }}>{users.length} members</Text>
+          </View>
+          <TouchableOpacity
+            style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 12, paddingHorizontal: 16, paddingVertical: 10 }}
+            onPress={() => router.push('/(app)/users/new')}
+            activeOpacity={0.7}
+          >
+            <Text style={{ color: '#FFF', fontWeight: '700', fontSize: 15 }}>+ Add User</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Search */}
+        <View style={{ backgroundColor: '#FFF', paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#F1F5F9' }}>
+          <View style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 12, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14 }}>
+            <TextInput
+              style={{ flex: 1, paddingVertical: 13, fontSize: 16, color: '#0F172A' }}
+              placeholder="Search users..."
+              placeholderTextColor="#94A3B8"
+              value={search}
+              onChangeText={setSearch}
+            />
+            {search.length > 0 && (
+              <TouchableOpacity onPress={() => setSearch('')} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: '#CBD5E1', alignItems: 'center', justifyContent: 'center' }}>
+                  <Text style={{ color: '#FFF', fontSize: 12, fontWeight: '800', lineHeight: 14 }}>×</Text>
+                </View>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+
+        {isLoading ? (
+          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <ActivityIndicator color="#0891B2" size="large" />
+          </View>
+        ) : (
+          <FlatList
+            data={users}
+            keyExtractor={(item) => item.id}
+            refreshControl={<RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#0891B2" />}
+            contentContainerStyle={{ padding: 16, paddingBottom: 32 }}
+            renderItem={({ item }) => {
+              const role = item.roleAssignments?.[0]?.role ?? 'STAFF';
+              const roleColor = ROLE_COLOR[role] ?? '#6B7280';
+              const roleBg    = ROLE_BG[role]    ?? '#F1F5F9';
+              const initials  = `${item.firstName?.[0] ?? ''}${item.lastName?.[0] ?? ''}`.toUpperCase();
+
+              return (
+                <TouchableOpacity
+                  style={{ backgroundColor: '#FFF', borderRadius: 16, padding: 18, marginBottom: 12, borderWidth: 1, borderColor: '#F1F5F9', flexDirection: 'row', alignItems: 'center', opacity: item.isActive ? 1 : 0.5 }}
+                  onPress={() => router.push(`/(app)/users/${item.id}`)}
+                  activeOpacity={0.7}
+                >
+                  {/* Avatar */}
+                  <View style={{ width: 48, height: 48, borderRadius: 24, backgroundColor: roleBg, alignItems: 'center', justifyContent: 'center', marginRight: 14 }}>
+                    <Text style={{ fontSize: 16, fontWeight: '800', color: roleColor }}>{initials}</Text>
+                  </View>
+
+                  {/* Info */}
+                  <View style={{ flex: 1 }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 3 }}>
+                      <Text style={{ fontSize: 16, fontWeight: '700', color: '#0F172A', marginRight: 8 }}>
+                        {item.firstName} {item.lastName}
+                      </Text>
+                      {!item.isActive && (
+                        <View style={{ borderRadius: 10, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: '#FEE2E2' }}>
+                          <Text style={{ fontSize: 11, fontWeight: '700', color: '#DC2626' }}>Inactive</Text>
+                        </View>
+                      )}
+                    </View>
+                    <Text style={{ fontSize: 14, color: '#64748B' }}>{item.email}</Text>
+                  </View>
+
+                  {/* Role badge */}
+                  <View style={{ borderRadius: 20, paddingHorizontal: 10, paddingVertical: 5, backgroundColor: roleBg }}>
+                    <Text style={{ fontSize: 12, fontWeight: '700', color: roleColor }}>{role}</Text>
+                  </View>
+                </TouchableOpacity>
+              );
+            }}
+            ListEmptyComponent={
+              <View style={{ alignItems: 'center', paddingVertical: 60 }}>
+                <Text style={{ fontSize: 17, color: '#94A3B8' }}>No users found</Text>
+              </View>
+            }
+          />
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}

app/(app)/users/new.tsx

@@ -0,0 +1,175 @@
+import { useState } from 'react';
+import { View, Text, TextInput, TouchableOpacity, ScrollView, Alert, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { useQueryClient } from '@tanstack/react-query';
+import { api } from '../../../services/api';
+
+const ROLES = [
+  { value: 'TECHNICIAN', label: 'Technician', desc: 'Field work & installations', color: '#059669', bg: '#F0FDF4' },
+  { value: 'COLLECTOR',  label: 'Collector',  desc: 'Payments & remittances',    color: '#D97706', bg: '#FFFBEB' },
+  { value: 'STAFF',      label: 'Staff',      desc: 'General access',            color: '#0891B2', bg: '#ECFEFF' },
+  { value: 'ADMIN',      label: 'Admin',      desc: 'Full access + user mgmt',   color: '#7C3AED', bg: '#F5F3FF' },
+];
+
+export default function NewUserScreen() {
+  const qc = useQueryClient();
+  const [firstName, setFirstName] = useState('');
+  const [lastName,  setLastName]  = useState('');
+  const [email,     setEmail]     = useState('');
+  const [phone,     setPhone]     = useState('');
+  const [password,  setPassword]  = useState('');
+  const [showPass,  setShowPass]  = useState(false);
+  const [role,      setRole]      = useState('TECHNICIAN');
+  const [loading,   setLoading]   = useState(false);
+
+  const isValid = firstName.trim() && lastName.trim() && email.trim() && password.length >= 8;
+
+  const submit = async () => {
+    if (!isValid) return Alert.alert('Required', 'Please fill all required fields. Password must be at least 8 characters.');
+    setLoading(true);
+    try {
+      await api.post('/api/v1/users', {
+        firstName: firstName.trim(),
+        lastName:  lastName.trim(),
+        email:     email.trim().toLowerCase(),
+        phone:     phone.trim() || undefined,
+        password,
+        role,
+      });
+      qc.invalidateQueries({ queryKey: ['users'] });
+      Alert.alert('User Created!', `${firstName} ${lastName} can now log in with ${email.trim().toLowerCase()}`, [
+        { text: 'Add Another', onPress: () => { setFirstName(''); setLastName(''); setEmail(''); setPhone(''); setPassword(''); } },
+        { text: 'Done', onPress: () => router.back() },
+      ]);
+    } catch (e: any) {
+      const msg = e?.response?.data?.message;
+      Alert.alert('Error', Array.isArray(msg) ? msg.join('\n') : msg ?? 'Could not create user.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#0891B2' }} edges={['top']}>
+      <View style={{ flex: 1, backgroundColor: '#F8FAFC' }}>
+        {/* Header */}
+        <View style={{ backgroundColor: '#0891B2', paddingHorizontal: 20, paddingTop: 12, paddingBottom: 20 }}>
+          <TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 12 }} activeOpacity={0.7}>
+            <Text style={{ color: '#A5F3FC', fontSize: 17, fontWeight: '600' }}>← Back</Text>
+          </TouchableOpacity>
+          <Text style={{ color: '#FFF', fontSize: 28, fontWeight: '800' }}>Add User</Text>
+          <Text style={{ color: '#A5F3FC', fontSize: 14, marginTop: 2 }}>Create a new team member</Text>
+        </View>
+
+        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+          {/* Name row */}
+          <View style={{ flexDirection: 'row', marginBottom: 16 }}>
+            <View style={{ flex: 1, marginRight: 8 }}>
+              <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>First Name <Text style={{ color: '#DC2626' }}>*</Text></Text>
+              <TextInput
+                style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: '#0F172A' }}
+                placeholder="Juan"
+                placeholderTextColor="#94A3B8"
+                value={firstName}
+                onChangeText={setFirstName}
+                autoCapitalize="words"
+              />
+            </View>
+            <View style={{ flex: 1, marginLeft: 8 }}>
+              <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Last Name <Text style={{ color: '#DC2626' }}>*</Text></Text>
+              <TextInput
+                style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: '#0F172A' }}
+                placeholder="Dela Cruz"
+                placeholderTextColor="#94A3B8"
+                value={lastName}
+                onChangeText={setLastName}
+                autoCapitalize="words"
+              />
+            </View>
+          </View>
+
+          {/* Email */}
+          <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Email <Text style={{ color: '#DC2626' }}>*</Text></Text>
+          <TextInput
+            style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: '#0F172A', marginBottom: 16 }}
+            placeholder="juan@yourisp.com"
+            placeholderTextColor="#94A3B8"
+            value={email}
+            onChangeText={setEmail}
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoCorrect={false}
+          />
+
+          {/* Phone */}
+          <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>
+            Phone <Text style={{ fontSize: 14, fontWeight: '400', color: '#94A3B8' }}>(optional)</Text>
+          </Text>
+          <TextInput
+            style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 16, paddingVertical: 14, fontSize: 16, color: '#0F172A', marginBottom: 16 }}
+            placeholder="09171234567"
+            placeholderTextColor="#94A3B8"
+            value={phone}
+            onChangeText={setPhone}
+            keyboardType="phone-pad"
+          />
+
+          {/* Password */}
+          <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 8 }}>Password <Text style={{ color: '#DC2626' }}>*</Text></Text>
+          <View style={{ backgroundColor: '#FFF', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, marginBottom: 6 }}>
+            <TextInput
+              style={{ flex: 1, paddingVertical: 14, fontSize: 16, color: '#0F172A' }}
+              placeholder="Min. 8 characters"
+              placeholderTextColor="#94A3B8"
+              value={password}
+              onChangeText={setPassword}
+              secureTextEntry={!showPass}
+            />
+            <TouchableOpacity onPress={() => setShowPass(!showPass)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <Text style={{ fontSize: 14, fontWeight: '600', color: '#0891B2' }}>{showPass ? 'Hide' : 'Show'}</Text>
+            </TouchableOpacity>
+          </View>
+          <Text style={{ fontSize: 13, color: '#94A3B8', marginBottom: 20 }}>They can change this after first login.</Text>
+
+          {/* Role */}
+          <Text style={{ fontSize: 15, fontWeight: '700', color: '#0F172A', marginBottom: 12 }}>Role <Text style={{ color: '#DC2626' }}>*</Text></Text>
+          {ROLES.map(r => (
+            <TouchableOpacity
+              key={r.value}
+              onPress={() => setRole(r.value)}
+              style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: role === r.value ? r.bg : '#FFF', borderRadius: 16, padding: 18, marginBottom: 10, borderWidth: 2, borderColor: role === r.value ? r.color : '#E2E8F0' }}
+              activeOpacity={0.7}
+            >
+              <View style={{ width: 44, height: 44, borderRadius: 22, backgroundColor: role === r.value ? r.color : '#F1F5F9', alignItems: 'center', justifyContent: 'center', marginRight: 14 }}>
+                <Text style={{ fontSize: 11, fontWeight: '800', color: role === r.value ? '#FFF' : '#94A3B8' }}>{r.value.slice(0,4)}</Text>
+              </View>
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontSize: 16, fontWeight: '700', color: role === r.value ? r.color : '#0F172A' }}>{r.label}</Text>
+                <Text style={{ fontSize: 14, color: '#64748B', marginTop: 2 }}>{r.desc}</Text>
+              </View>
+              <View style={{ width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: role === r.value ? r.color : '#CBD5E1', backgroundColor: role === r.value ? r.color : 'transparent', alignItems: 'center', justifyContent: 'center' }}>
+                {role === r.value && <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: '#FFF' }} />}
+              </View>
+            </TouchableOpacity>
+          ))}
+
+          <View style={{ height: 16 }} />
+
+          {/* Submit */}
+          <TouchableOpacity
+            style={{ backgroundColor: isValid ? '#0891B2' : '#CBD5E1', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
+            onPress={submit}
+            disabled={loading || !isValid}
+            activeOpacity={0.8}
+          >
+            {loading
+              ? <ActivityIndicator color="#FFF" />
+              : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Create User</Text>
+            }
+          </TouchableOpacity>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}