An admin dashboard template, in HTML, React and Vue versions, for building an AI invoice and receipt reader (OCR) app. It is the front end only, with sample data: 120 pages with the screens for uploading invoices and receipts, checking the values found on the highlighted document, approving, paying and exporting them to accounting. There is no working system behind it. Warm paper-and-highlighter design: every value found on the page is marked in the colour of its field type, and the form next to it lights up the same mark.

Built on Bootstrap 5.3.8 with plain JavaScript, no jQuery and no build step: open index.html and it works. The same 120 pages also come as a React 19 + TypeScript project and a Vue 3 + TypeScript project, both built with Vite. There is no server, OCR engine, AI or database behind it: nothing is uploaded, read or saved, and the forms send nothing. All document screens use one small data layer (assets/js/api.js) with a mock adapter and an HTTP adapter, so you can connect your own back end without rewriting the pages.

What's included

• Three versions in one download: HTML (Bootstrap 5, plain JavaScript), React 19 + TypeScript + Vite, Vue 3 + TypeScript + Vite, each with all 120 pages
• 120 HTML pages in 6 groups, all linked from the sidebar
• 8 dashboards: Payables overview, Spend & budget, Cash & due dates, Employee expenses, Extraction accuracy, Team throughput, Bookkeeping firm, Vendor insights
• Upload & review: drop PDFs, photos or a ZIP and see the upload and reading steps (simulated in the browser, nothing is sent), then check each field next to the highlighted sample document
• Capture: Review queue, Processing monitor, Batches, Batch details, E-mail inbox, Mobile capture, Split & merge pages, Duplicate check, AI corrections
• Documents and vendors: All documents, Document details, Invoices, Receipts, Purchase orders, PO matching, Archive, All vendors, Vendor profile, Add vendor, Bank detail changes
• Money out: Approvals, Payment runs, Payment run, AP aging, Due date calendar, Bank matching, Company cards, Approval flows
• Expenses: Expense reports, Expense report, New expense report, Mileage, Reimbursements, Expense policy
• Accounting: Chart of accounts, Cost centers & projects, Tax codes, Currencies, Budgets, Companies
• Reports: All reports, Spend analysis, Tax report, Report builder, Exports, Export templates
• Automation: Rules, Rule builder, Integrations, Webhooks, AI settings, Custom fields, API reference, API playground, API keys, Request log
• Apps: Ask Folivo (simulated AI assistant), Team chat, Mail, Tasks (kanban), Files, and a client portal: Clients, Client workspace, Document requests, Client upload page
• Account and settings: Workspace settings, Team, Roles & permissions, Notification settings, Data & privacy, Audit log, Setup guide, My profile, Account & security, Notifications, Plan & billing, Folivo invoice (printable), Plans
• Pages: Help center, What's new, Search results, Blank page
• Sign-in & system: Sign in (2 layouts), Create account, Forgot password, Reset password, Two-step sign-in, Verify e-mail, Join a workspace, Lock screen, Error 404, Error 500, Maintenance, Coming soon
• UI kit pages: Document components, Buttons, Cards, Alerts & toasts, Badges & pills, Modals & drawers, Tabs & accordions, Progress & loaders, Typography, Icons, Widgets, Form elements, Advanced inputs, Form wizard, Tables, Charts
• React and Vue projects: routes for every page, the same theme panel, data layer (api.ts), export and sample data, npm run dev and npm run build, plus a build that works from any folder
• HTML documentation (with a React and Vue chapter), SCSS sources with an npm build, readable and minified CSS and JS, custom.css for your own styles
• Bonus: Folivo UI Kit (ui-kit/): the same paper-and-highlighter look as stand-alone HTML, CSS and SCSS components for your other projects, with no dependencies and an overview page with the code to copy. It is a set of styles with a small optional script, not a second admin template

Features

• Highlighter marks on the rendered document page by field type (vendor, numbers, dates, amounts, line items, payment, GL code); hover a field and its mark lights up, and the other way round. Marker, box or no marks, set in the theme panel
• Review screen that points at the doubts: low-confidence fields are flagged and sums and dates are checked (on sample data), with approve, reject and export buttons on the same screen
• One data layer (Folivo.api): mock adapter for the demo, HTTP adapter for your API, documented endpoints, events and the Document JSON shape
• Export to CSV, Excel (.xlsx) and JSON in the browser with column templates, without a library
• Light and dark mode, 8 colour skins, 6 presets and a custom brand colour, plus dark or light sidebar, compact menu and density, all in a theme panel that is remembered in the browser
• Data tables without extra libraries: search, filters, sorting, paging, bulk selection and CSV export
• Charts without code: 12 ApexCharts types set up with data-chart attributes; colours follow the skin and dark mode
• Apps: due date calendar (FullCalendar), kanban tasks, report builder, export templates and custom fields with drag and drop (SortableJS), rich text editor (Quill), date pickers (flatpickr), chat, mail and files
• Client portal pages for a bookkeeping firm: clients, document requests and an upload page clients use without an account
• Developer pages: API reference, a playground with sample requests and responses, API keys, webhooks and a request log
• SCSS sources (Dart Sass modules) and npm scripts: npm run build compiles the CSS and writes minified CSS and JS
• Self-hosted Geist fonts and Bootstrap Icons: the pages load nothing from Google Fonts or a CDN and work offline, straight from the disk
• Tested with axe-core on every page in light mode, dark mode and all skins: 0 issues. Keyboard-friendly, with labelled icon buttons, visible focus and reduced motion respected

Technical details

• React version: React 19, React Router 7, TypeScript, Vite; Vue version: Vue 3 (single-file components), Vue Router 4, TypeScript, Vite; both need Node.js 20.19 or newer
• Bootstrap 5.3.8 and Bootstrap Icons 1.13.2, ApexCharts 4.7.0, FullCalendar 6.1.19 (standard), flatpickr 4.6.13, SortableJS 1.15.6, Quill 2.0.3, all included in assets/vendor
• HTML version: plain JavaScript, no jQuery
• Optional Sass build: npm install, then npm run build (Node.js 18 or newer; not needed to use the template)
• Static front end: no PHP, database or server code
• Tested in Chromium-based browsers (Chrome, Edge) at phone and desktop widths

Good to know

• Sample data only. All companies, vendors, people, documents and amounts are invented. The template is a user interface, not a working OCR or accounting system: to read real documents you connect it to your own back end and OCR service.
• AI features are simulated. Reading progress, confidence scores and the Ask Folivo assistant show fixed sample results; no AI service is called.
• Forms, sign-in and buttons such as "Approve" or "Pay" are demos: they show a message and send nothing. Files you drop are not uploaded anywhere.
• No photos are used: avatars are initials and documents are drawn in HTML, so there is nothing to replace or license.

Credits

• Bootstrap 5.3.8, Bootstrap Icons 1.13.2, ApexCharts 4.7.0, FullCalendar 6.1.19, flatpickr 4.6.13, SortableJS 1.15.6 (MIT)
• Quill 2.0.3 (BSD-3-Clause)
• React, React Router, Vue, Vue Router, Vite and TypeScript (MIT; React and Vue versions, installed by npm)
• Geist and Geist Mono (SIL Open Font License 1.1)

Changelog

Version 1.0.0 (26 October 2026)

• Initial release.
• 120 HTML pages: 8 dashboards, upload & review with highlighted documents, capture, documents, vendors, approvals, payments, expenses, accounting, reports, automation rules, apps, account and settings, client portal, developer pages, UI kit, sign-in and system pages.
• Highlighter marks on the document page that match each field type, with hover linking between fields and marks.
• Light and dark mode, 8 skins, 6 presets, custom brand colour, sidebar and density options in the theme panel.
• One data layer (assets/js/api.js) with a mock adapter and an HTTP adapter for your own back end.
• Export to CSV, Excel (.xlsx) and JSON with column templates, without a library (assets/js/export.js).
• SCSS sources, npm build for CSS and minified files.
• Bonus: Folivo UI Kit (ui-kit/), the Folivo look as stand-alone HTML, CSS and SCSS components for other projects: tokens, 8 skins, light / dark / auto mode, corner and mark styles, highlighter marks, document page, review rows and confidence meters, drop zone, buttons, forms, cards, badges, alerts, navigation, accordion, dropdown, dialog, drawer, toast, tooltip, tables and data widgets, with an overview page of every component and a documentation chapter. No dependencies.
• Tested: axe-core 0 issues on all pages in light, dark and all skins; Lighthouse desktop accessibility and best practices 100.
• React 19 + TypeScript version of all 120 pages (folivo-react/, Vite, React Router).
• Vue 3 + TypeScript version of all 120 pages (folivo-vue/, Vite, Vue Router).
• Both have the same theme panel, data layer (mock and HTTP adapters), export and page behaviours as the HTML version.