i7m Templates

Template · Dashboards

Tandem

A complete dashboard app with a drag-and-drop job board, hand-drawn charts and a command palette. No framework, no build.

Open full preview

About Tandem

Tandem is a full multi-page dashboard app for a small service business, shipped as the console of a bike workshop with believable sample data. It is for developers and agencies who need a real admin or back-office interface without adopting a framework. Twelve screens are included: an overview with revenue against target, a job board you drag by mouse, touch or keyboard with a table view and a job page, a catalogue with editable prices and stock, customers and their profiles, invoices with CSV export and payouts, a team leaderboard with a capacity planner, a month calendar, reports, settings and help. Around them sit a command palette that searches everything, notifications, toasts, dialogs, a folding sidebar and a bottom tab bar on phones. To use it, open index.html: there is no framework, no build step and no dependency. Data is saved in the browser, and one file holds every read and write, so you can put your own API behind it.

  • Twelve working screens with no dead ends. Create jobs, invoices, customers and events, edit stock in place, export CSV.
  • A job board you can drag with a mouse, a finger or the keyboard, with live announcements for screen readers.
  • Six kinds of chart written by hand in SVG, including the capsule chart of revenue against target. No chart library.
  • Command palette on Ctrl or Cmd + K with fuzzy search across pages, actions, jobs, customers, parts and invoices.
  • One design system in OKLCH custom properties. A single hue number recolours both themes, and compact density is one multiplier.
  • Runs from a double-click on index.html, with no framework and no build. State is saved in localStorage and falls back to memory.
  • All data access sits in one file, with a README that shows how to swap the sample data for your API.
  • Works from 360px to wide desktop, with AA contrast, visible focus, reduced-motion support and full keyboard operation.

What's included

tandem-v1.0.0.zip117 KB zip · 336 KB unpacked
  • index.htmlThe app shell, the loading skeleton and the script tags.4.9 KB
  • css/tokens.cssDesign tokens for colour, type, space, radius and motion in both themes.8.1 KB
  • css/components.cssThe UI kit, from buttons and tables to dialogs and toasts.26.9 KB
  • css/pages.cssLayout for each screen, with container queries.27.4 KB
  • js/app.jsBoot, routes, rendering and keyboard shortcuts.8.9 KB
  • js/core/store.jsReactive store and a storage adapter with a memory fallback.3.9 KB
  • js/data/model.jsEvery query and action on the data. The file to edit for an API.18.3 KB
  • js/data/sample.jsThe seeded sample-data generator.19.8 KB
  • js/ui/kit.jsToasts, dialogs, popovers, forms and file export.16.8 KB
  • js/ui/charts.jsCapsule, stacked, area and donut charts, goal ring and sparkline.18.3 KB
  • js/pages/jobs.jsThe board with pointer, touch and keyboard dragging, plus the table.18.0 KB
  • README.mdQuick start, structure, connecting an API, re-theming and browser support.10.9 KB
  • CHANGELOG.mdVersion history.501 B
  • LICENCE.txtThe licence in plain English.2.4 KB
Dependencies
None
Build step
None
Built with
HTML, CSS and plain JavaScript files with JSDoc types
Browsers
Current Chrome, Edge, Safari, Firefox

Version history

  1. v1.0.0First release.

Licence in short

You can

  • Use it in unlimited personal and commercial projects
  • Use it in unlimited projects for clients
  • Change the code however you like

You can't

  • Resell or share the source as a template, component or kit
  • Put it in a competing product or site builder

Read the full licence →

Good to know

What exactly do I get?

A zip file with the source: plain HTML, CSS and JavaScript, a README that explains setup and customisation, and the licence text. There is no build step and nothing to install — open the HTML file and it runs.

Can I use it in client work?

Yes. One purchase covers you (one person or one company seat) for unlimited personal, commercial and client projects. What you can't do is resell or share the source itself as a template, component or kit. The full wording is on the licence page.

How do I get the files after paying?

Payment happens on Stripe's hosted checkout. The moment it succeeds you land on a download page here. Bookmark that page — the link stays valid for 30 days and 10 downloads.

All questions and answers →

More from the catalogue