init project

mobile/app/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, FlatList, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useFiles } from '../hooks/useFiles';
+import { FileCard } from '../components/FileCard';
+import { FileItem } from '../types';
+
+type RootStackParamList = {
+  Home: undefined;
+  Upload: undefined;
+  Scan: undefined;
+  Search: undefined;
+};
+
+type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
+
+export function HomeScreen() {
+  const navigation = useNavigation<NavigationProp>();
+  const { data, isLoading, error } = useFiles();
+
+  const renderItem = ({ item }: { item: FileItem }) => (
+    <FileCard
+      file={item}
+      onPress={(file) => console.log('File pressed:', file.id)}
+    />
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <Text>Chargement...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text>Erreur de chargement</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={data?.data || []}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={styles.list}
+      />
+
+      <View style={styles.bottomNav}>
+        <TouchableOpacity
+          style={styles.navButton}
+          onPress={() => navigation.navigate('Upload')}
+        >
+          <Text style={styles.navText}>Upload</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.navButton}
+          onPress={() => navigation.navigate('Scan')}
+        >
+          <Text style={styles.navText}>Scan</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.navButton}
+          onPress={() => navigation.navigate('Search')}
+        >
+          <Text style={styles.navText}>Recherche</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  list: {
+    padding: 16,
+  },
+  bottomNav: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 12,
+    backgroundColor: '#fff',
+    borderTopWidth: 1,
+    borderTopColor: '#e0e0e0',
+  },
+  navButton: {
+    padding: 8,
+  },
+  navText: {
+    fontSize: 16,
+    color: '#1976D2',
+  },
+});

mobile/app/scan.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import * as ImagePicker from 'react-native-image-picker';
+
+export function ScanScreen() {
+  const takePhoto = async () => {
+    try {
+      const result = await ImagePicker.launchCamera({
+        mediaType: 'photo',
+        quality: 1,
+      });
+
+      if (result.didCancel) return;
+      if (result.errorCode) {
+        Alert.alert('Erreur', result.errorMessage || "Impossible d'accéder à la caméra");
+        return;
+      }
+
+      if (result.assets && result.assets[0]) {
+        console.log('Photo taken:', result.assets[0]);
+        // TODO: Send to backend for OCR
+      }
+    } catch (err) {
+      Alert.alert('Erreur', "Impossible d'accéder à la caméra");
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Scanner un document</Text>
+      <Text style={styles.description}>
+        Prenez une photo de votre document pour extraire le texte via OCR
+      </Text>
+
+      <TouchableOpacity style={styles.scanButton} onPress={takePhoto}>
+        <Text style={styles.scanText}>Prendre une photo</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  scanButton: {
+    backgroundColor: '#4CAF50',
+    padding: 16,
+    borderRadius: 8,
+    width: '100%',
+    alignItems: 'center',
+  },
+  scanText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

mobile/app/search.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { View, TextInput, FlatList, StyleSheet, Text } from 'react-native';
+import { useSearch } from '../hooks/useSearch';
+import { FileCard } from '../components/FileCard';
+import { FileItem } from '../types';
+
+export function SearchScreen() {
+  const [query, setQuery] = useState('');
+  const { data, isLoading } = useSearch(query);
+
+  const renderItem = ({ item }: { item: FileItem }) => (
+    <FileCard
+      file={item}
+      onPress={(file) => console.log('File pressed:', file.id)}
+    />
+  );
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={styles.input}
+        placeholder="Rechercher un fichier..."
+        value={query}
+        onChangeText={setQuery}
+        autoCapitalize="none"
+      />
+
+      {isLoading && <Text style={styles.loading}>Recherche en cours...</Text>}
+
+      <FlatList
+        data={data?.data || []}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={styles.list}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  input: {
+    backgroundColor: '#fff',
+    padding: 12,
+    margin: 16,
+    borderRadius: 8,
+    fontSize: 16,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  loading: {
+    textAlign: 'center',
+    color: '#666',
+    marginBottom: 8,
+  },
+  list: {
+    padding: 16,
+  },
+});

mobile/app/upload.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import * as ImagePicker from 'react-native-image-picker';
+import { useUpload } from '../hooks/useUpload';
+import { UploadProgress } from '../components/UploadProgress';
+
+export function UploadScreen() {
+  const [uploadStatus, setUploadStatus] = useState<'idle' | 'uploading' | 'processing' | 'success' | 'error'>('idle');
+  const [error, setError] = useState<string>();
+  const upload = useUpload();
+
+  const pickImage = async () => {
+    try {
+      const result = await ImagePicker.launchImageLibrary({
+        mediaType: 'photo',
+        quality: 1,
+      });
+
+      if (result.didCancel) return;
+      if (result.errorCode) {
+        Alert.alert('Erreur', result.errorMessage || "Impossible d'accéder à la galerie");
+        return;
+      }
+
+      if (result.assets && result.assets[0]) {
+        setUploadStatus('uploading');
+        const asset = result.assets[0];
+        const file = {
+          uri: asset.uri,
+          type: asset.type || 'image/jpeg',
+          name: asset.fileName || 'photo.jpg',
+        };
+
+        try {
+          const response = await upload.mutateAsync(file as any);
+          setUploadStatus('processing');
+          console.log('Upload success:', response);
+          setUploadStatus('success');
+        } catch (err) {
+          setUploadStatus('error');
+          setError(err instanceof Error ? err.message : 'Upload failed');
+        }
+      }
+    } catch (err) {
+      Alert.alert('Erreur', "Impossible d'accéder à la galerie");
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <UploadProgress status={uploadStatus} error={error} />
+
+      <TouchableOpacity style={styles.uploadButton} onPress={pickImage}>
+        <Text style={styles.uploadText}>Sélectionner une photo</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#fff',
+  },
+  uploadButton: {
+    backgroundColor: '#1976D2',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  uploadText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});