├── .editorconfig ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── License.md ├── README.md ├── package.json ├── plugins ├── alpinejs │ ├── cdn.js │ ├── cdn.min.js │ ├── module.cjs.js │ └── module.esm.js └── tailwindcss.js ├── postcss.config.js ├── public ├── build │ └── js │ │ └── script.js ├── favicon.ico ├── images │ ├── 1.png │ └── avatar.jpeg └── index.html ├── screens ├── dark.png └── light.png ├── src ├── css │ └── main.css ├── data │ ├── index.js │ ├── navigationLinks.js │ └── pages │ │ ├── blank.js │ │ ├── form-elements.js │ │ ├── home.js │ │ ├── layouts │ │ ├── mini-column-sidebar.js │ │ ├── mini-plus-one-column-sidebar.js │ │ └── two-columns-sidebar.js │ │ └── tables.js ├── html │ ├── auth │ │ ├── forgot-password.html │ │ ├── login.html │ │ ├── register.html │ │ └── reset-password.html │ ├── components │ │ ├── form-elements.html │ │ └── tables.html │ ├── hbs │ │ ├── layouts │ │ │ ├── auth.hbs │ │ │ ├── base.hbs │ │ │ └── main.hbs │ │ └── partials │ │ │ ├── auth-card.hbs │ │ │ ├── card-header.hbs │ │ │ ├── dropdown-menu.hbs │ │ │ ├── footer.hbs │ │ │ ├── form │ │ │ ├── checkbox.hbs │ │ │ └── text-input.hbs │ │ │ ├── loading-screen.hbs │ │ │ ├── navbar.hbs │ │ │ ├── navigation-links.hbs │ │ │ ├── page-header.hbs │ │ │ ├── panels │ │ │ ├── base.hbs │ │ │ ├── notifications.hbs │ │ │ ├── search.hbs │ │ │ └── settings.hbs │ │ │ ├── sidebar.hbs │ │ │ ├── simple-statistics-card.hbs │ │ │ ├── table-wrapper.hbs │ │ │ └── user-menu.hbs │ ├── index.html │ ├── layouts │ │ ├── mini-plus-one-column-sidebar.html │ │ ├── mini-sidebar.html │ │ └── two-columns-sidebar.html │ └── pages │ │ ├── 404.html │ │ ├── 500.html │ │ └── blank.html ├── js │ ├── demo.js │ ├── main.js │ └── plugin │ │ ├── accordion.js │ │ ├── dropdown.js │ │ ├── index.js │ │ └── setup.js ├── plugins │ ├── alpinejs │ │ ├── build.js │ │ └── builds │ │ │ ├── cdn.js │ │ │ └── module.js │ └── tailwindcss │ │ ├── build.js │ │ └── tailwindcss.cjs └── support │ ├── hbs-helpers.js │ └── index.js ├── tailwind.config.js ├── vite.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 4 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | custom: ["https://www.paypal.me/Akamel721"] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | del 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "trailingComma": "all", 4 | "singleQuote": true, 5 | "printWidth": 120, 6 | "tabWidth": 4, 7 | "bracketSameLine": false, 8 | "endOfLine": "auto", 9 | "plugins": [ 10 | "prettier-plugin-tailwindcss" 11 | ], 12 | "overrides": [ 13 | { 14 | "files": [ 15 | "*.html", 16 | "*.hbs" 17 | ], 18 | "options": { 19 | "parser": "angular" 20 | } 21 | } 22 | ] 23 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | ## [0.1.0] 6 | 7 | - Rewritten using [vite](https://vite.dev/) & [handlebars](https://handlebarsjs.com/). 8 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020-present, Ahmed Kamel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # K-WD Dashboard 2 | 3 | Fully responsive dashboard template built with tailwindcss & alpinejs 4 | 5 | [![GitHub license](https://img.shields.io/github/license/Kamona-WD/kwd-dashboard)](https://github.com/Kamona-WD/starter-dashboard-layout/blob/main/License.md) 6 | [![GitHub stars](https://img.shields.io/github/stars/Kamona-WD/kwd-dashboard)](https://github.com/Kamona-WD/kwd-dashboard/stargazers) 7 | 8 | | | | 9 | | --- | --- | 10 | | ![Showcase light](screens/light.png) | ![Showcase dark](screens/dark.png) | 11 | 12 | ## [See live](https://kamona-wd.github.io/kwd-dashboard/) 13 | 14 | To get started: 15 | 16 | 1. Clone the repository: 17 | 18 | ```bash 19 | git clone https://github.com/Kamona-WD/kwd-dashboard.git 20 | 21 | cd kwd-dashboard 22 | ``` 23 | 24 | 2. Install the dependencies: 25 | 26 | ```bash 27 | yarn install 28 | 29 | # Using npm 30 | npm install 31 | ``` 32 | 33 | 3. Start the development server: 34 | 35 | ```bash 36 | yarn dev 37 | 38 | # Using npm 39 | npm run dev 40 | ``` 41 | 42 | ## Building 43 | 44 | ```bash 45 | yarn build 46 | 47 | # Using npm 48 | npm run build 49 | ``` 50 | 51 | ## Preview 52 | 53 | ```bash 54 | # Using npm 55 | npm run preview 56 | 57 | # Using Yarn 58 | yarn preview 59 | ``` 60 | 61 | --- 62 | 63 | ## Support 64 | 65 | [![PayPal Me](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.me/Akamel721/) 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kwd-dashboard", 3 | "version": "0.1.0", 4 | "description": "Responsive dashboard template built with tailwindcss alpinejs", 5 | "license": "MIT", 6 | "type": "module", 7 | "author": { 8 | "name": "Ahmed Kamel", 9 | "email": "ak3849909@gmail.com", 10 | "url": "https://github.com/Kamona-WD" 11 | }, 12 | "homepage": "https://kamona-wd.github.io/kwd-dashboard/", 13 | "keywords": [ 14 | "dashboard", 15 | "tailwindcss", 16 | "layout", 17 | "alpinejs", 18 | "admin", 19 | "template" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/kamona-wd/kwd-dashboard" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/kamona-wd/kwd-dashboard/issues" 27 | }, 28 | "main": "plugins/alpinejs/module.cjs.js", 29 | "module": "plugins/alpinejs/module.esm.js", 30 | "unpkg": "plugins/alpinejs/cdn.min.js", 31 | "files": [ 32 | "plugins/**/*" 33 | ], 34 | "exports": { 35 | "./alpinejs": { 36 | "require": "./plugins/alpinejs/module.cjs.js", 37 | "import": "./plugins/alpinejs/module.esm.js" 38 | }, 39 | "./tailwindcss": { 40 | "require": "./plugins/tailwindcss.js", 41 | "import": "./plugins/tailwindcss.js" 42 | }, 43 | "./plugins/*": "./plugins/*" 44 | }, 45 | "scripts": { 46 | "dev": "vite", 47 | "build": "vite build --emptyOutDir", 48 | "preview": "vite preview", 49 | "format": "prettier --write \"src\" \"dist/**/*.html\"", 50 | "deploy": "gh-pages -d dist", 51 | "alpine:build": "node src/plugins/alpinejs/build", 52 | "tw:build": "node src/plugins/tailwindcss/build", 53 | "p": "prettier --write" 54 | }, 55 | "devDependencies": { 56 | "@alpinejs/anchor": "^3.14.8", 57 | "@alpinejs/collapse": "^3.14.8", 58 | "@alpinejs/focus": "^3.14.8", 59 | "@alpinejs/persist": "^3.14.8", 60 | "@alpinejs/resize": "^3.14.8", 61 | "@iconify-json/tabler": "^1.2.13", 62 | "@iconify/tailwind": "^1.2.0", 63 | "@popperjs/core": "^2.11.8", 64 | "@tailwindcss/forms": "^0.5.9", 65 | "alpinejs": "^3.14.8", 66 | "apexcharts": "^4.3.0", 67 | "autoprefixer": "^10.4.20", 68 | "esbuild": "^0.24.2", 69 | "gh-pages": "^6.3.0", 70 | "perfect-scrollbar": "^1.5.6", 71 | "postcss": "^8.4.49", 72 | "postcss-import": "^16.1.0", 73 | "prettier": "^3.4.2", 74 | "prettier-plugin-tailwindcss": "^0.6.9", 75 | "tailwind-merge": "^2.6.0", 76 | "tailwindcss": "^3.4.17", 77 | "vite": "^6.0.7", 78 | "vite-plugin-handlebars": "^2.0.0" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /plugins/alpinejs/cdn.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | // src/js/plugin/accordion.js 3 | function accordion_default(Alpine) { 4 | Alpine.directive("accordion", (el, { value }) => { 5 | if (value === "item") handleItem(Alpine, el); 6 | else if (value === "item-trigger") handleItemTrigger(Alpine, el); 7 | else if (value === "item-content") handleItemContent(Alpine, el); 8 | else handleRoot(Alpine, el); 9 | }).before("bind"); 10 | } 11 | function handleRoot(Alpine, el) { 12 | Alpine.bind(el, { 13 | "x-data"() { 14 | return { 15 | activeAccordion: null, 16 | setActiveAccordion(accordion) { 17 | this.activeAccordion = this.activeAccordion == accordion ? null : accordion; 18 | } 19 | }; 20 | } 21 | }); 22 | } 23 | function handleItem(Alpine, el) { 24 | Alpine.bind(el, { 25 | "x-id"() { 26 | return ["accordion-item"]; 27 | }, 28 | ":id"() { 29 | return this.$id("accordion-item"); 30 | }, 31 | "x-data"() { 32 | return { 33 | accordion: this.$id("accordion-item"), 34 | get active() { 35 | return this.accordion === this.activeAccordion; 36 | } 37 | }; 38 | } 39 | }); 40 | } 41 | function handleItemTrigger(Alpine, el) { 42 | Alpine.bind(el, { 43 | "@click"() { 44 | this.setActiveAccordion(this.accordion); 45 | } 46 | }); 47 | } 48 | function handleItemContent(Alpine, el) { 49 | Alpine.bind(el, { 50 | style: { display: "none" }, 51 | "x-show"() { 52 | return this.activeAccordion === this.accordion; 53 | } 54 | }); 55 | } 56 | 57 | // src/js/plugin/dropdown.js 58 | function dropdown_default(Alpine) { 59 | Alpine.directive("dropdown", (el, { value, modifiers }) => { 60 | if (!value) handleRoot2(Alpine, el); 61 | else if (value === "trigger") handleTrigger(Alpine, el); 62 | else if (value === "menu") handleMenu(Alpine, el, modifiers); 63 | }); 64 | } 65 | function handleRoot2(Alpine, el) { 66 | Alpine.bind(el, { 67 | "x-id"() { 68 | return ["dropdown-trigger", "dropdown-menu"]; 69 | }, 70 | "x-data"() { 71 | return { 72 | isOpen: false 73 | }; 74 | } 75 | }); 76 | } 77 | function handleTrigger(Alpine, el) { 78 | Alpine.bind(el, { 79 | ":id"() { 80 | return this.$id("dropdown-trigger"); 81 | }, 82 | "@click"() { 83 | this.isOpen = !this.isOpen; 84 | }, 85 | "aria-haspopup": "true", 86 | ":aria-expanded"() { 87 | return this.isOpen.toString(); 88 | } 89 | }); 90 | } 91 | function handleMenu(Alpine, el, modifiers) { 92 | let positions = [ 93 | "top", 94 | "top-start", 95 | "top-end", 96 | "right", 97 | "right-start", 98 | "right-end", 99 | "bottom", 100 | "bottom-start", 101 | "bottom-end", 102 | "left", 103 | "left-start", 104 | "left-end" 105 | ]; 106 | let placement = positions.find((i) => modifiers.includes(i)); 107 | let defaultClasses = ""; 108 | let transitionClasses = { 109 | "x-transition:enter": "transition ease-out duration-200", 110 | "x-transition:enter-start": "transform opacity-0 scale-95", 111 | "x-transition:enter-end": "transform opacity-100 scale-100", 112 | "x-transition:leave": "transition ease-in duration-75", 113 | "x-transition:leave-start": "transform opacity-100 scale-100", 114 | "x-transition:leave-end": "transform opacity-0 scale-95" 115 | }; 116 | Alpine.bind(el, { 117 | class: `${defaultClasses}`, 118 | style: { display: "none" }, 119 | ":id"() { 120 | return this.$id("dropdown-menu"); 121 | }, 122 | [`x-anchor${placement ? "." + placement : ""}.offset.10`]() { 123 | return document.getElementById(this.$id("dropdown-trigger")); 124 | }, 125 | "x-show"() { 126 | return this.isOpen; 127 | }, 128 | "@click.outside"() { 129 | this.isOpen = false; 130 | }, 131 | ...transitionClasses 132 | }); 133 | } 134 | 135 | // src/js/plugin/layout.js 136 | function layout_default(Alpine) { 137 | Alpine.store("settings", { 138 | panel: { 139 | isOpen: false, 140 | open(cp) { 141 | this.isOpen = true; 142 | if (typeof cp == "function") { 143 | cp(); 144 | } 145 | }, 146 | close() { 147 | this.isOpen = false; 148 | } 149 | }, 150 | darkMode: { 151 | value: false, 152 | setValue(value) { 153 | this.value = value; 154 | window.localStorage.setItem("dark", value); 155 | document.dispatchEvent(new CustomEvent("scheme:changed", {})); 156 | }, 157 | getValue() { 158 | if (window.localStorage.getItem("dark")) { 159 | return JSON.parse(window.localStorage.getItem("dark")); 160 | } 161 | return !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; 162 | }, 163 | toggle() { 164 | this.value = !this.value; 165 | this.setValue(this.value); 166 | } 167 | }, 168 | colors: { 169 | selectedColor: "cyan", 170 | availableColors: ["cyan", "teal", "green", "fuchsia", "blue", "violet"], 171 | getColor() { 172 | if (window.localStorage.getItem("color")) { 173 | return window.localStorage.getItem("color"); 174 | } 175 | return this.selectedColor; 176 | }, 177 | setColor(color) { 178 | const root = document.documentElement; 179 | root.style.setProperty("--color-primary", `var(--color-${color})`); 180 | root.style.setProperty("--color-primary-50", `var(--color-${color}-50)`); 181 | root.style.setProperty("--color-primary-100", `var(--color-${color}-100)`); 182 | root.style.setProperty("--color-primary-light", `var(--color-${color}-light)`); 183 | root.style.setProperty("--color-primary-lighter", `var(--color-${color}-lighter)`); 184 | root.style.setProperty("--color-primary-dark", `var(--color-${color}-dark)`); 185 | root.style.setProperty("--color-primary-darker", `var(--color-${color}-darker)`); 186 | this.selectedColor = color; 187 | window.localStorage.setItem("color", color); 188 | document.dispatchEvent(new CustomEvent("colors:changed", {})); 189 | } 190 | }, 191 | init() { 192 | this.darkMode.setValue(this.darkMode.getValue()); 193 | this.colors.setColor(this.colors.getColor()); 194 | } 195 | }); 196 | Alpine.store("panels", { 197 | search: {}, 198 | notifications: {} 199 | }); 200 | Alpine.data("setup", () => { 201 | return { 202 | init() { 203 | this.$refs.loading?.classList.add("hidden"); 204 | }, 205 | loading: true, 206 | isSidebarOpen: true, 207 | isNotificationsPanelOpen: false, 208 | openNotificationsPanel() { 209 | this.isNotificationsPanelOpen = true; 210 | this.$nextTick(() => { 211 | this.$refs.notificationsPanel.focus(); 212 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 213 | }); 214 | }, 215 | isSearchPanelOpen: false, 216 | openSearchPanel() { 217 | this.isSearchPanelOpen = true; 218 | this.$nextTick(() => { 219 | this.$refs.searchInput.focus(); 220 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 221 | }); 222 | }, 223 | isMobileSubMenuOpen: false, 224 | openMobileSubMenu() { 225 | this.isMobileSubMenuOpen = true; 226 | this.$nextTick(() => { 227 | this.$refs.mobileSubMenu.focus(); 228 | }); 229 | }, 230 | isMobileMainMenuOpen: false, 231 | openMobileMainMenu() { 232 | this.isMobileMainMenuOpen = true; 233 | this.$nextTick(() => { 234 | this.$refs.mobileMainMenu.focus(); 235 | }); 236 | } 237 | }; 238 | }); 239 | } 240 | 241 | // src/js/plugin/index.js 242 | function plugin_default(Alpine) { 243 | accordion_default(Alpine); 244 | dropdown_default(Alpine); 245 | layout_default(Alpine); 246 | } 247 | 248 | // src/plugins/alpinejs/builds/cdn.js 249 | document.addEventListener("alpine:init", () => { 250 | window.Alpine.plugin(plugin_default); 251 | }); 252 | })(); 253 | -------------------------------------------------------------------------------- /plugins/alpinejs/cdn.min.js: -------------------------------------------------------------------------------- 1 | (()=>{function r(t){t.directive("accordion",(e,{value:i})=>{i==="item"?p(t,e):i==="item-trigger"?f(t,e):i==="item-content"?m(t,e):h(t,e)}).before("bind")}function h(t,e){t.bind(e,{"x-data"(){return{activeAccordion:null,setActiveAccordion(i){this.activeAccordion=this.activeAccordion==i?null:i}}}})}function p(t,e){t.bind(e,{"x-id"(){return["accordion-item"]},":id"(){return this.$id("accordion-item")},"x-data"(){return{accordion:this.$id("accordion-item"),get active(){return this.accordion===this.activeAccordion}}}})}function f(t,e){t.bind(e,{"@click"(){this.setActiveAccordion(this.accordion)}})}function m(t,e){t.bind(e,{style:{display:"none"},"x-show"(){return this.activeAccordion===this.accordion}})}function s(t){t.directive("dropdown",(e,{value:i,modifiers:o})=>{i?i==="trigger"?b(t,e):i==="menu"&&y(t,e,o):g(t,e)})}function g(t,e){t.bind(e,{"x-id"(){return["dropdown-trigger","dropdown-menu"]},"x-data"(){return{isOpen:!1}}})}function b(t,e){t.bind(e,{":id"(){return this.$id("dropdown-trigger")},"@click"(){this.isOpen=!this.isOpen},"aria-haspopup":"true",":aria-expanded"(){return this.isOpen.toString()}})}function y(t,e,i){let n=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"].find(u=>i.includes(u)),c="",d={"x-transition:enter":"transition ease-out duration-200","x-transition:enter-start":"transform opacity-0 scale-95","x-transition:enter-end":"transform opacity-100 scale-100","x-transition:leave":"transition ease-in duration-75","x-transition:leave-start":"transform opacity-100 scale-100","x-transition:leave-end":"transform opacity-0 scale-95"};t.bind(e,{class:`${c}`,style:{display:"none"},":id"(){return this.$id("dropdown-menu")},[`x-anchor${n?"."+n:""}.offset.10`](){return document.getElementById(this.$id("dropdown-trigger"))},"x-show"(){return this.isOpen},"@click.outside"(){this.isOpen=!1},...d})}function a(t){t.store("settings",{panel:{isOpen:!1,open(e){this.isOpen=!0,typeof e=="function"&&e()},close(){this.isOpen=!1}},darkMode:{value:!1,setValue(e){this.value=e,window.localStorage.setItem("dark",e),document.dispatchEvent(new CustomEvent("scheme:changed",{}))},getValue(){return window.localStorage.getItem("dark")?JSON.parse(window.localStorage.getItem("dark")):!!window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches},toggle(){this.value=!this.value,this.setValue(this.value)}},colors:{selectedColor:"cyan",availableColors:["cyan","teal","green","fuchsia","blue","violet"],getColor(){return window.localStorage.getItem("color")?window.localStorage.getItem("color"):this.selectedColor},setColor(e){let i=document.documentElement;i.style.setProperty("--color-primary",`var(--color-${e})`),i.style.setProperty("--color-primary-50",`var(--color-${e}-50)`),i.style.setProperty("--color-primary-100",`var(--color-${e}-100)`),i.style.setProperty("--color-primary-light",`var(--color-${e}-light)`),i.style.setProperty("--color-primary-lighter",`var(--color-${e}-lighter)`),i.style.setProperty("--color-primary-dark",`var(--color-${e}-dark)`),i.style.setProperty("--color-primary-darker",`var(--color-${e}-darker)`),this.selectedColor=e,window.localStorage.setItem("color",e),document.dispatchEvent(new CustomEvent("colors:changed",{}))}},init(){this.darkMode.setValue(this.darkMode.getValue()),this.colors.setColor(this.colors.getColor())}}),t.store("panels",{search:{},notifications:{}}),t.data("setup",()=>({init(){this.$refs.loading?.classList.add("hidden")},loading:!0,isSidebarOpen:!0,isNotificationsPanelOpen:!1,openNotificationsPanel(){this.isNotificationsPanelOpen=!0,this.$nextTick(()=>{this.$refs.notificationsPanel.focus(),this.isMobileSubMenuOpen&&(this.isMobileSubMenuOpen=!1)})},isSearchPanelOpen:!1,openSearchPanel(){this.isSearchPanelOpen=!0,this.$nextTick(()=>{this.$refs.searchInput.focus(),this.isMobileSubMenuOpen&&(this.isMobileSubMenuOpen=!1)})},isMobileSubMenuOpen:!1,openMobileSubMenu(){this.isMobileSubMenuOpen=!0,this.$nextTick(()=>{this.$refs.mobileSubMenu.focus()})},isMobileMainMenuOpen:!1,openMobileMainMenu(){this.isMobileMainMenuOpen=!0,this.$nextTick(()=>{this.$refs.mobileMainMenu.focus()})}}))}function l(t){r(t),s(t),a(t)}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(l)});})(); 2 | -------------------------------------------------------------------------------- /plugins/alpinejs/module.cjs.js: -------------------------------------------------------------------------------- 1 | var __defProp = Object.defineProperty; 2 | var __getOwnPropDesc = Object.getOwnPropertyDescriptor; 3 | var __getOwnPropNames = Object.getOwnPropertyNames; 4 | var __hasOwnProp = Object.prototype.hasOwnProperty; 5 | var __export = (target, all) => { 6 | for (var name in all) 7 | __defProp(target, name, { get: all[name], enumerable: true }); 8 | }; 9 | var __copyProps = (to, from, except, desc) => { 10 | if (from && typeof from === "object" || typeof from === "function") { 11 | for (let key of __getOwnPropNames(from)) 12 | if (!__hasOwnProp.call(to, key) && key !== except) 13 | __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); 14 | } 15 | return to; 16 | }; 17 | var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); 18 | 19 | // src/plugins/alpinejs/builds/module.js 20 | var module_exports = {}; 21 | __export(module_exports, { 22 | default: () => module_default 23 | }); 24 | module.exports = __toCommonJS(module_exports); 25 | 26 | // src/js/plugin/accordion.js 27 | function accordion_default(Alpine) { 28 | Alpine.directive("accordion", (el, { value }) => { 29 | if (value === "item") handleItem(Alpine, el); 30 | else if (value === "item-trigger") handleItemTrigger(Alpine, el); 31 | else if (value === "item-content") handleItemContent(Alpine, el); 32 | else handleRoot(Alpine, el); 33 | }).before("bind"); 34 | } 35 | function handleRoot(Alpine, el) { 36 | Alpine.bind(el, { 37 | "x-data"() { 38 | return { 39 | activeAccordion: null, 40 | setActiveAccordion(accordion) { 41 | this.activeAccordion = this.activeAccordion == accordion ? null : accordion; 42 | } 43 | }; 44 | } 45 | }); 46 | } 47 | function handleItem(Alpine, el) { 48 | Alpine.bind(el, { 49 | "x-id"() { 50 | return ["accordion-item"]; 51 | }, 52 | ":id"() { 53 | return this.$id("accordion-item"); 54 | }, 55 | "x-data"() { 56 | return { 57 | accordion: this.$id("accordion-item"), 58 | get active() { 59 | return this.accordion === this.activeAccordion; 60 | } 61 | }; 62 | } 63 | }); 64 | } 65 | function handleItemTrigger(Alpine, el) { 66 | Alpine.bind(el, { 67 | "@click"() { 68 | this.setActiveAccordion(this.accordion); 69 | } 70 | }); 71 | } 72 | function handleItemContent(Alpine, el) { 73 | Alpine.bind(el, { 74 | style: { display: "none" }, 75 | "x-show"() { 76 | return this.activeAccordion === this.accordion; 77 | } 78 | }); 79 | } 80 | 81 | // src/js/plugin/dropdown.js 82 | function dropdown_default(Alpine) { 83 | Alpine.directive("dropdown", (el, { value, modifiers }) => { 84 | if (!value) handleRoot2(Alpine, el); 85 | else if (value === "trigger") handleTrigger(Alpine, el); 86 | else if (value === "menu") handleMenu(Alpine, el, modifiers); 87 | }); 88 | } 89 | function handleRoot2(Alpine, el) { 90 | Alpine.bind(el, { 91 | "x-id"() { 92 | return ["dropdown-trigger", "dropdown-menu"]; 93 | }, 94 | "x-data"() { 95 | return { 96 | isOpen: false 97 | }; 98 | } 99 | }); 100 | } 101 | function handleTrigger(Alpine, el) { 102 | Alpine.bind(el, { 103 | ":id"() { 104 | return this.$id("dropdown-trigger"); 105 | }, 106 | "@click"() { 107 | this.isOpen = !this.isOpen; 108 | }, 109 | "aria-haspopup": "true", 110 | ":aria-expanded"() { 111 | return this.isOpen.toString(); 112 | } 113 | }); 114 | } 115 | function handleMenu(Alpine, el, modifiers) { 116 | let positions = [ 117 | "top", 118 | "top-start", 119 | "top-end", 120 | "right", 121 | "right-start", 122 | "right-end", 123 | "bottom", 124 | "bottom-start", 125 | "bottom-end", 126 | "left", 127 | "left-start", 128 | "left-end" 129 | ]; 130 | let placement = positions.find((i) => modifiers.includes(i)); 131 | let defaultClasses = ""; 132 | let transitionClasses = { 133 | "x-transition:enter": "transition ease-out duration-200", 134 | "x-transition:enter-start": "transform opacity-0 scale-95", 135 | "x-transition:enter-end": "transform opacity-100 scale-100", 136 | "x-transition:leave": "transition ease-in duration-75", 137 | "x-transition:leave-start": "transform opacity-100 scale-100", 138 | "x-transition:leave-end": "transform opacity-0 scale-95" 139 | }; 140 | Alpine.bind(el, { 141 | class: `${defaultClasses}`, 142 | style: { display: "none" }, 143 | ":id"() { 144 | return this.$id("dropdown-menu"); 145 | }, 146 | [`x-anchor${placement ? "." + placement : ""}.offset.10`]() { 147 | return document.getElementById(this.$id("dropdown-trigger")); 148 | }, 149 | "x-show"() { 150 | return this.isOpen; 151 | }, 152 | "@click.outside"() { 153 | this.isOpen = false; 154 | }, 155 | ...transitionClasses 156 | }); 157 | } 158 | 159 | // src/js/plugin/layout.js 160 | function layout_default(Alpine) { 161 | Alpine.store("settings", { 162 | panel: { 163 | isOpen: false, 164 | open(cp) { 165 | this.isOpen = true; 166 | if (typeof cp == "function") { 167 | cp(); 168 | } 169 | }, 170 | close() { 171 | this.isOpen = false; 172 | } 173 | }, 174 | darkMode: { 175 | value: false, 176 | setValue(value) { 177 | this.value = value; 178 | window.localStorage.setItem("dark", value); 179 | document.dispatchEvent(new CustomEvent("scheme:changed", {})); 180 | }, 181 | getValue() { 182 | if (window.localStorage.getItem("dark")) { 183 | return JSON.parse(window.localStorage.getItem("dark")); 184 | } 185 | return !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; 186 | }, 187 | toggle() { 188 | this.value = !this.value; 189 | this.setValue(this.value); 190 | } 191 | }, 192 | colors: { 193 | selectedColor: "cyan", 194 | availableColors: ["cyan", "teal", "green", "fuchsia", "blue", "violet"], 195 | getColor() { 196 | if (window.localStorage.getItem("color")) { 197 | return window.localStorage.getItem("color"); 198 | } 199 | return this.selectedColor; 200 | }, 201 | setColor(color) { 202 | const root = document.documentElement; 203 | root.style.setProperty("--color-primary", `var(--color-${color})`); 204 | root.style.setProperty("--color-primary-50", `var(--color-${color}-50)`); 205 | root.style.setProperty("--color-primary-100", `var(--color-${color}-100)`); 206 | root.style.setProperty("--color-primary-light", `var(--color-${color}-light)`); 207 | root.style.setProperty("--color-primary-lighter", `var(--color-${color}-lighter)`); 208 | root.style.setProperty("--color-primary-dark", `var(--color-${color}-dark)`); 209 | root.style.setProperty("--color-primary-darker", `var(--color-${color}-darker)`); 210 | this.selectedColor = color; 211 | window.localStorage.setItem("color", color); 212 | document.dispatchEvent(new CustomEvent("colors:changed", {})); 213 | } 214 | }, 215 | init() { 216 | this.darkMode.setValue(this.darkMode.getValue()); 217 | this.colors.setColor(this.colors.getColor()); 218 | } 219 | }); 220 | Alpine.store("panels", { 221 | search: {}, 222 | notifications: {} 223 | }); 224 | Alpine.data("setup", () => { 225 | return { 226 | init() { 227 | var _a; 228 | (_a = this.$refs.loading) == null ? void 0 : _a.classList.add("hidden"); 229 | }, 230 | loading: true, 231 | isSidebarOpen: true, 232 | isNotificationsPanelOpen: false, 233 | openNotificationsPanel() { 234 | this.isNotificationsPanelOpen = true; 235 | this.$nextTick(() => { 236 | this.$refs.notificationsPanel.focus(); 237 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 238 | }); 239 | }, 240 | isSearchPanelOpen: false, 241 | openSearchPanel() { 242 | this.isSearchPanelOpen = true; 243 | this.$nextTick(() => { 244 | this.$refs.searchInput.focus(); 245 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 246 | }); 247 | }, 248 | isMobileSubMenuOpen: false, 249 | openMobileSubMenu() { 250 | this.isMobileSubMenuOpen = true; 251 | this.$nextTick(() => { 252 | this.$refs.mobileSubMenu.focus(); 253 | }); 254 | }, 255 | isMobileMainMenuOpen: false, 256 | openMobileMainMenu() { 257 | this.isMobileMainMenuOpen = true; 258 | this.$nextTick(() => { 259 | this.$refs.mobileMainMenu.focus(); 260 | }); 261 | } 262 | }; 263 | }); 264 | } 265 | 266 | // src/js/plugin/index.js 267 | function plugin_default(Alpine) { 268 | accordion_default(Alpine); 269 | dropdown_default(Alpine); 270 | layout_default(Alpine); 271 | } 272 | 273 | // src/plugins/alpinejs/builds/module.js 274 | var module_default = plugin_default; 275 | -------------------------------------------------------------------------------- /plugins/alpinejs/module.esm.js: -------------------------------------------------------------------------------- 1 | // src/js/plugin/accordion.js 2 | function accordion_default(Alpine) { 3 | Alpine.directive("accordion", (el, { value }) => { 4 | if (value === "item") handleItem(Alpine, el); 5 | else if (value === "item-trigger") handleItemTrigger(Alpine, el); 6 | else if (value === "item-content") handleItemContent(Alpine, el); 7 | else handleRoot(Alpine, el); 8 | }).before("bind"); 9 | } 10 | function handleRoot(Alpine, el) { 11 | Alpine.bind(el, { 12 | "x-data"() { 13 | return { 14 | activeAccordion: null, 15 | setActiveAccordion(accordion) { 16 | this.activeAccordion = this.activeAccordion == accordion ? null : accordion; 17 | } 18 | }; 19 | } 20 | }); 21 | } 22 | function handleItem(Alpine, el) { 23 | Alpine.bind(el, { 24 | "x-id"() { 25 | return ["accordion-item"]; 26 | }, 27 | ":id"() { 28 | return this.$id("accordion-item"); 29 | }, 30 | "x-data"() { 31 | return { 32 | accordion: this.$id("accordion-item"), 33 | get active() { 34 | return this.accordion === this.activeAccordion; 35 | } 36 | }; 37 | } 38 | }); 39 | } 40 | function handleItemTrigger(Alpine, el) { 41 | Alpine.bind(el, { 42 | "@click"() { 43 | this.setActiveAccordion(this.accordion); 44 | } 45 | }); 46 | } 47 | function handleItemContent(Alpine, el) { 48 | Alpine.bind(el, { 49 | style: { display: "none" }, 50 | "x-show"() { 51 | return this.activeAccordion === this.accordion; 52 | } 53 | }); 54 | } 55 | 56 | // src/js/plugin/dropdown.js 57 | function dropdown_default(Alpine) { 58 | Alpine.directive("dropdown", (el, { value, modifiers }) => { 59 | if (!value) handleRoot2(Alpine, el); 60 | else if (value === "trigger") handleTrigger(Alpine, el); 61 | else if (value === "menu") handleMenu(Alpine, el, modifiers); 62 | }); 63 | } 64 | function handleRoot2(Alpine, el) { 65 | Alpine.bind(el, { 66 | "x-id"() { 67 | return ["dropdown-trigger", "dropdown-menu"]; 68 | }, 69 | "x-data"() { 70 | return { 71 | isOpen: false 72 | }; 73 | } 74 | }); 75 | } 76 | function handleTrigger(Alpine, el) { 77 | Alpine.bind(el, { 78 | ":id"() { 79 | return this.$id("dropdown-trigger"); 80 | }, 81 | "@click"() { 82 | this.isOpen = !this.isOpen; 83 | }, 84 | "aria-haspopup": "true", 85 | ":aria-expanded"() { 86 | return this.isOpen.toString(); 87 | } 88 | }); 89 | } 90 | function handleMenu(Alpine, el, modifiers) { 91 | let positions = [ 92 | "top", 93 | "top-start", 94 | "top-end", 95 | "right", 96 | "right-start", 97 | "right-end", 98 | "bottom", 99 | "bottom-start", 100 | "bottom-end", 101 | "left", 102 | "left-start", 103 | "left-end" 104 | ]; 105 | let placement = positions.find((i) => modifiers.includes(i)); 106 | let defaultClasses = ""; 107 | let transitionClasses = { 108 | "x-transition:enter": "transition ease-out duration-200", 109 | "x-transition:enter-start": "transform opacity-0 scale-95", 110 | "x-transition:enter-end": "transform opacity-100 scale-100", 111 | "x-transition:leave": "transition ease-in duration-75", 112 | "x-transition:leave-start": "transform opacity-100 scale-100", 113 | "x-transition:leave-end": "transform opacity-0 scale-95" 114 | }; 115 | Alpine.bind(el, { 116 | class: `${defaultClasses}`, 117 | style: { display: "none" }, 118 | ":id"() { 119 | return this.$id("dropdown-menu"); 120 | }, 121 | [`x-anchor${placement ? "." + placement : ""}.offset.10`]() { 122 | return document.getElementById(this.$id("dropdown-trigger")); 123 | }, 124 | "x-show"() { 125 | return this.isOpen; 126 | }, 127 | "@click.outside"() { 128 | this.isOpen = false; 129 | }, 130 | ...transitionClasses 131 | }); 132 | } 133 | 134 | // src/js/plugin/layout.js 135 | function layout_default(Alpine) { 136 | Alpine.store("settings", { 137 | panel: { 138 | isOpen: false, 139 | open(cp) { 140 | this.isOpen = true; 141 | if (typeof cp == "function") { 142 | cp(); 143 | } 144 | }, 145 | close() { 146 | this.isOpen = false; 147 | } 148 | }, 149 | darkMode: { 150 | value: false, 151 | setValue(value) { 152 | this.value = value; 153 | window.localStorage.setItem("dark", value); 154 | document.dispatchEvent(new CustomEvent("scheme:changed", {})); 155 | }, 156 | getValue() { 157 | if (window.localStorage.getItem("dark")) { 158 | return JSON.parse(window.localStorage.getItem("dark")); 159 | } 160 | return !!window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; 161 | }, 162 | toggle() { 163 | this.value = !this.value; 164 | this.setValue(this.value); 165 | } 166 | }, 167 | colors: { 168 | selectedColor: "cyan", 169 | availableColors: ["cyan", "teal", "green", "fuchsia", "blue", "violet"], 170 | getColor() { 171 | if (window.localStorage.getItem("color")) { 172 | return window.localStorage.getItem("color"); 173 | } 174 | return this.selectedColor; 175 | }, 176 | setColor(color) { 177 | const root = document.documentElement; 178 | root.style.setProperty("--color-primary", `var(--color-${color})`); 179 | root.style.setProperty("--color-primary-50", `var(--color-${color}-50)`); 180 | root.style.setProperty("--color-primary-100", `var(--color-${color}-100)`); 181 | root.style.setProperty("--color-primary-light", `var(--color-${color}-light)`); 182 | root.style.setProperty("--color-primary-lighter", `var(--color-${color}-lighter)`); 183 | root.style.setProperty("--color-primary-dark", `var(--color-${color}-dark)`); 184 | root.style.setProperty("--color-primary-darker", `var(--color-${color}-darker)`); 185 | this.selectedColor = color; 186 | window.localStorage.setItem("color", color); 187 | document.dispatchEvent(new CustomEvent("colors:changed", {})); 188 | } 189 | }, 190 | init() { 191 | this.darkMode.setValue(this.darkMode.getValue()); 192 | this.colors.setColor(this.colors.getColor()); 193 | } 194 | }); 195 | Alpine.store("panels", { 196 | search: {}, 197 | notifications: {} 198 | }); 199 | Alpine.data("setup", () => { 200 | return { 201 | init() { 202 | this.$refs.loading?.classList.add("hidden"); 203 | }, 204 | loading: true, 205 | isSidebarOpen: true, 206 | isNotificationsPanelOpen: false, 207 | openNotificationsPanel() { 208 | this.isNotificationsPanelOpen = true; 209 | this.$nextTick(() => { 210 | this.$refs.notificationsPanel.focus(); 211 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 212 | }); 213 | }, 214 | isSearchPanelOpen: false, 215 | openSearchPanel() { 216 | this.isSearchPanelOpen = true; 217 | this.$nextTick(() => { 218 | this.$refs.searchInput.focus(); 219 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false; 220 | }); 221 | }, 222 | isMobileSubMenuOpen: false, 223 | openMobileSubMenu() { 224 | this.isMobileSubMenuOpen = true; 225 | this.$nextTick(() => { 226 | this.$refs.mobileSubMenu.focus(); 227 | }); 228 | }, 229 | isMobileMainMenuOpen: false, 230 | openMobileMainMenu() { 231 | this.isMobileMainMenuOpen = true; 232 | this.$nextTick(() => { 233 | this.$refs.mobileMainMenu.focus(); 234 | }); 235 | } 236 | }; 237 | }); 238 | } 239 | 240 | // src/js/plugin/index.js 241 | function plugin_default(Alpine) { 242 | accordion_default(Alpine); 243 | dropdown_default(Alpine); 244 | layout_default(Alpine); 245 | } 246 | 247 | // src/plugins/alpinejs/builds/module.js 248 | var module_default = plugin_default; 249 | export { 250 | module_default as default 251 | }; 252 | -------------------------------------------------------------------------------- /plugins/tailwindcss.js: -------------------------------------------------------------------------------- 1 | var r=require("tailwindcss/colors"),s=require("tailwindcss/plugin"),o={colorVars:{"--light":"#edf2f9","--dark":"#152e4d","--darker":"#12263f","--color-primary":"var(--color-fuchsia)","--color-primary-50":"var(--color-fuchsia-50)","--color-primary-100":"var(--color-fuchsia-100)","--color-primary-light":"var(--color-fuchsia-light)","--color-primary-lighter":"var(--color-fuchsia-lighter)","--color-primary-dark":"var(--color-fuchsia-dark)","--color-primary-darker":"var(--color-fuchsia-darker)","--color-green":"#16a34a","--color-green-50":"#f0fdf4","--color-green-100":"#dcfce7","--color-green-light":"#22c55e","--color-green-lighter":"#4ade80","--color-green-dark":"#15803d","--color-green-darker":"#166534","--color-blue":"#2563eb","--color-blue-50":"#eff6ff","--color-blue-100":"#dbeafe","--color-blue-light":"#3b82f6","--color-blue-lighter":"#60a5fa","--color-blue-dark":"#1d4ed8","--color-blue-darker":"#1e40af","--color-cyan":"#0891b2","--color-cyan-50":"#ecfeff","--color-cyan-100":"#cffafe","--color-cyan-light":"#06b6d4","--color-cyan-lighter":"#22d3ee","--color-cyan-dark":"#0e7490","--color-cyan-darker":"#155e75","--color-teal":"#0d9488","--color-teal-50":"#f0fdfa","--color-teal-100":"#ccfbf1","--color-teal-light":"#14b8a6","--color-teal-lighter":"#2dd4bf","--color-teal-dark":"#0f766e","--color-teal-darker":"#115e59","--color-fuchsia":"#c026d3","--color-fuchsia-50":"#fdf4ff","--color-fuchsia-100":"#fae8ff","--color-fuchsia-light":"#d946ef","--color-fuchsia-lighter":"#e879f9","--color-fuchsia-dark":"#a21caf","--color-fuchsia-darker":"#86198f","--color-violet":"#7c3aed","--color-violet-50":"#f5f3ff","--color-violet-100":"#ede9fe","--color-violet-light":"#8b5cf6","--color-violet-lighter":"#a78bfa","--color-violet-dark":"#6d28d9","--color-violet-darker":"#5b21b6"},colors:{light:"var(--light)",dark:"var(--dark)",darker:"var(--darker)",primary:{DEFAULT:"var(--color-primary)",50:"var(--color-primary-50)",100:"var(--color-primary-100)",light:"var(--color-primary-light)",lighter:"var(--color-primary-lighter)",dark:"var(--color-primary-dark)",darker:"var(--color-primary-darker)"},secondary:{DEFAULT:r.fuchsia[600],50:r.fuchsia[50],100:r.fuchsia[100],light:r.fuchsia[500],lighter:r.fuchsia[400],dark:r.fuchsia[700],darker:r.fuchsia[800]},success:{DEFAULT:r.green[600],50:r.green[50],100:r.green[100],light:r.green[500],lighter:r.green[400],dark:r.green[700],darker:r.green[800]},warning:{DEFAULT:r.orange[600],50:r.orange[50],100:r.orange[100],light:r.orange[500],lighter:r.orange[400],dark:r.orange[700],darker:r.orange[800]},danger:{DEFAULT:r.red[600],50:r.red[50],100:r.red[100],light:r.red[500],lighter:r.red[400],dark:r.red[700],darker:r.red[800]},info:{DEFAULT:r.cyan[600],50:r.cyan[50],100:r.cyan[100],light:r.cyan[500],lighter:r.cyan[400],dark:r.cyan[700],darker:r.cyan[800]}}};module.exports=s.withOptions(function(a={}){let{colorVars:e=o.colorVars}=a;return function({addBase:l}){l({[[":root"]]:e})}},function(a={}){let{lightColor:e=o.colors.light,darkColor:l=o.colors.dark,darkerColor:c=o.colors.darker,primaryColors:i=o.colors.primary,secondaryColors:d=o.colors.secondary,successColors:f=o.colors.success,warningColors:n=o.colors.warning,dangerColors:t=o.colors.danger,infoColors:g=o.colors.info}=a;return{theme:{extend:{colors:{light:e,dark:l,darker:c,primary:i,secondary:d,success:f,warning:n,danger:t,info:g}}}}}); 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/build/js/script.js: -------------------------------------------------------------------------------- 1 | // All javascript code in this project for now is just for demo DON'T RELY ON IT 2 | 3 | const random = (max = 100) => { 4 | return Math.round(Math.random() * max) + 20 5 | } 6 | 7 | const randomData = () => { 8 | return [ 9 | random(), 10 | random(), 11 | random(), 12 | random(), 13 | random(), 14 | random(), 15 | random(), 16 | random(), 17 | random(), 18 | random(), 19 | random(), 20 | random(), 21 | ] 22 | } 23 | 24 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 25 | 26 | const cssColors = (color) => { 27 | return getComputedStyle(document.documentElement).getPropertyValue(color) 28 | } 29 | 30 | const getColor = () => { 31 | return window.localStorage.getItem('color') ?? 'cyan' 32 | } 33 | 34 | const colors = { 35 | primary: cssColors(`--color-${getColor()}`), 36 | primaryLight: cssColors(`--color-${getColor()}-light`), 37 | primaryLighter: cssColors(`--color-${getColor()}-lighter`), 38 | primaryDark: cssColors(`--color-${getColor()}-dark`), 39 | primaryDarker: cssColors(`--color-${getColor()}-darker`), 40 | } 41 | 42 | const barChart = new Chart(document.getElementById('barChart'), { 43 | type: 'bar', 44 | data: { 45 | labels: months, 46 | datasets: [ 47 | { 48 | data: randomData(), 49 | backgroundColor: colors.primary, 50 | hoverBackgroundColor: colors.primaryDark, 51 | }, 52 | ], 53 | }, 54 | options: { 55 | scales: { 56 | yAxes: [ 57 | { 58 | gridLines: false, 59 | ticks: { 60 | beginAtZero: true, 61 | stepSize: 50, 62 | fontSize: 12, 63 | fontColor: '#97a4af', 64 | fontFamily: 'Open Sans, sans-serif', 65 | padding: 10, 66 | }, 67 | }, 68 | ], 69 | xAxes: [ 70 | { 71 | gridLines: false, 72 | ticks: { 73 | fontSize: 12, 74 | fontColor: '#97a4af', 75 | fontFamily: 'Open Sans, sans-serif', 76 | padding: 5, 77 | }, 78 | categoryPercentage: 0.5, 79 | maxBarThickness: '10', 80 | }, 81 | ], 82 | }, 83 | cornerRadius: 2, 84 | maintainAspectRatio: false, 85 | legend: { 86 | display: false, 87 | }, 88 | }, 89 | }) 90 | 91 | const doughnutChart = new Chart(document.getElementById('doughnutChart'), { 92 | type: 'doughnut', 93 | data: { 94 | labels: ['Oct', 'Nov', 'Dec'], 95 | datasets: [ 96 | { 97 | data: [random(), random(), random()], 98 | backgroundColor: [colors.primary, colors.primaryLighter, colors.primaryLight], 99 | hoverBackgroundColor: colors.primaryDark, 100 | borderWidth: 0, 101 | weight: 0.5, 102 | }, 103 | ], 104 | }, 105 | options: { 106 | responsive: true, 107 | maintainAspectRatio: false, 108 | legend: { 109 | position: 'bottom', 110 | }, 111 | 112 | title: { 113 | display: false, 114 | }, 115 | animation: { 116 | animateScale: true, 117 | animateRotate: true, 118 | }, 119 | }, 120 | }) 121 | 122 | const activeUsersChart = new Chart(document.getElementById('activeUsersChart'), { 123 | type: 'bar', 124 | data: { 125 | labels: [...randomData(), ...randomData()], 126 | datasets: [ 127 | { 128 | data: [...randomData(), ...randomData()], 129 | backgroundColor: colors.primary, 130 | borderWidth: 0, 131 | categoryPercentage: 1, 132 | }, 133 | ], 134 | }, 135 | options: { 136 | scales: { 137 | yAxes: [ 138 | { 139 | display: false, 140 | gridLines: false, 141 | }, 142 | ], 143 | xAxes: [ 144 | { 145 | display: false, 146 | gridLines: false, 147 | }, 148 | ], 149 | ticks: { 150 | padding: 10, 151 | }, 152 | }, 153 | cornerRadius: 2, 154 | maintainAspectRatio: false, 155 | legend: { 156 | display: false, 157 | }, 158 | tooltips: { 159 | prefix: 'Users', 160 | bodySpacing: 4, 161 | footerSpacing: 4, 162 | hasIndicator: true, 163 | mode: 'index', 164 | intersect: true, 165 | }, 166 | hover: { 167 | mode: 'nearest', 168 | intersect: true, 169 | }, 170 | }, 171 | }) 172 | 173 | const lineChart = new Chart(document.getElementById('lineChart'), { 174 | type: 'line', 175 | data: { 176 | labels: months, 177 | datasets: [ 178 | { 179 | data: randomData(), 180 | fill: false, 181 | borderColor: colors.primary, 182 | borderWidth: 2, 183 | pointRadius: 0, 184 | pointHoverRadius: 0, 185 | }, 186 | ], 187 | }, 188 | options: { 189 | responsive: true, 190 | scales: { 191 | yAxes: [ 192 | { 193 | gridLines: false, 194 | ticks: { 195 | beginAtZero: false, 196 | stepSize: 50, 197 | fontSize: 12, 198 | fontColor: '#97a4af', 199 | fontFamily: 'Open Sans, sans-serif', 200 | padding: 20, 201 | }, 202 | }, 203 | ], 204 | xAxes: [ 205 | { 206 | gridLines: false, 207 | }, 208 | ], 209 | }, 210 | maintainAspectRatio: false, 211 | legend: { 212 | display: false, 213 | }, 214 | tooltips: { 215 | hasIndicator: true, 216 | intersect: false, 217 | }, 218 | }, 219 | }) 220 | 221 | let randomUserCount = 0 222 | 223 | const usersCount = document.getElementById('usersCount') 224 | 225 | const fakeUsersCount = () => { 226 | randomUserCount = random() 227 | activeUsersChart.data.datasets[0].data.push(randomUserCount) 228 | activeUsersChart.data.datasets[0].data.splice(0, 1) 229 | activeUsersChart.update() 230 | usersCount.innerText = randomUserCount 231 | } 232 | 233 | setInterval(() => { 234 | fakeUsersCount() 235 | }, 1000) -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kamona-WD/kwd-dashboard/76996c9aeae690aebac490309fabfb4bb9b3c029/public/favicon.ico -------------------------------------------------------------------------------- /public/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kamona-WD/kwd-dashboard/76996c9aeae690aebac490309fabfb4bb9b3c029/public/images/1.png -------------------------------------------------------------------------------- /public/images/avatar.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kamona-WD/kwd-dashboard/76996c9aeae690aebac490309fabfb4bb9b3c029/public/images/avatar.jpeg -------------------------------------------------------------------------------- /screens/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kamona-WD/kwd-dashboard/76996c9aeae690aebac490309fabfb4bb9b3c029/screens/dark.png -------------------------------------------------------------------------------- /screens/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kamona-WD/kwd-dashboard/76996c9aeae690aebac490309fabfb4bb9b3c029/screens/light.png -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | -------------------------------------------------------------------------------- /src/data/index.js: -------------------------------------------------------------------------------- 1 | import pkg from '../../package.json' 2 | import home from './pages/home' 3 | import blank from './pages/blank' 4 | import tables from './pages/tables' 5 | import formElements from './pages/form-elements' 6 | import navigationLinks from './navigationLinks' 7 | 8 | export default { 9 | title: 'K-WD Dashboard', 10 | 11 | banner: ``, 12 | 13 | navigationLinks, 14 | 15 | pages: { 16 | home, 17 | blank, 18 | tables, 19 | formElements, 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /src/data/navigationLinks.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | title: 'Dashboard', 4 | url: '/', 5 | iconName: 'tabler--home', 6 | }, 7 | // { 8 | // title: 'Components', 9 | // url: null, 10 | // iconName: 'tabler--grid', 11 | // links: [ 12 | // { 13 | // title: 'Form elements', 14 | // url: 'components/form-elements.html', 15 | // }, 16 | // { 17 | // title: 'Tables', 18 | // url: 'components/tables.html', 19 | // }, 20 | // ], 21 | // }, 22 | { 23 | title: 'Pages', 24 | url: null, 25 | iconName: 'tabler--file', 26 | links: [ 27 | { 28 | title: '404', 29 | url: 'pages/404.html', 30 | }, 31 | { 32 | title: '500', 33 | url: 'pages/500.html', 34 | }, 35 | { 36 | title: 'Blank', 37 | url: 'pages/blank.html', 38 | }, 39 | ], 40 | }, 41 | { 42 | title: 'Layouts', 43 | url: null, 44 | iconName: 'tabler--grid-pattern', 45 | links: [ 46 | { 47 | title: 'Two columns sidebar', 48 | url: 'layouts/two-columns-sidebar.html', 49 | }, 50 | { 51 | title: 'Mini & Column sidebar', 52 | url: 'layouts/mini-plus-one-column-sidebar.html', 53 | }, 54 | { 55 | title: 'Mini sidebar', 56 | url: 'layouts/mini-sidebar.html', 57 | }, 58 | ], 59 | }, 60 | { 61 | title: 'Authentication', 62 | url: null, 63 | iconName: 'tabler--shield', 64 | links: [ 65 | { 66 | title: 'Login', 67 | url: 'auth/login.html', 68 | }, 69 | { 70 | title: 'Register', 71 | url: 'auth/register.html', 72 | }, 73 | { 74 | title: 'Forgot password', 75 | url: 'auth/forgot-password.html', 76 | }, 77 | { 78 | title: 'Reset password', 79 | url: 'auth/reset-password.html', 80 | }, 81 | ], 82 | }, 83 | ] 84 | -------------------------------------------------------------------------------- /src/data/pages/blank.js: -------------------------------------------------------------------------------- 1 | export default { 2 | breadcrumb: [ 3 | { 4 | title: 'Home', 5 | icon: 'tabler--home-filled', 6 | url: '/', 7 | }, 8 | { 9 | title: 'Pages', 10 | icon: 'tabler--file', 11 | url: '#', 12 | }, 13 | { 14 | title: 'Blank', 15 | icon: null, 16 | url: null, 17 | }, 18 | ], 19 | } 20 | -------------------------------------------------------------------------------- /src/data/pages/form-elements.js: -------------------------------------------------------------------------------- 1 | export default { 2 | breadcrumb: [ 3 | { 4 | title: 'Home', 5 | icon: 'tabler--home-filled', 6 | url: '/', 7 | }, 8 | { 9 | title: 'Components', 10 | icon: 'tabler--grid', 11 | url: '#', 12 | }, 13 | { 14 | title: 'Form Elements', 15 | icon: null, 16 | url: null, 17 | }, 18 | ], 19 | } 20 | -------------------------------------------------------------------------------- /src/data/pages/home.js: -------------------------------------------------------------------------------- 1 | export default { 2 | breadcrumb: [ 3 | { 4 | title: 'Home', 5 | icon: 'tabler--home-filled', 6 | url: null, 7 | }, 8 | ], 9 | 10 | simpleStatistics: [ 11 | { 12 | title: 'Sales', 13 | icon: 'tabler--currency-dollar', 14 | total: '$300,000', 15 | percentage: '+4.4%', 16 | status: 'up', 17 | }, 18 | { 19 | title: 'Customers', 20 | icon: 'tabler--users-group', 21 | total: '50,021', 22 | percentage: '-2.6%', 23 | status: 'down', 24 | }, 25 | { 26 | title: 'Orders', 27 | icon: 'tabler--shopping-cart', 28 | total: '45,021', 29 | percentage: '3.1%', 30 | status: '', 31 | }, 32 | { 33 | title: 'Tickets', 34 | icon: 'tabler--ticket', 35 | total: '20,516', 36 | percentage: '3.1%', 37 | status: 'up', 38 | }, 39 | ], 40 | 41 | latestCustomers: [ 42 | { 43 | name: 'Mamie Wiza', 44 | email: 'Clovis88@hotmail.com', 45 | status: 0, 46 | date: 'Jan 13 2025', 47 | country: 'Egypt', 48 | title: '', 49 | titleDesc: '', 50 | }, 51 | { 52 | name: 'Wayne Hoppe I', 53 | email: 'Angus80@hotmail.com', 54 | status: 0, 55 | date: 'Jan 13 2025', 56 | country: 'China', 57 | title: '', 58 | titleDesc: '', 59 | }, 60 | { 61 | name: 'Bertha Parker', 62 | email: 'Kailee.Ortiz31@hotmail.com', 63 | status: 0, 64 | date: 'Jan 13 2025', 65 | country: 'Brazil', 66 | title: '', 67 | titleDesc: '', 68 | }, 69 | { 70 | name: 'Clara Mills', 71 | email: 'Marco31@yahoo.com', 72 | status: 0, 73 | date: 'Jan 13 2025', 74 | country: 'Argentina', 75 | title: '', 76 | titleDesc: '', 77 | }, 78 | { 79 | name: 'Carroll Stracke', 80 | email: 'Felicia_Mraz@gmail.com', 81 | status: 0, 82 | date: 'Jan 13 2025', 83 | country: 'Indonesia', 84 | title: '', 85 | titleDesc: '', 86 | }, 87 | { 88 | name: 'Glenda Stroman', 89 | email: 'Shanna_Gutkowski@yahoo.com', 90 | status: 0, 91 | date: 'Jan 13 2025', 92 | country: 'Lebanon', 93 | title: '', 94 | titleDesc: '', 95 | }, 96 | { 97 | name: 'Hannah Berge', 98 | email: 'Dakota.Johnston52@hotmail.com', 99 | status: 0, 100 | date: 'Jan 13 2025', 101 | country: 'Portugal', 102 | title: '', 103 | titleDesc: '', 104 | }, 105 | { 106 | name: 'Roy Runolfsson', 107 | email: 'Eduardo60@gmail.com', 108 | status: 0, 109 | date: 'Jan 13 2025', 110 | country: 'Indonesia', 111 | title: '', 112 | titleDesc: '', 113 | }, 114 | { 115 | name: 'Roberto Collier', 116 | email: 'Deangelo.Reichert@hotmail.com', 117 | status: 0, 118 | date: 'Jan 13 2025', 119 | country: 'Kenya', 120 | title: '', 121 | titleDesc: '', 122 | }, 123 | { 124 | name: 'Pat Fisher', 125 | email: 'Joshuah38@yahoo.com', 126 | status: 0, 127 | date: 'Jan 13 2025', 128 | country: 'Nigeria', 129 | title: '', 130 | titleDesc: '', 131 | }, 132 | ], 133 | } 134 | -------------------------------------------------------------------------------- /src/data/pages/layouts/mini-column-sidebar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 3 | } 4 | -------------------------------------------------------------------------------- /src/data/pages/layouts/mini-plus-one-column-sidebar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 3 | } 4 | -------------------------------------------------------------------------------- /src/data/pages/layouts/two-columns-sidebar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // 3 | } 4 | -------------------------------------------------------------------------------- /src/data/pages/tables.js: -------------------------------------------------------------------------------- 1 | export default { 2 | breadcrumb: [ 3 | { 4 | title: 'Home', 5 | icon: 'tabler--home-filled', 6 | url: '/', 7 | }, 8 | { 9 | title: 'Components', 10 | icon: 'tabler--grid', 11 | url: '#', 12 | }, 13 | { 14 | title: 'Tables', 15 | icon: null, 16 | url: null, 17 | }, 18 | ], 19 | 20 | users: [ 21 | { 22 | name: 'Shari Greenfelder', 23 | email: 'Jamil80@yahoo.com', 24 | phone: '1-874-788-7170', 25 | company: 'ABC Corp.', 26 | city: 'New York', 27 | state: 'New York', 28 | country: 'USA', 29 | zip: '10001', 30 | }, 31 | { 32 | name: 'Ruben Marks', 33 | email: 'Juanita_Stamm39@hotmail.com', 34 | phone: '633-505-2008 x73748', 35 | company: 'XYZ Ltd.', 36 | city: 'San Francisco', 37 | state: 'California', 38 | country: 'USA', 39 | zip: '94105', 40 | }, 41 | { 42 | name: 'Kristine Gulgowski', 43 | email: 'Royce.Robel@gmail.com', 44 | phone: '1-889-893-5860', 45 | company: 'DEF Inc.', 46 | city: 'Los Angeles', 47 | state: 'California', 48 | country: 'USA', 49 | zip: '90001', 50 | }, 51 | { 52 | name: 'Erik Rath', 53 | email: 'Laisha25@hotmail.com', 54 | phone: '426.574.7303 x46974', 55 | company: 'DEF Inc.', 56 | city: 'Los Angeles', 57 | state: 'California', 58 | country: 'USA', 59 | zip: '90001', 60 | }, 61 | { 62 | name: 'Laurence Wintheiser IV', 63 | email: 'Wendy_Ryan@hotmail.com', 64 | phone: '555-207-8166', 65 | company: 'GHI Corporation', 66 | city: 'Miami', 67 | state: 'Florida', 68 | country: 'USA', 69 | zip: '33101', 70 | }, 71 | { 72 | name: 'Luther Pfannerstill', 73 | email: 'Beryl.Wehner@yahoo.com', 74 | phone: '618-823-2724 x6461', 75 | company: 'JKL Enterprises', 76 | city: 'Chicago', 77 | state: 'Illinois', 78 | country: 'USA', 79 | zip: '60601', 80 | }, 81 | { 82 | name: 'Greg Spencer', 83 | email: 'Libby20@hotmail.com', 84 | phone: '1-434-235-9278 x0081', 85 | company: 'MNO Solutions', 86 | city: 'Seattle', 87 | state: 'Washington', 88 | country: 'USA', 89 | zip: '98101', 90 | }, 91 | ], 92 | } 93 | -------------------------------------------------------------------------------- /src/html/auth/forgot-password.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/auth pageTitle='Request new password'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |

Request new password

6 | 7 | {{#> partials/auth-card }} 8 |

9 | You forgot your password? Here you can easily retrieve a new password. 10 |

11 | 12 |
13 |
14 |
15 | 16 |
17 | 18 | {{> partials/form/text-input icon="tabler--mail" type="email" name="email" placeholder="Email address" }} 19 |
20 | 21 | {{#btn 22 | type="submit" 23 | className="w-full" 24 | text="Request new password" 25 | startIcon="tabler--mail-fast" 26 | 27 | 28 | 29 | 30 | 31 | }}{{/btn}} 32 |
33 | 34 | 35 |
36 | Reset password 37 |
38 | {{/ partials/auth-card}} 39 | 40 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 41 | 42 | {{/layouts/auth}} 43 | -------------------------------------------------------------------------------- /src/html/auth/login.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/auth pageTitle='Login'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |

Login

6 | 7 | {{#> partials/auth-card}} 8 |

Login

9 | 10 |
11 |
12 |
13 |
14 | 15 |
16 | 17 | {{> partials/form/text-input icon="tabler--mail" type="email" name="email" placeholder="Email address" }} 18 |
19 | 20 |
21 |
22 | 23 |
24 | 25 | {{> partials/form/text-input icon="tabler--mail" type="email" name="email" placeholder="Email address" }} 26 |
27 | 28 |
29 | 30 | {{> partials/form/checkbox name="remembr_me" label="Remember me" }} 31 | 32 | 33 | Forgot Password? 34 | 35 |
36 | 37 | {{#btn 38 | type="submit" 39 | text="Log in" 40 | startIcon="tabler--login" 41 | className="w-full" 42 | 43 | 44 | 45 | 46 | 47 | }}{{/btn}} 48 |
49 |
50 | 51 | 52 |
53 | 54 | OR 55 | 56 |
57 | 58 | 59 | {{#btn 60 | href="#" 61 | variant="black" 62 | className="w-full" 63 | text="Login with github" 64 | startIcon="tabler--brand-github" 65 | 66 | 67 | 68 | 69 | 70 | }}{{/btn}} 71 | 72 | 73 |
74 | Don't have an account yet? 75 | Register 76 |
77 | {{/ partials/auth-card}} 78 | 79 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 80 | 81 | {{/layouts/auth}} 82 | -------------------------------------------------------------------------------- /src/html/auth/register.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/auth pageTitle='Register'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |

Register

6 | 7 | {{#> partials/auth-card }} 8 |

Register

9 | 10 |
11 |
12 |
13 |
14 |
15 | 16 |
17 | 18 | {{> partials/form/text-input icon="tabler--user" type="text" name="first_name" placeholder="First Name" }} 19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 | {{> partials/form/text-input icon="tabler--user" type="text" name="last_name" placeholder="Last Name" }} 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | {{> partials/form/text-input icon="tabler--mail" type="email" name="email" placeholder="Email address" }} 36 |
37 | 38 |
39 |
40 | 41 |
42 | 43 | {{> partials/form/text-input icon="tabler--lock" type="Password" name="password" placeholder="Password" }} 44 |
45 | 46 |
47 |
48 | 49 |
50 | 51 | {{> partials/form/text-input icon="tabler--lock" type="Password" name="confirm_password" placeholder="Confirm Password" }} 52 |
53 | 54 |
55 | 56 | 64 |
65 | 66 | {{#btn 67 | type="submit" 68 | className="w-full" 69 | text="Register" 70 | startIcon="tabler--user-plus" 71 | 72 | 73 | 74 | 75 | 76 | }}{{/btn}} 77 |
78 |
79 | 80 | 81 |
82 | 83 | OR 84 | 85 |
86 | 87 | 88 | {{#btn 89 | href="#" 90 | variant="black" 91 | className="w-full" 92 | text="Register using github" 93 | startIcon="tabler--brand-github" 94 | 95 | 96 | 97 | 98 | 99 | }}{{/btn}} 100 | 101 | 102 |
103 | Already have an account? Login 104 |
105 | {{/ partials/auth-card }} 106 | 107 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 108 | 109 | {{/layouts/auth}} 110 | -------------------------------------------------------------------------------- /src/html/auth/reset-password.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/auth pageTitle='Reset password'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |

Reset password

6 | 7 | {{#> partials/auth-card }} 8 |

9 | You are only one step a way from your new password, recover your password now. 10 |

11 | 12 |
13 |
14 |
15 | 16 |
17 | 18 | {{> partials/form/text-input icon="tabler--mail" type="email" name="email" placeholder="Email address" }} 19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 | {{> partials/form/text-input icon="tabler--lock" type="Password" name="password" placeholder="Password" }} 27 |
28 | 29 |
30 |
31 | 32 |
33 | 34 | {{> partials/form/text-input icon="tabler--lock" type="Password" name="confirm_password" placeholder="Confirm Password" }} 35 |
36 | 37 |
38 | {{#btn 39 | type="submit" 40 | className="w-full" 41 | text="Reset Password" 42 | 43 | 44 | 45 | 46 | 47 | }}{{/btn}} 48 |
49 |
50 | {{/ partials/auth-card}} 51 | 52 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 53 | 54 | {{/layouts/auth}} 55 | -------------------------------------------------------------------------------- /src/html/components/form-elements.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/main activeLink='Form elements' group='Components' pageTitle='Form elements' breadcrumb=pages.formElements.breadcrumb}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 | {{#*inline "header"}} 6 | {{> partials/page-header title='Form elements'}} 7 | {{/inline}} 8 | 9 |

Form elements

10 | 11 | 12 |
13 | 14 |
15 | 16 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 17 | 18 | {{/layouts/main}} 19 | -------------------------------------------------------------------------------- /src/html/components/tables.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/main activeLink='Tables' group='Components' pageTitle='Tables' breadcrumb=pages.tables.breadcrumb}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 | {{#*inline "header"}} 6 | {{> partials/page-header title='Tables'}} 7 | {{/inline}} 8 | 9 |

Tables

10 | 11 | 12 |
13 | 14 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 15 | 16 | {{/layouts/main}} 17 | -------------------------------------------------------------------------------- /src/html/hbs/layouts/auth.hbs: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle=pageTitle }} 2 | 3 |
4 |
5 |
6 |
7 | 11 | K-WD 12 | 13 |
14 | 15 |
16 | {{> @partial-block}} 17 |
18 |
19 |
20 | 21 | {{> partials/footer}} 22 |
23 | 24 | 25 |
26 | {{#btn 27 | srText="Toggle dark mode" 28 | className="p-2 shadow-md" 29 | attrs='@click="$store.settings.darkMode.toggle()"' 30 | }} 31 | 32 | 33 | {{/btn}} 34 |
35 | 36 | {{/layouts/base}} 37 | -------------------------------------------------------------------------------- /src/html/hbs/layouts/base.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{{ banner }}} 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {{ title }} {{#if pageTitle}} | {{ pageTitle }} {{/if}} 14 | 15 | 16 | 17 | 18 | 22 | 23 | 28 | 29 | 30 | 31 | {{> styles}} 32 | 33 | 34 |
35 |
36 | {{> partials/loading-screen }} 37 | 38 | {{> @partial-block }} 39 |
40 |
41 | 42 | {{#unless no-script}} 43 | {{> before-script}} 44 | 45 | {{> after-script}} 46 | 49 | 50 | {{/unless}} 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/html/hbs/layouts/main.hbs: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle=pageTitle}} 2 | 3 |
4 | {{> partials/sidebar activeLink=activeLink group=group }} 5 | 6 |
7 | {{> partials/navbar }} 8 | 9 |
10 | {{#if breadcrumb}} 11 | 12 | 48 | {{/if}} 49 | 50 |
51 | {{> header }} 52 |
53 |
54 | 55 | 56 |
57 | 58 | {{> @partial-block }} 59 |
60 | 61 | {{> partials/footer }} 62 |
63 | 64 | 65 | 66 | 67 | {{> partials/panels/settings }} 68 | 69 | 70 | {{> partials/panels/notifications }} 71 | 72 | 73 | {{> partials/panels/search }} 74 |
75 | 76 | {{/layouts/base}} 77 | -------------------------------------------------------------------------------- /src/html/hbs/partials/auth-card.hbs: -------------------------------------------------------------------------------- 1 | {{#base-card className="w-full overflow-hidden space-y-6 px-6 py-4 rounded-none sm:max-w-md sm:rounded-lg"}} 2 | {{> @partial-block}} 3 | {{/base-card}} 4 | -------------------------------------------------------------------------------- /src/html/hbs/partials/card-header.hbs: -------------------------------------------------------------------------------- 1 | 2 |
3 |

{{ title }}

4 | 5 |
6 |
7 | {{#btn 8 | variant="transparent" 9 | srText="Card Actions" 10 | icon="tabler--dots" 11 | className="p-1.5" 12 | attrs='x-dropdown:trigger' 13 | 14 | 15 | 16 | 17 | 18 | 19 | }}{{/btn}} 20 | 21 |
25 | 30 | Action 1 31 | 32 | 37 | Action 2 38 | 39 | 44 | Action 3 45 | 46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /src/html/hbs/partials/dropdown-menu.hbs: -------------------------------------------------------------------------------- 1 | 2 |
3 | {{#btn 4 | variant=variant 5 | srText=srText 6 | attrs='x-dropdown:trigger' 7 | className=triggerClasses 8 | }} 9 | {{> trigger }} 10 | {{/btn}} 11 | 12 | 13 |
17 | {{> content }} 18 |
19 |
20 | -------------------------------------------------------------------------------- /src/html/hbs/partials/footer.hbs: -------------------------------------------------------------------------------- 1 | 2 | 15 | -------------------------------------------------------------------------------- /src/html/hbs/partials/form/checkbox.hbs: -------------------------------------------------------------------------------- 1 | {{#if label}} 2 | 11 | {{else}} 12 | 17 | {{/if}} 18 | -------------------------------------------------------------------------------- /src/html/hbs/partials/form/text-input.hbs: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 13 |
14 | -------------------------------------------------------------------------------- /src/html/hbs/partials/loading-screen.hbs: -------------------------------------------------------------------------------- 1 | 2 |
6 | Loading..... 7 |
8 | -------------------------------------------------------------------------------- /src/html/hbs/partials/navbar.hbs: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | 6 | {{#btn 7 | variant="primary-light" 8 | className="hidden lg:inline-flex p-1.5" 9 | srText="Toggle sidebar" 10 | attrs='@click="isSidebarOpen = !isSidebarOpen"' 11 | icon="tabler--chevron-left" 12 | iconSizeClasses="h-8 w-8" 13 | iconClasses="transition-transform" 14 | iconAttrs=':class="{ \'-rotate-180\': !isSidebarOpen }"' 15 | 16 | 17 | }}{{/btn}} 18 | 19 | 20 | {{#btn 21 | variant="primary-light" 22 | className="lg:hidden inline-flex p-1.5" 23 | srText="Toggle main manu" 24 | attrs='@click="isMobileMainMenuOpen = !isMobileMainMenuOpen"' 25 | icon=true 26 | iconSizeClasses="h-8 w-8" 27 | iconClasses="transition-transform" 28 | iconAttrs=':class="isMobileMainMenuOpen ? \'tabler--x\' : \'tabler--menu-2\'"' 29 | 30 | 31 | }}{{/btn}} 32 | 33 | 34 | 38 | K-WD 39 | 40 |
41 | 42 | 43 | {{#btn 44 | variant="primary-light" 45 | className="md:hidden inline-flex p-1.5" 46 | srText="Toggle sub manu" 47 | attrs='@click="isMobileSubMenuOpen = !isMobileSubMenuOpen"' 48 | icon="tabler--dots-vertical" 49 | iconSizeClasses="h-8 w-8" 50 | 51 | 52 | }}{{/btn}} 53 | 54 | 102 | 103 | 104 | 172 |
173 | 174 | 175 |
181 | 184 |
185 |
186 | -------------------------------------------------------------------------------- /src/html/hbs/partials/navigation-links.hbs: -------------------------------------------------------------------------------- 1 | {{#each navigationLinks}} 2 | {{#unless links}} 3 | 7 | 8 | {{ title }} 9 | 10 | {{else}} 11 |
12 | 13 | 22 | 23 | {{ title }} 24 | 29 | 30 | 31 | 46 |
47 | {{/unless}} 48 | {{/each}} 49 | -------------------------------------------------------------------------------- /src/html/hbs/partials/page-header.hbs: -------------------------------------------------------------------------------- 1 |

{{ title }}

2 | 3 | {{#btn 4 | href="https://github.com/Kamona-WD/kwd-dashboard" 5 | text="View on github" 6 | variant="black" 7 | startIcon="tabler--brand-github" 8 | attrs='target="_blank"' 9 | 10 | }}{{/btn}} 11 | -------------------------------------------------------------------------------- /src/html/hbs/partials/panels/base.hbs: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 |
30 |

{{ title }}

31 | 32 |
35 | 36 | 42 |
43 | 44 | 45 |
46 | {{> @partial-block }} 47 |
48 |
49 | -------------------------------------------------------------------------------- /src/html/hbs/partials/panels/notifications.hbs: -------------------------------------------------------------------------------- 1 | {{#> partials/panels/base 2 | title="Notifications panel" 3 | pos="left" 4 | show="isNotificationsPanelOpen" 5 | close="isNotificationsPanelOpen = false" 6 | ref="notificationsPanel" 7 | }} 8 |
9 | 10 |
11 |
12 |

Notifications

13 |
14 | 21 | 28 |
29 |
30 |
31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 | 42 | 49 | 55 | 56 | 57 |
60 |
61 |
62 |
63 | New project "KWD Dashboard" created 64 |
65 |

66 | Looks like there might be a new theme soon 67 |

68 | 9h ago 69 |
70 |
71 | 72 | 73 |
74 |
75 | 78 | 85 | 91 | 92 | 93 |
96 |
97 |
98 |
99 | KWD Dashboard v0.0.2 was released 100 |
101 |

102 | Successful new version was released 103 |

104 | 2d ago 105 |
106 |
107 | 108 | 146 |
147 | 148 | 149 |
150 | 151 |
152 |
153 | 154 | Ahmed kamel 155 | 156 |
159 |
160 |
161 |
Ahmed Kamel
162 |

163 | Shared new project "K-WD Dashboard" 164 |

165 | 1d ago 166 |
167 |
168 | 169 | 170 |
171 |
172 | 173 | Ahmed kamel 174 | 175 |
178 |
179 |
180 |
John
181 |

182 | Commit new changes to K-WD Dashboard project. 183 |

184 | 10h ago 185 |
186 |
187 | 188 | 189 |
190 |
191 | 192 | Ahmed kamel 193 | 194 |
197 |
198 |
199 |
Ahmed Kamel
200 |

201 | Release new version "K-WD Dashboard" 202 |

203 | 20d ago 204 |
205 |
206 | 207 | 228 |
229 |
230 |
231 | {{/partials/panels/base }} 232 | -------------------------------------------------------------------------------- /src/html/hbs/partials/panels/search.hbs: -------------------------------------------------------------------------------- 1 | {{#> partials/panels/base 2 | title="Search panel" 3 | pos="left" 4 | show="isSearchPanelOpen" 5 | close="isSearchPanelOpen = false" 6 | ref="searchPanel" 7 | }} 8 | 9 |
10 | 11 |
14 | 15 | 16 | 17 | 18 | 25 |
26 | 27 | 28 |
29 |

History

30 | 31 |
32 | Post cover 33 |
34 |
35 |

Header

36 |

37 | Lorem ipsum dolor, sit amet consectetur. 38 |

39 | Post 40 |
41 | 42 | 43 |
44 | Ahmed Kamel 45 |
46 |
47 |

Ahmed Kamel

48 |

49 | Last activity 3h ago. 50 |

51 | Offline 52 |
53 | 54 | 55 |
56 | K-WD Dashboard 57 |
58 |
59 |

K-WD Dashboard

60 |

61 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 62 |

63 | Updated 3h ago. 64 |
65 | 66 | 80 |
81 |
82 | {{/partials/panels/base }} 83 | -------------------------------------------------------------------------------- /src/html/hbs/partials/panels/settings.hbs: -------------------------------------------------------------------------------- 1 | {{#> partials/panels/base 2 | title="Settings panel" 3 | pos="right" 4 | show="$store.settings.panel.isOpen" 5 | close="$store.settings.panel.close()" 6 | ref="settingsPanel" 7 | }} 8 | 9 |
12 | 13 | 14 |

Settings

15 |
16 | 17 | 18 |
19 | 20 |
21 |
Mode
22 |
23 | 24 | 33 | 34 | 35 | 44 |
45 |
46 | 47 | 48 |
49 |
Colors
50 | 51 |
52 | 60 |
61 |
62 |
63 | {{/partials/panels/base }} 64 | -------------------------------------------------------------------------------- /src/html/hbs/partials/sidebar.hbs: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /src/html/hbs/partials/simple-statistics-card.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#base-card}} 3 |
4 |
5 |
6 | {{ ../title }} 7 |
8 | 9 | 10 | {{ ../total }} 11 | 12 | 13 | {{#if (eq ../status "up")}} 14 | 17 | {{ ../../percentage }} 18 | 19 | {{else if (eq ../../status "down")}} 20 | 23 | {{ ../../percentage }} 24 | 25 | {{else}} 26 | 29 | {{ ../../percentage }} 30 | 31 | {{/if}} 32 |
33 | 34 |
35 | 36 |
37 |
38 | {{/base-card}} 39 | -------------------------------------------------------------------------------- /src/html/hbs/partials/table-wrapper.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {{> @partial-block}} 5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /src/html/hbs/partials/user-menu.hbs: -------------------------------------------------------------------------------- 1 | {{#> partials/dropdown-menu label="User menu" variant="transparent" triggerClasses="p-0" srText="User menu" }} 2 | {{#*inline "trigger"}} 3 | User image 4 | {{/inline}} 5 | 6 | {{#*inline "content"}} 7 | 12 | Your Profile 13 | 14 | 19 | Settings 20 | 21 | 26 | Logout 27 | 28 | {{/inline}} 29 | {{/ partials/dropdown-menu }} 30 | -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/main activeLink='Dashboard' breadcrumb=pages.home.breadcrumb}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 | {{#*inline "header"}} 6 | {{> partials/page-header title='Dashboard'}} 7 | {{/inline}} 8 | 9 |

Dashboard

10 | 11 | 12 |
13 | 14 |
15 | {{#each pages.home.simpleStatistics}} 16 | {{> partials/simple-statistics-card }} 17 | {{/each}} 18 |
19 | 20 | 21 |
22 | 23 | {{#base-card className="col-span-2 overflow-hidden" attrs='x-data="{ isOn: false }"'}} 24 | 25 | {{> partials/card-header title="Bar Chart"}} 26 | 27 | 28 |
29 |
30 |
31 | {{/base-card}} 32 | 33 | 34 | {{#base-card className="overflow-hidden" attrs='x-data="{ isOn: false }"'}} 35 | 36 | {{> partials/card-header title="Doughnut Chart"}} 37 | 38 | 39 |
40 |
41 |
42 | {{/base-card}} 43 |
44 | 45 | 46 |
47 | 48 | {{#base-card className="col-span-1 overflow-hidden"}} 49 | 50 | {{> partials/card-header title="Active users right now"}} 51 | 52 |

53 | 0 54 | Users 55 |

56 | 57 | 58 |
59 |
60 |
61 | {{/base-card}} 62 | 63 | 64 | {{#base-card className="col-span-2 overflow-hidden"}} 65 | {{> partials/card-header title="Line Chart"}} 66 | 67 | 68 |
69 |
70 |
71 | {{/base-card}} 72 |
73 | 74 | 75 | {{#base-card className="overflow-hidden"}} 76 | {{> partials/card-header title="Latest Customers"}} 77 | 78 |
79 |
80 |
81 | 82 | 83 | 84 | 90 | 96 | 102 | 108 | 111 | 112 | 113 | 114 | 115 | {{#each ../pages.home.latestCustomers}} 116 | 117 | 136 | 140 | 143 | 146 | 149 | 150 | {{/each}} 151 | 152 |
88 | Name 89 | 94 | Title 95 | 100 | Country 101 | 106 | Date 107 | 109 | Edit 110 |
118 |
119 |
120 | User's avatar 125 |
126 |
127 |
128 | {{ name }} 129 |
130 |
131 | {{{ email }}} 132 |
133 |
134 |
135 | 		137 |
Regional Paradigm Technician
138 |
Optimization
139 | 		141 | {{ country }} 142 | 144 | {{ date }} 145 | 147 | Edit 148 |
153 |
154 |
155 |
156 | {{/base-card}} 157 |
158 | 159 | {{#*inline "before-script"}} 160 | 161 | {{/inline}} 162 | 163 | {{#*inline "after-script"}}{{/inline}} 164 | 165 | {{/layouts/main}} 166 | -------------------------------------------------------------------------------- /src/html/layouts/mini-plus-one-column-sidebar.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle='Mini + One Column Sidebar'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |
6 | 7 | 8 | 15 | 16 | 17 | 123 | 124 | 125 |
126 | {{#btn 127 | variant="primary-light" 128 | srText="Toggle main manu" 129 | attrs='@click="isSidebarOpen = true; $nextTick(() => { $refs.sidebar.focus() })"' 130 | className="p-1" 131 | }} 132 | 133 | 134 | {{/btn}} 135 |
136 | 137 | 138 |
139 |
142 |

Mini + One Columns Sidebar

143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 | 154 | 155 | 156 | 157 | {{> partials/panels/settings }} 158 | 159 | 160 | {{> partials/panels/notifications }} 161 | 162 | 163 | {{> partials/panels/search }} 164 | 165 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 166 | 167 | {{/layouts/base}} 168 | -------------------------------------------------------------------------------- /src/html/layouts/mini-sidebar.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle='Mini Column Sidebar'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |
10 | 11 | 12 | 19 | 20 | 107 | 108 |
109 | 110 |
111 |

Mini sidebar layout

112 | 113 |
114 |
115 | 116 | 154 |

Home

155 |
156 | 157 |
158 | 159 | {{#btn 160 | variant="primary-light" 161 | srText="Toggle dark mode" 162 | className="p-2" 163 | attrs='@click="$store.settings.darkMode.toggle()"' 164 | }} 165 | 170 | 175 | {{/btn}} 176 | 177 | 178 | {{#btn 179 | variant="primary-light" 180 | srText="Open search panel" 181 | icon="tabler--search" 182 | iconSizeClasses="h-6 w-6" 183 | attrs='@click="openSearchPanel"' 184 | 185 | 186 | 187 | 188 | 189 | }}{{/btn}} 190 | 191 | 192 | {{#btn 193 | variant="primary-light" 194 | srText="Open search panel" 195 | icon="tabler--dots-vertical" 196 | className="xl:hidden" 197 | iconSizeClasses="h-6 w-6" 198 | attrs='@click="openUserPanel"' 199 | 200 | 201 | 202 | 203 | 204 | }}{{/btn}} 205 |
206 |
207 | 208 |
209 |

Mini Sidebar

210 |
211 |
212 |
213 |
214 |
215 | Back to default dashboard 216 |
217 | 218 |
219 | 222 |
223 |
224 | 225 | 226 |
239 |

User panel

240 | 241 | 242 |
243 | 262 |
263 | 264 |
265 | 266 |
267 | 268 | {{#btn 269 | variant="primary-light" 270 | srText="Open settings panel" 271 | icon="tabler--settings" 272 | iconSizeClasses="h-6 w-6" 273 | attrs='@click="$store.settings.panel.open()"' 274 | 275 | 276 | 277 | 278 | 279 | }}{{/btn}} 280 |
281 | 282 | 283 |
284 | 285 |
286 | 287 | Ahmed Kamel 288 |

Ahmed Kamel

289 |
290 |
291 |
292 |

Messages

293 | View all 294 |
295 | 296 |
297 | 298 | User name 303 |
304 |

307 | John Doe 308 |

309 |

310 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis voluptas eaque 311 | nesciunt doloremque ullam 312 |

313 |
314 | 315 | 1h ago 316 | 317 | 318 | 319 | User name 324 | 325 |
326 |

329 | Someone 330 |

331 | 332 |

333 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis voluptas eaque 334 | nesciunt doloremque ullam 335 |

336 |
337 | 338 | 339 | 1h ago 340 | 341 | 342 | 343 | 344 | User name 349 | 350 |
351 |

354 | Another Person 355 |

356 | 357 |

358 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis voluptas eaque 359 | nesciunt doloremque ullam 360 |

361 |
362 | 363 | 364 | 1h ago 365 | 366 | 367 | 368 | 369 | User name 374 | 375 |
376 |

379 | Another Name 380 |

381 | 382 |

383 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis voluptas eaque 384 | nesciunt doloremque ullam 385 |

386 |
387 | 388 | 389 | 1h ago 390 | 391 | 392 |
393 |
394 |
395 | 396 | 397 | 417 |
418 |
419 |
420 |
421 | 422 | 423 | 424 | 425 | {{> partials/panels/settings }} 426 | 427 | 428 | {{> partials/panels/notifications }} 429 | 430 | 431 | {{> partials/panels/search }} 432 | 433 | {{#*inline "before-script"}} 434 | 463 | {{/inline}} 464 | 465 | {{#*inline "after-script"}}{{/inline}} 466 | 467 | {{/layouts/base}} 468 | -------------------------------------------------------------------------------- /src/html/layouts/two-columns-sidebar.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle='Two Columns Sidebar'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |
10 | 11 | 12 | 19 | 20 | 111 | 112 | 113 | 114 | 121 | 122 |
136 |
137 | 138 |
139 |
140 |

Header

141 | 142 | {{#btn 143 | variant="primary-light" 144 | srText="Toggle second sidebar panel" 145 | className="p-1 lg:hidden" 146 | attrs='@click="isSecondSidebarOpen = false"' 147 | }} 148 | 149 | {{/btn}} 150 |
151 |
152 | 153 | 154 |
155 |
156 | 157 |

Content

158 |
159 |
160 |
161 |
162 | 163 | 164 |
165 | {{#btn 166 | variant="primary-light" 167 | srText="Toggle main manu" 168 | className="p-1" 169 | attrs='@click="isSidebarOpen = !isSidebarOpen; $nextTick(() => { $refs.sidebar?.focus() })"' 170 | }} 171 | 172 | 173 | {{/btn}} 174 | 175 | {{#btn 176 | variant="primary-light" 177 | srText="Toggle second sidebar panel" 178 | className="p-1" 179 | attrs='@click="isSecondSidebarOpen = true; $nextTick(() => { $refs.secondSidebar.focus() })"' 180 | }} 181 | 186 | {{/btn}} 187 |
188 | 189 | 190 |
191 |
194 |

Two Columns - Sidebar

195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 | 206 | 207 | 208 | 209 | {{> partials/panels/settings }} 210 | 211 | 212 | {{> partials/panels/notifications }} 213 | 214 | 215 | {{> partials/panels/search }} 216 | 217 | {{#*inline "before-script"}} 218 | 241 | {{/inline}} 242 | 243 | {{#*inline "after-script"}}{{/inline}} 244 | 245 | {{/layouts/base}} 246 | -------------------------------------------------------------------------------- /src/html/pages/404.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle='404 Not Found Page'}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |
6 |
7 |
8 |

404

9 |
10 |

11 | 26 | 27 | Oops! Page not found. 28 | 29 |

30 |

31 | The page you are looking for was not found. 32 |

33 |

34 | You may return to 35 | home page 36 | or try using the search form. 37 |

38 |
39 |
40 | 41 |
42 |
43 | 49 | 55 |
56 |
57 |
58 |
59 | 60 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 61 | 62 | {{/layouts/base}} 63 | -------------------------------------------------------------------------------- /src/html/pages/500.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/base pageTitle='500 Server Error Page' no-script=false}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 |
6 |
7 |
8 |

500

9 |
10 |

11 | 26 | 27 | Oops! Something went wrong. 28 | 29 |

30 |

31 | The page you are looking for is temporarily unavailable. 32 |

33 |

34 | You may return to 35 | home page 36 | or try using the search form. 37 |

38 |
39 |
40 | 41 |
42 |
43 | 49 | 55 |
56 |
57 |
58 |
59 | 60 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 61 | 62 | {{/layouts/base}} 63 | -------------------------------------------------------------------------------- /src/html/pages/blank.html: -------------------------------------------------------------------------------- 1 | {{#> layouts/main activeLink='Blank' group='Pages' pageTitle='Blank' breadcrumb=pages.blank.breadcrumb}} 2 | 3 | {{#*inline "styles"}}{{/inline}} 4 | 5 | {{#*inline "header"}} 6 | {{> partials/page-header title='Blank'}} 7 | {{/inline}} 8 | 9 | 10 | 11 | {{#*inline "before-script"}}{{/inline}} {{#*inline "after-script"}}{{/inline}} 12 | 13 | {{/layouts/main}} 14 | -------------------------------------------------------------------------------- /src/js/demo.js: -------------------------------------------------------------------------------- 1 | import ApexCharts from 'apexcharts' 2 | import { getCssColor, getScheme } from '@/support/index.js' 3 | 4 | window.ApexCharts = ApexCharts 5 | 6 | const getRandomChartDataItem = (l = 10, m = 100) => { 7 | return Math.floor(Math.random() * (m - l) + l) 8 | } 9 | 10 | const getRandomChartData = (l = 10, m = 100) => { 11 | return Array.from({ length: l }, () => getRandomChartDataItem(l, m)) 12 | } 13 | 14 | const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 15 | 16 | document.addEventListener('alpine:init', () => { 17 | const baseChartOptions = { 18 | theme: { 19 | mode: getScheme() ? 'dark' : 'light', 20 | }, 21 | colors: [getCssColor('primary-light'), getCssColor('violet-light')], 22 | chart: { 23 | background: 'transparent', 24 | }, 25 | } 26 | 27 | const onInit = (chart) => { 28 | document.addEventListener('scheme:changed', () => { 29 | chart.updateOptions({ 30 | theme: { 31 | mode: getScheme() ? 'dark' : 'light', 32 | }, 33 | }) 34 | }) 35 | 36 | document.addEventListener('colors:changed', () => { 37 | chart.updateOptions({ 38 | colors: [getCssColor('primary-light'), getCssColor('violet-light')], 39 | }) 40 | }) 41 | } 42 | 43 | Alpine.data('barChart', (el) => { 44 | let c = new ApexCharts(el, { 45 | ...baseChartOptions, 46 | chart: { 47 | ...baseChartOptions.chart, 48 | type: 'bar', 49 | height: '100%', 50 | width: '100%', 51 | parentHeightOffset: 0, 52 | toolbar: { 53 | show: false, 54 | }, 55 | }, 56 | plotOptions: { 57 | bar: { 58 | columnWidth: '50%', 59 | }, 60 | }, 61 | dataLabels: { 62 | enabled: false, 63 | }, 64 | fill: { 65 | opacity: 1, 66 | }, 67 | series: [ 68 | { 69 | name: 'A', 70 | data: getRandomChartData(12), 71 | }, 72 | { 73 | name: 'B', 74 | data: getRandomChartData(12), 75 | }, 76 | ], 77 | grid: { 78 | show: false, 79 | }, 80 | xaxis: { 81 | labels: { 82 | padding: 0, 83 | }, 84 | tooltip: { 85 | enabled: false, 86 | }, 87 | axisBorder: { 88 | show: false, 89 | }, 90 | categories: months, 91 | }, 92 | yaxis: { 93 | labels: { 94 | padding: 4, 95 | }, 96 | }, 97 | legend: { 98 | show: false, 99 | }, 100 | }) 101 | 102 | c.render() 103 | 104 | return { 105 | init() { 106 | onInit(c) 107 | }, 108 | } 109 | }) 110 | 111 | Alpine.data('doughnutChart', (el) => { 112 | const c = new ApexCharts(el, { 113 | ...baseChartOptions, 114 | series: [30, 70], 115 | chart: { 116 | ...baseChartOptions.chart, 117 | type: 'donut', 118 | height: '100%', 119 | width: '100%', 120 | toolbar: { 121 | show: false, 122 | }, 123 | }, 124 | dataLabels: { 125 | enabled: false, 126 | }, 127 | legend: { show: false }, 128 | comparedResult: [3, 7], 129 | labels: ['A', 'B'], 130 | stroke: { width: 0 }, 131 | grid: { 132 | padding: { 133 | right: -20, 134 | bottom: -8, 135 | left: -20, 136 | }, 137 | }, 138 | plotOptions: { 139 | pie: { 140 | donut: { 141 | labels: { 142 | show: true, 143 | name: { 144 | offsetY: 15, 145 | }, 146 | value: { 147 | offsetY: -20, 148 | formatter(val) { 149 | return `${parseInt(val)}%` 150 | }, 151 | }, 152 | total: { 153 | show: true, 154 | label: 'Sales', 155 | formatter() { 156 | return '30%' 157 | }, 158 | }, 159 | }, 160 | }, 161 | }, 162 | }, 163 | }) 164 | 165 | c.render() 166 | 167 | return { 168 | init() { 169 | onInit(c) 170 | }, 171 | } 172 | }) 173 | 174 | Alpine.data('lineChart', (el) => { 175 | let c = new ApexCharts(el, { 176 | ...baseChartOptions, 177 | series: [ 178 | { 179 | name: 'A', 180 | data: getRandomChartData(7), 181 | }, 182 | { 183 | name: 'B', 184 | data: getRandomChartData(7), 185 | }, 186 | ], 187 | legend: { 188 | position: 'top', 189 | }, 190 | chart: { 191 | ...baseChartOptions.chart, 192 | height: '100%', 193 | width: '100%', 194 | type: 'area', 195 | toolbar: { 196 | show: false, 197 | }, 198 | }, 199 | grid: { 200 | show: false, 201 | }, 202 | dataLabels: { 203 | enabled: false, 204 | }, 205 | stroke: { 206 | curve: 'smooth', 207 | }, 208 | xaxis: { 209 | type: 'datetime', 210 | categories: ['1/11/2025', '2/11/2025', '3/11/2025', '4/11/2025', '5/11/2025', '6/11/2025'], 211 | }, 212 | tooltip: { 213 | x: { 214 | format: 'dd/MM/yy HH:mm', 215 | }, 216 | }, 217 | }) 218 | 219 | c.render() 220 | 221 | return { 222 | init() { 223 | onInit(c) 224 | }, 225 | } 226 | }) 227 | 228 | Alpine.data('activeUsersChart', (el) => { 229 | let randomUserCount = 0 230 | 231 | const usersCount = document.getElementById('usersCount') 232 | 233 | const activeUsersCount = getRandomChartData(30) 234 | 235 | let c = new ApexCharts(el, { 236 | ...baseChartOptions, 237 | chart: { 238 | ...baseChartOptions.chart, 239 | type: 'bar', 240 | fontFamily: 'inherit', 241 | height: '100%', 242 | width: '100%', 243 | sparkline: { 244 | enabled: true, 245 | }, 246 | animations: { 247 | enabled: false, 248 | }, 249 | }, 250 | plotOptions: { 251 | bar: { 252 | columnWidth: '50%', 253 | }, 254 | }, 255 | dataLabels: { 256 | enabled: false, 257 | }, 258 | fill: { 259 | opacity: 1, 260 | }, 261 | series: [ 262 | { 263 | name: 'Users', 264 | data: activeUsersCount, 265 | }, 266 | ], 267 | xaxis: { 268 | labels: { 269 | padding: 0, 270 | }, 271 | tooltip: { 272 | enabled: false, 273 | }, 274 | axisBorder: { 275 | show: false, 276 | }, 277 | type: 'datetime', 278 | }, 279 | yaxis: { 280 | labels: { 281 | padding: 4, 282 | }, 283 | }, 284 | labels: [ 285 | '2020-06-20', 286 | '2020-06-21', 287 | '2020-06-22', 288 | '2020-06-23', 289 | '2020-06-24', 290 | '2020-06-25', 291 | '2020-06-26', 292 | '2020-06-27', 293 | '2020-06-28', 294 | '2020-06-29', 295 | '2020-06-30', 296 | '2020-07-01', 297 | '2020-07-02', 298 | '2020-07-03', 299 | '2020-07-04', 300 | '2020-07-05', 301 | '2020-07-06', 302 | '2020-07-07', 303 | '2020-07-08', 304 | '2020-07-09', 305 | '2020-07-10', 306 | '2020-07-11', 307 | '2020-07-12', 308 | '2020-07-13', 309 | '2020-07-14', 310 | '2020-07-15', 311 | '2020-07-16', 312 | '2020-07-17', 313 | '2020-07-18', 314 | '2020-07-19', 315 | ], 316 | legend: { 317 | show: false, 318 | }, 319 | }) 320 | 321 | c.render() 322 | 323 | return { 324 | init() { 325 | const fakeUsersCount = () => { 326 | randomUserCount = getRandomChartDataItem() 327 | activeUsersCount.shift() 328 | activeUsersCount.push(Math.floor(Math.random() * (100 - 40) + 40)) 329 | 330 | c.update() 331 | usersCount.innerText = randomUserCount 332 | } 333 | 334 | setInterval(() => { 335 | fakeUsersCount() 336 | }, 2000) 337 | 338 | onInit(c) 339 | }, 340 | } 341 | }) 342 | }) 343 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | import Alpine from 'alpinejs' 2 | import AlpineCollapse from '@alpinejs/collapse' 3 | import AlpineFocus from '@alpinejs/focus' 4 | import AlpineAnchor from '@alpinejs/anchor' 5 | import AlpineResize from '@alpinejs/resize' 6 | import kwdPlugin from './plugin' 7 | 8 | window.Alpine = Alpine 9 | 10 | Alpine.plugin(kwdPlugin) 11 | Alpine.plugin(AlpineCollapse) 12 | Alpine.plugin(AlpineFocus) 13 | Alpine.plugin(AlpineAnchor) 14 | Alpine.plugin(AlpineResize) 15 | -------------------------------------------------------------------------------- /src/js/plugin/accordion.js: -------------------------------------------------------------------------------- 1 | export default function (Alpine) { 2 | Alpine.directive('accordion', (el, { value }) => { 3 | if (value === 'item') handleItem(Alpine, el) 4 | else if (value === 'item-trigger') handleItemTrigger(Alpine, el) 5 | else if (value === 'item-content') handleItemContent(Alpine, el) 6 | else handleRoot(Alpine, el) 7 | }).before('bind') 8 | } 9 | 10 | function handleRoot(Alpine, el) { 11 | Alpine.bind(el, { 12 | 'x-data'() { 13 | return { 14 | activeAccordion: null, 15 | setActiveAccordion(accordion) { 16 | this.activeAccordion = this.activeAccordion == accordion ? null : accordion 17 | }, 18 | } 19 | }, 20 | }) 21 | } 22 | 23 | function handleItem(Alpine, el) { 24 | Alpine.bind(el, { 25 | 'x-id'() { 26 | return ['accordion-item'] 27 | }, 28 | ':id'() { 29 | return this.$id('accordion-item') 30 | }, 31 | 'x-data'() { 32 | return { 33 | accordion: this.$id('accordion-item'), 34 | get active() { 35 | return this.accordion === this.activeAccordion 36 | }, 37 | } 38 | }, 39 | }) 40 | } 41 | 42 | function handleItemTrigger(Alpine, el) { 43 | Alpine.bind(el, { 44 | '@click'() { 45 | this.setActiveAccordion(this.accordion) 46 | }, 47 | }) 48 | } 49 | 50 | function handleItemContent(Alpine, el) { 51 | Alpine.bind(el, { 52 | style: { display: 'none' }, 53 | 'x-show'() { 54 | return this.activeAccordion === this.accordion 55 | }, 56 | }) 57 | } 58 | -------------------------------------------------------------------------------- /src/js/plugin/dropdown.js: -------------------------------------------------------------------------------- 1 | export default function (Alpine) { 2 | Alpine.directive('dropdown', (el, { value, modifiers }) => { 3 | if (!value) handleRoot(Alpine, el) 4 | else if (value === 'trigger') handleTrigger(Alpine, el) 5 | else if (value === 'menu') handleMenu(Alpine, el, modifiers) 6 | }) 7 | } 8 | 9 | function handleRoot(Alpine, el) { 10 | Alpine.bind(el, { 11 | 'x-id'() { 12 | return ['dropdown-trigger', 'dropdown-menu'] 13 | }, 14 | 'x-data'() { 15 | return { 16 | isOpen: false, 17 | } 18 | }, 19 | }) 20 | } 21 | 22 | function handleTrigger(Alpine, el) { 23 | Alpine.bind(el, { 24 | ':id'() { 25 | return this.$id('dropdown-trigger') 26 | }, 27 | '@click'() { 28 | this.isOpen = !this.isOpen 29 | }, 30 | 'aria-haspopup': 'true', 31 | ':aria-expanded'() { 32 | return this.isOpen.toString() 33 | }, 34 | }) 35 | } 36 | 37 | function handleMenu(Alpine, el, modifiers) { 38 | let positions = [ 39 | 'top', 40 | 'top-start', 41 | 'top-end', 42 | 'right', 43 | 'right-start', 44 | 'right-end', 45 | 'bottom', 46 | 'bottom-start', 47 | 'bottom-end', 48 | 'left', 49 | 'left-start', 50 | 'left-end', 51 | ] 52 | let placement = positions.find((i) => modifiers.includes(i)) 53 | 54 | let defaultClasses = '' 55 | let transitionClasses = { 56 | 'x-transition:enter': 'transition ease-out duration-200', 57 | 'x-transition:enter-start': 'transform opacity-0 scale-95', 58 | 'x-transition:enter-end': 'transform opacity-100 scale-100', 59 | 'x-transition:leave': 'transition ease-in duration-75', 60 | 'x-transition:leave-start': 'transform opacity-100 scale-100', 61 | 'x-transition:leave-end': 'transform opacity-0 scale-95', 62 | } 63 | 64 | Alpine.bind(el, { 65 | class: `${defaultClasses}`, 66 | style: { display: 'none' }, 67 | ':id'() { 68 | return this.$id('dropdown-menu') 69 | }, 70 | [`x-anchor${placement ? '.' + placement : ''}.offset.10`]() { 71 | return document.getElementById(this.$id('dropdown-trigger')) 72 | }, 73 | 'x-show'() { 74 | return this.isOpen 75 | }, 76 | '@click.outside'() { 77 | this.isOpen = false 78 | }, 79 | ...transitionClasses, 80 | }) 81 | } 82 | -------------------------------------------------------------------------------- /src/js/plugin/index.js: -------------------------------------------------------------------------------- 1 | import accordion from './accordion' 2 | import dropdown from './dropdown' 3 | import setup from './setup' 4 | 5 | export default function (Alpine) { 6 | accordion(Alpine) 7 | dropdown(Alpine) 8 | setup(Alpine) 9 | } 10 | -------------------------------------------------------------------------------- /src/js/plugin/setup.js: -------------------------------------------------------------------------------- 1 | export default function (Alpine) { 2 | Alpine.store('settings', { 3 | panel: { 4 | isOpen: false, 5 | 6 | open(cp) { 7 | this.isOpen = true 8 | 9 | if (typeof cp == 'function') { 10 | cp() 11 | } 12 | }, 13 | 14 | close() { 15 | this.isOpen = false 16 | }, 17 | }, 18 | 19 | darkMode: { 20 | value: false, 21 | setValue(value) { 22 | this.value = value 23 | window.localStorage.setItem('dark', value) 24 | document.dispatchEvent(new CustomEvent('scheme:changed', {})) 25 | }, 26 | getValue() { 27 | if (window.localStorage.getItem('dark')) { 28 | return JSON.parse(window.localStorage.getItem('dark')) 29 | } 30 | return !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 31 | }, 32 | toggle() { 33 | this.value = !this.value 34 | this.setValue(this.value) 35 | }, 36 | }, 37 | 38 | colors: { 39 | selectedColor: 'fuchsia', 40 | 41 | availableColors: ['cyan', 'teal', 'green', 'fuchsia', 'blue', 'violet'], 42 | 43 | getColor() { 44 | if (window.localStorage.getItem('color')) { 45 | return window.localStorage.getItem('color') 46 | } 47 | return this.selectedColor 48 | }, 49 | 50 | setColor(color) { 51 | const root = document.documentElement 52 | root.style.setProperty('--color-primary', `var(--color-${color})`) 53 | root.style.setProperty('--color-primary-50', `var(--color-${color}-50)`) 54 | root.style.setProperty('--color-primary-100', `var(--color-${color}-100)`) 55 | root.style.setProperty('--color-primary-light', `var(--color-${color}-light)`) 56 | root.style.setProperty('--color-primary-lighter', `var(--color-${color}-lighter)`) 57 | root.style.setProperty('--color-primary-dark', `var(--color-${color}-dark)`) 58 | root.style.setProperty('--color-primary-darker', `var(--color-${color}-darker)`) 59 | this.selectedColor = color 60 | window.localStorage.setItem('color', color) 61 | 62 | document.dispatchEvent(new CustomEvent('colors:changed', {})) 63 | }, 64 | }, 65 | 66 | init() { 67 | // Alpine.nextTick(() => { 68 | // this.darkMode.setValue(this.darkMode.getValue()) 69 | // }) 70 | 71 | this.darkMode.setValue(this.darkMode.getValue()) 72 | this.colors.setColor(this.colors.getColor()) 73 | }, 74 | }) 75 | 76 | Alpine.store('panels', { 77 | search: {}, 78 | notifications: {}, 79 | }) 80 | 81 | Alpine.data('setup', () => { 82 | return { 83 | init() { 84 | this.$refs.loading?.classList.add('hidden') 85 | }, 86 | loading: true, 87 | isSidebarOpen: true, 88 | isNotificationsPanelOpen: false, 89 | openNotificationsPanel() { 90 | this.isNotificationsPanelOpen = true 91 | this.$nextTick(() => { 92 | this.$refs.notificationsPanel.focus() 93 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false 94 | }) 95 | }, 96 | isSearchPanelOpen: false, 97 | openSearchPanel() { 98 | this.isSearchPanelOpen = true 99 | this.$nextTick(() => { 100 | this.$refs.searchInput.focus() 101 | if (this.isMobileSubMenuOpen) this.isMobileSubMenuOpen = false 102 | }) 103 | }, 104 | isMobileSubMenuOpen: false, 105 | openMobileSubMenu() { 106 | this.isMobileSubMenuOpen = true 107 | this.$nextTick(() => { 108 | this.$refs.mobileSubMenu.focus() 109 | }) 110 | }, 111 | isMobileMainMenuOpen: false, 112 | openMobileMainMenu() { 113 | this.isMobileMainMenuOpen = true 114 | this.$nextTick(() => { 115 | this.$refs.mobileMainMenu.focus() 116 | }) 117 | }, 118 | } 119 | }) 120 | } 121 | -------------------------------------------------------------------------------- /src/plugins/alpinejs/build.js: -------------------------------------------------------------------------------- 1 | // Adapted from the oficial Alpine.js file: 2 | // https://github.com/alpinejs/alpine/blob/main/scripts/build.js 3 | 4 | import fs from 'fs' 5 | import zlib from 'zlib' 6 | import esbuild from 'esbuild' 7 | 8 | const srcDir = 'src/plugins/alpinejs' 9 | const outDir = 'plugins/alpinejs' 10 | 11 | bundle() 12 | 13 | async function bundle() { 14 | await build({ 15 | entryPoints: [`${srcDir}/builds/cdn.js`], 16 | outfile: `${outDir}/cdn.js`, 17 | bundle: true, 18 | platform: 'browser', 19 | define: { CDN: 'true' }, 20 | }) 21 | 22 | await build({ 23 | entryPoints: [`${srcDir}/builds/cdn.js`], 24 | outfile: `${outDir}/cdn.min.js`, 25 | bundle: true, 26 | minify: true, 27 | platform: 'browser', 28 | define: { CDN: 'true' }, 29 | }) 30 | 31 | outputSize(`${outDir}/cdn.min.js`) 32 | 33 | // Then output two files: an esm module and a cjs module. 34 | // The ESM one is meant for "import" statements (bundlers and new browsers) 35 | // and the cjs one is meant for "require" statements (node). 36 | await build({ 37 | entryPoints: [`${srcDir}/builds/module.js`], 38 | outfile: `${outDir}/module.esm.js`, 39 | bundle: true, 40 | platform: 'neutral', 41 | mainFields: ['module', 'main'], 42 | }) 43 | 44 | await build({ 45 | entryPoints: [`${srcDir}/builds/module.js`], 46 | outfile: `${outDir}/module.cjs.js`, 47 | bundle: true, 48 | target: ['node10.4'], 49 | platform: 'node', 50 | }) 51 | } 52 | 53 | async function build(options) { 54 | options.define || (options.define = {}) 55 | options.define['process.env.NODE_ENV'] = process.argv.includes('--watch') ? `'production'` : `'development'` 56 | 57 | try { 58 | await esbuild.build({ 59 | // watch: process.argv.includes("--watch"), 60 | // external: ['alpinejs'], 61 | ...options, 62 | }) 63 | } catch (error) { 64 | process.exit(1) 65 | } 66 | } 67 | 68 | function outputSize(file) { 69 | let size = bytesToSize(zlib.brotliCompressSync(fs.readFileSync(file)).length) 70 | 71 | console.log('\x1b[32m', `${file}: ${size}`) 72 | } 73 | 74 | function bytesToSize(bytes) { 75 | const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] 76 | if (bytes === 0) return 'n/a' 77 | const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10) 78 | if (i === 0) return `${bytes} ${sizes[i]}` 79 | return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}` 80 | } 81 | -------------------------------------------------------------------------------- /src/plugins/alpinejs/builds/cdn.js: -------------------------------------------------------------------------------- 1 | // Adapted from the oficial Alpine.js file: 2 | // https://github.com/alpinejs/alpine/blob/main/packages/focus/builds/cdn.js 3 | 4 | import plugin from '../../../js/plugin' 5 | 6 | document.addEventListener('alpine:init', () => { 7 | window.Alpine.plugin(plugin) 8 | }) 9 | -------------------------------------------------------------------------------- /src/plugins/alpinejs/builds/module.js: -------------------------------------------------------------------------------- 1 | // Adapted from the oficial Alpine.js file: 2 | // https://github.com/alpinejs/alpine/blob/main/packages/focus/builds/module.js 3 | 4 | import plugin from '../../../js/plugin' 5 | 6 | export default plugin 7 | -------------------------------------------------------------------------------- /src/plugins/tailwindcss/build.js: -------------------------------------------------------------------------------- 1 | import { context, build as esBuild } from 'esbuild' 2 | 3 | const srcDir = 'src/plugins/tailwindcss' 4 | const outDir = 'plugins' 5 | 6 | bundle() 7 | 8 | async function bundle() { 9 | await build({ 10 | entryPoints: [`${srcDir}/tailwindcss.cjs`], 11 | outfile: `${outDir}/tailwindcss.js`, 12 | bundle: true, 13 | target: ['node10.4'], 14 | platform: 'node', 15 | }) 16 | } 17 | 18 | async function build(options) { 19 | options.define || (options.define = {}) 20 | options.define['process.env.NODE_ENV'] = process.argv.includes('--watch') ? `'production'` : `'development'` 21 | 22 | try { 23 | if (process.argv.includes('--watch')) { 24 | let ctx = await context({ 25 | external: ['tailwindcss'], 26 | ...options, 27 | }) 28 | 29 | await ctx.watch() 30 | } else { 31 | await esBuild({ 32 | external: ['tailwindcss'], 33 | minify: true, 34 | ...options, 35 | }) 36 | } 37 | } catch (error) { 38 | process.exit(1) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/plugins/tailwindcss/tailwindcss.cjs: -------------------------------------------------------------------------------- 1 | const colors = require('tailwindcss/colors') 2 | const plugin = require('tailwindcss/plugin') 3 | 4 | const opts = { 5 | colorVars: { 6 | '--light': '#edf2f9', 7 | '--dark': '#152e4d', 8 | '--darker': '#12263f', 9 | 10 | // 11 | '--color-primary': 'var(--color-fuchsia)', 12 | '--color-primary-50': 'var(--color-fuchsia-50)', 13 | '--color-primary-100': 'var(--color-fuchsia-100)', 14 | '--color-primary-light': 'var(--color-fuchsia-light)', 15 | '--color-primary-lighter': 'var(--color-fuchsia-lighter)', 16 | '--color-primary-dark': 'var(--color-fuchsia-dark)', 17 | '--color-primary-darker': 'var(--color-fuchsia-darker)', 18 | // 19 | '--color-green': '#16a34a', 20 | '--color-green-50': '#f0fdf4', 21 | '--color-green-100': '#dcfce7', 22 | '--color-green-light': '#22c55e', 23 | '--color-green-lighter': '#4ade80', 24 | '--color-green-dark': '#15803d', 25 | '--color-green-darker': '#166534', 26 | // 27 | '--color-blue': '#2563eb', 28 | '--color-blue-50': '#eff6ff', 29 | '--color-blue-100': '#dbeafe', 30 | '--color-blue-light': '#3b82f6', 31 | '--color-blue-lighter': '#60a5fa', 32 | '--color-blue-dark': '#1d4ed8', 33 | '--color-blue-darker': '#1e40af', 34 | // 35 | '--color-cyan': '#0891b2', 36 | '--color-cyan-50': '#ecfeff', 37 | '--color-cyan-100': '#cffafe', 38 | '--color-cyan-light': '#06b6d4', 39 | '--color-cyan-lighter': '#22d3ee', 40 | '--color-cyan-dark': '#0e7490', 41 | '--color-cyan-darker': '#155e75', 42 | // 43 | '--color-teal': '#0d9488', 44 | '--color-teal-50': '#f0fdfa', 45 | '--color-teal-100': '#ccfbf1', 46 | '--color-teal-light': '#14b8a6', 47 | '--color-teal-lighter': '#2dd4bf', 48 | '--color-teal-dark': '#0f766e', 49 | '--color-teal-darker': '#115e59', 50 | // 51 | '--color-fuchsia': '#c026d3', 52 | '--color-fuchsia-50': '#fdf4ff', 53 | '--color-fuchsia-100': '#fae8ff', 54 | '--color-fuchsia-light': '#d946ef', 55 | '--color-fuchsia-lighter': '#e879f9', 56 | '--color-fuchsia-dark': '#a21caf', 57 | '--color-fuchsia-darker': '#86198f', 58 | // 59 | '--color-violet': '#7c3aed', 60 | '--color-violet-50': '#f5f3ff', 61 | '--color-violet-100': '#ede9fe', 62 | '--color-violet-light': '#8b5cf6', 63 | '--color-violet-lighter': '#a78bfa', 64 | '--color-violet-dark': '#6d28d9', 65 | '--color-violet-darker': '#5b21b6', 66 | }, 67 | colors: { 68 | light: 'var(--light)', 69 | dark: 'var(--dark)', 70 | darker: 'var(--darker)', 71 | primary: { 72 | DEFAULT: 'var(--color-primary)', 73 | 50: 'var(--color-primary-50)', 74 | 100: 'var(--color-primary-100)', 75 | light: 'var(--color-primary-light)', 76 | lighter: 'var(--color-primary-lighter)', 77 | dark: 'var(--color-primary-dark)', 78 | darker: 'var(--color-primary-darker)', 79 | }, 80 | secondary: { 81 | DEFAULT: colors.fuchsia[600], 82 | 50: colors.fuchsia[50], 83 | 100: colors.fuchsia[100], 84 | light: colors.fuchsia[500], 85 | lighter: colors.fuchsia[400], 86 | dark: colors.fuchsia[700], 87 | darker: colors.fuchsia[800], 88 | }, 89 | success: { 90 | DEFAULT: colors.green[600], 91 | 50: colors.green[50], 92 | 100: colors.green[100], 93 | light: colors.green[500], 94 | lighter: colors.green[400], 95 | dark: colors.green[700], 96 | darker: colors.green[800], 97 | }, 98 | warning: { 99 | DEFAULT: colors.orange[600], 100 | 50: colors.orange[50], 101 | 100: colors.orange[100], 102 | light: colors.orange[500], 103 | lighter: colors.orange[400], 104 | dark: colors.orange[700], 105 | darker: colors.orange[800], 106 | }, 107 | danger: { 108 | DEFAULT: colors.red[600], 109 | 50: colors.red[50], 110 | 100: colors.red[100], 111 | light: colors.red[500], 112 | lighter: colors.red[400], 113 | dark: colors.red[700], 114 | darker: colors.red[800], 115 | }, 116 | info: { 117 | DEFAULT: colors.cyan[600], 118 | 50: colors.cyan[50], 119 | 100: colors.cyan[100], 120 | light: colors.cyan[500], 121 | lighter: colors.cyan[400], 122 | dark: colors.cyan[700], 123 | darker: colors.cyan[800], 124 | }, 125 | }, 126 | } 127 | 128 | module.exports = plugin.withOptions( 129 | function (options = {}) { 130 | const { colorVars = opts.colorVars } = options 131 | 132 | return function ({ addBase }) { 133 | addBase({ 134 | [[':root']]: colorVars, 135 | }) 136 | } 137 | }, 138 | 139 | function (options = {}) { 140 | const { 141 | lightColor = opts.colors.light, 142 | darkColor = opts.colors.dark, 143 | darkerColor = opts.colors.darker, 144 | primaryColors = opts.colors.primary, 145 | secondaryColors = opts.colors.secondary, 146 | successColors = opts.colors.success, 147 | warningColors = opts.colors.warning, 148 | dangerColors = opts.colors.danger, 149 | infoColors = opts.colors.info, 150 | } = options 151 | 152 | return { 153 | theme: { 154 | extend: { 155 | colors: { 156 | light: lightColor, 157 | dark: darkColor, 158 | darker: darkerColor, 159 | primary: primaryColors, 160 | secondary: secondaryColors, 161 | success: successColors, 162 | warning: warningColors, 163 | danger: dangerColors, 164 | info: infoColors, 165 | }, 166 | }, 167 | }, 168 | } 169 | }, 170 | ) 171 | -------------------------------------------------------------------------------- /src/support/hbs-helpers.js: -------------------------------------------------------------------------------- 1 | import { twMerge } from 'tailwind-merge' 2 | import { baseUrl } from '.' 3 | 4 | export default { 5 | eq: function (v1, v2) { 6 | return v1 === v2 7 | }, 8 | notEq: function (v1, v2) { 9 | return v1 != v2 10 | }, 11 | baseUrl: function (url = '') { 12 | if (url == '#') return '#' 13 | 14 | if (url == '/') { 15 | url = '' 16 | } 17 | 18 | return `${baseUrl}${url}` 19 | }, 20 | 21 | // Very naive but works. 22 | btn: function (context) { 23 | const { 24 | variant = '', 25 | icon = null, 26 | srText = '', 27 | startIcon = null, 28 | endIcon = null, 29 | className = null, 30 | attrs = '', 31 | iconClasses = '', 32 | iconSizeClasses = 'w-6 h-6', 33 | iconAttrs = '', 34 | text = '', 35 | type = 'button', 36 | href = null, 37 | } = context.hash 38 | 39 | let baseClasses = 40 | 'inline-flex items-center justify-center gap-2 rounded-md transition-colors font-medium select-none focus:outline-none focus:ring focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-dark disabled:cursor-not-allowed disabled:opacity-50 ' 41 | 42 | switch (variant) { 43 | case 'black': 44 | baseClasses += ' bg-black text-gray-200 hover:bg-gray-900 focus:ring-black' 45 | break 46 | case 'secondary': 47 | baseClasses += 48 | ' bg-gray-100 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 focus:ring-black dark:bg-gray-900 dark:text-gray-400' 49 | break 50 | case 'transparent': 51 | baseClasses += 52 | ' bg-transparent text-gray-700 focus:ring-primary dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark' 53 | break 54 | case 'primary-light': 55 | baseClasses += 56 | ' bg-primary-50 text-primary-lighter hover:bg-primary-100 hover:text-primary focus:ring-primary-lighter dark:bg-dark dark:hover:bg-primary-dark dark:hover:text-light' 57 | break 58 | 59 | default: 60 | baseClasses += ' bg-primary text-white hover:bg-primary-dark focus:ring-primary' 61 | break 62 | } 63 | 64 | if (icon) { 65 | baseClasses += ' p-2' 66 | } else { 67 | baseClasses += ' px-4 py-2' 68 | } 69 | 70 | const iconSpan = (icon) => 71 | `` 72 | 73 | const srt = srText ? `${srText}` : '' 74 | const i = icon ? iconSpan(icon) : '' 75 | const si = startIcon ? iconSpan(startIcon) : '' 76 | const ei = endIcon ? iconSpan(endIcon) : '' 77 | 78 | const tag = href ? 'a' : 'button' 79 | 80 | return ` 81 | <${tag} ${href ? 'href="' + href + '"' : ''} ${attrs} type="${type}" class="${twMerge(baseClasses, className)}"> 82 | ${srt} 83 | ${i} 84 | ${si} 85 | ${text} 86 | ${context.fn?.()} 87 | ${ei} 88 | 89 | ` 90 | }, 91 | 'base-card': function (context) { 92 | const { tag = 'div', attrs = '', className = '' } = context.hash 93 | 94 | let baseClasses = 'rounded-md border border-gray-300 bg-white dark:bg-darker dark:border-primary-darker' 95 | 96 | return ` 97 | <${tag} class="${twMerge(baseClasses, className)}" ${attrs}> 98 | ${context.fn?.()} 99 | 100 | ` 101 | }, 102 | } 103 | -------------------------------------------------------------------------------- /src/support/index.js: -------------------------------------------------------------------------------- 1 | export const getCssColor = (color) => { 2 | return getComputedStyle(document.body).getPropertyValue(`--color-${color}`).trim() 3 | } 4 | 5 | export const getScheme = () => { 6 | if (window.localStorage.getItem('dark')) { 7 | return JSON.parse(window.localStorage.getItem('dark')) 8 | } 9 | 10 | return !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 11 | } 12 | 13 | export const baseUrl = '/kwd-dashboard/' 14 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | import defaultTheme from 'tailwindcss/defaultTheme' 2 | import forms from '@tailwindcss/forms' 3 | import twPlugin from './plugins/tailwindcss' 4 | import { addIconSelectors } from '@iconify/tailwind' 5 | 6 | export default { 7 | darkMode: 'class', 8 | content: ['./src/**/*.{html,hbs,js}'], 9 | theme: { 10 | extend: { 11 | fontFamily: { 12 | sans: ['Noto Sans', ...defaultTheme.fontFamily.sans], 13 | }, 14 | }, 15 | }, 16 | plugins: [forms, addIconSelectors(['tabler']), twPlugin], 17 | } 18 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve, relative } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { glob } from 'glob' 4 | import handlebarsPlugin from 'vite-plugin-handlebars' 5 | import hbsHelpers from './src/support/hbs-helpers' 6 | import data from './src/data' 7 | import { baseUrl } from './src/support' 8 | 9 | 10 | const root = 'src/html' 11 | 12 | const entries = () => { 13 | const entries = {} 14 | 15 | glob.sync(`${root}/**/*.html`).forEach((p) => { 16 | let relPath = relative(root, p) 17 | 18 | entries[relPath] = p 19 | }) 20 | 21 | return entries 22 | } 23 | 24 | export default defineConfig({ 25 | plugins: [ 26 | handlebarsPlugin({ 27 | partialDirectory: [resolve(__dirname, 'src', 'html', 'hbs')], 28 | 29 | context: { 30 | ...data, 31 | env: process.env.NODE_ENV, 32 | }, 33 | 34 | helpers: hbsHelpers, 35 | }), 36 | ], 37 | root, 38 | base: baseUrl, 39 | publicDir: resolve(__dirname, 'public'), 40 | resolve: { 41 | alias: { 42 | '@': resolve(__dirname, 'src'), 43 | }, 44 | }, 45 | optimizeDeps: { 46 | entries: Object.keys(entries()), 47 | }, 48 | 49 | build: { 50 | target: 'esnext', 51 | outDir: resolve(__dirname, 'dist'), 52 | rollupOptions: { 53 | input: entries(), 54 | output: { 55 | assetFileNames: (chunkInfo) => { 56 | let outDir = '' 57 | 58 | if (/css$/.test(chunkInfo.name)) { 59 | outDir = 'css' 60 | } 61 | 62 | return `${outDir}/[name][extname]` 63 | }, 64 | chunkFileNames: 'js/[name]-[hash].js', 65 | entryFileNames: (e) => { 66 | let name = e.name.split('/').pop().replace('.html', '-page') 67 | 68 | return `js/${name}-[hash].js` 69 | }, 70 | }, 71 | }, 72 | }, 73 | }) 74 | --------------------------------------------------------------------------------