([250]); // placeholder for future server filter
const [founderOnly, setFounderOnly] = useState(false);
const [liOnly, setLiOnly] = useState(false);
const [showFilters, setShowFilters] = useState(true);
// initial load & whenever server-side filters change: reset and fetch first page
useEffect(() => {
let live = true;
setLoading(true);
setRows([]);
setSelectedIds(new Set());
setNextCursor(null);
loadTargetsServer({ q: query, include: includeProducts, founderOnly, liOnly, limit: LIMIT, cursor: null })
.then((res) => {
if (!live) return;
setRows(res.items || []);
setNextCursor(res.nextCursor ?? null);
setLoading(false);
})
.catch(() => { if (!live) return; setError("Failed to load targets"); setLoading(false); });
return () => { live = false; };
}, [query, includeProducts.join(","), founderOnly, liOnly]);
async function loadMore() {
if (!nextCursor || loadingMore) return;
setLoadingMore(true);
try {
const res = await loadTargetsServer({ q: query, include: includeProducts, founderOnly, liOnly, limit: LIMIT, cursor: nextCursor });
setRows((prev) => [...prev, ...(res.items || [])]);
setNextCursor(res.nextCursor ?? null);
} catch (e) {
setError("Failed to load more");
} finally {
setLoadingMore(false);
}
}
const toggleRow = (id: string) => {
setSelectedIds((prev) => {
const n = new Set(prev);
if (n.has(id)) n.delete(id); else n.add(id);
return n;
});
};
const toggleSelectAllVisible = () => {
setSelectedIds((prev) => {
const n = new Set(prev);
const allSelected = rows.every(r => n.has(r.id));
if (allSelected) {
rows.forEach(r => n.delete(r.id));
} else {
rows.forEach(r => n.add(r.id));
}
return n;
});
};
const buildExportRows = () => {
const dataset = selectedIds.size ? rows.filter(r => selectedIds.has(r.id)) : rows;
return dataset.map((r) => ({
"Company Name": r.companyName,
"Business Description": r.businessDescription,
"Location": r.location,
"Employees": r.employees,
"Type": r.type,
"Industry": r.industry,
"Product Line": r.productLine.join("; "),
"Revenue (M)": r.revenueM ?? "",
"Founded": r.founded ?? "",
"CEO": r.ceo.name,
}));
};
const exportExcel = async () => {
const rowsForExport = buildExportRows();
// If SheetJS (XLSX) is available globally, use it; otherwise fall back to CSV
const XLSX = (globalThis as any).XLSX;
if (XLSX && XLSX.utils) {
const ws = XLSX.utils.json_to_sheet(rowsForExport);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Targets");
const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
const blob = new Blob([wbout], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = `bolt_on_targets_${new Date().toISOString().slice(0,10)}.xlsx`; a.click(); URL.revokeObjectURL(url);
return;
}
// CSV fallback (Excel-compatible)
const headers = Object.keys(rowsForExport[0] || {});
const csvLines = [headers.join(",")];
for (const row of rowsForExport) {
const line = headers.map(h => {
const v = (row as any)[h];
const s = v === null || v === undefined ? "" : String(v);
return s.includes(",") || s.includes("\n") ? `"${s.replace(/"/g, '""')}"` : s;
}).join(",");
csvLines.push(line);
}
const blob = new Blob([csvLines.join("\n")], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = `bolt_on_targets_${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url);
};
const addInclude = (v: string) => v && setIncludeProducts((s) => Array.from(new Set([...s, v])));
const addExclude = (v: string) => v && setExcludeTerms((s) => Array.from(new Set([...s, v])));
const removeInclude = (t: string) => setIncludeProducts((s) => s.filter((x) => x !== t));
const removeExclude = (t: string) => setExcludeTerms((s) => s.filter((x) => x !== t));
return (
{showFilters && (
Results — {loading ? "Loading…" : `${rows.length} Companies`}
{selectedCount > 0 ? `Export will include ${selectedCount} selected rows` : "No rows selected — export will include all loaded results"}
toggleSelectAllVisible()} aria-label=\"Select all loaded\" />
{selectedCount > 0 ? `Export will include ${selectedCount} selected rows` : "No rows selected — export will include all loaded results"}
{includeProducts.map((p) => (
{p}
))}
{excludeTerms.map((p) => (
{p}
))}
)}
Results — {loading ? "Loading…" : `${rows.length} Companies`}
{error &&
{error}
}
{/* Fixed-height scrollable container (~20 rows visible). Adjust height as needed. */}
|
|
Company Name
|
Business Description
|
Location
|
Employees
|
Type
|
Industry
|
Product Line
|
Revenue (M)
|
Founded
|
CEO
|
{loading ? (
|
Loading targets…
|
) : (
rows.map((r) => (
|
toggleRow(r.id)} aria-label={`Select ${r.companyName}`} />
|
{r.companyName}
|
{r.businessDescription}
|
{r.location}
|
{r.employees}
|
{r.type}
|
{r.industry}
|
{r.productLine.map((p) => (
{p}
))}
|
{r.revenueM ?? "—"}
|
{r.founded ?? "—"}
|
{r.ceo.name}
{r.hasLinkedIn ? "LinkedIn available" : "Contact unknown"}
{r.ceo.linkedin && (
)}
|
))
)}
{/* Load more button below the scrollable grid */}
{selectedCount > 0 ? `${selectedCount} selected` : ""}
);
}
// --- Small component to add chips -----------------------------------------
function AddChip({ onAdd, placeholder }: { onAdd: (v: string) => void; placeholder: string }) {
const [open, setOpen] = useState(false);
const [val, setVal] = useState("");
return (
);
}
/* ==========================================================================='
Next.js App Router API route stub — drop this in: /app/api/targets/route.ts
Adds server-side filtering for q/include/founderOnly/liOnly + cursor pagination.
This demo uses a simple index-based cursor; in production, switch to keyset
pagination (e.g., base64 encode last {score,id}) for stability at scale.
============================================================================ */
// route.ts
// ---------
// export const dynamic = 'force-dynamic';
// import { NextResponse } from 'next/server';
//
// type TargetRow = {
// id: string; companyName: string; businessDescription: string; location: string; employees: string;
// type: 'Founder-owned' | 'Family-owned' | 'Independent' | 'PE-backed'; industry: string; productLine: string[];
// revenueM?: number; founded?: number; ceo: { name: string; linkedin?: string }; hasLinkedIn: boolean;
// };
//
// const DATA: TargetRow[] = [
// { id: '1', companyName: 'AeroFast Components', businessDescription: 'Manufacturer of aerospace fasteners.', location: 'Dallas, TX', employees: '120-180', type: 'Founder-owned', industry: 'Aerospace & Defense', productLine: ['fasteners','kitting'], revenueM: 35, founded: 1996, ceo: { name: 'Kelly Rhodes', linkedin: 'https://www.linkedin.com/in/example' }, hasLinkedIn: true },
// { id: '2', companyName: 'Midwest Pack & Fill', businessDescription: 'Contract packaging partner.', location: 'Fort Wayne, IN', employees: '80-110', type: 'Family-owned', industry: 'Packaging & Contract Manufacturing', productLine: ['contract packaging','blister packs'], revenueM: 22, founded: 2007, ceo: { name: 'Jordan Patel', linkedin: 'https://www.linkedin.com/in/example2' }, hasLinkedIn: true },
// { id: '3', companyName: 'Gulf Coast Sealants', businessDescription: 'Industrial adhesives and sealants.', location: 'Houston, TX', employees: '200-260', type: 'Independent', industry: 'Chemicals & Materials', productLine: ['adhesives','sealants'], revenueM: 48, founded: 1988, ceo: { name: 'Morgan Ellis' }, hasLinkedIn: false },
// ];
//
// export async function GET(req: Request) {
// const { searchParams } = new URL(req.url);
// const q = (searchParams.get('q') || '').toLowerCase();
// const include = (searchParams.get('include') || '').split(',').filter(Boolean);
// const founderOnly = searchParams.get('founderOnly') === 'true';
// const liOnly = searchParams.get('liOnly') === 'true';
// const limit = Math.min(parseInt(searchParams.get('limit') || '20', 10) || 20, 100);
// const cursor = searchParams.get('cursor');
//
// let items = DATA;
// if (q) items = items.filter(r => r.companyName.toLowerCase().includes(q) || r.industry.toLowerCase().includes(q) || r.productLine.join(' ').toLowerCase().includes(q));
// if (include.length) items = items.filter(r => include.some(t => r.productLine.includes(t)));
// if (founderOnly) items = items.filter(r => r.type === 'Founder-owned' || r.type === 'Family-owned');
// if (liOnly) items = items.filter(r => !!r.ceo.linkedin);
//
// // Simple index-based cursor for demo
// const offset = cursor ? parseInt(cursor, 10) || 0 : 0;
// const page = items.slice(offset, offset + limit);
// const nextCursor = offset + limit < items.length ? String(offset + limit) : null;
//
// return NextResponse.json({ items: page, nextCursor, total: items.length, asOf: new Date().toISOString() });
// }
