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/(auth)/company-code.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, Alert, KeyboardAvoidingView, Platform } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
 import { api } from '../../services/api';
 
@@ -18,51 +19,51 @@ export default function CompanyCodeScreen() {
         Alert.alert('Not Found', 'Company code not found. Please check and try again.');
       }
     } catch {
-      Alert.alert('Error', 'Could not verify company code. Please try again.');
-    } finally {
-      setLoading(false);
-    }
+      Alert.alert('Error', 'Could not verify. Please try again.');
+    } finally { setLoading(false); }
   };
 
   return (
-    <KeyboardAvoidingView
-      className="flex-1 bg-white"
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <View className="flex-1 justify-center px-8">
-        <View className="mb-10 items-center">
-          <View className="w-16 h-16 rounded-2xl bg-primary items-center justify-center mb-4">
-            <Text className="text-white text-3xl font-bold">F</Text>
+    <SafeAreaView style={{ flex: 1, backgroundColor: '#FFF' }}>
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 24 }}>
+          {/* Logo */}
+          <View style={{ alignItems: 'center', marginBottom: 48 }}>
+            <View style={{ width: 84, height: 84, borderRadius: 24, backgroundColor: '#0891B2', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
+              <Text style={{ color: '#FFF', fontSize: 40, fontWeight: '900' }}>F</Text>
+            </View>
+            <Text style={{ fontSize: 32, fontWeight: '900', color: '#0F172A', letterSpacing: -0.5 }}>FiberOps</Text>
+            <Text style={{ fontSize: 16, color: '#94A3B8', marginTop: 4 }}>Field Operations Platform</Text>
           </View>
-          <Text className="text-3xl font-bold text-gray-900">FiberOps</Text>
-          <Text className="text-gray-500 mt-1">Field Operations</Text>
+
+          <Text style={{ fontSize: 22, fontWeight: '800', color: '#0F172A', marginBottom: 6 }}>Enter Company Code</Text>
+          <Text style={{ fontSize: 16, color: '#64748B', marginBottom: 20, lineHeight: 22 }}>Ask your admin for your company's unique code.</Text>
+
+          <TextInput
+            style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 18, paddingVertical: 16, fontSize: 17, color: '#0F172A', marginBottom: 16 }}
+            placeholder="e.g. demo-isp"
+            placeholderTextColor="#94A3B8"
+            value={slug}
+            onChangeText={setSlug}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoFocus
+            onSubmitEditing={handleContinue}
+          />
+
+          <TouchableOpacity
+            style={{ backgroundColor: '#0891B2', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
+            onPress={handleContinue}
+            disabled={loading}
+            activeOpacity={0.8}
+          >
+            {loading
+              ? <ActivityIndicator color="#FFF" />
+              : <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Continue →</Text>
+            }
+          </TouchableOpacity>
         </View>
-
-        <Text className="text-xl font-semibold text-gray-900 mb-2">Enter Company Code</Text>
-        <Text className="text-gray-500 mb-6">Ask your admin for your company's unique code.</Text>
-
-        <TextInput
-          className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
-          placeholder="e.g. mybusiness"
-          value={slug}
-          onChangeText={setSlug}
-          autoCapitalize="none"
-          autoCorrect={false}
-          autoFocus
-        />
-
-        <TouchableOpacity
-          className="bg-primary rounded-xl py-4 items-center"
-          onPress={handleContinue}
-          disabled={loading}
-        >
-          {loading ? (
-            <ActivityIndicator color="white" />
-          ) : (
-            <Text className="text-white font-semibold text-base">Continue</Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </KeyboardAvoidingView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }