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)/_layout.tsx

@@ -1,44 +1,51 @@
 import { Tabs } from 'expo-router';
-import { Text } from 'react-native';
+import { Icon } from '../../components/Icon';
 
 export default function AppLayout() {
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: '#2563EB',
-        tabBarInactiveTintColor: '#6B7280',
-        tabBarStyle: { paddingBottom: 4 },
+        tabBarActiveTintColor: '#0891B2',
+        tabBarInactiveTintColor: '#94A3B8',
+        tabBarStyle: {
+          backgroundColor: '#FFFFFF',
+          borderTopColor: '#F1F5F9',
+          borderTopWidth: 1,
+          paddingBottom: 8,
+          paddingTop: 8,
+          height: 64,
+        },
+        tabBarLabelStyle: {
+          fontSize: 12,
+          fontWeight: '600',
+          marginTop: 2,
+        },
       }}
     >
       <Tabs.Screen
         name="dashboard"
-        options={{ title: 'Home', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>🏠</Text> }}
+        options={{ title: 'Home', tabBarIcon: ({ color }) => <Icon name="home" size={22} color={color} /> }}
       />
       <Tabs.Screen
         name="clients"
-        options={{ title: 'Clients', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>👥</Text> }}
+        options={{ title: 'Clients', tabBarIcon: ({ color }) => <Icon name="users" size={22} color={color} /> }}
       />
       <Tabs.Screen
         name="payments"
-        options={{ title: 'Payments', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>💰</Text> }}
+        options={{ title: 'Collect', tabBarIcon: ({ color }) => <Icon name="collect" size={22} color={color} /> }}
       />
       <Tabs.Screen
-        name="remittances"
-        options={{ title: 'Remit', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>📋</Text> }}
-      />
-      <Tabs.Screen
-        name="tickets"
-        options={{ title: 'Tickets', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>🎫</Text> }}
-      />
-      <Tabs.Screen
-        name="installations"
-        options={{ title: 'Install', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>🔌</Text> }}
+        name="tasks"
+        options={{ title: 'Tickets', tabBarIcon: ({ color }) => <Icon name="ticket" size={22} color={color} /> }}
       />
       <Tabs.Screen
         name="profile"
-        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>👤</Text> }}
+        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Icon name="user" size={22} color={color} /> }}
       />
+      {/* Hidden — accessed programmatically */}
+      <Tabs.Screen name="remittances" options={{ href: null }} />
+      <Tabs.Screen name="users" options={{ href: null }} />
     </Tabs>
   );
 }