File size: 4,053 Bytes
7781557 3bb94b1 7781557 3bb94b1 7781557 3bb94b1 7781557 3bb94b1 7781557 3bb94b1 c63a1e8 3bb94b1 3e39856 3bb94b1 7781557 902845d 7781557 902845d 7781557 3bb94b1 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 ChatApi from './ChatApi';
import TwoColumnLayout from './layout/TwoColumn';
import OpportunityForm from './OpportunityForm';
import { Button } from './ui/button';
const Opportunities = () => {
const [opportunities, setOpportunities] = useState([]);
const [selectedOpportunity, setSelectedOpportunity] = useState(null);
const [token, setToken] = useState(null);
const [research, setResearch] = useState(null);
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 => {
console.log('data.records*******', data.success && data.data.records?.length > 0)
if (data.success && data.data.records?.length > 0) {
setOpportunities(data.data.records);
}
setToken(storedToken);
})
console.log('storedToken', storedToken)
}, [])
const handleLogout = () => {
localStorage.removeItem('token');
location = '/'
};
const customerResearch = (opportunity) => {
fetch('/api/customer_insights', {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: opportunity['opportunityName']
})
}).then(response => response.json())
.then(data => {
console.log('data*******', data)
})
}
return (
<>
<TwoColumnLayout tabs={['Opportunities', 'New Opportunity']}>
<ChatApi />
<div className="flex flex-col h-[calc(89vh-7px)]">
{opportunities.map((opportunity, id) => (
<Button key={id} onClick={() => setSelectedOpportunity(opportunity)} style={{'margin':'5px'}}>{opportunity.opportunityName}</Button>
))}
<div className="flex-1 overflow-y-auto p-4 space-y-4 h-[80vh]">
{Object.keys(selectedOpportunity || {}).map((key, index) => (
<div key={key+'-'+index}>{key}: {selectedOpportunity[key]}</div>
))}
{research && <div>{research}</div>}
</div>
<div className="p-4 bg-white border-t">
<Button style={{'marginRight':'10px'}} onClick={() => {customerResearch(selectedOpportunity); setResearch(null)}}>Prism</Button>
<Button style={{'marginRight':'10px'}}>Scout</Button>
<div style={{'float':'right'}}><Upload token={token} /></div>
</div>
</div>
<OpportunityForm/>
</TwoColumnLayout>
{/*
<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>*/}
</>
)
}
export default Opportunities; |