1. Executive Summary

Quinte is a premium theme-module for Dolibarr ERP/CRM published by DoliResources. It replaces the default Dolibarr chrome with a modern SaaS interface: a token-driven sidebar, a clean top bar with global search, colour KPI cards and a data-driven dashboard.

Quinte ships two switchable demos — Quinte Light (white sidebar) and Quinte Dark Sidebar (anthracite sidebar, light content). Switching is instant and requires no reinstallation.

The theme is delivered as a standard Dolibarr module. It does not modify any core file: it uses module_parts for CSS/JS injection, a forced menu manager, and the official hook system.

2. Theme Overview

Commercial name: Quinte. Technical name: theme_quinte. Module class: modQuinte. Module id: 10000440. Constant prefix: QUINTE_. Version 1.0.

Quinte is a MODULE-theme rather than a plain CSS theme. A stylesheet alone can only recolour existing Dolibarr markup; it cannot create a sidebar with foldable accordions, a global-search top bar or a KPI dashboard. Quinte therefore injects its own chrome while keeping every native menu, permission and hook intact.

3. Design Objectives

Reproduce the visual identity of the reference mock-ups faithfully while keeping all assets original and legally exploitable. No proprietary logo, image or commercial source code has been reused.

Keep a single technical base for both demos, so that maintenance cost does not double.

Never diverge between the configuration defaults and the stylesheet defaults — they are computed in one place.

4. UI/UX Philosophy

Flat surfaces, generous spacing, soft shadows and a 14 px corner radius. Colour is used to carry meaning (status, trend, object type), never as decoration alone.

The active navigation item is a rounded tinted block, readable in both demos without relying on colour alone.

5. Quinte Light Demo

White sidebar (#FFFFFF) on a very light canvas (#F6F7FB) with white cards. The active menu entry sits in a pale violet block with violet label and icon. Top bar is white with a pill-shaped global search field.

Primary violet #5A23EB, success/teal #26D6A5, danger/pink #F0425C, dark #2D2D33.

6. Quinte Dark Sidebar Demo

The navigation column becomes anthracite (#1E212D) with a white QUINTE wordmark, light-grey labels and an active entry rendered as a grey-blue rounded block with white text.

The content area, top bar, cards and charts remain light — exactly as in the second mock-up. Only the navigation tokens change between the two demos.

7. Dashboard Features

The Quinte dashboard is served from custom/quinte/index.php and is populated from REAL Dolibarr objects: invoices (llx_facture), third parties (llx_societe), orders (llx_commande), proposals (llx_propal) and agenda events (llx_actioncomm). No static or fictitious figures are used.

Blocks: welcome header with breadcrumb and period selector (week / month / year), four colour KPI cards, a pastel indicator strip, a turnover evolution chart, a yearly breakup donut, a monthly earnings panel, a commercial pipeline, recent activity, today's agenda, latest invoices, and the native Dolibarr widgets.

8. KPI Cards

Four full-colour tiles: turnover, unpaid invoices, new clients and orders. Each carries a white circular icon, a label, the value, and a translucent variation pill with a trend caret.

Long amounts never wrap or truncate: the variation pill moves to a second line instead. The whole tile is a link to the matching Dolibarr list, pre-filtered on the same period.

9. Sidebar Features

Fed entirely by the native Dolibarr menu system (print_eldy_menu), so every module entry and every permission is honoured. There is no static, unsynchronised menu.

Live module filter, foldable accordion sub-menus up to five levels, favourites, recently opened records, collapsible rail (78 px), remembered fold state, and an off-canvas drawer below 760 px.

Style options: light, dark, coloured, floating, mini, large, compact.

10. Topbar Features

Burger toggle, global search, dark-mode switch, and the preserved native login block (print, help, entity selector, user menu, logout). Native icons ship white and are re-tinted so they stay visible on the light bar.

11. Global Search

custom/quinte/search.php groups results by object family (third parties, contacts, products, proposals, orders, invoices, projects, events) with icon, reference, label and a direct link.

12. Widgets

Native Dolibarr boxes are rendered below the dashboard, each restyled as a Quinte card. The 'database statistics' widget becomes a responsive KPI grid. Restyling is CSS-only: the content stays core-rendered.

13. Charts and Data Visualization

Charts are hand-drawn inline SVG — no external charting library is loaded, which keeps the page weight low and satisfies the strict no-external-request requirement.

Types: smooth area curve, donut, sparklines, progress bars, pipeline bars. Colours come from CSS custom properties, so charts follow the palette, the demo and the dark mode automatically.

14. Tables and Lists

Card-shaped list containers, uppercase muted headers, discreet row separators, hover highlight, pill status badges, and horizontal scrolling contained inside the card so the page itself never scrolls sideways.

15. Forms

Inputs, selects, textareas, checkboxes and date pickers are restyled with a consistent radius and a primary focus ring. Native Dolibarr form mechanisms, including select2 dropdowns and CSRF tokens, are preserved.

16. Login Pages

The login screen is fully themed: centred card, soft radial tint, full-width fields, primary submit button and themed error messages.

Dolibarr's core paints a two-tone diagonal gradient on .login_center; Quinte resets it, otherwise oblique grey and blue bands remain visible behind the card.

Being pre-session, the login page cannot read localStorage: the demo is resolved SERVER-side in css.php, which is the only place where the administrator default is authoritative.

17. Responsive Design

Breakpoints at 1280 px (KPI grid to two columns), 1100 px (chart panels stack) and 760 px (sidebar becomes an off-canvas drawer, KPI cards stack, top bar simplifies).

min-width:0 is applied to grid and flex children so wide charts scroll inside their card instead of forcing the whole page to scroll horizontally.

18. Dark Mode

A true full dark mode, independent from the demo choice and combinable with either one. It repaints page, sidebar, top bar, cards, tables, forms, modals, calendar and login page onto a single navy surface (#2A3447).

Activated from the top bar, from the configuration screen, or automatically from the browser preference.

In dark mode the KPI tiles keep saturated flat colours: a pale tint would turn brown or maroon on navy.

19. Theme Configuration

Configuration screen at custom/quinte/admin/setup.php: demo selector, ten predefined palettes plus a custom one, individual colours, sidebar / top bar / layout styles, corner radius, shadow level, font size, menu width, web font, animations, and dashboard options.

Saving bumps MAIN_IHM_PARAMS_REV so users pick up the new CSS on a normal reload rather than after an hour of browser cache.

20. User Preferences

Per-browser preferences (chosen demo, dark mode, folded sidebar) are stored in localStorage and always win over the administrator default, so each user keeps their own working environment.

21. Accessibility

Semantic links and buttons, aria-label on icon-only controls, aria-hidden on decorative SVG, visible focus rings, touch targets of at least 40 px, and status conveyed by label as well as colour.

22. Performance Optimization

No external chart or UI library. SVG is inline and compact. CSS and JS are served by two PHP endpoints with a one-hour browser cache; a per-request preview switches to no-store so a cached sheet cannot mask it.

23. Security Considerations

No core file is modified. All output is escaped with dol_escape_htmltag / dol_escape_js, SQL uses the Dolibarr DB layer with cast parameters, native CSRF tokens are preserved, and no secret is embedded.

Disabling the module only clears MAIN_MENU_*_FORCED constants that still point at quinte_menu.php, so it cannot wipe a neighbouring theme's configuration.

24. Dolibarr Integration

module_parts for CSS and JS, menus=1 to register the menu manager, hooks on main / all / toprightmenu / searchform, and a configuration page declared through config_page_url.

25. Dolibarr Compatibility

Declared minimum: Dolibarr 16. Built and verified on Dolibarr 17.0.3 with PHP 8.1. The architecture targets Dolibarr 20, 21 and later, but see the Limitations section for what was and was not executed.

26. Browser Compatibility

The stylesheet uses widely supported CSS (custom properties, flexbox, grid, clamp). Verified rendering: Chromium 148 headless. Firefox, Edge and Safari were NOT executed in this environment — see Limitations.

27. Technical Architecture

The two demos are carried by a single set of navigation tokens (--quinte-side-*) redefined under html[data-quinte-demo="darksidebar"]. There is no second stylesheet and no duplicated rule: the same CSS renders both mock-ups.

The active demo is resolved in mirror at three points — the pre-paint script in addHtmlHeader, quinte.js.php, and css.php for the pre-session login page. Resolving it in only one place would turn the setting into a silent no-op.

The JavaScript reads the attribute already set on <html> instead of a value compiled into the file, because a cached script from a previous demo would otherwise override freshly rendered server state.

28. Folder Structure

quinte/core/modules/modQuinte.class.php — module descriptor

quinte/core/menus/standard/quinte_menu.php + quinte.lib.php — menu manager and sidebar

quinte/css/quinte.css.php — dynamic stylesheet (tokens, demos, components)

quinte/js/quinte.js.php — theme, demo, fold and drawer behaviour

quinte/class/actions_quinte.class.php — hooks and pre-paint script

quinte/class/quinte_demo.class.php — demo dataset seeder

quinte/admin/setup.php — configuration screen

quinte/index.php — dashboard; quinte/search.php — global search

quinte/langs/<lang>/quinte.lang — translations

29. Installation Guide

Home > Setup > Modules > Deploy external module, upload module_quinte-1.0.zip, then enable 'Quinte' in the Interface family. Quinte immediately becomes the active menu manager.

Open the configuration screen to pick a demo, a palette and the layout options.

30. Upgrade Guide

Deploy the new ZIP over the existing folder and disable/re-enable the module. The version change bumps MAIN_IHM_PARAMS_REV, so end users load the new CSS and JS on a normal reload.

31. Customization Guide

Prefer the configuration screen. For deeper work, override the CSS custom properties: --quinte-primary, --quinte-success, --quinte-danger, --quinte-side-bg, --quinte-side-active-bg, --quinte-radius and the rest of the --quinte-* set. Adding a third demo means adding one token block, not a new stylesheet.

32. Translation System

All strings go through the Dolibarr translation system. Seven languages are shipped: English, French, Spanish, Italian, German, Dutch and Portuguese (Brazil). Every key is prefixed so it cannot silently collide with another module's generic key.

33. Screenshots Description

Screenshots were captured on a live Dolibarr 17.0.3 instance at 1600x990 with a device scale factor of 2 (3200x1980 px). Both demos were captured page by page with the demo forced per request.

Quinte Light

Included captures: 00_accueil_dolibarr.png, 01_tableau_de_bord.png, 02_liste_tiers.png, 03_fiche_client.png, 04_produits.png, 05_devis.png, 06_commandes.png, 07_factures.png, 08_projets.png, 09_agenda.png, 10_utilisateurs.png, 11_configuration.png, 12_modules.png

Quinte Dark Sidebar

Included captures: 00_accueil_dolibarr.png, 01_tableau_de_bord.png, 02_liste_tiers.png, 03_fiche_client.png, 04_produits.png, 05_devis.png, 06_commandes.png, 07_factures.png, 08_projets.png, 09_agenda.png, 10_utilisateurs.png, 11_configuration.png, 12_modules.png

34. Advantages

·       Two professional demos for the maintenance cost of one code base.

·       Dashboard fed by real Dolibarr data, not placeholders.

·       No core modification; native menus, permissions and hooks fully preserved.

·       No external JavaScript or charting library.

·       Ten palettes plus full colour customisation, exportable as JSON.

35. Limitations

Stated honestly: the following items were NOT executed in the build environment and must not be read as verified. Each line gives the procedure to check it manually.

·       Firefox, Edge and Safari were not executed — only Chromium 148 headless was available. Verify by opening the dashboard, a list page and the login page in each browser and confirming no console error.

·       Dolibarr 20 and 21 were not executed — the available benches are Dolibarr 17.0.3 and 23.0.3. Verify by deploying the ZIP on a 20.x/21.x instance and enabling the module.

·       Tablet and smartphone captures were not produced; responsive rules exist and are documented but were not photographed. Verify by resizing the browser to 768 px and 390 px.

·       Login-page captures are not shipped. The login screen is themed and was styled, but it was not captured in this run. Verify by logging out and comparing against section 16.

·       The screenshots use the shared development database, which contains large volumes of unrelated test data from other modules; the figures shown are therefore not a curated commercial dataset.

·       The 18 role-specific dashboards listed in the original specification are not all implemented: the general dashboard is delivered, and the remaining ones are described as a roadmap item in section 36.

·       Charts are rendered as a smooth area curve and a donut rather than the grouped bar chart of the reference mock-up.

36. Future Enhancements

·       Role-specific dashboards (sales, CRM, accounting, HR, stock, production, after-sales, quality, BI).

·       Grouped bar chart and combined chart types for the sales panel.

·       Boxed and compact layout presets exposed as full demos.

·       Additional languages beyond the seven currently shipped.

37. Support and Maintenance

Editor: DoliResources — https://www.doliresources.com. Copyright DoliResources. Licence GPL-3.0-or-later, consistent with the Dolibarr ecosystem.