Documentation

<!DOCTYPE html>
<html lang="en">
    <head>
        @@include('partials/title-meta.html', {"title":"Billing — Dreams HMS"})
        @@include('partials/header.html', {"page": "billing"})
    </head>
    <body class="bg-gray-50 overflow-x-hidden" data-page="billing">
        <div class="main-wrapper">
            @@include('partials/sidebar.html')
            @@include('partials/topbar.html', {"placeholder":"Search invoices..."})

            <!-- Main Content Area -->
            <div>
                <main class="flex-1 overflow-y-auto p-6 bg-gray-50 dark:bg-slate-900">
                    <div class="max-w-7xl mx-auto space-y-5">
                        @@include('partials/breadcrumb.html', {"current": "Billing", "parentUrl": "", "parent": ""})
                        <!-- Page modules content goes here -->
                    </div>
                </main>
            </div>
        </div>

        @@include('partials/script.html', {"page": "billing"})
    </body>
</html>

1. Core Theme Scripts

All core dynamics and theme actions are handled by the main script file, included in src/partials/script.html:

<script type="module" src="assets/js/script.js"></script>

2. Direct Script Calling (Page-Specific)

For page-specific libraries, custom plugins, or charts (such as Apex Charts, Flatpickr), scripts are called directly in src/partials/script.html by specifying their paths. Examples include:

You can easily update the logo in two ways:

Option 1: Overwrite Logo Image Files (Recommended)

Directly replace the default SVG logo files in the src/assets/img/ directory with your own logos using the same file names:

• logo.svg: Main logo (shown in light mode).
• logo-small.svg: Small square logo (shown when sidebar is collapsed/minimized).
• logo-white.svg: White text logo (shown in dark mode).

Option 2: Update HTML Templates

If you want to use different names or paths, open the template partial files: src/partials/topbar.html and src/partials/sidebar.html, and search for the logo tags to modify their src attribute:

The default typography font for the template is Inclusive Sans. To change it:

Open the style file src/assets/css/style.css and update the @import statement at the top of the file as well as the primary font variable in the @theme configuration block:

/* 1. Import the new Google Font at the very top of style.css */
@import url("https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap");


/* 2. Update the font variable inside the @theme block */
@theme {
    --font-family-primary: "Inclusive Sans", sans-serif;
}

All theme colors are defined as design tokens under the @theme directive in your src/assets/css/style.css file. These variables control the look and feel of components:

@theme {
    --color-primary: #0371c6;
    --color-primary-hover: #045aa0;
    --color-secondary: #f9f0d9;
    --color-secondary-hover: #06446f;
    --color-danger: #e7000b;
    --color-success: #009966;
    --color-warning: #f59e0b;
    --color-info: #008cff;
    --color-dark: #0c0c0c;
    --color-light: #f8fafc;
}

Shades such as primary-100 to primary-900 are generated from the base colors with color-mix(), so changing --color-primary updates every related utility (bg-primary, text-primary, border-primary, etc.).