React Native Expo app — full mobile client
- Expo SDK 54, expo-router, NativeWind - 7 screens: login, tasks, calendar, goals, chat, settings, tabs - API client (api.hasdo.info), SecureStore auth, AuthContext - Tab navigation: Ukoly, Kalendar, Cile, Chat, Nastaveni - Pull-to-refresh, FAB, group colors, priority dots - Calendar grid with task dots - AI chat with keyboard avoiding - Web export verified (780 modules, 1.5MB bundle) - Bundle ID: info.hasdo.taskteam Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
63
mobile/app/(tabs)/_layout.tsx
Normal file
63
mobile/app/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
|
||||
export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
tabBarActiveTintColor: '#3B82F6',
|
||||
tabBarInactiveTintColor: '#94A3B8',
|
||||
headerStyle: { backgroundColor: '#3B82F6' },
|
||||
headerTintColor: '#fff',
|
||||
headerTitleStyle: { fontWeight: 'bold' },
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Ukoly',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="checkbox-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="calendar"
|
||||
options={{
|
||||
title: 'Kalendar',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="calendar-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="goals"
|
||||
options={{
|
||||
title: 'Cile',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="trophy-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="chat"
|
||||
options={{
|
||||
title: 'Chat',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="chatbubble-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="settings"
|
||||
options={{
|
||||
title: 'Nastaveni',
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="settings-outline" size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
264
mobile/app/(tabs)/calendar.tsx
Normal file
264
mobile/app/(tabs)/calendar.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
RefreshControl,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
const DAYS = ['Po', 'Ut', 'St', 'Ct', 'Pa', 'So', 'Ne'];
|
||||
const MONTHS = [
|
||||
'Leden', 'Unor', 'Brezen', 'Duben', 'Kveten', 'Cerven',
|
||||
'Cervenec', 'Srpen', 'Zari', 'Rijen', 'Listopad', 'Prosinec',
|
||||
];
|
||||
|
||||
function getDaysInMonth(year: number, month: number) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
}
|
||||
|
||||
function getFirstDayOfMonth(year: number, month: number) {
|
||||
const day = new Date(year, month, 1).getDay();
|
||||
return day === 0 ? 6 : day - 1; // Monday = 0
|
||||
}
|
||||
|
||||
export default function CalendarScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
||||
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
|
||||
const loadTasks = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const res = await api.getTasks(token);
|
||||
setTasks(res.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks();
|
||||
}, [loadTasks]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadTasks();
|
||||
setRefreshing(false);
|
||||
}, [loadTasks]);
|
||||
|
||||
const prevMonth = () => {
|
||||
setCurrentDate(new Date(year, month - 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
setCurrentDate(new Date(year, month + 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const daysInMonth = getDaysInMonth(year, month);
|
||||
const firstDay = getFirstDayOfMonth(year, month);
|
||||
|
||||
const tasksByDate: Record<string, any[]> = {};
|
||||
tasks.forEach((t) => {
|
||||
if (t.due_date) {
|
||||
const d = t.due_date.substring(0, 10);
|
||||
if (!tasksByDate[d]) tasksByDate[d] = [];
|
||||
tasksByDate[d].push(t);
|
||||
}
|
||||
});
|
||||
|
||||
const today = new Date().toISOString().substring(0, 10);
|
||||
|
||||
const selectedTasks = selectedDate ? tasksByDate[selectedDate] || [] : [];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
>
|
||||
{/* Month navigator */}
|
||||
<View style={styles.monthNav}>
|
||||
<TouchableOpacity onPress={prevMonth} style={styles.navBtn}>
|
||||
<Ionicons name="chevron-back" size={24} color="#3B82F6" />
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.monthTitle}>
|
||||
{MONTHS[month]} {year}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={nextMonth} style={styles.navBtn}>
|
||||
<Ionicons name="chevron-forward" size={24} color="#3B82F6" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Day headers */}
|
||||
<View style={styles.dayHeaders}>
|
||||
{DAYS.map((d) => (
|
||||
<Text key={d} style={styles.dayHeader}>
|
||||
{d}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Calendar grid */}
|
||||
<View style={styles.grid}>
|
||||
{Array.from({ length: firstDay }).map((_, i) => (
|
||||
<View key={`empty-${i}`} style={styles.dayCell} />
|
||||
))}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const hasTasks = !!tasksByDate[dateStr];
|
||||
const isToday = dateStr === today;
|
||||
const isSelected = dateStr === selectedDate;
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={day}
|
||||
style={[
|
||||
styles.dayCell,
|
||||
isToday && styles.todayCell,
|
||||
isSelected && styles.selectedCell,
|
||||
]}
|
||||
onPress={() => setSelectedDate(dateStr)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.dayText,
|
||||
isToday && styles.todayText,
|
||||
isSelected && styles.selectedText,
|
||||
]}
|
||||
>
|
||||
{day}
|
||||
</Text>
|
||||
{hasTasks && (
|
||||
<View
|
||||
style={[
|
||||
styles.dot,
|
||||
isSelected && { backgroundColor: '#fff' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Selected date tasks */}
|
||||
{selectedDate && (
|
||||
<View style={styles.tasksSection}>
|
||||
<Text style={styles.tasksSectionTitle}>
|
||||
Ukoly na {selectedDate}
|
||||
</Text>
|
||||
{selectedTasks.length === 0 ? (
|
||||
<Text style={styles.noTasks}>Zadne ukoly</Text>
|
||||
) : (
|
||||
selectedTasks.map((t) => (
|
||||
<View key={t.id} style={styles.taskItem}>
|
||||
<Ionicons
|
||||
name={t.status === 'done' ? 'checkmark-circle' : 'ellipse-outline'}
|
||||
size={20}
|
||||
color={t.status === 'done' ? '#22C55E' : '#94A3B8'}
|
||||
/>
|
||||
<Text
|
||||
style={[
|
||||
styles.taskItemText,
|
||||
t.status === 'done' && { textDecorationLine: 'line-through', color: '#94A3B8' },
|
||||
]}
|
||||
>
|
||||
{t.title}
|
||||
</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
monthNav: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: 16,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
navBtn: { padding: 8 },
|
||||
monthTitle: { fontSize: 18, fontWeight: '700', color: '#1E293B' },
|
||||
dayHeaders: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#fff',
|
||||
paddingBottom: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E2E8F0',
|
||||
},
|
||||
dayHeader: {
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
},
|
||||
grid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
backgroundColor: '#fff',
|
||||
padding: 4,
|
||||
},
|
||||
dayCell: {
|
||||
width: '14.28%',
|
||||
aspectRatio: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
todayCell: {
|
||||
backgroundColor: '#EFF6FF',
|
||||
borderRadius: 20,
|
||||
},
|
||||
selectedCell: {
|
||||
backgroundColor: '#3B82F6',
|
||||
borderRadius: 20,
|
||||
},
|
||||
dayText: { fontSize: 15, color: '#1E293B' },
|
||||
todayText: { color: '#3B82F6', fontWeight: '700' },
|
||||
selectedText: { color: '#fff', fontWeight: '700' },
|
||||
dot: {
|
||||
width: 5,
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: '#3B82F6',
|
||||
marginTop: 2,
|
||||
},
|
||||
tasksSection: {
|
||||
margin: 12,
|
||||
padding: 16,
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
},
|
||||
tasksSectionTitle: { fontSize: 16, fontWeight: '600', color: '#1E293B', marginBottom: 12 },
|
||||
noTasks: { color: '#94A3B8', fontSize: 14 },
|
||||
taskItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingVertical: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F5F9',
|
||||
},
|
||||
taskItemText: { fontSize: 14, color: '#1E293B', flex: 1 },
|
||||
});
|
||||
217
mobile/app/(tabs)/chat.tsx
Normal file
217
mobile/app/(tabs)/chat.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
type Message = {
|
||||
id: string;
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
timestamp: Date;
|
||||
};
|
||||
|
||||
export default function ChatScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{
|
||||
id: '0',
|
||||
role: 'assistant',
|
||||
content: 'Ahoj! Jsem vas AI asistent pro Task Team. Mohu vam pomoci s ukoly, planovani a organizaci. Na co se chcete zeptat?',
|
||||
timestamp: new Date(),
|
||||
},
|
||||
]);
|
||||
const [input, setInput] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const flatListRef = useRef<FlatList>(null);
|
||||
|
||||
const sendMessage = useCallback(async () => {
|
||||
if (!input.trim() || !token || sending) return;
|
||||
|
||||
const userMsg: Message = {
|
||||
id: Date.now().toString(),
|
||||
role: 'user',
|
||||
content: input.trim(),
|
||||
timestamp: new Date(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setSending(true);
|
||||
|
||||
try {
|
||||
const res = await api.sendChatMessage(token, userMsg.content);
|
||||
const aiMsg: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: res.data?.reply || 'Omlouvam se, nepodarilo se zpracovat odpoved.',
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, aiMsg]);
|
||||
} catch (err: any) {
|
||||
const errMsg: Message = {
|
||||
id: (Date.now() + 1).toString(),
|
||||
role: 'assistant',
|
||||
content: `Chyba: ${err.message}`,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
setMessages((prev) => [...prev, errMsg]);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [input, token, sending]);
|
||||
|
||||
const renderMessage = ({ item }: { item: Message }) => {
|
||||
const isUser = item.role === 'user';
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.msgRow,
|
||||
isUser ? styles.msgRowUser : styles.msgRowAi,
|
||||
]}
|
||||
>
|
||||
{!isUser && (
|
||||
<View style={styles.avatar}>
|
||||
<Ionicons name="sparkles" size={16} color="#3B82F6" />
|
||||
</View>
|
||||
)}
|
||||
<View
|
||||
style={[
|
||||
styles.bubble,
|
||||
isUser ? styles.bubbleUser : styles.bubbleAi,
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.bubbleText,
|
||||
isUser && { color: '#fff' },
|
||||
]}
|
||||
>
|
||||
{item.content}
|
||||
</Text>
|
||||
<Text style={[styles.timestamp, isUser && { color: 'rgba(255,255,255,0.6)' }]}>
|
||||
{item.timestamp.toLocaleTimeString('cs-CZ', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
keyboardVerticalOffset={90}
|
||||
>
|
||||
<FlatList
|
||||
ref={flatListRef}
|
||||
data={messages}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={renderMessage}
|
||||
contentContainerStyle={styles.listContent}
|
||||
onContentSizeChange={() =>
|
||||
flatListRef.current?.scrollToEnd({ animated: true })
|
||||
}
|
||||
/>
|
||||
|
||||
<View style={styles.inputBar}>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Napiste zpravu..."
|
||||
value={input}
|
||||
onChangeText={setInput}
|
||||
multiline
|
||||
maxLength={2000}
|
||||
editable={!sending}
|
||||
onSubmitEditing={sendMessage}
|
||||
blurOnSubmit={false}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
style={[styles.sendBtn, (!input.trim() || sending) && styles.sendBtnDisabled]}
|
||||
onPress={sendMessage}
|
||||
disabled={!input.trim() || sending}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Ionicons name="send" size={20} color="#fff" />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
listContent: { padding: 12, paddingBottom: 4 },
|
||||
msgRow: { flexDirection: 'row', marginBottom: 12, maxWidth: '85%' },
|
||||
msgRowUser: { alignSelf: 'flex-end' },
|
||||
msgRowAi: { alignSelf: 'flex-start' },
|
||||
avatar: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#EFF6FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
bubble: { borderRadius: 16, padding: 12, maxWidth: '100%' },
|
||||
bubbleUser: {
|
||||
backgroundColor: '#3B82F6',
|
||||
borderBottomRightRadius: 4,
|
||||
},
|
||||
bubbleAi: {
|
||||
backgroundColor: '#fff',
|
||||
borderBottomLeftRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
},
|
||||
bubbleText: { fontSize: 15, lineHeight: 21, color: '#1E293B' },
|
||||
timestamp: { fontSize: 10, color: '#94A3B8', marginTop: 4, textAlign: 'right' },
|
||||
inputBar: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
padding: 12,
|
||||
backgroundColor: '#fff',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#E2E8F0',
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
fontSize: 15,
|
||||
maxHeight: 100,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
sendBtn: {
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: 8,
|
||||
},
|
||||
sendBtnDisabled: { backgroundColor: '#94A3B8' },
|
||||
});
|
||||
162
mobile/app/(tabs)/goals.tsx
Normal file
162
mobile/app/(tabs)/goals.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
export default function GoalsScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [goals, setGoals] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const loadGoals = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const res = await api.getGoals(token);
|
||||
setGoals(res.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadGoals();
|
||||
}, [loadGoals]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadGoals();
|
||||
setRefreshing(false);
|
||||
}, [loadGoals]);
|
||||
|
||||
const renderGoal = ({ item }: { item: any }) => {
|
||||
const progress = item.progress || 0;
|
||||
const total = item.target || 100;
|
||||
const pct = Math.min(Math.round((progress / total) * 100), 100);
|
||||
|
||||
return (
|
||||
<View style={styles.goalCard}>
|
||||
<View style={styles.goalHeader}>
|
||||
<View style={styles.goalIcon}>
|
||||
<Ionicons
|
||||
name={pct >= 100 ? 'trophy' : 'flag-outline'}
|
||||
size={24}
|
||||
color={pct >= 100 ? '#F59E0B' : '#3B82F6'}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.goalInfo}>
|
||||
<Text style={styles.goalTitle}>{item.title}</Text>
|
||||
{item.description && (
|
||||
<Text style={styles.goalDesc} numberOfLines={2}>
|
||||
{item.description}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text style={styles.goalPct}>{pct}%</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressBarBg}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressBarFill,
|
||||
{
|
||||
width: `${pct}%`,
|
||||
backgroundColor: pct >= 100 ? '#22C55E' : pct >= 50 ? '#3B82F6' : '#F59E0B',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.goalFooter}>
|
||||
<Text style={styles.goalStat}>
|
||||
{progress} / {total}
|
||||
</Text>
|
||||
{item.deadline && (
|
||||
<Text style={styles.goalDeadline}>
|
||||
<Ionicons name="time-outline" size={12} color="#94A3B8" />{' '}
|
||||
{new Date(item.deadline).toLocaleDateString('cs-CZ')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<FlatList
|
||||
data={goals}
|
||||
keyExtractor={(item) => item.id?.toString()}
|
||||
renderItem={renderGoal}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.empty}>
|
||||
<Ionicons name="trophy-outline" size={48} color="#CBD5E1" />
|
||||
<Text style={styles.emptyText}>Zatim zadne cile</Text>
|
||||
<Text style={styles.emptySubtext}>
|
||||
Vytvorte cile ve webove aplikaci
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
listContent: { padding: 12, paddingBottom: 20 },
|
||||
goalCard: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
goalHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 12 },
|
||||
goalIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#EFF6FF',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
goalInfo: { flex: 1, marginLeft: 12 },
|
||||
goalTitle: { fontSize: 16, fontWeight: '600', color: '#1E293B' },
|
||||
goalDesc: { fontSize: 13, color: '#64748B', marginTop: 2 },
|
||||
goalPct: { fontSize: 18, fontWeight: '700', color: '#3B82F6' },
|
||||
progressBarBg: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#E2E8F0',
|
||||
},
|
||||
progressBarFill: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
goalFooter: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 8,
|
||||
},
|
||||
goalStat: { fontSize: 12, color: '#64748B' },
|
||||
goalDeadline: { fontSize: 12, color: '#94A3B8' },
|
||||
empty: { alignItems: 'center', marginTop: 60 },
|
||||
emptyText: { color: '#94A3B8', fontSize: 16, marginTop: 12 },
|
||||
emptySubtext: { color: '#CBD5E1', fontSize: 13, marginTop: 4 },
|
||||
});
|
||||
329
mobile/app/(tabs)/index.tsx
Normal file
329
mobile/app/(tabs)/index.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
RefreshControl,
|
||||
Alert,
|
||||
TextInput,
|
||||
Modal,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import * as api from '../../lib/api';
|
||||
|
||||
const PRIORITY_COLORS: Record<string, string> = {
|
||||
high: '#EF4444',
|
||||
medium: '#F59E0B',
|
||||
low: '#22C55E',
|
||||
};
|
||||
|
||||
const STATUS_ICONS: Record<string, string> = {
|
||||
todo: 'ellipse-outline',
|
||||
in_progress: 'time-outline',
|
||||
done: 'checkmark-circle',
|
||||
};
|
||||
|
||||
export default function TasksScreen() {
|
||||
const { token } = useAuthContext();
|
||||
const [tasks, setTasks] = useState<any[]>([]);
|
||||
const [groups, setGroups] = useState<any[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [showAdd, setShowAdd] = useState(false);
|
||||
const [newTitle, setNewTitle] = useState('');
|
||||
const [filter, setFilter] = useState<string>('all');
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!token) return;
|
||||
try {
|
||||
const [tasksRes, groupsRes] = await Promise.all([
|
||||
api.getTasks(token),
|
||||
api.getGroups(token),
|
||||
]);
|
||||
setTasks(tasksRes.data || []);
|
||||
setGroups(groupsRes.data || []);
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const onRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await loadData();
|
||||
setRefreshing(false);
|
||||
}, [loadData]);
|
||||
|
||||
const addTask = async () => {
|
||||
if (!newTitle.trim() || !token) return;
|
||||
try {
|
||||
await api.createTask(token, { title: newTitle.trim() });
|
||||
setNewTitle('');
|
||||
setShowAdd(false);
|
||||
await loadData();
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTask = async (task: any) => {
|
||||
if (!token) return;
|
||||
const newStatus = task.status === 'done' ? 'todo' : 'done';
|
||||
try {
|
||||
await api.updateTask(token, task.id, { status: newStatus });
|
||||
await loadData();
|
||||
} catch (err: any) {
|
||||
Alert.alert('Chyba', err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredTasks =
|
||||
filter === 'all' ? tasks : tasks.filter((t) => t.status === filter);
|
||||
|
||||
const getGroupColor = (groupId: string) => {
|
||||
const group = groups.find((g) => g.id === groupId);
|
||||
return group?.color || '#64748B';
|
||||
};
|
||||
|
||||
const renderTask = ({ item }: { item: any }) => (
|
||||
<TouchableOpacity
|
||||
style={styles.taskCard}
|
||||
onPress={() => toggleTask(item)}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={styles.taskLeft}>
|
||||
<Ionicons
|
||||
name={STATUS_ICONS[item.status] as any || 'ellipse-outline'}
|
||||
size={24}
|
||||
color={item.status === 'done' ? '#22C55E' : '#94A3B8'}
|
||||
/>
|
||||
<View style={styles.taskInfo}>
|
||||
<Text
|
||||
style={[
|
||||
styles.taskTitle,
|
||||
item.status === 'done' && styles.taskDone,
|
||||
]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
{item.group_name && (
|
||||
<View
|
||||
style={[
|
||||
styles.groupBadge,
|
||||
{ backgroundColor: getGroupColor(item.group_id) + '20' },
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.groupBadgeText,
|
||||
{ color: getGroupColor(item.group_id) },
|
||||
]}
|
||||
>
|
||||
{item.group_name}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{item.priority && (
|
||||
<View
|
||||
style={[
|
||||
styles.priorityDot,
|
||||
{ backgroundColor: PRIORITY_COLORS[item.priority] || '#94A3B8' },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Filter bar */}
|
||||
<View style={styles.filterBar}>
|
||||
{['all', 'todo', 'in_progress', 'done'].map((f) => (
|
||||
<TouchableOpacity
|
||||
key={f}
|
||||
style={[styles.filterBtn, filter === f && styles.filterBtnActive]}
|
||||
onPress={() => setFilter(f)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.filterText,
|
||||
filter === f && styles.filterTextActive,
|
||||
]}
|
||||
>
|
||||
{f === 'all'
|
||||
? 'Vse'
|
||||
: f === 'todo'
|
||||
? 'K provedeni'
|
||||
: f === 'in_progress'
|
||||
? 'Rozpracovano'
|
||||
: 'Hotovo'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Task list */}
|
||||
<FlatList
|
||||
data={filteredTasks}
|
||||
keyExtractor={(item) => item.id?.toString()}
|
||||
renderItem={renderTask}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
||||
}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.empty}>
|
||||
<Ionicons name="document-outline" size={48} color="#CBD5E1" />
|
||||
<Text style={styles.emptyText}>Zatim zadne ukoly</Text>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* FAB */}
|
||||
<TouchableOpacity
|
||||
style={styles.fab}
|
||||
onPress={() => setShowAdd(true)}
|
||||
>
|
||||
<Ionicons name="add" size={28} color="#fff" />
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Add task modal */}
|
||||
<Modal visible={showAdd} transparent animationType="slide">
|
||||
<View style={styles.modalOverlay}>
|
||||
<View style={styles.modalContent}>
|
||||
<Text style={styles.modalTitle}>Novy ukol</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Nazev ukolu..."
|
||||
value={newTitle}
|
||||
onChangeText={setNewTitle}
|
||||
autoFocus
|
||||
onSubmitEditing={addTask}
|
||||
/>
|
||||
<View style={styles.modalActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.cancelBtn}
|
||||
onPress={() => {
|
||||
setShowAdd(false);
|
||||
setNewTitle('');
|
||||
}}
|
||||
>
|
||||
<Text style={styles.cancelText}>Zrusit</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.addBtn} onPress={addTask}>
|
||||
<Text style={styles.addBtnText}>Pridat</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
filterBar: {
|
||||
flexDirection: 'row',
|
||||
padding: 12,
|
||||
gap: 8,
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#E2E8F0',
|
||||
},
|
||||
filterBtn: {
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#F1F5F9',
|
||||
},
|
||||
filterBtnActive: { backgroundColor: '#3B82F6' },
|
||||
filterText: { fontSize: 13, color: '#64748B' },
|
||||
filterTextActive: { color: '#fff', fontWeight: '600' },
|
||||
listContent: { padding: 12, paddingBottom: 80 },
|
||||
taskCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 8,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
taskLeft: { flexDirection: 'row', alignItems: 'center', flex: 1 },
|
||||
taskInfo: { marginLeft: 12, flex: 1 },
|
||||
taskTitle: { fontSize: 15, color: '#1E293B', fontWeight: '500' },
|
||||
taskDone: {
|
||||
textDecorationLine: 'line-through',
|
||||
color: '#94A3B8',
|
||||
},
|
||||
groupBadge: { marginTop: 4, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 8, alignSelf: 'flex-start' },
|
||||
groupBadgeText: { fontSize: 11, fontWeight: '600' },
|
||||
priorityDot: { width: 10, height: 10, borderRadius: 5 },
|
||||
empty: { alignItems: 'center', marginTop: 60 },
|
||||
emptyText: { color: '#94A3B8', fontSize: 16, marginTop: 12 },
|
||||
fab: {
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#3B82F6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
},
|
||||
modalOverlay: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: '#fff',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
padding: 24,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
modalTitle: { fontSize: 18, fontWeight: '700', color: '#1E293B', marginBottom: 16 },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#E2E8F0',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
modalActions: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 12,
|
||||
marginTop: 16,
|
||||
},
|
||||
cancelBtn: { paddingHorizontal: 20, paddingVertical: 10 },
|
||||
cancelText: { color: '#64748B', fontSize: 15 },
|
||||
addBtn: {
|
||||
backgroundColor: '#3B82F6',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
},
|
||||
addBtnText: { color: '#fff', fontSize: 15, fontWeight: '600' },
|
||||
});
|
||||
220
mobile/app/(tabs)/settings.tsx
Normal file
220
mobile/app/(tabs)/settings.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Switch,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useAuthContext } from '../../lib/AuthContext';
|
||||
import Constants from 'expo-constants';
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const { user, logout } = useAuthContext();
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [notifications, setNotifications] = useState(true);
|
||||
const [language, setLanguage] = useState<'cs' | 'en'>('cs');
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Odhlaseni',
|
||||
'Opravdu se chcete odhlasit?',
|
||||
[
|
||||
{ text: 'Zrusit', style: 'cancel' },
|
||||
{
|
||||
text: 'Odhlasit',
|
||||
style: 'destructive',
|
||||
onPress: logout,
|
||||
},
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
const renderSection = (title: string, children: React.ReactNode) => (
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>{title}</Text>
|
||||
<View style={styles.sectionContent}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderRow = (
|
||||
icon: string,
|
||||
label: string,
|
||||
right?: React.ReactNode,
|
||||
onPress?: () => void,
|
||||
) => (
|
||||
<TouchableOpacity
|
||||
style={styles.row}
|
||||
onPress={onPress}
|
||||
disabled={!onPress && !right}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<View style={styles.rowLeft}>
|
||||
<Ionicons name={icon as any} size={20} color="#64748B" />
|
||||
<Text style={styles.rowLabel}>{label}</Text>
|
||||
</View>
|
||||
{right || (onPress && <Ionicons name="chevron-forward" size={18} color="#CBD5E1" />)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
{/* User card */}
|
||||
<View style={styles.userCard}>
|
||||
<View style={styles.userAvatar}>
|
||||
<Text style={styles.userAvatarText}>
|
||||
{(user?.name || 'U')[0].toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.userInfo}>
|
||||
<Text style={styles.userName}>{user?.name || 'Uzivatel'}</Text>
|
||||
<Text style={styles.userEmail}>{user?.email || ''}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{renderSection('Predvolby', (
|
||||
<>
|
||||
{renderRow(
|
||||
'moon-outline',
|
||||
'Tmavy rezim',
|
||||
<Switch
|
||||
value={darkMode}
|
||||
onValueChange={setDarkMode}
|
||||
trackColor={{ false: '#E2E8F0', true: '#3B82F6' }}
|
||||
/>,
|
||||
)}
|
||||
{renderRow(
|
||||
'notifications-outline',
|
||||
'Oznameni',
|
||||
<Switch
|
||||
value={notifications}
|
||||
onValueChange={setNotifications}
|
||||
trackColor={{ false: '#E2E8F0', true: '#3B82F6' }}
|
||||
/>,
|
||||
)}
|
||||
{renderRow(
|
||||
'language-outline',
|
||||
'Jazyk',
|
||||
<TouchableOpacity
|
||||
style={styles.langToggle}
|
||||
onPress={() => setLanguage(language === 'cs' ? 'en' : 'cs')}
|
||||
>
|
||||
<Text style={styles.langText}>
|
||||
{language === 'cs' ? 'Cestina' : 'English'}
|
||||
</Text>
|
||||
</TouchableOpacity>,
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{renderSection('Ucet', (
|
||||
<>
|
||||
{renderRow('person-outline', 'Upravit profil', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
{renderRow('lock-closed-outline', 'Zmenit heslo', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{renderSection('Informace', (
|
||||
<>
|
||||
{renderRow('information-circle-outline', 'Verze', (
|
||||
<Text style={styles.versionText}>
|
||||
{Constants.expoConfig?.version || '1.0.0'}
|
||||
</Text>
|
||||
))}
|
||||
{renderRow('document-text-outline', 'Podminky pouziti', undefined, () =>
|
||||
Alert.alert('Info', 'Bude k dispozici brzy'),
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
|
||||
{/* Logout */}
|
||||
<TouchableOpacity style={styles.logoutBtn} onPress={handleLogout}>
|
||||
<Ionicons name="log-out-outline" size={20} color="#EF4444" />
|
||||
<Text style={styles.logoutText}>Odhlasit se</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={{ height: 40 }} />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#F8FAFC' },
|
||||
userCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
padding: 20,
|
||||
margin: 12,
|
||||
borderRadius: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 3,
|
||||
elevation: 2,
|
||||
},
|
||||
userAvatar: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#3B82F6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
userAvatarText: { color: '#fff', fontSize: 22, fontWeight: '700' },
|
||||
userInfo: { marginLeft: 16, flex: 1 },
|
||||
userName: { fontSize: 18, fontWeight: '600', color: '#1E293B' },
|
||||
userEmail: { fontSize: 14, color: '#64748B', marginTop: 2 },
|
||||
section: { marginTop: 12, marginHorizontal: 12 },
|
||||
sectionTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#64748B',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 6,
|
||||
marginLeft: 4,
|
||||
},
|
||||
sectionContent: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F1F5F9',
|
||||
},
|
||||
rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
rowLabel: { fontSize: 15, color: '#1E293B' },
|
||||
langToggle: {
|
||||
backgroundColor: '#F1F5F9',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
},
|
||||
langText: { fontSize: 13, color: '#3B82F6', fontWeight: '600' },
|
||||
versionText: { fontSize: 14, color: '#94A3B8' },
|
||||
logoutBtn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
marginTop: 24,
|
||||
marginHorizontal: 12,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: '#FEF2F2',
|
||||
borderRadius: 12,
|
||||
},
|
||||
logoutText: { color: '#EF4444', fontSize: 16, fontWeight: '600' },
|
||||
});
|
||||
Reference in New Issue
Block a user