Showing preview only (1,185K chars total). Download the full file or copy to clipboard to get everything.
Repository: puikinsh/Adminator-admin-dashboard
Branch: master
Commit: 020731181798
Files: 174
Total size: 1.1 MB
Directory structure:
gitextract_t4ripph3/
├── .babelrc
├── .claude/
│ └── settings.local 2.json
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── ISSUE_TEMPLATE.md
│ └── workflows/
│ ├── merge.yml
│ └── release.yml
├── .gitignore
├── .npmignore
├── .nvmrc
├── .stylelintrc.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── IMPROVEMENT_PLAN.md
├── LICENSE
├── README.md
├── browserslist
├── ci/
│ ├── getVersion.sh
│ └── verifyVersion.sh
├── docs/
│ ├── COMPONENT_GUIDE.md
│ ├── README.md
│ ├── _config.yml
│ ├── _sass/
│ │ └── custom.scss
│ ├── api/
│ │ └── theme-api.md
│ ├── api.md
│ ├── assets/
│ │ └── images/
│ │ ├── adminator-dark-mode.avif
│ │ └── adminator-light-mode.avif
│ ├── customization/
│ │ └── theme-system.md
│ ├── customization.md
│ ├── examples/
│ │ └── theme-integration.md
│ ├── examples.md
│ ├── getting-started/
│ │ ├── build-deployment.md
│ │ ├── development.md
│ │ ├── installation.md
│ │ └── project-structure.md
│ ├── getting-started.md
│ └── index.md
├── eslint.config.mjs
├── jsconfig.json
├── package.json
├── src/
│ ├── 404.html
│ ├── 500.html
│ ├── assets/
│ │ ├── scripts/
│ │ │ ├── app.js
│ │ │ ├── charts/
│ │ │ │ ├── chartJS/
│ │ │ │ │ └── index.js
│ │ │ │ ├── easyPieChart/
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.js
│ │ │ │ └── sparkline/
│ │ │ │ └── index.js
│ │ │ ├── chat/
│ │ │ │ └── index.js
│ │ │ ├── components/
│ │ │ │ ├── Chart.js
│ │ │ │ └── Sidebar.js
│ │ │ ├── constants/
│ │ │ │ └── colors.js
│ │ │ ├── datatable/
│ │ │ │ └── index.js
│ │ │ ├── datepicker/
│ │ │ │ └── index.js
│ │ │ ├── email/
│ │ │ │ └── index.js
│ │ │ ├── fullcalendar/
│ │ │ │ └── index.js
│ │ │ ├── googleMaps/
│ │ │ │ └── index.js
│ │ │ ├── index.js
│ │ │ ├── masonry/
│ │ │ │ └── index.js
│ │ │ ├── popover/
│ │ │ │ └── index.js
│ │ │ ├── scrollbar/
│ │ │ │ └── index.js
│ │ │ ├── search/
│ │ │ │ └── index.js
│ │ │ ├── skycons/
│ │ │ │ └── index.js
│ │ │ ├── ui/
│ │ │ │ └── index.js
│ │ │ ├── utils/
│ │ │ │ ├── date.js
│ │ │ │ ├── dom.js
│ │ │ │ ├── events.js
│ │ │ │ ├── index.js
│ │ │ │ ├── logger.js
│ │ │ │ ├── performance.js
│ │ │ │ ├── sanitize.js
│ │ │ │ ├── storage.js
│ │ │ │ └── theme.js
│ │ │ └── vectorMaps/
│ │ │ └── index.js
│ │ ├── static/
│ │ │ └── fonts/
│ │ │ └── icons/
│ │ │ └── fontawesome/
│ │ │ └── FontAwesome.otf
│ │ └── styles/
│ │ ├── index.scss
│ │ ├── spec/
│ │ │ ├── components/
│ │ │ │ ├── easyPieChart.scss
│ │ │ │ ├── footer.scss
│ │ │ │ ├── forms.scss
│ │ │ │ ├── index.scss
│ │ │ │ ├── loader.scss
│ │ │ │ ├── masonry.scss
│ │ │ │ ├── modernize.scss
│ │ │ │ ├── pageContainer.scss
│ │ │ │ ├── progressBar.scss
│ │ │ │ ├── sidebar.scss
│ │ │ │ └── topbar.scss
│ │ │ ├── generic/
│ │ │ │ ├── base.scss
│ │ │ │ └── index.scss
│ │ │ ├── index.scss
│ │ │ ├── screens/
│ │ │ │ ├── chat.scss
│ │ │ │ ├── email.scss
│ │ │ │ └── index.scss
│ │ │ ├── settings/
│ │ │ │ ├── baseColors.scss
│ │ │ │ ├── borders.scss
│ │ │ │ ├── breakpoints.scss
│ │ │ │ ├── fonts.scss
│ │ │ │ ├── index.scss
│ │ │ │ └── materialColors.scss
│ │ │ ├── tools/
│ │ │ │ ├── index.scss
│ │ │ │ └── mixins/
│ │ │ │ ├── clearfix.scss
│ │ │ │ ├── index.scss
│ │ │ │ ├── mediaQueriesRanges.scss
│ │ │ │ └── placeholder.scss
│ │ │ └── utils/
│ │ │ ├── colors.scss
│ │ │ ├── index.scss
│ │ │ └── layout/
│ │ │ ├── helpers/
│ │ │ │ ├── border.scss
│ │ │ │ ├── flex.scss
│ │ │ │ ├── index.scss
│ │ │ │ ├── layout.scss
│ │ │ │ ├── lists.scss
│ │ │ │ ├── margin.scss
│ │ │ │ ├── objects.scss
│ │ │ │ ├── padding.scss
│ │ │ │ ├── positions.scss
│ │ │ │ ├── pseudo.scss
│ │ │ │ ├── sizes.scss
│ │ │ │ └── typography.scss
│ │ │ ├── index.scss
│ │ │ ├── mixins/
│ │ │ │ ├── generateResponsive.scss
│ │ │ │ ├── index.scss
│ │ │ │ └── mediaQueryCondition.scss
│ │ │ └── utils/
│ │ │ ├── center.scss
│ │ │ ├── gap.scss
│ │ │ ├── index.scss
│ │ │ ├── layers.scss
│ │ │ └── peers.scss
│ │ ├── utils/
│ │ │ ├── mobile.scss
│ │ │ └── theme.css
│ │ └── vendor/
│ │ ├── datepicker.scss
│ │ ├── font-awesome.css
│ │ ├── fullcalendar.scss
│ │ ├── index.scss
│ │ ├── jquery.datatables.scss
│ │ ├── perfectScrollbar.scss
│ │ ├── sparkline.scss
│ │ └── themify-icons.css
│ ├── basic-table.html
│ ├── blank.html
│ ├── buttons.html
│ ├── calendar.html
│ ├── charts.html
│ ├── chat.html
│ ├── compose.html
│ ├── datatable.html
│ ├── email.html
│ ├── forms.html
│ ├── google-maps.html
│ ├── index.html
│ ├── signin.html
│ ├── signup.html
│ ├── ui.html
│ └── vector-maps.html
├── tests/
│ ├── setup.js
│ └── utils/
│ ├── dom.test.js
│ ├── logger.test.js
│ └── theme.test.js
├── vitest.config.js
├── webpack/
│ ├── config.js
│ ├── devServer.js
│ ├── manifest.js
│ ├── plugins/
│ │ ├── caseSensitivePlugin.js
│ │ ├── copyPlugin.js
│ │ ├── dashboardPlugin.js
│ │ ├── extractPlugin.js
│ │ ├── htmlPlugin.js
│ │ ├── index.js
│ │ └── internal.js
│ └── rules/
│ ├── css.js
│ ├── fonts.js
│ ├── images.js
│ ├── index.js
│ ├── js.js
│ └── sass.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": false,
"modules": false
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
================================================
FILE: .claude/settings.local 2.json
================================================
{
"permissions": {
"allow": [
"Bash(npm run build:*)",
"Bash(npm install)",
"Bash(npm run lint)",
"Bash(rm:*)",
"Bash(ls:*)",
"Bash(pkill:*)",
"Bash(true)",
"Bash(npm start)",
"Bash(grep:*)",
"Bash(sudo rm:*)",
"Bash(npx eslint:*)",
"Bash(npm run lint:*)",
"Bash(gh release create:*)",
"Bash(npm search:*)",
"Bash(npm pack:*)",
"Bash(npm:*)",
"WebFetch(domain:keenthemes.com)"
],
"deny": []
}
}
================================================
FILE: .editorconfig
================================================
# -----------------------------
# General
# -----------------------------
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
# top-most EditorConfig file
root = true
# -----------------------------
# All Files
# -----------------------------
[*]
end_of_line = lf
charset = utf-8
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
# -----------------------------
# Markdown Files
# -----------------------------
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
# -----------------------------
# General
# -----------------------------
# AUTO-DETECT - Handle line endings automatically for files detected
# as text and leave all files detected as binary untouched.
# This will handle all files NOT defined below.
* text=auto
# -----------------------------
# Source Code
# -----------------------------
*.css text
*.html text
*.js text
*.json text
*.scss text
# -----------------------------
# Documentation
# -----------------------------
*.md text
CHANGELOG text
LICENSE text
# -----------------------------
# Configs
# -----------------------------
.editorconfig text
.gitattributes text
.gitconfig text
.gitignore text
.babelrc text
.stylelintrc text
.eslintrc text
.yarnclean text
*.yml text
browserlist text
yarn.lock text
# -----------------------------
# Graphics
# -----------------------------
*.gif binary
*.ico binary
*.jpg binary
*.jpeg binary
*.png binary
*.svg text
# -----------------------------
# Fonts
# -----------------------------
*.ttf binary
*.eot binary
*.otf binary
*.woff binary
*.woff2 binary
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.
ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
PLEASE SEARCH GITHUB FOR A SIMILAR ISSUE OR PR BEFORE SUBMITTING
-->
<!-- DON'T FORGET REMOVE UNNECESSARY -->
<h1>Bug report</h1>
<h1>Feature request</h1>
<h1>Support request</h1>
<h1>Documentation issue</h1>
<!-- Optionally describe the motivation or the concrete use case -->
# Current behavior
<!-- Describe how the issue manifests -->
# Expected behavior
<!-- Describe what the desired behavior would be. -->
<!-- For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem -->
# Environment
Platform:
Browser:
For building issues:
Node:
NPM:
<!-- run `node --version` -->
<!-- run `npm --version` -->
================================================
FILE: .github/workflows/merge.yml
================================================
name: Merge checks
on:
pull_request:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22.x]
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linting
run: npm run lint
- name: Build
run: npm run build
- name: Get version
id: version
run: echo "version=v$(./ci/getVersion.sh)" >> $GITHUB_OUTPUT
- name: Verify version
run: ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
================================================
FILE: .github/workflows/release.yml
================================================
name: Build and Release
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [22.x]
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run linting
run: npm run lint
- name: Build minified release
run: |
npm run release:minified
zip -r -j static_minified.zip dist/*
- name: Build unminified release
run: |
npm run release:unminified
zip -r -j static_unminified.zip dist/*
- name: Get version
id: version
run: echo "version=v$(./ci/getVersion.sh)" >> $GITHUB_OUTPUT
- name: Verify version
run: ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
- name: Create GitHub Release
uses: softprops/action-gh-release@v2
with:
name: ${{ steps.version.outputs.version }}
tag_name: ${{ steps.version.outputs.version }}
files: |
static_minified.zip
static_unminified.zip
fail_on_unmatched_files: true
prerelease: false
draft: false
generate_release_notes: true
================================================
FILE: .gitignore
================================================
# ----------------------------
# Generated Files & Folders
# ----------------------------
# [1] : Windows thumbnail cache files.
# [2] : Folder config file.
# [3] : Recycle Bin used on file shares.
.idea
.DS_Store
.sass-cache
Thumbs.db # [1]
ehthumbs.db # [1]
Desktop.ini # [2]
$RECYCLE.BIN # [3]
# ----------------------------
# Packaging
# ----------------------------
logs
*.log
npm-debug.log*
node_modules
yarn.lock
yarn-error.log*
pnpm-lock.yaml
package-lock.json
# ----------------------------
# Project Folders
# ----------------------------
build/
dist/
# ----------------------------
# Development Files
# ----------------------------
*.map
*.ts
tsconfig.json
.env
.env.local
.env.development
.env.test
.env.production
# ----------------------------
# Editor Directories
# ----------------------------
.vscode/
.idea/
*.swp
*.swo
*~
# ----------------------------
# OS Files
# ----------------------------
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
CLAUDE.md
release.md
================================================
FILE: .npmignore
================================================
# Development files
node_modules/
.git/
.gitignore
.eslintrc.js
.stylelintrc.json
# Build artifacts that aren't needed
webpack.config.js
babel.config.js
# Documentation that's not essential for npm users
.github/
docs/
# IDE files
.vscode/
.idea/
*.swp
*.swo
*~
# OS files
.DS_Store
Thumbs.db
# Logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Coverage directory used by tools like istanbul
coverage/
# Temporary folders
tmp/
temp/
================================================
FILE: .nvmrc
================================================
20
================================================
FILE: .stylelintrc.json
================================================
{
"extends": "stylelint-config-standard-scss",
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"at-rule-empty-line-before": null,
"no-descending-specificity": null,
"selector-class-pattern": null,
"scss/double-slash-comment-empty-line-before": null,
"scss/no-global-function-names": null,
"declaration-property-value-no-unknown": null,
"scss/dollar-variable-empty-line-before": null,
"scss/operator-no-newline-after": null,
"scss/load-partial-extension": null,
"media-feature-range-notation": null,
"color-function-notation": null,
"color-function-alias-notation": null,
"alpha-value-notation": null,
"color-hex-length": null,
"no-duplicate-selectors": null,
"shorthand-property-no-redundant-values": null,
"scss/at-extend-no-missing-placeholder": null,
"declaration-block-no-redundant-longhand-properties": null,
"scss/at-mixin-argumentless-call-parentheses": null,
"scss/at-rule-conditional-no-parentheses": null,
"scss/dollar-variable-pattern": null,
"scss/at-mixin-pattern": null,
"scss/dollar-variable-colon-space-before": null,
"length-zero-no-unit": null,
"property-no-deprecated": null,
"selector-not-notation": null,
"import-notation": null,
"scss/comment-no-empty": null,
"value-keyword-case": null,
"function-name-case": null,
"declaration-property-value-keyword-no-deprecated": null,
"property-no-vendor-prefix": null,
"font-family-name-quotes": null,
"font-family-no-missing-generic-family-keyword": null,
"at-rule-no-vendor-prefix": null,
"rule-empty-line-before": null,
"declaration-empty-line-before": null,
"no-empty-source": null,
"scss/dollar-variable-colon-space-after": null,
"scss/double-slash-comment-whitespace-inside": null,
"selector-no-vendor-prefix": null,
"declaration-block-single-line-max-declarations": null
}
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## [3.0.0] - 2026-01-13
### Major Architecture & Developer Experience Release
This release represents a comprehensive overhaul of the template's architecture, adding professional-grade utilities, testing infrastructure, security hardening, and optimized build configuration. This is the most developer-friendly release yet.
### Key Improvements
#### New Utility Modules
- **Events** (`src/assets/scripts/utils/events.js`) - Event delegation, debounce, throttle utilities
- **Performance** (`src/assets/scripts/utils/performance.js`) - ResizeObserver, IntersectionObserver, lazy loading
- **Storage** (`src/assets/scripts/utils/storage.js`) - Safe localStorage wrapper with in-memory fallback
- **Sanitize** (`src/assets/scripts/utils/sanitize.js`) - HTML/input sanitization for XSS prevention
- **Logger** (`src/assets/scripts/utils/logger.js`) - Development-only logging utility
#### Testing Infrastructure
- **Vitest** - Modern testing framework with fast execution
- **Coverage Reports** - V8-based code coverage via `npm run test:coverage`
- **JSDOM** - Browser environment simulation for DOM testing
- **Test Files** - Initial test suites for theme, DOM, and logger utilities
#### Build & Bundle Optimization
- **Code Splitting** - Separate chunks for Chart.js, FullCalendar, Bootstrap
- **Bundle Analyzer** - New `npm run build:analyze` command for visual bundle inspection
- **TerserPlugin** - Console/debugger removal in production builds
- **Runtime Chunk** - Extracted webpack runtime for better caching
- **Lodash Removed** - Replaced with custom Events utility (~70KB saved)
#### Documentation
- **API Reference** (`docs/API.md`) - Complete API documentation for all utilities
- **Component Guide** (`docs/COMPONENT_GUIDE.md`) - Development patterns and examples
- **Updated CLAUDE.md** - Enhanced project documentation
#### Code Quality
- **Removed Dead Code** - Deleted `app 2.js` and unused `sidebar/index.js`
- **HTML Accessibility** - Added `lang="en"` to all 18 HTML files
- **TypeScript Declarations** - Added `types/adminator.d.ts` for IDE support
- **JSConfig** - Enhanced IDE autocomplete via `jsconfig.json`
- **VSCode Settings** - Project-specific editor configuration
### Technical Details
**Removed Dependencies:**
- `lodash` (4.17.21) - Replaced with custom Events.debounce/throttle
**New Dev Dependencies:**
- `vitest` (4.0.17) - Testing framework
- `@vitest/coverage-v8` (4.0.17) - Coverage reporting
- `jsdom` (27.4.0) - DOM testing environment
- `webpack-bundle-analyzer` (5.1.1) - Bundle visualization
**Updated Dependencies:**
- All dependencies updated to latest versions
- Webpack 5.104.1 with code splitting configuration
- Full security audit with zero vulnerabilities
**Build Output (Code Splitting):**
| Chunk | Size |
|-------|------|
| runtime.js | 49.6 KB |
| vendor-fullcalendar.js | 654 KB |
| vendor-chartjs.js | 529 KB |
| vendors.js | 384 KB |
| main.js | 2.81 MB |
### New Scripts
```bash
npm run test # Run tests in watch mode
npm run test:run # Run tests once
npm run test:coverage # Run tests with coverage
npm run build:analyze # Build with bundle analyzer
```
### Files Added
**Utilities:**
- `src/assets/scripts/utils/events.js`
- `src/assets/scripts/utils/performance.js`
- `src/assets/scripts/utils/storage.js`
- `src/assets/scripts/utils/sanitize.js`
- `src/assets/scripts/utils/logger.js`
**Testing:**
- `vitest.config.js`
- `tests/setup.js`
- `tests/utils/theme.test.js`
- `tests/utils/dom.test.js`
- `tests/utils/logger.test.js`
**Documentation:**
- `docs/API.md`
- `docs/COMPONENT_GUIDE.md`
**IDE Support:**
- `types/adminator.d.ts`
- `jsconfig.json`
- `.vscode/settings.json`
- `.vscode/extensions.json`
### Files Removed
- `src/assets/scripts/app 2.js` (dead code)
- `src/assets/scripts/sidebar/index.js` (unused)
### Build Status
- Zero build errors
- Zero build warnings
- Zero security vulnerabilities
- JavaScript linting: 0 errors, 0 warnings
- SCSS linting: 0 errors, 0 warnings
- All tests passing
### Compatibility
- Node.js 14+ (tested with latest versions)
- All modern browsers supported
- Mobile-responsive functionality maintained
- Dark mode functionality preserved
- Full backward compatibility with v2.x
---
## [2.9.0] - 2025-12-02
### Comprehensive Dependency Updates & Linting Modernization
This release brings all dependencies to their absolute latest versions with enhanced SCSS linting support and zero security vulnerabilities.
### Key Improvements
#### All Dependencies Updated to Latest
- **Webpack 5.103.0** - Latest Webpack with performance improvements
- **ESLint 9.39.1** - Latest ESLint with modern flat configuration
- **Sass 1.94.2** - Latest Sass compiler with improved features
- **TypeScript 5.9.3** - Latest TypeScript compiler
- **Stylelint 16.26.1** - Latest SCSS/CSS linting
- **Chart.js 4.5.1** - Latest charting library with bug fixes
- **Day.js 1.11.19** - Latest date manipulation library
#### Enhanced SCSS Linting
- **Added stylelint-config-standard-scss** - Proper SCSS-specific linting support
- **Updated .stylelintrc.json** - Configured for SCSS syntax compatibility
- **Zero Linting Errors** - Both JavaScript and SCSS pass all checks
#### Security & Quality
- **Zero Security Vulnerabilities** - All dependencies audited and secure
- **Fixed node-forge vulnerabilities** - Updated to v1.3.2 (ASN.1 fixes)
- **Fixed js-yaml vulnerabilities** - Updated to v4.1.1/v3.14.2 (prototype pollution fixes)
- **Clean Build Output** - No errors or warnings in production build
### Technical Details
**Major Dependencies Updated:**
- @babel/core: 7.28.3 → 7.28.5
- @babel/eslint-parser: 7.28.0 → 7.28.5
- @babel/preset-env: 7.28.3 → 7.28.5
- @babel/runtime: 7.28.3 → 7.28.4
- @eslint/js: 9.34.0 → 9.39.1
- @typescript-eslint/eslint-plugin: 8.42.0 → 8.48.1
- @typescript-eslint/parser: 8.42.0 → 8.48.1
- chart.js: 4.5.0 → 4.5.1
- cross-env: 10.0.0 → 10.1.0
- dayjs: 1.11.18 → 1.11.19
- eslint: 9.34.0 → 9.39.1
- globals: 16.3.0 → 16.5.0
- html-webpack-plugin: 5.6.4 → 5.6.5
- jsvectormap: 1.6.0 → 1.7.0
- postcss-preset-env: 10.3.1 → 10.4.0
- sass: 1.92.0 → 1.94.2
- sass-loader: 16.0.5 → 16.0.6
- stylelint: 16.23.1 → 16.26.1
- stylelint-config-standard: 38.0.0 → 39.0.1
- typescript: 5.9.2 → 5.9.3
- webpack: 5.101.3 → 5.103.0
**New Dependencies:**
- stylelint-config-standard-scss: 16.0.0 - SCSS-specific linting rules
**Build Tools Updated:**
- copy-webpack-plugin: 13.0.0 → 13.0.1
- mini-css-extract-plugin: 2.9.3 → 2.9.4
- postcss-loader: 8.1.1 → 8.2.0
### Build Status
- Zero build errors
- Zero build warnings
- Zero security vulnerabilities
- JavaScript linting: 0 errors, 0 warnings
- SCSS linting: 0 errors, 0 warnings
- Production build: Compiled successfully
### Compatibility
- Node.js 14+ (tested with latest versions)
- All modern browsers supported
- Mobile-responsive functionality maintained
- Dark mode functionality preserved
---
## [2.8.1] - 2025-09-03
### Latest Dependency Updates & Security Enhancements
This release brings all dependencies up to their latest stable versions, focusing on Bootstrap 5.3.8 upgrade, enhanced security, and improved development tooling for optimal performance and maintainability.
### Key Improvements
#### Framework & Core Updates
- **Bootstrap 5.3.8** - Updated from 5.3.7 with latest bug fixes and improvements
- **Webpack 5.101.3** - Latest Webpack with enhanced performance optimizations
- **ESLint 9.34.0** - Updated to latest ESLint with modern flat configuration support
- **Sass 1.92.0** - Latest Sass compiler with improved performance and features
- **Day.js 1.11.18** - Updated lightweight date manipulation library
#### Development & Build Tools
- **TypeScript ESLint Support** - Added TypeScript 5.9.2 and @typescript-eslint packages for enhanced code quality
- **Modern ESLint Configuration** - Created comprehensive tsconfig.json for TypeScript ESLint integration
- **Zero JavaScript Linting Errors** - Fixed all ESLint issues in webpack configuration files
- **Enhanced Development Experience** - Improved hot module replacement and build performance
#### Security & Quality
- **Zero Security Vulnerabilities** - All dependencies updated with comprehensive security audit
- **jsvectormap 1.7.0** - Updated vector map library with latest features and improvements
- **Build System Optimization** - Improved webpack configuration with proper trailing commas and code style
- **Development Server Enhancements** - Stable development server with hot reload functionality
### Technical Details
**Major Dependencies Updated:**
- bootstrap: 5.3.7 → 5.3.8
- webpack: 5.101.0 → 5.101.3
- eslint: 9.33.0 → 9.34.0
- sass: 1.90.0 → 1.92.0
- dayjs: 1.11.13 → 1.11.18
- jsvectormap: 1.6.0 → 1.7.0
- @eslint/js: 9.33.0 → 9.34.0
**Build Tools Updated:**
- @babel/core: 7.28.0 → 7.28.3
- @babel/runtime: 7.28.2 → 7.28.3
- copy-webpack-plugin: 13.0.0 → 13.0.1
- html-webpack-plugin: 5.6.3 → 5.6.4
- mini-css-extract-plugin: 2.9.3 → 2.9.4
- postcss-loader: 8.1.1 → 8.2.0
- postcss-preset-env: 10.2.4 → 10.3.1
**New Additions:**
- @typescript-eslint/parser: 8.42.0 - TypeScript ESLint parser support
- @typescript-eslint/eslint-plugin: 8.42.0 - TypeScript ESLint rules
- typescript: 5.9.2 - TypeScript compiler for enhanced development
### Build Status
- Zero build errors
- Zero build warnings
- Zero security vulnerabilities
- JavaScript linting: 0 errors, 0 warnings
- Development server: Running successfully
- Hot module replacement: Functional
### Compatibility
- Node.js 14+ (tested with latest versions)
- All modern browsers supported
- Mobile-responsive functionality maintained
- Dark mode functionality preserved
## [2.8.0] - 2025-08-11
### Dependency Modernization & Security Updates
This release focuses on modernizing the build system, updating dependencies to their latest stable versions, and removing deprecated packages to ensure better security and performance.
### Key Improvements
#### Build System Enhancements
- **Replaced deprecated file-loader with Webpack 5 native asset modules** - Modernized asset handling using Webpack 5's built-in capabilities
- **Moved @babel/runtime to production dependencies** - Properly configured runtime dependencies for production builds
- **Fixed all import/export warnings** - Resolved module resolution issues for cleaner builds
#### Major Dependency Updates
- **Upgraded cross-env from v7 to v10** - Latest version with ESM support and TypeScript improvements
- **Updated all Babel packages to v7.28.0** - Latest stable Babel 7 release
- **Updated TypeScript to v5.9.2** - Latest TypeScript with improved type checking
- **Updated Webpack to v5.101.0** - Latest Webpack 5 with performance improvements
- **Updated ESLint to v9.33.0** - Latest ESLint with new rules and fixes
#### Security & Maintenance
- Updated all FullCalendar components to v6.1.19
- Updated all development dependencies to latest stable versions
- Removed non-existent test.html reference from build configuration
- Fixed stylelint configuration compatibility issues
### Technical Details
**Removed Deprecated Packages:**
- `file-loader` - Replaced with Webpack 5 asset/resource modules
**Updated Dependencies:**
- @babel/core: 7.27.4 → 7.28.0
- @babel/runtime: 7.27.6 → 7.28.2 (moved to production dependencies)
- @eslint/js: 9.29.0 → 9.33.0
- @typescript-eslint/eslint-plugin: 8.36.0 → 8.39.0
- @typescript-eslint/parser: 8.36.0 → 8.39.0
- @fullcalendar/*: 6.1.17 → 6.1.19 (all packages)
- cross-env: 7.0.3 → 10.0.0
- eslint: 9.29.0 → 9.33.0
- typescript: 5.8.3 → 5.9.2
- webpack: 5.99.9 → 5.101.0
- And various other minor updates
### Build Status
- Zero build errors
- Zero build warnings
- All linting rules pass successfully
- Production build size remains optimized
## [2.7.1] - 2025-07-10
### Bug Fixes & Improvements
- Minor version bump with maintenance updates
- Enhanced code quality and stability improvements
- Updated documentation and changelog formatting
## [2.7.0] - 2025-07-09
### jQuery-Free Release + NPM Package Publication
This release represents a **major performance milestone** - complete removal of jQuery dependency and all jQuery-based plugins, resulting in a modern, lightweight, and significantly faster admin template.
### NPM Package Available
**Adminator is now available as an npm package!**
```bash
# Install via npm
npm install adminator-admin-dashboard
# Or install via yarn
yarn add adminator-admin-dashboard
```
**Package Information:**
- **Package Name**: `adminator-admin-dashboard`
- **Registry**: https://www.npmjs.com/package/adminator-admin-dashboard
- **Size**: 5.7 MB (includes complete source + built assets)
- **Contents**: Source code, production builds, documentation, and all dependencies
**What's included:**
- Complete source code (`src/` directory)
- Pre-built production assets (`dist/` directory)
- All dependencies and development tools
- Comprehensive documentation (CLAUDE.md, CHANGELOG.md)
- Ready-to-use HTML templates
**Usage:**
```bash
# After installation, navigate to package directory
cd node_modules/adminator-admin-dashboard
# Install dev dependencies for customization
npm install
# Start development server
npm start
```
This release represents a **major performance milestone** - complete removal of jQuery dependency and all jQuery-based plugins, resulting in a modern, lightweight, and significantly faster admin template.
### Performance Improvements
**Bundle Size Reduction:**
- **~600KB Reduction**: Complete elimination of jQuery and jQuery-dependent plugins
- **Faster Load Times**: Native DOM manipulation for optimal performance
- **Modern Architecture**: ES6+ class-based components with zero legacy overhead
**Removed jQuery Dependencies:**
- `jquery` (3.7.1) - Replaced with vanilla JS DOM manipulation
- `jquery-sparkline` (2.4.0) - Replaced with Chart.js mini charts
- `bootstrap-datepicker` (1.10.0) - Replaced with HTML5 date inputs + vanilla JS
- `datatables` (1.10.18) - Replaced with vanilla JS table component
- `easy-pie-chart` (2.1.7) - Replaced with vanilla JS SVG pie charts
- `jvectormap` (2.0.4) - Replaced with vanilla JS SVG world map
### Modern JavaScript Implementations
**100% Vanilla JavaScript Architecture:**
- **Component System**: Modern class-based components (Sidebar, Charts, etc.)
- **DOM Utilities**: jQuery-like functionality using native JavaScript (`src/assets/scripts/utils/dom.js`)
- **Event Management**: Native event handling with modern delegation patterns
- **Mobile Optimization**: Touch-friendly interactions without jQuery overhead
**Feature-Complete Replacements:**
**Charts & Visualizations:**
- **Chart.js Sparklines**: Mini charts with full theme support and better performance
- **SVG Pie Charts**: Custom circular progress indicators with animations
- **Enhanced Line Charts**: Interactive charts with tooltip support and responsive design
**Interactive Components:**
- **Vanilla DataTables**: Full-featured table with sorting, pagination, and search
- **HTML5 Date Pickers**: Enhanced native date inputs with Day.js integration
- **Vector Maps**: JavaScript-based world map with markers and theme support
- **Sidebar Navigation**: Smooth animations and touch-friendly mobile interactions
**UI Enhancements:**
- **Mobile Search**: Full-width search overlay with enhanced touch experience
- **Dropdown Management**: Improved mobile dropdown behavior with overlay handling
- **Responsive Design**: Better mobile viewport handling and gesture support
### Technical Achievements
**Architecture Modernization:**
- **ES6+ Classes**: Modern component architecture replacing jQuery plugins
- **Module System**: ES6 import/export for better code organization
- **Type Safety**: Enhanced error handling and parameter validation
- **Performance**: Eliminated jQuery overhead and improved runtime efficiency
**Theme Integration:**
- **Dark Mode Support**: All new components fully support light/dark theme switching
- **CSS Variables**: Component styling integrated with existing theme system
- **Consistent Design**: Maintained visual consistency while improving performance
**Developer Experience:**
- **Clean Console**: Removed all development console notices and debugging output
- **ESLint Compliance**: All code follows modern ESLint 9.x flat config standards
- **Maintainable Code**: Well-documented, modular architecture for future enhancements
### Zero Breaking Changes
**Seamless Migration:**
- **Visual Consistency**: All components maintain identical visual appearance
- **API Compatibility**: Existing functionality preserved with better performance
- **Theme Support**: Full compatibility with existing dark/light mode system
- **Mobile Experience**: Enhanced mobile interactions with no breaking changes
### Component Improvements
**Enhanced Functionality:**
- **Charts**: Better responsiveness and theme integration
- **Tables**: Improved sorting and pagination performance
- **Date Pickers**: Enhanced mobile experience with native HTML5 inputs
- **Maps**: Better rendering performance and theme consistency
- **Navigation**: Smoother animations and better touch handling
### Code Quality
**Production Ready:**
- **Clean Output**: No console debugging statements in production code
- **Linting**: All JavaScript files pass ESLint 9.x with modern standards
- **Performance**: Optimized for speed with minimal DOM manipulation
- **Accessibility**: Maintained accessibility features without jQuery dependencies
### Files Modified
**Core Application:**
- `src/assets/scripts/app.js` - Complete jQuery removal and modern component integration
- `src/assets/scripts/components/Sidebar.js` - Vanilla JS sidebar with animations
- `src/assets/scripts/components/Chart.js` - Chart.js implementation replacing jQuery Sparkline
- `src/assets/scripts/utils/dom.js` - jQuery-like utilities using vanilla JavaScript
**New Implementations:**
- Enhanced mobile search functionality
- Vanilla JavaScript data table component
- HTML5 date picker enhancements
- SVG-based vector maps
- Modern dropdown and popover handling
### Migration Notes
**Automatic Migration:**
- No code changes required for existing projects
- All functionality automatically upgraded to vanilla JavaScript
- Theme system remains fully compatible
- Mobile experience enhanced without breaking changes
**Performance Benefits:**
- Immediate ~600KB bundle size reduction
- Faster initial page load
- Improved runtime performance
- Better mobile experience
## [2.6.1] - 2025-07-26
### Dependency Updates
- Updated `bootstrap` 5.3.6 → 5.3.7
- Updated `postcss` 8.5.5 → 8.5.6
- Updated `stylelint` 16.20.0 → 16.21.0
## [2.6.0] - 2025-06-21
### Dark Mode Release
This release introduces a comprehensive dark mode system with seamless theme switching and component integration.
### New Features
**Complete Dark Mode System:**
- **Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and "Light/Dark" labels
- **OS Preference Detection**: Automatically detects and applies user's preferred color scheme
- **Persistent Theme Storage**: Remembers user's theme choice across sessions
- **Instant Theme Switching**: Real-time theme updates without page reload
**Theme-Aware Components:**
- **Chart.js Integration**: Dynamic color schemes for all chart types with proper contrast
- **FullCalendar Support**: Dark-mode aware calendar with proper border and text colors
- **Vector Maps**: Custom color palettes for both light and dark themes
- **Google Maps**: Theme-specific styling for landscapes, highways, and POI markers
- **Sparkline Charts**: Optimized color sets for dark mode visibility
- **Skycons Weather Icons**: Adaptive colors for better dark mode contrast
**CSS Architecture:**
- **CSS Custom Properties**: Comprehensive variable system for consistent theming
- **Semantic Color Naming**: Intuitive color variables (--c-text-base, --c-bkg-card, etc.)
- **Component Isolation**: Each component respects global theme variables
- **Responsive Design**: Theme switching works seamlessly across all screen sizes
**Visual Enhancements:**
- **Adaptive Logo**: SVG logo automatically adjusts colors based on theme
- **Smart Contrast**: Proper text/background contrast ratios in both themes
- **Border Consistency**: Unified border colors throughout the interface
- **Loading States**: Theme-aware loaders and progress indicators
### Technical Improvements
**Architecture Updates:**
- **Theme Utility Module**: New `src/assets/scripts/utils/theme.js` with comprehensive theme management
- **CSS Variables File**: New `src/assets/styles/utils/theme.css` with light/dark color schemes
- **Component Integration**: Updated all major components to support theme switching
- **Event System**: Custom events for theme change notifications
**Performance Optimizations:**
- **Efficient Switching**: Minimal DOM manipulation for theme changes
- **CSS Variable Updates**: Leverages browser-native CSS custom properties
- **Memory Management**: Proper cleanup of theme-related event listeners
- **Build Integration**: Theme assets are properly bundled and optimized
### User Experience
**Intuitive Controls:**
- **Accessible Toggle**: Proper ARIA labels and keyboard navigation support
- **Visual Feedback**: Clear indication of current theme state
- **Smooth Transitions**: CSS transitions for theme switching (where appropriate)
- **Consistent Placement**: Theme toggle integrated into header navigation
**Smart Behavior:**
- **First-Time Detection**: Respects OS dark mode preference on first visit
- **Cross-Session Persistence**: Theme choice remembered across browser sessions
- **Fallback Handling**: Graceful degradation when localStorage is unavailable
- **Dynamic Updates**: All components update immediately when theme changes
### Development Experience
**Documentation:**
- **Theme API**: Comprehensive methods for theme management
- **Color Guidelines**: Standardized color usage across components
- **Component Examples**: Updated examples showing theme-aware components
- **Migration Guide**: Instructions for theme integration in custom components
### Enhanced Components
**Charts & Data Visualization:**
- Chart.js with dynamic color schemes
- Sparkline charts with theme-optimized colors
- Easy Pie Charts with adaptive styling
- Vector maps with custom dark mode palettes
**Interactive Elements:**
- FullCalendar with proper dark mode borders
- DataTables with theme-consistent styling
- Date pickers with adaptive colors
- Form elements with dark mode support
**Maps & Location:**
- Google Maps with custom dark mode styling
- Vector maps with region-specific color schemes
- Marker and overlay theme integration
### Breaking Changes
None. This release is fully backward compatible.
### Migration Guide
Existing projects will automatically inherit dark mode capabilities. No code changes required.
**Optional Enhancements:**
- Add `data-theme` attribute handling for custom components
- Use CSS variables from `theme.css` for consistent coloring
- Listen for `adminator:themeChanged` events for custom theme handling
### Files Added/Modified
**New Files:**
- `src/assets/scripts/utils/theme.js` - Theme management utility
- `src/assets/styles/utils/theme.css` - CSS variables and color schemes
**Enhanced Files:**
- All HTML pages updated with theme-aware components
- Component JavaScript files updated for theme integration
- SCSS files enhanced with CSS variable usage
- Logo SVG updated for theme compatibility
## [2.5.0] - 2025-06-16
### Major Modernization Release
This release represents a comprehensive modernization of the entire build toolchain and development stack.
### Dependency Updates
**Phase 1 - Safe Updates:**
- Updated `chart.js` 4.4.2 → 4.5.0
- Updated `shx` 0.3.3 → 0.4.0
- Added `eslint-formatter-table` for better linting output
**Phase 2 - Moderate Updates:**
- Updated `sass-loader` 14.2.1 → 16.0.5
- Updated `postcss-preset-env` 9.6.0 → 10.2.3
- Updated `stylelint-config-standard` 36.0.1 → 38.0.0
- Fixed `stylelint` command syntax for latest version
**Phase 3 - Major Breaking Changes:**
- Updated `copy-webpack-plugin` 12.0.2 → 13.0.0
- Updated `babel-loader` 9.2.1 → 10.0.0
- Updated `webpack-cli` 5.1.4 → 6.0.1
- Updated `eslint` 8.57.1 → 9.29.0
**Latest Dependencies Update:**
- Updated all Babel packages to v7.27.x
- Updated FullCalendar packages to v6.1.17
- Updated Bootstrap to v5.3.6
- Updated webpack ecosystem (webpack 5.99.9, webpack-dev-server 5.2.2)
- Updated PostCSS to v8.5.5
- Updated Sass to v1.89.2
- Updated Stylelint to v16.20.0
- Plus 22 total dependency updates
### Configuration Changes
**ESLint 9.x Migration:**
- Migrated from `.eslintrc.json` to `eslint.config.mjs` (flat config)
- Removed incompatible `eslint-config-airbnb-base` and `eslint-plugin-import`
- Created modern ESLint configuration with equivalent rules
- Updated line endings for cross-platform compatibility
**Build System Improvements:**
- Enhanced webpack configuration compatibility
- Improved CSS processing pipeline
- Better development server performance
**Package Management:**
- Fixed `package.json` to reflect exact installed dependency versions
- Removed incompatible ESLint packages from dependencies
- Ensured version alignment between installed and declared packages
**Phase 5.1 - Date Library Migration:**
- **REMOVED** `moment` 2.30.1 (67KB) - unused legacy dependency
- **ADDED** `dayjs` 1.11.13 (2KB) - modern 97% smaller alternative
- Created comprehensive `DateUtils` module with modern date handling
- Updated FullCalendar to use Day.js for dynamic date generation
- Enhanced date picker functionality with Day.js validation
- Bundle size reduction: ~65KB saved
- Zero breaking changes - Day.js provides same API coverage
### Development Experience
- **Node.js Support**: Now requires Node.js 18.12.0+ (compatible with v23.11.0)
- **Modern tooling**: All dependencies updated to latest stable versions
- **Zero security vulnerabilities**: Complete security audit clean
- **Improved performance**: Faster builds and development server
- **Better linting**: Modern ESLint 9.x with flat config
- **Enhanced CSS**: Latest PostCSS and Sass versions
### Security & Quality
- All dependencies audited and updated to latest secure versions
- Zero known security vulnerabilities
- Modern linting rules for better code quality
- Updated copyright notices to 2025
### Documentation
- Updated README with modern setup instructions
- Enhanced development workflow documentation
- Added comprehensive changelog entries
### Breaking Changes
- **Node.js**: Minimum version now 18.12.0
- **ESLint**: Configuration format changed from eslintrc to flat config
- **Development**: Some webpack-cli commands removed (init, loader, plugin)
### Migration Guide
For projects upgrading from v2.1.0:
1. Ensure Node.js version is 18.12.0 or higher
2. Run `npm install` to get updated dependencies
3. ESLint configuration is automatically updated
4. No code changes required for existing projects
## [2.1.0]
- Upgraded all dependencies
## [2.0.0]
### Changed
- Upgrade to Bootstrap 5
## [1.1.0]
### Changed
- Upgrade to webpack 5
## [1.0.0]
### Added
- Intial release
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at support at colorlib.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: IMPROVEMENT_PLAN.md
================================================
# Adminator Admin Dashboard - Improvement Plan
## Executive Summary
After a comprehensive senior-level review of the Adminator admin dashboard (v2.9.0), this document outlines inconsistencies, areas for improvement, and actionable recommendations to make this template exceptional for freelance developers.
**Overall Assessment**: The template is well-structured with a successful jQuery-free modernization. Key areas needing attention: dead code cleanup, accessibility compliance, error handling, and documentation.
---
## Implementation Status
| Phase | Description | Status |
|-------|-------------|--------|
| Phase 1 | Critical Cleanup | COMPLETED |
| Phase 2 | Accessibility Improvements | COMPLETED |
| Phase 3 | Error Handling & Logging | COMPLETED |
| Phase 5 | JSDoc Documentation | COMPLETED |
| Phase 6 | Testing Infrastructure | COMPLETED |
| Phase 8 | VS Code Settings & Types | COMPLETED |
| Phase 4 | Performance Optimizations | Pending |
| Phase 7 | Documentation | Pending |
| Phase 9 | Security Hardening | Pending |
| Phase 10 | Build Optimization | Pending |
---
## Quality Scorecard (Updated)
| Category | Before | After | Target |
|----------|--------|-------|--------|
| Code Organization | 8/10 | 9/10 | 9/10 |
| JavaScript Quality | 7/10 | 8/10 | 9/10 |
| CSS/SCSS Quality | 8/10 | 8/10 | 9/10 |
| Error Handling | 5/10 | 7/10 | 8/10 |
| Accessibility | 4/10 | 6/10 | 8/10 |
| Performance | 7/10 | 7/10 | 9/10 |
| Documentation | 6/10 | 8/10 | 9/10 |
| Type Safety | 2/10 | 5/10 | 7/10 |
| Test Coverage | 0/10 | 4/10 | 6/10 |
---
## Phase 1: Critical Cleanup (Immediate) - COMPLETED
### 1.1 Remove Dead Code
**Files Deleted:**
- [x] `src/assets/scripts/app 2.js` - Backup file, 19KB of unused code
- [x] `src/assets/scripts/sidebar/index.js` - Replaced by `components/Sidebar.js`
**Unused Dependencies Removed from package.json:**
- [x] `@typescript-eslint/eslint-plugin` - Not using TypeScript
- [x] `@typescript-eslint/parser` - Not using TypeScript
- [x] `typescript` - Not using TypeScript
- [x] `ts-api-utils` - Not using TypeScript
### 1.2 Fix HTML `<html>` Tag - COMPLETED
All 18 HTML files now have the `lang="en"` attribute:
```html
<html lang="en">
```
**Files updated:**
- [x] All 18 HTML files in src/
---
## Phase 2: Accessibility (High Priority)
### 2.1 Theme Toggle Accessibility
**Current issue:** Theme toggle lacks proper ARIA attributes
```html
<!-- Add these attributes -->
<div class="theme-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">
```
### 2.2 Navigation Accessibility
**Missing ARIA attributes on dropdowns:**
```html
<a href="#"
class="dropdown-toggle"
aria-expanded="false"
aria-haspopup="true">
```
### 2.3 DataTable Accessibility
**Missing semantic markup:**
```html
<table role="table" aria-label="Data table">
<thead>
<tr>
<th scope="col" aria-sort="none">Column Name</th>
</tr>
</thead>
</table>
```
### 2.4 Chart Accessibility
**Canvas elements need descriptive labels:**
```html
<canvas
id="line-chart"
role="img"
aria-label="Line chart showing monthly revenue trends">
</canvas>
```
### 2.5 Mobile Search Overlay
**Keyboard accessibility needed:**
- Trap focus within overlay when open
- Close on Escape key press
- Return focus to trigger when closed
---
## Phase 3: Error Handling & Robustness
### 3.1 Add Development Logging
Create a logging utility that only logs in development:
```javascript
// src/assets/scripts/utils/logger.js
const Logger = {
isDev: process.env.NODE_ENV === 'development',
warn(message, context) {
if (this.isDev) console.warn(`[Adminator] ${message}`, context);
},
error(message, context) {
if (this.isDev) console.error(`[Adminator] ${message}`, context);
}
};
```
### 3.2 Replace Silent Failures
**Current pattern (problematic):**
```javascript
} catch {
// Silent failure
}
```
**Improved pattern:**
```javascript
} catch (error) {
Logger.warn('Feature X failed to initialize', { error });
}
```
### 3.3 Add Input Validation
Validate inputs in public API methods:
- Theme.apply() - validate theme name
- Chart initialization - validate canvas elements
- DateUtils - validate date formats
---
## Phase 4: Performance Optimizations
### 4.1 Replace Clone-and-Replace Pattern
**Current (inefficient):**
```javascript
// Clones entire DOM node to remove listeners
const newItem = item.cloneNode(true);
item.parentNode.replaceChild(newItem, item);
```
**Improved (use AbortController):**
```javascript
const controller = new AbortController();
element.addEventListener('click', handler, { signal: controller.signal });
// Later: controller.abort() to remove listener
```
### 4.2 Use Event Delegation
**Instead of:**
```javascript
document.querySelectorAll('.dropdown').forEach(el => {
el.addEventListener('click', handler);
});
```
**Use:**
```javascript
document.addEventListener('click', (e) => {
const dropdown = e.target.closest('.dropdown');
if (dropdown) handler(e);
});
```
### 4.3 Lazy Load Charts
Only initialize charts when they're visible:
```javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
initChart(entry.target);
observer.unobserve(entry.target);
}
});
});
```
### 4.4 Use ResizeObserver Instead of Window Resize
```javascript
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
// Handle resize
});
});
resizeObserver.observe(chartContainer);
```
---
## Phase 5: Code Quality & Consistency
### 5.1 Consistent Export Pattern
Standardize all modules to use named exports:
```javascript
// Consistent pattern
export { Theme };
export { DOM };
export { DateUtils };
```
### 5.2 Add JSDoc Documentation
```javascript
/**
* Toggles the application theme between light and dark mode
* @fires adminator:themeChanged
* @returns {string} The new theme ('light' or 'dark')
*/
function toggle() {
// ...
}
```
### 5.3 Consolidate Dark Mode SCSS
Move dark mode overrides from `index.scss` (800+ lines) to dedicated partial:
```
src/assets/styles/spec/utils/
├── _theme.scss (CSS variables)
└── _darkmode.scss (dark mode overrides)
```
### 5.4 Reduce !important Usage
Current: 16 instances of `!important` in index.scss
Fix specificity issues at the source rather than using `!important`:
- Review selector specificity
- Use CSS custom properties for overridable values
- Consider CSS layers for proper cascade
---
## Phase 6: Testing Infrastructure
### 6.1 Set Up Testing Framework
```bash
npm install -D vitest @testing-library/dom jsdom
```
### 6.2 Priority Test Files
1. **Utils testing:**
- `tests/utils/dom.test.js` - DOM utilities
- `tests/utils/theme.test.js` - Theme switching
- `tests/utils/date.test.js` - Date formatting
2. **Component testing:**
- `tests/components/Sidebar.test.js`
- `tests/components/Chart.test.js`
3. **Integration testing:**
- `tests/integration/theme-persistence.test.js`
- `tests/integration/mobile-menu.test.js`
### 6.3 Add Test Script
```json
{
"scripts": {
"test": "vitest",
"test:coverage": "vitest --coverage"
}
}
```
---
## Phase 7: Documentation Improvements
### 7.1 Add Component Development Guide
Create `docs/COMPONENT_GUIDE.md`:
- How to add new components
- Theme integration requirements
- Event patterns to follow
- Mobile considerations
### 7.2 Add API Documentation
Document all public APIs with examples:
- Theme API (toggle, apply, current)
- DOM utilities (select, addClass, etc.)
- Custom events (adminator:ready, adminator:themeChanged)
### 7.3 Add Migration Guide
For users upgrading from jQuery version:
- Breaking changes
- API differences
- Migration steps
### 7.4 Inline Code Documentation
Add JSDoc to all exported functions and classes.
---
## Phase 8: Developer Experience
### 8.1 Add TypeScript Declarations
Create `types/adminator.d.ts` for IDE support without full TypeScript migration:
```typescript
declare namespace Adminator {
interface Theme {
current(): 'light' | 'dark';
toggle(): void;
apply(theme: 'light' | 'dark'): void;
}
}
```
### 8.2 Add VS Code Settings
Create `.vscode/settings.json`:
```json
{
"editor.formatOnSave": true,
"css.lint.unknownAtRules": "ignore",
"scss.lint.unknownAtRules": "ignore"
}
```
### 8.3 Add Recommended Extensions
Create `.vscode/extensions.json`:
```json
{
"recommendations": [
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"editorconfig.editorconfig"
]
}
```
---
## Phase 9: Security Hardening
### 9.1 Wrap localStorage Operations
```javascript
const Storage = {
get(key) {
try {
return localStorage.getItem(key);
} catch {
return null; // Private browsing or quota exceeded
}
},
set(key, value) {
try {
localStorage.setItem(key, value);
return true;
} catch {
return false;
}
}
};
```
### 9.2 Add Content Security Policy Headers
Document recommended CSP headers for production deployment.
### 9.3 Google Maps API Key Handling
Add documentation for proper API key restrictions.
---
## Phase 10: Build & Bundle Optimization
### 10.1 Analyze Bundle Size
Add bundle analysis:
```json
{
"scripts": {
"analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json"
}
}
```
### 10.2 Code Splitting
Consider splitting large chunks:
- Charts (Chart.js) - lazy load
- FullCalendar - lazy load on calendar page
- Vector Maps - lazy load on maps page
### 10.3 Remove Unused Lodash Imports
Replace full lodash with specific imports:
```javascript
// Instead of
import _ from 'lodash';
// Use
import debounce from 'lodash/debounce';
```
---
## Implementation Priority Order
### Week 1: Critical (Must Have)
1. Remove dead code (Phase 1.1)
2. Fix HTML lang attributes (Phase 1.2)
3. Remove unused dependencies (Phase 1.1)
### Week 2: High Priority
4. Theme toggle accessibility (Phase 2.1)
5. Add development logging (Phase 3.1)
6. Replace silent failures (Phase 3.2)
### Week 3: Medium Priority
7. DataTable accessibility (Phase 2.3)
8. Event delegation refactor (Phase 4.2)
9. JSDoc documentation (Phase 5.2)
### Week 4: Enhancement
10. Testing infrastructure (Phase 6)
11. Component development guide (Phase 7.1)
12. TypeScript declarations (Phase 8.1)
---
## Files Changed Summary
### Delete (3 files)
- `src/assets/scripts/app 2.js`
- `src/assets/scripts/sidebar/index.js`
- `tsconfig.json` (optional, or commit to TS)
### Create (8+ files)
- `src/assets/scripts/utils/logger.js`
- `src/assets/styles/spec/utils/_darkmode.scss`
- `docs/COMPONENT_GUIDE.md`
- `docs/API.md`
- `docs/MIGRATION.md`
- `types/adminator.d.ts`
- `.vscode/settings.json`
- `.vscode/extensions.json`
### Modify (25+ files)
- All 18 HTML files (add `lang="en"`)
- `package.json` (remove unused deps, add test script)
- `src/assets/scripts/app.js` (error handling, cleanup)
- `src/assets/scripts/utils/theme.js` (accessibility)
- `src/assets/styles/spec/index.scss` (refactor dark mode)
- Component files (JSDoc, accessibility)
---
## Success Metrics
After implementing these improvements:
1. **Lighthouse Accessibility Score**: Target 90+
2. **Bundle Size**: Reduce by 10-15% (remove lodash full, unused deps)
3. **Test Coverage**: Achieve 60%+ on utilities
4. **Documentation**: Complete API reference
5. **Zero Dead Code**: All files actively used
6. **Developer Experience**: Full IDE support with types
---
## Notes for Freelance Developers
This template will be excellent for freelance developers after these improvements because:
1. **Clean, Maintainable Code**: No dead code, consistent patterns
2. **Accessible by Default**: WCAG compliance out of the box
3. **Well-Documented**: Easy to understand and extend
4. **Type-Safe Development**: IDE autocomplete and error detection
5. **Tested Foundation**: Confidence when making changes
6. **Modern Stack**: No legacy jQuery baggage
7. **Performance Optimized**: Fast load times, efficient updates
---
*Document created: January 2026*
*Template version: 2.9.0*
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018 Aigars Silkalns
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Adminator Bootstrap 5 Admin Template v3.0.0
**Adminator** is a responsive Bootstrap 5 Admin Template built with modern development tools. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.
**Latest Update (v3.0.0)**: Major architecture release with new utility modules (Events, Performance, Storage, Sanitize, Logger), testing infrastructure (Vitest), code splitting, bundle analyzer, and comprehensive documentation. Zero jQuery, zero lodash - pure vanilla JavaScript.
**Looking for more premium admin templates?** Visit **[DashboardPack.com](https://dashboardpack.com/)** for a curated collection of high-quality admin dashboard templates for various frameworks and technologies.
**Performance Benefits**: Faster load times, optimized code splitting, modern ES6+ utilities, and zero external library overhead.
**[Complete Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Detailed setup guides, API reference, and examples
Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
# Preview
### Screenshots
**Light Mode:**
**Dark Mode:**
### Demo Site: [Here](https://colorlib.com/polygon/adminator/index.html)
## Upgrade to a Premium Dashboard
Need advanced features, dedicated support, and production-ready code? Explore our handpicked collection of professional admin templates on [DashboardPack](https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminator).
<table>
<tr>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/tailpanel.png" alt="TailPanel — modern React and Tailwind CSS admin panel" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/tailpanel/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>TailPanel</strong></a>
<br>
<sub>React + TypeScript + Tailwind CSS + Vite. 9 dashboard designs, dark and light themes.</sub>
</td>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/admindek.png" alt="Admindek — feature-rich Bootstrap 5 dashboard with dark mode" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>Admindek</strong></a>
<br>
<sub>Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.</sub>
</td>
</tr>
<tr>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/adminty.png" alt="Adminty — Bootstrap 5 admin template with 160+ pages" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/adminty-html-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>Adminty</strong></a>
<br>
<sub>Bootstrap 5. 160+ ready-made pages, full UI component library for rapid development.</sub>
</td>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/architectui.png" alt="ArchitectUI — modular Bootstrap admin with 250+ widgets" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/architectui-dashboard-html-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>ArchitectUI</strong></a>
<br>
<sub>Bootstrap 5. 250+ components, modular architecture, 9 unique dashboard layouts.</sub>
</td>
</tr>
<tr>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/kero.png" alt="Kero — Bootstrap 5 dashboard with horizontal and sidebar layouts" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/kero-jquery-html-dashboard-pro/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>Kero</strong></a>
<br>
<sub>Bootstrap 5 + Webpack. Dual layout system (horizontal + sidebar), SASS theming.</sub>
</td>
<td align="center" width="50%">
<a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator">
<img src="screenshots/cryptocurrency.png" alt="Cryptocurrency Dashboard — ICO and Bitcoin admin panel" width="100%">
</a>
<br>
<a href="https://dashboardpack.com/theme-details/cryptocurrency-dashboard/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>Cryptocurrency Dashboard</strong></a>
<br>
<sub>Bootstrap. Built specifically for ICO platforms, Bitcoin tracking, and crypto portfolios.</sub>
</td>
</tr>
</table>
<p align="center">
<a href="https://dashboardpack.com/?utm_source=github&utm_medium=readme&utm_campaign=adminator"><strong>View All Premium Templates</strong></a>
</p>
## TOC
- [What's New in v3.0.0](#whats-new-in-v300)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installing & Local Development](#installing--local-development)
- [Adminator for other platforms and frameworks](#adminator-for-other-platforms-and-frameworks)
- [Files/Folder Structure](#filesfolders-structure)
- [Deployment](#deployment)
- [Built With](#built-with)
- [Changelog](#changelog)
- [Authors](#authors)
- [License](#license)
## What's New in v3.0.0
### Major Architecture & Developer Experience Release
This release represents a comprehensive overhaul adding professional-grade utilities, testing, security, and optimized builds.
### New Utility Modules
- **Events** - Event delegation, debounce, throttle (replaces lodash)
- **Performance** - ResizeObserver, IntersectionObserver, lazy loading utilities
- **Storage** - Safe localStorage wrapper with in-memory fallback
- **Sanitize** - HTML/input sanitization for XSS prevention
- **Logger** - Development-only logging utility
### Testing Infrastructure
- **Vitest** - Modern, fast testing framework
- **Coverage Reports** - V8-based code coverage via `npm run test:coverage`
- **Test Suites** - Initial tests for theme, DOM, and logger utilities
### Build & Bundle Optimization
- **Code Splitting** - Separate chunks for Chart.js (529KB), FullCalendar (654KB), Bootstrap
- **Bundle Analyzer** - New `npm run build:analyze` for visual inspection
- **Console Removal** - TerserPlugin drops console/debugger in production
- **Lodash Removed** - Custom Events utility saves ~70KB
### Documentation & DX
- **API Reference** - Complete docs in `docs/API.md`
- **Component Guide** - Development patterns in `docs/COMPONENT_GUIDE.md`
- **TypeScript Declarations** - IDE support via `types/adminator.d.ts`
- **VSCode Settings** - Project-specific editor configuration
### Code Quality
- **Dead Code Removed** - Cleaned up unused files
- **HTML Accessibility** - Added `lang="en"` to all 18 HTML pages
- **Zero Vulnerabilities** - Full security audit passed
### Previous Updates (v2.9.x)
- Comprehensive dependency updates to latest versions
- Enhanced SCSS linting with stylelint-config-standard-scss
- Security vulnerability fixes (node-forge, js-yaml)
## What's New in v2.7.1
**jQuery-Free Release** - Complete removal of jQuery dependency with modern vanilla JavaScript:
### Major Performance Improvements
- **~600KB Bundle Reduction**: Eliminated jQuery and all jQuery-dependent plugins
- **Faster Load Times**: Native DOM manipulation for optimal performance
- **Smaller Bundle Size**: Significantly reduced JavaScript payload
- **Modern ES6+ Code**: Class-based architecture with modern JavaScript features
### jQuery Replacements (Zero Breaking Changes)
- **Chart.js**: Replaced jQuery Sparkline with Chart.js mini charts
- **HTML5 Date Pickers**: Enhanced native date inputs with Day.js support
- **Vanilla DataTables**: Custom table component with sorting and pagination
- **SVG Pie Charts**: Pure JavaScript circular progress indicators
- **Vector Maps**: JavaScript-based world map with markers and interactions
- **Vanilla Popovers**: Lightweight alternatives to Bootstrap JS components
### Technical Achievements
- **100% Vanilla JavaScript**: No jQuery dependency anywhere in the codebase
- **Component Architecture**: Modern class-based components (Sidebar, Charts, etc.)
- **Enhanced DOM Utilities**: jQuery-like functionality using native JavaScript
- **Mobile Optimized**: Touch-friendly interactions and responsive behavior
- **Theme Integration**: All new components fully support dark/light mode switching
### Previous Updates (v2.6.0 - Dark Mode System)
### Dark Mode Features
- **Smart Theme Toggle**: Bootstrap-based switch with sun/moon icons and intuitive labels
- **OS Preference Detection**: Automatically detects and applies your preferred color scheme
- **Persistent Storage**: Remembers your theme choice across browser sessions
- **Instant Switching**: Real-time theme updates without page reload
- **Component Integration**: All charts, calendars, maps, and UI elements are theme-aware
### Technical Implementation
- **CSS Variables Architecture**: Comprehensive color system with semantic naming
- **Chart.js Integration**: Dynamic color schemes for all chart types
- **FullCalendar Support**: Dark-mode aware calendar with proper contrast
- **Vector Maps**: Custom color palettes for both light and dark themes
- **Component Compatibility**: Theme support across all interactive elements
### Previous Updates (v2.5.0)
- **Latest Dependencies**: All 22+ dependencies updated to latest versions
- **Modern Build Tools**: webpack 5.99.9, webpack-dev-server 5.2.2
- **ESLint 9.x**: Migrated to modern flat config format
- **Enhanced CSS**: Latest Sass (1.89.2), PostCSS (8.5.6), Bootstrap (5.3.7)
- **Updated Components**: Chart.js 4.5.0, FullCalendar 6.1.17
- **Zero Vulnerabilities**: Complete security audit with all packages secure
## Getting Started
You can use **Adminator** in several ways:
### NPM Package Installation (Recommended)
Install the complete template as an npm package:
```bash
# Install via npm
npm install adminator-admin-dashboard
# Or install via yarn
yarn add adminator-admin-dashboard
```
**Package Information:**
- **Package Name**: `adminator-admin-dashboard`
- **Version**: 3.0.0 (Architecture release)
- **Size**: 5.7 MB (includes source + built assets)
- **Registry**: https://www.npmjs.com/package/adminator-admin-dashboard
**Usage after npm install:**
```bash
# Navigate to the package directory
cd node_modules/adminator-admin-dashboard
# Install development dependencies (if you want to customize)
npm install
# Start development server
npm start
```
**What's included in the npm package:**
- Complete source code (`src/` directory)
- Pre-built production assets (`dist/` directory)
- All dependencies and development tools
- Documentation (CLAUDE.md, CHANGELOG.md)
- Ready-to-use HTML templates
### Local Development Setup
For development and customization, clone the repository:
#### Prerequisites
- **Node.js 18.12.0 or higher** (tested with Node.js 23.11.0)
- **npm** (included with Node.js) or **Yarn**
- **Git**
#### Installing & Local Development
```bash
# Clone the repository
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
# Navigate to the project directory
cd adminator
# Install dependencies
npm install
# Start development server (available at http://localhost:4000)
npm start
# Alternative: Start with webpack dashboard
npm run dev
```
### Quick Start Options
1. **Fastest**: Use prebuilt static assets from [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases)
2. **Recommended**: Install via npm package for easy updates
3. **Development**: Clone repository for full customization
#### Development Commands
```bash
# Development server with hot reload
npm start
# Development server with dashboard
npm run dev
# Build for production (optimized)
npm run build
# Build for production (unminified)
npm run release:unminified
# Build for production (minified)
npm run release:minified
# Preview production build
npm run preview
# Lint JavaScript files
npm run lint:js
# Lint SCSS files
npm run lint:scss
# Run all linters
npm run lint
# Run tests
npm run test
# Run tests with coverage
npm run test:coverage
# Analyze bundle size
npm run build:analyze
```
## Dark Mode Usage
Adminator now includes a comprehensive dark mode system that works out of the box:
### Automatic Setup
- Dark mode is automatically initialized on page load
- Detects your OS preference (light/dark) on first visit
- Remembers your choice across browser sessions
### Theme Toggle
- Look for the **Light/Dark** toggle switch in the header navigation
- Click to instantly switch between light and dark themes
- Visual feedback with sun and moon icons
### For Developers
**[Complete Theme API Documentation →](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)**
**Using the Theme API:**
```javascript
// Get current theme
const currentTheme = Theme.current(); // 'light' or 'dark'
// Switch themes programmatically
Theme.toggle();
// Set specific theme
Theme.apply('dark');
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
console.log('Theme changed to:', event.detail.theme);
});
```
**CSS Variables for Custom Styling:**
```css
.my-component {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
}
```
**Available CSS Variables:**
- `--c-bkg-body` - Main background
- `--c-bkg-card` - Card backgrounds
- `--c-text-base` - Primary text color
- `--c-text-muted` - Secondary text color
- `--c-border` - Border colors
- `--c-primary` - Primary brand color
**[View Complete CSS Variables Reference →](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)**
## Documentation
**[Complete Documentation Site](https://puikinsh.github.io/Adminator-admin-dashboard/)** - Comprehensive guides and API reference
### Quick Links:
- **[Installation Guide](https://puikinsh.github.io/Adminator-admin-dashboard/getting-started/installation)** - Complete setup instructions
- **[Theme System](https://puikinsh.github.io/Adminator-admin-dashboard/customization/theme-system)** - Dark mode and theming
- **[API Reference](https://puikinsh.github.io/Adminator-admin-dashboard/api/theme-api)** - JavaScript API documentation
- **[Examples](https://puikinsh.github.io/Adminator-admin-dashboard/examples/theme-integration)** - Integration examples
## Adminator for other platforms and frameworks
* [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) - Adminator modified to work with right to left languages like Persian and Arabic
## Files/Folders Structure
Here is a brief explanation of the template folder structure and some of its main files usage:
```
└── src # Contains all template source files.
│ └── assets # Contains JS, CSS, images and icon fonts.
│ │ └── scripts # Contains all JavaScript files.
│ │ │ └── charts # Chart.js, Sparkline & Pie Chart plugins init.
│ │ │ └── chat # All chat app JS code.
│ │ │ └── constants # Template constant values like color values.
│ │ │ └── datatable # Date table plugin init.
│ │ │ └── datepicker # Bootstrap datepicker init.
│ │ │ └── email # All email app code.
│ │ │ └── fullcalendar # Fullcalendar plugin init.
│ │ │ └── googleMaps # Google maps API integration code.
│ │ │ └── masonry # Masonry layout code.
│ │ │ └── popover # Bootstrap popover plugin init.
│ │ │ └── scrollbar # Perfect scrollbar plugin init.
│ │ │ └── search # Topbar toggle search init.
│ │ │ └── sidebar # Sidebar JS code.
│ │ │ └── skycons # Animated icons plugin init.
│ │ │ └── utils # Basic utils used for proper rendering.
│ │ │ └── vectorMaps # Vector maps plugin init.
│ │ │ └── app.js # Main application entry point.
│ │ │
│ │ └── static # Contains the non-code files.
│ │ │ └── fonts # Contains icon fonts.
│ │ │ └── images # Contains all template images/svg.
│ │ │
│ │ └── styles # Contains all SCSS files.
│ │ └── spec # Contains custom SCSS files.
│ │ │ └── components # Contains all template components.
│ │ │ └── generic # Contains basic scaffolding styles.
│ │ │ └── screens # Contains views specific styles.
│ │ │ └── settings # Contains all template variables.
│ │ │ └── tools # Contains all mixins.
│ │ │ └── utils # Contains helper classes.
│ │ │ └── index.scss # Indicator file.
│ │ │
│ │ └── vendor # Contains all plugin files & custom styles.
│ │ └── index.scss # Main style entry point.
│ │
│ └── *.html # All HTML template pages.
└── webpack # Contains Webpack configuration.
│ └── plugins # Contains all Webpack plugins config.
│ └── rules # Contains Webpack loaders config.
│ └── config.js # Main Webpack configuration.
│ └── devServer.js # Development server configuration.
│ └── manifest.js # Build system constants.
│
└── .babelrc # Babel ES6 transpiler configuration.
└── .editorconfig # Code editor consistency settings.
└── eslint.config.mjs # ESLint 9.x flat configuration.
└── .gitattributes # Git attributes configuration.
└── .gitignore # Git ignore patterns.
└── .stylelintrc.json # SCSS/CSS linting configuration.
└── browserslist # Supported browsers configuration.
└── CHANGELOG.md # Version history and updates.
└── package.json # Node.js package configuration.
└── README.md # This documentation file.
└── webpack.config.js # Webpack entry configuration.
```
## Deployment
In deployment process, you have several commands:
1. **Production Build** - Generate optimized assets for production:
```bash
npm run build
```
2. **Production Preview** - Preview the production build locally:
```bash
npm run preview
```
3. **Custom Builds**:
```bash
# Unminified production build (for debugging)
npm run release:unminified
# Minified production build (smallest size)
npm run release:minified
```
The built files will be available in the `dist/` directory.
## Built With
### Core Framework & Build Tools
- [Bootstrap 5.3.8](http://getbootstrap.com/) - Modern CSS framework
- [Webpack 5.103.0](https://webpack.js.org/) - Module bundler and build tool
- [Babel 7.28.x](https://babeljs.io/) - JavaScript transpiler
- [Sass 1.94.2](http://sass-lang.com/) - CSS preprocessor
- [PostCSS 8.5.6](http://postcss.org/) - CSS transformations
- [ESLint 9.39.1](https://eslint.org/) - JavaScript linting (flat config)
- [Stylelint 16.26.1](https://stylelint.io/) - CSS/SCSS linting
### UI Components & Charts
- [Chart.js 4.5.1](http://www.chartjs.org/) - Modern charting library
- [FullCalendar 6.1.19](https://fullcalendar.io/) - Interactive calendar
- [DataTables](https://datatables.net/) - Advanced table functionality
- [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/) - Animated pie charts
- [Perfect Scrollbar 1.5.6](https://github.com/utatti/perfect-scrollbar) - Custom scrollbars
### JavaScript Libraries
- **[Chart.js 4.5.1](http://www.chartjs.org/)** - Modern charting library (replaces jQuery Sparkline)
- **[jsvectormap 1.7.0](https://github.com/themustafaomar/jsvectormap)** - Interactive vector maps (replaces jVectorMap)
- [Day.js 1.11.19](https://day.js.org/) - Modern 2KB date library (replaces Moment.js)
- [Masonry 4.2.2](https://masonry.desandro.com/) - Grid layouts
- **100% Vanilla JavaScript** - No jQuery or lodash dependencies
### Icons & Fonts
- [Font Awesome](http://fontawesome.io/) - Icon library
- [Themify Icons](https://themify.me/themify-icons) - Additional icons
- [Roboto Font](https://fonts.google.com/specimen/Roboto) - Google Fonts
### Additional Plugins
- **HTML5 Date Inputs** - Enhanced native date pickers (replaces Bootstrap Datepicker)
- [Skycons](https://darkskyapp.github.io/skycons/) - Animated weather icons
- [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api) - Maps integration
## Changelog
See [CHANGELOG.md](CHANGELOG.md) for detailed version history.
📚 **[Online Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** includes comprehensive guides for all features.
#### Latest Release: V 3.0.0 (2026-01-13)
- **New Utility Modules** - Events, Performance, Storage, Sanitize, Logger
- **Testing Infrastructure** - Vitest with coverage reporting
- **Code Splitting** - Separate chunks for Chart.js, FullCalendar, Bootstrap
- **Bundle Analyzer** - Visual bundle inspection via `npm run build:analyze`
- **Lodash Removed** - Custom Events utility replaces lodash (~70KB saved)
- **Documentation** - API reference and component development guide
- **TypeScript Declarations** - IDE support with type definitions
#### Previous Releases
- **V 2.9.0**: Comprehensive dependency updates, SCSS linting improvements
- **V 2.8.1**: Bootstrap 5.3.8, security updates, and enhanced tooling
- **V 2.8.0**: Webpack 5 asset modules and dependency modernization
- **V 2.7.1**: 100% jQuery-Free with modern vanilla JavaScript
- **V 2.6.0**: Complete Dark Mode System with theme switching
- **V 2.5.0**: Updated all dependencies, ESLint 9.x, zero vulnerabilities
- **V 2.1.0**: Upgraded all dependencies
- **V 2.0.0**: Upgrade to Bootstrap 5
- **V 1.1.0**: Upgrade to webpack 5
- **V 1.0.0**: Initial Release
## Authors
[Colorlib](https://colorlib.com)
## More Resources from Colorlib
- [Bootstrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
- [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)
- [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)
- [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)
- [Website Templates](https://colorlib.com/wp/templates/)
- [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)
- [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
## License
Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
================================================
FILE: browserslist
================================================
# https://github.com/browserslist/browserslist#readme
>= 0.5%
last 2 major versions
not dead
Chrome >= 90
Firefox >= 90
Firefox ESR
iOS >= 15
Safari >= 15
not op_mini all
================================================
FILE: ci/getVersion.sh
================================================
echo $(sed 's/.*"version": "\(.*\)".*/\1/;t;d' ./package.json)
================================================
FILE: ci/verifyVersion.sh
================================================
VERSION=$1
TAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)
if [ $TAG_EXISTS -eq "1" ]; then
echo "The tag '$VERSION' already exists. Please update version in package.json.";
exit 1;
fi
echo "The tag '$VERSION' does not exist - success.";
================================================
FILE: docs/COMPONENT_GUIDE.md
================================================
# Component Development Guide
This guide explains how to create new components for the Adminator admin dashboard, following the established patterns and best practices.
## Table of Contents
- [Architecture Overview](#architecture-overview)
- [Creating a New Component](#creating-a-new-component)
- [Component Lifecycle](#component-lifecycle)
- [Theme Integration](#theme-integration)
- [Event Handling](#event-handling)
- [Mobile Considerations](#mobile-considerations)
- [Testing Components](#testing-components)
---
## Architecture Overview
Adminator uses a class-based component architecture with the following structure:
```
src/assets/scripts/
├── app.js # Main application controller
├── components/ # Reusable UI components
│ ├── Sidebar.js
│ └── Chart.js
├── utils/ # Utility modules
│ ├── dom.js # DOM manipulation
│ ├── theme.js # Theme management
│ ├── events.js # Event handling
│ ├── performance.js # Performance utilities
│ ├── logger.js # Development logging
│ └── date.js # Date utilities
└── [feature modules] # Feature-specific code
```
### Key Principles
1. **No jQuery** - Use vanilla JS and the `DOM` utility
2. **Event Delegation** - Use `Events.delegate()` for performance
3. **Theme Awareness** - Support light/dark modes via CSS variables
4. **Cleanup** - Always provide a `destroy()` method
5. **Mobile First** - Consider touch interactions
---
## Creating a New Component
### Step 1: Create the Component File
Create a new file in `src/assets/scripts/components/`:
```javascript
/**
* MyComponent - Description of what it does
*
* @module components/MyComponent
*/
import { DOM } from '../utils/dom';
import Events from '../utils/events';
import Logger from '../utils/logger';
class MyComponent {
/**
* Create a MyComponent instance
* @param {Object} [options={}] - Configuration options
* @param {string} [options.selector='.my-component'] - Root element selector
*/
constructor(options = {}) {
this.options = {
selector: '.my-component',
...options,
};
this.element = DOM.select(this.options.selector);
this.cleanupFunctions = [];
if (this.element) {
this.init();
}
}
/**
* Initialize the component
*/
init() {
Logger.debug('MyComponent initializing');
this.bindEvents();
this.render();
Logger.info('MyComponent initialized');
}
/**
* Bind event listeners
*/
bindEvents() {
// Use event delegation for child elements
const cleanup = Events.delegate(
this.element,
'click',
'.action-button',
(e, button) => this.handleAction(e, button)
);
this.cleanupFunctions.push(cleanup);
// Listen for theme changes
const themeCleanup = Events.on(window, 'adminator:themeChanged', () => {
this.onThemeChange();
});
this.cleanupFunctions.push(themeCleanup);
}
/**
* Handle action button clicks
* @param {Event} e - Click event
* @param {Element} button - Clicked button
*/
handleAction(e, button) {
e.preventDefault();
// Handle the action
}
/**
* Called when theme changes
*/
onThemeChange() {
// Update component for new theme
}
/**
* Render/update the component
*/
render() {
// Update DOM as needed
}
/**
* Destroy the component and clean up
*/
destroy() {
// Run all cleanup functions
this.cleanupFunctions.forEach(fn => fn());
this.cleanupFunctions = [];
Logger.debug('MyComponent destroyed');
}
}
export default MyComponent;
```
### Step 2: Register with the App
Add your component to `app.js`:
```javascript
import MyComponent from './components/MyComponent';
class AdminatorApp {
init() {
// ... existing init code ...
this.initMyComponent();
}
initMyComponent() {
if (DOM.exists('.my-component')) {
const myComponent = new MyComponent();
this.components.set('myComponent', myComponent);
}
}
}
```
### Step 3: Add Styles
Create styles in `src/assets/styles/spec/components/`:
```scss
// _my-component.scss
.my-component {
// Use CSS variables for theme support
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
// Mobile-first responsive styles
padding: 1rem;
@media (min-width: 768px) {
padding: 1.5rem;
}
}
```
Import in `index.scss`:
```scss
@import 'components/my-component';
```
---
## Component Lifecycle
```
┌─────────────────┐
│ constructor │ - Store options
│ │ - Find root element
└────────┬────────┘
│
▼
┌─────────────────┐
│ init() │ - Bind events
│ │ - Initial render
└────────┬────────┘
│
▼
┌─────────────────┐
│ Active State │ - Handle events
│ │ - Respond to theme changes
└────────┬────────┘
│
▼
┌─────────────────┐
│ destroy() │ - Remove event listeners
│ │ - Clean up resources
└─────────────────┘
```
---
## Theme Integration
### Using CSS Variables
Always use CSS variables for colors:
```scss
.my-component {
// Good - supports theme switching
background: var(--c-bkg-card);
color: var(--c-text-base);
border-color: var(--c-border);
// Bad - hardcoded colors
// background: #ffffff;
// color: #212529;
}
```
### Available CSS Variables
| Variable | Description |
|----------|-------------|
| `--c-bkg-body` | Body background |
| `--c-bkg-card` | Card/panel background |
| `--c-text-base` | Primary text color |
| `--c-text-muted` | Secondary text color |
| `--c-border` | Border color |
| `--c-primary` | Primary accent color |
| `--c-success` | Success state color |
| `--c-danger` | Error/danger color |
| `--c-warning` | Warning color |
| `--c-info` | Info color |
### Responding to Theme Changes
```javascript
import Theme from '../utils/theme';
import Events from '../utils/events';
class MyComponent {
bindEvents() {
Events.on(window, 'adminator:themeChanged', (e) => {
const { theme } = e.detail; // 'light' or 'dark'
this.updateForTheme(theme);
});
}
updateForTheme(theme) {
// Get theme-specific colors
const colors = Theme.getChartColors();
// Update canvas, SVG, or other non-CSS elements
this.canvas.style.backgroundColor = colors.tooltipBg;
}
}
```
---
## Event Handling
### Event Delegation (Preferred)
Use event delegation for better performance:
```javascript
import Events from '../utils/events';
// Instead of adding to each button:
// buttons.forEach(btn => btn.addEventListener('click', ...))
// Use delegation (single listener):
Events.delegate(container, 'click', '.btn', (e, btn) => {
console.log('Button clicked:', btn.dataset.action);
});
```
### Cleanup Pattern
Always store cleanup functions and call them in `destroy()`:
```javascript
class MyComponent {
constructor() {
this.cleanupFunctions = [];
}
bindEvents() {
// Events.on returns a cleanup function
const cleanup1 = Events.on(this.element, 'click', this.handleClick);
this.cleanupFunctions.push(cleanup1);
const cleanup2 = Events.delegate(this.element, 'click', '.item', this.handleItem);
this.cleanupFunctions.push(cleanup2);
}
destroy() {
this.cleanupFunctions.forEach(fn => fn());
this.cleanupFunctions = [];
}
}
```
### Custom Events
Emit events for cross-component communication:
```javascript
import Events from '../utils/events';
// Emit an event
Events.emit(window, 'myComponent:action', {
type: 'update',
data: { id: 123 },
});
// Listen for events
Events.on(window, 'myComponent:action', (e) => {
console.log(e.detail.type, e.detail.data);
});
```
---
## Mobile Considerations
### Check for Mobile
```javascript
isMobile() {
return window.innerWidth <= 768;
}
```
### Touch-Friendly Interactions
- Minimum tap target: 44x44px
- Add hover states only on non-touch devices
- Consider swipe gestures for mobile
```scss
.my-button {
min-width: 44px;
min-height: 44px;
padding: 12px;
// Hover only on devices that support it
@media (hover: hover) {
&:hover {
background: var(--c-primary-hover);
}
}
// Active state for touch
&:active {
background: var(--c-primary-active);
}
}
```
### Responsive Events
Use `ResizeObserver` for responsive behavior:
```javascript
import Performance from '../utils/performance';
class MyComponent {
init() {
// React to element resize (more efficient than window.resize)
this.resizeCleanup = Performance.onResize(this.element, ({ width }) => {
this.updateLayout(width);
});
}
destroy() {
this.resizeCleanup?.();
}
}
```
---
## Testing Components
### Create a Test File
Create `tests/components/MyComponent.test.js`:
```javascript
import { describe, it, expect, beforeEach, vi } from 'vitest';
import MyComponent from '../../src/assets/scripts/components/MyComponent';
describe('MyComponent', () => {
beforeEach(() => {
document.body.innerHTML = `
<div class="my-component">
<button class="action-button">Click</button>
</div>
`;
});
it('initializes when element exists', () => {
const component = new MyComponent();
expect(component.element).not.toBeNull();
});
it('handles action button clicks', () => {
const component = new MyComponent();
const handler = vi.spyOn(component, 'handleAction');
document.querySelector('.action-button').click();
expect(handler).toHaveBeenCalled();
});
it('cleans up on destroy', () => {
const component = new MyComponent();
component.destroy();
expect(component.cleanupFunctions).toHaveLength(0);
});
});
```
### Run Tests
```bash
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # With coverage
```
---
## Example: Complete Component
Here's a complete example of a notification component:
```javascript
/**
* NotificationComponent - Toast notifications
*/
import { DOM } from '../utils/dom';
import Events from '../utils/events';
import Logger from '../utils/logger';
class NotificationComponent {
constructor(options = {}) {
this.options = {
container: '.notification-container',
duration: 5000,
position: 'top-right',
...options,
};
this.container = DOM.select(this.options.container);
this.notifications = new Map();
this.cleanupFunctions = [];
this.init();
}
init() {
// Create container if missing
if (!this.container) {
this.container = DOM.create('div', {
class: `notification-container notification-${this.options.position}`,
});
document.body.appendChild(this.container);
}
this.bindEvents();
Logger.info('NotificationComponent initialized');
}
bindEvents() {
// Delegate click events for close buttons
const cleanup = Events.delegate(
this.container,
'click',
'.notification-close',
(e, btn) => {
const notification = btn.closest('.notification');
if (notification) {
this.dismiss(notification.dataset.id);
}
}
);
this.cleanupFunctions.push(cleanup);
}
show(message, type = 'info') {
const id = `notification-${Date.now()}`;
const notification = DOM.create('div', {
class: `notification notification-${type}`,
'data-id': id,
}, [
DOM.create('span', { class: 'notification-message' }, [message]),
DOM.create('button', {
class: 'notification-close',
'aria-label': 'Close notification',
}, ['×']),
]);
this.container.appendChild(notification);
this.notifications.set(id, notification);
// Auto-dismiss
if (this.options.duration > 0) {
setTimeout(() => this.dismiss(id), this.options.duration);
}
// Animate in
requestAnimationFrame(() => {
notification.classList.add('notification-visible');
});
return id;
}
dismiss(id) {
const notification = this.notifications.get(id);
if (!notification) return;
notification.classList.remove('notification-visible');
notification.classList.add('notification-hiding');
setTimeout(() => {
notification.remove();
this.notifications.delete(id);
}, 300);
}
success(message) {
return this.show(message, 'success');
}
error(message) {
return this.show(message, 'error');
}
warning(message) {
return this.show(message, 'warning');
}
destroy() {
this.cleanupFunctions.forEach(fn => fn());
this.notifications.clear();
this.container?.remove();
Logger.debug('NotificationComponent destroyed');
}
}
export default NotificationComponent;
```
---
## Summary
When creating components:
1. **Follow the pattern** - Use the class structure with constructor, init, bindEvents, render, destroy
2. **Use utilities** - DOM, Events, Logger, Performance, Theme
3. **Support themes** - Use CSS variables, listen for theme changes
4. **Clean up** - Store and call cleanup functions in destroy()
5. **Test** - Write unit tests for your component
6. **Document** - Add JSDoc comments to all public methods
For questions or issues, see the main [README.md](../README.md) or open an issue on GitHub.
================================================
FILE: docs/README.md
================================================
# Adminator Documentation
This directory contains the complete documentation for Adminator Bootstrap 5 Admin Template.
## 📁 Documentation Structure
```
docs/
├── index.md # Homepage
├── _config.yml # GitHub Pages configuration
├── getting-started/ # Installation and setup guides
│ ├── installation.md
│ ├── project-structure.md
│ ├── development.md
│ └── build-deployment.md
├── components/ # Component documentation
│ ├── charts.md
│ ├── forms.md
│ ├── tables.md
│ ├── navigation.md
│ └── modals.md
├── customization/ # Theme and styling guides
│ ├── theme-system.md
│ ├── css-variables.md
│ ├── custom-themes.md
│ └── component-theming.md
├── api/ # API reference
│ ├── theme-api.md
│ ├── component-apis.md
│ ├── utilities.md
│ └── events.md
├── examples/ # Practical examples
│ ├── basic-setup.md
│ ├── custom-components.md
│ ├── theme-integration.md
│ └── advanced-patterns.md
├── deployment/ # Production deployment
│ ├── production-build.md
│ ├── static-hosting.md
│ ├── cdn-integration.md
│ └── performance.md
└── contributing/ # Contribution guidelines
├── development-setup.md
├── code-standards.md
├── pull-requests.md
└── issues.md
```
## 🚀 Hosting Strategy
### **GitHub Pages Setup**
1. **Main Branch Integration**: Documentation lives in the `docs/` folder of the main branch
2. **Automatic Deployment**: GitHub Pages automatically builds and deploys on every commit
3. **Custom Domain Support**: Can be configured with custom domains
4. **Jekyll Integration**: Uses Jekyll static site generator with the Minima theme
### **Benefits of This Approach**
✅ **Version Control**: Docs stay in sync with code releases
✅ **Free Hosting**: GitHub Pages provides free, reliable hosting
✅ **Easy Discovery**: Users find docs directly in the repository
✅ **SEO Friendly**: Searchable and indexable documentation
✅ **Collaboration**: Easy for contributors to update docs
✅ **Professional URLs**: Clean URLs like `username.github.io/repo/`
## 📖 Documentation Sections
### **🏁 Getting Started**
Complete setup and installation guides for new users.
### **🎨 Components**
Detailed documentation for all UI components and their usage.
### **🌙 Dark Mode & Theming**
Comprehensive guide to the theme system and customization options.
### **🔧 API Reference**
Complete API documentation for all JavaScript utilities and components.
### **💡 Examples**
Practical, copy-paste examples for common use cases.
### **🚀 Deployment**
Production deployment guides and performance optimization tips.
### **🤝 Contributing**
Guidelines for contributing to the project.
## 🔧 Local Development
To view the documentation locally:
```bash
# Install Jekyll (if not already installed)
gem install bundler jekyll
# Navigate to docs directory
cd docs
# Install dependencies
bundle install
# Serve locally
bundle exec jekyll serve
# Visit http://localhost:4000
```
## 📝 Writing Documentation
### **Markdown Guidelines**
- Use clear, descriptive headings
- Include code examples for all features
- Add cross-references between related sections
- Use emoji for visual appeal (sparingly)
- Include "Next Steps" sections to guide readers
### **Code Examples**
```markdown
\```javascript
// Always include working code examples
const example = Theme.current();
console.log(example);
\```
```
### **File Naming**
- Use lowercase with hyphens: `theme-system.md`
- Be descriptive but concise
- Group related files in subdirectories
## 🔗 Quick Links
- **[Live Documentation](https://puikinsh.github.io/Adminator-admin-dashboard/)** (Coming Soon)
- **[GitHub Repository](https://github.com/puikinsh/Adminator-admin-dashboard)**
- **[Live Demo](https://colorlib.com/polygon/adminator/index.html)**
## 📞 Support
For documentation issues:
- Open an issue with the `documentation` label
- Suggest improvements via pull requests
- Join discussions for larger documentation changes
---
**Happy documenting!** 📚
================================================
FILE: docs/_config.yml
================================================
# GitHub Pages Configuration for Adminator Documentation
# Site settings
title: "Adminator Documentation"
description: "Complete guide for the Adminator Bootstrap 5 Admin Dashboard Template with Dark Mode"
url: "https://puikinsh.github.io"
baseurl: "/Adminator-admin-dashboard"
# Build settings
markdown: kramdown
highlighter: rouge
remote_theme: just-the-docs/just-the-docs
# Plugin settings
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
# Just the Docs theme configuration
color_scheme: nil
search_enabled: true
search:
heading_level: 2
previews: 2
preview_words_before: 3
preview_words_after: 3
tokenizer_separator: /[\s/]+/
rel_url: true
button: false
# Enable custom CSS
sass:
sass_dir: _sass
style: compressed
# Heading anchor links appear on hover over h1-h6 tags
heading_anchors: true
# Footer
footer_content: "Copyright © 2025 Colorlib. Distributed by an <a href=\"https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE\">MIT license.</a>"
# Back to top link
back_to_top: true
back_to_top_text: "Back to top"
# Navigation Structure
nav_sort: case_insensitive
# Aux links for the upper right navigation
aux_links:
"GitHub Repository":
- "//github.com/puikinsh/Adminator-admin-dashboard"
"Live Demo":
- "//colorlib.com/polygon/adminator/index.html"
# Makes Aux links open in a new tab
aux_links_new_tab: true
# SEO
author: "Colorlib"
twitter:
username: colorlib
social:
name: "Colorlib"
links:
- https://github.com/puikinsh/Adminator-admin-dashboard
- https://colorlib.com
# Exclude from processing
exclude:
- Gemfile
- Gemfile.lock
- node_modules
- vendor/bundle/
- vendor/cache/
- vendor/gems/
- vendor/ruby/
# Code highlighting
kramdown:
syntax_highlighter: rouge
syntax_highlighter_opts:
css_class: 'highlight'
block:
line_numbers: false
start_line: 1
# Include
include:
- _pages
# Collections
collections:
pages:
output: true
permalink: /:name/
# Defaults
defaults:
- scope:
path: ""
type: "pages"
values:
layout: "page"
- scope:
path: ""
values:
layout: "default"
================================================
FILE: docs/_sass/custom.scss
================================================
// Custom styles for Adminator Documentation
// Fix code block formatting
.highlight {
.language-javascript,
.language-css,
.language-html,
.language-bash {
&:before {
content: attr(class);
display: block;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid #e5e7eb;
}
}
}
// Better code block styling
pre.highlight {
background-color: #f8fafc !important;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.875rem;
line-height: 1.5;
overflow-x: auto;
code {
background: transparent !important;
border: none !important;
font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}
}
// Inline code styling
code:not(.highlighter-rouge) {
background-color: #f1f5f9 !important;
color: #475569 !important;
padding: 0.125rem 0.25rem !important;
border-radius: 3px !important;
font-size: 0.875em !important;
border: 1px solid #e2e8f0 !important;
}
// Feature cards styling
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.feature-card {
padding: 1.5rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #ffffff;
h3 {
margin-top: 0;
color: #1f2937;
display: flex;
align-items: center;
gap: 0.5rem;
&:before {
content: "✨";
font-size: 1.25em;
}
}
}
// Button improvements
.btn {
&.btn-outline {
border: 1px solid #d1d5db;
color: #374151;
text-decoration: none;
&:hover {
background-color: #f9fafb;
border-color: #9ca3af;
}
}
&.btn-green {
background-color: #059669;
color: white;
border: 1px solid #059669;
&:hover {
background-color: #047857;
border-color: #047857;
}
}
}
// Table styling improvements
table {
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0;
th, td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
th {
background-color: #f9fafb;
font-weight: 600;
color: #374151;
}
tr:hover {
background-color: #f9fafb;
}
}
// Navigation improvements
.site-nav {
.nav-list {
.nav-list-item {
&.active {
> .nav-list-link {
background-color: #eff6ff;
color: #1d4ed8;
}
}
}
}
}
// Custom alert boxes
.alert {
padding: 1rem 1.25rem;
margin: 1.5rem 0;
border-radius: 6px;
border-left: 4px solid;
&.alert-info {
background-color: #eff6ff;
border-left-color: #3b82f6;
color: #1e40af;
}
&.alert-warning {
background-color: #fffbeb;
border-left-color: #f59e0b;
color: #92400e;
}
&.alert-success {
background-color: #f0fdf4;
border-left-color: #10b981;
color: #065f46;
}
}
// Dark mode improvements for code
@media (prefers-color-scheme: dark) {
pre.highlight {
background-color: #1f2937 !important;
border-color: #374151;
code {
color: #e5e7eb !important;
}
}
code:not(.highlighter-rouge) {
background-color: #374151 !important;
color: #d1d5db !important;
border-color: #4b5563 !important;
}
}
================================================
FILE: docs/api/theme-api.md
================================================
---
layout: default
title: Theme API
nav_order: 1
parent: API Reference
---
# Theme API Reference
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
Complete API documentation for the Adminator Theme utility system.
## Overview
The Theme API provides programmatic control over Adminator's dark mode and theming system. It includes methods for theme management, color retrieval, and event handling.
## Theme Object
The global `Theme` object is available throughout the application:
```javascript
// Available globally
window.Theme
// or simply
Theme
```
## Core Methods
### `Theme.apply(theme)`
Applies a specific theme to the application.
**Parameters:**
- `theme` (string): The theme to apply (`'light'` or `'dark'`)
**Returns:** `void`
**Example:**
```javascript
// Apply dark theme
Theme.apply('dark');
// Apply light theme
Theme.apply('light');
```
**Side Effects:**
- Sets `data-theme` attribute on `document.documentElement`
- Updates Chart.js global defaults (if Chart.js is loaded)
- Saves theme preference to localStorage
- Dispatches `adminator:themeChanged` event
---
### `Theme.toggle()`
Toggles between light and dark themes.
**Parameters:** None
**Returns:** `void`
**Example:**
```javascript
// Switch from current theme to opposite
Theme.toggle();
// If current theme is 'light', switches to 'dark'
// If current theme is 'dark', switches to 'light'
```
---
### `Theme.current()`
Gets the currently active theme.
**Parameters:** None
**Returns:** `string` - The current theme (`'light'` or `'dark'`)
**Example:**
```javascript
const currentTheme = Theme.current();
console.log(currentTheme); // 'light' or 'dark'
// Use in conditional logic
if (Theme.current() === 'dark') {
// Dark theme specific logic
}
```
---
### `Theme.init()`
Initializes the theme system. Called automatically on page load.
**Parameters:** None
**Returns:** `void`
**Example:**
```javascript
// Manual initialization (usually not needed)
Theme.init();
```
**Behavior:**
- Checks for stored theme preference in localStorage
- If no stored preference, detects OS color scheme preference
- Applies the determined theme
- Sets up Chart.js defaults if available
---
### `Theme.getCSSVar(varName)`
Retrieves the computed value of a CSS custom property.
**Parameters:**
- `varName` (string): The CSS variable name (including `--` prefix)
**Returns:** `string` - The computed CSS variable value
**Example:**
```javascript
// Get primary color
const primaryColor = Theme.getCSSVar('--c-primary');
console.log(primaryColor); // '#4b7cf3'
// Get background color
const bgColor = Theme.getCSSVar('--c-bkg-body');
console.log(bgColor); // '#f8f9fa' or '#181a1f'
```
## Specialized Color Methods
### `Theme.getChartColors()`
Gets color values optimized for Chart.js components.
**Parameters:** None
**Returns:** `object` - Chart color configuration
**Return Object:**
```javascript
{
textColor: string, // Primary text color
mutedColor: string, // Secondary text color
borderColor: string, // Border colors
gridColor: string, // Grid line colors
tooltipBg: string // Tooltip background
}
```
**Example:**
```javascript
const chartColors = Theme.getChartColors();
const chart = new Chart(ctx, {
options: {
plugins: {
legend: {
labels: {
color: chartColors.textColor
}
}
},
scales: {
y: {
ticks: { color: chartColors.mutedColor },
grid: { color: chartColors.gridColor }
}
}
}
});
```
---
### `Theme.getVectorMapColors()`
Gets color palette for vector map components.
**Parameters:** None
**Returns:** `object` - Vector map color configuration
**Return Object:**
```javascript
{
backgroundColor: string, // Map background
borderColor: string, // Map borders
regionColor: string, // Default region color
markerFill: string, // Marker fill color
markerStroke: string, // Marker stroke color
hoverColor: string, // Hover state color
selectedColor: string, // Selected state color
scaleStart: string, // Color scale start
scaleEnd: string, // Color scale end
scaleLight: string, // Light scale color
scaleDark: string // Dark scale color
}
```
**Example:**
```javascript
const mapColors = Theme.getVectorMapColors();
$('#world-map').vectorMap({
backgroundColor: mapColors.backgroundColor,
regionStyle: {
initial: {
fill: mapColors.regionColor,
stroke: mapColors.borderColor
},
hover: {
fill: mapColors.hoverColor
}
}
});
```
---
### `Theme.getSparklineColors()`
Gets color palette for Sparkline chart components.
**Parameters:** None
**Returns:** `object` - Sparkline color configuration
**Return Object:**
```javascript
{
success: string, // Success state color
purple: string, // Purple variant
info: string, // Info state color
danger: string, // Danger state color
light: string // Light variant
}
```
**Example:**
```javascript
const sparklineColors = Theme.getSparklineColors();
$('.sparkline-success').sparkline(data, {
lineColor: sparklineColors.success,
fillColor: false
});
```
## Event System
### Theme Change Event
The theme system dispatches custom events when themes change.
**Event Name:** `adminator:themeChanged`
**Event Detail:**
```javascript
{
theme: string // The new theme ('light' or 'dark')
}
```
**Example:**
```javascript
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
const newTheme = event.detail.theme;
console.log('Theme changed to:', newTheme);
// Update custom components
updateCustomComponent(newTheme);
});
// Alternative using jQuery
$(window).on('adminator:themeChanged', function(event) {
const newTheme = event.originalEvent.detail.theme;
// Handle theme change
});
```
## Storage Management
### Local Storage Key
The theme preference is stored using the key: `'adminator-theme'`
**Example:**
```javascript
// Manually check stored theme
const storedTheme = localStorage.getItem('adminator-theme');
console.log(storedTheme); // 'light', 'dark', or null
// Manually set theme preference
localStorage.setItem('adminator-theme', 'dark');
```
### Fallback Handling
The Theme API gracefully handles storage unavailability:
```javascript
// Internal implementation example
try {
localStorage.setItem('adminator-theme', theme);
} catch (_) {
// Storage not available - theme won't persist
// But theme will still work for current session
}
```
## Integration Examples
### React Integration
```javascript
import { useEffect, useState } from 'react';
function useTheme() {
const [theme, setTheme] = useState(Theme.current());
useEffect(() => {
const handleThemeChange = (event) => {
setTheme(event.detail.theme);
};
window.addEventListener('adminator:themeChanged', handleThemeChange);
return () => {
window.removeEventListener('adminator:themeChanged', handleThemeChange);
};
}, []);
return {
theme,
toggle: Theme.toggle,
setTheme: Theme.apply
};
}
```
### Vue.js Integration
```javascript
export default {
data() {
return {
currentTheme: Theme.current()
}
},
mounted() {
window.addEventListener('adminator:themeChanged', this.handleThemeChange);
},
beforeDestroy() {
window.removeEventListener('adminator:themeChanged', this.handleThemeChange);
},
methods: {
handleThemeChange(event) {
this.currentTheme = event.detail.theme;
},
toggleTheme() {
Theme.toggle();
}
}
}
```
### Custom Component Integration
```javascript
class CustomWidget {
constructor(element) {
this.element = element;
this.currentTheme = Theme.current();
this.init();
this.bindEvents();
}
init() {
this.updateTheme(this.currentTheme);
}
bindEvents() {
window.addEventListener('adminator:themeChanged', (event) => {
this.currentTheme = event.detail.theme;
this.updateTheme(this.currentTheme);
});
}
updateTheme(theme) {
// Update widget based on theme
if (theme === 'dark') {
this.element.classList.add('widget-dark');
this.element.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');
} else {
this.element.classList.remove('widget-dark');
this.element.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');
}
}
}
```
## Error Handling
### Browser Compatibility
```javascript
// Check for CSS custom property support
function supportsCSSVariables() {
return window.CSS && CSS.supports('color', 'var(--fake-var)');
}
if (!supportsCSSVariables()) {
console.warn('CSS variables not supported - theme switching limited');
}
```
### LocalStorage Availability
```javascript
// Check for localStorage support
function supportsLocalStorage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
if (!supportsLocalStorage()) {
console.warn('localStorage not available - theme preference won\'t persist');
}
```
## Performance Considerations
### Debounced Theme Changes
For applications with many theme-aware components:
```javascript
let themeChangeTimeout;
window.addEventListener('adminator:themeChanged', (event) => {
clearTimeout(themeChangeTimeout);
themeChangeTimeout = setTimeout(() => {
// Expensive theme update operations
updateManyComponents(event.detail.theme);
}, 100);
});
```
### Efficient CSS Variable Reading
Cache CSS variable values when possible:
```javascript
class ThemeCache {
constructor() {
this.cache = new Map();
this.cacheTheme = null;
}
getCSSVar(varName) {
const currentTheme = Theme.current();
if (this.cacheTheme !== currentTheme) {
this.cache.clear();
this.cacheTheme = currentTheme;
}
if (!this.cache.has(varName)) {
const value = Theme.getCSSVar(varName);
this.cache.set(varName, value);
}
return this.cache.get(varName);
}
}
```
---
**Next:** Explore [Component APIs](component-apis.md) or check out [Theme Integration Examples](../examples/theme-integration.md).
================================================
FILE: docs/api.md
================================================
# Adminator API Reference
Complete API documentation for Adminator utilities and components.
## Table of Contents
- [DOM Utilities](#dom-utilities)
- [Theme Manager](#theme-manager)
- [Events Utilities](#events-utilities)
- [Performance Utilities](#performance-utilities)
- [Logger](#logger)
- [Date Utilities](#date-utilities)
- [Custom Events](#custom-events)
---
## DOM Utilities
jQuery-like DOM manipulation using vanilla JavaScript.
```javascript
import { DOM } from './utils/dom';
```
### Selection
#### `DOM.select(selector, context?)`
Select a single element.
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| selector | string | - | CSS selector |
| context | Element | document | Context to search within |
**Returns:** `Element | null`
```javascript
const header = DOM.select('.header');
const navItem = DOM.select('.nav-item', sidebar);
```
#### `DOM.selectAll(selector, context?)`
Select all matching elements.
**Returns:** `Element[]`
```javascript
const buttons = DOM.selectAll('.btn');
buttons.forEach(btn => console.log(btn));
```
#### `DOM.exists(selector)`
Check if element exists.
**Returns:** `boolean`
```javascript
if (DOM.exists('.sidebar')) {
initSidebar();
}
```
### Events
#### `DOM.on(element, event, handler, options?)`
Add event listener.
```javascript
DOM.on('.btn', 'click', handleClick);
DOM.on(button, 'click', handleClick, { once: true });
```
#### `DOM.off(element, event, handler)`
Remove event listener.
```javascript
DOM.off(button, 'click', handleClick);
```
### Classes
#### `DOM.addClass(element, className)`
```javascript
DOM.addClass('.menu', 'open');
```
#### `DOM.removeClass(element, className)`
```javascript
DOM.removeClass('.menu', 'open');
```
#### `DOM.toggleClass(element, className)`
```javascript
DOM.toggleClass('.dropdown', 'show');
```
#### `DOM.hasClass(element, className)`
**Returns:** `boolean`
```javascript
if (DOM.hasClass('.menu', 'open')) {
closeMenu();
}
```
### Attributes
#### `DOM.attr(element, name, value?)`
Get or set attribute.
```javascript
// Get
const href = DOM.attr(link, 'href');
// Set
DOM.attr(link, 'href', '/new-page');
```
#### `DOM.data(element, name, value?)`
Get or set data attribute.
```javascript
// Get data-id
const id = DOM.data(row, 'id');
// Set data-id
DOM.data(row, 'id', '123');
```
### Animations
#### `DOM.slideUp(element, duration?)`
**Returns:** `Promise<void>`
```javascript
await DOM.slideUp('.panel', 300);
```
#### `DOM.slideDown(element, duration?)`
**Returns:** `Promise<void>`
```javascript
await DOM.slideDown('.panel', 300);
```
#### `DOM.fadeIn(element, duration?)`
**Returns:** `Promise<void>`
```javascript
await DOM.fadeIn('.modal', 200);
```
#### `DOM.fadeOut(element, duration?)`
**Returns:** `Promise<void>`
```javascript
await DOM.fadeOut('.modal', 200);
```
### Utilities
#### `DOM.dimensions(element)`
Get element dimensions.
**Returns:** `{ width, height, top, left, bottom, right } | null`
```javascript
const { width, height } = DOM.dimensions('.card');
```
#### `DOM.ready(callback)`
Execute when DOM is ready.
```javascript
DOM.ready(() => {
initApp();
});
```
#### `DOM.create(tag, attrs?, children?)`
Create an element.
```javascript
const button = DOM.create('button', {
class: 'btn btn-primary',
type: 'submit',
}, ['Submit']);
```
---
## Theme Manager
Light/dark mode switching with persistence.
```javascript
import Theme from './utils/theme';
```
### Methods
#### `Theme.init()`
Initialize theme system. Detects OS preference on first visit.
**Returns:** `'light' | 'dark'`
#### `Theme.apply(theme)`
Apply a theme ('light' or 'dark').
**Returns:** `boolean`
```javascript
Theme.apply('dark');
```
#### `Theme.toggle()`
Toggle between light and dark.
**Returns:** `'light' | 'dark'` - The new theme
```javascript
const newTheme = Theme.toggle();
```
#### `Theme.current()`
Get current theme.
**Returns:** `'light' | 'dark'`
#### `Theme.isDark()` / `Theme.isLight()`
Check current theme state.
**Returns:** `boolean`
#### `Theme.getCSSVar(varName)`
Get a CSS variable value.
```javascript
const bgColor = Theme.getCSSVar('--c-bkg-body');
```
#### `Theme.getChartColors()`
Get theme-aware Chart.js colors.
**Returns:** `{ textColor, mutedColor, borderColor, gridColor, tooltipBg }`
---
## Events Utilities
Efficient event handling with delegation and cleanup.
```javascript
import Events from './utils/events';
```
### Methods
#### `Events.on(element, event, handler, options?)`
Add event listener with cleanup support.
**Returns:** `Function` - Cleanup function
```javascript
const cleanup = Events.on(button, 'click', handleClick);
// Later: cleanup();
```
#### `Events.delegate(parent, event, selector, handler, options?)`
Event delegation - single listener for many elements.
**Returns:** `Function` - Cleanup function
```javascript
Events.delegate(document, 'click', '.btn', (e, btn) => {
console.log('Clicked:', btn);
});
```
#### `Events.once(element, event, handler)`
One-time event listener.
#### `Events.debounce(handler, delay?)`
Create debounced handler (default: 250ms).
```javascript
const debouncedSearch = Events.debounce(search, 300);
```
#### `Events.throttle(handler, limit?)`
Create throttled handler (default: 250ms).
```javascript
const throttledScroll = Events.throttle(onScroll, 100);
```
#### `Events.emit(target, eventName, detail?, options?)`
Dispatch a custom event.
```javascript
Events.emit(window, 'myapp:action', { type: 'save' });
```
---
## Performance Utilities
ResizeObserver, IntersectionObserver, and optimization utilities.
```javascript
import Performance from './utils/performance';
```
### Methods
#### `Performance.onResize(element, callback)`
Observe element resize.
**Returns:** `Function` - Cleanup function
```javascript
const unobserve = Performance.onResize(chart, ({ width, height }) => {
chart.resize(width, height);
});
```
#### `Performance.onVisible(element, callback, options?)`
Observe when element enters viewport.
```javascript
Performance.onVisible(element, ({ isIntersecting }) => {
if (isIntersecting) loadContent();
});
```
#### `Performance.lazyLoad(element, loadFn, options?)`
Lazy load when element becomes visible.
```javascript
Performance.lazyLoad(chartContainer, () => initChart());
```
#### `Performance.batch(readFn, writeFn)`
Batch DOM reads and writes.
#### `Performance.nextFrame(callback)`
Execute on next animation frame.
#### `Performance.whenIdle(callback, options?)`
Execute when browser is idle.
#### `Performance.preload(url, as?)`
Preload a resource.
```javascript
await Performance.preload('/images/hero.jpg', 'image');
```
#### `Performance.cleanup()`
Cleanup all observers.
---
## Logger
Development-only logging utility.
```javascript
import Logger from './utils/logger';
```
All methods are no-ops in production.
### Methods
```javascript
Logger.info('Message', { context });
Logger.warn('Warning', { context });
Logger.error('Error', error);
Logger.debug('Debug info', { data });
Logger.group('Group Name');
Logger.groupEnd();
Logger.time('operation');
Logger.timeEnd('operation');
Logger.table(arrayOfObjects);
```
---
## Date Utilities
Date handling using Day.js.
```javascript
import DateUtils from './utils/date';
```
### Methods
```javascript
DateUtils.now() // Current date
DateUtils.format.short(date) // "Jan 15, 2024"
DateUtils.format.long(date) // "January 15, 2024"
DateUtils.format.time(date) // "2:30 PM"
DateUtils.format.relative(date) // "2 hours ago"
DateUtils.form.toInputValue(date) // HTML date input format
DateUtils.form.fromInputValue(str) // Parse HTML date input
DateUtils.compare.isBefore(d1, d2)
DateUtils.compare.isAfter(d1, d2)
DateUtils.compare.isSame(d1, d2)
```
---
## Custom Events
### `adminator:ready`
Fired when app is fully initialized.
```javascript
window.addEventListener('adminator:ready', (e) => {
const { app } = e.detail;
});
```
### `adminator:themeChanged`
Fired when theme changes.
```javascript
window.addEventListener('adminator:themeChanged', (e) => {
const { theme } = e.detail; // 'light' or 'dark'
});
```
---
## TypeScript Support
TypeScript declarations are available in `types/adminator.d.ts`.
```javascript
import Theme from './utils/theme';
Theme.apply('dark'); // Autocomplete works
```
---
## Import Patterns
```javascript
// Individual (recommended)
import { DOM } from './utils/dom';
import Theme from './utils/theme';
// Barrel import
import { DOM, Theme, Events, Performance, Logger } from './utils';
```
================================================
FILE: docs/customization/theme-system.md
================================================
---
layout: default
title: Theme System
nav_order: 1
parent: Customization
---
# Theme System Overview
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
Adminator v2.6.0 introduces a comprehensive dark mode system with intelligent theme switching and component integration.
## 🌟 Features
### Core Capabilities
- **🌗 Smart Toggle**: Bootstrap-based switch with sun/moon icons
- **🔄 OS Detection**: Automatically detects and applies system preference
- **💾 Persistent Storage**: Remembers theme choice across browser sessions
- **⚡ Instant Switching**: Real-time theme updates without page reload
- **🎯 Component Integration**: All elements are theme-aware
### Visual Enhancements
- **🎨 Semantic Colors**: Consistent color variables across components
- **📊 Chart Integration**: Dynamic color schemes for Chart.js
- **🗓️ Calendar Support**: Dark-mode aware FullCalendar
- **🗺️ Map Theming**: Custom color palettes for vector and Google maps
## 🚀 Quick Start
### Basic Usage
The theme system is automatically initialized when the page loads:
```javascript
// The theme toggle is automatically injected into the header
// Users can click the Light/Dark switch to change themes
```
### Programmatic Control
```javascript
// Get current theme
const currentTheme = Theme.current(); // 'light' or 'dark'
// Switch themes
Theme.toggle();
// Set specific theme
Theme.apply('dark');
Theme.apply('light');
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
console.log('Theme changed to:', event.detail.theme);
// Your custom logic here
});
```
## 🎨 CSS Variables
### Core Theme Variables
```css
:root {
/* Backgrounds */
--c-bkg-body: #f8f9fa; /* Main page background */
--c-bkg-card: #ffffff; /* Card and panel backgrounds */
--c-bkg-sidebar: #ffffff; /* Sidebar background */
/* Text Colors */
--c-text-base: #212529; /* Primary text color */
--c-text-muted: #6c757d; /* Secondary text color */
/* UI Elements */
--c-border: #e2e5e8; /* Border colors */
--c-primary: #4b7cf3; /* Primary brand color */
--c-success: #2ecc71; /* Success state color */
--c-danger: #e74c3c; /* Error state color */
}
/* Dark theme overrides */
[data-theme="dark"] {
--c-bkg-body: #181a1f;
--c-bkg-card: #20232a;
--c-bkg-sidebar: #20232a;
--c-text-base: #e8eaed;
--c-text-muted: #9ca3af;
--c-border: #2b2f36;
/* ... additional dark theme variables */
}
```
### Component-Specific Variables
```css
:root {
/* Vector Maps */
--vmap-bg-color: #ffffff;
--vmap-region-color: #e4ecef;
--vmap-hover-color: #ffffff;
/* Charts */
--sparkline-success: #4caf50;
--sparkline-info: #03a9f3;
--sparkline-danger: #f96262;
/* Maps */
--gmap-landscape-hue: #FFBB00;
--gmap-water-hue: #0078FF;
}
```
## 🔧 Implementation Details
### Theme Toggle Component
The theme toggle is automatically injected into the navigation:
```html
<!-- Automatically generated theme toggle -->
<li class="theme-toggle d-flex ai-c">
<div class="form-check form-switch d-flex ai-c">
<label class="form-check-label me-2 text-nowrap c-grey-700" for="theme-toggle">
<i class="ti-sun"></i> Light
</label>
<input class="form-check-input" type="checkbox" id="theme-toggle">
<label class="form-check-label ms-2 text-nowrap c-grey-700" for="theme-toggle">
Dark <i class="ti-moon"></i>
</label>
</div>
</li>
```
### Theme Detection Logic
```javascript
// Automatic OS preference detection
if (!localStorage.getItem('adminator-theme')) {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
Theme.apply(prefersDark ? 'dark' : 'light');
} else {
Theme.apply(Theme.current());
}
```
## 🎯 Component Integration
### Chart.js Integration
Charts automatically update colors when themes change:
```javascript
// Chart colors are automatically updated
const chartColors = Theme.getChartColors();
// Returns: { textColor, mutedColor, borderColor, gridColor, tooltipBg }
// Custom chart configuration
const chart = new Chart(ctx, {
data: data,
options: {
plugins: {
legend: {
labels: {
color: chartColors.textColor
}
}
},
scales: {
y: {
ticks: {
color: chartColors.mutedColor
},
grid: {
color: chartColors.gridColor
}
}
}
}
});
```
### FullCalendar Integration
Calendar styling updates automatically:
```css
/* Automatic dark mode calendar styling */
.fc {
background: var(--c-bkg-card);
color: var(--c-text-base);
}
.fc-event {
border-color: var(--c-border) !important;
}
.fc-daygrid-day {
border-color: var(--c-border) !important;
}
```
### Vector Maps Integration
Maps use theme-aware color palettes:
```javascript
// Get vector map colors for current theme
const mapColors = Theme.getVectorMapColors();
/* Returns:
{
backgroundColor: '#ffffff' | '#20232a',
regionColor: '#e4ecef' | '#2b2f36',
hoverColor: '#ffffff' | '#181a1f',
// ... other map-specific colors
}
*/
```
## 🎨 Custom Styling
### Using CSS Variables
Style your components with theme-aware variables:
```css
.my-custom-component {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 1rem;
}
.my-custom-button {
background: var(--c-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.my-custom-button:hover {
background: var(--c-primary);
opacity: 0.9;
}
```
### Creating Theme-Aware Components
```javascript
class MyCustomComponent {
constructor(element) {
this.element = element;
this.init();
// Listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
this.updateTheme(event.detail.theme);
});
}
updateTheme(theme) {
// Update component based on theme
if (theme === 'dark') {
this.element.classList.add('dark-mode');
} else {
this.element.classList.remove('dark-mode');
}
}
}
```
## 🔍 Advanced Usage
### Custom Theme Colors
Override default theme colors:
```css
:root {
/* Custom brand colors */
--c-primary: #your-brand-color;
--c-success: #your-success-color;
}
[data-theme="dark"] {
/* Custom dark theme colors */
--c-primary: #your-dark-brand-color;
--c-success: #your-dark-success-color;
}
```
### Theme-Specific Images
Use different images for light/dark themes:
```css
.logo {
background-image: url('logo-light.png');
}
[data-theme="dark"] .logo {
background-image: url('logo-dark.png');
}
```
### Dynamic Theme Updates
Create dynamic theme switching animations:
```css
/* Smooth theme transitions */
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Disable transitions during theme switch */
.theme-transitioning * {
transition: none !important;
}
```
## 🐛 Troubleshooting
### Common Issues
#### Theme Not Persisting
```javascript
// Check localStorage availability
if (typeof(Storage) !== "undefined") {
// localStorage is available
} else {
// No web storage support
console.warn('localStorage not available - theme won\'t persist');
}
```
#### Components Not Updating
```javascript
// Ensure components listen for theme changes
window.addEventListener('adminator:themeChanged', (event) => {
// Force component update
myComponent.refresh();
});
```
#### CSS Variables Not Working
```css
/* Fallback for older browsers */
.my-component {
background: #ffffff; /* Fallback */
background: var(--c-bkg-card); /* Modern */
}
```
## 📚 Related Documentation
- **[CSS Variables Reference](css-variables.md)** - Complete variable list
- **[Custom Theme Creation](custom-themes.md)** - Create your own themes
- **[Component Theming](component-theming.md)** - Theme individual components
---
**Ready to customize?** Start with the [CSS Variables Reference](css-variables.md) or explore [Custom Theme Creation](custom-themes.md)!
================================================
FILE: docs/customization.md
================================================
---
layout: default
title: Customization
nav_order: 3
has_children: true
---
# Customization
Learn how to customize Adminator's appearance and behavior.
This section covers the dark mode system, theming, CSS variables, and custom component creation.
================================================
FILE: docs/examples/theme-integration.md
================================================
---
layout: default
title: Theme Integration
nav_order: 1
parent: Examples
---
# Theme Integration Examples
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
Practical examples for integrating custom components with Adminator's theme system.
## Basic Theme-Aware Component
### Simple CSS Integration
Create components that automatically adapt to theme changes:
```html
<!-- HTML -->
<div class="custom-widget">
<h3 class="widget-title">My Custom Widget</h3>
<div class="widget-content">
<p>This widget adapts to the current theme.</p>
<button class="widget-button">Action</button>
</div>
</div>
```
```css
/* CSS using theme variables */
.custom-widget {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.widget-title {
color: var(--c-text-base);
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}
.widget-content {
color: var(--c-text-muted);
line-height: 1.6;
}
.widget-button {
background: var(--c-primary);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.2s ease;
}
.widget-button:hover {
opacity: 0.9;
}
/* Dark theme specific adjustments */
[data-theme="dark"] .custom-widget {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
```
## JavaScript Integration
### Theme-Aware Class Component
```javascript
class ThemeAwareWidget {
constructor(element, options = {}) {
this.element = element;
this.options = {
autoUpdate: true,
customColors: {},
...options
};
this.currentTheme = Theme.current();
this.init();
}
init() {
this.render();
this.bindEvents();
this.updateTheme(this.currentTheme);
}
render() {
this.element.innerHTML = `
<div class="theme-widget">
<div class="widget-header">
<h4>Theme-Aware Widget</h4>
<span class="theme-indicator">${this.currentTheme}</span>
</div>
<div class="widget-body">
<div class="color-preview">
<div class="color-sample" data-color="primary"></div>
<div class="color-sample" data-color="success"></div>
<div class="color-sample" data-color="danger"></div>
</div>
</div>
</div>
`;
}
bindEvents() {
if (this.options.autoUpdate) {
window.addEventListener('adminator:themeChanged', (event) => {
this.currentTheme = event.detail.theme;
this.updateTheme(this.currentTheme);
});
}
}
updateTheme(theme) {
const widget = this.element.querySelector('.theme-widget');
// Update theme indicator
const indicator = widget.querySelector('.theme-indicator');
indicator.textContent = theme;
indicator.className = `theme-indicator theme-${theme}`;
// Update color samples
const samples = widget.querySelectorAll('.color-sample');
samples.forEach(sample => {
const colorType = sample.dataset.color;
const cssVar = `--c-${colorType}`;
const color = Theme.getCSSVar(cssVar);
sample.style.backgroundColor = color;
});
// Apply custom colors if provided
if (this.options.customColors[theme]) {
Object.entries(this.options.customColors[theme]).forEach(([property, value]) => {
widget.style.setProperty(property, value);
});
}
// Trigger custom update callback
if (this.options.onThemeChange) {
this.options.onThemeChange(theme, this);
}
}
// Public methods
setTheme(theme) {
Theme.apply(theme);
}
getCurrentColors() {
return {
primary: Theme.getCSSVar('--c-primary'),
success: Theme.getCSSVar('--c-success'),
danger: Theme.getCSSVar('--c-danger'),
background: Theme.getCSSVar('--c-bkg-card'),
text: Theme.getCSSVar('--c-text-base')
};
}
destroy() {
// Cleanup event listeners
window.removeEventListener('adminator:themeChanged', this.updateTheme);
}
}
// Usage
const widget = new ThemeAwareWidget(document.getElementById('my-widget'), {
customColors: {
dark: {
'--custom-accent': '#ff6b6b'
},
light: {
'--custom-accent': '#4dabf7'
}
},
onThemeChange: (theme, instance) => {
console.log(`Widget theme changed to: ${theme}`);
}
});
```
## Chart Integration
### Theme-Aware Chart.js
```javascript
class ThemeChart {
constructor(canvas, data, options = {}) {
this.canvas = canvas;
this.data = data;
this.options = options;
this.chart = null;
this.init();
}
init() {
this.createChart();
this.bindThemeEvents();
}
createChart() {
const colors = Theme.getChartColors();
const config = {
type: this.options.type || 'line',
data: this.processData(this.data, colors),
options: {
responsive: true,
plugins: {
legend: {
labels: {
color: colors.textColor,
usePointStyle: true
}
},
tooltip: {
backgroundColor: colors.tooltipBg,
titleColor: colors.textColor,
bodyColor: colors.textColor,
borderColor: colors.borderColor,
borderWidth: 1
}
},
scales: {
x: {
ticks: {
color: colors.mutedColor
},
grid: {
color: colors.gridColor
}
},
y: {
ticks: {
color: colors.mutedColor
},
grid: {
color: colors.gridColor
}
}
},
...this.options.chartOptions
}
};
this.chart = new Chart(this.canvas, config);
}
processData(data, colors) {
return {
...data,
datasets: data.datasets.map((dataset, index) => ({
...dataset,
borderColor: dataset.borderColor || this.getDatasetColor(index, colors),
backgroundColor: dataset.backgroundColor || this.getDatasetColor(index, colors, 0.2)
}))
};
}
getDatasetColor(index, colors, alpha = 1) {
const colorKeys = ['primary', 'success', 'danger', 'info', 'warning'];
const colorKey = colorKeys[index % colorKeys.length];
const color = Theme.getCSSVar(`--c-${colorKey}`);
if (alpha < 1) {
// Convert hex to rgba
const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16);
const b = parseInt(color.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
return color;
}
bindThemeEvents() {
window.addEventListener('adminator:themeChanged', () => {
this.updateChart();
});
}
updateChart() {
if (!this.chart) return;
const colors = Theme.getChartColors();
// Update chart options
this.chart.options.plugins.legend.labels.color = colors.textColor;
this.chart.options.plugins.tooltip.backgroundColor = colors.tooltipBg;
this.chart.options.plugins.tooltip.titleColor = colors.textColor;
this.chart.options.plugins.tooltip.bodyColor = colors.textColor;
this.chart.options.plugins.tooltip.borderColor = colors.borderColor;
// Update scales
this.chart.options.scales.x.ticks.color = colors.mutedColor;
this.chart.options.scales.x.grid.color = colors.gridColor;
this.chart.options.scales.y.ticks.color = colors.mutedColor;
this.chart.options.scales.y.grid.color = colors.gridColor;
// Update dataset colors
this.chart.data.datasets.forEach((dataset, index) => {
dataset.borderColor = this.getDatasetColor(index, colors);
dataset.backgroundColor = this.getDatasetColor(index, colors, 0.2);
});
this.chart.update();
}
destroy() {
if (this.chart) {
this.chart.destroy();
}
}
}
// Usage
const chartData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Sales',
data: [12, 19, 3, 5, 2, 3]
}, {
label: 'Revenue',
data: [2, 3, 20, 5, 1, 4]
}]
};
const themeChart = new ThemeChart(
document.getElementById('myChart'),
chartData,
{
type: 'line',
chartOptions: {
tension: 0.4
}
}
);
```
## Custom Modal Integration
### Theme-Aware Modal
```javascript
class ThemeModal {
constructor(options = {}) {
this.options = {
title: 'Modal Title',
content: '',
size: 'md', // sm, md, lg, xl
backdrop: true,
keyboard: true,
...options
};
this.modal = null;
this.element = null;
this.currentTheme = Theme.current();
this.init();
}
init() {
this.createElement();
this.bindEvents();
this.updateTheme(this.currentTheme);
}
createElement() {
const modalId = `modal-${Date.now()}`;
const modalHTML = `
<div class="modal fade theme-modal" id="${modalId}" tabindex="-1">
<div class="modal-dialog modal-${this.options.size}">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">${this.options.title}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
${this.options.content}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary modal-action">Save</button>
</div>
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', modalHTML);
this.element = document.getElementById(modalId);
// Initialize Bootstrap modal
this.modal = new bootstrap.Modal(this.element, {
backdrop: this.options.backdrop,
keyboard: this.options.keyboard
});
}
bindEvents() {
// Theme change event
window.addEventListener('adminator:themeChanged', (event) => {
this.currentTheme = event.detail.theme;
this.updateTheme(this.currentTheme);
});
// Action button click
const actionButton = this.element.querySelector('.modal-action');
actionButton.addEventListener('click', () => {
if (this.options.onAction) {
this.options.onAction(this);
}
});
// Cleanup on hide
this.element.addEventListener('hidden.bs.modal', () => {
if (this.options.autoDestroy !== false) {
this.destroy();
}
});
}
updateTheme(theme) {
const content = this.element.querySelector('.modal-content');
// Apply theme-specific styles
content.style.backgroundColor = Theme.getCSSVar('--c-bkg-card');
content.style.color = Theme.getCSSVar('--c-text-base');
content.style.border = `1px solid ${Theme.getCSSVar('--c-border')}`;
// Update header
const header = this.element.querySelector('.modal-header');
header.style.borderBottom = `1px solid ${Theme.getCSSVar('--c-border')}`;
// Update footer
const footer = this.element.querySelector('.modal-footer');
footer.style.borderTop = `1px solid ${Theme.getCSSVar('--c-border')}`;
// Update close button for dark theme
const closeButton = this.element.querySelector('.btn-close');
if (theme === 'dark') {
closeButton.classList.add('btn-close-white');
} else {
closeButton.classList.remove('btn-close-white');
}
}
show() {
this.modal.show();
}
hide() {
this.modal.hide();
}
destroy() {
if (this.modal) {
this.modal.dispose();
}
if (this.element) {
this.element.remove();
}
}
}
// Usage
const modal = new ThemeModal({
title: 'Theme-Aware Modal',
content: '<p>This modal adapts to the current theme automatically.</p>',
size: 'lg',
onAction: (modalInstance) => {
console.log('Action button clicked!');
modalInstance.hide();
}
});
modal.show();
```
## React Hook Integration
### useTheme Hook
```javascript
import { useState, useEffect } from 'react';
// Custom hook for theme management
export function useTheme() {
const [theme, setTheme] = useState(() => {
// Initialize with current theme
return window.Theme ? window.Theme.current() : 'light';
});
const [isLoading, setIsLoading] = useState(!window.Theme);
useEffect(() => {
// Wait for Theme object to be available
if (!window.Theme) {
const checkTheme = () => {
if (window.Theme) {
setTheme(window.Theme.current());
setIsLoading(false);
} else {
setTimeout(checkTheme, 100);
}
};
checkTheme();
return;
}
const handleThemeChange = (event) => {
setTheme(event.detail.theme);
};
window.addEventListener('adminator:themeChanged', handleThemeChange);
return () => {
window.removeEventListener('adminator:themeChanged', handleThemeChange);
};
}, []);
const toggleTheme = () => {
if (window.Theme) {
window.Theme.toggle();
}
};
const setSpecificTheme = (newTheme) => {
if (window.Theme) {
window.Theme.apply(newTheme);
}
};
const getThemeColors = () => {
if (!window.Theme) return {};
return {
primary: window.Theme.getCSSVar('--c-primary'),
success: window.Theme.getCSSVar('--c-success'),
danger: window.Theme.getCSSVar('--c-danger'),
background: window.Theme.getCSSVar('--c-bkg-card'),
text: window.Theme.getCSSVar('--c-text-base'),
muted: window.Theme.getCSSVar('--c-text-muted'),
border: window.Theme.getCSSVar('--c-border')
};
};
return {
theme,
isLoading,
isDark: theme === 'dark',
isLight: theme === 'light',
toggle: toggleTheme,
setTheme: setSpecificTheme,
colors: getThemeColors()
};
}
// React component using the hook
export function ThemeAwareCard({ children, title }) {
const { theme, colors, isDark } = useTheme();
const cardStyle = {
backgroundColor: colors.background,
color: colors.text,
border: `1px solid ${colors.border}`,
borderRadius: '8px',
padding: '1.5rem',
boxShadow: isDark
? '0 2px 4px rgba(0, 0, 0, 0.3)'
: '0 2px 4px rgba(0, 0, 0, 0.1)'
};
const titleStyle = {
color: colors.text,
marginBottom: '1rem',
fontSize: '1.25rem',
fontWeight: '600'
};
return (
<div style={cardStyle} className={`theme-card theme-${theme}`}>
{title && <h3 style={titleStyle}>{title}</h3>}
<div style={{ color: colors.muted }}>
{children}
</div>
</div>
);
}
// Theme toggle button component
export function ThemeToggle() {
const { theme, toggle, isLoading } = useTheme();
if (isLoading) {
return <div>Loading theme...</div>;
}
return (
<button
onClick={toggle}
className={`btn btn-outline-${theme === 'dark' ? 'light' : 'dark'}`}
>
{theme === 'dark' ? '☀️ Light' : '🌙 Dark'}
</button>
);
}
```
## Performance Optimization
### Throttled Theme Updates
For components with expensive rendering:
```javascript
class PerformantThemeComponent {
constructor(element) {
this.element = element;
this.updateTheme = this.throttle(this._updateTheme.bind(this), 100);
window.addEventListener('adminator:themeChanged', this.updateTheme);
}
throttle(func, limit) {
let inThrottle;
return function() {
const args = arguments;
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
_updateTheme(event) {
// Expensive theme update operations
this.recalculateLayout();
this.updateComplexVisuals();
}
recalculateLayout() {
// Complex layout calculations
}
updateComplexVisuals() {
// Expensive visual updates
}
}
```
---
**Next Steps:**
- Check out [Component APIs](../api/component-apis.md) for more integration options
- Explore [Advanced Patterns](advanced-patterns.md) for complex scenarios
- Review [Performance Optimization](../deployment/performance.md) for production tips
================================================
FILE: docs/examples.md
================================================
---
layout: default
title: Examples
nav_order: 5
has_children: true
---
# Examples
Practical examples and integration guides.
This section provides real-world examples of using Adminator in various scenarios and frameworks.
================================================
FILE: docs/getting-started/build-deployment.md
================================================
# Build & Deployment
This guide covers building Adminator for production and deploying it to various hosting platforms.
## Table of Contents
- Production Build
- Build Commands
- Build Output
- Build Optimization
- Deployment Options
- Static Hosting Platforms
- Server Deployment
- Environment Configuration
- Pre-Deployment Checklist
- Post-Deployment Verification
- Troubleshooting
- Next Steps
## Production Build
Before deploying, you need to create an optimized production build.
### Quick Build
```bash
npm run build
```
This creates an optimized, minified production build in the `dist/` directory.
## Build Commands
### Standard Production Build
```bash
npm run build
```
**Features:**
- Minified JavaScript and CSS
- Optimized assets
- Source maps disabled
- Production environment variables
- Compressed bundle sizes
### Minified Build
```bash
npm run release:minified
```
**Use case:** Maximum optimization for production deployment
**Features:**
- Aggressive minification
- Tree shaking
- Dead code elimination
- Smallest possible bundle size
### Unminified Build
```bash
npm run release:unminified
```
**Use case:** Debugging production issues
**Features:**
- Readable code
- No minification
- Easier to debug
- Larger file sizes
### Clean Build
```bash
# Clean and rebuild
npm run clean
npm run build
```
Removes the `dist/` directory before building to ensure a fresh build.
## Build Output
After running the build command, the `dist/` directory contains:
```
dist/
├── index.html # Main dashboard page
├── 404.html # Error pages
├── 500.html
├── signin.html # Authentication pages
├── signup.html
├── email.html # Application pages
├── compose.html
├── chat.html
├── calendar.html
├── charts.html
├── forms.html
├── buttons.html
├── ui.html
├── basic-table.html
├── datatable.html
├── google-maps.html
├── vector-maps.html
├── blank.html
└── assets/
├── bundle.[hash].js # Compiled JavaScript
├── styles.[hash].css # Compiled CSS
└── static/ # Images, fonts, etc.
├── fonts/
└── images/
```
### File Hashing
Production builds include content hashes in filenames (e.g., `bundle.a1b2c3d4.js`) for:
- Cache busting
- Long-term caching
- Version control
## Build Optimization
### Automatic Optimizations
The build process automatically applies:
1. **JavaScript Optimization**
- Minification with Terser
- Tree shaking (removes unused code)
- Code splitting
- ES6+ transpilation to ES5
2. **CSS Optimization**
- Minification with CSS Minimizer
- Autoprefixer for browser compatibility
- Unused CSS removal
- Critical CSS inlining (optional)
3. **Asset Optimization**
- Image compression
- Font subsetting
- SVG optimization
- Asset hashing
4. **Bundle Optimization**
- Gzip compression ready
- Brotli compression ready
- Chunk splitting
- Lazy loading support
### Bundle Size Analysis
To analyze your bundle size:
```bash
# Install webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
# Add to webpack config and rebuild
npm run build
```
## Deployment Options
Adminator can be deployed to various platforms:
### 1. Static Hosting (Recommended)
- Netlify
- Vercel
- GitHub Pages
- Cloudflare Pages
- AWS S3 + CloudFront
- Azure Static Web Apps
### 2. Traditional Hosting
- Apache
- Nginx
- IIS
- Any web server
### 3. Cloud Platforms
- AWS (S3, EC2, Amplify)
- Google Cloud Platform
- Microsoft Azure
- DigitalOcean
## Static Hosting Platforms
### Netlify
**1. Install Netlify CLI:**
```bash
npm install -g netlify-cli
```
**2. Build your project:**
```bash
npm run build
```
**3. Deploy:**
```bash
netlify deploy --prod --dir=dist
```
**Or use Netlify's drag-and-drop:**
1. Go to [netlify.com](https://netlify.com)
2. Drag the `dist/` folder to deploy
3. Done!
**netlify.toml configuration:**
```toml
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
```
### Vercel
**1. Install Vercel CLI:**
```bash
npm install -g vercel
```
**2. Deploy:**
```bash
vercel --prod
```
**vercel.json configuration:**
```json
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}
```
### GitHub Pages
**1. Install gh-pages:**
```bash
npm install --save-dev gh-pages
```
**2. Add deploy script to package.json:**
```json
{
"scripts": {
"deploy": "npm run build && gh-pages -d dist"
}
}
```
**3. Deploy:**
```bash
npm run deploy
```
**4. Configure GitHub Pages:**
- Go to repository Settings → Pages
- Select `gh-pages` branch
- Save
### Cloudflare Pages
**1. Connect your repository:**
- Go to [pages.cloudflare.com](https://pages.cloudflare.com)
- Connect your GitHub/GitLab repository
**2. Configure build settings:**
- Build command: `npm run build`
- Build output directory: `dist`
- Root directory: `/`
**3. Deploy:**
- Push to your repository
- Cloudflare automatically builds and deploys
### AWS S3 + CloudFront
**1. Build your project:**
```bash
npm run build
```
**2. Install AWS CLI:**
```bash
# Follow AWS CLI installation guide
aws configure
```
**3. Create S3 bucket and upload:**
```bash
# Create bucket
aws s3 mb s3://your-bucket-name
# Upload files
aws s3 sync dist/ s3://your-bucket-name --delete
# Enable static website hosting
aws s3 website s3://your-bucket-name --index-document index.html --error-document 404.html
```
**4. Set up CloudFront (optional but recommended):**
- Create CloudFront distribution
- Point to S3 bucket
- Configure caching rules
- Add custom domain (optional)
## Server Deployment
### Apache
**1. Build your project:**
```bash
npm run build
```
**2. Copy files to web root:**
```bash
cp -r dist/* /var/www/html/
```
**3. Configure .htaccess:**
```apache
# .htaccess in dist/
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
# Enable Gzip compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>
# Browser caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
```
### Nginx
**1. Build your project:**
```bash
npm run build
```
**2. Copy files to web root:**
```bash
cp -r dist/* /usr/share/nginx/html/
```
**3. Configure nginx.conf:**
```nginx
server {
listen 80;
server_name your-domain.com;
root /usr/share/nginx/html;
index index.html;
# Gzip compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
gzip_min_length 1000;
# Browser caching
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# SPA fallback
location / {
try_files $uri $uri/ /index.html;
}
# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
}
```
**4. Restart Nginx:**
```bash
sudo systemctl restart nginx
```
## Environment Configuration
### Environment Variables
Create environment-specific configurations:
**Development (.env.development):**
```env
NODE_ENV=development
API_URL=http://localhost:3000
DEBUG=true
```
**Production (.env.production):**
```env
NODE_ENV=production
API_URL=https://api.yourdomain.com
DEBUG=false
```
### Using Environment Variables
In your JavaScript:
```javascript
const apiUrl = process.env.API_URL || 'http://localhost:3000';
const isProduction = process.env.NODE_ENV === 'production';
```
## Pre-Deployment Checklist
Before deploying to production, verify:
### Code Quality
- [ ] All linting errors fixed (`npm run lint`)
- [ ] No console.log statements in production code
- [ ] All TODO/FIXME comments addressed
- [ ] Code reviewed and tested
### Build
- [ ] Production build succeeds (`npm run build`)
- [ ] No build warnings or errors
- [ ] Bundle sizes are acceptable
- [ ] All assets are included
### Testing
- [ ] All pages load correctly
- [ ] Navigation works properly
- [ ] Forms submit correctly
- [ ] Charts and visualizations display
- [ ] Dark mode toggle works
- [ ] Responsive design tested on mobile
### Performance
- [ ] Images optimized
- [ ] Lazy loading implemented where needed
- [ ] Bundle size optimized
- [ ] Caching configured
### Security
- [ ] No sensitive data in code
- [ ] API keys in environment variables
- [ ] HTTPS configured
- [ ] Security headers set
- [ ] CORS configured properly
### SEO (if applicable)
- [ ] Meta tags added
- [ ] Page titles set
- [ ] Alt text for images
- [ ] Sitemap generated
- [ ] robots.txt configured
### Browser Compatibility
- [ ] Tested in Chrome/Edge
- [ ] Tested in Firefox
- [ ] Tested in Safari
- [ ] Tested on mobile devices
## Post-Deployment Verification
After deployment, verify:
1. **Site Accessibility**
- Visit your deployed URL
- Check all pages load
- Test navigation
2. **Functionality**
- Test interactive features
- Verify forms work
- Check API connections
3. **Performance**
- Run Lighthouse audit
- Check page load times
- Verify asset loading
4. **Mobile Responsiveness**
- Test on actual devices
- Check responsive breakpoints
- Verify touch interactions
5. **Console Errors**
- Open browser DevTools
- Check for JavaScript errors
- Verify no 404s for assets
## Troubleshooting
### Build Fails
```bash
# Clear cache and rebuild
npm run clean
rm -rf node_modules package-lock.json
npm install
npm run build
```
### Assets Not Loading
- Check file paths are relative
- Verify assets are in `dist/` folder
- Check server configuration
- Verify CORS settings
### Blank Page After Deployment
- Check browser console for errors
- Verify all files uploaded
- Check base URL configuration
- Verify server routing for SPA
### Styles Not Applied
- Check CSS file is loaded
- Verify CSS file path
- Check for CSS conflicts
- Clear browser cache
### 404 Errors
- Configure server for SPA routing
- Add `.htaccess` or nginx config
- Verify all HTML files uploaded
## Performance Optimization
### Enable Compression
Most hosting platforms enable Gzip/Brotli automatically. Verify:
```bash
# Check if Gzip is enabled
curl -H "Accept-Encoding: gzip" -I https://your-domain.com
```
### CDN Configuration
Use a CDN for faster global delivery:
- Cloudflare
- AWS CloudFront
- Fastly
- KeyCDN
### Caching Strategy
Set appropriate cache headers:
- HTML: No cache or short cache
- CSS/JS: Long cache (1 year) with hashing
- Images: Long cache (1 year)
- Fonts: Long cache (1 year)
## Continuous Deployment
### GitHub Actions
Create `.github/workflows/deploy.yml`:
```yaml
name: Deploy to Production
on:
push:
branches: [ main ]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to Netlify
uses: netlify/actions/cli@master
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
with:
args: deploy --prod --dir=dist
```
## Next Steps
Congratulations on deploying Adminator! 🎉
Continue learning:
1. **[Theme System](../customization/theme-system.md)** - Customize colors and themes
2. **[API Reference](../api/theme-api.md)** - JavaScript API documentation
3. **[Examples](../examples/theme-integration.md)** - Integration examples
---
**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).
================================================
FILE: docs/getting-started/development.md
================================================
# Development Workflow
This guide covers the development workflow for working with Adminator, including running the development server, making changes, and best practices.
## Table of Contents
- Quick Start
- Development Server
- Available npm Scripts
- Making Changes
- Hot Module Replacement
- Code Quality & Linting
- Debugging
- Working with Components
- Working with Styles
- Best Practices
- Common Issues
- Next Steps
## Quick Start
After [installation](installation.md), start the development server:
```bash
npm start
```
Your application will be available at **http://localhost:4000**
## Development Server
### Standard Development Server
The standard development server includes hot module replacement (HMR) for instant updates:
```bash
npm start
```
**Features:**
- Hot module replacement (HMR)
- Automatic browser refresh
- Source maps for debugging
- Fast rebuild times
- Runs on port 4000
### Development Server with Dashboard
For enhanced development experience with visual feedback:
```bash
npm run dev
```
**Additional Features:**
- Visual webpack dashboard
- Real-time build statistics
- Bundle size analysis
- Build time metrics
- Module dependency graph
## Available npm Scripts
### Development
| Command | Description |
|---------|-------------|
| `npm start` | Start development server with HMR |
| `npm run dev` | Start development server with webpack dashboard |
| `npm run clean` | Clean the `dist/` directory |
### Production Build
| Command | Description |
|---------|-------------|
| `npm run build` | Production build (optimized, minified) |
| `npm run release:minified` | Production build with minification |
| `npm run release:unminified` | Production build without minification (for debugging) |
| `npm run preview` | Preview production build locally |
### Code Quality
| Command | Description |
|---------|-------------|
| `npm run lint` | Run all linters (JavaScript + SCSS) |
| `npm run lint:js` | Lint JavaScript files with ESLint |
| `npm run lint:scss` | Lint SCSS files with Stylelint |
## Making Changes
### File Watching
The development server automatically watches for changes in:
- **HTML files** (`src/*.html`)
- **JavaScript files** (`src/assets/scripts/**/*.js`)
- **SCSS files** (`src/assets/styles/**/*.scss`)
- **Static assets** (`src/assets/static/**/*`)
Changes are automatically compiled and the browser refreshes.
### Workflow
1. **Start the development server**
```bash
npm start
```
2. **Make your changes** in the `src/` directory
3. **Save the file** - Changes are automatically detected
4. **Browser refreshes** - See your changes instantly
## Hot Module Replacement (HMR)
HMR allows modules to be updated without a full page reload, preserving application state.
### What Gets Hot Reloaded?
- ✅ **JavaScript modules** - Component updates without page reload
- ✅ **SCSS/CSS** - Style updates without page reload
- ⚠️ **HTML files** - Requires full page reload
- ⚠️ **Configuration files** - Requires server restart
### HMR Benefits
- Faster development cycle
- Preserves application state
- Instant visual feedback
- Better debugging experience
## Code Quality & Linting
### JavaScript Linting (ESLint)
Adminator uses ESLint 9.x with flat configuration:
```bash
# Lint all JavaScript files
npm run lint:js
# Auto-fix issues (if possible)
npx eslint ./src --fix
```
**Configuration:** `eslint.config.mjs`
**Rules:**
- ES6+ modern JavaScript
- No jQuery patterns
- Consistent code style
- Import/export validation
### SCSS Linting (Stylelint)
Maintain consistent SCSS code style:
```bash
# Lint all SCSS files
npm run lint:scss
# Auto-fix issues (if possible)
npx stylelint "./src/**/*.scss" --fix
```
**Configuration:** `.stylelintrc.json`
### Running All Linters
```bash
npm run lint
```
This runs both JavaScript and SCSS linters in sequence.
## Debugging
### Source Maps
Development builds include source maps for easier debugging:
1. Open browser DevTools (F12)
2. Navigate to Sources tab
3. Find your original source files under `webpack://`
4. Set breakpoints and debug as normal
### Console Logging
The application includes minimal console output in production. For development debugging:
```javascript
// Development-only logging
if (process.env.NODE_ENV !== 'production') {
console.log('Debug info:', data);
}
```
### Browser DevTools
**Recommended Extensions:**
- React Developer Tools (if using React components)
- Vue.js devtools (if using Vue components)
- Redux DevTools (if using Redux)
## Working with Components
### Creating a New Component
1. **Create component file** in `src/assets/scripts/components/`:
```javascript
// src/assets/scripts/components/MyComponent.js
class MyComponent {
constructor(element) {
this.element = element;
this.init();
}
init() {
// Initialize component
this.setupEventListeners();
}
setupEventListeners() {
// Add event listeners
}
destroy() {
// Cleanup
}
}
export default MyComponent;
```
2. **Import and use** in `app.js`:
```javascript
import MyComponent from '@/components/MyComponent';
// Initialize
const myComponent = new MyComponent(document.querySelector('.my-component'));
```
3. **Add component styles** in `src/assets/styles/spec/components/`:
```scss
// src/assets/styles/spec/components/myComponent.scss
.my-component {
// Component styles
}
```
4. **Import styles** in `src/assets/styles/spec/components/index.scss`:
```scss
@import 'myComponent';
```
### Component Best Practices
- Use ES6 classes for components
- Keep components focused and single-purpose
- Implement `destroy()` method for cleanup
- Use webpack aliases (`@/components`, `@/utils`)
- Follow existing naming conventions
## Working with Styles
### SCSS Architecture
Adminator follows ITCSS (Inverted Triangle CSS) methodology:
```
styles/
├── settings/ # Variables, config
├── tools/ # Mixins, functions
├── generic/ # Reset, normalize
├── components/ # UI components
├── utils/ # Utility classes
└── vendor/ # Third-party styles
```
### Adding New Styles
1. **Component styles** → `src/assets/styles/spec/components/`
2. **Page-specific styles** → `src/assets/styles/spec/screens/`
3. **Utility classes** → `src/assets/styles/spec/utils/`
### Using CSS Variables
Adminator uses CSS custom properties for theming:
```scss
.my-component {
background: var(--c-bkg-card);
color: var(--c-text-base);
border: 1px solid var(--c-border);
}
```
**Available variables:** See `src/assets/styles/spec/utils/theme.css`
### Dark Mode Support
Ensure your components support dark mode:
```scss
.my-component {
background: var(--c-bkg-card); // Auto-adjusts for dark mode
// Or use data attribute
[data-theme="dark"] & {
background: #1f2937;
}
}
```
## Best Practices
### Code Organization
- ✅ Keep files small and focused
- ✅ Use meaningful file and variable names
- ✅ Group related functionality
- ✅ Follow existing project structure
- ✅ Use webpack aliases for imports
### JavaScript
- ✅ Use modern ES6+ features
- ✅ Avoid jQuery patterns
- ✅ Use vanilla JavaScript DOM APIs
- ✅ Implement proper error handling
- ✅ Add JSDoc comments for complex functions
### SCSS
- ✅ Use variables for colors and spacing
- ✅ Follow BEM naming convention (optional)
- ✅ Keep selectors shallow (max 3 levels)
- ✅ Use mixins for repeated patterns
- ✅ Support dark mode with CSS variables
### Performance
- ✅ Minimize DOM manipulations
- ✅ Use event delegation
- ✅ Debounce/throttle frequent events
- ✅ Lazy load heavy components
- ✅ Optimize images and assets
### Accessibility
- ✅ Use semantic HTML
- ✅ Add ARIA labels where needed
- ✅ Ensure keyboard navigation
- ✅ Maintain color contrast ratios
- ✅ Test with screen readers
## Common Issues
### Port Already in Use
If port 4000 is already in use:
```bash
# Kill the process using port 4000 (Windows)
netstat -ano | findstr :4000
taskkill /PID <PID> /F
# Or change the port in webpack/devServer.js
```
### Changes Not Reflecting
1. **Hard refresh** the browser (Ctrl+F5)
2. **Clear browser cache**
3. **Restart development server**
4. **Check for JavaScript errors** in console
5. **Verify file is being watched** (check terminal output)
### Build Errors
```bash
# Clean and rebuild
npm run clean
npm install
npm start
```
### Linting Errors
```bash
# Auto-fix common issues
npx eslint ./src --fix
npx stylelint "./src/**/*.scss" --fix
# Check remaining issues
npm run lint
```
### Module Not Found
```bash
# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install
```
## Development Tips
### 1. Use the Webpack Dashboard
```bash
npm run dev
```
Provides visual feedback on build performance and bundle size.
### 2. Keep the Console Clean
Fix warnings and errors as they appear to maintain code quality.
### 3. Test in Multiple Browsers
- Chrome/Edge (Chromium)
- Firefox
- Safari (if on macOS)
- Mobile browsers (responsive mode)
### 4. Use Browser DevTools
- **Elements tab** - Inspect and modify DOM/CSS
- **Console tab** - Debug JavaScript
- **Network tab** - Monitor requests
- **Performance tab** - Profile performance
- **Application tab** - Check localStorage/theme
### 5. Commit Often
Make small, focused commits with clear messages:
```bash
git add .
git commit -m "feat: add new dashboard widget"
git push
```
## Next Steps
Now that you understand the development workflow:
1. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming
2. **[Build for Production](build-deployment.md)** - Deploy your application
3. **[API Reference](../api/theme-api.md)** - JavaScript API documentation
4. **[Project Structure](project-structure.md)** - Review the codebase structure
---
**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).
================================================
FILE: docs/getting-started/installation.md
================================================
---
layout: default
title: Installation
nav_order: 1
parent: Getting Started
---
# Installation Guide
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
This guide will help you get Adminator up and running on your local machine.
## Prerequisites
Before installing Adminator, ensure you have the following installed:
### Required Software
- **Node.js** (v18.12.0 or higher)
- Download from [nodejs.org](https://nodejs.org/)
- Verify installation: `node --version`
- **npm** (comes with Node.js) or **Yarn**
- Verify npm: `npm --version`
- **Git** for version control
- Download from [git-scm.com](https://git-scm.com/)
### System Requirements
- **Operating System**: Windows 10+, macOS 10.14+, or Linux
- **RAM**: Minimum 4GB (8GB recommended for development)
- **Storage**: 500MB free space for dependencies
## Installation Methods
### Method 1: Clone from GitHub (Recommended)
```bash
# Clone the repository
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git
# Navigate to the project directory
cd Adminator-admin-dashboard
# Install dependencies
npm install
# Start development server
npm start
```
### Method 2: Download ZIP
1. Visit the [GitHub repository](https://github.com/puikinsh/Adminator-admin-dashboard)
2. Click **"Code"** → **"Download ZIP"**
3. Extract the downloaded file
4. Open terminal in the extracted folder
5. Run `npm install` and `npm start`
### Method 3: Use with Existing Project
```bash
# Add Adminator to your project
npm install --save adminator
# Or download specific release
wget https://github.com/puikinsh/Adminator-admin-dashboard/archive/v2.6.0.zip
```
## Verification
After installation, verify everything works:
### 1. Development Server
```bash
npm start
```
**Expected Output:**
```
> adminator@2.6.0 start
> webpack server
✓ Project is running at: http://localhost:4000/
✓ webpack compiled successfully
```
### 2. Build Process
```bash
npm run build
```
**Expected Output:**
```
> adminator@2.6.0 build
> npm run clean && cross-env webpack
✓ webpack compiled successfully in [time]ms
```
### 3. Access the Application
Open your browser and navigate to:
- **Local**: `http://localhost:4000`
- **Network**: `http://[your-ip]:4000`
You should see the Adminator dashboard with:
- ✅ Clean interface loading properly
- ✅ Dark/Light mode toggle in the header
- ✅ All components rendering correctly
- ✅ No console errors
## Troubleshooting
### Common Issues
#### Port Already in Use
```bash
# Error: EADDRINUSE: address already in use :::4000
# Solution: Kill the process using port 4000
sudo lsof -ti:4000 | xargs kill -9
# Or use a different port
PORT=3000 npm start
```
#### Node Version Issues
```bash
# Check your Node.js version
node --version
# If version is below 18.12.0, update Node.js
# Use nvm (recommended):
nvm install 18
nvm use 18
```
#### Permission Errors
```bash
# On macOS/Linux, you might need sudo for global packages
sudo npm install -g npm@latest
# Better solution: Fix npm permissions
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH
```
#### Missing Dependencies
```bash
# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
```
#### Build Errors
```bash
# Check for conflicting global packages
npm list -g --depth=0
# Update npm and dependencies
npm update
npm audit fix
```
### Getting Help
If you encounter issues:
1. **Check the [GitHub Issues](https://github.com/puikinsh/Adminator-admin-dashboard/issues)**
2. **Search existing solutions**
3. **Create a new issue** with:
- Operating system and version
- Node.js and npm versions
- Complete error message
- Steps to reproduce
## Next Steps
After successful installation:
1. **[Explore Project Structure](project-structure.md)** - Understand the codebase
2. **[Development Workflow](development.md)** - Learn the development process
3. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming
4. **[Build for Production](build-deployment.md)** - Deploy your application
---
**Installation Complete!** 🎉 You're ready to start building with Adminator.
================================================
FILE: docs/getting-started/project-structure.md
================================================
# Project Structure
This guide explains the folder structure and organization of the Adminator admin dashboard template.
## Overview
Adminator follows a modern, modular architecture with clear separation of concerns. The project is organized into source files, build configuration, and documentation.
```
adminator-admin-dashboard/
├── src/ # Source files
├── dist/ # Built/compiled files (generated)
├── webpack/ # Build configuration
├── docs/ # Documentation
├── node_modules/ # Dependencies (generated)
└── Configuration files
```
## Root Directory
### Configuration Files
| File | Purpose |
|------|---------|
| `package.json` | Node.js dependencies and npm scripts |
| `webpack.config.js` | Webpack entry point |
| `.babelrc` | Babel ES6+ transpiler configuration |
| `eslint.config.mjs` | ESLint 9.x flat configuration for code linting |
| `.stylelintrc.json` | Stylelint configuration for SCSS/CSS linting |
| `.editorconfig` | Editor settings for consistent code style |
| `browserslist` | Target browser versions for compilation |
| `.gitignore` | Git ignore patterns |
| `.gitattributes` | Git attributes configuration |
| `.nvmrc` | Node.js version specification |
### Documentation Files
| File | Purpose |
|------|---------|
| `README.md` | Main project documentation |
| `CHANGELOG.md` | Version history and release notes |
| `LICENSE` | MIT license information |
| `CODE_OF_CONDUCT.md` | Community guidelines |
## Source Directory (`src/`)
The `src/` directory contains all template source files that are compiled into the final application.
### HTML Templates
Located directly in `src/`, these are the template pages:
```
src/
├── index.html # Main dashboard page
├── blank.html # Blank page template
├── 404.html # 404 error page
├── 500.html # 500 error page
├── signin.html # Sign in page
├── signup.html # Sign up page
├── email.html # Email inbox
├── compose.html # Email compose
├── chat.html # Chat application
├── calendar.html # Calendar view
├── charts.html # Charts showcase
├── forms.html # Form elements
├── buttons.html # Button styles
├── ui.html # UI elements showcase
├── basic-table.html # Basic table
├── datatable.html # Data table with features
├── google-maps.html # Google Maps integration
└── vector-maps.html # Vector maps
```
### Assets Directory (`src/assets/`)
Contains all JavaScript, styles, images, and fonts.
```
src/assets/
├── scripts/ # JavaScript files
├── styles/ # SCSS stylesheets
└── static/ # Static assets (images, fonts)
```
## JavaScript Structure (`src/assets/scripts/`)
Modern, jQuery-free vanilla JavaScript architecture.
### Main Application
```
scripts/
├── app.js # Main application entry point
├── index.js # Module exports
└── components/ # Reusable components
├── Sidebar.js # Sidebar navigation component
└── Chart.js # Chart component wrapper
```
### Feature Modules
Each feature has its own directory with an `index.js` entry point:
```
scripts/
├── charts/ # Chart implementations
│ ├── chartJS/ # Chart.js integration
│ ├── easyPieChart/ # Pie chart component
│ └── sparkline/ # Sparkline mini charts
├── chat/ # Chat application logic
├── email/ # Email application logic
├── fullcalendar/ # Calendar integration
├── googleMaps/ # Google Maps integration
├── vectorMaps/ # Vector maps integration
├── datatable/ # Data table functionality
├── datepicker/ # Date picker component
├── masonry/ # Masonry grid layout
├── popover/ # Popover components
├── scrollbar/ # Custom scrollbar
├── search/ # Search functionality
├── sidebar/ # Sidebar behavior
├── skycons/ # Weather icons
└── ui/ # UI components
```
### Utilities and Constants
```
scripts/
├── utils/ # Utility functions
│ ├── dom.js # DOM manipulation helpers
│ ├── date.js # Date utilities (Day.js wrapper)
│ ├── theme.js # Theme management (dark/light mode)
│ └── index.js # Utility exports
└── constants/ # Application constants
└── colors.js # Color definitions
```
## Styles Structure (`src/assets/styles/`)
SCSS-based styling with modular architecture following ITCSS methodology.
```
styles/
├── index.scss # Main style entry point
├── spec/ # Custom styles
│ ├── components/ # Component styles
│ │ ├── sidebar.scss
│ │ ├── topbar.scss
│ │ ├── footer.scss
│ │ ├── forms.scss
│ │ ├── loader.scss
│ │ ├── masonry.scss
│ │ ├── pageContainer.scss
│ │ ├── progressBar.scss
│ │ └── easyPieChart.scss
│ ├── generic/ # Base/reset styles
│ │ └── base.scss
│ ├── screens/ # Page-specific styles
│ │ ├── chat.scss
│ │ └── email.scss
│ ├── settings/ # Variables and configuration
│ │ ├── baseColors.scss
│ │ ├── materialColors.scss
│ │ ├── borders.scss
│ │ ├── breakpoints.scss
│ │ └── fonts.scss
│ ├── tools/ # Mixins and functions
│ │ └── mixins/
│ └── utils/ # Utility classes
│ ├── colors.scss
│ ├── theme.css # CSS variables for dark mode
│ └── layout/ # Layout helpers
└── vendor/ # Third-party plugin styles
```
## Static Assets (`src/assets/static/`)
```
static/
├── fonts/ # Icon fonts
│ ├── themify-icons/ # Themify Icons
│ └── font-awesome/ # Font Awesome (if used)
└── images/ # Images and graphics
├── logo.svg # Application logo
├── bg.jpg # Background images
├── 404.png # Error page illustrations
└── 500.png
```
## Webpack Configuration (`webpack/`)
Modular webpack configuration split into logical parts:
```
webpack/
├── config.js # Main webpack configuration
├── manifest.js # Build constants and paths
├── devServer.js # Development server settings
├── plugins/ # Webpack plugins configuration
│ ├── index.js
│ ├── html.js # HTML generation
│ ├── copy.js # File copying
│ ├── extractCSS.js # CSS extraction
│ └── ...
└── rules/ # Webpack loaders configuration
├── index.js
├── javascript.js # Babel loader
├── styles.js # SCSS/CSS loaders
├── fonts.js # Font loaders
└── images.js # Image loaders
```
## Build Output (`dist/`)
Generated directory containing compiled production files:
```
dist/
├── index.html # Compiled HTML files
├── *.html # All other pages
├── assets/
│ ├── bundle.[hash].js # Compiled JavaScript
│ ├── styles.[hash].css # Compiled CSS
│ └── static/ # Copied static assets
└── ...
```
## Documentation (`docs/`)
GitHub Pages documentation site:
```
docs/
├── index.md # Documentation home
├── getting-started/ # Getting started guides
│ ├── installation.md
│ └── project-structure.md (this file)
├── customization/ # Customization guides
│ └── theme-system.md
├── api/ # API documentation
│ └── theme-api.md
└── examples/ # Code examples
└── theme-integration.md
```
## Key Architecture Decisions
### 1. **jQuery-Free**
All JavaScript is written in modern vanilla JavaScript (ES6+) without jQuery dependency, resulting in smaller bundle size and better performance.
### 2. **Component-Based**
JavaScript is organized into reusable components (`Sidebar`, `Chart`, etc.) using ES6 classes.
### 3. **Modular SCSS**
Styles follow ITCSS methodology with clear separation of settings, tools, generic, components, and utilities.
### 4. **Modern Build System**
Webpack 5 with Babel for ES6+ transpilation, SCSS compilation, and asset optimization.
### 5. **Dark Mode Support**
CSS custom properties (variables) enable seamless theme switching between light and dark modes.
## File Naming Conventions
- **JavaScript**: camelCase for files and classes (`app.js`, `Sidebar.js`)
- **SCSS**: kebab-case for files (`sidebar.scss`, `page-container.scss`)
- **HTML**: kebab-case for files (`basic-table.html`, `google-maps.html`)
- **Components**: PascalCase for class names (`Sidebar`, `ChartComponent`)
## Import Paths
The project uses webpack aliases for cleaner imports:
```javascript
// Instead of: import Sidebar from '../../components/Sidebar'
import Sidebar from '@/components/Sidebar';
// Available aliases:
// @/ -> src/
// @/components -> src/assets/scripts/components/
// @/utils -> src/assets/scripts/utils/
// @/constants -> src/assets/scripts/constants/
```
## Adding New Features
### Adding a New Page
1. Create HTML file in `src/` (e.g., `my-page.html`)
2. Add page-specific styles in `src/assets/styles/spec/screens/`
3. Add page-specific JavaScript in `src/assets/scripts/`
4. The build system will automatically include it
### Adding a New Component
1. Create component file in `src/assets/scripts/components/`
2. Export the component class
3. Import and use in `app.js` or other modules
4. Add component styles in `src/assets/styles/spec/components/`
### Adding a New Utility
1. Create utility file in `src/assets/scripts/utils/`
2. Export functions/classes
3. Import from `@/utils/` in other files
## Next Steps
Now that you understand the project structure:
1. **[Development Workflow](development.md)** - Learn the development process
2. **[Customize Themes](../customization/theme-system.md)** - Set up dark mode and theming
3. **[Build for Production](build-deployment.md)** - Deploy your application
4. **[API Reference](../api/theme-api.md)** - JavaScript API documentation
---
**Need Help?** Check the [main README](../../README.md) or [open an issue](https://github.com/puikinsh/Adminator-admin-dashboard/issues).
================================================
FILE: docs/getting-started.md
================================================
---
layout: default
title: Getting Started
nav_order: 2
has_children: true
---
# Getting Started
Everything you need to know to start building with Adminator.
This section covers installation, project setup, development workflow, and deployment options.
================================================
FILE: docs/index.md
================================================
---
layout: default
title: Home
nav_order: 1
description: "Adminator Bootstrap 5 Admin Dashboard with Dark Mode"
permalink: /
---
# Adminator Documentation
{: .fs-9 }
Complete guide for the Bootstrap 5 Admin Dashboard Template with comprehensive Dark Mode system
{: .fs-6 .fw-300 }
[Get Started Now](getting-started/installation){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
[View on GitHub](https://github.com/puikinsh/Adminator-admin-dashboard){: .btn .fs-5 .mb-4 .mb-md-0 }
---
## ✨ What's New in v2.6.0
🌗 **Complete Dark Mode System** - Intelligent theme switching with OS preference detection
⚡ **Smart Theme Toggle** - Bootstrap-based switch with instant updates
🎨 **CSS Variables Architecture** - Semantic color system for easy customization
📊 **Component Integration** - All charts, calendars, and maps are theme-aware
---
## 🚀 Quick Start
```bash
# Clone the repository
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git
# Install dependencies
npm install
# Start development server
npm start
```
Visit `http://localhost:4000` to see your dashboard!
---
## 📚 Documentation Sections
### Getting Started
Learn how to install, configure, and deploy Adminator with our comprehensive setup guides.
[Installation Guide →](getting-started/installation){: .btn .btn-outline }
### Dark Mode & Theming
Discover the powerful dark mode system with CSS variables and theme switching capabilities.
[Theme System →](customization/theme-system){: .btn .btn-outline }
### API Reference
Complete JavaScript API documentation for theme management and component integration.
[API Documentation →](api/theme-api){: .btn .btn-outline }
### Examples & Integration
Real-world examples and integration guides for popular frameworks and use cases.
[View Examples →](examples/theme-integration){: .btn .btn-outline }
---
## 🎯 Key Features
| Feature | Description |
|:--------|:------------|
| **Bootstrap 5** | Latest Bootstrap framework with modern components |
| **Dark Mode** | Comprehensive dark theme with intelligent switching |
| **Responsive** | Mobile-first design that works on all devices |
| **Chart Integration** | Chart.js with theme-aware color schemes |
| **Calendar Support** | FullCalendar with dark mode styling |
| **Vector Maps** | Interactive maps with custom color palettes |
| **Clean Code** | Well-organized, documented, and maintainable |
---
## 🌟 Live Demo
Experience Adminator's features in action:
### Light Mode
### Dark Mode
[Try Live Demo](https://colorlib.com/polygon/adminator/index.html){: .btn .btn-green .fs-5 }
---
## 🤝 Contributing
We welcome contributions! Please read our [contributing guidelines](contributing/) before submitting pull requests.
---
## 📄 License
Adminator is released under the [MIT License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE).
---
**Ready to build amazing dashboards?** Start with our [installation guide](getting-started/installation) or explore the [dark mode features](customization/theme-system)!
================================================
FILE: eslint.config.mjs
================================================
import globals from "globals";
import babelParser from "@babel/eslint-parser";
import js from "@eslint/js";
export default [
{
files: ["**/*.js", "**/*.mjs", "**/*.jsx"],
languageOptions: {
globals: {
...globals.browser,
...globals.node,
},
parser: babelParser,
ecmaVersion: 2018,
sourceType: "module",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
presets: ["@babel/preset-env"],
},
ecmaFeatures: {
modules: true,
destructuring: true,
classes: true,
forOf: true,
blockBindings: true,
arrowFunctions: true,
},
},
},
settings: {
ecmascript: 7,
},
rules: {
// Start with ESLint recommended rules
...js.configs.recommended.rules,
// Apply our custom overrides (keeping original project preferences)
"arrow-body-style": 0,
"prefer-arrow-callback": 0,
"arrow-parens": 0,
"no-param-reassign": 0,
"no-new": 0,
"consistent-return": 0,
"key-spacing": 0,
"no-multi-spaces": 0,
"no-underscore-dangle": 0,
"one-var": 0,
"global-require": 0,
"class-methods-use-this": 0,
"comma-dangle": ["error", {
arrays: "always-multiline",
objects: "always-multiline",
imports: "always-multiline",
exports: "always-multiline",
functions: "never",
}],
"func-names": 0,
"function-paren-newline": 0,
"indent": ["error", 2],
"new-cap": 0,
"no-plusplus": 0,
"no-return-assign": 0,
"quote-props": 0,
"template-curly-spacing": 0,
"no-unused-expressions": 0,
// Import rules (basic ones that don't require the import plugin)
"no-duplicate-imports": "error",
// Line ending for Unix/macOS (updated for current platform)
"linebreak-style": ["error", "unix"],
// Basic ES6+ rules that replace some airbnb functionality
"prefer-const": "warn",
"no-var": "error",
"prefer-template": "warn",
"object-shorthand": "warn",
},
},
{
// Global ignores
ignores: ["dist/**/*", "node_modules/**/*", "*.min.js"],
},
];
================================================
FILE: jsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "node",
"baseUrl": "./src",
"paths": {
"@/*": ["*"],
"@components/*": ["assets/scripts/components/*"],
"@utils/*": ["assets/scripts/utils/*"],
"@charts/*": ["assets/scripts/charts/*"],
"@styles/*": ["assets/styles/*"]
},
"checkJs": true,
"strict": false,
"noEmit": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"typeRoots": ["./types", "./node_modules/@types"]
},
"include": [
"src/**/*.js",
"types/**/*.d.ts"
],
"exclude": [
"node_modules",
"dist"
]
}
================================================
FILE: package.json
================================================
{
"name": "adminator-admin-dashboard",
"version": "3.0.0",
"private": false,
"description": "Modern jQuery-free Bootstrap 5 Admin Dashboard Template with Dark Mode",
"main": "dist/index.html",
"keywords": [
"admin",
"dashboard",
"template",
"bootstrap",
"bootstrap5",
"jquery-free",
"vanilla-js",
"dark-mode",
"responsive",
"mobile-first",
"scss",
"webpack",
"modern",
"ui-kit",
"admin-panel",
"charts",
"datatable"
],
"author": "Aigars Silkalns <hello@colorlib.com> (https://colorlib.com)",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/puikinsh/Adminator-admin-dashboard.git"
},
"bugs": {
"url": "https://github.com/puikinsh/Adminator-admin-dashboard/issues"
},
"homepage": "https://puikinsh.github.io/Adminator-admin-dashboard/",
"files": [
"dist/**/*",
"src/**/*",
"webpack.config.js",
"CLAUDE.md",
"CHANGELOG.md",
"README.md"
],
"engines": {
"node": ">=14.0.0"
},
"scripts": {
"start": "webpack server",
"dev": "webpack-dashboard -t 'Project' -- webpack server",
"clean": "shx rm -rf ./dist",
"build": "npm run clean && cross-env webpack",
"build:analyze": "npm run clean && cross-env ANALYZE=true NODE_ENV=production webpack",
"release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
"release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
"preview": "cross-env webpack server",
"lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
"lint:scss": "stylelint ./src/**/*.scss",
"lint": "npm run lint:js && npm run lint:scss",
"test": "vitest",
"test:run": "vitest run",
"test:coverage": "vitest run --coverage",
"prepublishOnly": "npm run lint && npm run build",
"postpublish": "echo 'Package published successfully! View at: https://www.npmjs.com/package/adminator-admin-dashboard'"
},
"devDependencies": {
"@babel/core": "^7.28.6",
"@babel/eslint-parser": "^7.28.6",
"@babel/plugin-transform-runtime": "^7.28.5",
"@babel/preset-env": "^7.28.6",
"@eslint/js": "^9.39.2",
"@vitest/coverage-v8": "^4.0.17",
"babel-loader": "^10.0.0",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"copy-webpack-plugin": "^13.0.1",
"cross-env": "^10.1.0",
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.4",
"eslint": "^9.39.2",
"eslint-formatter-table": "^7.32.1",
"globals": "^17.0.0",
"html-webpack-plugin": "^5.6.5",
"jsdom": "^27.4.0",
"mini-css-extract-plugin": "^2.9.4",
"postcss": "^8.5.6",
"postcss-loader": "^8.2.0",
"postcss-preset-env": "^10.6.1",
"sass": "^1.97.2",
"sass-loader": "^16.0.6",
"shx": "^0.4.0",
"style-loader": "^4.0.0",
"stylelint": "^16.26.1",
"stylelint-config-standard": "^39.0.1",
"stylelint-config-standard-scss": "^16.0.0",
"vitest": "^4.0.17",
"webpack": "^5.104.1",
"webpack-bundle-analyzer": "^5.1.1",
"webpack-cli": "^6.0.1",
"webpack-dashboard": "^3.3.8",
"webpack-dev-server": "^5.2.3"
},
"dependencies": {
"@babel/runtime": "^7.28.6",
"@fullcalendar/core": "^6.1.20",
"@fullcalendar/daygrid": "^6.1.20",
"@fullcalendar/interaction": "^6.1.20",
"@fullcalendar/list": "^6.1.20",
"@fullcalendar/timegrid": "^6.1.20",
"@popperjs/core": "^2.11.8",
"bootstrap": "^5.3.8",
"brand-colors": "^2.1.1",
"chart.js": "^4.5.1",
"dayjs": "^1.11.19",
"jsvectormap": "^1.7.0",
"load-google-maps-api": "^2.0.2",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.5.6",
"skycons": "^1.0.0"
}
}
================================================
FILE: src/404.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>404</title>
</head>
<body class="app">
<div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
<div class='mR-60'>
<img alt='#' src='assets/static/images/404.png' />
</div>
<div class='d-f jc-c fxd-c'>
<h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
<h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
<p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>
<div>
<a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
</div>
</div>
</div>
</body>
</html>
================================================
FILE: src/500.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>500</title>
</head>
<body class="app">
<div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
<div class='mR-60'>
<img alt='#' src='assets/static/images/500.png' />
</div>
<div class='d-f jc-c fxd-c'>
<h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
<h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
<p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
<div>
<a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
</div>
</div>
</div>
</body>
</html>
================================================
FILE: src/assets/scripts/app.js
================================================
/**
* Modern Adminator Application
* Main application entry point with enhanced mobile support
*
* @module app
* @version 2.9.0
*/
// Note: Bootstrap 5 CSS is still available via SCSS imports
// Bootstrap JS components removed to eliminate jQuery dependency
import { DOM } from './utils/dom';
import DateUtils from './utils/date';
import ThemeManager from './utils/theme';
import Events from './utils/events';
import Performance from './utils/performance';
import Logger from './utils/logger';
import Sidebar from './components/Sidebar';
import ChartComponent from './components/Chart';
// Import styles
import '../styles/index.scss';
// Import other modules that don't need immediate modernization
import './fullcalendar';
import './masonry';
import './popover';
import './scrollbar';
import './search';
import './skycons';
import './vectorMaps';
import './chat';
import './email';
import './googleMaps';
import './ui';
class AdminatorApp {
constructor() {
this.components = new Map();
this.isInitialized = false;
this.themeManager = ThemeManager;
this.cleanupFunctions = [];
// Initialize when DOM is ready
DOM.ready(() => {
this.init();
});
}
/**
* Initialize the application
*/
init() {
if (this.isInitialized) return;
Logger.time('Adminator Init');
try {
// Initialize core components
this.initSidebar();
this.initCharts();
this.initDataTables();
this.initDatePickers();
this.initTheme();
this.initMobileEnhancements();
// Setup global event listeners using event delegation
this.setupGlobalEvents();
this.isInitialized = true;
Logger.timeEnd('Adminator Init');
Logger.info('Application initialized successfully');
// Dispatch custom event for other scripts
Events.emit(window, 'adminator:ready', { app: this });
} catch (error) {
Logger.error('Error initializing Adminator App', erro
gitextract_t4ripph3/ ├── .babelrc ├── .claude/ │ └── settings.local 2.json ├── .editorconfig ├── .gitattributes ├── .github/ │ ├── ISSUE_TEMPLATE.md │ └── workflows/ │ ├── merge.yml │ └── release.yml ├── .gitignore ├── .npmignore ├── .nvmrc ├── .stylelintrc.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── IMPROVEMENT_PLAN.md ├── LICENSE ├── README.md ├── browserslist ├── ci/ │ ├── getVersion.sh │ └── verifyVersion.sh ├── docs/ │ ├── COMPONENT_GUIDE.md │ ├── README.md │ ├── _config.yml │ ├── _sass/ │ │ └── custom.scss │ ├── api/ │ │ └── theme-api.md │ ├── api.md │ ├── assets/ │ │ └── images/ │ │ ├── adminator-dark-mode.avif │ │ └── adminator-light-mode.avif │ ├── customization/ │ │ └── theme-system.md │ ├── customization.md │ ├── examples/ │ │ └── theme-integration.md │ ├── examples.md │ ├── getting-started/ │ │ ├── build-deployment.md │ │ ├── development.md │ │ ├── installation.md │ │ └── project-structure.md │ ├── getting-started.md │ └── index.md ├── eslint.config.mjs ├── jsconfig.json ├── package.json ├── src/ │ ├── 404.html │ ├── 500.html │ ├── assets/ │ │ ├── scripts/ │ │ │ ├── app.js │ │ │ ├── charts/ │ │ │ │ ├── chartJS/ │ │ │ │ │ └── index.js │ │ │ │ ├── easyPieChart/ │ │ │ │ │ └── index.js │ │ │ │ ├── index.js │ │ │ │ └── sparkline/ │ │ │ │ └── index.js │ │ │ ├── chat/ │ │ │ │ └── index.js │ │ │ ├── components/ │ │ │ │ ├── Chart.js │ │ │ │ └── Sidebar.js │ │ │ ├── constants/ │ │ │ │ └── colors.js │ │ │ ├── datatable/ │ │ │ │ └── index.js │ │ │ ├── datepicker/ │ │ │ │ └── index.js │ │ │ ├── email/ │ │ │ │ └── index.js │ │ │ ├── fullcalendar/ │ │ │ │ └── index.js │ │ │ ├── googleMaps/ │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── masonry/ │ │ │ │ └── index.js │ │ │ ├── popover/ │ │ │ │ └── index.js │ │ │ ├── scrollbar/ │ │ │ │ └── index.js │ │ │ ├── search/ │ │ │ │ └── index.js │ │ │ ├── skycons/ │ │ │ │ └── index.js │ │ │ ├── ui/ │ │ │ │ └── index.js │ │ │ ├── utils/ │ │ │ │ ├── date.js │ │ │ │ ├── dom.js │ │ │ │ ├── events.js │ │ │ │ ├── index.js │ │ │ │ ├── logger.js │ │ │ │ ├── performance.js │ │ │ │ ├── sanitize.js │ │ │ │ ├── storage.js │ │ │ │ └── theme.js │ │ │ └── vectorMaps/ │ │ │ └── index.js │ │ ├── static/ │ │ │ └── fonts/ │ │ │ └── icons/ │ │ │ └── fontawesome/ │ │ │ └── FontAwesome.otf │ │ └── styles/ │ │ ├── index.scss │ │ ├── spec/ │ │ │ ├── components/ │ │ │ │ ├── easyPieChart.scss │ │ │ │ ├── footer.scss │ │ │ │ ├── forms.scss │ │ │ │ ├── index.scss │ │ │ │ ├── loader.scss │ │ │ │ ├── masonry.scss │ │ │ │ ├── modernize.scss │ │ │ │ ├── pageContainer.scss │ │ │ │ ├── progressBar.scss │ │ │ │ ├── sidebar.scss │ │ │ │ └── topbar.scss │ │ │ ├── generic/ │ │ │ │ ├── base.scss │ │ │ │ └── index.scss │ │ │ ├── index.scss │ │ │ ├── screens/ │ │ │ │ ├── chat.scss │ │ │ │ ├── email.scss │ │ │ │ └── index.scss │ │ │ ├── settings/ │ │ │ │ ├── baseColors.scss │ │ │ │ ├── borders.scss │ │ │ │ ├── breakpoints.scss │ │ │ │ ├── fonts.scss │ │ │ │ ├── index.scss │ │ │ │ └── materialColors.scss │ │ │ ├── tools/ │ │ │ │ ├── index.scss │ │ │ │ └── mixins/ │ │ │ │ ├── clearfix.scss │ │ │ │ ├── index.scss │ │ │ │ ├── mediaQueriesRanges.scss │ │ │ │ └── placeholder.scss │ │ │ └── utils/ │ │ │ ├── colors.scss │ │ │ ├── index.scss │ │ │ └── layout/ │ │ │ ├── helpers/ │ │ │ │ ├── border.scss │ │ │ │ ├── flex.scss │ │ │ │ ├── index.scss │ │ │ │ ├── layout.scss │ │ │ │ ├── lists.scss │ │ │ │ ├── margin.scss │ │ │ │ ├── objects.scss │ │ │ │ ├── padding.scss │ │ │ │ ├── positions.scss │ │ │ │ ├── pseudo.scss │ │ │ │ ├── sizes.scss │ │ │ │ └── typography.scss │ │ │ ├── index.scss │ │ │ ├── mixins/ │ │ │ │ ├── generateResponsive.scss │ │ │ │ ├── index.scss │ │ │ │ └── mediaQueryCondition.scss │ │ │ └── utils/ │ │ │ ├── center.scss │ │ │ ├── gap.scss │ │ │ ├── index.scss │ │ │ ├── layers.scss │ │ │ └── peers.scss │ │ ├── utils/ │ │ │ ├── mobile.scss │ │ │ └── theme.css │ │ └── vendor/ │ │ ├── datepicker.scss │ │ ├── font-awesome.css │ │ ├── fullcalendar.scss │ │ ├── index.scss │ │ ├── jquery.datatables.scss │ │ ├── perfectScrollbar.scss │ │ ├── sparkline.scss │ │ └── themify-icons.css │ ├── basic-table.html │ ├── blank.html │ ├── buttons.html │ ├── calendar.html │ ├── charts.html │ ├── chat.html │ ├── compose.html │ ├── datatable.html │ ├── email.html │ ├── forms.html │ ├── google-maps.html │ ├── index.html │ ├── signin.html │ ├── signup.html │ ├── ui.html │ └── vector-maps.html ├── tests/ │ ├── setup.js │ └── utils/ │ ├── dom.test.js │ ├── logger.test.js │ └── theme.test.js ├── vitest.config.js ├── webpack/ │ ├── config.js │ ├── devServer.js │ ├── manifest.js │ ├── plugins/ │ │ ├── caseSensitivePlugin.js │ │ ├── copyPlugin.js │ │ ├── dashboardPlugin.js │ │ ├── extractPlugin.js │ │ ├── htmlPlugin.js │ │ ├── index.js │ │ └── internal.js │ └── rules/ │ ├── css.js │ ├── fonts.js │ ├── images.js │ ├── index.js │ ├── js.js │ └── sass.js └── webpack.config.js
SYMBOL INDEX (198 symbols across 19 files)
FILE: src/assets/scripts/app.js
class AdminatorApp (line 36) | class AdminatorApp {
method constructor (line 37) | constructor() {
method init (line 52) | init() {
method initSidebar (line 85) | initSidebar() {
method initCharts (line 95) | initCharts() {
method initDataTables (line 119) | initDataTables() {
method initBasicDataTable (line 131) | initBasicDataTable(table) {
method initDatePickers (line 151) | initDatePickers() {
method initTheme (line 221) | initTheme() {
method initMobileEnhancements (line 294) | initMobileEnhancements() {
method setupGlobalEvents (line 308) | setupGlobalEvents() {
method handleDropdownClick (line 345) | handleDropdownClick(e, toggle) {
method closeAllOverlays (line 377) | closeAllOverlays() {
method closeSearch (line 394) | closeSearch() {
method handleResize (line 420) | handleResize() {
method handleGlobalClick (line 456) | handleGlobalClick(event) {
method isMobile (line 484) | isMobile() {
method enhanceMobileDropdowns (line 491) | enhanceMobileDropdowns() {
method enhanceMobileSearch (line 578) | enhanceMobileSearch() {
method getComponent (line 704) | getComponent(name) {
method isReady (line 711) | isReady() {
method destroy (line 718) | destroy() {
method refresh (line 749) | refresh() {
FILE: src/assets/scripts/charts/easyPieChart/index.js
class VanillaPieChart (line 6) | class VanillaPieChart {
method constructor (line 7) | constructor(element, options = {}) {
method init (line 25) | init() {
method createSVG (line 30) | createSVG() {
method animate (line 92) | animate() {
method update (line 124) | update(percentage) {
method destroy (line 129) | destroy() {
method onStep (line 158) | onStep(from, to, percent) {
FILE: src/assets/scripts/components/Chart.js
class ChartComponent (line 12) | class ChartComponent {
method constructor (line 13) | constructor() {
method init (line 19) | init() {
method createSparklines (line 31) | createSparklines() {
method createSparklineChart (line 72) | createSparklineChart({ id, data, color }) {
method createOtherCharts (line 157) | createOtherCharts() {
method createMonthlyStatsChart (line 191) | createMonthlyStatsChart() {
method createLineChart (line 304) | createLineChart(id, data) {
method createCompositeChart (line 375) | createCompositeChart(id, data) {
method createCustomSparklines (line 456) | createCustomSparklines() {
method createCustomLineChart (line 502) | createCustomLineChart(element, data, id) {
method createCustomBarChart (line 555) | createCustomBarChart(element, data, id) {
method setupResizeHandler (line 606) | setupResizeHandler() {
method debounceResize (line 621) | debounceResize() {
method redrawLargeChartsOnly (line 633) | redrawLargeChartsOnly() {
method redrawCharts (line 650) | redrawCharts() {
method updateChart (line 661) | updateChart(id, newData) {
method createChartsPageCharts (line 672) | createChartsPageCharts() {
method createLargeChart (line 889) | createLargeChart(id, type, data) {
method getChartOptions (line 910) | getChartOptions(type) {
method createTristateChart (line 1099) | createTristateChart(element, data, id) {
method createDiscreteChart (line 1157) | createDiscreteChart(element, data, id) {
method createBulletChart (line 1206) | createBulletChart(element, data, id) {
method createBoxChart (line 1258) | createBoxChart(element, data, id) {
method createEasyPieCharts (line 1314) | createEasyPieCharts() {
method destroy (line 1378) | destroy() {
FILE: src/assets/scripts/components/Sidebar.js
class Sidebar (line 6) | class Sidebar {
method constructor (line 7) | constructor() {
method init (line 17) | init() {
method setupMenuToggle (line 30) | setupMenuToggle() {
method openDropdown (line 60) | openDropdown(listItem, dropdownMenu) {
method closeDropdown (line 85) | closeDropdown(listItem, dropdownMenu) {
method closeAllDropdowns (line 108) | closeAllDropdowns() {
method setupSidebarToggle (line 125) | setupSidebarToggle() {
method toggleSidebar (line 148) | toggleSidebar() {
method setActiveLink (line 168) | setActiveLink() {
method refreshActiveLink (line 220) | refreshActiveLink() {
method toggle (line 227) | toggle() {
method isCollapsed (line 236) | isCollapsed() {
FILE: src/assets/scripts/constants/colors.js
constant COLORS (line 1) | const COLORS = {
constant GREYS (line 259) | const GREYS = {
FILE: src/assets/scripts/datatable/index.js
class VanillaDataTable (line 6) | class VanillaDataTable {
method constructor (line 7) | constructor(element, options = {}) {
method init (line 26) | init() {
method extractData (line 34) | extractData() {
method createControls (line 43) | createControls() {
method applyStyles (line 81) | applyStyles() {
method bindEvents (line 169) | bindEvents() {
method search (line 190) | search(query) {
method sort (line 204) | sort(columnIndex) {
method updateSortHeaders (line 234) | updateSortHeaders() {
method render (line 244) | render() {
method updatePagination (line 273) | updatePagination() {
method updateInfo (line 318) | updateInfo() {
method destroy (line 329) | destroy() {
FILE: src/assets/scripts/datepicker/index.js
class VanillaDatePicker (line 6) | class VanillaDatePicker {
method constructor (line 7) | constructor(element, options = {}) {
method init (line 19) | init() {
method convertToHTML5 (line 26) | convertToHTML5() {
method enhanceInput (line 45) | enhanceInput() {
method applyStyles (line 71) | applyStyles() {
method bindEvents (line 163) | bindEvents() {
method openPicker (line 190) | openPicker() {
method handleDateChange (line 203) | handleDateChange(e) {
method formatDate (line 224) | formatDate(dateString) {
method setDate (line 229) | setDate(dateString) {
method getDate (line 234) | getDate() {
method destroy (line 238) | destroy() {
FILE: src/assets/scripts/popover/index.js
function initTooltips (line 5) | function initTooltips() {
function initPopovers (line 48) | function initPopovers() {
FILE: src/assets/scripts/ui/index.js
class VanillaModal (line 9) | class VanillaModal {
method constructor (line 10) | constructor(element) {
method init (line 18) | init() {
method show (line 41) | show() {
method hide (line 69) | hide() {
class VanillaDropdown (line 94) | class VanillaDropdown {
method constructor (line 95) | constructor(element) {
method init (line 102) | init() {
method toggle (line 127) | toggle() {
method show (line 135) | show() {
method hide (line 148) | hide() {
class VanillaPopover (line 158) | class VanillaPopover {
method constructor (line 159) | constructor(element) {
method init (line 166) | init() {
method toggle (line 180) | toggle() {
method show (line 188) | show() {
method hide (line 226) | hide() {
class VanillaTooltip (line 238) | class VanillaTooltip {
method constructor (line 239) | constructor(element) {
method init (line 245) | init() {
method show (line 252) | show() {
method hide (line 299) | hide() {
class VanillaAccordion (line 308) | class VanillaAccordion {
method constructor (line 309) | constructor(element) {
method init (line 317) | init() {
method toggle (line 324) | toggle() {
method show (line 332) | show() {
method hide (line 358) | hide() {
FILE: src/assets/scripts/utils/dom.js
constant DOM (line 25) | const DOM = {
FILE: src/assets/scripts/utils/events.js
method on (line 39) | on(element, event, handler, options = {}) {
method off (line 83) | off(element) {
method delegate (line 111) | delegate(parent, event, selector, handler, options = {}) {
method once (line 135) | once(element, event, handler) {
method debounce (line 150) | debounce(handler, delay = 250) {
method throttle (line 169) | throttle(handler, limit = 250) {
method emit (line 192) | emit(target, eventName, detail = {}, options = {}) {
FILE: src/assets/scripts/utils/logger.js
method info (line 32) | info(message, context) {
method warn (line 43) | warn(message, context) {
method error (line 54) | error(message, context) {
method debug (line 65) | debug(message, context) {
method group (line 75) | group(label) {
method groupEnd (line 84) | groupEnd() {
method time (line 94) | time(label) {
method timeEnd (line 104) | timeEnd(label) {
method table (line 114) | table(data) {
FILE: src/assets/scripts/utils/performance.js
method onResize (line 50) | onResize(element, callback) {
method onVisible (line 98) | onVisible(element, callback, options = {}) {
method lazyLoad (line 154) | lazyLoad(element, loadFn, options = {}) {
method batch (line 185) | batch(readFn, writeFn) {
method nextFrame (line 205) | nextFrame(callback) {
method whenIdle (line 224) | whenIdle(callback, options = {}) {
method cancelIdle (line 240) | cancelIdle(id) {
method preload (line 258) | preload(url, as = 'image') {
method measure (line 280) | measure(label, fn) {
method cleanup (line 296) | cleanup() {
FILE: src/assets/scripts/utils/sanitize.js
constant HTML_ENTITIES (line 12) | const HTML_ENTITIES = {
method html (line 38) | html(str) {
method attr (line 54) | attr(str) {
method url (line 71) | url(url, allowedProtocols = ['http:', 'https:', 'mailto:', 'tel:']) {
method stripTags (line 116) | stripTags(str) {
method css (line 136) | css(str) {
method filename (line 158) | filename(str) {
method template (line 180) | template(strings, ...values) {
method email (line 200) | email(email) {
method number (line 234) | number(value, options = {}) {
method integer (line 259) | integer(value, options = {}) {
FILE: src/assets/scripts/utils/storage.js
method get (line 52) | get(key) {
method set (line 73) | set(key, value) {
method remove (line 97) | remove(key) {
method clear (line 118) | clear() {
method getJSON (line 141) | getJSON(key, defaultValue = null) {
method setJSON (line 163) | setJSON(key, value) {
method has (line 182) | has(key) {
method keys (line 194) | keys() {
method size (line 213) | size() {
FILE: src/assets/scripts/utils/theme.js
constant THEME_KEY (line 25) | const THEME_KEY = 'adminator-theme';
constant VALID_THEMES (line 28) | const VALID_THEMES = ['light', 'dark'];
method get (line 41) | get(key) {
method set (line 55) | set(key, value) {
method apply (line 81) | apply(theme) {
method toggle (line 154) | toggle() {
method current (line 170) | current() {
method init (line 185) | init() {
method getCSSVar (line 211) | getCSSVar(varName) {
method getVectorMapColors (line 230) | getVectorMapColors() {
method getSparklineColors (line 251) | getSparklineColors() {
method getChartColors (line 271) | getChartColors() {
method isDark (line 292) | isDark() {
method isLight (line 301) | isLight() {
FILE: src/assets/scripts/vectorMaps/index.js
method onMarkerTooltipShow (line 151) | onMarkerTooltipShow(event, tooltip, index) {
method onRegionTooltipShow (line 158) | onRegionTooltipShow(event, tooltip, code) {
method onLoaded (line 169) | onLoaded() {
FILE: tests/setup.js
method length (line 31) | get length() {
FILE: webpack/manifest.js
constant NODE_ENV (line 27) | const
constant IS_DEVELOPMENT (line 27) | const
constant IS_PRODUCTION (line 27) | const
constant MINIFY (line 27) | const
Condensed preview — 174 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,220K chars).
[
{
"path": ".babelrc",
"chars": 182,
"preview": "{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"useBuiltIns\": false,\n \"modules\": false\n }"
},
{
"path": ".claude/settings.local 2.json",
"chars": 512,
"preview": "{\n \"permissions\": {\n \"allow\": [\n \"Bash(npm run build:*)\",\n \"Bash(npm install)\",\n \"Bash(npm run lint)\""
},
{
"path": ".editorconfig",
"chars": 589,
"preview": "# -----------------------------\n# General\n# -----------------------------\n\n# EditorConfig helps developers define and ma"
},
{
"path": ".gitattributes",
"chars": 1165,
"preview": "# -----------------------------\n# General\n# -----------------------------\n\n# AUTO-DETECT - Handle line endings automatic"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 845,
"preview": "<!--\nPLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.\nISSUES MISSING IMPORTANT INFORM"
},
{
"path": ".github/workflows/merge.yml",
"chars": 803,
"preview": "name: Merge checks\n\non:\n pull_request:\n branches:\n - master\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n str"
},
{
"path": ".github/workflows/release.yml",
"chars": 1449,
"preview": "name: Build and Release\n\non:\n push:\n branches:\n - master\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strate"
},
{
"path": ".gitignore",
"chars": 1007,
"preview": "# ----------------------------\n# Generated Files & Folders\n# ----------------------------\n\n# [1] : Windows thumbnail cac"
},
{
"path": ".npmignore",
"chars": 494,
"preview": "# Development files\nnode_modules/\n.git/\n.gitignore\n.eslintrc.js\n.stylelintrc.json\n\n# Build artifacts that aren't needed\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "20\n"
},
{
"path": ".stylelintrc.json",
"chars": 1950,
"preview": "{\n \"extends\": \"stylelint-config-standard-scss\",\n \"rules\": {\n \"at-rule-no-unknown\": null,\n \"scss/at-rule-no-unkno"
},
{
"path": "CHANGELOG.md",
"chars": 27184,
"preview": "# Changelog\n\n## [3.0.0] - 2026-01-13\n\n### Major Architecture & Developer Experience Release\n\nThis release represents a c"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3220,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "IMPROVEMENT_PLAN.md",
"chars": 12134,
"preview": "# Adminator Admin Dashboard - Improvement Plan\n\n## Executive Summary\n\nAfter a comprehensive senior-level review of the A"
},
{
"path": "LICENSE",
"chars": 1072,
"preview": "MIT License\n\nCopyright (c) 2018 Aigars Silkalns\n\nPermission is hereby granted, free of charge, to any person obtaining a"
},
{
"path": "README.md",
"chars": 23693,
"preview": "# Adminator Bootstrap 5 Admin Template v3.0.0\n\n**Adminator** is a responsive Bootstrap 5 Admin Template built with moder"
},
{
"path": "browserslist",
"chars": 171,
"preview": "# https://github.com/browserslist/browserslist#readme\n\n>= 0.5%\nlast 2 major versions\nnot dead\nChrome >= 90\nFirefox >= 90"
},
{
"path": "ci/getVersion.sh",
"chars": 62,
"preview": "echo $(sed 's/.*\"version\": \"\\(.*\\)\".*/\\1/;t;d' ./package.json)"
},
{
"path": "ci/verifyVersion.sh",
"chars": 256,
"preview": "VERSION=$1\nTAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)\n\nif [ $TAG_EXISTS -eq \"1\" ]; then\n echo \"The tag"
},
{
"path": "docs/COMPONENT_GUIDE.md",
"chars": 13365,
"preview": "# Component Development Guide\n\nThis guide explains how to create new components for the Adminator admin dashboard, follo"
},
{
"path": "docs/README.md",
"chars": 4098,
"preview": "# Adminator Documentation\n\nThis directory contains the complete documentation for Adminator Bootstrap 5 Admin Template.\n"
},
{
"path": "docs/_config.yml",
"chars": 2171,
"preview": "# GitHub Pages Configuration for Adminator Documentation\n\n# Site settings\ntitle: \"Adminator Documentation\"\ndescription: "
},
{
"path": "docs/_sass/custom.scss",
"chars": 3399,
"preview": "// Custom styles for Adminator Documentation\n\n// Fix code block formatting\n.highlight {\n .language-javascript,\n .langu"
},
{
"path": "docs/api/theme-api.md",
"chars": 10224,
"preview": "---\nlayout: default\ntitle: Theme API\nnav_order: 1\nparent: API Reference\n---\n\n# Theme API Reference\n{: .no_toc }\n\n## Tabl"
},
{
"path": "docs/api.md",
"chars": 8676,
"preview": "# Adminator API Reference\n\nComplete API documentation for Adminator utilities and components.\n\n## Table of Contents\n\n- ["
},
{
"path": "docs/customization/theme-system.md",
"chars": 8058,
"preview": "---\nlayout: default\ntitle: Theme System\nnav_order: 1\nparent: Customization\n---\n\n# Theme System Overview\n{: .no_toc }\n\n##"
},
{
"path": "docs/customization.md",
"chars": 253,
"preview": "---\nlayout: default\ntitle: Customization\nnav_order: 3\nhas_children: true\n---\n\n# Customization\n\nLearn how to customize Ad"
},
{
"path": "docs/examples/theme-integration.md",
"chars": 16260,
"preview": "---\nlayout: default\ntitle: Theme Integration\nnav_order: 1\nparent: Examples\n---\n\n# Theme Integration Examples\n{: .no_toc "
},
{
"path": "docs/examples.md",
"chars": 227,
"preview": "---\nlayout: default\ntitle: Examples\nnav_order: 5\nhas_children: true\n---\n\n# Examples\n\nPractical examples and integration "
},
{
"path": "docs/getting-started/build-deployment.md",
"chars": 12389,
"preview": "# Build & Deployment\n\nThis guide covers building Adminator for production and deploying it to various hosting platforms."
},
{
"path": "docs/getting-started/development.md",
"chars": 9915,
"preview": "# Development Workflow\n\nThis guide covers the development workflow for working with Adminator, including running the dev"
},
{
"path": "docs/getting-started/installation.md",
"chars": 4185,
"preview": "---\nlayout: default\ntitle: Installation\nnav_order: 1\nparent: Getting Started\n---\n\n# Installation Guide\n{: .no_toc }\n\n## "
},
{
"path": "docs/getting-started/project-structure.md",
"chars": 10429,
"preview": "# Project Structure\n\nThis guide explains the folder structure and organization of the Adminator admin dashboard template"
},
{
"path": "docs/getting-started.md",
"chars": 257,
"preview": "---\nlayout: default\ntitle: Getting Started\nnav_order: 2\nhas_children: true\n---\n\n# Getting Started\n\nEverything you need t"
},
{
"path": "docs/index.md",
"chars": 3180,
"preview": "---\nlayout: default\ntitle: Home\nnav_order: 1\ndescription: \"Adminator Bootstrap 5 Admin Dashboard with Dark Mode\"\npermali"
},
{
"path": "eslint.config.mjs",
"chars": 2800,
"preview": "import globals from \"globals\";\nimport babelParser from \"@babel/eslint-parser\";\nimport js from \"@eslint/js\";\n\nexport defa"
},
{
"path": "jsconfig.json",
"chars": 696,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"node\",\n \"baseUrl\": "
},
{
"path": "package.json",
"chars": 3763,
"preview": "{\n \"name\": \"adminator-admin-dashboard\",\n \"version\": \"3.0.0\",\n \"private\": false,\n \"description\": \"Modern jQuery-free "
},
{
"path": "src/404.html",
"chars": 862,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/500.html",
"chars": 864,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/assets/scripts/app.js",
"chars": 23808,
"preview": "/**\n * Modern Adminator Application\n * Main application entry point with enhanced mobile support\n *\n * @module app\n * @v"
},
{
"path": "src/assets/scripts/charts/chartJS/index.js",
"chars": 4351,
"preview": "import Chart from 'chart.js/auto';\nimport { COLORS } from '../../constants/colors';\n\nexport default (function () {\n // "
},
{
"path": "src/assets/scripts/charts/easyPieChart/index.js",
"chars": 6381,
"preview": "import Theme from '../../utils/theme.js';\n\nexport default (function () {\n \n // Vanilla JS Pie Chart implementation usi"
},
{
"path": "src/assets/scripts/charts/index.js",
"chars": 67,
"preview": "import './chartJS';\nimport './easyPieChart';\nimport './sparkline';\n"
},
{
"path": "src/assets/scripts/charts/sparkline/index.js",
"chars": 6443,
"preview": "import { Chart, registerables } from 'chart.js';\nimport { COLORS } from '../../constants/colors';\nimport Theme from '../"
},
{
"path": "src/assets/scripts/chat/index.js",
"chars": 356,
"preview": "export default (function () {\n const chatSidebarToggle = document.getElementById('chat-sidebar-toggle');\n const chatSi"
},
{
"path": "src/assets/scripts/components/Chart.js",
"chars": 36032,
"preview": "/**\n * Modern Chart Component\n * Replaces jQuery Sparkline with Chart.js\n */\n\nimport { Chart, registerables } from 'char"
},
{
"path": "src/assets/scripts/components/Sidebar.js",
"chars": 6673,
"preview": "/**\n * Modern Sidebar Component\n * Replaces jQuery-based sidebar functionality with vanilla JavaScript\n */\n\nclass Sideba"
},
{
"path": "src/assets/scripts/constants/colors.js",
"chars": 10251,
"preview": "const COLORS = {\n 'white' : '#ffffff',\n 'red-50' : '#ffebee',\n 'red-100' "
},
{
"path": "src/assets/scripts/datatable/index.js",
"chars": 10671,
"preview": "// DataTable implementation\n\nexport default (function () {\n \n // Vanilla JS DataTable implementation\n class VanillaDa"
},
{
"path": "src/assets/scripts/datepicker/index.js",
"chars": 8724,
"preview": "import DateUtils from '../utils/date.js';\n\nexport default (function () {\n \n // Enhanced HTML5 date picker with vanilla"
},
{
"path": "src/assets/scripts/email/index.js",
"chars": 823,
"preview": "export default (function () {\n // Email side toggle functionality\n const emailSideToggle = document.querySelector('.em"
},
{
"path": "src/assets/scripts/fullcalendar/index.js",
"chars": 3618,
"preview": "import { Calendar } from '@fullcalendar/core';\nimport interactionPlugin from '@fullcalendar/interaction';\nimport dayGrid"
},
{
"path": "src/assets/scripts/googleMaps/index.js",
"chars": 3005,
"preview": "import loadGoogleMapsAPI from 'load-google-maps-api';\nimport Theme from '../utils/theme.js';\n\nexport default (function "
},
{
"path": "src/assets/scripts/index.js",
"chars": 588,
"preview": "/**\n * Adminator Admin Template\n * Modern Entry Point - Phase 2 Modernization\n */\n\n// Import the modern application\nimpo"
},
{
"path": "src/assets/scripts/masonry/index.js",
"chars": 373,
"preview": "import Masonry from 'masonry-layout';\n\nexport default (function () {\n window.addEventListener('load', () => {\n const"
},
{
"path": "src/assets/scripts/popover/index.js",
"chars": 3467,
"preview": "// Simple vanilla JS tooltip and popover implementation\nexport default (function () {\n \n // Simple tooltip implementat"
},
{
"path": "src/assets/scripts/scrollbar/index.js",
"chars": 259,
"preview": "import PerfectScrollbar from 'perfect-scrollbar';\n\nexport default (function () {\n const scrollables = document.querySel"
},
{
"path": "src/assets/scripts/search/index.js",
"chars": 580,
"preview": "export default (function () {\n const searchToggle = document.querySelector('.search-toggle');\n const searchBox = docum"
},
{
"path": "src/assets/scripts/skycons/index.js",
"chars": 1036,
"preview": "import SkyconsInit from 'skycons';\nimport Theme from '../utils/theme.js';\n\nconst Skycons = SkyconsInit(window);\n\nexport "
},
{
"path": "src/assets/scripts/ui/index.js",
"chars": 11958,
"preview": "/**\n * UI Page Bootstrap Components\n * Vanilla JavaScript implementations for Bootstrap components\n */\n\nexport default ("
},
{
"path": "src/assets/scripts/utils/date.js",
"chars": 6975,
"preview": "/**\n * Modern Date Utilities\n * Using Day.js (2KB) instead of Moment.js (67KB) - 97% size reduction\n * Provides consiste"
},
{
"path": "src/assets/scripts/utils/dom.js",
"chars": 16238,
"preview": "/**\n * Adminator DOM Utility Functions\n * Provides jQuery-like functionality using vanilla JavaScript\n *\n * @module util"
},
{
"path": "src/assets/scripts/utils/events.js",
"chars": 5732,
"preview": "/**\n * Adminator Event Utilities\n * Provides efficient event handling with delegation and cleanup\n *\n * @module utils/ev"
},
{
"path": "src/assets/scripts/utils/index.js",
"chars": 1905,
"preview": "/**\n * Adminator Utilities Index\n * Re-exports all utility modules for convenient importing\n *\n * @module utils\n */\n\n// "
},
{
"path": "src/assets/scripts/utils/logger.js",
"chars": 2645,
"preview": "/**\n * Adminator Logger Utility\n * Development-only logging utility for debugging\n *\n * @module utils/logger\n */\n\n/**\n *"
},
{
"path": "src/assets/scripts/utils/performance.js",
"chars": 8257,
"preview": "/**\n * Adminator Performance Utilities\n * Provides ResizeObserver, IntersectionObserver, and lazy loading utilities\n *\n "
},
{
"path": "src/assets/scripts/utils/sanitize.js",
"chars": 6794,
"preview": "/**\n * Adminator Sanitization Utilities\n * HTML and input sanitization for security\n *\n * @module utils/sanitize\n */\n\n/*"
},
{
"path": "src/assets/scripts/utils/storage.js",
"chars": 4602,
"preview": "/**\n * Adminator Storage Utilities\n * Safe localStorage wrapper with error handling\n *\n * @module utils/storage\n */\n\n/**"
},
{
"path": "src/assets/scripts/utils/theme.js",
"chars": 8702,
"preview": "/**\n * Adminator Theme Manager\n * Handles light/dark mode switching with localStorage persistence\n *\n * @module utils/th"
},
{
"path": "src/assets/scripts/vectorMaps/index.js",
"chars": 8162,
"preview": "import jsVectorMap from 'jsvectormap';\nimport 'jsvectormap/dist/jsvectormap.css';\nimport 'jsvectormap/dist/maps/world.js"
},
{
"path": "src/assets/styles/index.scss",
"chars": 16865,
"preview": "@use 'spec/settings/index' as *;\n@use 'spec/tools/index' as *;\n@use \"bootstrap/scss/bootstrap\" as *;\n@use 'spec/index' a"
},
{
"path": "src/assets/styles/spec/components/easyPieChart.scss",
"chars": 167,
"preview": ".easy-pie-chart {\n position: relative;\n\n span {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: tr"
},
{
"path": "src/assets/styles/spec/components/footer.scss",
"chars": 47,
"preview": "footer {\n z-index: 1;\n position: relative;\n}\n"
},
{
"path": "src/assets/styles/spec/components/forms.scss",
"chars": 6486,
"preview": "@use '../settings/baseColors' as *;\n@use '../settings/materialColors' as *;\n\n.checkbox label {\n display: inline-block;\n"
},
{
"path": "src/assets/styles/spec/components/index.scss",
"chars": 222,
"preview": "@use 'sidebar' as *;\n@use 'topbar' as *;\n@use 'pageContainer' as *;\n@use 'progressBar' as *;\n@use 'easyPieChart' as *;\n@"
},
{
"path": "src/assets/styles/spec/components/loader.scss",
"chars": 858,
"preview": "#loader {\n transition: all 0.3s ease-in-out;\n opacity: 1;\n visibility: visible;\n position: fixed;\n height: 100vh;\n "
},
{
"path": "src/assets/styles/spec/components/masonry.scss",
"chars": 1,
"preview": "\n"
},
{
"path": "src/assets/styles/spec/components/modernize.scss",
"chars": 12520,
"preview": "// ---------------------------------------------------------\n// @Modern Design Enhancements\n// Subtle improvements for a"
},
{
"path": "src/assets/styles/spec/components/pageContainer.scss",
"chars": 5391,
"preview": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;"
},
{
"path": "src/assets/styles/spec/components/progressBar.scss",
"chars": 111,
"preview": ".progress {\n height: 4px;\n background-color: var(--c-border);\n border-radius: 4px;\n margin-bottom: 10px;\n}\n"
},
{
"path": "src/assets/styles/spec/components/sidebar.scss",
"chars": 13687,
"preview": "@use '../settings/baseColors' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;\n@use '../settings/breakpoints' as *;"
},
{
"path": "src/assets/styles/spec/components/topbar.scss",
"chars": 11448,
"preview": "@use 'sass:color';\n@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQ"
},
{
"path": "src/assets/styles/spec/generic/base.scss",
"chars": 1222,
"preview": "@use '../settings/fonts' as *;\n@use '../settings/baseColors' as *;\n@use 'sass:color';\n\nhtml, html a, body {\n -webkit-fo"
},
{
"path": "src/assets/styles/spec/generic/index.scss",
"chars": 18,
"preview": "@use 'base' as *;\n"
},
{
"path": "src/assets/styles/spec/index.scss",
"chars": 109,
"preview": "@use 'generic/index' as *;\n@use 'components/index' as *;\n@use 'screens/index' as *;\n@use 'utils/index' as *;\n"
},
{
"path": "src/assets/styles/spec/screens/chat.scss",
"chars": 2956,
"preview": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;"
},
{
"path": "src/assets/styles/spec/screens/email.scss",
"chars": 2110,
"preview": "@use '../settings/baseColors' as *;\n@use '../settings/breakpoints' as *;\n@use '../tools/mixins/mediaQueriesRanges' as *;"
},
{
"path": "src/assets/styles/spec/screens/index.scss",
"chars": 37,
"preview": "@use 'chat' as *;\n@use 'email' as *;\n"
},
{
"path": "src/assets/styles/spec/settings/baseColors.scss",
"chars": 3168,
"preview": "@use 'sass:color';\n@use 'materialColors' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// "
},
{
"path": "src/assets/styles/spec/settings/borders.scss",
"chars": 193,
"preview": "// ---------------------------------------------------------\n// @Borders\n// --------------------------------------------"
},
{
"path": "src/assets/styles/spec/settings/breakpoints.scss",
"chars": 1087,
"preview": "// ---------------------------------------------------------\n// @Breakpoints\n// ----------------------------------------"
},
{
"path": "src/assets/styles/spec/settings/fonts.scss",
"chars": 192,
"preview": "$font-primary:\n Roboto, -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;\n"
},
{
"path": "src/assets/styles/spec/settings/index.scss",
"chars": 138,
"preview": "@use 'breakpoints' as *;\n@use 'brand-colors/dist/latest/scss/brand-colors.latest.scss' as *;\n@use 'baseColors' as *;\n@us"
},
{
"path": "src/assets/styles/spec/settings/materialColors.scss",
"chars": 19054,
"preview": "$md-red-50 : #ffebee;\n$md-red-100 : #ffcdd2;\n$md-red-200 : #ef9a9a;\n$md-red-3"
},
{
"path": "src/assets/styles/spec/tools/index.scss",
"chars": 26,
"preview": "@use 'mixins/index' as *;\n"
},
{
"path": "src/assets/styles/spec/tools/mixins/clearfix.scss",
"chars": 259,
"preview": "//----------------------------------------------------------\n// @Clearfix\n//--------------------------------------------"
},
{
"path": "src/assets/styles/spec/tools/mixins/index.scss",
"chars": 79,
"preview": "@use 'placeholder' as *;\n@use 'clearfix' as *;\n@use 'mediaQueriesRanges' as *;\n"
},
{
"path": "src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss",
"chars": 1553,
"preview": "// ---------------------------------------------------------\n// @TOC\n// ------------------------------------------------"
},
{
"path": "src/assets/styles/spec/tools/mixins/placeholder.scss",
"chars": 318,
"preview": "//----------------------------------------------------------\n// @Placeholder\n//-----------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/colors.scss",
"chars": 1478,
"preview": "@use '../settings/materialColors' as *;\n@use '../settings/baseColors' as *;\n\n// ----------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/index.scss",
"chars": 46,
"preview": "@use 'layout/index' as *;\n@use 'colors' as *;\n"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/border.scss",
"chars": 2694,
"preview": "@use '../../../settings/baseColors' as colors;\n@use '../../../settings/borders' as borders;\n\n// ------------------------"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/flex.scss",
"chars": 6705,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/index.scss",
"chars": 225,
"preview": "@use 'flex' as *;\n@use 'layout' as *;\n@use 'lists' as *;\n@use 'margin' as *;\n@use 'objects' as *;\n@use 'padding' as *;\n@"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/layout.scss",
"chars": 4845,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/lists.scss",
"chars": 742,
"preview": "// ---------------------------------------------------------\n// @TOC\n// ------------------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/margin.scss",
"chars": 8944,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/objects.scss",
"chars": 2829,
"preview": "// ---------------------------------------------------------\n// @TOC\n// ------------------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/padding.scss",
"chars": 4638,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/positions.scss",
"chars": 3074,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/pseudo.scss",
"chars": 241,
"preview": "// ---------------------------------------------------------\n// @Pseudo Elements\n// ------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/sizes.scss",
"chars": 6418,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/helpers/typography.scss",
"chars": 4087,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/index.scss",
"chars": 78,
"preview": "@use 'mixins/index' as *;\n@use 'utils/index' as *;\n@use 'helpers/index' as *;\n"
},
{
"path": "src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss",
"chars": 684,
"preview": "@use '../../../settings/breakpoints' as *;\n@use 'mediaQueryCondition' as *;\n\n// Initialize global variable to avoid depr"
},
{
"path": "src/assets/styles/spec/utils/layout/mixins/index.scss",
"chars": 65,
"preview": "@use 'mediaQueryCondition' as *;\n@use 'generateResponsive' as *;\n"
},
{
"path": "src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss",
"chars": 660,
"preview": "@use '../../../settings/breakpoints' as *;\n\n// ---------------------------------------------------------\n// @Media Queri"
},
{
"path": "src/assets/styles/spec/utils/layout/utils/center.scss",
"chars": 1065,
"preview": "@use '../mixins/generateResponsive' as *;\n\n// ---------------------------------------------------------\n// @TOC\n// -----"
},
{
"path": "src/assets/styles/spec/utils/layout/utils/gap.scss",
"chars": 5919,
"preview": "@use \"sass:math\";\n@use '../mixins/generateResponsive' as *;\n\n// --------------------------------------------------------"
},
{
"path": "src/assets/styles/spec/utils/layout/utils/index.scss",
"chars": 77,
"preview": "@use 'center' as *;\n@use 'gap' as *;\n@use 'peers' as *;\n@use 'layers' as *;\n\n"
},
{
"path": "src/assets/styles/spec/utils/layout/utils/layers.scss",
"chars": 80,
"preview": ".layers {\n display: flex;\n flex-flow: column nowrap;\n align-items: center;\n}\n"
},
{
"path": "src/assets/styles/spec/utils/layout/utils/peers.scss",
"chars": 474,
"preview": ".peers {\n box-sizing: border-box;\n display: flex !important;\n align-items: flex-start;\n justify-content: flex-start;"
},
{
"path": "src/assets/styles/utils/mobile.scss",
"chars": 26890,
"preview": "// Mobile Utility Classes and Fixes\n// This file contains mobile-specific utility classes and responsive fixes\n\n// Mobil"
},
{
"path": "src/assets/styles/utils/theme.css",
"chars": 3863,
"preview": ":root {\n /* Modern light theme - soft blue-gray tones */\n --c-bkg-body: #f0f4f8;\n --c-bkg-card: #ffffff;\n --c-bkg-si"
},
{
"path": "src/assets/styles/vendor/datepicker.scss",
"chars": 3862,
"preview": "@use 'sass:color';\n@use '../spec/settings/baseColors' as *;\n@use '../spec/settings/breakpoints' as *;\n@use '../spec/tool"
},
{
"path": "src/assets/styles/vendor/font-awesome.css",
"chars": 37564,
"preview": "/*!\n * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome\n * License - http://fontawesome.io/lice"
},
{
"path": "src/assets/styles/vendor/fullcalendar.scss",
"chars": 5016,
"preview": "@use '../spec/settings/baseColors' as *;\n\n.fc {\n background-color: var(--c-bkg-card) !important;\n border: 1px solid va"
},
{
"path": "src/assets/styles/vendor/index.scss",
"chars": 240,
"preview": "@use 'perfect-scrollbar/css/perfect-scrollbar' as *;\n@use 'themify-icons' as *;\n@use 'font-awesome' as *;\n@use 'perfectS"
},
{
"path": "src/assets/styles/vendor/jquery.datatables.scss",
"chars": 3238,
"preview": "@use '../spec/settings/baseColors' as *;\n@use '../spec/settings/breakpoints' as *;\n@use '../spec/tools/mixins/mediaQueri"
},
{
"path": "src/assets/styles/vendor/perfectScrollbar.scss",
"chars": 64,
"preview": ".ps__rail-y {\n right: 0 !important;\n left: auto !important;\n}\n"
},
{
"path": "src/assets/styles/vendor/sparkline.scss",
"chars": 134,
"preview": "#jqstooltip {\n width: auto !important;\n height: auto !important;\n padding: 5px 10px !important;\n border-radius: 2px "
},
{
"path": "src/assets/styles/vendor/themify-icons.css",
"chars": 16555,
"preview": "@font-face {\n\tfont-family: 'themify';\n\tsrc:url('../static/fonts/icons/themify/themify.eot?-fvbane');\n\tsrc:url('../static"
},
{
"path": "src/basic-table.html",
"chars": 30231,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/blank.html",
"chars": 21872,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/buttons.html",
"chars": 20488,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/calendar.html",
"chars": 30879,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/charts.html",
"chars": 28645,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/chat.html",
"chars": 33117,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/compose.html",
"chars": 27727,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/datatable.html",
"chars": 42982,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/email.html",
"chars": 48726,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/forms.html",
"chars": 35269,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/google-maps.html",
"chars": 22046,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/index.html",
"chars": 52430,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/signin.html",
"chars": 3456,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/signup.html",
"chars": 3343,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/ui.html",
"chars": 44993,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/vector-maps.html",
"chars": 22034,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "tests/setup.js",
"chars": 1292,
"preview": "/**\n * Vitest Test Setup\n * Configures the test environment\n */\n\n// Set up DOM environment\nif (typeof document !== 'unde"
},
{
"path": "tests/utils/dom.test.js",
"chars": 7645,
"preview": "/**\n * DOM Utilities Tests\n */\n\nimport { describe, it, expect, beforeEach, vi } from 'vitest';\nimport { DOM } from '../."
},
{
"path": "tests/utils/logger.test.js",
"chars": 3288,
"preview": "/**\n * Logger Utility Tests\n */\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';\nimport Logger"
},
{
"path": "tests/utils/theme.test.js",
"chars": 3480,
"preview": "/**\n * Theme Manager Tests\n */\n\nimport { describe, it, expect, beforeEach, vi } from 'vitest';\nimport Theme from '../../"
},
{
"path": "vitest.config.js",
"chars": 398,
"preview": "import { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n test: {\n environment: 'jsdom',\n glo"
},
{
"path": "webpack/config.js",
"chars": 3587,
"preview": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Entry Point Setu"
},
{
"path": "webpack/devServer.js",
"chars": 995,
"preview": "// ---------------------\n// @Loading Dependencies\n// ---------------------\n\nconst\n manifest = require('./manifest');\n\n\n"
},
{
"path": "webpack/manifest.js",
"chars": 1305,
"preview": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Environment Hold"
},
{
"path": "webpack/plugins/caseSensitivePlugin.js",
"chars": 133,
"preview": "const\n CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');\n\nmodule.exports = new CaseSensitivePa"
},
{
"path": "webpack/plugins/copyPlugin.js",
"chars": 347,
"preview": "const\n path = require('path'),\n manifest = require('../manifest'),\n CopyWebpackPlugin = require"
},
{
"path": "webpack/plugins/dashboardPlugin.js",
"chars": 104,
"preview": "const\n DashboardPlugin = require('webpack-dashboard/plugin');\n\nmodule.exports = new DashboardPlugin();\n"
},
{
"path": "webpack/plugins/extractPlugin.js",
"chars": 216,
"preview": "const\n manifest = require('../manifest'),\n ExtractTextPlugin = require('mini-css-extract-plugin');\n\nmodule.ex"
},
{
"path": "webpack/plugins/htmlPlugin.js",
"chars": 1135,
"preview": "const\n path = require('path'),\n manifest = require('../manifest'),\n HtmlWebpackPlugin = require"
},
{
"path": "webpack/plugins/index.js",
"chars": 725,
"preview": "const manifest = require('../manifest');\nconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nconst plu"
},
{
"path": "webpack/plugins/internal.js",
"chars": 2057,
"preview": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Plugins\n "
},
{
"path": "webpack/rules/css.js",
"chars": 1185,
"preview": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Loaders\n "
},
{
"path": "webpack/rules/fonts.js",
"chars": 116,
"preview": "module.exports = {\n test: /\\.(eot|svg|ttf|woff|woff2)$/,\n exclude : /(node_modules)/,\n type: 'asset/resource',\n};"
},
{
"path": "webpack/rules/images.js",
"chars": 177,
"preview": "module.exports = {\n test : /\\.(png|gif|jpg?g|svg)$/i,\n exclude : /(node_modules)/,\n type : 'asset/resource',\n "
},
{
"path": "webpack/rules/index.js",
"chars": 127,
"preview": "module.exports = [\n require('./js'),\n require('./images'),\n require('./css'),\n require('./sass'),\n require('./fonts"
},
{
"path": "webpack/rules/js.js",
"chars": 122,
"preview": "module.exports = {\n test : /\\.(js|jsx)$/,\n exclude : /(node_modules|build|dist\\/)/,\n use : ['babel-loader'],\n}"
},
{
"path": "webpack/rules/sass.js",
"chars": 1566,
"preview": "// ------------------\n// @Table of Contents\n// ------------------\n\n/**\n * + @Loading Dependencies\n * + @Common Loaders\n "
},
{
"path": "webpack.config.js",
"chars": 70,
"preview": "const config = require('./webpack/config');\n\nmodule.exports = config;\n"
}
]
// ... and 3 more files (download for full content)
About this extraction
This page contains the full source code of the puikinsh/Adminator-admin-dashboard GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 174 files (1.1 MB), approximately 286.4k tokens, and a symbol index with 198 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.