@thanh01.pmt/interactive-quiz-kit 1.0.45 → 1.0.46

package/dist/react-ui.cjs

@@ -142551,7 +142551,7 @@ function z29(e3 = x) {
 }
 var B = { tooltip: "core-styles-module_tooltip__3vRRp", fixed: "core-styles-module_fixed__pcSol", arrow: "core-styles-module_arrow__cvMwQ", noArrow: "core-styles-module_noArrow__xock6", clickable: "core-styles-module_clickable__ZuTTB", show: "core-styles-module_show__Nt9eE", closing: "core-styles-module_closing__sGnxF" };
 var D2 = { tooltip: "styles-module_tooltip__mnnfp", arrow: "styles-module_arrow__K0L3T", dark: "styles-module_dark__xNqje", light: "styles-module_light__Z6W-X", success: "styles-module_success__A2AKt", warning: "styles-module_warning__SCK0X", error: "styles-module_error__JvumD", info: "styles-module_info__BWdHW" };
-var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u2 = "dark", anchorId: d, anchorSelect: p2, place: v = "top", offset: m = 10, events: h3 = ["hover"], openOnClick: w2 = false, positionStrategy: b2 = "absolute", middlewares: S3, wrapper: g, delayShow: A3 = 0, delayHide: O2 = 0, float: T3 = false, hidden: x3 = false, noArrow: N2 = false, clickable: $3 = false, closeOnEsc: I = false, closeOnScroll: j = false, closeOnResize: q2 = false, openEvents: H2, closeEvents: M2, globalCloseEvents: W, imperativeModeOnly: P2, style: V, position: F, afterShow: K, afterHide: U2, disableTooltip: X3, content: Y, contentWrapperRef: G, isOpen: Z2, defaultIsOpen: J = false, setIsOpen: Q, activeAnchor: ee, setActiveAnchor: te, border: oe, opacity: le, arrowColor: re3, arrowSize: ne = 8, role: ie3 = "tooltip" }) => {
+var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u2 = "dark", anchorId: d, anchorSelect: p2, place: v = "top", offset: m = 10, events: h3 = ["hover"], openOnClick: w2 = false, positionStrategy: b2 = "absolute", middlewares: S3, wrapper: g, delayShow: A3 = 0, delayHide: O2 = 0, float: T3 = false, hidden: x3 = false, noArrow: N2 = false, clickable: $3 = false, closeOnEsc: I = false, closeOnScroll: j = false, closeOnResize: q2 = false, openEvents: H2, closeEvents: M2, globalCloseEvents: W, imperativeModeOnly: P2, style: V, position: F, afterShow: K, afterHide: U2, disableTooltip: X2, content: Y, contentWrapperRef: G, isOpen: Z2, defaultIsOpen: J = false, setIsOpen: Q, activeAnchor: ee, setActiveAnchor: te, border: oe, opacity: le, arrowColor: re3, arrowSize: ne = 8, role: ie3 = "tooltip" }) => {
   var ce;
   const se = React163.useRef(null), ae = React163.useRef(null), ue = React163.useRef(null), de = React163.useRef(null), pe = React163.useRef(null), [ve, me] = React163.useState({ tooltipStyles: {}, tooltipArrowStyles: {}, place: v }), [fe, ye] = React163.useState(false), [he, we] = React163.useState(false), [be, Se] = React163.useState(null), ge = React163.useRef(false), Ee = React163.useRef(null), { anchorRefs: Ae, setActiveAnchor: _e } = z29(l2), Oe = React163.useRef(false), [ke, Te] = React163.useState([]), Le = React163.useRef(false), Ce = w2 || h3.includes("click"), Re = Ce || (null == H2 ? void 0 : H2.click) || (null == H2 ? void 0 : H2.dblclick) || (null == H2 ? void 0 : H2.mousedown), xe = H2 ? { ...H2 } : { mouseover: true, focus: true, mouseenter: false, click: false, dblclick: false, mousedown: false };
   !H2 && Ce && Object.assign(xe, { mouseenter: false, focus: false, mouseover: false, click: true });
@@ -142639,10 +142639,10 @@ var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u
     var e3, t5;
     const o2 = new Set(Ae);
     ke.forEach((e4) => {
-      (null == X3 ? void 0 : X3(e4)) || o2.add({ current: e4 });
+      (null == X2 ? void 0 : X2(e4)) || o2.add({ current: e4 });
     });
     const l3 = document.querySelector(`[id='${d}']`);
-    l3 && !(null == X3 ? void 0 : X3(l3)) && o2.add({ current: l3 });
+    l3 && !(null == X2 ? void 0 : X2(l3)) && o2.add({ current: l3 });
     const r4 = () => {
       Ie(false);
     }, n2 = L2(ee), i3 = L2(se.current);
@@ -142758,7 +142758,7 @@ var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u
   }, style: { ...V, ...ve.tooltipStyles, opacity: void 0 !== le && Ye ? le : void 0 }, ref: se }, Xe, React163__namespace.default.createElement(g, { className: (0, import_classnames.default)("react-tooltip-arrow", B.arrow, D2.arrow, c4, N2 && B.noArrow), style: { ...ve.tooltipArrowStyles, background: re3 ? `linear-gradient(to right bottom, transparent 50%, ${re3} 50%)` : void 0, "--rt-arrow-size": `${ne}px` }, ref: ae })) : null;
 };
 var H = ({ content: t4 }) => React163__namespace.default.createElement("span", { dangerouslySetInnerHTML: { __html: t4 } });
-var M = React163__namespace.default.forwardRef(({ id: t4, anchorId: l2, anchorSelect: n2, content: i2, html: c4, render: a4, className: u2, classNameArrow: d, variant: p2 = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h3 = null, events: w2 = ["hover"], openOnClick: b2 = false, positionStrategy: S3 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O2 = false, hidden: k3 = false, noArrow: T3 = false, clickable: L3 = false, closeOnEsc: C3 = false, closeOnScroll: R3 = false, closeOnResize: x3 = false, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j = false, style: B2, position: D3, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X3, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q) => {
+var M = React163__namespace.default.forwardRef(({ id: t4, anchorId: l2, anchorSelect: n2, content: i2, html: c4, render: a4, className: u2, classNameArrow: d, variant: p2 = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h3 = null, events: w2 = ["hover"], openOnClick: b2 = false, positionStrategy: S3 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O2 = false, hidden: k3 = false, noArrow: T3 = false, clickable: L3 = false, closeOnEsc: C3 = false, closeOnScroll: R3 = false, closeOnResize: x3 = false, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j = false, style: B2, position: D3, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q) => {
   const [ee, te] = React163.useState(i2), [oe, le] = React163.useState(c4), [re3, ne] = React163.useState(v), [ie3, ce] = React163.useState(p2), [se, ae] = React163.useState(m), [ue, de] = React163.useState(E2), [pe, ve] = React163.useState(_2), [me, fe] = React163.useState(O2), [ye, he] = React163.useState(k3), [we, be] = React163.useState(f), [Se, ge] = React163.useState(w2), [Ee, Ae] = React163.useState(S3), [_e, Oe] = React163.useState(null), [ke, Te] = React163.useState(null), Le = React163.useRef(P2), { anchorRefs: Ce, activeAnchor: Re } = z29(t4), xe = (e3) => null == e3 ? void 0 : e3.getAttributeNames().reduce((t5, o2) => {
     var l3;
     if (o2.startsWith("data-tooltip-")) {
@@ -142865,7 +142865,7 @@ var M = React163__namespace.default.forwardRef(({ id: t4, anchorId: l2, anchorSe
     $e = t5 ? React163__namespace.default.createElement("div", { ref: Ie, className: "react-tooltip-content-wrapper" }, t5) : null;
   } else ee && ($e = ee);
   oe && ($e = React163__namespace.default.createElement(H, { content: oe }));
-  const ze = { forwardRef: Q, id: t4, anchorId: l2, anchorSelect: n2, className: (0, import_classnames.default)(u2, _e), classNameArrow: d, content: $e, contentWrapperRef: Ie, place: re3, variant: ie3, offset: se, wrapper: we, events: Se, openOnClick: b2, positionStrategy: Ee, middlewares: g, delayShow: ue, delayHide: pe, float: me, hidden: ye, noArrow: T3, clickable: L3, closeOnEsc: C3, closeOnScroll: R3, closeOnResize: x3, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j, style: B2, position: D3, isOpen: M2, defaultIsOpen: W, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X3, afterShow: Y, afterHide: G, disableTooltip: Z2, activeAnchor: ke, setActiveAnchor: (e3) => Te(e3), role: J };
+  const ze = { forwardRef: Q, id: t4, anchorId: l2, anchorSelect: n2, className: (0, import_classnames.default)(u2, _e), classNameArrow: d, content: $e, contentWrapperRef: Ie, place: re3, variant: ie3, offset: se, wrapper: we, events: Se, openOnClick: b2, positionStrategy: Ee, middlewares: g, delayShow: ue, delayHide: pe, float: me, hidden: ye, noArrow: T3, clickable: L3, closeOnEsc: C3, closeOnScroll: R3, closeOnResize: x3, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j, style: B2, position: D3, isOpen: M2, defaultIsOpen: W, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, activeAnchor: ke, setActiveAnchor: (e3) => Te(e3), role: J };
   return React163__namespace.default.createElement(q, { ...ze });
 });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", (e3) => {
@@ -167431,6 +167431,18 @@ var PersonalPracticeDashboard = ({ settingsPath }) => {
       return newLayout;
     });
   };
+  const handleSaveLayout = () => {
+    DashboardLayoutService.saveLayout(dashboardLayout);
+    setIsEditMode(false);
+    toast2({
+      title: "Layout \u0111\xE3 \u0111\u01B0\u1EE3c l\u01B0u",
+      description: "Dashboard c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt."
+    });
+  };
+  const handleCancelEdit = () => {
+    setDashboardLayout(DashboardLayoutService.getLayout());
+    setIsEditMode(false);
+  };
   const cardComponents = {
     roadmap: /* @__PURE__ */ React163__namespace.default.createElement(RoadmapChecklist, null),
     activity: /* @__PURE__ */ React163__namespace.default.createElement(ActivityCalendar, { stats }),
@@ -167453,33 +167465,72 @@ var PersonalPracticeDashboard = ({ settingsPath }) => {
       collisionDetection: closestCenter,
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ React163__namespace.default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React163__namespace.default.createElement(Card, { className: "text-center shadow-xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground border-none" }, /* @__PURE__ */ React163__namespace.default.createElement(CardHeader, { className: "p-8 relative" }, /* @__PURE__ */ React163__namespace.default.createElement("div", { className: "absolute top-4 right-4" }, settingsPath ? (
-      // If settingsPath is provided, always render a Link regardless of edit mode
-      /* @__PURE__ */ React163__namespace.default.createElement(Button, { asChild: true, variant: "secondary", size: "sm" }, /* @__PURE__ */ React163__namespace.default.createElement(Link3__default.default, { href: settingsPath }, /* @__PURE__ */ React163__namespace.default.createElement(Settings, { className: "mr-2 h-4 w-4" }), /* @__PURE__ */ React163__namespace.default.createElement(
+    /* @__PURE__ */ React163__namespace.default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React163__namespace.default.createElement(Card, { className: "text-center shadow-xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground border-none" }, /* @__PURE__ */ React163__namespace.default.createElement(CardHeader, { className: "p-8 relative" }, /* @__PURE__ */ React163__namespace.default.createElement("div", { className: "absolute top-4 right-4 flex items-center gap-2" }, !isEditMode ? /* @__PURE__ */ React163__namespace.default.createElement(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: () => setIsEditMode(true)
+      },
+      /* @__PURE__ */ React163__namespace.default.createElement(LayoutDashboard, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ React163__namespace.default.createElement(
         ClientTranslation,
         {
-          tKey: "common.customize",
-          fallback: "Customize"
+          tKey: "common.customizeLayout",
+          fallback: "Customize Layout"
         }
-      )))
-    ) : (
-      // If no settingsPath, always open the modal regardless of edit mode
+      )
+    ) : /* @__PURE__ */ React163__namespace.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React163__namespace.default.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: handleCancelEdit,
+        className: "bg-background/20 hover:bg-background/40 text-white"
+      },
+      /* @__PURE__ */ React163__namespace.default.createElement(X, { className: "mr-2 h-4 w-4" }),
       /* @__PURE__ */ React163__namespace.default.createElement(
-        Button,
+        ClientTranslation,
         {
-          variant: "secondary",
-          size: "sm",
-          onClick: () => setIsSettingsModalOpen(true)
-        },
-        /* @__PURE__ */ React163__namespace.default.createElement(Settings, { className: "mr-2 h-4 w-4" }),
-        /* @__PURE__ */ React163__namespace.default.createElement(
-          ClientTranslation,
-          {
-            tKey: "common.customize",
-            fallback: "Customize"
-          }
-        )
+          tKey: "common.cancel",
+          fallback: "Cancel"
+        }
+      )
+    ), /* @__PURE__ */ React163__namespace.default.createElement(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: handleSaveLayout
+      },
+      /* @__PURE__ */ React163__namespace.default.createElement(Save, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ React163__namespace.default.createElement(
+        ClientTranslation,
+        {
+          tKey: "common.saveLayout",
+          fallback: "Save Layout"
+        }
       )
+    )), settingsPath ? /* @__PURE__ */ React163__namespace.default.createElement(
+      Button,
+      {
+        asChild: true,
+        variant: "ghost",
+        size: "icon",
+        className: "text-white hover:bg-background/20",
+        title: "Settings"
+      },
+      /* @__PURE__ */ React163__namespace.default.createElement(Link3__default.default, { href: settingsPath }, /* @__PURE__ */ React163__namespace.default.createElement(Settings, { className: "h-5 w-5" }))
+    ) : /* @__PURE__ */ React163__namespace.default.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "text-white hover:bg-background/20",
+        title: "Settings",
+        onClick: () => setIsSettingsModalOpen(true)
+      },
+      /* @__PURE__ */ React163__namespace.default.createElement(Settings, { className: "h-5 w-5" })
     )), /* @__PURE__ */ React163__namespace.default.createElement(CardTitle, { className: "text-3xl md:text-4xl font-bold tracking-tight" }, welcomeMessage), /* @__PURE__ */ React163__namespace.default.createElement(CardDescription, { className: "text-lg md:text-xl text-primary-foreground/80 max-w-3xl mx-auto mt-2 h-14 flex items-center justify-center" }, quoteText)), /* @__PURE__ */ React163__namespace.default.createElement(CardContent, { className: "pb-8 flex flex-wrap justify-center items-center gap-4" }, /* @__PURE__ */ React163__namespace.default.createElement(
       Button,
       {

package/dist/react-ui.mjs

@@ -142524,7 +142524,7 @@ function z29(e3 = x) {
 }
 var B = { tooltip: "core-styles-module_tooltip__3vRRp", fixed: "core-styles-module_fixed__pcSol", arrow: "core-styles-module_arrow__cvMwQ", noArrow: "core-styles-module_noArrow__xock6", clickable: "core-styles-module_clickable__ZuTTB", show: "core-styles-module_show__Nt9eE", closing: "core-styles-module_closing__sGnxF" };
 var D2 = { tooltip: "styles-module_tooltip__mnnfp", arrow: "styles-module_arrow__K0L3T", dark: "styles-module_dark__xNqje", light: "styles-module_light__Z6W-X", success: "styles-module_success__A2AKt", warning: "styles-module_warning__SCK0X", error: "styles-module_error__JvumD", info: "styles-module_info__BWdHW" };
-var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u2 = "dark", anchorId: d, anchorSelect: p2, place: v = "top", offset: m = 10, events: h3 = ["hover"], openOnClick: w2 = false, positionStrategy: b2 = "absolute", middlewares: S3, wrapper: g, delayShow: A3 = 0, delayHide: O2 = 0, float: T3 = false, hidden: x3 = false, noArrow: N2 = false, clickable: $3 = false, closeOnEsc: I = false, closeOnScroll: j = false, closeOnResize: q2 = false, openEvents: H2, closeEvents: M2, globalCloseEvents: W, imperativeModeOnly: P2, style: V, position: F, afterShow: K, afterHide: U2, disableTooltip: X3, content: Y, contentWrapperRef: G, isOpen: Z2, defaultIsOpen: J = false, setIsOpen: Q, activeAnchor: ee, setActiveAnchor: te, border: oe, opacity: le, arrowColor: re3, arrowSize: ne = 8, role: ie3 = "tooltip" }) => {
+var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u2 = "dark", anchorId: d, anchorSelect: p2, place: v = "top", offset: m = 10, events: h3 = ["hover"], openOnClick: w2 = false, positionStrategy: b2 = "absolute", middlewares: S3, wrapper: g, delayShow: A3 = 0, delayHide: O2 = 0, float: T3 = false, hidden: x3 = false, noArrow: N2 = false, clickable: $3 = false, closeOnEsc: I = false, closeOnScroll: j = false, closeOnResize: q2 = false, openEvents: H2, closeEvents: M2, globalCloseEvents: W, imperativeModeOnly: P2, style: V, position: F, afterShow: K, afterHide: U2, disableTooltip: X2, content: Y, contentWrapperRef: G, isOpen: Z2, defaultIsOpen: J = false, setIsOpen: Q, activeAnchor: ee, setActiveAnchor: te, border: oe, opacity: le, arrowColor: re3, arrowSize: ne = 8, role: ie3 = "tooltip" }) => {
   var ce;
   const se = useRef(null), ae = useRef(null), ue = useRef(null), de = useRef(null), pe = useRef(null), [ve, me] = useState({ tooltipStyles: {}, tooltipArrowStyles: {}, place: v }), [fe, ye] = useState(false), [he, we] = useState(false), [be, Se] = useState(null), ge = useRef(false), Ee = useRef(null), { anchorRefs: Ae, setActiveAnchor: _e } = z29(l2), Oe = useRef(false), [ke, Te] = useState([]), Le = useRef(false), Ce = w2 || h3.includes("click"), Re = Ce || (null == H2 ? void 0 : H2.click) || (null == H2 ? void 0 : H2.dblclick) || (null == H2 ? void 0 : H2.mousedown), xe = H2 ? { ...H2 } : { mouseover: true, focus: true, mouseenter: false, click: false, dblclick: false, mousedown: false };
   !H2 && Ce && Object.assign(xe, { mouseenter: false, focus: false, mouseover: false, click: true });
@@ -142612,10 +142612,10 @@ var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u
     var e3, t5;
     const o2 = new Set(Ae);
     ke.forEach((e4) => {
-      (null == X3 ? void 0 : X3(e4)) || o2.add({ current: e4 });
+      (null == X2 ? void 0 : X2(e4)) || o2.add({ current: e4 });
     });
     const l3 = document.querySelector(`[id='${d}']`);
-    l3 && !(null == X3 ? void 0 : X3(l3)) && o2.add({ current: l3 });
+    l3 && !(null == X2 ? void 0 : X2(l3)) && o2.add({ current: l3 });
     const r4 = () => {
       Ie(false);
     }, n2 = L2(ee), i3 = L2(se.current);
@@ -142731,7 +142731,7 @@ var q = ({ forwardRef: t4, id: l2, className: i2, classNameArrow: c4, variant: u
   }, style: { ...V, ...ve.tooltipStyles, opacity: void 0 !== le && Ye ? le : void 0 }, ref: se }, Xe, React163__default.createElement(g, { className: (0, import_classnames.default)("react-tooltip-arrow", B.arrow, D2.arrow, c4, N2 && B.noArrow), style: { ...ve.tooltipArrowStyles, background: re3 ? `linear-gradient(to right bottom, transparent 50%, ${re3} 50%)` : void 0, "--rt-arrow-size": `${ne}px` }, ref: ae })) : null;
 };
 var H = ({ content: t4 }) => React163__default.createElement("span", { dangerouslySetInnerHTML: { __html: t4 } });
-var M = React163__default.forwardRef(({ id: t4, anchorId: l2, anchorSelect: n2, content: i2, html: c4, render: a4, className: u2, classNameArrow: d, variant: p2 = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h3 = null, events: w2 = ["hover"], openOnClick: b2 = false, positionStrategy: S3 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O2 = false, hidden: k3 = false, noArrow: T3 = false, clickable: L3 = false, closeOnEsc: C3 = false, closeOnScroll: R3 = false, closeOnResize: x3 = false, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j = false, style: B2, position: D3, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X3, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q) => {
+var M = React163__default.forwardRef(({ id: t4, anchorId: l2, anchorSelect: n2, content: i2, html: c4, render: a4, className: u2, classNameArrow: d, variant: p2 = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h3 = null, events: w2 = ["hover"], openOnClick: b2 = false, positionStrategy: S3 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O2 = false, hidden: k3 = false, noArrow: T3 = false, clickable: L3 = false, closeOnEsc: C3 = false, closeOnScroll: R3 = false, closeOnResize: x3 = false, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j = false, style: B2, position: D3, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q) => {
   const [ee, te] = useState(i2), [oe, le] = useState(c4), [re3, ne] = useState(v), [ie3, ce] = useState(p2), [se, ae] = useState(m), [ue, de] = useState(E2), [pe, ve] = useState(_2), [me, fe] = useState(O2), [ye, he] = useState(k3), [we, be] = useState(f), [Se, ge] = useState(w2), [Ee, Ae] = useState(S3), [_e, Oe] = useState(null), [ke, Te] = useState(null), Le = useRef(P2), { anchorRefs: Ce, activeAnchor: Re } = z29(t4), xe = (e3) => null == e3 ? void 0 : e3.getAttributeNames().reduce((t5, o2) => {
     var l3;
     if (o2.startsWith("data-tooltip-")) {
@@ -142838,7 +142838,7 @@ var M = React163__default.forwardRef(({ id: t4, anchorId: l2, anchorSelect: n2,
     $e = t5 ? React163__default.createElement("div", { ref: Ie, className: "react-tooltip-content-wrapper" }, t5) : null;
   } else ee && ($e = ee);
   oe && ($e = React163__default.createElement(H, { content: oe }));
-  const ze = { forwardRef: Q, id: t4, anchorId: l2, anchorSelect: n2, className: (0, import_classnames.default)(u2, _e), classNameArrow: d, content: $e, contentWrapperRef: Ie, place: re3, variant: ie3, offset: se, wrapper: we, events: Se, openOnClick: b2, positionStrategy: Ee, middlewares: g, delayShow: ue, delayHide: pe, float: me, hidden: ye, noArrow: T3, clickable: L3, closeOnEsc: C3, closeOnScroll: R3, closeOnResize: x3, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j, style: B2, position: D3, isOpen: M2, defaultIsOpen: W, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X3, afterShow: Y, afterHide: G, disableTooltip: Z2, activeAnchor: ke, setActiveAnchor: (e3) => Te(e3), role: J };
+  const ze = { forwardRef: Q, id: t4, anchorId: l2, anchorSelect: n2, className: (0, import_classnames.default)(u2, _e), classNameArrow: d, content: $e, contentWrapperRef: Ie, place: re3, variant: ie3, offset: se, wrapper: we, events: Se, openOnClick: b2, positionStrategy: Ee, middlewares: g, delayShow: ue, delayHide: pe, float: me, hidden: ye, noArrow: T3, clickable: L3, closeOnEsc: C3, closeOnScroll: R3, closeOnResize: x3, openEvents: N2, closeEvents: $3, globalCloseEvents: I, imperativeModeOnly: j, style: B2, position: D3, isOpen: M2, defaultIsOpen: W, border: V, opacity: F, arrowColor: K, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, activeAnchor: ke, setActiveAnchor: (e3) => Te(e3), role: J };
   return React163__default.createElement(q, { ...ze });
 });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", (e3) => {
@@ -167404,6 +167404,18 @@ var PersonalPracticeDashboard = ({ settingsPath }) => {
       return newLayout;
     });
   };
+  const handleSaveLayout = () => {
+    DashboardLayoutService.saveLayout(dashboardLayout);
+    setIsEditMode(false);
+    toast2({
+      title: "Layout \u0111\xE3 \u0111\u01B0\u1EE3c l\u01B0u",
+      description: "Dashboard c\u1EE7a b\u1EA1n \u0111\xE3 \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt."
+    });
+  };
+  const handleCancelEdit = () => {
+    setDashboardLayout(DashboardLayoutService.getLayout());
+    setIsEditMode(false);
+  };
   const cardComponents = {
     roadmap: /* @__PURE__ */ React163__default.createElement(RoadmapChecklist, null),
     activity: /* @__PURE__ */ React163__default.createElement(ActivityCalendar, { stats }),
@@ -167426,33 +167438,72 @@ var PersonalPracticeDashboard = ({ settingsPath }) => {
       collisionDetection: closestCenter,
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ React163__default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React163__default.createElement(Card, { className: "text-center shadow-xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground border-none" }, /* @__PURE__ */ React163__default.createElement(CardHeader, { className: "p-8 relative" }, /* @__PURE__ */ React163__default.createElement("div", { className: "absolute top-4 right-4" }, settingsPath ? (
-      // If settingsPath is provided, always render a Link regardless of edit mode
-      /* @__PURE__ */ React163__default.createElement(Button, { asChild: true, variant: "secondary", size: "sm" }, /* @__PURE__ */ React163__default.createElement(Link3, { href: settingsPath }, /* @__PURE__ */ React163__default.createElement(Settings, { className: "mr-2 h-4 w-4" }), /* @__PURE__ */ React163__default.createElement(
+    /* @__PURE__ */ React163__default.createElement("div", { className: "space-y-8" }, /* @__PURE__ */ React163__default.createElement(Card, { className: "text-center shadow-xl bg-gradient-to-br from-primary to-primary/80 text-primary-foreground border-none" }, /* @__PURE__ */ React163__default.createElement(CardHeader, { className: "p-8 relative" }, /* @__PURE__ */ React163__default.createElement("div", { className: "absolute top-4 right-4 flex items-center gap-2" }, !isEditMode ? /* @__PURE__ */ React163__default.createElement(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: () => setIsEditMode(true)
+      },
+      /* @__PURE__ */ React163__default.createElement(LayoutDashboard, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ React163__default.createElement(
         ClientTranslation,
         {
-          tKey: "common.customize",
-          fallback: "Customize"
+          tKey: "common.customizeLayout",
+          fallback: "Customize Layout"
         }
-      )))
-    ) : (
-      // If no settingsPath, always open the modal regardless of edit mode
+      )
+    ) : /* @__PURE__ */ React163__default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React163__default.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: handleCancelEdit,
+        className: "bg-background/20 hover:bg-background/40 text-white"
+      },
+      /* @__PURE__ */ React163__default.createElement(X, { className: "mr-2 h-4 w-4" }),
       /* @__PURE__ */ React163__default.createElement(
-        Button,
+        ClientTranslation,
         {
-          variant: "secondary",
-          size: "sm",
-          onClick: () => setIsSettingsModalOpen(true)
-        },
-        /* @__PURE__ */ React163__default.createElement(Settings, { className: "mr-2 h-4 w-4" }),
-        /* @__PURE__ */ React163__default.createElement(
-          ClientTranslation,
-          {
-            tKey: "common.customize",
-            fallback: "Customize"
-          }
-        )
+          tKey: "common.cancel",
+          fallback: "Cancel"
+        }
+      )
+    ), /* @__PURE__ */ React163__default.createElement(
+      Button,
+      {
+        variant: "secondary",
+        size: "sm",
+        onClick: handleSaveLayout
+      },
+      /* @__PURE__ */ React163__default.createElement(Save, { className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ React163__default.createElement(
+        ClientTranslation,
+        {
+          tKey: "common.saveLayout",
+          fallback: "Save Layout"
+        }
       )
+    )), settingsPath ? /* @__PURE__ */ React163__default.createElement(
+      Button,
+      {
+        asChild: true,
+        variant: "ghost",
+        size: "icon",
+        className: "text-white hover:bg-background/20",
+        title: "Settings"
+      },
+      /* @__PURE__ */ React163__default.createElement(Link3, { href: settingsPath }, /* @__PURE__ */ React163__default.createElement(Settings, { className: "h-5 w-5" }))
+    ) : /* @__PURE__ */ React163__default.createElement(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "text-white hover:bg-background/20",
+        title: "Settings",
+        onClick: () => setIsSettingsModalOpen(true)
+      },
+      /* @__PURE__ */ React163__default.createElement(Settings, { className: "h-5 w-5" })
     )), /* @__PURE__ */ React163__default.createElement(CardTitle, { className: "text-3xl md:text-4xl font-bold tracking-tight" }, welcomeMessage), /* @__PURE__ */ React163__default.createElement(CardDescription, { className: "text-lg md:text-xl text-primary-foreground/80 max-w-3xl mx-auto mt-2 h-14 flex items-center justify-center" }, quoteText)), /* @__PURE__ */ React163__default.createElement(CardContent, { className: "pb-8 flex flex-wrap justify-center items-center gap-4" }, /* @__PURE__ */ React163__default.createElement(
       Button,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thanh01.pmt/interactive-quiz-kit",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "A comprehensive library for creating, managing, and playing interactive quizzes, with AI generation and SCORM support.",
   "keywords": [
     "react",