Kova — E-commerce Admin Dashboard

Thank you for purchasing Kova. This guide covers everything you need to customise the dashboard. No build tools are required: open any HTML file, edit, refresh.

Introduction

Kova is an admin dashboard template for online stores, built with Bootstrap 5.3.3 and vanilla JavaScript. It covers the daily work of running a shop: orders, products, customers, discounts, reviews, support inbox, live chat, tasks and settings. It is designed as the back office for the Aster e-commerce template (same products and data), and works on its own with any store.

• 35 HTML pages: 4 dashboards (incl. Insights), 12 store pages, 5 apps, 4 settings pages, 4 UI kit pages, 4 auth pages, 3 error pages
• API-ready data layer: orders, customers and products load from JSON or your own API
• Insights calculated in the browser: stock forecast, RFM segments, cohort retention
• Drag-and-drop dashboard widgets, packing slips and 4×6″ labels with Code 128 barcodes, RTL mode
• Built-in SVG charts (area, line, bar, stacked, donut, radial, sparkline), no chart library
• Data tables with search, filters, sorting, pagination, bulk select and CSV export, enabled with one attribute
• Light and dark mode, 6 accent colors, dark sidebar and compact sidebar, saved in the browser
• Command palette (⌘K / Ctrl+K or /) that searches every page
• No jQuery, no build step, no external JavaScript besides Bootstrap

File structure

kova/
├── template/                 The dashboard (this is what you deploy)
│   ├── index.html            Store overview dashboard
│   ├── analytics.html        Traffic analytics dashboard
│   ├── marketing.html        Marketing dashboard
│   ├── orders.html … maintenance.html
│   ├── docs/index.html       This guide
│   └── assets/
│       ├── css/style.css     All Kova styles (tokens at the top)
│       ├── js/app.js         Layout, preferences, tables, forms, apps
│       ├── js/charts.js      Kova Charts
│       ├── js/data.js        Data layer, stats, row templates
│       ├── js/insights.js    Insights page
│       ├── js/print.js       Packing slips, labels, barcodes
│       ├── data/             orders, customers, products (.json + .js)
│       ├── img/              Logo, avatars, products, media (SVG)
│       └── vendor/           Bootstrap 5.3.3, Bootstrap Icons 1.11
└── source/                   Optional: page sources + build.py

Getting started

1. Unzip the package and open template/index.html in a browser.
2. Edit any page with a code editor and refresh. All pages are plain HTML.
3. To publish, upload the contents of template/ to any static host or plug the markup into your back end (Laravel, Django, Rails, Node, PHP).

Fonts load from Google Fonts (Geist and Geist Mono). For offline use, download them and replace the <link> in the page head.

Pages included

Sidebar, topbar & layout

Each dashboard page has the same structure:

<div class="app">
  <aside class="sidebar">…</aside>
  <div class="main">
    <header class="topbar">…</header>
    <main class="content"> your page </main>
    <footer class="footer">…</footer>
  </div>
</div>

The sidebar collapses to icons on desktop (button in the topbar) and becomes a slide-in drawer below 992px. Add class="side-link active" to highlight the current page. A collapsible group is a button.side-link with data-bs-toggle="collapse" plus a ul.side-sub.

Because the sidebar is repeated on every page, the easiest way to change it is the optional build script (see below): edit source/partials/sidebar.html once and rebuild.

The storefront switcher in the topbar is a regular Bootstrap dropdown. Each item with data-store="Name" updates the switcher label.

Colors, dark mode & customizer

All colors are CSS variables at the top of assets/css/style.css. Change the brand color in one place:

:root, [data-bs-theme="light"] {
  --k-primary: #0d9488;
  --k-primary-rgb: 13, 148, 136;
}
[data-bs-theme="dark"] {
  --k-primary: #2dd4bf;
  --k-primary-rgb: 45, 212, 191;
}

Chart colors use --k-c1 … --k-c6. Dark mode uses Bootstrap's data-bs-theme attribute on <html>.

The customizer (sliders icon in the topbar) lets each user pick color mode, accent color, sidebar style and layout. Choices are saved in localStorage under kova-settings and applied before the page paints, so there is no flash. To set defaults for everyone, change the attributes on <html>:

<html lang="en" data-bs-theme="dark" data-sidebar="dark" data-layout="mini">

To remove the customizer, delete the #customizer offcanvas and its topbar button.

Data layer & API

Orders, customers and products are real data, not hard-coded rows. They live in assets/data/ twice: as .json (what an API would return) and as .js wrappers so the pages also work when opened straight from disk.

Tables are filled from templates in assets/js/data.js:

<tbody data-template="orderRow" data-limit="200"></tbody>

Available templates: orderRow, orderRecent, customerRow, productRow, productCard. Edit their markup in data.js or add your own.

Connect your back end

Define the API before the scripts load (for example in the page head). Kova then fetches GET {base}/orders, /customers and /products, shows a loading state and fills the tables when the data arrives:

<script>
window.KOVA_API = {
  base: 'https://api.yourstore.com/v1',
  headers: { Authorization: 'Bearer YOUR_TOKEN' },
  endpoints: { orders: '/orders?limit=500' }   // optional overrides
};
</script>

The JSON shape is documented by the sample files. An order looks like this:

{ "id": 10482, "c": 1, "d": "2026-10-28T09:13",
  "items": [[0, 2, "Sand", "M"]],   // [productIndex, qty, colour, size]
  "sub": 229, "disc": 22.9, "ship": 9, "tax": 16.49, "total": 231.59,
  "st": "processing", "pay": "Visa", "store": "Aster Fashion" }

Read data from your own scripts with KovaAPI.get('orders').then(…). Demo dates are shifted so the newest order is always today; this only applies to the bundled sample data.

Insights

insights.html runs three analyses on the order data with KovaStats (in data.js):

• Stock forecast: KovaStats.forecast(products, orders, 30) returns sales per day, days of cover, reorder point (lead time + 7 days of safety stock) and a suggested order quantity. Set each product's lead (supplier lead time in days).
• RFM segments: KovaStats.rfm(customers, orders) scores recency, frequency and monetary value 1–5 and assigns Champions, Loyal, Potential, New, At risk or Hibernating. The customers table uses the same segments.
• Cohort retention: KovaStats.cohorts(orders, 8) groups customers by first purchase month and shows who came back in later months.

Recommendations at the top of the page are generated from these numbers by simple rules in insights.js; adjust them to your business.

Customizable dashboard

Add data-dashboard to a Bootstrap row and data-widget="id" data-title="Name" to each column. A button with data-dash-edit toggles edit mode: widgets can be dragged, resized (3 → 4 → 6 → 8 → 12 columns) and hidden. The layout is saved per page in localStorage; data-dash-reset restores the default.

Packing slips & labels

packing-slip.html?orders=10482,10481 prints a packing slip (A4/Letter) and a 4×6″ shipping label for each order. Select rows on the orders page and click “Print labels” to open it with those orders. Barcodes are Code 128, generated as SVG by KovaBarcode(text, height), so they stay sharp on thermal printers.

RTL support

Switch direction in the customizer or set it by default:

<html lang="ar" dir="rtl">
<link href="assets/vendor/bootstrap/bootstrap.rtl.min.css" rel="stylesheet" id="bs-css">

Kova styles use logical CSS properties, so the sidebar, tables, chat bubbles and all spacing mirror automatically.

Charts

Kova Charts is a small built-in library (assets/js/charts.js). A chart is a single element with a JSON config:

<div class="chart" data-chart='{
  "type": "area",
  "height": 280,
  "format": { "prefix": "$" },
  "labels": ["Jan", "Feb", "Mar"],
  "series": [
    { "name": "2026", "data": [5200, 6100, 7400] },
    { "name": "2025", "data": [4100, 4800, 5600], "color": "c3" }
  ]
}'></div>

Switch datasets with buttons, no JavaScript needed:

<button data-range-for="#revenue" data-range="week">Week</button>
<button data-range-for="#revenue" data-range="month">Month</button>

Update a chart from your own code (for example after an API call):

KovaCharts.update(document.querySelector('#revenue'), {
  labels: ['Mon', 'Tue', 'Wed'],
  series: [{ name: 'Revenue', data: [1200, 1800, 1500] }]
});

Data tables

Add data-table to the card that wraps a table. Each feature is turned on by adding its control:

JavaScript helpers

Behaviour is attached with data attributes, so most changes need no JavaScript:

Apps (kanban, calendar, inbox, chat, media library) work in the browser with demo data. Connect them to your API by replacing the demo arrays and handlers in app.js. Nothing is sent to any server.

Using with Aster

Kova uses the same product catalog, prices, images and order numbers as the Aster storefront template, so the two read as one product in a demo or a client pitch. Copy assets/img/products from Aster to keep images in sync, and point the “View storefront” link in the topbar to your Aster deployment.

Optional build script

The source/ folder contains each page split into shared partials (head, sidebar, topbar, footer) and a tiny Python 3 build script with no dependencies:

cd source
python3 build.py

It rebuilds every page into template/. {{> sidebar}} includes a partial; {{title}} prints a value from the page header. You never need it if you prefer editing HTML directly.

Credits & licenses

People, stores, emails, orders and figures in the demo are fictional.

Support

Questions or found a bug? Contact us through the marketplace item page. We usually reply within one business day. Support covers setup questions and bug fixes; custom development and back-end integration are not included.

Changelog

1.0.0 — Initial release.