1. Executive Summary

Preadmin Pro is a premium interface theme for Dolibarr ERP/CRM. It replaces the whole back-office chrome — sidebar, top bar, dashboard, cards, tables, forms and login screen — with a modern, responsive design comparable to the interfaces of SAP Fiori, Microsoft Dynamics 365, Odoo Enterprise and Zoho One.

Unlike a conventional CSS theme, which can only recolour the HTML that Dolibarr already produces, Preadmin Pro is delivered as a complete theme-module. That architecture allows it to build its own navigation structure and its own dashboard while leaving the Dolibarr core strictly untouched, so the installation remains fully upgradeable.

The product ships five complete demos. Each demo is a full identity — palette, sidebar, top bar, KPI cards, dashboard composition and login screen — and the administrator switches between them from a single visual selector in the configuration screen. On top of the chosen demo, nine colour palettes, four page layouts, six sidebar modes, four header styles, five KPI card styles, five fonts and a genuine dark mode can be combined freely.

·       Five demos: Business, Dark, Medical, Inventory and Analytics.

·       True dark mode: available for all five demos, switchable from the top bar.

·       No core modification: everything is delivered through the official module API.

·       Seven languages: French, English, Spanish, German, Italian, Portuguese and Dutch.

·       Dolibarr 16 to 23 and above: a single package for every supported release.

2. Theme Overview

 

3. Design Philosophy

The design follows four principles applied consistently across every screen.

3.1 One visible surface at a time

Nested containers are made transparent so that a single card carries the border, the radius and the shadow. This removes the stacked box-in-box effect that makes dense ERP screens hard to scan, and it is the reason Dolibarr list containers, tab bars and half-column layouts are explicitly neutralised by the theme.

3.2 Colour carries meaning

Each palette exposes a primary colour, an accent, and three semantic colours for success, danger and warning. Every tint used by the interface is derived from those values, so a customer who changes the primary colour sees the whole product follow, including hover states, chart series, sparkline fills and native Dolibarr link colours.

3.3 Density is a setting, not a default

The same screens can be rendered wide, boxed, compact or fluid. Font size, corner radius, shadows and borders are all configurable, so the theme suits both a large monitor in an office and a laptop used in the field.

3.4 Motion is optional

Transitions, hover elevation and chart drawing are grouped behind a single switch. The theme also honours the operating system's reduced-motion preference at all times, independently of that setting, which is an accessibility requirement rather than a style choice.

4. The Five Demos

A demo is a complete, self-contained design. Selecting one changes the palette, the sidebar surface, the top bar, the KPI card style, the chart colours and the login layout in a single page reload. No file has to be edited and no other setting has to be adjusted.

4.1 Preadmin Business

Bright corporate ERP

·       Palette: Orange #FE9F43 with navy ink #092C4C, teal #0E9384 and blue #155EEF

·       Chrome: White sidebar, light top bar, solid full-colour KPI tiles, 8 px radius

·       Typical use: Distribution, retail, general trading and any organisation that wants a bright, high-contrast management console.

4.2 Preadmin Dark

SaaS analytics

·       Palette: Indigo #4269E2 with violet #7C5CFC

·       Chrome: Near-black sidebar #070C18, light content area, soft KPI cards with sparklines, 12 px radius

·       Typical use: Software and service companies, agencies and any team that spends the day in the tool and prefers a low-glare navigation rail.

4.3 Preadmin Medical

Clinical clarity

·       Palette: Cyan #43A6CB with green #42C49D and blue #3D5EE1

·       Chrome: White sidebar, pastel chip KPI cards with circular icons, 14 px radius

·       Typical use: Clinics, laboratories, paramedical practices and care organisations where legibility and a calm palette matter more than visual impact.

4.4 Preadmin Inventory

Supply chain

·       Palette: Teal #0F9391 with deep green ink #091F1F and orange alerts #E0480E

·       Chrome: Deep-green sidebar, compact inline stat rows with a coloured left rule, 10 px radius

·       Typical use: Warehousing, logistics, wholesale and manufacturing, where many figures must be readable at a glance on one screen.

4.5 Preadmin Analytics

Revenue intelligence

·       Palette: Blue #2784E4 with teal #26C6B4, coral #FF6464 and amber #FEB73B

·       Chrome: Navy sidebar #0E1728, vivid gradient KPI cards, bold charts, 14 px radius

·       Typical use: Subscription businesses, finance teams and management reporting, where the dashboard is the product rather than a starting point.

 

5. Dashboard Features

Preadmin Pro replaces the Dolibarr home page with a dashboard built entirely from live data queried from the database. There is no sample content and no placeholder: every figure, curve and list reflects the actual state of the installation.

5.1 Composition

·       Quick actions: six creation shortcuts (invoice, proposal, order, customer, product, event) tinted with the demo's chart palette.

·       KPI row: turnover, unpaid invoices, new customers and orders, each with a period-over-period variation and an eight-month sparkline.

·       Turnover evolution: a twelve-month curve for the current year overlaid on the previous year, with an interactive crosshair, a marker and a tooltip.

·       Sales pipeline: a donut of commercial proposals by status, with a clickable legend.

·       Sales and purchases: a twelve-month column chart comparing issued invoices with supplier invoices.

·       Top customers: a horizontal bar list of the best customers over the selected period.

·       Recent activity: the latest invoices, orders, proposals and third parties, newest first.

·       Today's agenda: the events scheduled for the current day.

·       Latest invoices: a table with status badges and a direct link to each document.

·       Native widgets: the standard Dolibarr boxes, restyled, and still addable, hideable and reorderable per user.

5.2 Period selector

A week / month / year selector recalculates every KPI, its variation and the comparison range. Each KPI tile is a link to the corresponding Dolibarr list, pre-filtered to exactly the same period and status as the tile, so the total displayed on the tile and the number of rows in the destination list always agree.

5.3 Configurable business rules

Turnover is an ambiguous notion, so it is exposed as configuration rather than hard-coded. The administrator chooses whether it is computed on amounts including or excluding tax, and whether abandoned invoices are counted. The same choice feeds the KPI, the chart and the filter used by the tile's link, so the three can never disagree.

5.4 Empty states

Every panel that can legitimately hold no data renders an explicit empty state — an icon, a title, a one-line explanation and, where relevant, a call to action — instead of an empty card. A new installation therefore looks intentional rather than broken.

6. Sidebar Features

The sidebar is generated from Dolibarr's own menu tree. Every installed module, every permission rule and every third-party menu entry appears automatically; nothing has to be declared in the theme.

·       Live module filter: typing filters the navigation instantly.

·       Favourites: the user's real Dolibarr bookmarks, plus a one-click 'add this page'.

·       Accordion navigation: a group expands in place; the label navigates and the chevron folds.

·       Recently opened: the objects opened during the session, with a colour-coded type tag.

·       Module counter: active modules versus available modules, linking to module management.

·       Collapse to a rail: a desktop-only icon rail; the preference is remembered.

·       Six modes: demo default, mini, large, floating, dark, light and coloured.

Menu entries are identified by a level-encoded identifier rather than by their URL. Two entries that share a destination therefore never highlight together, and the active item stays correct when the user arrives from another page or opens a second browser tab.

7. Top Bar Features

·       Menu button: collapses the rail on desktop and opens the drawer on mobile.

·       Global search: searches customers, invoices, products, proposals, orders, projects and users, and opens a grouped result page.

·       Keyboard shortcut: Ctrl+K (Cmd+K on macOS) focuses the search field.

·       Theme switch: toggles light and dark; the choice is remembered per browser.

·       Native tools preserved: notifications, print, help, company selector and the user menu are kept and restyled, never replaced.

·       Four header styles: demo default, transparent, light, dark and coloured.

Dolibarr ships its top-bar icons in white because the standard theme uses a dark menu. On a light bar they would be invisible, so the theme repaints every icon and link with a token that adapts to both light and dark mode.

8. Login Pages

Each demo ships its own login screen. Dolibarr renders the authentication form itself, and the theme deliberately does not replace that template: it styles the form and adds a brand panel around it. Authentication, password recovery and any external authentication module therefore keep working exactly as before.

 

Below 900 pixels the brand panel is hidden and the form takes the full width, so the login screen stays usable on a phone.

 

9. Widgets

The theme keeps Dolibarr's native widget system and restyles it. Each widget becomes a card, and users retain the ability to add, hide and reorder widgets by drag and drop, with the arrangement saved per user. On a user's first visit a sensible default set is installed so the dashboard is never empty and the widget selector is immediately available.

·       Database statistics, rendered as a responsive KPI grid

·       Open account balances

·       Products below their stock alert

·       Monthly invoice, order and proposal graphs

·       Any widget provided by another installed module

10. Cards

Five KPI card styles are available. The demo selects one, and the administrator may override that choice independently of the demo.

 

11. Charts

All charts are generated as inline SVG on the server. No charting library is downloaded, which keeps the page weight low and means the dashboard renders correctly with no external network access.

·       Area and line chart: twelve-month turnover with previous-year comparison and an interactive crosshair.

·       Donut: the commercial pipeline by status; empty segments are omitted entirely so that rounded stroke ends cannot paint stray dots on the ring.

·       Column chart: sales against purchases over twelve months.

·       Horizontal bars: the best customers over the selected period.

·       Sparklines: an eight-month trend inside each KPI card.

12. Tables and Lists

Dolibarr's list screens are restyled without altering their behaviour: filters, column selection, sorting, pagination and mass actions are untouched.

·       The list container is the card; the table inside it is transparent, which removes the white notches that otherwise appear at the rounded corners

·       Uppercase, letter-spaced column headers with a subtle separator

·       Pill-shaped status badges using the semantic colours

·       Row separators re-tinted to a theme token, because the core hard-codes a near-white value that is harsh in dark mode

·       On a narrow screen the table scrolls inside its own card rather than widening the page

13. Forms

Inputs, selects, textareas and buttons follow the palette: themed background, configurable radius, and a focus ring drawn in the primary colour. Select2 dropdowns receive a solid themed surface and a readable highlight, correcting a case where the highlighted option rendered white on white and became invisible on hover.

 

14. Theme Configuration

The configuration screen is reached from Home > Setup > Modules > Preadmin Pro. Settings are grouped into six sections, and every default value shown there is read from the same preset file the stylesheet reads, so a reset can never restore a palette the theme no longer uses.

14.1 Demo

Five miniature previews, each painted with its own demo's sidebar, top bar and KPI colours. Selecting one and saving switches the entire interface.

14.2 Colours

 

14.3 Layout

 

14.4 Typography and effects

 

14.5 Sidebar and dashboard

 

14.6 Access control

Writing to the configuration is restricted to administrators, and the restriction is enforced on the server, not merely in the interface. On a public demonstration platform the screen can additionally be made visible to visitors in read-only mode, with the Save and Reset controls shown but disabled.

15. Dark Mode

Dark mode is a genuine second palette, not an inverted filter. Each demo defines its own dark surfaces, text colours, borders and sidebar tones, so the dark variant of the Medical demo is recognisably Medical rather than a generic dark theme.

·       Switched from the top bar, or set as the default for new users

·       A user's own choice always takes precedence over the administrator default

·       Applied by an inline script in the page head, before the first paint, so a reload never flashes the light theme first

·       Native Dolibarr screens follow automatically, because the theme redefines the core CSS variables to point at its own tokens

·       Hard-coded core colours that the variables cannot reach — row separators, calendar cells, information boxes — are individually re-tinted

16. Responsive Design

 

Absence of horizontal scrolling is verified by measurement at 390 pixels, not by inspection. Wide content — the twelve-month column chart, data tables, native widget graphs and the Dolibarr login block — scrolls inside its own container so the page itself never widens.

 

17. Technical Architecture

Preadmin Pro is built on six mechanisms, all of them part of Dolibarr's official module API.

 

Because all five demos are produced by one resolved preset rather than by five stylesheets, a change to a component is made once and is correct in every demo. This is the main reason the product can offer five identities without multiplying the maintenance cost by five.

18. Folder Structure

preadminpro/

  core/preadminpro_presets.php        Preset engine: the five demos and every override

  core/modules/modPreadminPro.class.php   Module descriptor, activation and removal

  core/menus/standard/preadminpro_menu.php    Menu manager

  core/menus/standard/preadminpro.lib.php     Sidebar renderer

  class/actions_preadminpro.class.php     Hooks (redirect, pre-paint state, print view)

  class/preadminpro_demo.class.php        Optional demonstration data

  css/preadminpro.css.php                 Complete stylesheet, driven by the preset

  js/preadminpro.js.php                   Theme switch, drawer, accordions, login panel

  index.php                               Dashboard

  search.php                              Global search results

  admin/setup.php                         Configuration screen

  langs/<lang>/preadminpro.lang           Seven language files

 

19. Browser Compatibility

 

The theme relies on CSS custom properties, flexbox and CSS grid, all supported by the versions listed. No JavaScript framework and no external library are required.

20. Dolibarr Compatibility

The package declares Dolibarr 16.0 as its floor and has been developed and verified against 17.0.3. Only core functions whose signatures are stable across that range are used, so the same archive installs on version 16 and on current releases without adaptation.

·       No file of the Dolibarr core is modified, replaced or patched

·       The menu tree, permissions and hooks of every other module keep working

·       Menus of third-party modules appear in the sidebar automatically

·       Disabling the theme restores the standard interface immediately

·       Removal only clears the shared menu constants if they still point at this theme, so uninstalling never damages another theme installed alongside it

 

21. Installation Guide

Step 1. Log in to Dolibarr as an administrator.

Step 2. Open Home > Setup > Modules / Applications.

Step 3. Click 'Deploy or install an external module' and upload module_PreadminPro-1.0.zip. Alternatively, unzip the archive into the custom directory of the Dolibarr installation.

Step 4. Find Preadmin Pro in the module list and enable it.

Step 5. Reload any page. The sidebar, top bar and dashboard are applied immediately.

Step 6. Open the module's configuration screen to choose a demo and adjust the settings.

If the sidebar does not appear immediately after a first activation, disable and re-enable the module once. Dolibarr writes the constant that registers the theme's menu directory during activation, and a single re-run guarantees it is present.

22. Customization Guide

22.1 Without writing code

The configuration screen covers the demo, the palette, the layout, the sidebar, the header, the KPI card style, the font, the radius, the shadows, the borders, the animations, dark mode and the dashboard content. This is sufficient for the large majority of projects.

22.2 Company logo

The sidebar shows the square logo configured in Home > Setup > Company/Organisation. Setting it there brands the interface with no further work.

22.3 For an integrator

·       A new demo: add an entry to the preset table in core/preadminpro_presets.php. It is immediately offered in the configuration screen, including its miniature preview.

·       Additional styling: every class is prefixed with the module name, so custom rules can be targeted safely without colliding with Dolibarr or with another module.

·       New wording: all visible text comes from the language files; no string is hard-coded.

After changing a stylesheet during development, force a reload with Ctrl+Shift+R: the theme assets are cached for one hour. In production this is handled automatically, because saving the configuration increments Dolibarr's asset revision and end users receive the new files on their next normal page load.

23. Screenshots

The Screenshots folder contains 90 images: 18 per demo, captured at 3200 x 1980 pixels (1600 x 990 logical pixels at twice the device scale) except the tablet and mobile views, which use their own device dimensions.

 

 

24. Performance Optimization

·       No charting library: every chart is inline SVG generated on the server; nothing is downloaded to draw them.

·       No JavaScript framework: the script is plain JavaScript, a few kilobytes once compressed.

·       Vector iconography: icons are SVG paths or the Font Awesome set Dolibarr already ships; no additional icon font is loaded.

·       Cached assets: the stylesheet and script are served with a one-hour cache and an automatic revision bump, so an update reaches users without a manual cache clear.

·       Optional web font: disabling it removes every external request, which also suits installations without internet access.

·       Session-cached counters: expensive counts, such as the number of available modules, are computed once per session.

·       Guarded queries: every dashboard query is scoped by entity and date range, and every division is protected against a zero denominator.

25. Advantages

·       Five complete designs in a single package, switchable in one reload

·       A genuine dark mode for each of the five demos

·       An unusually deep configuration screen: palette, layout, sidebar, header, KPI style, typography and effects

·       A dashboard built on live data, with tiles that link to lists filtered to the same scope

·       Strictly no core modification, so the Dolibarr installation stays upgradeable

·       Seven languages, with no hard-coded interface text

·       Compatible from Dolibarr 16 upwards from a single archive

·       Automatic support for the menus of every other installed module

26. Future Enhancements

The following are candidate directions for later releases and are not part of version 1.0.

·       Additional demos derived from the same preset engine

·       Per-user demo selection, in addition to the current instance-wide setting

·       A drag-and-drop dashboard composer for the theme's own panels

·       Saved configuration profiles that can be exported and imported between installations

·       Optional right-to-left layout support

 

Preadmin Pro 1.0 - Functional Description

Copyright (C) 2026 DoliResources - https://www.doliresources.com