# Jeep SA Dealer Finder — Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Build a single self-contained `index.html` Jeep-branded dealer finder widget (iframe body only) for jeep.com/za, with search, province filter, geolocation sort, and a Leaflet/OpenStreetMap map — all dealer data pre-embedded from the CSV.
**Architecture:** One HTML file with all CSS, JS, and dealer data inline. A one-time `build-data.js` Node.js script parses `Jeep_south_Africa_Dealer.csv` and writes `dealers-data.js` (the `const DEALERS` array) to paste into `index.html`. No build tool, no server, no dependencies beyond Leaflet CDN.
**Tech Stack:** HTML5, CSS3, Vanilla JS, Leaflet 1.9.4, OpenStreetMap tiles, Node.js v22 (build script only)
---
## CSV Column Map (verified)
The CSV has a multi-line header (one record spanning 3 text lines due to quoted newlines). Data starts at record index 1. Column indices (0-based):
| Index | Field |
|---|---|
| 4 | Dealer Name |
| 8 | Address |
| 9 | City/Prefecture |
| 10 | State/Region (province) |
| 14 | General Phone |
| 15–21 | Mon – Sun hours |
| 28 | Latitude |
| 29 | Longitude |
| 40 | DealerShip Email |
| 48 | Whatsapp Number |
---
## Task 1: Initialise git and parse CSV → DEALERS array
**Files:**
- Create: `build-data.js`
- Generated: `dealers-data.js`
- [ ] **Step 1: Initialise git repo**
```bash
cd /Volumes/Exutate/CLIENTS/STELLANTIS/2026/Jeep-dealer-locator
git init
echo ".superpowers/" >> .gitignore
echo "dealers-data.js" >> .gitignore
git add .gitignore
git commit -m "chore: init repo"
```
- [ ] **Step 2: Write build-data.js**
```javascript
// build-data.js — run once: node build-data.js
'use strict';
const fs = require('fs');
// Full CSV parser — handles quoted fields containing commas and newlines
function parseCSV(text) {
const records = [];
let field = '', inQuotes = false, record = [];
for (let i = 0; i < text.length; i++) {
const ch = text[i];
if (ch === '"') {
if (inQuotes && text[i + 1] === '"') { field += '"'; i++; }
else inQuotes = !inQuotes;
} else if (ch === ',' && !inQuotes) {
record.push(field.trim()); field = '';
} else if ((ch === '\n' || ch === '\r') && !inQuotes) {
if (ch === '\r' && text[i + 1] === '\n') i++;
record.push(field.trim()); field = '';
if (record.some(f => f)) records.push(record);
record = [];
} else {
field += ch;
}
}
if (record.length) {
record.push(field.trim());
if (record.some(f => f)) records.push(record);
}
return records;
}
const content = fs.readFileSync('Jeep_south_Africa_Dealer.csv', 'utf8');
const records = parseCSV(content);
// records[0] = header (multi-line quoted field makes it one record); data from records[1]
const DAY_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const dealers = records.slice(1)
.filter(r => r[4] && r[28] && r[29])
.map(r => ({
name: r[4],
address: r[8],
city: r[9],
province: r[10],
phone: r[14],
email: r[40],
whatsapp: r[48],
lat: parseFloat(r[28]),
lng: parseFloat(r[29]),
hours: Object.fromEntries(DAY_KEYS.map((d, i) => [d, r[15 + i] || '']))
}))
.filter(d => !isNaN(d.lat) && !isNaN(d.lng));
const output = `const DEALERS = ${JSON.stringify(dealers, null, 2)};`;
fs.writeFileSync('dealers-data.js', output);
console.log(`Wrote ${dealers.length} dealers to dealers-data.js`);
```
- [ ] **Step 3: Run it**
```bash
node build-data.js
```
Expected output: `Wrote 32 dealers to dealers-data.js` (number may vary slightly)
- [ ] **Step 4: Inspect output**
```bash
node -e "
const fs = require('fs');
eval(fs.readFileSync('dealers-data.js','utf8'));
console.log('Total:', DEALERS.length);
console.log('First:', JSON.stringify(DEALERS[0], null, 2));
const provinces = [...new Set(DEALERS.map(d=>d.province))].sort();
console.log('Provinces:', provinces);
"
```
Expected:
- Total ≥ 30
- First dealer has `name`, `address`, `city`, `province`, `phone`, `lat` (negative number ~-22 to -35), `lng` (positive ~17–33), `hours.mon` through `hours.sun`
- Provinces list includes: `Gauteng`, `Western Cape`, `KZN` or `KwaZulu-Natal`, etc.
- [ ] **Step 5: Commit build script**
```bash
git add build-data.js
git commit -m "feat: add CSV-to-JSON build script"
```
---
## Task 2: HTML skeleton with layout and full CSS
**Files:**
- Modify: `index.html` (overwrite existing Leapmotor content entirely)
- [ ] **Step 1: Write index.html**
```html
Find a Jeep Dealer
```
- [ ] **Step 2: Open in browser**
Open `index.html` directly (double-click or `open index.html`). Expected:
- Black header "FIND A DEALER" with red "0 Dealers" badge
- Search input + "Near Me" button + "All Provinces" dropdown
- Results bar reading "Loading…" with a "Clear" link
- Empty scrollable area
- OpenStreetMap tiles loading on the right (may show world map at default zoom)
- Zero console errors
- [ ] **Step 3: Commit**
```bash
git add index.html
git commit -m "feat: add Jeep dealer finder HTML skeleton with full CSS"
```
---
## Task 3: Map init, custom pin marker, province dropdown
**Files:**
- Modify: `index.html` — replace `/* App logic added in Tasks 3–6 */` comment
- [ ] **Step 1: Replace the app script comment with map init code**
```javascript
// ── Custom Jeep pin icons ──
const PIN_RED = ``;
const PIN_BLACK = ``;
function makeIcon(active) {
return L.divIcon({
html: active ? PIN_BLACK : PIN_RED,
className: '',
iconSize: [24, 34],
iconAnchor: [12, 34],
popupAnchor: [0, -36]
});
}
// ── Map init ──
const map = L.map('map', { zoomControl: true });
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
let markers = []; // array of { marker: L.Marker, dealer: Object }
let activeIdx = null; // index in current rendered set
function fitAll(items) {
if (!items.length) { map.setView([-28.5, 24.7], 5); return; }
map.fitBounds(L.featureGroup(items.map(i => i.marker)).getBounds().pad(0.12));
}
// ── Province dropdown ──
function populateProvinces() {
const sel = document.getElementById('province');
const provinces = [...new Set(DEALERS.map(d => d.province).filter(Boolean))].sort();
provinces.forEach(p => {
const opt = document.createElement('option');
opt.value = p;
opt.textContent = p;
sel.appendChild(opt);
});
}
populateProvinces();
```
- [ ] **Step 2: Reload browser**
Expected:
- OpenStreetMap tiles load on the right
- Map centred on world default (no markers yet — DEALERS is empty)
- Province dropdown still shows "All Provinces" (populated from empty DEALERS, correct)
- Zero console errors
- [ ] **Step 3: Commit**
```bash
git add index.html
git commit -m "feat: init Leaflet map with custom Jeep pin icons and province dropdown"
```
---
## Task 4: Render dealer cards and map markers
**Files:**
- Modify: `index.html` — append inside app `
```
Replace with:
```html
```
- [ ] **Step 3: Full integration test in browser**
Open `index.html`. Run through every feature:
| # | Test | Expected |
|---|---|---|
| 1 | Initial load | All dealers shown; map fits bounds across South Africa; badge shows ≥30 |
| 2 | Province dropdown | Options populated from CSV (Gauteng, Western Cape, KZN, etc.) |
| 3 | Type "pretoria" in search | Filters to Pretoria dealers only; map re-fits |
| 4 | Type "westvaal" in search | Shows all Westvaal branches |
| 5 | Select "Western Cape" from dropdown | Shows only WC dealers |
| 6 | Type "cape" + select "Western Cape" | Intersected results |
| 7 | Click "Clear" | Both fields reset; all dealers shown |
| 8 | Click a dealer card | Map flies to that pin; pin turns black; popup opens; card gets red border |
| 9 | Click a red map pin | Card scrolls into view; gets red border; pin turns black |
| 10 | Click "Opening Hours ▼" on any card | Mon–Sun table expands; today's row is red with ● dot |
| 11 | Click "Opening Hours ▲" | Table collapses |
| 12 | Click "Directions" on any card | New tab: Google Maps directions to dealer |
| 13 | Click a phone number | `tel:` link fires |
| 14 | WhatsApp button | Appears only for dealers with a WhatsApp number; opens `wa.me/...` |
| 15 | Resize to <980px | Panel stacks above map; both scroll independently |
| 16 | Click "Near Me" | Browser asks for location; on allow: list re-sorts by distance, closest dealer activated |
- [ ] **Step 4: Commit**
```bash
git add index.html
git commit -m "feat: embed full Jeep SA dealer data — complete dealer finder"
```
---
## Self-Review
### Spec coverage
| Spec requirement | Task |
|---|---|
| Option A layout (left panel + right map) | Task 2 |
| Black header, "FIND A DEALER", count badge | Task 2 |
| Brand palette (#000, #BA0C2F, #fff) | Task 2 |
| Text search (name, city, suburb, phone) | Task 5 |
| "Near Me" geolocation sort | Task 6 |
| Province dropdown from CSV data | Task 3 |
| Dealer card: name, city·province, address | Task 4 |
| Directions → Google Maps | Task 4 |
| Phone → tel: link | Task 4 |
| WhatsApp → wa.me (conditional on field) | Task 4 |
| Expandable hours Mon–Sun | Task 4 |
| Today's hours row highlighted red | Task 4 |
| Active card: red left border + bg | Task 4 |
| Leaflet + OpenStreetMap | Task 3 |
| Red pin markers | Task 3 |
| Active pin: black | Task 3+4 |
| Popup: red top border, name, address, Directions | Task 4 |
| Card click → fly + popup + scroll | Task 4 |
| Pin click → card scroll + active | Task 4 |
| fitBounds on visible markers | Task 4 |
| Single-file output | All tasks |
| CSV pre-parsed to embedded JS | Task 1+7 |
| Responsive 980px breakpoint | Task 2 |
| Clear button resets all filters | Task 5 |
All spec requirements covered. No gaps.
### Placeholder scan
No TBDs, no "implement later", no "handle edge cases" — all code blocks are complete and runnable.
### Type consistency
- `makeIcon(active: boolean)` → defined Task 3, used Tasks 3+4 ✓
- `markers` → `{ marker: L.Marker, dealer: Object }[]` → consistent across Tasks 3+4+6 ✓
- `activeIdx` → `number | null` → consistent across Tasks 3+4 ✓
- `render(items: dealer[])` → defined Task 4, called Tasks 5+6 ✓
- `activateDealer(idx: number)` → defined Task 4, called Tasks 4+6 ✓
- `fitAll(items: { marker: L.Marker }[])` → defined Task 3, called Task 4 ✓
- `haversine(lat1, lng1, lat2, lng2)` → defined+used Task 6 ✓
- `getFiltered()` → defined+used Task 5 ✓
- `DAY_KEYS` array → defined Task 4, matches `hours` object keys from `build-data.js` Task 1 ✓