kibin/fiberops-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Nemo
2026-03-24 10:37:57 +08:00
parent baed6dc8d5
commit 4644a3194d
38 changed files with 4967 additions and 2984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
app/(auth)/login.tsx
View File

@@ -1,18 +1,20 @@
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 { useLocalSearchParams, router } from 'expo-router';
import { useAuthStore } from '../../stores/authStore';
export default function LoginScreen() {
const { tenantSlug } = useLocalSearchParams<{ tenantSlug: string }>();
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const { login, isLoading } = useAuthStore();
const handleLogin = async () => {
if (!username.trim() || !password) return Alert.alert('Required', 'Please enter username and password.');
if (!email.trim() || !password) return Alert.alert('Required', 'Please enter email and password.');
try {
await login(tenantSlug, username.trim(), password);
await login(tenantSlug, email.trim(), password);
router.replace('/(app)/dashboard');
} catch (e: any) {
const msg = e?.response?.data?.message ?? 'Login failed. Check your credentials.';
@@ -21,52 +23,61 @@ export default function LoginScreen() {
};
return (
<KeyboardAvoidingView
className="flex-1 bg-white"
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<View className="flex-1 justify-center px-8">
<TouchableOpacity className="mb-8" onPress={() => router.back()}>
<Text className="text-primary text-base">← Back</Text>
</TouchableOpacity>
<SafeAreaView style={{ flex: 1, backgroundColor: '#FFF' }}>
<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 24 }}>
<TouchableOpacity onPress={() => router.back()} style={{ marginBottom: 32 }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Text style={{ fontSize: 17, fontWeight: '600', color: '#0891B2' }}>← Back</Text>
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-900 mb-1">Welcome back</Text>
<Text className="text-gray-500 mb-8">
Signing in to <Text className="font-semibold text-gray-700">{tenantSlug}</Text>
</Text>
<Text style={{ fontSize: 32, fontWeight: '900', color: '#0F172A', letterSpacing: -0.5, marginBottom: 6 }}>Welcome back</Text>
<Text style={{ fontSize: 16, color: '#64748B', marginBottom: 32 }}>
Signing in to <Text style={{ fontWeight: '700', color: '#0F172A' }}>{tenantSlug}</Text>
</Text>
<Text className="text-sm font-medium text-gray-700 mb-1">Username</Text>
<TextInput
className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-4"
placeholder="Enter username"
value={username}
onChangeText={setUsername}
autoCapitalize="none"
autoCorrect={false}
autoFocus
/>
{/* Email */}
<Text style={{ fontSize: 15, fontWeight: '700', color: '#374151', marginBottom: 8 }}>Email</Text>
<TextInput
style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, paddingHorizontal: 18, paddingVertical: 16, fontSize: 17, color: '#0F172A', marginBottom: 16 }}
placeholder="Enter your email"
placeholderTextColor="#94A3B8"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
keyboardType="email-address"
autoFocus
/>
<Text className="text-sm font-medium text-gray-700 mb-1">Password</Text>
<TextInput
className="border border-gray-300 rounded-xl px-4 py-3 text-base text-gray-900 mb-6"
placeholder="Enter password"
value={password}
onChangeText={setPassword}
secureTextEntry
/>
{/* Password */}
<Text style={{ fontSize: 15, fontWeight: '700', color: '#374151', marginBottom: 8 }}>Password</Text>
<View style={{ backgroundColor: '#F8FAFC', borderWidth: 1.5, borderColor: '#E2E8F0', borderRadius: 14, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 18, marginBottom: 28 }}>
<TextInput
style={{ flex: 1, paddingVertical: 16, fontSize: 17, color: '#0F172A' }}
placeholder="Enter your password"
placeholderTextColor="#94A3B8"
value={password}
onChangeText={setPassword}
secureTextEntry={!showPassword}
onSubmitEditing={handleLogin}
/>
<TouchableOpacity onPress={() => setShowPassword(!showPassword)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Text style={{ fontSize: 15, fontWeight: '600', color: '#0891B2' }}>{showPassword ? 'Hide' : 'Show'}</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
className="bg-primary rounded-xl py-4 items-center"
onPress={handleLogin}
disabled={isLoading}
>
{isLoading ? (
<ActivityIndicator color="white" />
) : (
<Text className="text-white font-semibold text-base">Sign In</Text>
)}
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
<TouchableOpacity
style={{ backgroundColor: '#0891B2', borderRadius: 14, paddingVertical: 18, alignItems: 'center' }}
onPress={handleLogin}
disabled={isLoading}
activeOpacity={0.8}
>
{isLoading
? <ActivityIndicator color="#FFF" />
: <Text style={{ color: '#FFF', fontSize: 17, fontWeight: '700' }}>Sign In</Text>
}
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}