+ {/* OVERLAY cho Mobile */}
+
setOpenMenuMobile(false)}
+ />
+
+ {/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
+
+
+ {/* HEADER */}
+
+
+ {/* MAIN CONTENT */}
+
+ {children}
+
+
+
+ //
+ );
+};
+
+export default BaseLayout;
diff --git a/src/components/layouts/BaseLayout/componets/Header/Header.tsx b/src/components/layouts/BaseLayout/componets/Header/Header.tsx
new file mode 100644
index 0000000..3d3f3d4
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/Header/Header.tsx
@@ -0,0 +1,101 @@
+"use client";
+import React, { useContext, useEffect, useState } from "react";
+import { PropsHeader } from "./interface";
+import { usePathname } from "next/dist/client/components/navigation";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { ContextBaseLayout } from "../../BaseLayout";
+import Image from "next/image";
+import icons from "@/constant/images/icons";
+import { ChevronDown } from "lucide-react";
+import clsx from "clsx";
+import MenuProfile from "../MenuProfile";
+
+const Header = ({ title, breadcrumb }: PropsHeader) => {
+ const pathname = usePathname();
+ const { infoUser } = useSelector((state: RootState) => state.user);
+ const context = useContext(ContextBaseLayout);
+
+ const [openProfile, setOpenProfile] = useState(false);
+
+ //Đóng menu mobile khi đổi route
+ useEffect(() => {
+ context.setOpenMenuMobile?.(false);
+ }, [pathname, context]);
+
+ const toggleFullScreen = () => {
+ if (!document.fullscreenElement) {
+ document.documentElement.requestFullscreen();
+ } else {
+ document.exitFullscreen();
+ }
+ };
+
+ return (
+
+
+ {/* Nút bấm Mobile: Mở menu mobile */}
+
context?.setOpenMenuMobile?.(true)}
+ >
+
+
+ {/* Nút bấm Desktop: Thu gọn/Mở rộng sidebar */}
+
context?.setShowFull?.(!context?.showFull)}
+ >
+
+
+ {breadcrumb ? (
+ breadcrumb
+ ) : (
+
{title}
+ )}
+
+
+
+
+
+
+
+
setOpenProfile(!openProfile)}
+ >
+
+
+
+
+ {infoUser?.fullname || "User admin"}
+
+
+
+ {openProfile && (
+
+ setOpenProfile(false)} />
+
+ )}
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/layouts/BaseLayout/componets/Header/index.ts b/src/components/layouts/BaseLayout/componets/Header/index.ts
new file mode 100644
index 0000000..2764567
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/Header/index.ts
@@ -0,0 +1 @@
+export { default } from "./Header";
diff --git a/src/components/layouts/BaseLayout/componets/Header/interface/index.ts b/src/components/layouts/BaseLayout/componets/Header/interface/index.ts
new file mode 100644
index 0000000..bd52b48
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/Header/interface/index.ts
@@ -0,0 +1,4 @@
+export interface PropsHeader {
+ title: string;
+ breadcrumb?: React.ReactNode;
+}
diff --git a/src/components/layouts/BaseLayout/componets/MenuProfile/MenuProfile.tsx b/src/components/layouts/BaseLayout/componets/MenuProfile/MenuProfile.tsx
new file mode 100644
index 0000000..157fb72
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/MenuProfile/MenuProfile.tsx
@@ -0,0 +1,120 @@
+import React, { use, useCallback, useState } from "react";
+import { PropsMenuProfile } from "./interface";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { httpRequest } from "@/services";
+import authServices from "@/services/authServices";
+import { store } from "@/redux/store";
+import { logout } from "@/redux/reducer/auth";
+import { setInfoUser } from "@/redux/reducer/user";
+import { PATH } from "@/constant/config";
+import Link from "next/link";
+import clsx from "clsx";
+import { LogOut, ShieldCog, ShieldUser } from "lucide-react";
+import CustomDialog from "@/components/customs/custom-dialog";
+
+const MenuProfile = ({ onClose }: PropsMenuProfile) => {
+ const router = useRouter();
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+
+ const [openLogout, setOpenLogout] = useState(false);
+
+ /* ================== CHECK ACTIVE ================== */
+ const checkActive = useCallback(
+ (path: string) => {
+ return pathname === path;
+ },
+ [pathname],
+ );
+
+ /* ================== LOGOUT ================== */
+ const logoutMutation = useMutation({
+ mutationFn: () =>
+ httpRequest({
+ showMessageFailed: true,
+ showMessageSuccess: false,
+ http: authServices.logout(),
+ }),
+ onSuccess(data) {
+ if (data) {
+ store.dispatch(logout());
+ store.dispatch(setInfoUser(null));
+ router.push(PATH.LOGIN);
+ }
+ },
+ });
+
+ const handleLogout = () => {
+ logoutMutation.mutate();
+ };
+
+ return (
+
+ {/* PROFILE */}
+
+
+
+
Thông tin cá nhân
+
Chi tiết tài khoản
+
+
+
+
+ {/* CHANGE PASSWORD */}
+
+
+
+
Đổi mật khẩu
+
Thay đổi mật khẩu
+
+
+
+
+ {/* LOGOUT */}
+
{
+ setOpenLogout(true);
+ onClose();
+ }}
+ className="flex items-center gap-3 p-3 rounded-lg hover:bg-red-50 cursor-pointer transition"
+ >
+
+
+
Đăng xuất
+
Đăng xuất khỏi hệ thống
+
+
+
+ {/* DIALOG */}
+
setOpenLogout(false)}
+ onSubmit={handleLogout}
+ title="Đăng xuất"
+ note="Bạn có muốn đăng xuất khỏi hệ thống không?"
+ titleCancel="Không"
+ titleSubmit="Đăng xuất"
+ type="error"
+ />
+
+ );
+};
+
+export default MenuProfile;
diff --git a/src/components/layouts/BaseLayout/componets/MenuProfile/index.ts b/src/components/layouts/BaseLayout/componets/MenuProfile/index.ts
new file mode 100644
index 0000000..12ae6c8
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/MenuProfile/index.ts
@@ -0,0 +1 @@
+export { default } from "./MenuProfile";
diff --git a/src/components/layouts/BaseLayout/componets/MenuProfile/interface/index.ts b/src/components/layouts/BaseLayout/componets/MenuProfile/interface/index.ts
new file mode 100644
index 0000000..88f466b
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/MenuProfile/interface/index.ts
@@ -0,0 +1,3 @@
+export interface PropsMenuProfile {
+ onClose: () => void;
+}
diff --git a/src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx b/src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx
new file mode 100644
index 0000000..6733296
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useCallback } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { Menus, PATH } from "@/constant/config";
+import Image from "next/image";
+import icons from "@/constant/images/icons";
+import clsx from "clsx";
+
+const Navbar = () => {
+ const pathname = usePathname();
+
+ const checkActive = useCallback(
+ (pathActive: string) => {
+ const currentRoute = pathname.split("/")[1];
+ return pathActive === `/${currentRoute}`;
+ },
+ [pathname],
+ );
+
+ return (
+
+
+
+
+ Quản lý
+
+
+
+ {Menus.map((menu, i) => (
+
+ {/* TITLE */}
+
+ {menu.title}
+
+
+
+ {menu.group.map((tab, y) => {
+ const isActive = checkActive(tab.pathActive);
+
+ return (
+
+
+
{tab.title}
+
+ );
+ })}
+
+
+ ))}
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/layouts/BaseLayout/componets/Navbar/index.ts b/src/components/layouts/BaseLayout/componets/Navbar/index.ts
new file mode 100644
index 0000000..8d95d66
--- /dev/null
+++ b/src/components/layouts/BaseLayout/componets/Navbar/index.ts
@@ -0,0 +1 @@
+export { default } from "./Navbar";
diff --git a/src/components/layouts/BaseLayout/index.ts b/src/components/layouts/BaseLayout/index.ts
new file mode 100644
index 0000000..cd391ad
--- /dev/null
+++ b/src/components/layouts/BaseLayout/index.ts
@@ -0,0 +1 @@
+export { default } from "./BaseLayout";
diff --git a/src/components/layouts/BaseLayout/interface/index.ts b/src/components/layouts/BaseLayout/interface/index.ts
new file mode 100644
index 0000000..637b24c
--- /dev/null
+++ b/src/components/layouts/BaseLayout/interface/index.ts
@@ -0,0 +1,12 @@
+export interface PropsBaseLayout {
+ children: React.ReactNode;
+ title: string;
+ breadcrumb?: React.ReactNode;
+}
+
+export interface TContextBaseLayout {
+ showFull?: boolean;
+ setShowFull?: (show: boolean) => void;
+ openMenuMobile?: boolean;
+ setOpenMenuMobile?: (show: boolean) => void;
+}
diff --git a/src/components/layouts/ChartWrapper/ChartWrapper.tsx b/src/components/layouts/ChartWrapper/ChartWrapper.tsx
new file mode 100644
index 0000000..2545a63
--- /dev/null
+++ b/src/components/layouts/ChartWrapper/ChartWrapper.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import { PropsChartWrapper } from "./interface";
+import clsx from "clsx";
+import Image from "next/image";
+import icons from "@/constant/images/icons";
+
+const ChartWrapper = ({
+ children,
+ isEmpty,
+ message = "Không có dữ liệu",
+}: PropsChartWrapper) => {
+ return (
+
+ {isEmpty ? (
+
+
+ {/* nếu muốn hiện message thì bật dòng dưới */}
+ {/*
{message}
*/}
+
+ ) : (
+ children
+ )}
+
+ );
+};
+
+export default ChartWrapper;
diff --git a/src/components/layouts/ChartWrapper/index.ts b/src/components/layouts/ChartWrapper/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/layouts/ChartWrapper/interface/index.ts b/src/components/layouts/ChartWrapper/interface/index.ts
new file mode 100644
index 0000000..acf4283
--- /dev/null
+++ b/src/components/layouts/ChartWrapper/interface/index.ts
@@ -0,0 +1,5 @@
+export interface PropsChartWrapper {
+ children: React.ReactNode;
+ isEmpty?: boolean;
+ message?: string;
+}
diff --git a/src/components/layouts/GridColumn/GridColumn.tsx b/src/components/layouts/GridColumn/GridColumn.tsx
new file mode 100644
index 0000000..68d696b
--- /dev/null
+++ b/src/components/layouts/GridColumn/GridColumn.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { GridColumnProps } from "./interface";
+import clsx from "clsx";
+
+const GridColumn = ({
+ children,
+ col = 3,
+ sm,
+ tabletCol3,
+ mobile2,
+ scroll20,
+ scrollMobile85,
+ className,
+}: GridColumnProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default GridColumn;
diff --git a/src/components/layouts/GridColumn/index.ts b/src/components/layouts/GridColumn/index.ts
new file mode 100644
index 0000000..6b7d9a9
--- /dev/null
+++ b/src/components/layouts/GridColumn/index.ts
@@ -0,0 +1 @@
+export { default } from "./GridColumn";
diff --git a/src/components/layouts/GridColumn/interface/index.ts b/src/components/layouts/GridColumn/interface/index.ts
new file mode 100644
index 0000000..9d1c8f9
--- /dev/null
+++ b/src/components/layouts/GridColumn/interface/index.ts
@@ -0,0 +1,14 @@
+export interface GridColumnProps {
+ children: React.ReactNode;
+
+ col?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | 12;
+ sm?: boolean;
+
+ tabletCol3?: boolean;
+ mobile2?: boolean;
+
+ scroll20?: boolean;
+ scrollMobile85?: boolean;
+
+ className?: string;
+}
diff --git a/src/components/layouts/LayoutAuth/LayoutAuth.tsx b/src/components/layouts/LayoutAuth/LayoutAuth.tsx
new file mode 100644
index 0000000..81f6949
--- /dev/null
+++ b/src/components/layouts/LayoutAuth/LayoutAuth.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import RequiredLogout from "@/components/protected/RequiredLogout";
+import React from "react";
+
+interface PropsLayoutAuth {
+ children: React.ReactNode;
+}
+
+const LayoutAuth = ({ children }: PropsLayoutAuth) => {
+ return (
+
+
+ {/* BACKGROUND */}
+
+
+ {/* MAIN */}
+
+ {children}
+
+
+ );
+};
+
+export default LayoutAuth;
diff --git a/src/components/layouts/LayoutAuth/index.ts b/src/components/layouts/LayoutAuth/index.ts
new file mode 100644
index 0000000..9756f0a
--- /dev/null
+++ b/src/components/layouts/LayoutAuth/index.ts
@@ -0,0 +1 @@
+export { default } from "./LayoutAuth";
diff --git a/src/components/layouts/LayoutPages/LayoutPages.tsx b/src/components/layouts/LayoutPages/LayoutPages.tsx
new file mode 100644
index 0000000..b263476
--- /dev/null
+++ b/src/components/layouts/LayoutPages/LayoutPages.tsx
@@ -0,0 +1,57 @@
+"use client";
+import React, { useCallback } from "react";
+import { PropsLayoutPages } from "./interface";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import clsx from "clsx";
+
+const LayoutPages = ({ children, listPages }: PropsLayoutPages) => {
+ const pathname = usePathname();
+ const checkActive = useCallback(
+ (url: string) => {
+ return pathname === url;
+ },
+ [pathname],
+ );
+ return (
+ <>
+
+ {listPages.map((item, i) => {
+ const isActive = checkActive(item.url);
+ return (
+
{
+ if (isActive) e.preventDefault();
+ }}
+ className={clsx(
+ "inline-block min-w-[60px] text-center font-medium rounded-md px-6 py-3 border select-none cursor-pointer",
+ "text-[16px] max-[1200px]:text-[14px] max-[768px]:text-[13px]",
+ isActive
+ ? "bg-[#3772ff] text-white border-[#3772ff]"
+ : "bg-white text-[#202939] border-[#eaedf2]",
+ i !== 0 && "ml-2",
+ )}
+ >
+ {" "}
+
+
+ );
+ })}
+
+ {/* MAIN */}
+
{children}
+
+ );
+};
+
+export default LayoutPages;
diff --git a/src/components/layouts/LayoutPages/index.ts b/src/components/layouts/LayoutPages/index.ts
new file mode 100644
index 0000000..14b40c4
--- /dev/null
+++ b/src/components/layouts/LayoutPages/index.ts
@@ -0,0 +1 @@
+export { default } from "./LayoutPages";
diff --git a/src/components/layouts/LayoutPages/interface/index.ts b/src/components/layouts/LayoutPages/interface/index.ts
new file mode 100644
index 0000000..c47ef62
--- /dev/null
+++ b/src/components/layouts/LayoutPages/interface/index.ts
@@ -0,0 +1,8 @@
+export interface PropsLayoutPages {
+ children: React.ReactNode;
+ listPages: {
+ title: string;
+ url: string;
+ color: string;
+ }[];
+}
diff --git a/src/components/page/Home/MainPageHome/MainPageHome.tsx b/src/components/page/Home/MainPageHome/MainPageHome.tsx
new file mode 100644
index 0000000..59c3551
--- /dev/null
+++ b/src/components/page/Home/MainPageHome/MainPageHome.tsx
@@ -0,0 +1,8 @@
+"use client";
+import React from "react";
+
+const MainPageHome = () => {
+ return
MainPageHome
;
+};
+
+export default MainPageHome;
diff --git a/src/components/page/Home/MainPageHome/index.ts b/src/components/page/Home/MainPageHome/index.ts
new file mode 100644
index 0000000..310c0db
--- /dev/null
+++ b/src/components/page/Home/MainPageHome/index.ts
@@ -0,0 +1 @@
+export { default } from "./MainPageHome";
diff --git a/src/components/page/auth/MainForgotPassword/MainForgotPassword.tsx b/src/components/page/auth/MainForgotPassword/MainForgotPassword.tsx
new file mode 100644
index 0000000..8632ba1
--- /dev/null
+++ b/src/components/page/auth/MainForgotPassword/MainForgotPassword.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { IFormForgotPassword, TYPE_FORGOT_PASWORD } from "./interface";
+
+import { ContextForgotPassword } from "./context";
+
+import FormEmail from "./components/FormEmail";
+import FormPassword from "./components/FormPassword/FormPassword";
+
+export default function MainForgotPassword() {
+ const [type, setType] = useState
(
+ TYPE_FORGOT_PASWORD.EMAIL,
+ );
+
+ const [form, setForm] = useState({
+ email: "",
+ otp: "",
+ password: "",
+ rePassword: "",
+ });
+
+ return (
+
+ {/* TITLE */}
+
+ Quên mật khẩu
+
+
+ {/* DESCRIPTION */}
+
+ Nhập địa chỉ email liên kết với tài khoản của bạn để lấy lại mật khẩu!
+
+
+ {/* FORM */}
+
+
+ {type === TYPE_FORGOT_PASWORD.EMAIL && }
+
+ {type === TYPE_FORGOT_PASWORD.PASSWORD && }
+
+
+
+ {/* BUTTON SUBMIT */}
+
+ Lấy lại mật khẩu
+
+
+ {/* LINE */}
+
+
+ {/* LOGIN BUTTON */}
+
router.push(PATH.LOGIN)}
+ >
+ Đăng nhập ngay
+
+
+ {/* LOADING */}
+
+
+ {/* TITLE */}
+
+ Xác thực mã OTP
+
+
+ {/* DESCRIPTION */}
+
+ Một mã xác thực đã được gửi cho bạn qua địa chỉ email:
+ {obfuscateEmail(form.email!)}
+
+
+ {/* FORM */}
+
+ {/* LABEL */}
+
+ Nhập mã OTP
+
+
+ {/* INPUT OTP */}
+
+
+
+
+ {/* COUNTDOWN */}
+
+ Bạn chưa nhận được mã.
+ {countDown > 0 ? (
+
+ Gửi lại OTP ({fancyTimeFormat(countDown)})
+
+ ) : (
+
+ Gửi lại OTP
+
+ )}
+
+
+
+ {/* BUTTON */}
+
+
+ Xác thực Email
+
+
+
+ {/* CLOSE */}
+
+
+
+ Xác nhận mật khẩu mới
+ *
+
+ }
+ placeholder="Xác nhận mật khẩu mới"
+ type="password"
+ name="rePassword"
+ valueConfirm={form.password}
+ onClean
+ isRequired
+ isBlur
+ showDone
+ icon={}
+ />
+
+
+ {/* BUTTON */}
+
+
+ {({ isDone }) => (
+
+ Lấy lại mật khẩu
+
+ )}
+
+
+
+ );
+}
diff --git a/src/components/page/auth/MainForgotPassword/components/FormPassword/index.ts b/src/components/page/auth/MainForgotPassword/components/FormPassword/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/page/auth/MainForgotPassword/context/index.ts b/src/components/page/auth/MainForgotPassword/context/index.ts
new file mode 100644
index 0000000..8878104
--- /dev/null
+++ b/src/components/page/auth/MainForgotPassword/context/index.ts
@@ -0,0 +1,16 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+import { IFormForgotPassword, TYPE_FORGOT_PASWORD } from "../interface";
+
+export interface IContextForgotPassword {
+ form: IFormForgotPassword;
+ setForm: Dispatch>;
+ type: number;
+ setType: Dispatch>;
+}
+
+export const ContextForgotPassword = createContext({
+ form: { email: "", otp: "", password: "", rePassword: "" },
+ setForm: () => null,
+ type: TYPE_FORGOT_PASWORD.EMAIL,
+ setType: () => null,
+});
diff --git a/src/components/page/auth/MainForgotPassword/index.ts b/src/components/page/auth/MainForgotPassword/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/page/auth/MainForgotPassword/interface/index.ts b/src/components/page/auth/MainForgotPassword/interface/index.ts
new file mode 100644
index 0000000..f531e95
--- /dev/null
+++ b/src/components/page/auth/MainForgotPassword/interface/index.ts
@@ -0,0 +1,11 @@
+export interface IFormForgotPassword {
+ email: string;
+ otp: string;
+ password: string;
+ rePassword: string;
+}
+
+export enum TYPE_FORGOT_PASWORD {
+ EMAIL = 1,
+ PASSWORD,
+}
diff --git a/src/components/page/auth/MainLogin/MainLogin.tsx b/src/components/page/auth/MainLogin/MainLogin.tsx
new file mode 100644
index 0000000..8e77298
--- /dev/null
+++ b/src/components/page/auth/MainLogin/MainLogin.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { LockKeyhole, ShieldPlus, User } from "lucide-react";
+import { useSelector } from "react-redux";
+
+import { RootState, store } from "@/redux/store";
+
+import {
+ setDataLoginStorage,
+ setStateLogin,
+ setToken,
+} from "@/redux/reducer/auth";
+
+import { setRememberPassword } from "@/redux/reducer/site";
+import { setInfoUser } from "@/redux/reducer/user";
+
+import authServices from "@/services/authServices";
+import { httpRequest } from "@/services";
+
+import { PATH } from "@/constant/config";
+
+import FormCustom from "@/components/utils/FormCustom";
+import InputForm from "@/components/utils/FormCustom/components/InputForm";
+import CustomLoading from "@/components/customs/custom-loading";
+// import FormCustom, { InputForm } from "@/components/common/FormCustom";
+
+export default function MainLogin() {
+ const router = useRouter();
+
+ const { dataLoginStorage } = useSelector((state: RootState) => state.auth);
+
+ const { isRememberPassword } = useSelector((state: RootState) => state.site);
+
+ const [form, setForm] = useState({
+ username: isRememberPassword ? dataLoginStorage?.usernameStorage || "" : "",
+
+ password: isRememberPassword ? dataLoginStorage?.passwordStorage || "" : "",
+ });
+
+ const loginMutation = useMutation({
+ mutationFn: async () => {
+ return httpRequest({
+ showMessageFailed: true,
+ showMessageSuccess: true,
+ msgSuccess: "Đăng nhập thành công!",
+ http: authServices.login({
+ username: form.username,
+ password: form.password,
+ ip: "",
+ address: "",
+ type: 0,
+ }),
+ });
+ },
+
+ onSuccess(data: any) {
+ if (!data) return;
+
+ store.dispatch(setStateLogin(true));
+
+ store.dispatch(setToken(data.accessToken));
+
+ store.dispatch(
+ setInfoUser({
+ accessToken: data?.accessToken || "",
+ refreshToken: data?.refreshToken || "",
+ accessExpiresAt: data?.accessExpiresAt || "",
+ refreshExpiresAt: data?.refreshExpiresAt || "",
+ avatar: data?.avatar || "",
+ fullname: data?.fullname || "",
+ }),
+ );
+
+ if (isRememberPassword) {
+ store.dispatch(
+ setDataLoginStorage({
+ usernameStorage: form.username,
+ passwordStorage: form.password,
+ }),
+ );
+ } else {
+ store.dispatch(setDataLoginStorage(null));
+ }
+
+ router.replace(PATH.HOME);
+ },
+ });
+
+ const handleLogin = () => {
+ loginMutation.mutate();
+ };
+
+ return (
+
+
+
+
+ {/* TITLE */}
+
+ Đăng nhập
+
+
+
+ Chào mừng bạn đến với hệ thống quản lý
+
+
+ {/* FORM */}
+
+ {/* USERNAME */}
+
+ Tài khoản
+ *
+
+ }
+ placeholder="Tài khoản"
+ type="text"
+ name="username"
+ onClean
+ isRequired
+ isBlur
+ showDone
+ icon={}
+ />
+
+ {/* PASSWORD */}
+
+
+ Mật khẩu
+ *
+
+ }
+ placeholder="Mật khẩu"
+ type="password"
+ name="password"
+ onClean
+ isRequired
+ isBlur
+ showDone
+ icon={}
+ />
+
+
+ {/* REMEMBER PASSWORD */}
+
+
+ store.dispatch(setRememberPassword(!isRememberPassword))
+ }
+ className="
+ h-5
+ w-5
+ cursor-pointer
+ accent-[#0011AB]
+ "
+ />
+
+
+
+
+ {/* BUTTONS */}
+
+ {/* LOGIN */}
+
+
+ {/* LINE */}
+
+
+ {/* FORGOT PASSWORD */}
+
+
+
+ {/* LABEL */}
+ {label && (
+
+ )}
+
+ {/* INPUT WRAPPER */}
+
+ {/* ICON */}
+ {icon && (
+
+ {icon}
+
+ )}
+
+ {/* INPUT */}
+
+
+ {/* UNIT */}
+ {unit ? (
+
+ {unit}
+
+ ) : (
+
+ {/* CLEAN */}
+ {onClean && !!currentValue && (
+
+ )}
+
+ {/* DONE */}
+ {!isPassword &&
+ showDone &&
+ isDone &&
+ !errorText?.[name] &&
+ !!currentValue && }
+
+ {/* PASSWORD */}
+ {isPassword && (
+
+ )}
+
+ )}
+
+
+ {/* ERROR */}
+ {errorText?.[name] && (
+
+ {errorText[name]}
+
+ )}
+
+ {/* NOTE */}
+ {note && (
+
+ {note}
+
+ )}
+
+ {/* LABEL */}
+ {label && (
+
+ )}
+
+ {/* SELECT BOX */}
+
!readOnly && setOpen((prev) => !prev)}
+ className={clsx(
+ "flex items-center justify-between px-4 h-12 border rounded-full cursor-pointer transition",
+ "border-gray-300 bg-white hover:border-blue-600",
+ open && "border-blue-600",
+ readOnly &&
+ "bg-gray-100 border-gray-200 cursor-not-allowed hover:border-gray-200",
+ )}
+ >
+ {/* VALUE */}
+
+ {selectedOption ? getOptionLabel(selectedOption) : placeholder}
+
+
+ {/* CLEAR */}
+ {onClean && !!value && !readOnly && (
+
{
+ e.stopPropagation();
+ onClean();
+ }}
+ className="mr-2 hover:opacity-70"
+ >
+
+
+ )}
+
+ {/* ARROW */}
+
+
+
+ {/* DROPDOWN */}
+ {open && (
+
+ {/* SEARCH */}
+ {isSearch && (
+
+
+ setKeyword(e.target.value)}
+ className="flex-1 bg-transparent outline-none text-sm"
+ />
+
+ )}
+
+ {/* LIST */}
+ {filteredOptions.length > 0 ? (
+
+ {filteredOptions.map((opt) => {
+ const active = getOptionValue(opt) === value;
+
+ return (
+
handleSelect(opt)}
+ className={clsx(
+ "px-4 py-2 text-sm font-medium rounded-2xl cursor-pointer transition",
+ active
+ ? "bg-blue-700 text-white"
+ : "hover:bg-blue-700 hover:text-white",
+ )}
+ >
+ {getOptionLabel(opt)}
+
+ );
+ })}
+
+ ) : (
+
+
+
Danh sách lựa chọn rỗng!
+
+ )}
+
+ )}
+
+ {label && (
+
+ )}
+
+ {/* Select box */}
+
!readOnly && setIsFocus(true)}
+ className={clsx(
+ "flex items-center justify-between h-12 px-4 rounded-full border cursor-pointer transition",
+ "border-gray-300 bg-white hover:border-blue-700",
+ isFocus && "border-blue-700",
+ readOnly && "bg-gray-100 border-gray-200 cursor-not-allowed",
+ )}
+ >
+
+ {selectedItems.length > 0
+ ? `Đã chọn ${selectedItems.length} ${text}`
+ : placeholder}
+
+
+
+
+
+ {/* Selected chips */}
+ {showSelectedItems === "default" && (
+
+ {selectedItems
+ .map((v) => options.find((o) => getOptionValue(o) === v))
+ .filter(Boolean)
+ .map((item) => {
+ const value = getOptionValue(item!);
+ const disabled = disabledItems.includes(value);
+
+ return (
+
+ {getOptionLabel(item!)}
+ handleRemoveSelected(value)}
+ />
+
+ );
+ })}
+
+ )}
+
+ {/* Title */}
+
{title || "Danh sách"}
+
+ {/* Search */}
+ {isSearch && (
+
+
+ setKeyword(e.target.value)}
+ placeholder="Tìm kiếm..."
+ className="flex-1 outline-none bg-transparent text-sm"
+ />
+
+ )}
+
+ {/* Select all */}
+ {filteredOptions.length > 0 && (
+
+
+
+ setListDataTerm(
+ e.target.checked ? options.map(getOptionValue) : [],
+ )
+ }
+ className="w-5 h-5 accent-blue-500"
+ />
+ Chọn tất cả
+
+
+
+ Đã chọn:{" "}
+ {listDataTerm.length}
+
+
+ )}
+
+ {/* Options */}
+ {filteredOptions.length > 0 ? (
+
+ {filteredOptions.map((opt) => {
+ const value = getOptionValue(opt);
+ const checked = listDataTerm.includes(value);
+
+ return (
+
+ handleOptionClick(opt)}
+ disabled={disabledItems.includes(value)}
+ className="w-5 h-5 accent-blue-500"
+ />
+
+
+ );
+ })}
+
+ ) : (
+
+
+
Danh sách lựa chọn rỗng!
+
+ )}
+
+ {/* Buttons */}
+
+
+ Hủy bỏ
+
+
+
+ Xác nhận
+
+
+
+ {/* Close */}
+
+
+
+
+ {label && (
+
+ )}
+
+ {/* Select box */}
+
+
+ {selectedItem ? selectedLabel : placeholder}
+
+
+
+ {/* Popup */}
+
+
+ {/* Header */}
+
+
+ {title || "Chọn 1 giá trị"}
+
+
+ {isSearch && (
+
+
+
+ setKeyword(e.target.value)}
+ placeholder="Tìm kiếm..."
+ className="flex-1 ml-2 outline-none bg-transparent"
+ />
+
+
+ {action &&
{action}
}
+
+ )}
+
+
+ {/* List */}
+ {filteredOptions.length > 0 ? (
+
+ {filteredOptions.map((opt) => {
+ const value = getOptionValue(opt);
+ return (
+
+ handleSelect(value)}
+ disabled={disabledItems.includes(value)}
+ className="w-5 h-5 accent-[#0011AB]"
+ />
+
+
+ );
+ })}
+
+ ) : (
+
+
+
Danh sách lựa chọn rỗng!
+
+ )}
+
+ {/* Footer */}
+
+
+ Hủy bỏ
+
+
+
+ Xác nhận
+
+
+
+ {/* Close */}
+
+
+
+
+
+ {/* LABEL */}
+ {label && (
+
+ )}
+
+ {/* TEXTAREA */}
+
+
+ {/* ERROR */}
+ {errorText[name] && (
+
{errorText[name]}
+ )}
+
+
+ {icon ?? renderDefaultIcon()}
+
+
+ {/* overlay */}
+ {!disableOverlay && (
+
+ )}
+
+ {/* panel */}
+
+ {children}
+
+
{children}
;
+}
diff --git a/src/components/utils/PositionContainer/components/ClickOpen/index.ts b/src/components/utils/PositionContainer/components/ClickOpen/index.ts
new file mode 100644
index 0000000..19f3c55
--- /dev/null
+++ b/src/components/utils/PositionContainer/components/ClickOpen/index.ts
@@ -0,0 +1 @@
+export { default } from "./ClickOpen";
diff --git a/src/components/utils/PositionContainer/components/ClickOpen/interface/index.ts b/src/components/utils/PositionContainer/components/ClickOpen/interface/index.ts
new file mode 100644
index 0000000..5f77f1b
--- /dev/null
+++ b/src/components/utils/PositionContainer/components/ClickOpen/interface/index.ts
@@ -0,0 +1,5 @@
+export interface PropsClickOpen {
+ children: any;
+ onClick: (bol: boolean) => void;
+ duration?: number;
+}
diff --git a/src/components/utils/PositionContainer/index.ts b/src/components/utils/PositionContainer/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/utils/PositionContainer/interface/index.ts b/src/components/utils/PositionContainer/interface/index.ts
new file mode 100644
index 0000000..d0dec60
--- /dev/null
+++ b/src/components/utils/PositionContainer/interface/index.ts
@@ -0,0 +1,11 @@
+export interface PropsPositionContainer {
+ children: any;
+ open: boolean;
+ onClose: () => void;
+ disableOverlay?: boolean;
+ idParent?: string;
+ classStyle?: {
+ main: string;
+ open: string;
+ };
+}
diff --git a/src/components/utils/UploadAvatar/UploadAvatar.tsx b/src/components/utils/UploadAvatar/UploadAvatar.tsx
new file mode 100644
index 0000000..9b6ea67
--- /dev/null
+++ b/src/components/utils/UploadAvatar/UploadAvatar.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { Upload, Trash } from "lucide-react";
+
+import { toastError, toastWarn } from "@/common/funcs/toast";
+import { PropsUploadAvatar } from "./interface";
+
+const MAXIMUM_FILE = 10;
+
+export default function UploadAvatar({
+ path,
+ name,
+ onSetFile,
+ resetPath,
+}: PropsUploadAvatar) {
+ const [imageUrl, setImageUrl] = useState("");
+ const [fileName, setFileName] = useState("");
+
+ const handleSelectImg = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ const { size, type, name } = file;
+
+ if (size / 1024 / 1024 > MAXIMUM_FILE) {
+ toastError({ msg: `Kích thước tối đa ${MAXIMUM_FILE}MB` });
+ return;
+ }
+
+ if (!["image/jpeg", "image/jpg", "image/png"].includes(type)) {
+ toastWarn({
+ msg: "Chỉ hỗ trợ định dạng .jpg, .jpeg, .png",
+ });
+ return;
+ }
+
+ const url = URL.createObjectURL(file);
+
+ setImageUrl((prev) => {
+ if (prev) URL.revokeObjectURL(prev);
+ return url;
+ });
+
+ setFileName(name);
+ onSetFile?.(file);
+ };
+
+ useEffect(() => {
+ return () => {
+ if (imageUrl) URL.revokeObjectURL(imageUrl);
+ };
+ }, [imageUrl]);
+
+ const handleRemoveImg = () => {
+ if (imageUrl) URL.revokeObjectURL(imageUrl);
+
+ setImageUrl("");
+ setFileName("");
+
+ onSetFile?.(null);
+ resetPath?.();
+ };
+
+ const displayImage = imageUrl || path;
+
+ return (
+
+ {/* AVATAR */}
+
+
+ {/* RIGHT CONTENT */}
+
+ {/* CONTROL */}
+
+ {/* UPLOAD INPUT */}
+
+
+ {/* DELETE BUTTON */}
+
+
+
+ {/* DESCRIPTION */}
+
+ Hình ảnh dùng làm avatar, tối thiểu 300x300px
+
+
+ Định dạng hỗ trợ: JPG, JPEG, PNG
+
+
+