{"id":24716696,"url":"https://github.com/hawkiq/admlte","last_synced_at":"2026-02-08T09:31:42.160Z","repository":{"id":273401110,"uuid":"919599373","full_name":"hawkiq/Admlte","owner":"hawkiq","description":"AdminLTE v4 integration for Laravel","archived":false,"fork":false,"pushed_at":"2025-02-08T09:17:43.000Z","size":267,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T22:30:34.428Z","etag":null,"topics":["admin-dashboard","admin-panel","adminlte4","bootstrap5","laravel"],"latest_commit_sha":null,"homepage":"","language":"Blade","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hawkiq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-20T17:29:44.000Z","updated_at":"2025-02-08T10:14:02.000Z","dependencies_parsed_at":"2025-01-20T18:24:40.940Z","dependency_job_id":"49734ca9-ea76-4b9c-83c2-4618eceeee4d","html_url":"https://github.com/hawkiq/Admlte","commit_stats":null,"previous_names":["hawkiq/admlte"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/hawkiq/Admlte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkiq%2FAdmlte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkiq%2FAdmlte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkiq%2FAdmlte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkiq%2FAdmlte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hawkiq","download_url":"https://codeload.github.com/hawkiq/Admlte/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawkiq%2FAdmlte/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29226468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T09:15:18.648Z","status":"ssl_error","status_checked_at":"2026-02-08T09:14:33.745Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","admin-panel","adminlte4","bootstrap5","laravel"],"created_at":"2025-01-27T09:13:53.206Z","updated_at":"2026-02-08T09:31:42.146Z","avatar_url":"https://github.com/hawkiq.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hawkiq AdmLTE Package\n\n[![Packagist](https://img.shields.io/packagist/v/hawkiq/admlte.svg)](https://packagist.org/packages/hawkiq/admlte)\n\n\n- This Package Heavely Inspired by [Laravel-AdminLTE](https://github.com/jeroennoten/Laravel-AdminLTE) for AdminLTEv3, I used thier Components with few modifications to make it suitable for AdminLTEv4.\n---\n\nHawkiq AdmLTE is a Laravel package designed for seamless integration of the AdminLTE v4 beta template, providing a robust foundation for admin dashboards. This package simplifies the installation, configuration, and usage of AdminLTE with Bootstrap 5 and related components.\n\n---\n\n## Table of Contents  \n\n- [Installation](#installation)  \n  - [Step 1: Require the Package](#step-1-require-the-package)  \n  - [Step 2: Publish Assets, Lang, and Configurations](#step-2-publish-assets-lang-and-configurations)  \n  - [Step 3: Replace Auth Views (Optional)](#step-3-replace-auth-views-optional)  \n- [Configuration](#configuration)  \n  - [Username Login](#username-login)  \n- [Usage](#usage)  \n  - [Include the Layout](#include-the-layout)  \n  - [Customizing Views](#customizing-views)  \n- [Using with Vite](#using-with-vite)  \n  - [Add new colors](#add-new-colors)  \n- [Language Selector](#language-selector)  \n- [Plugins](#plugins)  \n- [Widgets](#widgets)  \n  - [Card](#card)  \n  - [Info Box](#info-box)  \n  - [Small Box](#small-box)  \n  - [Alert](#alert)  \n- [Contribution](#contribution)  \n- [License](#license)  \n\n---\n\n# Installation\n\nFollow these steps to install and set up the Hawkiq AdmLTE package:\n\n## Step 1: Require the Package\n\nAdd the package to your Laravel project via Composer:\n\n```bash\ncomposer require hawkiq/admlte\n```\n\n## Step 2: Publish Assets, Lang, and Configurations\n\nRun the following Artisan command to publish the package's assets,language and configuration files:\n```bash\nphp artisan admlte:install\n```\n\nThis will:\n- Copy AdminLTE assets (CSS, JS, images) to `public/vendor`.\n- Publish the configuration file to `config/admlte.php`.\n- Publish Languages files to `lang/` or `resources/lang/`.\n\n## Step 3: Replace Auth Views ( Optional )\n\nIf you would like to use AdminLTE Auth views you can run below command to replace views:\n\n```bash\nphp artisan admlte:install --only=auth_views\n```\nthis step is safe since its taking backup in `storage` folder for current views so if anything wrong happened you can always restoring old views.\n\n---\n\n# Configuration\n\nCustomize the package by editing the configuration file located at:\n```bash\nconfig/admlte.php\n```\n\nKey configurations include:\n- Sidebar links and permissions.\n- Navbar components.\n- Custom assets and scripts.\n\nExample `config/admlte.php`:\n```php\nreturn [\n    'sidebar' =\u003e [\n        [\n            'type' =\u003e 'header',\n            'text' =\u003e 'main.navigation',\n            'permission' =\u003e null,\n        ],\n        [\n            'type' =\u003e 'link',\n            'text' =\u003e 'Dashboard',\n            'route' =\u003e 'test1',\n            'icon' =\u003e 'fas fa-home',\n            'permission' =\u003e null,\n        ],\n          [\n            'type' =\u003e 'link',\n            'text' =\u003e 'Test Link',\n            'route' =\u003e 'test2',\n            'icon' =\u003e 'fas fa-cog',\n            'permission' =\u003e null,\n        ],\n    ],\n];\n```\n\n## Username Login\nSometimes you might prefer username to login this settings will make login via username and it will add username field to register page. Remember you should override method username() in LoginController.php or change Anything in RegisterControler related to username, this setting just to show Username or email in forms it has nothing to do with controllers.\n\nset `'username_enabled' =\u003e true,` then in `app\\Http\\Controllers\\AuthLoginController.php` add \n```php\n    /**\n     * Get the login username to be used by the controller.\n     *\n     * @return string\n     */\n    public function username()\n    {\n        return 'username';\n    }\n\n```\n\nedit `app\\Http\\Controllers\\Auth\\RegisterController.php` \n\n```php\n\nreturn Validator::make($data, [\n'name' =\u003e ['required', 'string', 'max:255'],\n'username' =\u003e ['required', 'string', 'max:255'], // \u003c\u003c Add this to validator \u003e\u003e\n'phone' =\u003e ['string', 'max:255', 'unique:users'],\n'email' =\u003e ['required', 'string', 'email', 'max:255', 'unique:users'],\n'password' =\u003e ['required', 'string', 'min:6', 'confirmed'],\n]);\n\n\nreturn User::create([\n'name' =\u003e $data['name'],\n'username' =\u003e $data['username'],// \u003c\u003c Add this to create User Model \u003e\u003e\n'phone' =\u003e $data['phone'],\n'email' =\u003e $data['email'],\n'password' =\u003e Hash::make($data['password']),\n]);\n\n```\n---\n\n# Usage\n\n## Include the Layout\nTo use the package's layout, extend the base layout in your Blade files:\n\n```blade\n@extends('admlte::page')\n```\nIf you want to include auth layout just use AdmLTE auth layouts:\n\n### for login page\n```blade\n@extends('admlte::auth.login')\n\n```\n\n### for register page\n```blade\n@extends('admlte::auth.register')\n\n```\n\n# Customizing Views\nIf you need to customize views,\n```bash\nphp artisan admlte:install --only=views\n```\n- Publish customizable views to `resources/views/vendor/admlte`.\n\n---\n# Using with Vite\nif you prefer to Use asset bundling using vite you have to make few adjestments to your project.\nNo need to install more packages just small change to your `vite.config.js` file.\nadd this \n```js\nimport path from \"path\";\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: [\"resources/css/app.css\", \"resources/js/app.js\"],\n            refresh: true,\n        }),\n    ],\n    resolve: { // Add this block resolve\n        alias: {\n            \"@vendor\": path.resolve(__dirname, \"public/vendor\"),\n        },\n    },\n});\n\n```\n\nthen go to resources folder in your project edit `app.css` and `app.js` .\n\napp.css\n\n```css\n@import \"@vendor/adminlte/css/adminlte.min.css\";\n@import \"@vendor/font-awesome/css/all.min.css\";\n```\napp.js\n```js\nimport \"@vendor/jquery/jquery.min.js\"; // Add this if You want to use jquery\nimport \"@vendor/bootstrap/js/bootstrap.bundle.min.js\";\nimport \"@vendor/adminlte/js/adminlte.js\";\n\n```\n\nthen run command `npm run dev` , dont forget to activate vite option in `config/admlte.php`\n\n```php\n    /*\n    |--------------------------------------------------------------------------\n    | Assets Bundling ( Experimental )\n    |--------------------------------------------------------------------------\n    |\n    | Default behavouir is assets from public vendor as files But If you prefer.\n    | Using vite bundling you can mark this option as true.notice this is just \n    | Test feature done during testing filament So it might works as you desire .\n    |\n    */\n\n    'vite' =\u003e true,\n\n```\n\n## Add new colors\nwhat if you like to add new colors for Adminlte library like (purple,lime,indigo etc...) you can do this by using vite just add these parameters and it will works perfectly ( this approch is temprorary wait until adminlte release their final version).\n\n```js\nimport path from \"path\";\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: [\"resources/css/app.scss\", \"resources/js/app.js\"],// change app.css to app.scss\n            refresh: true,\n        }),\n    ],\n    resolve: {\n        alias: {\n            \"@vendor\": path.resolve(__dirname, \"public/vendor\"),\n            \"@adminlte\": path.resolve(\n                __dirname,\n                \"vendor/hawkiq/adminltev4/src/scss\"\n            ), // Add this Line\n        },\n    },\n});\n\n\n```\nin `app.css` add \n```css\n@import \"@vendor/font-awesome/css/all.min.css\";\n```\nCreate file in `resources/css` called `app.scss`\n```scss\n@import 'app.css';\n@import \"bootstrap/scss/functions\";\n@import \"bootstrap/scss/variables\";\n\n$custom-colors: (\n    \"purple\": #6f42c1,\n    \"teal\": #20c997,\n    \"orange\": #fd7e14,\n    \"pink\": #d63384,\n    \"lime\": #cddc39,\n    \"cyan\": #17a2b8,\n    \"brown\": #795548,\n    \"indigo\": #6610f2\n    // add more colors if you like\n);\n\n$theme-colors: map-merge($theme-colors, $custom-colors);\n\n@import \"@adminlte/adminlte.scss\";\n\n@each $color, $value in $custom-colors {\n    .bg-#{$color} {\n        background-color: $value !important;\n    }\n\n    .text-#{$color} {\n        color: $value !important;\n    }\n\n    .btn-#{$color} {\n        background-color: $value;\n        color: white;\n\n        \u0026:hover {\n            background-color: darken($value, 10%);\n        }\n    }\n}\n\n```\n\nFinal step is change vite config to app.scss\n```php\n\n    /*\n    |--------------------------------------------------------------------------\n    | Assets Bundling ( Experimental )\n    |--------------------------------------------------------------------------\n    |\n    | Default behavouir is assets from public vendor as files But If you prefer.\n    | Using vite bundling you can mark this option as true.notice this is just \n    | Test feature done during testing filament So it might works as you desire .\n    |\n    */\n\n    'vite' =\u003e true,\n    'vite_css' =\u003e 'resources/css/app.scss',\n    'vite_js' =\u003e 'resources/js/app.js',\n\n```\n\napp.js still same as before step\n```js\nimport \"@vendor/jquery/jquery.min.js\";\nimport \"@vendor/bootstrap/js/bootstrap.bundle.min.js\";\nimport \"@vendor/adminlte/js/adminlte.js\";\n```\n\n# Language Selector\nYou can add language selector with one click in `admlte.php` by set two options\n```php\n\n 'navbar' =\u003e [\n        //Navbar Widgets\n        //...\n        'language_selector_widget' =\u003e true, // Set if you want to show language selector in navbar.\n```\n\nand you can add more than language in option\n\n```php\n\n    /*\n    |--------------------------------------------------------------------------\n    | App Local\n    |--------------------------------------------------------------------------\n    |\n    | List of Supported Langauges for Admin Panel.\n    | This will only set language to middleware you still have to translate\n    | project by yourself by adding phrases to main.php or your language folder.\n    |\n    |\n    */\n\n    'app_locals' =\u003e [\n        //Text =\u003e Locale Code\n        'arabic' =\u003e 'ar',\n        'english' =\u003e 'en',\n        'french' =\u003e 'fr',\n    ],\n\n```\n\none last step you still have to add Admlte middleware to your `bootstrap/app.php` add \n```php\nuse Hawkiq\\Admlte\\Http\\Middleware\\LanguageMiddleware;\n\n-\u003ewithMiddleware(function (Middleware $middleware) {\n        $middleware-\u003eappend(LanguageMiddleware::class); // This will be Added only \n    })\n\n```\n---\n# Plugins\nif you wish to integrate js plugins into your project you can follow below tutorial. we will test this using Summernote WYSIWYG text editor.\nfirst download combiled css,js from their official website https://summernote.org/getting-started/\nextract files into public folder for example `vendor/summernote`.\nopen `config/admlte.php` and edit Plugins section, add Summernote for it like this\n\n```php\n\n'plugins' =\u003e [\n    /// *** Other Plugins\n    'Summernote' =\u003e [\n        'active' =\u003e false,\n        'files' =\u003e [\n            [\n                'type' =\u003e 'css',\n                'asset' =\u003e true, // Set this to true if you host files (Optional)\n                'location' =\u003e 'vendor/summernote/summernote-lite.css',\n            ],\n            [\n                'type' =\u003e 'js',\n                'asset' =\u003e true,\n                'location' =\u003e 'vendor/summernote/summernote-lite.js',\n            ],\n        ],\n    ],\n],\n\n```\n\nLast step is to activate Plugin in your page By including it\n\n```php\n\n@extends('admlte::page')\n@section('plugins.Summernote', true)\n\n@section('content')\n    \u003cdiv class=\"row-12\"\u003e\n        \u003cdiv class=\"md-12\"\u003e\n            \u003cdiv id=\"summernote\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n@endsection\n\n@push('js')\n    \u003cscript\u003e\n        $('#summernote').summernote({\n            placeholder: 'Hello Artisans from AdmLTE Dashboard',\n            tabsize: 2,\n            height: 100\n        });\n    \u003c/script\u003e\n@endpush\n\n\n```\nand thats it 😊\n- Remember if you used Vite you should import files into app.css. app.js \n```css\n@import \"@vendor/summernote/summernote-lite.css\";\n```\n```js\nimport \"@vendor/summernote/summernote-lite.js\";\n```\n# Widgets\nI've created few widget for easy use in your project, I'll try to make more in near future. all widgets use bootstrap 5 color names ( primary - success - danger - warning - light - dark - secondary ), till now there are no AdminLTE colors.\n\n## Card\nTo create Cards with minimal efforts you can use Card widget and pass the required informations to make it works, here are few examples, when I create a wiki page I will give full details on each component.\n```html\n\n\u003cx-admlte-card icon=\"fas fa-users\" theme-mode=\"full\" title=\"Header Card\" theme=\"primary\"\u003e\n    A card with header using primary color ...\n\u003c/x-admlte-card\u003e\n\n\u003cx-admlte-card theme=\"danger\" theme-mode=\"outline\"\u003e\n    A card without header has red border ...\n\u003c/x-admlte-card\u003e\n\n\u003cx-admlte-card icon=\"fas fa-cog\" title=\"No theme-mode\" theme=\"warning\"\u003e\n    A card with header using warning color but without theme-mode attribute...\n\u003c/x-admlte-card\u003e\n```\n\n![Card](card-1.png)\n\n\n## Info Box\nFor display small infos with icons or progress bar \n\n```html\n\n\u003cx-admlte-info-box class=\"shadow\" title=\"CPU Traffic\" text=\"424\" icon-theme=\"primary\"\n    icon=\"fas fa-lg fa-cog\" theme=\"light\" /\u003e\n\n\u003cx-admlte-info-box title=\"Downloads\" text=\"1205\" icon=\"fas fa-lg fa-download\"\n    icon-theme=\"danger\" /\u003e\n\n\u003cx-admlte-info-box title=\"User Registrations\" text=\"251\" icon=\"fas fa-lg fa-user-plus\"\n    theme=\"success\" /\u003e\n\n\u003cx-admlte-info-box title=\"Tasks\" text=\"75/100\" icon=\"fas fa-lg fa-tasks\" theme=\"warning\"\n    progress=75 progress-theme=\"dark\" description=\"75% of the tasks have been completed\" /\u003e\n\n\u003c!-- Updatable --\u003e\n\u003cx-admlte-info-box title=\"Reputation\" text=\"0/1000\" icon=\"fas fa-lg fa-medal text-dark\"\n    theme=\"danger\" id=\"ibUpdatable\" progress=0 progress-theme=\"teal\"\n    description=\"0% reputation completed to reach next level\" /\u003e\n                \n\n```\n\nyou can test `updateable` Info box with this js code\n\n```html\n\u003cscript\u003e\n    $(document).ready(function() {\n\n        let iBox = new _AdminLTE_InfoBox('ibUpdatable');\n\n        let updateIBox = () =\u003e {\n            // Update data.\n            let rep = Math.floor(1000 * Math.random());\n            let idx = rep \u003c 100 ? 0 : (rep \u003e 500 ? 2 : 1);\n            let progress = Math.round(rep * 100 / 1000);\n            let text = rep + '/1000';\n            let icon = 'fas fa-lg fa-medal ' + ['text-primary', 'text-light', 'text-warning'][idx];\n            let description = progress + '% reputation completed to reach next level';\n\n            let data = {\n                text,\n                icon,\n                description,\n                progress\n            };\n            iBox.update(data);\n        };\n\n        setInterval(updateIBox, 5000);\n    })\n\u003c/script\u003e\n\n```\n![Info Box](info-box.png)\n\n\n## Small Box\nFor display one info with beautiful UI\n\n```html\n\n\u003cx-admlte-small-box theme=\"primary\" title=\"251\" text=\"Users\" icon=\"fas fa-user\" url=\"#\"\n    url-text=\"View all users\" url-icon=\"fas fa-link\" /\u003e\n\n\n\u003cx-admlte-small-box title=\"Loading\" text=\"Loading data...\" icon=\"fas fa-chart-bar\" theme=\"success\"\n    url=\"#\" url-text=\"More info\" /\u003e\n\n\u003cx-admlte-small-box title=\"424\" text=\"Views\" icon=\"fas fa-eye text-light\" theme=\"danger\"\n    url=\"#\" url-text=\"View details\" /\u003e\n\n\u003cx-admlte-small-box title=\"Downloads\" text=\"1205\" icon=\"fas fa-download text-white\"\n    theme=\"warning\" /\u003e\n\n\u003cx-admlte-small-box title=\"528\" text=\"User Registrations\" icon=\"fas fa-user-plus text-teal\"\n    theme=\"primary\" url=\"#\" url-text=\"View all users\" /\u003e\n\n\u003cx-admlte-small-box title=\"0\" text=\"Reputation\" icon=\"fas fa-medal\" theme=\"danger\"\n    url=\"#\" url-text=\"Reputation history\" id=\"sbUpdatable\" /\u003e\n\n\n```\n![Small Box](small-box.png)\n\n## Alert\nFor display alerts \n\n```html\n\u003cx-admlte-alert theme=\"dark\" title=\"Important\"\u003e\n    Dark theme alert!\n\u003c/x-admlte-alert\u003e\n\n\u003cx-admlte-alert theme=\"success\" title=\"Success\"\u003e\n    Success theme alert!\n\u003c/x-admlte-alert\u003e\n\n\n\u003cx-admlte-alert theme=\"danger\" title=\"Oh snap!!\"\u003e\n    danger theme alert!\n\u003c/x-admlte-alert\u003e\n\n\n\u003cx-admlte-alert theme=\"info\" title=\"Did you know!\"\u003e\n    info theme alert!\n\u003c/x-admlte-alert\u003e\n\n\n```\n![Alert](alert.png)\n\n---\n\n# Contribution\nContributions are welcome! Feel free to fork the repository and submit a pull request.\n\n---\n\n# License\nThis package is open-sourced software licensed under the [MIT license](LICENSE).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkiq%2Fadmlte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhawkiq%2Fadmlte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawkiq%2Fadmlte/lists"}