boyinfuture commited on
Commit
683938d
·
1 Parent(s): cfcc195

tuning the frontend

Browse files
Files changed (1) hide show
  1. frontend/src/App.jsx +131 -8
frontend/src/App.jsx CHANGED
@@ -1,3 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  import React, { useState, useEffect } from 'react';
2
  import Header from './components/Header';
3
  import JobForm from './components/JobForm';
@@ -70,10 +192,16 @@ function App() {
70
 
71
  <main className="container mx-auto p-4 md:p-8">
72
  <div className="max-w-4xl mx-auto">
73
- <p className="text-lg text-gray-400 mb-8 text-center">
74
  Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
75
  </p>
76
 
 
 
 
 
 
 
77
  <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
78
 
79
  {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
@@ -94,7 +222,7 @@ function App() {
94
  We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
95
  This usually means the stock symbol is incorrect or not listed.
96
  </p>
97
- <p className="text-xs text-gray-500 mt-4">Please double-check the ticker (e.g., RELIANCE.NS) and try again.</p>
98
 
99
  <details className="mt-6 text-left w-full max-w-lg mx-auto">
100
  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
@@ -110,9 +238,4 @@ function App() {
110
  );
111
  }
112
 
113
- export default App;
114
-
115
-
116
-
117
-
118
-
 
1
+ // import React, { useState, useEffect } from 'react';
2
+ // import Header from './components/Header';
3
+ // import JobForm from './components/JobForm';
4
+ // import JobStatusCard from './components/JobStatusCard';
5
+ // import ResultsDisplay from './components/ResultsDisplay';
6
+ // import LoadingSkeleton from './components/LoadingSkeleton';
7
+ // import HistoryPanel from './components/HistoryPanel';
8
+ // import { createJob, getJob } from './services/api';
9
+ // import { XCircle } from 'lucide-react';
10
+
11
+ // function App() {
12
+ // const [job, setJob] = useState(null);
13
+ // const [isLoading, setIsLoading] = useState(false);
14
+ // const [isPolling, setIsPolling] = useState(false);
15
+ // const [error, setError] = useState(null);
16
+
17
+ // const handleAnalysisRequest = async (ticker) => {
18
+ // setIsLoading(true);
19
+ // setIsPolling(true);
20
+ // setError(null);
21
+ // setJob(null);
22
+ // try {
23
+ // const response = await createJob(ticker);
24
+ // setJob(response.data);
25
+ // } catch (err) {
26
+ // setError('Failed to create job. Please check the API server and try again.');
27
+ // setIsLoading(false);
28
+ // setIsPolling(false);
29
+ // }
30
+ // };
31
+
32
+ // const handleSelectHistoryJob = (historyJob) => {
33
+ // setIsLoading(false);
34
+ // setIsPolling(false);
35
+ // setError(null);
36
+ // setJob(historyJob);
37
+ // }
38
+
39
+ // useEffect(() => {
40
+ // if (!job?.id || !isPolling) return;
41
+
42
+ // if (job.status !== 'PENDING') {
43
+ // setIsLoading(false);
44
+ // }
45
+
46
+ // const intervalId = setInterval(async () => {
47
+ // try {
48
+ // const response = await getJob(job.id);
49
+ // const updatedJob = response.data;
50
+ // setJob(updatedJob);
51
+
52
+ // if (updatedJob.status === 'SUCCESS' || updatedJob.status === 'FAILED') {
53
+ // clearInterval(intervalId);
54
+ // setIsPolling(false);
55
+ // }
56
+ // } catch (err) {
57
+ // setError('Failed to poll job status.');
58
+ // clearInterval(intervalId);
59
+ // setIsPolling(false);
60
+ // }
61
+ // }, 3000);
62
+
63
+ // return () => clearInterval(intervalId);
64
+ // }, [job, isPolling]);
65
+
66
+ // return (
67
+ // <div className="min-h-screen bg-gray-900 text-white font-sans">
68
+ // <Header />
69
+ // <HistoryPanel onSelectJob={handleSelectHistoryJob} />
70
+
71
+ // <main className="container mx-auto p-4 md:p-8">
72
+ // <div className="max-w-4xl mx-auto">
73
+ // <p className="text-lg text-gray-400 mb-8 text-center">
74
+ // Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
75
+ // </p>
76
+
77
+ // <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
78
+
79
+ // {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
80
+
81
+ // {isLoading && !job && <LoadingSkeleton />}
82
+
83
+ // {job && !isLoading && <JobStatusCard job={job} />}
84
+
85
+ // {job?.status === 'SUCCESS' && job.result && (
86
+ // <ResultsDisplay result={job.result} />
87
+ // )}
88
+
89
+ // {job?.status === 'FAILED' && job.result?.error && (
90
+ // <div className="mt-8 p-6 bg-gray-800/30 border border-red-500/30 rounded-lg text-center animate-fade-in">
91
+ // <XCircle className="w-16 h-16 text-red-400 mx-auto mb-4" />
92
+ // <h2 className="text-2xl font-bold text-red-300 mb-2">Analysis Failed</h2>
93
+ // <p className="text-gray-400 max-w-lg mx-auto">
94
+ // We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
95
+ // This usually means the stock symbol is incorrect or not listed.
96
+ // </p>
97
+ // <p className="text-xs text-gray-500 mt-4">Please double-check the ticker (e.g., RELIANCE.NS) and try again.</p>
98
+
99
+ // <details className="mt-6 text-left w-full max-w-lg mx-auto">
100
+ // <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
101
+ // <pre className="mt-2 bg-gray-900 p-4 rounded-md text-gray-400 text-xs whitespace-pre-wrap font-mono">
102
+ // {job.result.error}
103
+ // </pre>
104
+ // </details>
105
+ // </div>
106
+ // )}
107
+ // </div>
108
+ // </main>
109
+ // </div>
110
+ // );
111
+ // }
112
+
113
+ // export default App;
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+
122
+
123
  import React, { useState, useEffect } from 'react';
124
  import Header from './components/Header';
125
  import JobForm from './components/JobForm';
 
192
 
193
  <main className="container mx-auto p-4 md:p-8">
194
  <div className="max-w-4xl mx-auto">
195
+ <p className="text-lg text-gray-400 mb-4 text-center">
196
  Enter an Indian stock ticker to receive a comprehensive, AI-powered analysis.
197
  </p>
198
 
199
+ {/* --- NEW, SIMPLE TEXT EXAMPLE LINE --- */}
200
+ <p className="text-sm text-gray-500 text-center mb-8">
201
+ e.g., RELIANCE.NS, TCS.NS, INFY.NS, HDFCBANK.NS
202
+ </p>
203
+ {/* --- END NEW LINE --- */}
204
+
205
  <JobForm onAnalyze={handleAnalysisRequest} isLoading={isLoading || isPolling} />
206
 
207
  {error && <div className="my-6 p-4 bg-red-900/50 rounded-lg text-red-300 text-center">{error}</div>}
 
222
  We couldn't complete the analysis for <strong className="text-white">{job.ticker}</strong>.
223
  This usually means the stock symbol is incorrect or not listed.
224
  </p>
225
+ <p className="text-xs text-gray-500 mt-4">Please double-check the ticker and try again.</p>
226
 
227
  <details className="mt-6 text-left w-full max-w-lg mx-auto">
228
  <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 focus:outline-none">Show technical details</summary>
 
238
  );
239
  }
240
 
241
+ export default App;