function MainComponent() { const [selectedCategory, setSelectedCategory] = React.useState('Pending Assets'); const [searchQuery, setSearchQuery] = React.useState(''); const categories = [ { name: 'Pending Assets', count: 8 }, { name: 'Trafficking', count: 2 }, { name: 'Pending Approval', count: 5 }, { name: 'Planning', count: 2 }, { name: 'Archive', count: 1 } ]; const tableData = [ { category: 'Pending Assets', company: 'BCBS FEP', product: 'OS USPS', startDate: '9/1/2024', endDate: '12/15/2024', amount: '$674,000.00' }, { category: 'Pending Assets', company: 'BCBS Nebraska', product: 'Brand CTV', startDate: '9/7/2024', endDate: '12/29/2024', amount: '$15,000.00' }, { category: 'Trafficking', company: 'CHRISTUS', product: 'MA Texas', startDate: '9/9/2024', endDate: '3/31/2025', amount: '$40,000.00' }, { category: 'Pending Approval', company: 'CDPHP', product: 'Fall', startDate: '9/16/2024', endDate: '12/31/2024', amount: '$15,000.00' }, { category: 'Pending Assets', company: 'BCBS Nebraska', product: 'ACA Audio', startDate: '9/16/2024', endDate: '10/28/2024', amount: '$18,000.00' }, { category: 'Pending Approval', company: 'Braven Health', product: 'AEP', startDate: '10/1/2024', endDate: '12/31/2024', amount: '$136,510.00' }, { category: 'Trafficking', company: 'BCBS FEP', product: 'OS MEDICAL', startDate: '10/1/2024', endDate: '12/15/2024', amount: '$56,650.00' }, { category: 'Pending Assets', company: 'BCBS FEP', product: 'OS FEDVIP', startDate: '10/1/2024', endDate: '12/15/2024', amount: '$318,700.00' }, { category: 'Archive', company: 'CHRISTUS (ARCHIVE)', product: 'Brand (ARCHIVE)', startDate: '10/4/2024', endDate: '12/7/2024', amount: '$0.00' }, { category: 'Pending Approval', company: 'Horizon', product: 'SHBP/SEHBP October', startDate: '10/1/2024', endDate: '10/31/2024', amount: '$146,000.00' }, { category: 'Pending Approval', company: 'HealthFirst', product: 'AEP CTV', startDate: '10/1/2024', endDate: '12/7/2024', amount: '$75,000.00' }, { category: 'Pending Assets', company: 'Horizon', product: 'Fall Brand', startDate: '10/1/2024', endDate: '12/31/2024', amount: '$187,827.00' }, { category: 'Pending Assets', company: 'CHRISTUS', product: 'NTM New Mexico', startDate: '10/1/2024', endDate: '3/31/2025', amount: '$69,000.00' }, { category: 'Pending Approval', company: 'Braven Health', product: 'Salute', startDate: '10/1/2024', endDate: '12/7/2024', amount: 'TBD' }, { category: 'Planning', company: 'UVA Health', product: 'Q3/Q4 Brand', startDate: '10/1/2024', endDate: '12/31/2024', amount: 'TBD' }, { category: 'Pending Assets', company: 'HealthFirst', product: 'Brand 2024 (CTV/DOOH)', startDate: '10/21/2024', endDate: '12/31/2024', amount: 'TBD' }, { category: 'Planning', company: 'Horizon', product: 'BCBS FEP', startDate: '11/4/2024', endDate: '12/15/2024', amount: '$29,620.00' } ]; const filteredData = tableData.filter((item)=>(selectedCategory === 'All' || item.category === selectedCategory) && (searchQuery === '' || item.company.toLowerCase().includes(searchQuery.toLowerCase()) || item.product.toLowerCase().includes(searchQuery.toLowerCase()))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col font-sans p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `mr-2 mb-2 px-3 py-1 rounded-full ${selectedCategory === category.name ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`, onClick: ()=>setSelectedCategory(category.name), __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, category.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 52, columnNumber: 31 }, __self: this }, category.count))), /*#__PURE__*/ React.createElement("button", { className: `mr-2 mb-2 px-3 py-1 rounded-full ${selectedCategory === 'All' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'}`, onClick: ()=>setSelectedCategory('All'), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "ALL")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 relative", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search by company or product", className: "w-full p-2 pl-10 border rounded", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-3 text-gray-400", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "Category"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Start Date"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "End Date"), /*#__PURE__*/ React.createElement("th", { className: "border p-2 text-left", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Amount"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, filteredData.map((item, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: index % 2 === 0 ? 'bg-white' : 'bg-gray-50', __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, item.category), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, item.company), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, item.product), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, item.startDate), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, item.endDate), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, item.amount))))))); }

Category	Company	Product	Start Date	End Date	Amount
Pending Assets	BCBS FEP	OS USPS	9/1/2024	12/15/2024	$674,000.00
Pending Assets	BCBS Nebraska	Brand CTV	9/7/2024	12/29/2024	$15,000.00
Pending Assets	BCBS Nebraska	ACA Audio	9/16/2024	10/28/2024	$18,000.00
Pending Assets	BCBS FEP	OS FEDVIP	10/1/2024	12/15/2024	$318,700.00
Pending Assets	Horizon	Fall Brand	10/1/2024	12/31/2024	$187,827.00
Pending Assets	CHRISTUS	NTM New Mexico	10/1/2024	3/31/2025	$69,000.00
Pending Assets	HealthFirst	Brand 2024 (CTV/DOOH)	10/21/2024	12/31/2024	TBD