From fcf9e70d54bd737d2dea848d25314120f37db503 Mon Sep 17 00:00:00 2001 From: soryu Date: Sun, 18 Jan 2026 02:58:27 +0000 Subject: [WIP] Heartbeat checkpoint - 2026-01-18 02:58:27 UTC --- apps/mobile/app/(auth)/_layout.tsx | 31 +++ apps/mobile/app/(auth)/login.tsx | 384 ++++++++++++++++++++++++++++++++++++ apps/mobile/app/(tabs)/_layout.tsx | 58 ++++++ apps/mobile/app/(tabs)/index.tsx | 365 ++++++++++++++++++++++++++++++++++ apps/mobile/app/(tabs)/settings.tsx | 248 +++++++++++++++++++++++ apps/mobile/app/(tabs)/tasks.tsx | 231 ++++++++++++++++++++++ apps/mobile/app/_layout.tsx | 111 +++++++++++ apps/mobile/app/task/[id].tsx | 259 ++++++++++++++++++++++++ apps/mobile/app/task/_layout.tsx | 5 + 9 files changed, 1692 insertions(+) create mode 100644 apps/mobile/app/(auth)/_layout.tsx create mode 100644 apps/mobile/app/(auth)/login.tsx create mode 100644 apps/mobile/app/(tabs)/_layout.tsx create mode 100644 apps/mobile/app/(tabs)/index.tsx create mode 100644 apps/mobile/app/(tabs)/settings.tsx create mode 100644 apps/mobile/app/(tabs)/tasks.tsx create mode 100644 apps/mobile/app/_layout.tsx create mode 100644 apps/mobile/app/task/[id].tsx create mode 100644 apps/mobile/app/task/_layout.tsx (limited to 'apps/mobile/app') diff --git a/apps/mobile/app/(auth)/_layout.tsx b/apps/mobile/app/(auth)/_layout.tsx new file mode 100644 index 0000000..1def062 --- /dev/null +++ b/apps/mobile/app/(auth)/_layout.tsx @@ -0,0 +1,31 @@ +import { Stack } from 'expo-router'; +import { useColorScheme } from 'react-native'; +import { Colors } from '../../constants/Colors'; + +/** + * Auth group layout + * Provides stack navigation for authentication screens + */ +export default function AuthLayout() { + const colorScheme = useColorScheme() ?? 'dark'; + const colors = Colors[colorScheme]; + + return ( + + + + ); +} diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx new file mode 100644 index 0000000..7e0f14f --- /dev/null +++ b/apps/mobile/app/(auth)/login.tsx @@ -0,0 +1,384 @@ +import React, { useState, useCallback, useRef } from 'react'; +import { + View, + Text, + TextInput, + TouchableOpacity, + StyleSheet, + KeyboardAvoidingView, + Platform, + ScrollView, + ActivityIndicator, + Linking, + type TextInput as TextInputType, +} from 'react-native'; +import { useColorScheme } from 'react-native'; +import { router } from 'expo-router'; +import { Colors } from '../../constants/Colors'; +import { useAuthStore } from '../../stores/authStore'; +import { config } from '../../lib/config'; + +/** + * Email validation regex + */ +const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +/** + * Login screen component + * Handles user authentication with email and password + */ +export default function LoginScreen() { + const colorScheme = useColorScheme() ?? 'dark'; + const colors = Colors[colorScheme]; + + // Form state + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [emailError, setEmailError] = useState(null); + const [passwordError, setPasswordError] = useState(null); + + // Refs for input focus + const passwordInputRef = useRef(null); + + // Auth store + const signIn = useAuthStore((state) => state.signIn); + const isLoading = useAuthStore((state) => state.isLoading); + const authError = useAuthStore((state) => state.error); + const clearError = useAuthStore((state) => state.clearError); + + /** + * Validate email format + */ + const validateEmail = useCallback((value: string): boolean => { + if (!value.trim()) { + setEmailError('Email is required'); + return false; + } + if (!EMAIL_REGEX.test(value.trim())) { + setEmailError('Please enter a valid email address'); + return false; + } + setEmailError(null); + return true; + }, []); + + /** + * Validate password + */ + const validatePassword = useCallback((value: string): boolean => { + if (!value) { + setPasswordError('Password is required'); + return false; + } + if (value.length < 6) { + setPasswordError('Password must be at least 6 characters'); + return false; + } + setPasswordError(null); + return true; + }, []); + + /** + * Handle email change + */ + const handleEmailChange = useCallback( + (value: string) => { + setEmail(value); + if (emailError) { + setEmailError(null); + } + if (authError) { + clearError(); + } + }, + [emailError, authError, clearError] + ); + + /** + * Handle password change + */ + const handlePasswordChange = useCallback( + (value: string) => { + setPassword(value); + if (passwordError) { + setPasswordError(null); + } + if (authError) { + clearError(); + } + }, + [passwordError, authError, clearError] + ); + + /** + * Handle login button press + */ + const handleLogin = useCallback(async () => { + // Clear previous errors + clearError(); + + // Validate inputs + const isEmailValid = validateEmail(email); + const isPasswordValid = validatePassword(password); + + if (!isEmailValid || !isPasswordValid) { + return; + } + + // Attempt sign in + const success = await signIn(email, password); + + if (success) { + // Navigate to main app + router.replace('/(tabs)'); + } + }, [email, password, signIn, validateEmail, validatePassword, clearError]); + + /** + * Handle forgot password link press + */ + const handleForgotPassword = useCallback(() => { + Linking.openURL(config.forgotPasswordUrl); + }, []); + + /** + * Handle email submit (move focus to password) + */ + const handleEmailSubmit = useCallback(() => { + passwordInputRef.current?.focus(); + }, []); + + /** + * Get combined error message + */ + const displayError = authError || emailError || passwordError; + + return ( + + + + Welcome to Makima + + Sign in to continue + + + + + {/* Email Input */} + + Email + + {emailError && ( + {emailError} + )} + + + {/* Password Input */} + + Password + + {passwordError && ( + {passwordError} + )} + + + {/* Auth Error */} + {authError && ( + + {authError} + + )} + + {/* Login Button */} + + {isLoading ? ( + + ) : ( + + Sign In + + )} + + + {/* Forgot Password Link */} + + + Forgot Password? + + + + + {/* Footer */} + + + By signing in, you agree to our{' '} + Linking.openURL(config.termsOfServiceUrl)} + > + Terms of Service + + {' and '} + Linking.openURL(config.privacyPolicyUrl)} + > + Privacy Policy + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + scrollContent: { + flexGrow: 1, + justifyContent: 'center', + paddingHorizontal: 24, + paddingVertical: 40, + }, + headerContainer: { + alignItems: 'center', + marginBottom: 40, + }, + title: { + fontSize: 28, + fontWeight: 'bold', + marginBottom: 8, + }, + subtitle: { + fontSize: 16, + }, + formContainer: { + width: '100%', + }, + inputContainer: { + marginBottom: 20, + }, + label: { + fontSize: 14, + fontWeight: '600', + marginBottom: 8, + }, + input: { + height: 50, + borderWidth: 1, + borderRadius: 12, + paddingHorizontal: 16, + fontSize: 16, + }, + fieldError: { + fontSize: 12, + marginTop: 4, + }, + errorContainer: { + padding: 12, + borderRadius: 8, + marginBottom: 20, + }, + errorText: { + fontSize: 14, + textAlign: 'center', + }, + button: { + height: 50, + borderRadius: 12, + justifyContent: 'center', + alignItems: 'center', + marginTop: 8, + }, + buttonText: { + fontSize: 16, + fontWeight: '600', + }, + forgotPasswordContainer: { + alignItems: 'center', + marginTop: 20, + }, + forgotPasswordText: { + fontSize: 14, + }, + footerContainer: { + marginTop: 40, + alignItems: 'center', + }, + footerText: { + fontSize: 12, + textAlign: 'center', + lineHeight: 18, + }, + linkText: { + textDecorationLine: 'underline', + }, +}); diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx new file mode 100644 index 0000000..96c1a2d --- /dev/null +++ b/apps/mobile/app/(tabs)/_layout.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Tabs } from 'expo-router'; +import { useColorScheme } from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { Colors } from '../../constants/Colors'; + +export default function TabsLayout() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + + return ( + + ( + + ), + }} + /> + ( + + ), + }} + /> + ( + + ), + }} + /> + + ); +} diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx new file mode 100644 index 0000000..96b1a8f --- /dev/null +++ b/apps/mobile/app/(tabs)/index.tsx @@ -0,0 +1,365 @@ +import React from 'react'; +import { + View, + Text, + StyleSheet, + ScrollView, + TouchableOpacity, + useColorScheme, + RefreshControl, +} from 'react-native'; +import { useRouter } from 'expo-router'; +import { Ionicons } from '@expo/vector-icons'; +import { Colors, TaskStatusColors } from '../../constants/Colors'; +import { useTasks, getTaskCounts } from '../../hooks/useTasks'; +import { usePendingQuestions } from '../../hooks/useQuestions'; +import { TaskStatusBadge } from '../../components/TaskStatusBadge'; +import type { TaskSummary } from '../../lib/api'; + +interface StatCardProps { + title: string; + value: number; + icon: keyof typeof Ionicons.glyphMap; + color: string; + onPress?: () => void; +} + +function StatCard({ title, value, icon, color, onPress }: StatCardProps) { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + + return ( + + + + + {value} + + {title} + + + ); +} + +interface QuickTaskItemProps { + task: TaskSummary; + onPress: () => void; +} + +function QuickTaskItem({ task, onPress }: QuickTaskItemProps) { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + + return ( + + + + + {task.name} + + {task.progressSummary && ( + + {task.progressSummary} + + )} + + + + ); +} + +export default function DashboardScreen() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + const router = useRouter(); + + const { + data: tasks, + isLoading: isLoadingTasks, + refetch: refetchTasks, + isRefetching: isRefetchingTasks, + } = useTasks(); + + const { + data: questions, + isLoading: isLoadingQuestions, + refetch: refetchQuestions, + isRefetching: isRefetchingQuestions, + } = usePendingQuestions(); + + const isRefreshing = isRefetchingTasks || isRefetchingQuestions; + + const handleRefresh = () => { + refetchTasks(); + refetchQuestions(); + }; + + // Calculate counts + const counts = tasks ? getTaskCounts(tasks) : null; + const questionCount = questions?.length ?? 0; + + // Get running tasks for quick access + const runningTasks = tasks?.filter((t) => + ['running', 'initializing', 'starting'].includes(t.status) + ) ?? []; + + // Get tasks needing attention (blocked, paused, or with questions) + const attentionTasks = tasks?.filter((t) => + ['blocked', 'paused'].includes(t.status) + ) ?? []; + + return ( + + } + > + {/* Stats Grid */} + + router.push('/(tabs)/tasks')} + /> + 0 ? () => router.push('/(tabs)/tasks') : undefined} + /> + router.push('/(tabs)/tasks')} + /> + router.push('/(tabs)/tasks') : undefined} + /> + + + {/* Pending Questions Alert */} + {questionCount > 0 && ( + router.push('/(tabs)/tasks')} + activeOpacity={0.7} + > + + + + {questionCount} Question{questionCount !== 1 ? 's' : ''} Waiting + + + Tap to review and respond + + + + + )} + + {/* Running Tasks */} + {runningTasks.length > 0 && ( + + + + Running Tasks + + router.push('/(tabs)/tasks')}> + + See All + + + + + {runningTasks.slice(0, 3).map((task) => ( + router.push(`/task/${task.id}`)} + /> + ))} + + + )} + + {/* Needs Attention */} + {attentionTasks.length > 0 && ( + + + + Needs Attention + + router.push('/(tabs)/tasks')}> + + See All + + + + + {attentionTasks.slice(0, 3).map((task) => ( + router.push(`/task/${task.id}`)} + /> + ))} + + + )} + + {/* Empty State */} + {!isLoadingTasks && (!tasks || tasks.length === 0) && ( + + + + No tasks yet + + + Tasks created from contracts will appear here + + + )} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + content: { + padding: 16, + gap: 20, + }, + statsGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: 12, + }, + statCard: { + flex: 1, + minWidth: '45%', + padding: 16, + borderRadius: 12, + alignItems: 'center', + gap: 8, + }, + iconContainer: { + width: 48, + height: 48, + borderRadius: 24, + alignItems: 'center', + justifyContent: 'center', + }, + statValue: { + fontSize: 28, + fontWeight: '700', + }, + statTitle: { + fontSize: 14, + fontWeight: '500', + }, + alertBanner: { + flexDirection: 'row', + alignItems: 'center', + padding: 16, + borderRadius: 12, + gap: 12, + }, + alertContent: { + flex: 1, + }, + alertTitle: { + fontSize: 16, + fontWeight: '600', + }, + alertSubtitle: { + fontSize: 13, + marginTop: 2, + }, + section: { + gap: 12, + }, + sectionHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + sectionTitle: { + fontSize: 18, + fontWeight: '600', + }, + seeAllButton: { + fontSize: 14, + fontWeight: '500', + }, + taskList: { + gap: 8, + }, + quickTaskItem: { + flexDirection: 'row', + alignItems: 'center', + padding: 12, + borderRadius: 10, + gap: 12, + }, + quickTaskContent: { + flex: 1, + gap: 2, + }, + quickTaskName: { + fontSize: 15, + fontWeight: '500', + }, + quickTaskSummary: { + fontSize: 13, + }, + emptyState: { + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 48, + gap: 12, + }, + emptyTitle: { + fontSize: 18, + fontWeight: '600', + }, + emptyMessage: { + fontSize: 14, + textAlign: 'center', + }, +}); diff --git a/apps/mobile/app/(tabs)/settings.tsx b/apps/mobile/app/(tabs)/settings.tsx new file mode 100644 index 0000000..f90e86c --- /dev/null +++ b/apps/mobile/app/(tabs)/settings.tsx @@ -0,0 +1,248 @@ +import React, { useCallback } from 'react'; +import { + View, + Text, + StyleSheet, + ScrollView, + TouchableOpacity, + useColorScheme, + Alert, + Linking, +} from 'react-native'; +import { Ionicons } from '@expo/vector-icons'; +import { Colors } from '../../constants/Colors'; +import { getEnvironment } from '../../lib/api'; +import { useAuthStore } from '../../stores/authStore'; +import { config } from '../../lib/config'; + +interface SettingsRowProps { + icon: keyof typeof Ionicons.glyphMap; + title: string; + value?: string; + onPress?: () => void; + showChevron?: boolean; +} + +function SettingsRow({ + icon, + title, + value, + onPress, + showChevron = true, +}: SettingsRowProps) { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + + const content = ( + + + + + {title} + {value && ( + + {value} + + )} + {showChevron && onPress && ( + + )} + + ); + + if (onPress) { + return ( + + {content} + + ); + } + + return content; +} + +export default function SettingsScreen() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + const signOut = useAuthStore((state) => state.signOut); + const isLoading = useAuthStore((state) => state.isLoading); + + const environment = getEnvironment(); + + const handleSignOut = useCallback(() => { + Alert.alert( + 'Sign Out', + 'Are you sure you want to sign out?', + [ + { text: 'Cancel', style: 'cancel' }, + { + text: 'Sign Out', + style: 'destructive', + onPress: () => signOut(), + }, + ] + ); + }, [signOut]); + + const handleOpenUrl = useCallback((url: string) => { + Linking.openURL(url); + }, []); + + return ( + + {/* Account Section */} + + + Account + + + {}} + /> + {}} + /> + {}} + /> + + + + {/* App Section */} + + + App + + + + + + + + {/* Support Section */} + + + Support + + + handleOpenUrl(config.supportUrl)} + /> + handleOpenUrl(config.termsOfServiceUrl)} + /> + handleOpenUrl(config.privacyPolicyUrl)} + /> + + + + {/* Sign Out */} + + + + Sign Out + + + + {/* Version */} + + Makima Mobile v1.0.0 + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + content: { + padding: 16, + gap: 24, + }, + section: { + gap: 8, + }, + sectionTitle: { + fontSize: 13, + fontWeight: '600', + textTransform: 'uppercase', + letterSpacing: 0.5, + marginLeft: 16, + }, + card: { + borderRadius: 12, + overflow: 'hidden', + }, + row: { + flexDirection: 'row', + alignItems: 'center', + padding: 12, + paddingHorizontal: 16, + borderBottomWidth: StyleSheet.hairlineWidth, + gap: 12, + }, + iconContainer: { + width: 32, + height: 32, + borderRadius: 8, + alignItems: 'center', + justifyContent: 'center', + }, + rowTitle: { + flex: 1, + fontSize: 16, + }, + rowValue: { + fontSize: 14, + }, + signOutButton: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + padding: 16, + borderRadius: 12, + gap: 8, + }, + signOutText: { + fontSize: 16, + fontWeight: '600', + color: '#ef4444', + }, + version: { + textAlign: 'center', + fontSize: 12, + marginTop: 8, + }, +}); diff --git a/apps/mobile/app/(tabs)/tasks.tsx b/apps/mobile/app/(tabs)/tasks.tsx new file mode 100644 index 0000000..5aac710 --- /dev/null +++ b/apps/mobile/app/(tabs)/tasks.tsx @@ -0,0 +1,231 @@ +import React, { useState, useCallback, useMemo } from 'react'; +import { + View, + Text, + StyleSheet, + SectionList, + RefreshControl, + useColorScheme, + TextInput, + TouchableOpacity, +} from 'react-native'; +import { useRouter } from 'expo-router'; +import { Ionicons } from '@expo/vector-icons'; +import { Colors } from '../../constants/Colors'; +import { useTasks, groupTasksByStatus } from '../../hooks/useTasks'; +import { TaskListItem } from '../../components/TaskListItem'; +import { TaskListSkeleton } from '../../components/TaskListSkeleton'; +import { EmptyState } from '../../components/EmptyState'; +import type { TaskSummary } from '../../lib/api'; + +interface Section { + title: string; + data: TaskSummary[]; +} + +export default function TasksScreen() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + const router = useRouter(); + const [searchQuery, setSearchQuery] = useState(''); + + const { data: tasks, isLoading, isError, refetch, isRefetching } = useTasks(); + + // Group and filter tasks + const sections = useMemo(() => { + if (!tasks) return []; + + // Filter by search query + const filteredTasks = searchQuery + ? tasks.filter( + (task) => + task.name.toLowerCase().includes(searchQuery.toLowerCase()) || + task.contractName?.toLowerCase().includes(searchQuery.toLowerCase()) + ) + : tasks; + + // Group by status + const groups = groupTasksByStatus(filteredTasks); + + const result: Section[] = []; + + if (groups.running.length > 0) { + result.push({ title: 'Running', data: groups.running }); + } + if (groups.blocked.length > 0) { + result.push({ title: 'Needs Attention', data: groups.blocked }); + } + if (groups.pending.length > 0) { + result.push({ title: 'Pending', data: groups.pending }); + } + if (groups.completed.length > 0) { + result.push({ title: 'Completed', data: groups.completed }); + } + + return result; + }, [tasks, searchQuery]); + + const handleTaskPress = useCallback( + (task: TaskSummary) => { + router.push(`/task/${task.id}`); + }, + [router] + ); + + const handleRefresh = useCallback(() => { + refetch(); + }, [refetch]); + + const clearSearch = useCallback(() => { + setSearchQuery(''); + }, []); + + // Render loading state + if (isLoading) { + return ( + + + + ); + } + + // Render error state + if (isError) { + return ( + + + + ); + } + + // Render empty state + if (!tasks || tasks.length === 0) { + return ( + + + + ); + } + + return ( + + {/* Search bar */} + + + + {searchQuery.length > 0 && ( + + + + )} + + + {/* Task list */} + item.id} + renderItem={({ item }) => ( + + )} + renderSectionHeader={({ section }) => ( + + + {section.title} + + + {section.data.length} + + + )} + refreshControl={ + + } + ListEmptyComponent={ + searchQuery ? ( + + ) : null + } + stickySectionHeadersEnabled + contentContainerStyle={sections.length === 0 ? styles.emptyContent : undefined} + /> + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + searchContainer: { + flexDirection: 'row', + alignItems: 'center', + margin: 16, + paddingHorizontal: 12, + paddingVertical: 10, + borderRadius: 10, + borderWidth: StyleSheet.hairlineWidth, + gap: 8, + }, + searchInput: { + flex: 1, + fontSize: 16, + padding: 0, + }, + sectionHeader: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingHorizontal: 16, + paddingVertical: 8, + }, + sectionTitle: { + fontSize: 14, + fontWeight: '600', + textTransform: 'uppercase', + letterSpacing: 0.5, + }, + sectionCount: { + fontSize: 14, + fontWeight: '500', + }, + emptyContent: { + flex: 1, + }, +}); diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx new file mode 100644 index 0000000..2c030b6 --- /dev/null +++ b/apps/mobile/app/_layout.tsx @@ -0,0 +1,111 @@ +import React, { useEffect } from 'react'; +import { Stack, useRouter, useSegments } from 'expo-router'; +import { StatusBar } from 'expo-status-bar'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { useColorScheme } from 'react-native'; +import { Colors } from '../constants/Colors'; +import { useAuthStore, setupAuthListener } from '../stores/authStore'; +import { LoadingScreen } from '../components/LoadingScreen'; + +// Create a client +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 5000, // Data is fresh for 5 seconds + retry: 2, // Retry failed requests twice + refetchOnWindowFocus: false, // Don't refetch on app focus (mobile) + }, + mutations: { + retry: 1, + }, + }, +}); + +/** + * Auth state handler component + * Redirects users based on authentication status + */ +function AuthStateHandler({ children }: { children: React.ReactNode }) { + const router = useRouter(); + const segments = useSegments(); + const session = useAuthStore((state) => state.session); + const isInitialized = useAuthStore((state) => state.isInitialized); + const initialize = useAuthStore((state) => state.initialize); + + // Initialize auth state on mount + useEffect(() => { + initialize(); + }, [initialize]); + + // Setup auth listener on mount + useEffect(() => { + const unsubscribe = setupAuthListener(); + return unsubscribe; + }, []); + + // Handle auth-based routing + useEffect(() => { + if (!isInitialized) return; + + const inAuthGroup = segments[0] === '(auth)'; + const isAuthenticated = session !== null; + + if (!isAuthenticated && !inAuthGroup) { + // Redirect to login if not authenticated and not already on auth screens + router.replace('/(auth)/login'); + } else if (isAuthenticated && inAuthGroup) { + // Redirect to main app if authenticated and on auth screens + router.replace('/(tabs)'); + } + }, [session, segments, isInitialized, router]); + + // Show loading screen while initializing + if (!isInitialized) { + return ; + } + + return <>{children}; +} + +export default function RootLayout() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + + return ( + + + + + + + + + + + ); +} diff --git a/apps/mobile/app/task/[id].tsx b/apps/mobile/app/task/[id].tsx new file mode 100644 index 0000000..121063a --- /dev/null +++ b/apps/mobile/app/task/[id].tsx @@ -0,0 +1,259 @@ +import React from 'react'; +import { + View, + Text, + StyleSheet, + ScrollView, + useColorScheme, + ActivityIndicator, +} from 'react-native'; +import { useLocalSearchParams, Stack } from 'expo-router'; +import { Colors } from '../../constants/Colors'; +import { useTask } from '../../hooks/useTasks'; +import { TaskStatusBadge } from '../../components/TaskStatusBadge'; +import { EmptyState } from '../../components/EmptyState'; + +export default function TaskDetailScreen() { + const colorScheme = useColorScheme() ?? 'light'; + const colors = Colors[colorScheme]; + const { id } = useLocalSearchParams<{ id: string }>(); + + const { data: task, isLoading, isError } = useTask(id); + + if (isLoading) { + return ( + <> + + + + + + ); + } + + if (isError || !task) { + return ( + <> + + + + + + ); + } + + return ( + <> + + + {/* Header */} + + + + + + {task.name} + + {task.description && ( + + {task.description} + + )} + + + {/* Progress Summary */} + {task.progressSummary && ( + + + Progress + + + {task.progressSummary} + + + )} + + {/* Task Info */} + + + Details + + + + + Created + + + {new Date(task.createdAt).toLocaleString()} + + + + {task.startedAt && ( + + + Started + + + {new Date(task.startedAt).toLocaleString()} + + + )} + + {task.completedAt && ( + + + Completed + + + {new Date(task.completedAt).toLocaleString()} + + + )} + + {task.repositoryUrl && ( + + + Repository + + + {task.repositoryUrl} + + + )} + + + {/* Subtasks */} + {task.subtasks && task.subtasks.length > 0 && ( + + + Subtasks ({task.subtasks.length}) + + {task.subtasks.map((subtask) => ( + + + + {subtask.name} + + + ))} + + )} + + {/* Error message */} + {task.errorMessage && ( + + + Error + + {task.errorMessage} + + )} + + {/* Placeholder for future features */} + + + Task output and controls will be added here + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + centered: { + justifyContent: 'center', + alignItems: 'center', + }, + content: { + padding: 16, + gap: 16, + }, + header: { + padding: 16, + borderRadius: 12, + gap: 8, + }, + headerTop: { + flexDirection: 'row', + justifyContent: 'flex-start', + }, + taskName: { + fontSize: 20, + fontWeight: '700', + }, + description: { + fontSize: 14, + lineHeight: 20, + }, + section: { + padding: 16, + borderRadius: 12, + gap: 12, + }, + sectionTitle: { + fontSize: 16, + fontWeight: '600', + }, + progressText: { + fontSize: 14, + lineHeight: 20, + }, + infoRow: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + infoLabel: { + fontSize: 14, + }, + infoValue: { + fontSize: 14, + fontWeight: '500', + flex: 1, + textAlign: 'right', + marginLeft: 16, + }, + subtaskRow: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingVertical: 4, + }, + subtaskName: { + fontSize: 14, + flex: 1, + }, + errorSection: { + backgroundColor: '#fee2e2', + }, + errorText: { + fontSize: 14, + color: '#991b1b', + lineHeight: 20, + }, + placeholder: { + padding: 32, + alignItems: 'center', + }, + placeholderText: { + fontSize: 14, + textAlign: 'center', + }, +}); diff --git a/apps/mobile/app/task/_layout.tsx b/apps/mobile/app/task/_layout.tsx new file mode 100644 index 0000000..7e40c63 --- /dev/null +++ b/apps/mobile/app/task/_layout.tsx @@ -0,0 +1,5 @@ +import { Stack } from 'expo-router'; + +export default function TaskLayout() { + return ; +} -- cgit v1.2.3