Documentation · Clinova

Getting Started

Install dependencies and start the Vite dev server:

npm install
npm run dev        # http://localhost:5173

Build a production bundle to dist/:

npm run build
npm run preview    # serve the built site locally

Tech Stack

A modern, no-framework stack: Vite 6 (multi-page build), plain vanilla JS ES modules, and Tailwind CSS v4 via the @tailwindcss/vite plugin. Reusable page chrome uses Handlebars partials (vite-plugin-handlebars). Charts are ApexCharts, tables are simple-datatables, toasts are Notyf, icons are lucide, and the typeface is Inter via @fontsource-variable/inter. Heavy libraries are lazy-loaded so the initial bundle stays small.

Project Structure

index.html, clinical.html, …   # every page is a root .html file
src/
  partials/        # head, sidebar, header, scripts (Handlebars)
  styles/
    main.css       # Tailwind v4 + OKLCh design tokens
  js/
    main.js        # entry: boots each feature module
    data.js        # chart datasets (swap for your API data)
    modules/       # theme, sidebar, charts, datatables, …
vite.config.js     # auto-discovers root .html pages

Theming & Tokens

All colors are OKLCh CSS variables in src/styles/main.css, defined under :root (light) and again under .dark. Change the primary color, surfaces, chart palette, or clinical status tokens in one place:

:root {
  --primary: oklch(0.55 0.09 195);   /* clinical teal */
  --status-stable: oklch(0.60 0.12 155);
  --status-critical: oklch(0.55 0.20 25);
  --chart-1: oklch(0.55 0.09 195);
}

Users can switch light/dark, color preset, and density at runtime from the header and Settings → Appearance. Choices persist to the browser and re-apply before paint.

Using Your Own Data

Chart data lives in src/js/data.js; table and list data lives in the relevant module (e.g. modules/appointments.js) or directly in the page markup. Replace these with your own values or a fetch() to your backend, keeping the same shapes.

// src/js/data.js
export const DATASETS = {
  admissions: {
    categories: ["Mon", "Tue", "Wed", …],
    series: [{ name: "Admissions", data: [16, 22, 19, …] }],
    colors: ["--chart-1", "--chart-2"],
  },
};

Note: the bundled data is fictional and for demonstration only. Do not ship it as real patient information.

Adding a Page

Create a new .html file at the project root — Vite discovers it automatically. Start from the shared partials, then add a link in the sidebar:

<!-- reports.html -->
<head><title>Reports · Clinova</title>{{> head }}</head>
<body class="min-h-screen">
  {{> sidebar }}
  <div class="flex min-h-screen flex-col lg:ms-[260px]">
    {{> header }}
    <main class="p-4 sm:p-6">…</main>
  </div>
  {{> scripts }}
</body>

Then add <a href="reports.html"> to src/partials/sidebar.html.

Charts

Charts are declarative: add a placeholder with data-chart (the type) and data-series (a key in DATASETS). ApexCharts is loaded on demand and re-tinted automatically when the theme changes.

<div data-chart="area" data-series="admissions"></div>
<div data-chart="donut" data-series="triage"></div>

Deployment

npm run build emits a fully static site to dist/ — no server required. Host it on any static host or CDN (Netlify, Vercel, Cloudflare Pages, S3 + CloudFront, GitHub Pages).