File size: 3,681 Bytes
7781557 902845d 7781557 0f0f777 7781557 0f0f777 7781557 902845d 7781557 902845d 7781557 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import { useEffect, useState } from 'react';
import Upload from './Upload';
import Chat from './Chat';
const storedToken = localStorage.getItem('token');
const Opportunities = () => {
const [token, setToken] = useState(storedToken);
const [isPopupOpen, setIsPopupOpen] = useState(false); //form popup
const [opportunities, setOpportunities] = useState([]);
useEffect(() => {
const storedToken = localStorage.getItem('token');
console.log('storedToken*******', storedToken)
fetch('/api/opportunities', {
method: 'GET',
headers: {
'Authorization': `Bearer ${storedToken}`,
'Content-Type': 'application/json'
}
}).then(response => response.json())
.then(data => {
/*if (!data.success) {
handleLogout();
return
}*/
console.log('data*******', data, !data.records || data.records.length === 0)
if (!data.records || data.records.length === 0) {
setIsPopupOpen(true);
} else {
console.log('data.records*******', data.records)
setOpportunities(data.records);
}
setToken(storedToken);
})
console.log('storedToken', storedToken)
}, [])
const handleLogout = () => {
localStorage.removeItem('token');
location = '/'
};
return (
<>
<Popup isOpen={isPopupOpen} onClose={() => setIsPopupOpen(false)} token={token} title="No Opportunities">
<p>No opportunities found. Please upload a file to get started.</p>
</Popup>
<div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
<div className="flex-1 overflow-auto p-6">
<h2 style={{ 'fontSize': 'revert' }}>Opportunities</h2>
<table className="border-collapse border border-slate-400" style={{fontSize:"12px"}}>
<thead><tr>{Object.keys(opportunities[0] || []).map((e, index) => <td key={'thead-r-'+index}>{e}</td>)}</tr></thead>
{opportunities.map((opportunity, id) => (
<tbody key={id}>
<tr>
{Object.keys(opportunity).map((key, index) => (
<td key={key+'-'+index} className="border border-slate-400 p-2">{opportunity[key]}</td>
))}
</tr>
</tbody>
))}
</table>
</div>
<div className="border-t p-4 bg-white dark:bg-gray-800">
<div className="flex items-center space-x-2">
<Chat />
<Upload token={token} />
<button onClick={handleLogout} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-400">Logout</button>
</div>
</div>
</div>
</>
)
}
const Popup = ({ isOpen, onClose, title, children, token }) => {
const validate = () => {
//add validation of data
window.location.reload();
}
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Overlay */}
<div
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
/>
{/* Popup Content */}
<div className="relative z-50 w-full max-w-lg bg-white rounded-lg shadow-xl">
{/* Header */}
<div className="flex items-center justify-between p-4 border-b">
<h2 className="text-xl font-semibold">{title}</h2>
</div>
{/* Body */}
<div className="p-4">
{children}
</div>
<div className="flex items-center space-x-2" style={{ 'margin': '10px' }}>
<Upload token={token} validate={validate} />
</div>
</div>
</div>
);
};
export default Opportunities; |