Ledge
an inventory and sales dashboard with a point-of-sale register, live orders and purchase orders
Ledge is a seven-page inventory and sales dashboard template for a shop that sells in store and online, shown as a fictional home-goods shop. The pages are Overview, Register, Orders, Stock, Purchasing, Reports and Settings, switched from an icon rail whose highlight travels between links, with a bottom tab bar on phones and every screen in the URL. Overview shows today's sales against a goal ring and the same day last week, four headline figures, net sales over 7, 30 or 90 days (the curve morphs between ranges), sales by category and channel, best sellers, products running low and the latest orders. With Live on, a simulated web order arrives every few seconds, counts the day up and slides into the feed. The Register is a point of sale: tap a product and its photo flies into the ticket, change quantities, apply a discount, pick card or cash, and Charge prints a receipt while the units come off stock everywhere. A SKU typed into the search and Enter adds it, like a barcode scanner. Orders filters by status and channel, sorts, exports CSV and opens each order in a side panel to ship or refund it, and refunds put the stock back and can be undone. Stock shows each product's level against its reorder point, what is on order, units sold and days of cover, with Receive stock, Correct count and Add product dialogs. Purchasing moves purchase orders through draft, ordered, in transit and received, and a new order is filled in with thirty days of stock for each product. Reports covers 4, 12 or 26 weeks with weekly sales and profit, categories, a busy-hours heatmap, channels and product sell-through. Search, keyboard shortcuts, a stock-alert tray and undo toasts are included. A year of sample sales is generated in src/model.ts with no backend, so you connect your own API there; changes are kept in localStorage and can be exported as JSON. Light, dark and system themes and three accent colours are set in Settings. Charts are hand-built SVG you can read with the arrow keys, tabl
$31.50 — one-time price, free updates
- A website template
- Plain HTML, CSS and JavaScript · no framework
- Build unlimited client sites with it
Built with Plain JavaScript, CSS, SVG, GSAP.
What is in the zip
- app.css
- index.html
- src/charts.ts
- src/main.ts
- src/model.ts
- src/motion.ts
- src/pages/orders.ts
- src/pages/overview.ts
- src/pages/products.ts
- src/pages/purchasing.ts
- src/pages/register.ts
- src/pages/reports.ts
- src/pages/settings.ts
- src/parts.ts
- src/route.ts
- src/ui.ts
- tsconfig.json
- views.css
Version history
- v1.0.1, 2026-10-15 — Fits phones and tablets. No table scrolls sideways any more: the product report becomes cards on phones and the stock list turns into list rows where its columns do not fit. Search results and the stock-alert tray open full width on phones, phones held sideways get a top bar that scrolls away and a compact tab bar, the ticket bar steps aside once the ticket is on screen so it never covers Charge, long receipt lines shorten instead of running off the paper, and every control is at least 44px to a finger. Desktop layouts are unchanged.
- v1.0.0, 2026-10-15 — First release. Ledge shipped, with the reel recorded from the real page.