// DirectoryMap.jsx, Suppliers by location variant of Directory const DM_LOCATIONS = [ { id: "hai-phong", city: "Hai Phong", cityJa: "ハイフォン", country: "vn", region: "vn-north", x: 232, y: 138, port: true }, { id: "da-nang", city: "Da Nang", cityJa: "ダナン", country: "vn", region: "vn-central", x: 248, y: 288, port: true }, { id: "ho-chi-minh", city: "Ho Chi Minh",cityJa: "ホーチミン", country: "vn", region: "vn-south", x: 198, y: 452, port: true }, { id: "can-tho", city: "Can Tho", cityJa: "カントー", country: "vn", region: "vn-south", x: 168, y: 478, port: false }, { id: "ca-mau", city: "Ca Mau", cityJa: "カマウ", country: "vn", region: "vn-south", x: 142, y: 510, port: true }, { id: "sapporo", city: "Sapporo", cityJa: "札幌", country: "jp", region: "jp-hokkaido",x: 905, y: 122, port: true }, { id: "tokyo", city: "Tokyo", cityJa: "東京", country: "jp", region: "jp-kanto", x: 905, y: 302, port: false }, { id: "yokohama", city: "Yokohama", cityJa: "横浜", country: "jp", region: "jp-kanto", x: 895, y: 322, port: true }, { id: "osaka", city: "Osaka", cityJa: "大阪", country: "jp", region: "jp-kansai", x: 808, y: 338, port: true }, ]; const DM_REGIONS = [ { id: "all", label: "All locations", ja: "すべて", country: null }, { id: "vn-north", label: "Northern VN", ja: "北部", country: "vn" }, { id: "vn-central", label: "Central VN", ja: "中部", country: "vn" }, { id: "vn-south", label: "Southern VN", ja: "南部", country: "vn" }, { id: "jp-hokkaido", label: "Hokkaido", ja: "北海道", country: "jp" }, { id: "jp-kanto", label: "Kanto", ja: "関東", country: "jp" }, { id: "jp-kansai", label: "Kansai", ja: "関西", country: "jp" }, ]; const DM_LANES = [ { id: "hp-yk", from: "hai-phong", to: "yokohama", label: "Hai Phong → Yokohama", transit: "4 days", weekly: 6 }, { id: "hp-os", from: "hai-phong", to: "osaka", label: "Hai Phong → Osaka", transit: "5 days", weekly: 3 }, { id: "hc-yk", from: "ho-chi-minh",to: "yokohama", label: "Ho Chi Minh → Yokohama", transit: "7 days", weekly: 4 }, { id: "dn-os", from: "da-nang", to: "osaka", label: "Da Nang → Osaka", transit: "6 days", weekly: 2 }, ]; const dmSuppliersByCity = (filterFn = () => true) => { const map = {}; for (const s of SUPPLIERS) { if (!filterFn(s)) continue; (map[s.city] = map[s.city] || []).push(s); } return map; }; const DirectoryMap = ({ onNavigate, onRFQ }) => { const vp = useViewport(); const [country, setCountry] = useState("any"); const [selectedRegion, setSelectedRegion] = useState("all"); const [selectedCity, setSelectedCity] = useState(null); const [hoverCity, setHoverCity] = useState(null); const [highlightedRegion, setHighlightedRegion] = useState(null); const [verifiedOnly, setVerifiedOnly] = useState(true); const baseFilter = (s) => { if (verifiedOnly && !s.verified) return false; if (country !== "any" && s.country !== country) return false; return true; }; const countsByCity = {}; for (const s of SUPPLIERS) { if (!baseFilter(s)) continue; countsByCity[s.city] = (countsByCity[s.city] || 0) + 1; } const regionCount = (rid) => { if (rid === "all") return Object.values(countsByCity).reduce((a, b) => a + b, 0); const cities = DM_LOCATIONS.filter(l => l.region === rid).map(l => l.city); return cities.reduce((a, c) => a + (countsByCity[c] || 0), 0); }; const filtered = SUPPLIERS.filter(s => { if (!baseFilter(s)) return false; if (selectedCity) { const loc = DM_LOCATIONS.find(l => l.id === selectedCity); return loc && s.city === loc.city; } if (selectedRegion !== "all") { const loc = DM_LOCATIONS.find(l => l.city === s.city); return loc && loc.region === selectedRegion; } return true; }); const selectedLoc = selectedCity ? DM_LOCATIONS.find(l => l.id === selectedCity) : null; const selectedReg = selectedRegion !== "all" ? DM_REGIONS.find(r => r.id === selectedRegion) : null; const clearAll = () => { setSelectedCity(null); setSelectedRegion("all"); }; const chipGroups = [ { country: null, regions: ["all"] }, { country: "vn", regions: DM_REGIONS.filter(r => r.country === "vn").map(r => r.id) }, { country: "jp", regions: DM_REGIONS.filter(r => r.country === "jp").map(r => r.id) }, ]; return (
{ e.preventDefault(); onNavigate("home"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Home / { e.preventDefault(); onNavigate("directory"); }} style={{ color: "var(--color-fg-muted)", border: 0 }}>Suppliers /By location
Find by location

Suppliers across the Vietnam ⇄ Japan corridor

{filtered.length} verified suppliers across {Object.keys(countsByCity).length} export hubs · weekly sailings to Yokohama, Osaka and Kobe
{/* REGION CHIPS + GLOBAL TOGGLES */}
Region {chipGroups.map((g, gi) => ( {gi > 0 && !vp.isMobile && } {g.country && ( )} {g.regions.map(rid => { const r = DM_REGIONS.find(x => x.id === rid); const active = selectedRegion === rid && !selectedCity; const count = regionCount(rid); return ( ); })} ))}
{/* MAP + SIDE PANEL */}
{ setSelectedRegion("all"); setSelectedCity(prev => prev === id ? null : id); }} onBackgroundClick={() => setSelectedCity(null)} />
{/* RESULTS */}
{selectedLoc ? ( Showing suppliers in {selectedLoc.city} ) : selectedReg ? ( Showing suppliers in {selectedReg.label} ) : ( Showing all {filtered.length} suppliers in the corridor )}
Sort
{filtered.map(s => (
{ const loc = DM_LOCATIONS.find(l => l.city === s.city); if (loc) setHoverCity(loc.id); }} onMouseLeave={() => setHoverCity(null)}> onNavigate("profile", s.id)} onRFQ={onRFQ}/>
))} {filtered.length === 0 && (
No suppliers match the current location filter.
)}
); }; const LocationSummary = ({ selectedLoc, selectedReg, countsByCity, filtered, onClear, lanes }) => { if (!selectedLoc && !selectedReg) { const hubs = DM_LOCATIONS .map(l => ({ ...l, count: countsByCity[l.city] || 0 })) .filter(l => l.count > 0) .sort((a, b) => b.count - a.count); return ( ); } if (selectedLoc) { const sups = filtered; const outboundLanes = lanes.filter(l => l.from === selectedLoc.id); const inboundLanes = lanes.filter(l => l.to === selectedLoc.id); const relevantLanes = [...outboundLanes, ...inboundLanes]; return ( ); } const regionHubs = DM_LOCATIONS .filter(l => l.region === selectedReg.id) .map(l => ({ ...l, count: countsByCity[l.city] || 0 })); return ( ); }; const StatBlock = ({ value, suffix, label }) => (
{value}{suffix && {suffix}}
{label}
); Object.assign(window, { DM_LOCATIONS, DM_REGIONS, DM_LANES, dmSuppliersByCity, DirectoryMap });