tuning the frontend

frontend/src/App.jsx

@@ -1,123 +1,3 @@
-// import React, { useState, useEffect } from 'react';
-// import Header from './components/Header';
-// import JobForm from './components/JobForm';
-// import JobStatusCard from './components/JobStatusCard';
-// import ResultsDisplay from './components/ResultsDisplay';
-// import LoadingSkeleton from './components/LoadingSkeleton';
-// import HistoryPanel from './components/HistoryPanel';
-// import { createJob, getJob } from './services/api';
-// import { XCircle } from 'lucide-react'; 
-
-// function App() {
-//   const [job, setJob] = useState(null);
-//   const [isLoading, setIsLoading] = useState(false); 
-//   const [isPolling, setIsPolling] = useState(false); 
-//   const [error, setError] = useState(null);
-
-//   const handleAnalysisRequest = async (ticker) => {
-//     setIsLoading(true);
-//     setIsPolling(true);
-//     setError(null);
-//     setJob(null);
-//     try {
-//       const response = await createJob(ticker);
-//       setJob(response.data);
-//     } catch (err) {
-//       setError('Failed to create job. Please check the API server and try again.');
-//       setIsLoading(false);
-//       setIsPolling(false);
-//     }
-//   };
-
-//   const handleSelectHistoryJob = (historyJob) => {
-//     setIsLoading(false);
-//     setIsPolling(false);
-//     setError(null);
-//     setJob(historyJob);
-//   }
-
-//   useEffect(() => {
-//     if (!job?.id || !isPolling) return;
-
-//     if (job.status !== 'PENDING') {
-//       setIsLoading(false);
-//     }
-
-//     const intervalId = setInterval(async () => {
-//       try {
-//         const response = await getJob(job.id);
-//         const updatedJob = response.data;
-//         setJob(updatedJob);
-
-//         if (updatedJob.status === 'SUCCESS' || updatedJob.status === 'FAILED') {
-//           clearInterval(intervalId);
-//           setIsPolling(false);
-//         }
-//       } catch (err) {
-//         setError('Failed to poll job status.');
-//         clearInterval(intervalId);
-//         setIsPolling(false);
-//       }
-//     }, 3000);
-
-//     return () => clearInterval(intervalId);
-//   }, [job, isPolling]);
-
-//   return (
-//     <div className="min-h-screen bg-gray-900 text-white font-sans">
-//       <Header />
-//       <HistoryPanel onSelectJob={handleSelectHistoryJob} />
-      
-//       <main className="container mx-auto p-4 md:p-8">
-//         <div className="max-w-4xl mx-auto">
-//           <p className="text-lg text-gray-400 mb-8 text-center">
-//             Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
-//           </p>
-          
-//           <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
-          
-//           {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
-          
-//           {isLoading && !job && <LoadingSkeleton />}
-          
-//           {job && !isLoading && <JobStatusCard job={job} />}
-
-//           {job?.status === 'SUCCESS' && job.result && (
-//             <ResultsDisplay result={job.result} />
-//           )}
-
-//           {job?.status === 'FAILED' && job.result?.error && (
-//              <div className="mt-8 p-6 bg-gray-800/30 border border-red-500/30 rounded-lg text-center animate-fade-in">
-//                <XCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
-//                <h2 className="text-2xl font-bold text-red-300 mb-2">Analysis Failed</h2>
-//                <p className="text-gray-400 max-w-lg mx-auto">
-//                  We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
-//                  This usually means the stock symbol is incorrect or not listed.
-//                </p>
-//                <p className="text-xs text-gray-500 mt-4">Please double-check the ticker (e.g., RELIANCE.NS) and try again.</p>
-               
-//                <details className="mt-6 text-left w-full max-w-lg mx-auto">
-//                  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
-//                  <pre className="mt-2 bg-gray-900 p-4 rounded-md text-gray-400 text-xs whitespace-pre-wrap font-mono">
-//                    {job.result.error}
-//                  </pre>
-//                </details>
-//              </div>
-//           )}
-//         </div>
-//       </main>
-//     </div>
-//   );
-// }
-
-// export default App;
-
-
-
-
-
-
-
 import React, { useState, useEffect } from 'react';
 import Header from './components/Header';
 import JobForm from './components/JobForm';
@@ -190,16 +70,10 @@ function App() {
       
       <main className="container mx-auto p-4 md:p-8">
         <div className="max-w-4xl mx-auto">
-          <p className="text-lg text-gray-400 mb-4 text-center">
+          <p className="text-lg text-gray-400 mb-8 text-center">
             Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
           </p>
           
-          {/* --- NEW, SIMPLE TEXT EXAMPLE LINE --- */}
-          <p className="text-sm text-gray-500 text-center mb-8">
-            e.g., RELIANCE.NS, TCS.NS, INFY.NS, HDFCBANK.NS
-          </p>
-          {/* --- END NEW LINE --- */}
-          
           <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
           
           {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
@@ -220,7 +94,7 @@ function App() {
                  We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
                  This usually means the stock symbol is incorrect or not listed.
                </p>
-               <p className="text-xs text-gray-500 mt-4">Please double-check the ticker and try again.</p>
+               <p className="text-xs text-gray-500 mt-4">Please double-check the ticker (e.g., RELIANCE.NS) and try again.</p>
                
                <details className="mt-6 text-left w-full max-w-lg mx-auto">
                  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
@@ -236,4 +110,9 @@ function App() {
   );
 }
 
-export default App;
+export default App;
+
+
+
+
+