update
This commit is contained in:
61168
assets/script/daisyui.css
Normal file
61168
assets/script/daisyui.css
Normal file
File diff suppressed because it is too large
Load Diff
8
assets/script/daisyui.js
Normal file
8
assets/script/daisyui.js
Normal file
File diff suppressed because one or more lines are too long
@@ -1,179 +0,0 @@
|
|||||||
class LayoutCustomizer {
|
|
||||||
constructor() {
|
|
||||||
this.defaultConfig = {
|
|
||||||
theme: "system",
|
|
||||||
direction: "ltr",
|
|
||||||
fontFamily: "default",
|
|
||||||
sidebarTheme: "light",
|
|
||||||
fullscreen: false,
|
|
||||||
}
|
|
||||||
const configCache = localStorage.getItem("__NEXUS_CONFIG_v3.0__")
|
|
||||||
if (configCache) {
|
|
||||||
this.config = JSON.parse(configCache)
|
|
||||||
} else {
|
|
||||||
this.config = { ...this.defaultConfig }
|
|
||||||
}
|
|
||||||
this.html = document.documentElement
|
|
||||||
this.sidebar = document.getElementById("layout-sidebar")
|
|
||||||
|
|
||||||
window.config = this.config
|
|
||||||
}
|
|
||||||
|
|
||||||
updateTheme = () => {
|
|
||||||
localStorage.setItem("__NEXUS_CONFIG_v3.0__", JSON.stringify(this.config))
|
|
||||||
|
|
||||||
if (this.config.theme === "system") {
|
|
||||||
this.html.removeAttribute("data-theme")
|
|
||||||
} else {
|
|
||||||
this.html.setAttribute("data-theme", this.config.theme)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.sidebar) {
|
|
||||||
if (
|
|
||||||
this.config.sidebarTheme === "dark" &&
|
|
||||||
["light", "contrast"].includes(this.config.theme)
|
|
||||||
) {
|
|
||||||
this.sidebar.setAttribute("data-theme", this.config.sidebarTheme)
|
|
||||||
} else {
|
|
||||||
this.sidebar.removeAttribute("data-theme")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.html.setAttribute("data-sidebar-theme", this.config.sidebarTheme)
|
|
||||||
this.html.dir = this.config.direction
|
|
||||||
|
|
||||||
if (this.config.fullscreen) {
|
|
||||||
this.html.setAttribute("data-fullscreen", "")
|
|
||||||
} else {
|
|
||||||
this.html.removeAttribute("data-fullscreen")
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.config.fontFamily !== "default") {
|
|
||||||
this.html.setAttribute("data-font-family", config.fontFamily)
|
|
||||||
} else {
|
|
||||||
this.html.removeAttribute("data-font-family")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
initEventListener = () => {
|
|
||||||
const themeControls = document.querySelectorAll("[data-theme-control]")
|
|
||||||
themeControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
let theme = control.getAttribute("data-theme-control") ?? "light"
|
|
||||||
if (theme === "toggle") {
|
|
||||||
theme = this.config.theme === "light" ? "dark" : "light"
|
|
||||||
}
|
|
||||||
this.config.theme = theme
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const sidebarThemeControls = document.querySelectorAll("[data-sidebar-theme-control]")
|
|
||||||
sidebarThemeControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
this.config.sidebarTheme =
|
|
||||||
control.getAttribute("data-sidebar-theme-control") ?? "light"
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const fontFamilyControls = document.querySelectorAll("[data-font-family-control]")
|
|
||||||
fontFamilyControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
this.config.fontFamily =
|
|
||||||
control.getAttribute("data-font-family-control") ?? "default"
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const dirControls = document.querySelectorAll("[data-dir-control]")
|
|
||||||
dirControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
this.config.direction = control.getAttribute("data-dir-control") ?? "ltr"
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const fullscreenControls = document.querySelectorAll("[data-fullscreen-control]")
|
|
||||||
fullscreenControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
if (document.fullscreenElement != null) {
|
|
||||||
this.config.fullscreen = false
|
|
||||||
document.exitFullscreen()
|
|
||||||
} else {
|
|
||||||
this.config.fullscreen = true
|
|
||||||
this.html.requestFullscreen()
|
|
||||||
}
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const resetControls = document.querySelectorAll("[data-reset-control]")
|
|
||||||
resetControls.forEach((control) => {
|
|
||||||
control.addEventListener("click", () => {
|
|
||||||
this.config = { ...this.defaultConfig }
|
|
||||||
if (document.fullscreenElement != null) {
|
|
||||||
document.exitFullscreen()
|
|
||||||
}
|
|
||||||
this.updateTheme()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
const fullscreenMedia = window.matchMedia("(display-mode: fullscreen)")
|
|
||||||
const fullscreenListener = () => {
|
|
||||||
this.config.fullscreen = fullscreenMedia.matches
|
|
||||||
this.updateTheme()
|
|
||||||
}
|
|
||||||
fullscreenMedia.addEventListener("change", fullscreenListener)
|
|
||||||
fullscreenListener()
|
|
||||||
}
|
|
||||||
|
|
||||||
initLeftmenu = () => {
|
|
||||||
const initMenuActivation = () => {
|
|
||||||
const menuItems = document.querySelectorAll(".sidebar-menu-activation a")
|
|
||||||
let currentURL = window.location.href
|
|
||||||
if (window.location.pathname === "/") {
|
|
||||||
currentURL += "dashboards-ecommerce.html"
|
|
||||||
}
|
|
||||||
menuItems.forEach((item) => {
|
|
||||||
if (item.href === currentURL) {
|
|
||||||
item.classList.add("active")
|
|
||||||
const parentElement1 = item.parentElement.parentElement
|
|
||||||
if (parentElement1.classList.contains("collapse-content")) {
|
|
||||||
const inputElement1 = parentElement1.parentElement.querySelector("input")
|
|
||||||
if (inputElement1) {
|
|
||||||
inputElement1.checked = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollToActiveMenu = () => {
|
|
||||||
const simplebarEl = document.querySelector("#layout-sidebar [data-simplebar]")
|
|
||||||
const activatedItem = document.querySelector("#layout-sidebar .menu a.active")
|
|
||||||
if (simplebarEl && activatedItem) {
|
|
||||||
const simplebar = new SimpleBar(simplebarEl)
|
|
||||||
const top = activatedItem?.getBoundingClientRect().top
|
|
||||||
if (top && top !== 0) {
|
|
||||||
simplebar.getScrollElement().scrollTo({ top: top - 300, behavior: "smooth" })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
initMenuActivation()
|
|
||||||
scrollToActiveMenu()
|
|
||||||
}
|
|
||||||
|
|
||||||
afterInit = () => {
|
|
||||||
this.initEventListener()
|
|
||||||
this.initLeftmenu()
|
|
||||||
}
|
|
||||||
|
|
||||||
init = () => {
|
|
||||||
this.updateTheme()
|
|
||||||
window.addEventListener("DOMContentLoaded", this.afterInit)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
new LayoutCustomizer().init()
|
|
||||||
@@ -461,7 +461,7 @@ strong {
|
|||||||
--color-base-200: oklch(98% 0 0);
|
--color-base-200: oklch(98% 0 0);
|
||||||
--color-base-300: oklch(95% 0 0);
|
--color-base-300: oklch(95% 0 0);
|
||||||
--color-base-content: oklch(21% 0.006 285.885);
|
--color-base-content: oklch(21% 0.006 285.885);
|
||||||
--color-primary: oklch(45% 0.24 277.023);
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: oklch(93% 0.034 272.788);
|
--color-primary-content: oklch(93% 0.034 272.788);
|
||||||
--color-secondary: oklch(65% 0.241 354.308);
|
--color-secondary: oklch(65% 0.241 354.308);
|
||||||
--color-secondary-content: oklch(94% 0.028 342.258);
|
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||||
@@ -493,7 +493,7 @@ strong {
|
|||||||
--color-base-200: oklch(23.26% 0.014 253.1);
|
--color-base-200: oklch(23.26% 0.014 253.1);
|
||||||
--color-base-300: oklch(21.15% 0.012 254.09);
|
--color-base-300: oklch(21.15% 0.012 254.09);
|
||||||
--color-base-content: oklch(97.807% 0.029 256.847);
|
--color-base-content: oklch(97.807% 0.029 256.847);
|
||||||
--color-primary: oklch(58% 0.233 277.117);
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: oklch(96% 0.018 272.314);
|
--color-primary-content: oklch(96% 0.018 272.314);
|
||||||
--color-secondary: oklch(65% 0.241 354.308);
|
--color-secondary: oklch(65% 0.241 354.308);
|
||||||
--color-secondary-content: oklch(94% 0.028 342.258);
|
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||||
@@ -526,7 +526,7 @@ strong {
|
|||||||
--color-base-200: oklch(98% 0 0);
|
--color-base-200: oklch(98% 0 0);
|
||||||
--color-base-300: oklch(95% 0 0);
|
--color-base-300: oklch(95% 0 0);
|
||||||
--color-base-content: oklch(21% 0.006 285.885);
|
--color-base-content: oklch(21% 0.006 285.885);
|
||||||
--color-primary: oklch(45% 0.24 277.023);
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: oklch(93% 0.034 272.788);
|
--color-primary-content: oklch(93% 0.034 272.788);
|
||||||
--color-secondary: oklch(65% 0.241 354.308);
|
--color-secondary: oklch(65% 0.241 354.308);
|
||||||
--color-secondary-content: oklch(94% 0.028 342.258);
|
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||||
@@ -558,7 +558,7 @@ strong {
|
|||||||
--color-base-200: oklch(23.26% 0.014 253.1);
|
--color-base-200: oklch(23.26% 0.014 253.1);
|
||||||
--color-base-300: oklch(21.15% 0.012 254.09);
|
--color-base-300: oklch(21.15% 0.012 254.09);
|
||||||
--color-base-content: oklch(97.807% 0.029 256.847);
|
--color-base-content: oklch(97.807% 0.029 256.847);
|
||||||
--color-primary: oklch(58% 0.233 277.117);
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: oklch(96% 0.018 272.314);
|
--color-primary-content: oklch(96% 0.018 272.314);
|
||||||
--color-secondary: oklch(65% 0.241 354.308);
|
--color-secondary: oklch(65% 0.241 354.308);
|
||||||
--color-secondary-content: oklch(94% 0.028 342.258);
|
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||||
@@ -620,7 +620,7 @@ strong {
|
|||||||
--color-base-200: #22262a;
|
--color-base-200: #22262a;
|
||||||
--color-base-300: #2c3034;
|
--color-base-300: #2c3034;
|
||||||
--color-base-content: #f0f4f8;
|
--color-base-content: #f0f4f8;
|
||||||
--color-primary: #378dff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #b071ff;
|
--color-secondary: #b071ff;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -659,7 +659,7 @@ strong {
|
|||||||
--color-base-200: #22262a;
|
--color-base-200: #22262a;
|
||||||
--color-base-300: #2c3034;
|
--color-base-300: #2c3034;
|
||||||
--color-base-content: #f0f4f8;
|
--color-base-content: #f0f4f8;
|
||||||
--color-primary: #378dff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #b071ff;
|
--color-secondary: #b071ff;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -698,7 +698,7 @@ strong {
|
|||||||
--color-base-200: #eef0f2;
|
--color-base-200: #eef0f2;
|
||||||
--color-base-300: #dcdee0;
|
--color-base-300: #dcdee0;
|
||||||
--color-base-content: #1e2328;
|
--color-base-content: #1e2328;
|
||||||
--color-primary: #167bff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #9c5de8;
|
--color-secondary: #9c5de8;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -739,7 +739,7 @@ strong {
|
|||||||
--color-base-200: #eef0f2;
|
--color-base-200: #eef0f2;
|
||||||
--color-base-300: #dcdee0;
|
--color-base-300: #dcdee0;
|
||||||
--color-base-content: #1e2328;
|
--color-base-content: #1e2328;
|
||||||
--color-primary: #167bff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #9c5de8;
|
--color-secondary: #9c5de8;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -777,7 +777,7 @@ strong {
|
|||||||
--color-base-200: #eaecfa;
|
--color-base-200: #eaecfa;
|
||||||
--color-base-300: #e0e2f8;
|
--color-base-300: #e0e2f8;
|
||||||
--color-base-content: #191e28;
|
--color-base-content: #191e28;
|
||||||
--color-primary: #167bff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #9c5de8;
|
--color-secondary: #9c5de8;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -811,7 +811,7 @@ strong {
|
|||||||
--color-base-200: #343842;
|
--color-base-200: #343842;
|
||||||
--color-base-300: #3c404a;
|
--color-base-300: #3c404a;
|
||||||
--color-base-content: #f0f4f8;
|
--color-base-content: #f0f4f8;
|
||||||
--color-primary: #378dff;
|
--color-primary: #0041e8;
|
||||||
--color-primary-content: #fff;
|
--color-primary-content: #fff;
|
||||||
--color-secondary: #b071ff;
|
--color-secondary: #b071ff;
|
||||||
--color-secondary-content: #fff;
|
--color-secondary-content: #fff;
|
||||||
@@ -2450,13 +2450,14 @@ strong {
|
|||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
--btn-bg: var(--btn-color, var(--color-base-200));
|
--btn-bg: var(--btn-color, var(--color-base-200));
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
--btn-bg: color-mix(
|
--btn-bg: color-mix(
|
||||||
in oklab,
|
in oklab,
|
||||||
var(--btn-color, var(--color-base-200)),
|
var(--btn-color, var(--color-primary)),
|
||||||
#000 7%
|
#0041e8 7%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2468,9 +2469,22 @@ strong {
|
|||||||
outline-style: solid;
|
outline-style: solid;
|
||||||
}
|
}
|
||||||
.btn:active:not(.btn-active) {
|
.btn:active:not(.btn-active) {
|
||||||
--btn-bg: var(--btn-color, var(--color-base-200));
|
--btn-bg: var(--btn-color, var(--color-primary));
|
||||||
translate: 0 0.5px;
|
translate: 0 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-view {
|
||||||
|
border: 1px solid #0041e8;
|
||||||
|
background: #f5f7ff;
|
||||||
|
color: #0041e8 !important;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-view:hover {
|
||||||
|
background: #0041e8;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.btn:active:not(.btn-active) {
|
.btn:active:not(.btn-active) {
|
||||||
--btn-bg: color-mix(
|
--btn-bg: color-mix(
|
||||||
@@ -2481,13 +2495,13 @@ strong {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn:active:not(.btn-active) {
|
.btn:active:not(.btn-active) {
|
||||||
--btn-border: var(--btn-color, var(--color-base-200));
|
--btn-border: var(--btn-color, var(--color-primary));
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.btn:active:not(.btn-active) {
|
.btn:active:not(.btn-active) {
|
||||||
--btn-border: color-mix(
|
--btn-border: color-mix(
|
||||||
in oklab,
|
in oklab,
|
||||||
var(--btn-color, var(--color-base-200)),
|
var(--btn-color, var(--color-primary)),
|
||||||
#000 7%
|
#000 7%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -4045,7 +4059,7 @@ strong {
|
|||||||
.menu-horizontal li .submenu {
|
.menu-horizontal li .submenu {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 150%;
|
top: 125%;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
@@ -4075,6 +4089,10 @@ strong {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group:hover .text-white {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
:where(.menu-horizontal > li:not(.menu-title) > details > ul) {
|
:where(.menu-horizontal > li:not(.menu-title) > details > ul) {
|
||||||
border-radius: var(--radius-box);
|
border-radius: var(--radius-box);
|
||||||
background-color: var(--color-base-100);
|
background-color: var(--color-base-100);
|
||||||
@@ -4858,20 +4876,21 @@ strong {
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.btn-active {
|
.btn-active {
|
||||||
--btn-bg: var(--btn-color, var(--color-base-200));
|
--btn-bg: var(--btn-color, var(--color-primary));
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.btn-active {
|
.btn-active {
|
||||||
--btn-bg: color-mix(
|
--btn-bg: color-mix(
|
||||||
in oklab,
|
in oklab,
|
||||||
var(--btn-color, var(--color-base-200)),
|
var(--btn-color, var(--color-primary)),
|
||||||
#000 7%
|
#fff 7%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-active {
|
.btn-active {
|
||||||
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
--btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.isolate {
|
.isolate {
|
||||||
isolation: isolate;
|
isolation: isolate;
|
||||||
@@ -4920,6 +4939,12 @@ strong {
|
|||||||
.col-span-3 {
|
.col-span-3 {
|
||||||
grid-column: span 3 / span 3;
|
grid-column: span 3 / span 3;
|
||||||
}
|
}
|
||||||
|
.col-span-4 {
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.col-span-8 {
|
||||||
|
grid-column: span 8 / span 8;
|
||||||
|
}
|
||||||
.col-span-12 {
|
.col-span-12 {
|
||||||
grid-column: span 12 / span 12;
|
grid-column: span 12 / span 12;
|
||||||
}
|
}
|
||||||
@@ -5833,24 +5858,7 @@ strong {
|
|||||||
border-radius: 3.40282e38px;
|
border-radius: 3.40282e38px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.line-clamp-1 {
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.line-clamp-2 {
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.line-clamp-3 {
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.mask {
|
.mask {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -5891,6 +5899,7 @@ strong {
|
|||||||
.table {
|
.table {
|
||||||
display: table;
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aspect-square {
|
.aspect-square {
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
}
|
}
|
||||||
@@ -6170,6 +6179,9 @@ strong {
|
|||||||
.h-screen {
|
.h-screen {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
.h-\[40px\] {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
.max-h-0 {
|
.max-h-0 {
|
||||||
max-height: calc(var(--spacing) * 0);
|
max-height: calc(var(--spacing) * 0);
|
||||||
}
|
}
|
||||||
@@ -14974,6 +14986,33 @@ strong {
|
|||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
.line-clamp-1 {
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-clamp-2 {
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-clamp-3 {
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-clamp-4 {
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
.animated-text {
|
.animated-text {
|
||||||
animation: var(--animate-text-color);
|
animation: var(--animate-text-color);
|
||||||
color: #0000;
|
color: #0000;
|
||||||
@@ -16539,3 +16578,42 @@ html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
|
|||||||
.bg-menu {
|
.bg-menu {
|
||||||
background: #004e99;
|
background: #004e99;
|
||||||
}
|
}
|
||||||
|
.line-clamp-1 {
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.line-clamp-2 {
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.line-clamp-3 {
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.line-clamp-4 {
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dash {
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dash:hover {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
color: #fff;
|
||||||
|
background: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo-list td {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
return array(
|
return array(
|
||||||
'enable' => true ,
|
'enable' => true ,
|
||||||
"name" => "Khách hàng",
|
"name" => "Khách hàng",
|
||||||
"icon_class" => '',
|
"icon_class" => 'iconify lucide--user tw-tsa',
|
||||||
"url" => "",
|
"url" => "",
|
||||||
"menu" => array(
|
"menu" => array(
|
||||||
array(
|
array(
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
return array(
|
return array(
|
||||||
'enable' => true ,
|
'enable' => true ,
|
||||||
"name" => "Đại lý",
|
"name" => "Đại lý",
|
||||||
"icon_class" => 'iconify lucide--handshake tw-tsa',
|
"icon_class" => 'iconify lucide--shopping-bag tw-tsa',
|
||||||
"url" => "",
|
"url" => "",
|
||||||
"menu" => array(
|
"menu" => array(
|
||||||
0 => array(
|
0 => array(
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
return array(
|
return array(
|
||||||
'enable' => true ,
|
'enable' => true ,
|
||||||
"name" => "Trả góp",
|
"name" => "Trả góp",
|
||||||
|
"icon_class" => "iconify lucide--handshake tw-tsa",
|
||||||
"url" => "",
|
"url" => "",
|
||||||
"menu" => array(
|
"menu" => array(
|
||||||
array(
|
array(
|
||||||
|
|||||||
@@ -1,501 +1,436 @@
|
|||||||
<!-- Start: Dashboard Stats Widget -->
|
<!-- Start: Dashboard Stats Widget -->
|
||||||
|
|
||||||
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-4">
|
<div class="grid gap-5 grid-cols-12">
|
||||||
<div class="card bg-base-100 shadow">
|
<div class="col-span-8">
|
||||||
<div class="card-body gap-2">
|
<div class="grid gap-3 lg:grid-cols-2 xl:grid-cols-4">
|
||||||
<div class="flex items-start justify-between gap-2 text-sm">
|
<div class="card bg-base-100 shadow">
|
||||||
<div>
|
<div class="card-body gap-2">
|
||||||
<p class="text-base-content/80 font-medium">
|
<div class="flex items-start justify-between gap-2 text-sm">
|
||||||
Doanh thu
|
<div>
|
||||||
</p>
|
<p class="text-base-content/80 font-medium h-[40px]">
|
||||||
<div class="mt-3 flex items-center gap-2">
|
Đơn hàng mới
|
||||||
<p class="inline text-2xl font-semibold">
|
</p>
|
||||||
$587.54
|
<div class="mt-3 flex items-center gap-2">
|
||||||
</p>
|
<p class="inline text-2xl font-semibold">
|
||||||
|
10.000.000
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||||
|
<span class="iconify lucide--circle-dollar-sign size-5"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 mt-2">
|
||||||
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
||||||
<span class="iconify lucide--arrow-up size-3.5"></span>
|
<span class="iconify lucide--arrow-up size-3.5"></span>
|
||||||
10.8%
|
10.8%
|
||||||
</div>
|
</div>
|
||||||
|
<p class="text-base-content/60 text-sm">
|
||||||
|
Hôm qua
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
|
||||||
<span class="iconify lucide--circle-dollar-sign size-5"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-base-content/60 text-sm">
|
<div class="card bg-base-100 shadow">
|
||||||
vs.
|
<div class="card-body gap-2">
|
||||||
<span class="mx-1">$494.16</span>
|
<div class="flex items-start justify-between gap-2 text-sm">
|
||||||
last period
|
<div>
|
||||||
</p>
|
<p class="text-base-content/80 font-medium">
|
||||||
</div>
|
Khách hàng liên hệ
|
||||||
</div>
|
qua website
|
||||||
<div class="card bg-base-100 shadow">
|
</p>
|
||||||
<div class="card-body gap-2">
|
<div class="mt-3 flex items-center gap-2">
|
||||||
<div class="flex items-start justify-between gap-2 text-sm">
|
<p class="inline text-2xl font-semibold">
|
||||||
<div>
|
1.000.000
|
||||||
<p class="text-base-content/80 font-medium">
|
</p>
|
||||||
Khách hàng liên hệ
|
</div>
|
||||||
</p>
|
</div>
|
||||||
<div class="mt-3 flex items-center gap-2">
|
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||||
<p class="inline text-2xl font-semibold">
|
<span class="iconify lucide--package size-5"></span>
|
||||||
4500
|
|
||||||
</p>
|
|
||||||
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
|
||||||
<span class="iconify lucide--arrow-up size-3.5"></span>
|
|
||||||
21.2%
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex items-center gap-3 mt-2">
|
||||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
||||||
<span class="iconify lucide--package size-5"></span>
|
<span class="iconify lucide--arrow-up size-3.5"></span>
|
||||||
|
5.4%
|
||||||
|
</div>
|
||||||
|
<p class="text-base-content/60 text-sm">
|
||||||
|
Hôm qua
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-base-content/60 text-sm">
|
<div class="card bg-base-100 shadow">
|
||||||
vs.
|
<div class="card-body gap-2">
|
||||||
<span class="mx-1">3845</span>
|
<div class="flex items-start justify-between gap-2 text-sm">
|
||||||
last period
|
<div>
|
||||||
</p>
|
<p class="text-base-content/80 font-medium h-[40px]">
|
||||||
</div>
|
Đơn trả góp
|
||||||
</div>
|
</p>
|
||||||
<div class="card bg-base-100 shadow">
|
<div class="mt-3 flex items-center gap-2">
|
||||||
<div class="card-body gap-2">
|
<p class="inline text-2xl font-semibold">
|
||||||
<div class="flex items-start justify-between gap-2 text-sm">
|
600.000
|
||||||
<div>
|
</p>
|
||||||
<p class="text-base-content/80 font-medium">
|
</div>
|
||||||
Customers
|
</div>
|
||||||
</p>
|
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||||
<div class="mt-3 flex items-center gap-2">
|
<span class="iconify lucide--users size-5"></span>
|
||||||
<p class="inline text-2xl font-semibold">
|
</div>
|
||||||
2242
|
</div>
|
||||||
</p>
|
<div class="flex items-center gap-3 mt-2">
|
||||||
<div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
|
<div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
|
||||||
<span class="iconify lucide--arrow-down size-3.5"></span>
|
<span class="iconify lucide--arrow-down size-3.5"></span>
|
||||||
-6.8%
|
-6.8%
|
||||||
</div>
|
</div>
|
||||||
|
<p class="text-base-content/60 text-sm">
|
||||||
|
Hôm qua
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
|
||||||
<span class="iconify lucide--users size-5"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-base-content/60 text-sm">
|
<div class="card bg-base-100 shadow">
|
||||||
vs.
|
<div class="card-body gap-2">
|
||||||
<span class="mx-1">2448</span>
|
<div class="flex items-start justify-between gap-2 text-sm">
|
||||||
last period
|
<div>
|
||||||
</p>
|
<p class="text-base-content/80 font-medium h-[40px]">
|
||||||
</div>
|
Đơn hoàn trả
|
||||||
</div>
|
</p>
|
||||||
<div class="card bg-base-100 shadow">
|
<div class="mt-3 flex items-center gap-2">
|
||||||
<div class="card-body gap-2">
|
<p class="inline text-2xl font-semibold">
|
||||||
<div class="flex items-start justify-between gap-2 text-sm">
|
30.000
|
||||||
<div>
|
</p>
|
||||||
<p class="text-base-content/80 font-medium">
|
</div>
|
||||||
Spending
|
</div>
|
||||||
</p>
|
<div class="bg-base-200 rounded-box flex items-center p-2">
|
||||||
<div class="mt-3 flex items-center gap-2">
|
<span class="iconify lucide--eraser size-5"></span>
|
||||||
<p class="inline text-2xl font-semibold">
|
</div>
|
||||||
$112.54
|
</div>
|
||||||
</p>
|
<div class="flex items-center gap-3 mt-2">
|
||||||
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
<div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
|
||||||
<span class="iconify lucide--arrow-up size-3.5"></span>
|
<span class="iconify lucide--arrow-up size-3.5"></span>
|
||||||
8.5%
|
8.5%
|
||||||
</div>
|
</div>
|
||||||
|
<p class="text-base-content/60 text-sm">
|
||||||
|
Hôm qua
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-base-200 rounded-box flex items-center p-2">
|
|
||||||
<span class="iconify lucide--eraser size-5"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-base-content/60 text-sm">
|
|
||||||
vs.
|
|
||||||
<span class="mx-1">$98.14</span>
|
|
||||||
last period
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- End: Dashboard Stats Widget -->
|
||||||
</div>
|
<div class="mt-3 grid grid-cols-1 gap-3 xl:grid-cols-12">
|
||||||
|
<div class="xl:col-span-7">
|
||||||
|
<!-- Start: Revenue Statistic -->
|
||||||
|
|
||||||
<!-- End: Dashboard Stats Widget -->
|
<div class="card bg-base-100 shadow">
|
||||||
|
<div class="card-body px-0 pb-0">
|
||||||
<div class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-12">
|
<div class="px-6">
|
||||||
<div class="xl:col-span-7">
|
<div class="flex items-start justify-between">
|
||||||
<!-- Start: Revenue Statistic -->
|
<span class="font-medium">
|
||||||
|
Doanh thu
|
||||||
<div class="card bg-base-100 shadow">
|
</span>
|
||||||
<div class="card-body px-0 pb-0">
|
<div class="tabs tabs-box tabs-xs hidden sm:block">
|
||||||
<div class="px-6">
|
<div class="tab false px-3">Ngày</div>
|
||||||
<div class="flex items-start justify-between">
|
<div class="tab false px-3">Tháng</div>
|
||||||
<span class="font-medium">
|
<div class="tab tab-active px-3">Năm</div>
|
||||||
Revenue Statistics
|
</div>
|
||||||
</span>
|
</div>
|
||||||
<div class="tabs tabs-box tabs-xs hidden sm:block">
|
<div class="mt-3">
|
||||||
<div class="tab false px-3">Day</div>
|
<div class="flex items-center gap-3">
|
||||||
<div class="tab false px-3">Month</div>
|
<span class="text-4xl font-semibold">
|
||||||
<div class="tab tab-active px-3">Year</div>
|
184.78K
|
||||||
|
</span>
|
||||||
|
<span class="text-success font-medium">
|
||||||
|
+3.24%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-base-content/60 text-sm">
|
||||||
|
Tổng doanh thu trong năm nay
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="revenue-statics-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
</div>
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="text-4xl font-semibold">
|
<!-- End: Revenue Statistic -->
|
||||||
$184.78K
|
</div>
|
||||||
</span>
|
<div class="xl:col-span-5">
|
||||||
<span class="text-success font-medium">
|
<!-- Start: Customer Acquisition -->
|
||||||
+3.24%
|
|
||||||
|
<div class="card bg-base-100 shadow">
|
||||||
|
<div class="card-body p-0">
|
||||||
|
<div class="flex items-center justify-between px-5 pt-5">
|
||||||
|
<span class="font-medium">
|
||||||
|
Truy cập khách hàng
|
||||||
</span>
|
</span>
|
||||||
|
<div class="inline-flex items-center gap-2">
|
||||||
|
<div class="text-base-content/60 w-6 border border-dashed"></div>
|
||||||
|
<span class="text-base-content/80 text-xs">
|
||||||
|
Dự đoán
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 py-3">
|
||||||
|
<div class="divide-base-300 grid grid-cols-2 gap-5 px-5 sm:grid-cols-3 sm:divide-x">
|
||||||
|
<div class="text-center">
|
||||||
|
<p>Advertise</p>
|
||||||
|
<p class="mt-0.5 text-xl font-medium">
|
||||||
|
$148
|
||||||
|
</p>
|
||||||
|
<div class="text-success mt-0.5 inline-flex items-center gap-1">
|
||||||
|
<span class="iconify lucide--arrow-up size-3"></span>
|
||||||
|
<p class="text-xs">4.78%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden text-center sm:block">
|
||||||
|
<p>Customers</p>
|
||||||
|
<p class="mt-0.5 text-xl font-medium">
|
||||||
|
427
|
||||||
|
</p>
|
||||||
|
<div class="text-success mt-0.5 inline-flex items-center gap-1">
|
||||||
|
<span class="iconify lucide--arrow-up size-3"></span>
|
||||||
|
<p class="text-xs">3.15%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="-mt-25 sm:mx-5">
|
||||||
|
<div id="customer-acquisition-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-base-content/60 text-sm">
|
|
||||||
Total income in this year
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="revenue-statics-chart"></div>
|
|
||||||
|
<!-- End: Customer Acquisition -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-3">
|
||||||
<!-- End: Revenue Statistic -->
|
<!-- Start: Lịch sử chỉnh sửa -->
|
||||||
|
<div aria-label="Card" class="card bg-base-100 shadow">
|
||||||
|
<div class="card-body p-0">
|
||||||
|
<div class="flex items-center gap-3 px-5 pt-5">
|
||||||
|
<span class="iconify lucide--shopping-bag size-4.5"></span>
|
||||||
|
<span class="font-medium">Lịch sử chỉnh sửa</span>
|
||||||
|
<button class="btn btn-outline btn-sm ms-auto btn-view">
|
||||||
|
Xem danh sách
|
||||||
|
<span class="iconify lucide--plus-circle size-3.5"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 overflow-auto">
|
||||||
|
<table class="table *:text-nowrap">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<td> STT </td>
|
||||||
|
<td> Người dùng </td>
|
||||||
|
<td> Nội dung </td>
|
||||||
|
<td> Thời gian </td>
|
||||||
|
<td> Xem chi tiết </td>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td> uyentt@hurasoft.com </td>
|
||||||
|
<td> Chỉnh sửa trang chủ website laptoptcc </td>
|
||||||
|
<td> 24/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<a href="" class="btn btn-outline btn-view">Xem</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td> uyentt@hurasoft.com </td>
|
||||||
|
<td> Chỉnh sửa trang chủ website laptoptcc </td>
|
||||||
|
<td> 24/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<a href="" class="btn btn-outline btn-view">Xem</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td> uyentt@hurasoft.com </td>
|
||||||
|
<td> Chỉnh sửa trang chủ website laptoptcc </td>
|
||||||
|
<td> 24/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<a href="" class="btn btn-outline btn-view">Xem</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td> uyentt@hurasoft.com </td>
|
||||||
|
<td> Chỉnh sửa trang chủ website laptoptcc </td>
|
||||||
|
<td> 24/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<a href="" class="btn btn-outline btn-view">Xem</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End: Recent Orders -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="xl:col-span-5">
|
<div class="col-span-4">
|
||||||
<!-- Start: Customer Acquisition -->
|
<div class="bg-white shadow p-3 rounded-sm">
|
||||||
|
<div id="js-admin-home-tab" class="admin-home-tab flex items-center justify-end mb-3">
|
||||||
|
<a href="#js-report-most-viewed-products" class=" btn btn-sm btn-active">Sản phẩm xem nhiều</a>
|
||||||
|
<a href="#js-report-introduce-web" class="btn btn-sm"> Web giới thiệu</a>
|
||||||
|
<a href="#js-report-key-word" class="btn btn-sm"> Từ khóa</a>
|
||||||
|
<a href="#js-report-article" class="btn btn-sm"> Bài viết</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="card bg-base-100 shadow">
|
<div class="home-report-holder block overflow-x-auto rounded-box border border-base-content/5 bg-base-10"
|
||||||
<div class="card-body p-0">
|
id="js-report-most-viewed-products">
|
||||||
<div class="flex items-center justify-between px-5 pt-5">
|
<table class="table">
|
||||||
<span class="font-medium">
|
<thead class="bg-base-200">
|
||||||
Customer Acquisition
|
<td width="50">STT</td>
|
||||||
</span>
|
<td>Sản phẩm</td>
|
||||||
<div class="inline-flex items-center gap-2">
|
<td width="75">Lượt xem</td>
|
||||||
<div class="text-base-content/60 w-6 border border-dashed"></div>
|
</thead>
|
||||||
<span class="text-base-content/80 text-xs">
|
|
||||||
Prediction
|
<tbody>
|
||||||
</span>
|
<tr>
|
||||||
</div>
|
<td> 1 </td>
|
||||||
|
<td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
|
||||||
|
Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a> </td>
|
||||||
|
<td> 30.000 </td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>2
|
||||||
|
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
|
||||||
|
Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a>
|
||||||
|
<td>30.000
|
||||||
|
<tr>
|
||||||
|
<td>3
|
||||||
|
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop
|
||||||
|
Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a>
|
||||||
|
<td>30.000
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-report-holder hidden" id="js-report-introduce-web">
|
||||||
|
<b class="text-23">Truy cập website</b>
|
||||||
|
<div class="px-5 pt-5 pb-2">
|
||||||
|
<div id="gradient-donut-chart"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 py-3">
|
</div>
|
||||||
<div class="divide-base-300 grid grid-cols-2 gap-5 px-5 sm:grid-cols-3 sm:divide-x">
|
<div class="home-report-holder hidden" id="js-report-key-word">
|
||||||
<div class="text-center">
|
<div class="flex flex-wrap gap-2">
|
||||||
<p>Advertise</p>
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
<p class="mt-0.5 text-xl font-medium">
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
$148
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
</p>
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
<div class="text-success mt-0.5 inline-flex items-center gap-1">
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
<span class="iconify lucide--arrow-up size-3"></span>
|
<a href="" class="btn btn btn-dash btn-outline">Laptop, Máy Tính Xách Tay</a>
|
||||||
<p class="text-xs">4.78%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hidden text-center sm:block">
|
|
||||||
<p>Customers</p>
|
|
||||||
<p class="mt-0.5 text-xl font-medium">
|
|
||||||
427
|
|
||||||
</p>
|
|
||||||
<div class="text-success mt-0.5 inline-flex items-center gap-1">
|
|
||||||
<span class="iconify lucide--arrow-up size-3"></span>
|
|
||||||
<p class="text-xs">3.15%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="-mt-25 sm:mx-5">
|
|
||||||
<div id="customer-acquisition-chart"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-report-holder hidden" id="js-report-article">
|
||||||
|
<table class="table">
|
||||||
|
<thead class="bg-base-200">
|
||||||
|
<td>STT</td>
|
||||||
|
<td>Bài viết</td>
|
||||||
|
<td>Lượt xem</td>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td> <a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a> </td>
|
||||||
|
<td class="link-primary"> 30.000 </td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>2
|
||||||
|
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a>
|
||||||
|
<td class="link-primary">30.000</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>3
|
||||||
|
<td><a href="" class="line-clamp-1"> Laptop Asus ZenBook UX3402VALaptop Asus ZenBook
|
||||||
|
UX3402VALaptop
|
||||||
|
Asus ZenBook UX3402VA </a>
|
||||||
|
<td class="link-primary">30.000</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white shadow p-3 mt-3 rounded-sm">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<b class="font-medium">Ghi nhắc việc làm cá nhân</b>
|
||||||
|
<input type="date" value="2025-11-26" class="input w-[30%]" />
|
||||||
|
</div>
|
||||||
|
<form class="flex items-center justify-between mt-3">
|
||||||
|
<input type="text" placeholder="Nhập việc cần làm của bạn" class="input w-[78%]" />
|
||||||
|
<button type="button" class="btn btn-active">Tạo mới</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto border border-base-content/5 mt-3">
|
||||||
|
<table class="table">
|
||||||
|
<thead class="bg-base-200">
|
||||||
|
<td> STT </td>
|
||||||
|
<td> Nội dung </td>
|
||||||
|
<td> Hết hạn </td>
|
||||||
|
<td> Trạng thái </td>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td> 1 </td>
|
||||||
|
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
|
||||||
|
<td> 28/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-success badge-sm badge-soft whitespace-nowrap">Đang triển khai
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 2 </td>
|
||||||
|
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
|
||||||
|
<td> 28/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-error badge-sm badge-soft whitespace-nowrap">Đang triển khai
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 3 </td>
|
||||||
|
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
|
||||||
|
<td> 28/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-sm badge-ghost whitespace-nowrap">Đang triển khai</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td> 4 </td>
|
||||||
|
<td class="whitespace-nowrap"> Sửa trang chủ websiteLaptoptcc </td>
|
||||||
|
<td> 28/11/2023 </td>
|
||||||
|
<td>
|
||||||
|
<div class="badge badge-info badge-sm badge-soft whitespace-nowrap">Đang triển khai
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- End: Customer Acquisition -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-5 2xl:grid-cols-12">
|
|
||||||
<div class="xl:col-span-3 2xl:col-span-5">
|
|
||||||
<!-- Start: Recent Orders -->
|
|
||||||
|
|
||||||
<div aria-label="Card" class="card bg-base-100 shadow">
|
|
||||||
<div class="card-body p-0">
|
|
||||||
<div class="flex items-center gap-3 px-5 pt-5">
|
|
||||||
<span class="iconify lucide--shopping-bag size-4.5"></span>
|
|
||||||
<span class="font-medium">Recent Orders</span>
|
|
||||||
<button class="btn btn-outline border-base-300 btn-sm ms-auto">
|
|
||||||
<span class="iconify lucide--download size-3.5"></span>
|
|
||||||
Report
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 overflow-auto">
|
|
||||||
<table class="table *:text-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-all-order" class="checkbox checkbox-sm"
|
|
||||||
type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<th>Product</th>
|
|
||||||
<th>Price</th>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<td class="flex items-center space-x-3 truncate">
|
|
||||||
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
|
|
||||||
src="./images/apps/ecommerce/products/1.jpg" />
|
|
||||||
<p>Men's tracking shoes</p>
|
|
||||||
</td>
|
|
||||||
<td class="font-medium">$99</td>
|
|
||||||
<td class="text-xs">25 Jun 2024</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-success badge-sm badge-soft">
|
|
||||||
Delivered
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
|
|
||||||
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
|
|
||||||
</button>
|
|
||||||
<button aria-label="Show product"
|
|
||||||
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
|
|
||||||
<span class="iconify lucide--trash size-4"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<td class="flex items-center space-x-3 truncate">
|
|
||||||
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
|
|
||||||
src="./images/apps/ecommerce/products/2.jpg" />
|
|
||||||
<p>Cocooil body oil</p>
|
|
||||||
</td>
|
|
||||||
<td class="font-medium">$75</td>
|
|
||||||
<td class="text-xs">22 Jun 2024</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-info badge-sm badge-soft">
|
|
||||||
On Going
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
|
|
||||||
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
|
|
||||||
</button>
|
|
||||||
<button aria-label="Show product"
|
|
||||||
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
|
|
||||||
<span class="iconify lucide--trash size-4"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<td class="flex items-center space-x-3 truncate">
|
|
||||||
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
|
|
||||||
src="./images/apps/ecommerce/products/3.jpg" />
|
|
||||||
<p>Freeze Air</p>
|
|
||||||
</td>
|
|
||||||
<td class="font-medium">$47</td>
|
|
||||||
<td class="text-xs">17 Jun 2024</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-primary badge-sm badge-soft">
|
|
||||||
Confirmed
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
|
|
||||||
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
|
|
||||||
</button>
|
|
||||||
<button aria-label="Show product"
|
|
||||||
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
|
|
||||||
<span class="iconify lucide--trash size-4"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<td class="flex items-center space-x-3 truncate">
|
|
||||||
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
|
|
||||||
src="./images/apps/ecommerce/products/4.jpg" />
|
|
||||||
<p>Ladies's shoes</p>
|
|
||||||
</td>
|
|
||||||
<td class="font-medium">$52</td>
|
|
||||||
<td class="text-xs">23 Jun 2024</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-error badge-sm badge-soft">
|
|
||||||
Canceled
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
|
|
||||||
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
|
|
||||||
</button>
|
|
||||||
<button aria-label="Show product"
|
|
||||||
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
|
|
||||||
<span class="iconify lucide--trash size-4"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<input aria-label="checked-order" class="checkbox checkbox-sm" type="checkbox" />
|
|
||||||
</th>
|
|
||||||
<td class="flex items-center space-x-3 truncate">
|
|
||||||
<img alt="order image" class="mask mask-squircle bg-base-200 size-7.5"
|
|
||||||
src="./images/apps/ecommerce/products/10.jpg" />
|
|
||||||
<p>Choco's cookie</p>
|
|
||||||
</td>
|
|
||||||
<td class="font-medium">$24</td>
|
|
||||||
<td class="text-xs">21 Jun 2024</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-secondary badge-sm badge-soft">
|
|
||||||
Waiting
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button aria-label="Show product" class="btn btn-square btn-ghost btn-xs">
|
|
||||||
<span class="iconify lucide--eye text-base-content/60 size-4"></span>
|
|
||||||
</button>
|
|
||||||
<button aria-label="Show product"
|
|
||||||
class="btn btn-square btn-error btn-outline btn-xs border-transparent">
|
|
||||||
<span class="iconify lucide--trash size-4"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- End: Recent Orders -->
|
|
||||||
</div>
|
|
||||||
<div class="xl:col-span-2 2xl:col-span-3">
|
|
||||||
<!-- Start: Quick Chat -->
|
|
||||||
|
|
||||||
<div class="card bg-base-100 shadow">
|
|
||||||
<div class="card-body pb-3">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="iconify lucide--messages-square size-4.5"></span>
|
|
||||||
<span class="font-medium">Quick Chat</span>
|
|
||||||
<a href="./apps/chat.html" class="btn btn-outline btn-sm border-base-300 ms-auto">
|
|
||||||
Go To Chat
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="-mx-2 mt-2 space-y-0.5">
|
|
||||||
<div
|
|
||||||
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
|
|
||||||
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/1.png" />
|
|
||||||
<div class="grow">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<p class="grow">Mia Johnson</p>
|
|
||||||
<span class="text-base-content/60 text-xs">
|
|
||||||
11:35 AM
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
|
|
||||||
It's called 'Dreamscape.' A must-watch!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
|
|
||||||
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/2.png" />
|
|
||||||
<div class="grow">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<p class="grow">Ethan Patel</p>
|
|
||||||
<span class="text-base-content/60 text-xs">
|
|
||||||
09:58 AM
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
|
|
||||||
Just got a new book. Excited to start
|
|
||||||
reading.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
|
|
||||||
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/3.png" />
|
|
||||||
<div class="grow">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<p class="grow">Sophia Nguyen</p>
|
|
||||||
<span class="text-base-content/60 text-xs">
|
|
||||||
08:20 AM
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
|
|
||||||
How's your day going?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
|
|
||||||
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/4.png" />
|
|
||||||
<div class="grow">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<p class="grow">Emily Chen</p>
|
|
||||||
<span class="text-base-content/60 text-xs">
|
|
||||||
06:21 PM
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
|
|
||||||
Did you see that amazing sunset
|
|
||||||
yesterday?
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-box hover:bg-base-200 flex cursor-pointer items-center gap-3 px-2 py-2 transition-all active:scale-[.98]">
|
|
||||||
<img alt="chat" class="bg-base-200 mask mask-squircle size-11" src="./images/avatars/5.png" />
|
|
||||||
<div class="grow">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<p class="grow">Kelvin S.</p>
|
|
||||||
<span class="text-base-content/60 text-xs">
|
|
||||||
08:15 AM
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-base-content/80 line-clamp-1 text-sm text-ellipsis">
|
|
||||||
Not sure, what you talking about...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- End: Quick Chat -->
|
|
||||||
</div>
|
|
||||||
<div class="xl:col-span-3 2xl:col-span-4">
|
|
||||||
<!-- Start: Global Sales -->
|
|
||||||
|
|
||||||
<div class="card bg-base-100 shadow">
|
|
||||||
<div class="card-body gap-0 p-0">
|
|
||||||
<div class="flex items-center gap-3 px-5 pt-5">
|
|
||||||
<span class="iconify lucide--globe-2 size-4.5"></span>
|
|
||||||
<span class="font-medium">Global Sales (%)</span>
|
|
||||||
<button class="btn btn-ghost btn-outline border-base-300 btn-sm z-1 ms-auto">
|
|
||||||
<span class="iconify lucide--eye size-4"></span>
|
|
||||||
Overview
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="me-5 -mt-5 mb-1">
|
|
||||||
<div id="global-sales-chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- End: Global Sales -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1,282 +1,393 @@
|
|||||||
<script>
|
<script>
|
||||||
const initCustomerAcquisitionChart = () => {
|
const initCustomerAcquisitionChart = () => {
|
||||||
const chartOptions = {
|
const chartOptions = {
|
||||||
chart: {
|
chart: {
|
||||||
height: 356,
|
height: 356,
|
||||||
sparkline: {
|
sparkline: {
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
zoom: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
background: "transparent",
|
|
||||||
},
|
|
||||||
forecastDataPoints: {
|
|
||||||
count: 2,
|
|
||||||
dashArray: [6, 4],
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: false,
|
|
||||||
min: 125,
|
|
||||||
max: 181,
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: Array.from({ length: 15 }, (_, index) => index + 1),
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
y: {
|
|
||||||
formatter: (val) => val.toString(),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: "stepline",
|
|
||||||
width: [2, 1.5],
|
|
||||||
},
|
|
||||||
colors: ["#167bff", "rgba(150,150,150,0.3)"],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Customer",
|
|
||||||
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Advertise",
|
|
||||||
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.getElementById("customer-acquisition-chart")) {
|
|
||||||
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const initRevenueStatisticsChart = () => {
|
|
||||||
const chartOptions = {
|
|
||||||
chart: {
|
|
||||||
height: 288,
|
|
||||||
type: "bar",
|
|
||||||
stacked: true,
|
|
||||||
background: "transparent",
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
borderRadius: 8,
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
borderRadiusWhenStacked: "last",
|
|
||||||
colors: {
|
|
||||||
backgroundBarColors: ["rgba(150,150,150,0.07)"],
|
|
||||||
backgroundBarRadius: 8,
|
|
||||||
},
|
|
||||||
columnWidth: "45%",
|
|
||||||
barHeight: "100%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
colors: ["#ff8b4b", "#6c74f8"],
|
toolbar: {
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
horizontalAlign: "center",
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 6,
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Orders",
|
|
||||||
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Revenue",
|
|
||||||
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
xaxis: {
|
|
||||||
categories: [
|
|
||||||
new Date("1/1/2016"),
|
|
||||||
new Date("1/1/2017"),
|
|
||||||
new Date("1/1/2018"),
|
|
||||||
new Date("1/1/2019"),
|
|
||||||
new Date("1/1/2020"),
|
|
||||||
new Date("1/1/2021"),
|
|
||||||
new Date("1/1/2022"),
|
|
||||||
new Date("1/1/2023"),
|
|
||||||
new Date("1/1/2024"),
|
|
||||||
new Date("1/1/2025"),
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
formatter: (val) => {
|
|
||||||
return new Date(val).getFullYear().toString()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
enabled: true,
|
|
||||||
shared: true,
|
|
||||||
intersect: false,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
responsive: [
|
zoom: {
|
||||||
{
|
enabled: false,
|
||||||
breakpoint: 450,
|
},
|
||||||
options: {
|
background: "transparent",
|
||||||
plotOptions: {
|
},
|
||||||
bar: {
|
forecastDataPoints: {
|
||||||
borderRadius: 4,
|
count: 2,
|
||||||
},
|
dashArray: [6, 4],
|
||||||
},
|
},
|
||||||
xaxis: {
|
grid: {
|
||||||
tickAmount: 3,
|
show: false,
|
||||||
},
|
},
|
||||||
},
|
yaxis: {
|
||||||
},
|
show: false,
|
||||||
],
|
min: 125,
|
||||||
}
|
max: 181,
|
||||||
|
},
|
||||||
if (document.getElementById("revenue-statics-chart")) {
|
xaxis: {
|
||||||
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
|
categories: Array.from({ length: 15 }, (_, index) => index + 1),
|
||||||
}
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: (val) => val.toString(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: "stepline",
|
||||||
|
width: [2, 1.5],
|
||||||
|
},
|
||||||
|
colors: ["#167bff", "rgba(150,150,150,0.3)"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Khách hàng",
|
||||||
|
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Quảng cáo",
|
||||||
|
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
|
||||||
|
},
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
const initGlobalSalesChart = () => {
|
if (document.getElementById("customer-acquisition-chart")) {
|
||||||
const data = [
|
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
|
||||||
{
|
}
|
||||||
name: "Turkey",
|
}
|
||||||
orders: 9,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "India",
|
|
||||||
orders: 12,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Canada",
|
|
||||||
orders: 13,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "US",
|
|
||||||
orders: 16,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Netherlands",
|
|
||||||
orders: 14,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Italy",
|
|
||||||
orders: 17,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Other",
|
|
||||||
orders: 19,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartOptions = {
|
const initRevenueStatisticsChart = () => {
|
||||||
chart: {
|
const chartOptions = {
|
||||||
height: 344,
|
chart: {
|
||||||
type: "bar",
|
height: 288,
|
||||||
parentHeightOffset: 0,
|
type: "bar",
|
||||||
background: "transparent",
|
stacked: true,
|
||||||
toolbar: {
|
background: "transparent",
|
||||||
show: false,
|
toolbar: {
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
horizontal: true,
|
|
||||||
borderRadius: 4,
|
|
||||||
distributed: true,
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: true,
|
|
||||||
textAnchor: "start",
|
|
||||||
style: {
|
|
||||||
colors: ["#fff"],
|
|
||||||
},
|
|
||||||
formatter: function (val, opt) {
|
|
||||||
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
|
||||||
},
|
|
||||||
offsetX: -10,
|
|
||||||
dropShadow: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: data.map((country) => country.orders),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
stroke: {
|
},
|
||||||
width: 0,
|
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
borderRadius: 8,
|
||||||
|
borderRadiusApplication: "end",
|
||||||
|
borderRadiusWhenStacked: "last",
|
||||||
|
colors: {
|
||||||
|
backgroundBarColors: ["rgba(150,150,150,0.07)"],
|
||||||
|
backgroundBarRadius: 8,
|
||||||
|
},
|
||||||
|
columnWidth: "45%",
|
||||||
|
barHeight: "100%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
colors: ["#ff8b4b", "#6c74f8"],
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
horizontalAlign: "center",
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 6,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Đơn hàng",
|
||||||
|
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Doanh thu",
|
||||||
|
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xaxis: {
|
||||||
|
categories: [
|
||||||
|
new Date("1/1/2016"),
|
||||||
|
new Date("1/1/2017"),
|
||||||
|
new Date("1/1/2018"),
|
||||||
|
new Date("1/1/2019"),
|
||||||
|
new Date("1/1/2020"),
|
||||||
|
new Date("1/1/2021"),
|
||||||
|
new Date("1/1/2022"),
|
||||||
|
new Date("1/1/2023"),
|
||||||
|
new Date("1/1/2024"),
|
||||||
|
new Date("1/1/2025"),
|
||||||
|
],
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
formatter: (val) => {
|
||||||
|
return new Date(val).getFullYear().toString()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
shared: true,
|
||||||
|
intersect: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 450,
|
||||||
|
options: {
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
tickAmount: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("revenue-statics-chart")) {
|
||||||
|
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const initGlobalSalesChart = () => {
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
name: "Turkey",
|
||||||
|
orders: 9,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "India",
|
||||||
|
orders: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Canada",
|
||||||
|
orders: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "US",
|
||||||
|
orders: 16,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Netherlands",
|
||||||
|
orders: 14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Italy",
|
||||||
|
orders: 17,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Other",
|
||||||
|
orders: 19,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
chart: {
|
||||||
|
height: 344,
|
||||||
|
type: "bar",
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
background: "transparent",
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: true,
|
||||||
|
borderRadius: 4,
|
||||||
|
distributed: true,
|
||||||
|
borderRadiusApplication: "end",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
textAnchor: "start",
|
||||||
|
style: {
|
||||||
colors: ["#fff"],
|
colors: ["#fff"],
|
||||||
},
|
},
|
||||||
xaxis: {
|
formatter: function (val, opt) {
|
||||||
categories: data.map((country) => country.name),
|
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
||||||
},
|
},
|
||||||
yaxis: {
|
offsetX: -10,
|
||||||
labels: {
|
dropShadow: {
|
||||||
show: false,
|
enabled: false,
|
||||||
},
|
|
||||||
},
|
},
|
||||||
grid: {
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: data.map((country) => country.orders),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 0,
|
||||||
|
colors: ["#fff"],
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: data.map((country) => country.name),
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
tooltip: {
|
tooltip: {
|
||||||
theme: "dark",
|
theme: "dark",
|
||||||
x: {
|
x: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
|
||||||
y: {
|
|
||||||
formatter: (val) => `${val}%`,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
|
y: {
|
||||||
}
|
formatter: (val) => `${val}%`,
|
||||||
|
},
|
||||||
if (document.getElementById("global-sales-chart")) {
|
},
|
||||||
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
|
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
if (document.getElementById("global-sales-chart")) {
|
||||||
initCustomerAcquisitionChart()
|
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
|
||||||
initRevenueStatisticsChart()
|
}
|
||||||
initGlobalSalesChart()
|
}
|
||||||
})
|
|
||||||
|
|
||||||
|
const initGradientDonutChart = () => {
|
||||||
|
const seriesData = [35.1, 23.5, 2.4, 5.4]
|
||||||
|
const chartOptions = {
|
||||||
|
chart: {
|
||||||
|
type: "donut",
|
||||||
|
height: 380,
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
background: "transparent",
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: "Truy cập website",
|
||||||
|
style: { fontWeight: "500" },
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 1,
|
||||||
|
colors: ["var(--color-base-100)"],
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: "solid",
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
startAngle: -45,
|
||||||
|
endAngle: 315,
|
||||||
|
donut: {
|
||||||
|
size: "60%",
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
value: {
|
||||||
|
formatter: (value) => `${value}K`,
|
||||||
|
color: "var(--color-base-content)",
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
show: true,
|
||||||
|
color: "#FF4560",
|
||||||
|
formatter: () => `${seriesData.reduce((acc, cur) => acc + cur, 0)}K`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
y: {
|
||||||
|
formatter: (value) => `${value}K`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 480,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: "bottom",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labels: [
|
||||||
|
"Trực tiếp",
|
||||||
|
"Quảng cáo",
|
||||||
|
"Liên kết",
|
||||||
|
"Qua email",
|
||||||
|
],
|
||||||
|
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
|
||||||
|
series: seriesData,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("gradient-donut-chart")) {
|
||||||
|
new ApexCharts(document.getElementById("gradient-donut-chart"), chartOptions).render()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function initAdminHomeTab() {
|
||||||
|
document.querySelectorAll("#js-admin-home-tab a").forEach(function (link) {
|
||||||
|
link.addEventListener("click", function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Xóa class current ở tất cả các tab
|
||||||
|
document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) {
|
||||||
|
el.classList.remove("btn-active");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Gán class current vào tab đang click
|
||||||
|
this.classList.add("btn-active");
|
||||||
|
|
||||||
|
// Lấy ID từ href để show nội dung
|
||||||
|
var id = this.getAttribute("href");
|
||||||
|
|
||||||
|
// Ẩn tất cả nội dung
|
||||||
|
document.querySelectorAll(".home-report-holder").forEach(function (holder) {
|
||||||
|
holder.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hiện phần tương ứng
|
||||||
|
document.querySelector(id).style.display = "block";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
initCustomerAcquisitionChart()
|
||||||
|
initRevenueStatisticsChart()
|
||||||
|
initGlobalSalesChart()
|
||||||
|
initGradientDonutChart()
|
||||||
|
initAdminHomeTab()
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@@ -1,11 +1,9 @@
|
|||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
|
|
||||||
<script src="{{'main.js' | asset_url }}"></script>
|
|
||||||
|
|
||||||
|
|
||||||
{% if global.module == 'home' %}
|
{% if global.module == 'home' %}
|
||||||
|
|||||||
@@ -342,126 +342,35 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer drawer-end">
|
<div class="dropdown dropdown-bottom dropdown-end w-full">
|
||||||
<input id="topbar-profile-drawer" type="checkbox" class="drawer-toggle" />
|
<div tabindex="0" role="button"
|
||||||
<div class="drawer-content">
|
class="hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 transition-all group">
|
||||||
<label for="topbar-profile-drawer" class="btn btn-ghost flex items-center gap-2 px-1.5">
|
<div class="avatar">
|
||||||
<div class="avatar">
|
<div class="bg-base-200 mask mask-squircle w-8">
|
||||||
<div class="bg-base-200 mask mask-squircle w-8">
|
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
|
||||||
<img src="../../assets/images/avatars/1.png" alt="Avatar" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-start">
|
|
||||||
<p class="text-sm/none text-white">Denish</p>
|
|
||||||
<p class="text-base-content/50 mt-0.5 text-xs/none text-white">Team</p>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="drawer-side">
|
|
||||||
<label for="topbar-profile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
|
|
||||||
<div class="h-full w-72 p-2 sm:w-84">
|
|
||||||
<div class="bg-base-100 rounded-box relative flex h-full flex-col pt-4 sm:pt-8">
|
|
||||||
<label for="topbar-profile-drawer"
|
|
||||||
class="btn btn-xs btn-circle btn-ghost absolute start-2 top-2" aria-label="Close">
|
|
||||||
<span class="iconify lucide--x size-4"></span>
|
|
||||||
</label>
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<div class="relative">
|
|
||||||
<div
|
|
||||||
class="avatar bg-base-200 isolate size-20 cursor-pointer overflow-hidden rounded-full px-1 pt-1 md:size-24">
|
|
||||||
<img src="/images/avatars/1.png" alt="User Avatar" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="bg-base-100 absolute end-0 bottom-0 flex items-center justify-center rounded-full p-1.5 shadow-sm">
|
|
||||||
<span class="iconify lucide--pencil size-4"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4 text-lg/none font-medium sm:mt-8">John Doe</p>
|
|
||||||
<p class="text-base-content/60 mt-1 text-sm">john@company.com</p>
|
|
||||||
<div class="mt-4 flex items-center gap-2 *:cursor-pointer sm:mt-6">
|
|
||||||
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
|
|
||||||
<img src="/images/avatars/2.png" alt="Team member" />
|
|
||||||
</div>
|
|
||||||
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
|
|
||||||
<img src="/images/avatars/3.png" alt="Team member" />
|
|
||||||
</div>
|
|
||||||
<div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
|
|
||||||
<img src="/images/avatars/4.png" alt="Team member" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="bg-base-200 border-base-300 flex size-10 items-center justify-center rounded-full border border-dashed">
|
|
||||||
<span class="iconify lucide--plus size-4.5"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-base-300 mt-4 grow overflow-auto border-t border-dashed px-2 sm:mt-6">
|
|
||||||
<ul class="menu w-full p-2">
|
|
||||||
<li class="menu-title">Account</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--user size-4.5"></span>
|
|
||||||
<span>View Profile</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--users size-4.5"></span>
|
|
||||||
<span>Team</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--mail-plus size-4.5"></span>
|
|
||||||
<span>Invites</span>
|
|
||||||
<div class="badge badge-sm">4</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="menu-title">Platform</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--settings size-4.5"></span>
|
|
||||||
<span>Settings</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--credit-card size-4.5"></span>
|
|
||||||
<span>Billing</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">
|
|
||||||
<span class="iconify lucide--help-circle size-4.5"></span>
|
|
||||||
<span>Support</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a class="text-error hover:bg-error/10" href="#">
|
|
||||||
<span class="iconify lucide--log-out size-4.5"></span>
|
|
||||||
<span>Sign Out</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="rounded-box from-primary to-secondary text-primary-content m-4 mt-auto flex cursor-pointer flex-col items-center justify-center bg-linear-to-br p-4 text-center transition-all hover:opacity-95 sm:p-6">
|
|
||||||
<div
|
|
||||||
class="bg-primary-content/10 border-primary-content/10 flex items-center justify-center rounded-full border p-1.5 sm:p-2.5">
|
|
||||||
<span class="iconify lucide--zap size-5 sm:size-6"></span>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="mt-2 font-mono text-[11px] font-medium tracking-wider uppercase opacity-70 sm:mt-4">
|
|
||||||
Upgrade your plan
|
|
||||||
</p>
|
|
||||||
<p class="mt-1 leading-none font-medium sm:text-lg">
|
|
||||||
Save
|
|
||||||
<span class="font-semibold underline">30%</span>
|
|
||||||
today
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="grow -space-y-0.5">
|
||||||
|
<p class="text-sm font-medium text-white">Denish N</p>
|
||||||
|
<p class="text-base-content/60 text-xs text-white">@withden</p>
|
||||||
|
</div>
|
||||||
|
<span class="iconify lucide--chevrons-up-down text-base-content/60 size-4 text-white"></span>
|
||||||
</div>
|
</div>
|
||||||
|
<ul role="menu" tabindex="0"
|
||||||
|
class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
|
||||||
|
<li>
|
||||||
|
<a href="./pages/settings.html">
|
||||||
|
<span class="iconify lucide--user size-4"></span>
|
||||||
|
<span>Tài khoản</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/admin/system/settings">
|
||||||
|
<span class="iconify lucide--settings size-4"></span>
|
||||||
|
<span>Cài đặt hệ thống</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -469,12 +378,13 @@
|
|||||||
<ul class="menu menu-horizontal">
|
<ul class="menu menu-horizontal">
|
||||||
<li>
|
<li>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<span class=""></span>
|
<span class="iconify lucide--home tw-tsa"></span>
|
||||||
<a href="/"><span class="grow">Home</span></a>
|
<a href="/"><span class="grow">Home</span></a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% for _menu_item in global.main_menu %}
|
{% for _menu_item in global.main_menu %}
|
||||||
{% assign _menu_children = _menu_item.menu %}
|
{% assign _menu_children = _menu_item.menu %}
|
||||||
|
{% if _menu_item.id != 'system' %}
|
||||||
<li
|
<li
|
||||||
class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
|
class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active {%- endif -%} {%- endfor -%}">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
@@ -490,6 +400,7 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,6 @@
|
|||||||
console.log(err)
|
console.log(err)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{'style.css' | asset_url}}?{{ 'now' | date : '%Y-%m-%d.%H.%M.%S' }}">
|
<link rel="stylesheet" href="{{'style.css' | asset_url}}?{{ 'now' | date : '%Y-%m-%d.%H.%M.%S' }}">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
Reference in New Issue
Block a user