Update src/App.js

src/App.js

@@ -3,7 +3,6 @@ import { Home, Upload, List, ShoppingCart, TrendingUp, Calendar, Trash2, Edit2,
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, BarChart, Bar, PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 
 const StoreContext = createContext();
-
 const StoreProvider = ({ children }) => {
   const [products, setProducts] = useState(() => {
     const stored = localStorage.getItem('grocery-tracker-storage');
@@ -57,7 +56,9 @@ const convertImageToBase64 = (file) => {
   });
 };
 
-const extractTextFromImage = async (file) => {
+const extractTextFromImage = async (file, userApiKey) => {
+  const apiKeyToUse = userApiKey || MISTRAL_API_KEY;
+  
   try {
     const base64Image = await convertImageToBase64(file);
     
@@ -65,7 +66,7 @@ const extractTextFromImage = async (file) => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${MISTRAL_API_KEY}`
+        'Authorization': `Bearer ${apiKeyToUse}`
       },
       body: JSON.stringify({
         model: 'pixtral-12b-2409',
@@ -103,13 +104,15 @@ const extractTextFromImage = async (file) => {
   }
 };
 
-const processReceiptText = async (text) => {
+const processReceiptText = async (text, userApiKey) => {
+  const apiKeyToUse = userApiKey || MISTRAL_API_KEY;
+  
   try {
     const response = await fetch(MISTRAL_API_URL, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${MISTRAL_API_KEY}`
+        'Authorization': `Bearer ${apiKeyToUse}`
       },
       body: JSON.stringify({
         model: 'mistral-large-latest',
@@ -171,6 +174,7 @@ const UploadTab = () => {
   const [extractedText, setExtractedText] = useState('');
   const [processedProducts, setProcessedProducts] = useState([]);
   const [error, setError] = useState(null);
+  const [apiKey, setApiKey] = useState('');
 
   const handleFileSelect = (e) => {
     const selectedFile = e.target.files[0];
@@ -184,8 +188,8 @@ const UploadTab = () => {
   const handleUpload = async () => {
     if (!file) return;
     
-    if (!MISTRAL_API_KEY) {
-      setError('Mistral API key not configured. Please set REACT_APP_MISTRAL_API_KEY environment variable.');
+    if (!apiKey && !MISTRAL_API_KEY) {
+      setError('Please enter your Mistral API key or configure REACT_APP_MISTRAL_API_KEY environment variable.');
       return;
     }
     
@@ -194,11 +198,11 @@ const UploadTab = () => {
     setStep('extracting');
     
     try {
-      const text = await extractTextFromImage(file);
+      const text = await extractTextFromImage(file, apiKey);
       setExtractedText(text);
       setStep('processing');
       
-      const products = await processReceiptText(text);
+      const products = await processReceiptText(text, apiKey);
       setProcessedProducts(products);
       setStep('review');
     } catch (error) {