loggic-dashboard — HTML 后台模板

SHA-256: 0165797f4d61d4a53b5f3027087937a7ece208aa79c519b54b0960c5fd3ff6af

2026-10-15T06:06:57.525Z

# Loggic Dashboard

> Self-hosted lead-tracking dashboard for a small SaaS — Mapbox 3D map of prospects, Instantly campaign analytics, GitHub activity, prospect responses log, daily tasks panel.

Built originally to manage **[LogicSupplies](https://logiccsupplies.ca)** — a Quebec studio that builds custom loyalty apps for local businesses (cafés, restaurants, salons, gyms). Open-sourced as a template for other indie SaaS founders who want a single screen showing the full pipeline of their cold outreach + tenant deployments.

![Dashboard map](https://raw.githubusercontent.com/olimartel6/loggic-dashboard/main/.github/screenshot.png)

## What it shows

- **KPIs** — leads in your campaign, demos deployed, responses logged, paying customers
- **Tasks panel** — daily todo + done-today list with priority and tags
- **Conversion funnel** — leads → emails sent → opens → clicks → replies → customers
- **3D Mapbox map** — every prospect plotted with industry-colored markers, clickable for details, with heatmap toggle and filter sidebar (status, industry, city)
- **Instantly engagement charts** — campaign analytics from the Instantly.ai cold email platform
- **Recent leads table** — last 12 prospects with open/click/reply stats
- **GitHub activity** — recent pushes from your account
- **Tenants grid** — one-click delete + auto-redeploy of any tenant from the SaaS config
- **Responses log** — manual conversation tracker (Messenger / Instagram / email / phone / SMS) with status pills
- **Telegram inbox** counter (optional)

All data is stored locally in JSON files in `data/`. No database required. Single Node process.

## Why I built it

I was running a SaaS where I had ~130 prospect demos deployed across Quebec, an active cold email campaign in Instantly, manual DM conversations on Messenger and Instagram, and a daily todo list scattered across notes apps. There was no single view of "what's the state of my pipeline and what should I do today?"

This dashboard merges all of those signals into one screen, refreshed every 60 seconds. Free, self-hosted, no SaaS subscription on top of my SaaS.

## Tech stack

- **Backend**: Node.js + Express. Single file (`server.js`).
- **Frontend**: Plain HTML + [Tailwind CSS via CDN](https://tailwindcss.com) + [Chart.js](https://www.chartjs.org/) + [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) for the 3D map.
- **Data**: JSON files in `data/` (responses, tasks, geocoded prospect coords).
- **Geocoder**: [Photon (komoot)](https://photon.komoot.io/) for tenant address → lat/lng. Free, no API key.
- **Deploy automation**: optional — if you set `DEPLOY_CMD`, the dashboard runs it after a tenant deletion. Default uses `vite build` + `gh-pages`.

## Quick start

```bash
git clone https://github.com/olimartel6/loggic-dashboard.git
cd loggic-dashboard
npm install
cp .env.example .env
# edit .env with your tokens / paths
node server.js
# open http://localhost:4242
```

The dashboard runs without any env vars (everything degrades gracefully) but the Mapbox map needs at least `MAPBOX_TOKEN` to render — get a free pk.* token at [account.mapbox.com](https://account.mapbox.com/auth/signup/).

## Configuration

All optional — see `.env.example` for the full list.

| Var | What it does |
|-----|--------------|
| `MAPBOX_TOKEN` | Public Mapbox token (pk.*). Required for the 3D map. |
| `LOYALTY_REPO_PATH` | Path to your loyalty SaaS repo with `src/config.js` containing tenant blocks. Required for `/api/demos` and `/api/map`. |
| `DEMO_BASE_URL` | Base URL of your tenant deployment, e.g. `https://demo.example.com/`. Used for per-tenant demo links. |
| `INSTANTLY_API_KEY` + `INSTANTLY_CAMPAIGN_ID` | Pull cold email campaign analytics. |
| `GITHUB_USER` | Your GitHub username. Powers the recent repos panel via the `gh` CLI. |
| `LEADS_DIRS` | Comma-separated folders with leads CSV exports. Counted in `/api/leads-files`. |
| `TELEGRAM_INBOX_PATH` | Folder of Telegram inbox files (used by some Claude Code setups). |
| `DEPLOY_CMD` | Override the deploy command run after tenant deletion. |

## Tenant config format

The dashboard expects your loyalty SaaS config to look like this (one block per tenant):

```js
const configs = {
  'tenant-slug': {
    businessName: "Some Café",
    slug: 'tenant-slug',
    tagline: '...',
    logo: '...',
    address: '123 Rue Example, Québec, QC',
    phone: '418-555-0000',
    // ... other tenant fields
  },
  // ... more tenants
};
```

Block boundaries: a quoted slug key, an opening `{`, content (which can include nested objects like `theme: {}` and `rewards: []`), and a closing `\n  },` with exactly 2 spaces of indent.

## Endpoints

| Method | Path | Purpose |
|--------|------|---------|
| GET | `/api/summary` | Aggregate KPI feed |
| GET | `/api/instantly` | Campaign analytics + recent leads |
| GET | `/api/demos` | Tenant list extracted from `config.js` |
| GET | `/api/map` | Tenant points with industry classification + cached coordinates |
| GET | `/api/github` | Recent repos via `gh` CLI |
| GET | `/api/telegram` | Inbox file count |
| GET | `/api/leads-files` | Local CSV stats |
| GET/POST/PATCH/DELETE | `/api/responses[/:id]` | Manual responses log CRUD |
| GET/POST/PATCH/DELETE | `/api/tasks[/:id]` | Tasks CRUD |
| POST | `/api/tasks/find` | Find tasks by text fragment |
| GET | `/api/deploy/status` | Deploy state machine current state |
| POST | `/api/deploy` | Trigger deploy |
| DELETE | `/api/tenant/:slug` | Remove tenant from config + delete images + auto-redeploy |
| GET | `/api/industries` | Industry metadata (label, color, glyph) |
| GET | `/api/config` | Public config for the frontend (Mapbox token, GitHub user, demo base URL) |

## Privacy notes

- All data lives in `data/*.json` on your machine. Nothing leaves your computer except API calls to Mapbox and Instantly.
- `data/` is gitignored — your prospect notes, response history and tasks never get committed.
- The Mapbox token is a `pk.*` (publishable) token — designed to be exposed to the frontend.

## Roadmap

This is a personal-use template, not a polished product. Things I would add if it ever evolved:
- Webhook receiver for Instantly reply events (auto-create response entries)
- Slack / Telegram notifications when a high-priority prospect replies
- CSV export of all logged responses
- Optional Postgres adapter for users who want multi-device sync

PRs welcome but expect slow review — this is a side project.

## Credits

Built by [Olivier Martel](https://github.com/olimartel6) for [LogicSupplies](https://logiccsupplies.ca), the Quebec loyalty app studio.

## License

[MIT](./LICENSE) — do whatever you want with it.