function ProgressBar({ progressPercentage }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[128px] h-[8px] bg-[#EAECF0] rounded-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#7F56D9] rounded-full", style: { width: `${progressPercentage}%` }, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function ProgressBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 25, __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 50, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 75, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: 100, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function Checkbox({ checked, onClick }) { return /*#__PURE__*/ React.createElement("div", { onClick: onClick, className: `w-[20px] h-[20px] rounded-[6px] border-[1px] cursor-pointer ${checked ? 'border-[#7f56d9] bg-[#f9f5ff]' : 'border-[#d0d5dd] bg-transparent'} flex items-center justify-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, checked && /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-[#7f56d9]", __source: { fileName: "", lineNumber: 4, columnNumber: 19 }, __self: this })); } function CheckboxStory() { const dataSeries = [ { id: 1, checked: true }, { id: 2, checked: false } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-x-4 flex", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, dataSeries.map(({ id, checked })=>/*#__PURE__*/ React.createElement(Checkbox, { key: id, checked: checked, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }))); } function Text({ title, subtitle }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-0", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-inter font-normal text-[14px] text-[#101828]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-inter font-normal text-[14px] text-[#475467]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, subtitle)); } function TextStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Text, { title: "Updated Title Example", subtitle: "Updated Subtitle Example", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function EditIcon({ hover }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-[8px] flex items-center justify-center ${hover ? 'bg-[#F9F5FF]' : 'bg-transparent'} text-[#475467]`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M2.39662 15.0964C2.43491 14.7518 2.45405 14.5795 2.50618 14.4185C2.55243 14.2756 2.61778 14.1397 2.70045 14.0143C2.79363 13.873 2.91621 13.7504 3.16136 13.5053L14.1666 2.50005C15.0871 1.57957 16.5795 1.57957 17.4999 2.50005C18.4204 3.42052 18.4204 4.91291 17.4999 5.83338L6.49469 16.8386C6.24954 17.0838 6.12696 17.2063 5.98566 17.2995C5.86029 17.3822 5.72433 17.4475 5.58146 17.4938C5.42042 17.5459 5.24813 17.5651 4.90356 17.6033L2.08325 17.9167L2.39662 15.0964Z", stroke: "#475467", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function EditIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4 flex", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(EditIcon, { hover: false, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(EditIcon, { hover: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function DeleteIcon({ hover = false }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] rounded-[8px] ${hover ? 'bg-[#FEF3F2]' : ''} flex items-center justify-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M13.3333 4.99996V4.33329C13.3333 3.39987 13.3333 2.93316 13.1517 2.57664C12.9919 2.26304 12.7369 2.00807 12.4233 1.84828C12.0668 1.66663 11.6001 1.66663 10.6667 1.66663H9.33333C8.39991 1.66663 7.9332 1.66663 7.57668 1.84828C7.26308 2.00807 7.00811 2.26304 6.84832 2.57664C6.66667 2.93316 6.66667 3.39987 6.66667 4.33329V4.99996M8.33333 9.58329V13.75M11.6667 9.58329V13.75M2.5 4.99996H17.5M15.8333 4.99996V14.3333C15.8333 15.7334 15.8333 16.4335 15.5608 16.9683C15.3212 17.4387 14.9387 17.8211 14.4683 18.0608C13.9335 18.3333 13.2335 18.3333 11.8333 18.3333H8.16667C6.76654 18.3333 6.06647 18.3333 5.53169 18.0608C5.06129 17.8211 4.67883 17.4387 4.43915 16.9683C4.16667 16.4335 4.16667 15.7334 4.16667 14.3333V4.99996", stroke: "#475467", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function DeleteIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DeleteIcon, { __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DeleteIcon, { hover: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function FundingOrganizationsDirectory({ fundingOrganizations }) { const [logos, setLogos] = React.useState({}); React.useEffect(()=>{ async function fetchLogo(url, name) { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url, getText: false }) }); const htmlText = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(htmlText, 'text/html'); const logo = doc.querySelector('img').src; setLogos((prev)=>({ ...prev, [name]: logo })); } fundingOrganizations.forEach((org)=>fetchLogo(org.url, org.name)); }, [ fundingOrganizations ]); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, fundingOrganizations.map((org, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-5", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logos[org.name], alt: `Logo of ${org.name}`, className: "w-[50px] h-[50px] mr-3", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, org.name), /*#__PURE__*/ React.createElement("a", { href: org.url, className: "text-blue-500", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, org.url))))); } function FundingOrganizationsDirectoryStory() { const fundingOrganizations = [ { name: 'The Kresge Foundation', url: 'https://kresge.org/' }, { name: 'The McKnight Foundation', url: 'https://www.mcknight.org/' }, { name: 'The Rockefeller Foundation', url: 'https://www.rockefellerfoundation.org/' }, { name: 'The Ford Foundation', url: 'https://www.fordfoundation.org/' }, { name: 'The John D. and Catherine T. MacArthur Foundation', url: 'https://www.macfound.org/' }, { name: 'The Walton Family Foundation', url: 'https://www.waltonfamilyfoundation.org/' }, { name: 'The Moore Foundation', url: 'https://www.moore.org/' }, { name: 'The David and Lucile Packard Foundation', url: 'https://www.packard.org/' }, { name: 'The Charles Stewart Mott Foundation', url: 'https://www.mott.org/' }, { name: 'The Hewlett Foundation', url: 'https://hewlett.org/' }, { name: 'The African Development Foundation', url: 'https://www.usadf.gov/' }, { name: 'The Segal Family Foundation', url: 'https://www.segalfamilyfoundation.org/' }, { name: 'The African Women\'s Development Fund', url: 'https://awdf.org/' }, { name: 'The MasterCard Foundation', url: 'https://mastercardfdn.org/' }, { name: 'The Mo Ibrahim Foundation', url: 'https://www.moibrahimfoundation.org/' }, { name: 'The Oppenheimer Memorial Trust', url: 'https://www.omt.org.za/' }, { name: 'The Dangote Foundation', url: 'http://dangotefoundation.org/' }, { name: 'The Elma Philanthropies', url: 'https://www.elmaphilanthropies.org/' }, { name: 'The Ford Foundation in West Africa', url: 'https://www.fordfoundation.org/the-latest/ford-live-events/ford-foundation-office-for-west-africa/' }, { name: 'The Bill & Melinda Gates Foundation in Africa', url: 'https://www.gatesfoundation.org/where-we-work/africa-office' }, { name: 'The Asia Foundation', url: 'https://asiafoundation.org/' }, { name: 'The Toyota Foundation', url: 'https://www.toyotafound.or.jp/english/' }, { name: 'The Sasakawa Peace Foundation', url: 'https://www.spf.org/e/' }, { name: 'The Nippon Foundation', url: 'https://www.nippon-foundation.or.jp/en/' }, { name: 'The Mitsubishi Foundation', url: 'https://www.mitsubishifoundation.org/english/' }, { name: 'The Akhtar Hameed Khan Resource Center', url: 'https://ahkrc.org/' }, { name: 'The Narotam Sekhsaria Foundation', url: 'http://www.nsfoundation.co.in/' }, { name: 'The Li Ka Shing Foundation', url: 'http://www.lksf.org/' }, { name: 'The Jack Ma Foundation', url: 'http://www.jackmafoundation.org.cn/?lang=en' }, { name: 'The Cargill Global Scholars Program (Asia)', url: 'https://www.cargillglobalscholars.com/' }, { name: 'The European Foundation Centre', url: 'https://www.efc.be/' }, { name: 'The Robert Bosch Foundation', url: 'https://www.bosch-stiftung.de/en' }, { name: 'The Volkswagen Foundation', url: 'https://www.volkswagenstiftung.de/en' }, { name: 'The King Baudouin Foundation', url: 'https://www.kbs-frb.be/' }, { name: 'The Wellcome Trust', url: 'https://wellcome.org/' }, { name: 'The Novo Nordisk Foundation', url: 'https://novonordiskfonden.dk/en/' }, { name: 'The IKEA Foundation', url: 'https://www.ikeafoundation.org/' }, { name: 'The Fondation de France', url: 'https://www.fondationdefrance.org/en' }, { name: 'The Bernard van Leer Foundation', url: 'https://bernardvanleer.org/' }, { name: 'The La Caixa Foundation', url: 'https://fundacionlacaixa.org/en/' }, { name: 'The Avina Foundation', url: 'https://www.avina.net/avina/en/' }, { name: 'The Inter-American Foundation', url: 'https://www.iaf.gov/' }, { name: 'The Andes Amazon Fund', url: 'https://www.andesamazonfund.org/' }, { name: 'The Skoll Foundation (South America)', url: 'https://skoll.org/about/' }, { name: 'The Ford Foundation in South America', url: 'https://www.fordfoundation.org/our-work-around-the-world/southern-cone/' }, { name: 'The Rainforest Foundation US', url: 'https://rainforestfoundation.org/' }, { name: 'The Gordon and Betty Moore Foundation', url: 'https://www.moore.org/' }, { name: 'The Global Greengrants Fund', url: 'https://www.greengrants.org/' }, { name: 'The Blue Moon Fund', url: 'http://www.bluemoonfund.org/' }, { name: 'The Amazon Environmental Research Institute', url: 'https://ipam.org.br/' }, { name: 'The Open Society Initiative for West Africa', url: 'https://www.osiwa.org/' }, { name: 'The World Bank Liberia', url: 'http://www.worldbank.org/en/country/liberia' }, { name: 'The African Development Bank in Liberia', url: 'https://www.afdb.org/en/countries/west-africa/liberia' }, { name: 'UNDP in Liberia', url: 'https://www.lr.undp.org/' }, { name: 'The United States Agency for International Development (USAID) Liberia', url: 'https://www.usaid.gov/liberia' }, { name: 'The European Union in Liberia', url: 'https://eeas.europa.eu/delegations/liberia_en' }, { name: 'The Swedish International Development Cooperation Agency (Sida) in Liberia', url: 'https://www.sida.se/English/where-we-work/Africa/Liberia/' }, { name: 'The Global Fund for Children', url: 'https://globalfundforchildren.org/' }, { name: 'The Global Environment Facility', url: 'https://www.thegef.org/' }, { name: 'The African Women\'s Development Fund', url: 'https://awdf.org/' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FundingOrganizationsDirectory, { fundingOrganizations: fundingOrganizations, __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this })); } function AvatarStack({ avatars }) { const displayAvatars = avatars.slice(0, 5); const remainingCount = avatars.length - 5; return /*#__PURE__*/ React.createElement("div", { className: "flex -space-x-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, displayAvatars.map((avatar, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: avatar, alt: `User avatar ${index + 1}`, className: "w-8 h-8 rounded-full border-2 border-white", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this })), remainingCount > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-8 h-8 rounded-full bg-[#F2F4F7] text-[#475467] font-inter text-[12px] font-medium", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "+", remainingCount)); } function AvatarStackStory() { const exampleSets = [ [ "./avatar1.png" ], [ "./avatar1.png", "./avatar2.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png", "./avatar6.png" ], [ "./avatar1.png", "./avatar2.png", "./avatar3.png", "./avatar4.png", "./avatar5.png", "./avatar6.png", "./avatar7.png" ] ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, exampleSets.map((set, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(AvatarStack, { avatars: set, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })))); } function BusinessName({ src, businessName, website }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-3", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `${businessName} logo`, className: "w-[40px] h-[40px] rounded-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-inter font-medium text-[14px] text-[#101828]", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, businessName), /*#__PURE__*/ React.createElement("p", { className: "font-inter font-normal text-[14px] text-[#475467]", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, website))); } function BusinessNameStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-12", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/firstBusinessLogo.png", alt: "Logo of the first business", businessName: "Sunrise Bakery", website: "www.sunrisebakery.com", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/secondBusinessLogo.png", alt: "Logo of the second business", businessName: "Moonlight Cafe", website: "www.moonlightcafe.com", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BusinessName, { src: "path/to/thirdBusinessLogo.png", alt: "Logo of the third business", businessName: "Starlight Fashion", website: "www.starlightfashion.com", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function Table({ titles, data }) { return /*#__PURE__*/ React.createElement("div", { className: "shadow-lg rounded-md border border-[#EAECF0]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, titles.map((title, index)=>/*#__PURE__*/ React.createElement("th", { key: index, className: "text-left text-[#475467] bg-[#F9FAFB] font-inter font-medium text-[12px] p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this }, title)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, data.map((rowData, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, className: "border-b border-[#EAECF0]", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, rowData.map((cellData, cellIndex)=>/*#__PURE__*/ React.createElement("td", { key: cellIndex, className: "text-[#475467] font-inter text-[12px] py-4 pl-4 pr-2", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this }, cellData))))))); } function TableStory() { const titles = [ "Name", "Role", "Status" ]; const data = [ [ "John Doe", "Admin", "Active" ], [ "Jane Smith", "Moderator", "Inactive" ], [ "John Appleseed", "User", "Active" ], [ "Steve Jobs", "CEO", "Active" ] ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Table, { titles: titles, data: data, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function Label({ label, isSelected }) { const bgColor = isSelected ? 'bg-[#ECFDF3]' : 'bg-[#F2F4F7]'; const textColor = isSelected ? 'text-[#027A48]' : 'text-[#344054]'; return /*#__PURE__*/ React.createElement("div", { className: `${bgColor} ${textColor} font-inter font-medium text-[12px] px-[8px] py-[2px] rounded-[16px] inline-block`, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, label); } function LabelStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Label, { label: "Selected Label", isSelected: true, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Label, { label: "Unselected Label", isSelected: false, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [data, setData] = React.useState([]); const [loading, setLoading] = React.useState(false); const [page, setPage] = React.useState(0); const [editRow, setEditRow] = React.useState(null); React.useEffect(()=>{ fetchData(); }, [ page ]); async function fetchData() { setLoading(true); const fundingOrganizations = [ { name: 'Google', url: 'https://google.com/' }, { name: 'Microsoft', url: 'https://microsoft.com/' }, { name: 'Amazon', url: 'https://amazon.com/' }, { name: 'Apple', url: 'https://apple.com/' }, { name: 'Facebook', url: 'https://facebook.com/' }, { name: 'Tesla', url: 'https://tesla.com/' }, { name: 'IBM', url: 'https://ibm.com/' }, { name: 'Oracle', url: 'https://oracle.com/' }, { name: 'Cisco', url: 'https://cisco.com/' }, { name: 'Intel', url: 'https://intel.com/' } ]; const orgChunk = fundingOrganizations.slice(page * 10, (page + 1) * 10); const messages = orgChunk.map((org)=>({ role: 'user', content: `Tell me about ${org.name} in less than 8 words.` })); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: 'Explain this content' }) }); const result = await response.json(); if (result.choices && result.choices.length) { const newData = orgChunk.map((org, index)=>({ ...org, about: result.choices[index].message.content, users: Array.from({ length: Math.ceil(Math.random() * 5) }, (_, id)=>`https://source.unsplash.com/random/?professional%20headshot&${id}`), licenseUse: Math.ceil(Math.random() * 100) })); setData((prev)=>[ ...prev, ...newData ]); } setLoading(false); } const handleDelete = (index)=>{ setData(data.filter((_, idx)=>idx !== index)); }; const handleEdit = (index)=>{ setEditRow(index); }; const handleEditChange = (index, field, value)=>{ const updatedData = [ ...data ]; updatedData[index][field] = value; setData(updatedData); }; const titles = [ 'Company', 'Status', 'About', 'Users', 'License use', 'Website URL' ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Table, { titles: titles, data: data.map((org, index)=>[ /*#__PURE__*/ React.createElement(Checkbox, { __source: { fileName: "", lineNumber: 73, columnNumber: 11 } }), editRow === index ? /*#__PURE__*/ React.createElement("input", { type: "text", value: org.name, onChange: (e)=>handleEditChange(index, 'name', e.target.value), __source: { fileName: "", lineNumber: 75, columnNumber: 13 } }) : /*#__PURE__*/ React.createElement(BusinessName, { src: `https://logo.clearbit.com/${new URL(org.url).hostname}`, businessName: org.name, __source: { fileName: "", lineNumber: 81, columnNumber: 13 } }), /*#__PURE__*/ React.createElement(Label, { label: "Customer", isSelected: true, __source: { fileName: "", lineNumber: 86, columnNumber: 11 } }), editRow === index ? /*#__PURE__*/ React.createElement("input", { type: "text", value: org.about, onChange: (e)=>handleEditChange(index, 'about', e.target.value), __source: { fileName: "", lineNumber: 88, columnNumber: 13 } }) : /*#__PURE__*/ React.createElement(Text, { title: "", subtitle: org.about, __source: { fileName: "", lineNumber: 94, columnNumber: 13 } }), /*#__PURE__*/ React.createElement(AvatarStack, { avatars: org.users, __source: { fileName: "", lineNumber: 96, columnNumber: 11 } }), /*#__PURE__*/ React.createElement(ProgressBar, { progressPercentage: org.licenseUse, __source: { fileName: "", lineNumber: 97, columnNumber: 11 } }), /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleDelete(index), __source: { fileName: "", lineNumber: 98, columnNumber: 11 } }, /*#__PURE__*/ React.createElement(DeleteIcon, { __source: { fileName: "", lineNumber: 98, columnNumber: 52 } })), /*#__PURE__*/ React.createElement("div", { onClick: ()=>handleEdit(index), __source: { fileName: "", lineNumber: 99, columnNumber: 11 } }, /*#__PURE__*/ React.createElement(EditIcon, { __source: { fileName: "", lineNumber: 99, columnNumber: 50 } })), org.url ]), __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: loading, onClick: ()=>setPage((prev)=>prev + 1), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Load More"))); }