init

src/app/api/data/[name]/route.ts

@@ -0,0 +1,25 @@
+import { getDataCache } from "@/lib/cache/cache"
+
+export async function GET(
+  req: Request,
+  { params }: { params: Promise<{ name: string }> }
+) {
+  const { name } = await params
+
+  const item = getDataCache(name)
+
+  if (!item) {
+    return new Response("Not found", { status: 404 })
+  }
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "Cache-Control": "public, max-age=3600"
+  }
+
+  if (item.type === "br") {
+    headers["Content-Encoding"] = "br"
+  }
+
+  return new Response(new Uint8Array(item.buf), { headers })
+}

src/app/api/proxy/route.ts

@@ -0,0 +1,102 @@
+import { NextRequest, NextResponse } from 'next/server'
+import axios from 'axios'
+import net from 'net'
+
+function isPrivateHost(hostname: string): boolean {
+  if (
+    hostname === 'localhost' ||
+    hostname.startsWith('127.') ||
+    hostname.startsWith('10.') ||
+    hostname.startsWith('192.168.') ||
+    /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(hostname)
+  ) {
+    return true
+  }
+
+  if (net.isIP(hostname)) {
+    return true
+  }
+
+  return false
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url)
+    const targetUrl = searchParams.get("url")
+    if (!targetUrl) {
+      return NextResponse.json({ error: "Missing url" }, { status: 400 })
+    }
+
+    const response = await fetch(targetUrl)
+
+    if (!response.ok) {
+      return NextResponse.json({ error: "Failed to fetch image" }, { status: 500 })
+    }
+
+    const buffer = await response.arrayBuffer()
+    
+    return new NextResponse(buffer, {
+      headers: {
+        "Content-Type": response.headers.get("content-type") || "image/png",
+        "Cache-Control": "public, max-age=3600",
+        "Access-Control-Allow-Origin": "*", 
+      },
+    })
+  } catch (e: unknown) {
+    return NextResponse.json({ error: (e as Error)?.message }, { status: 500 })
+  }
+}
+
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { serverUrl, method, ...payload } = body
+
+    if (!serverUrl) {
+      return NextResponse.json({ error: 'Missing serverUrl' }, { status: 400 })
+    }
+    if (!method) {
+      return NextResponse.json({ error: 'Missing method' }, { status: 400 })
+    }
+
+    let url = serverUrl.trim()
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      url = `http://${url}`
+    }
+
+    const parsed = new URL(url)
+    if (isPrivateHost(parsed.hostname)) {
+      return NextResponse.json(
+        { error: `Connection to private/internal address (${parsed.hostname}) is not allowed` },
+        { status: 403 }
+      )
+    }
+
+    let response
+
+    switch (method.toUpperCase()) {
+      case 'GET':
+        const queryString = new URLSearchParams(payload as Record<string, string>).toString()
+        const fullUrl = queryString ? `${url}?${queryString}` : url
+        response = await axios.get(fullUrl)
+        break
+      case 'POST':
+        response = await axios.post(url, payload)
+        break
+      case 'PUT':
+        response = await axios.put(url, payload)
+        break
+      case 'DELETE':
+        response = await axios.delete(url, { data: payload })
+        break
+      default:
+        return NextResponse.json({ error: `Unsupported method: ${method}` }, { status: 405 })
+    }
+
+    return NextResponse.json(response.data)
+  } catch (err: unknown) {
+    return NextResponse.json({ error: (err as Error)?.message || 'Proxy failed' }, { status: 500 })
+  }
+}

src/app/eidolons-info/page.tsx

@@ -0,0 +1,9 @@
+"use client"
+import EidolonsInfo from "@/components/eidolonsInfo";
+export default function EidolonsInfoPage() {
+  return (
+    <div className="w-full">
+      <EidolonsInfo/>
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,38 @@
+@import "tailwindcss";
+
+
+@plugin "daisyui" {
+  exclude: properties;
+  themes: winter --default, night --prefersdark, cupcake, coffee;
+}
+
+@tailwind utilities;
+
+@plugin 'tailwind-scrollbar' {
+    nocompatible: true;
+}
+
+
+:root {
+  --size-big: 4vw;
+  --size-medium: 3vw;
+  --size-small: 2vw;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #9ca3af; 
+  border-radius: 0; 
+}
+
+::-webkit-scrollbar-button {
+  display: none; 
+}

src/app/layout.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import Header from "../components/header";
+import { ClientThemeWrapper, ThemeProvider } from "@/components/themeController";
+import Footer from "@/components/footer";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale, getMessages } from "next-intl/server";
+import { ToastContainer } from 'react-toastify';
+import QueryProviderWrapper from "@/components/queryProvider";
+import ClientDataFetcher from "@/components/clientDataFetcher";
+import AvatarBar from "@/components/avatarBar";
+import ActionBar from "@/components/actionBar";
+
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Firefly SrTools",
+  description: "SrTools by Firefly Shelter",
+  icons: {
+    icon: "/ff-srtool.png",
+    shortcut: "/ff-srtool.ico",
+    apple: "/ff-srtool.png",
+  },
+  openGraph: {
+    title: "Firefly SrTools",
+    description: "SrTools by Firefly Shelter",
+    url: "https://srtools.punklorde.org",
+    siteName: "Firefly SrTools",
+    images: [
+      {
+        url: "https://srtools.punklorde.org/ff-srtool.png",
+        width: 312,
+        height: 312,
+        alt: "Firefly SrTools Logo",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Firefly SrTools",
+    description: "SrTools by Firefly Shelter",
+    images: ["https://srtools.punklorde.org/ff-srtool.png"],
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const messages = await getMessages();
+  const locale = await getLocale()
+
+  return (
+    <html lang={locale} suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
+        <NextIntlClientProvider messages={messages}>
+          <QueryProviderWrapper>
+            <ThemeProvider>
+              <ClientThemeWrapper>
+                <ClientDataFetcher >
+                  <div className="min-h-screen w-full">
+                    <Header />
+                    <div className="grid grid-cols-12 w-full">
+                      <div className="hidden sm:block md:col-span-4 lg:col-span-3 sticky top-0 self-start h-fit">
+                        <AvatarBar />
+                      </div>
+                      <div className="col-span-12 sm:col-span-8 lg:col-span-9">
+                        <ActionBar />
+                        {children}
+                      </div>
+                    </div>
+
+                    <Footer />
+                  </div>
+                </ClientDataFetcher>
+              </ClientThemeWrapper>
+            </ThemeProvider>
+          </QueryProviderWrapper>
+        </NextIntlClientProvider>
+        <ToastContainer />
+
+      </body>
+
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,10 @@
+"use client"
+import AvatarInfo from "@/components/avatarInfo";
+
+export default function Home() {
+    return (
+      <div className="w-full">
+        <AvatarInfo></AvatarInfo>
+      </div>
+    );
+}

src/app/relics-info/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import RelicsInfo from "@/components/relicsInfo";
+
+export default function RelicsInfoPage() {
+  return (
+    <div className="w-full">
+      <RelicsInfo></RelicsInfo>
+    </div>
+  );
+}

src/app/showcase-card/page.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import ShowCaseInfo from "@/components/showcaseCard"
+
+export default function ShowcaseCard() {
+    return (
+        <div>
+            <ShowCaseInfo />
+        </div>
+    )
+}

src/app/skills-info/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import SkillsInfo from "@/components/skillsInfo";
+
+export default function SkillsInfoPage() {
+  return (
+    <div className="w-full">
+      <SkillsInfo></SkillsInfo>
+    </div>
+  );
+}

src/components/actionBar/index.tsx

@@ -0,0 +1,445 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useRouter } from 'next/navigation'
+import ParseText from "../parseText";
+import useLocaleStore from "@/stores/localeStore";
+import { getNameChar } from "@/helper/getName";
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import useModelStore from "@/stores/modelStore";
+import useUserDataStore from "@/stores/userDataStore";
+import { ModalConfig, RelicStore } from "@/types";
+import { toast } from "react-toastify";
+import useGlobalStore from "@/stores/globalStore";
+import { connectToPS, syncDataToPS } from "@/helper";
+import CopyImport from "../importBar/copy";
+import useCopyProfileStore from "@/stores/copyProfile";
+import AvatarBar from "../avatarBar";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function ActionBar() {
+  const router = useRouter()
+  const { avatarSelected } = useCurrentDataStore()
+  const { damageType, baseType } = useDetailDataStore()
+  const { setResetData } = useCopyProfileStore()
+  const transI18n = useTranslations("DataPage")
+  const { locale } = useLocaleStore()
+  const {
+    isOpenCreateProfile,
+    setIsOpenCreateProfile,
+    isOpenCopy,
+    setIsOpenCopy,
+    isOpenAvatars,
+    setIsOpenAvatars
+  } = useModelStore()
+  const { avatars, setAvatar } = useUserDataStore()
+  const [profileName, setProfileName] = useState("");
+  const [formState, setFormState] = useState("EDIT");
+  const [profileEdit, setProfileEdit] = useState(-1);
+  const { isConnectPS } = useGlobalStore()
+
+  const profileCurrent = useMemo(() => {
+    if (!avatarSelected) return null;
+    const avatar = avatars[avatarSelected.ID];
+    return avatar?.profileList[avatar.profileSelect] || null;
+  }, [avatarSelected, avatars]);
+
+  const listProfile = useMemo(() => {
+    if (!avatarSelected) return [];
+    const avatar = avatars[avatarSelected.ID];
+    return avatar?.profileList || [];
+  }, [avatarSelected, avatars]);
+
+
+  const handleUpdateProfile = () => {
+    if (!profileName.trim()) return;
+    if (formState === "CREATE" && avatarSelected && avatars[avatarSelected.ID]) {
+      const newListProfile = [...listProfile]
+      const newProfile = {
+        profile_name: profileName,
+        lightcone: null,
+        relics: {} as Record<string, RelicStore>
+      }
+      newListProfile.push(newProfile)
+      setAvatar({ ...avatars[avatarSelected.ID], profileList: newListProfile, profileSelect: newListProfile.length - 1 })
+      toast.success("Profile created successfully")
+    } else if (formState === "EDIT" && profileCurrent && avatarSelected && profileEdit !== -1) {
+      const newListProfile = [...listProfile]
+      newListProfile[profileEdit].profile_name = profileName;
+      setAvatar({ ...avatars[avatarSelected.ID], profileList: newListProfile })
+      toast.success("Profile updated successfully")
+    }
+    handleCloseModal("update_profile_modal");
+  };
+
+
+  const handleShow = (modalId: string) => {
+    const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (modal) {
+      modal.showModal();
+    }
+  };
+
+  // Close modal handler
+  const handleCloseModal = (modalId: string) => {
+    const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (modal) {
+      modal.close();
+    }
+  };
+
+
+  const actionMove = (path: string) => {
+    router.push(`/${path}`)
+  }
+
+  const handleProfileSelect = (profileId: number) => {
+    if (!avatarSelected) return;
+    if (avatars[avatarSelected.ID].profileSelect === profileId) return;
+    setAvatar({ ...avatars[avatarSelected.ID], profileSelect: profileId })
+    toast.success(`Profile changed to Profile: ${avatars[avatarSelected.ID].profileList[profileId].profile_name}`)
+  }
+
+  const handleDeleteProfile = (profileId: number, e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!avatarSelected || profileId == 0) return;
+    if (window.confirm(`Are you sure you want to delete profile: ${avatars[avatarSelected.ID].profileList[profileId].profile_name}?`)) {
+      const newListProfile = [...listProfile]
+      newListProfile.splice(profileId, 1)
+      setAvatar({ ...avatars[avatarSelected.ID], profileList: newListProfile, profileSelect: profileId - 1 })
+      toast.success(`Profile ${avatars[avatarSelected.ID].profileList[profileId].profile_name} deleted successfully`)
+    }
+
+  }
+
+  const handleConnectOrSyncPS = async () => {
+    if (isConnectPS) {
+      const res = await syncDataToPS()
+      if (res.success) {
+        toast.success(transI18n("syncSuccess"))
+      } else {
+        toast.error(`${transI18n("syncFailed")}: ${res.message}`)
+      }
+    } else {
+      const res = await connectToPS()
+      if (res.success) {
+        toast.success(transI18n("connectedSuccess"))
+      } else {
+        toast.error(`${transI18n("connectedFailed")}: ${res.message}`)
+      }
+    }
+  }
+
+  const modalConfigs: ModalConfig[] = [
+    {
+      id: "update_profile_modal",
+      title: formState === "CREATE" ? transI18n("createNewProfile") : transI18n("editProfile"),
+      isOpen: isOpenCreateProfile,
+      onClose: () => {
+        setIsOpenCreateProfile(false)
+        handleCloseModal("update_profile_modal")
+      },
+      content: (
+        <div className="px-6 space-y-4">
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text text-primary font-semibold text-lg">
+                {transI18n("profileName")}
+              </span>
+            </label>
+            <input
+              type="text"
+              placeholder={transI18n("placeholderProfileName")}
+              className="input input-warning mt-1 w-full"
+              value={profileName}
+              onChange={(e) => setProfileName(e.target.value)}
+            />
+          </div>
+          <div className="modal-action">
+            <button className="btn btn-success btn-sm sm:btn-md" onClick={handleUpdateProfile}>
+              {formState === "CREATE" ? transI18n("create") : transI18n("update")}
+            </button>
+          </div>
+        </div>
+      )
+    },
+    {
+      id: "copy_profile_modal",
+      title: transI18n("copyProfiles").toUpperCase(),
+      isOpen: isOpenCopy,
+      onClose: () => {
+        setIsOpenCopy(false)
+        handleCloseModal("copy_profile_modal")
+      },
+      content: <CopyImport />
+    },
+    {
+      id: "avatars_modal",
+      title: transI18n("avatars").toUpperCase(),
+      isOpen: isOpenAvatars,
+      onClose: () => {
+        setIsOpenAvatars(false)
+        handleCloseModal("avatars_modal")
+      },
+      content: <AvatarBar onClose={() => { setIsOpenAvatars(false); handleCloseModal("avatars_modal") }} />
+    }
+  ]
+
+  // Handle ESC key to close modal
+  useEffect(() => {
+    for (const item of modalConfigs) {
+      if (!item?.isOpen) {
+        handleCloseModal(item?.id || "")
+      }
+    }
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        for (const item of modalConfigs) {
+          handleCloseModal(item?.id || "")
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleEscKey);
+    return () => window.removeEventListener('keydown', handleEscKey);
+  }, [isOpenCopy, isOpenCreateProfile, isOpenAvatars]);
+
+
+
+  return (
+    <div className="w-full px-4 pb-4 bg-base-200">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-center justify-items-center">
+
+        <div className="flex flex-col justify-center w-full">
+          <div className="flex flex-wrap items-center gap-2 ">
+            <div className="flex flex-wrap items-center h-full opacity-80 lg:hover:opacity-100 cursor-pointer text-base md:text-lg lg:text-xl">
+              {avatarSelected && (
+                <div className="flex flex-wrap items-center justify-start h-full w-full">
+                  <Image
+                    src={`${process.env.CDN_URL}/${damageType?.[avatarSelected?.DamageType]?.Icon}`}
+                    alt={'damage type'}
+                    unoptimized
+                    crossOrigin="anonymous"
+                    className="h-10 w-10 object-contain"
+                    width={100}
+                    height={100}
+                  />
+                  <p className="text-center font-bold text-lg">
+                    {transI18n(avatarSelected.BaseType.toLowerCase())}
+                  </p>
+                  <div className="text-center font-bold text-lg">{" / "}</div>
+                  <ParseText
+                    locale={locale}
+                    text={getNameChar(locale, transI18n, avatarSelected).toWellFormed()}
+                    className={"font-bold text-lg"}
+                  />
+                  <div className="text-center italic text-sm ml-2"> {`(${avatarSelected.ID})`}</div>
+                </div>
+              )}
+            </div>
+
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-base opacity-70 font-bold w-16">{transI18n("profile")}:</span>
+            <div className="dropdown dropdown-center md:dropdown-start">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-warning border-info btn-soft gap-1"
+              >
+                <span className="truncate max-w-48 font-bold">
+                  {profileCurrent?.profile_name}
+                </span>
+                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+
+              <ul className="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box min-w-max w-full mt-1 border border-base-300 max-h-60 overflow-y-auto">
+                {listProfile.map((profile, index) => (
+                  <li key={index} className="grid grid-cols-12">
+                    <button
+                      className={`col-span-8 btn btn-ghost`}
+                      onClick={() => handleProfileSelect(index)}
+                    >
+                      <span className="flex-1 truncate text-left">
+                        {profile.profile_name}
+                        {index === 0 && (
+                          <span className="text-xs text-base-content/60 ml-1">({transI18n("default")})</span>
+                        )}
+                      </span>
+
+                    </button>
+                    {index !== 0 && (
+                      <>
+                        <button
+                          className="col-span-2 flex items-center justify-center text-lg text-warning hover:bg-warning/20 z-20 w-full h-full"
+                          onClick={() => {
+                            setFormState("EDIT");
+                            setProfileName(profile.profile_name)
+                            setProfileEdit(index)
+                            setIsOpenCreateProfile(true)
+                            handleShow("update_profile_modal")
+                          }}
+                          title="Edit Profile"
+                        >
+                          <svg className="w-4 h-4 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536M4 20h4l10.293-10.293a1 1 0 000-1.414l-2.586-2.586a1 1 0 00-1.414 0L4 16v4z" />
+                          </svg>
+                        </button>
+                        <button
+                          className="col-span-2 flex items-center justify-center text-error hover:bg-error/20 z-20 w-full h-full text-lg"
+                          onClick={(e) => {
+                            handleDeleteProfile(index, e)
+                          }}
+                          title="Delete Profile"
+                        >
+                          <svg className="w-4 h-4 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4h6v3m5 0H4" />
+                          </svg>
+                        </button>
+                      </>
+                    )}
+                  </li>
+                ))}
+
+                <li className="border-t border-base-300 mt-2 pt-2 z-10">
+                  <button
+                    onClick={() => {
+                      setIsOpenCopy(true)
+                      setResetData(baseType, damageType)
+                      handleShow("copy_profile_modal")
+                    }}
+                    className="btn btn-ghost flex justify-start px-3 py-2 h-full w-full hover:bg-base-200 cursor-pointer text-primary z-20"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    </svg>
+                    {transI18n("copyProfiles")}
+                  </button>
+                  <button
+                    className="btn btn-ghost flex justify-start px-3 py-2 h-full w-full hover:bg-base-200 cursor-pointer text-primary z-20"
+                    onClick={() => {
+
+                      setIsOpenCreateProfile(true)
+                      setFormState("CREATE");
+                      setProfileName("")
+                      handleShow("update_profile_modal")
+                    }}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                    </svg>
+                    {transI18n("addNewProfile")}
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div className=" grid grid-cols-2 w-full sm:hidden gap-2">
+              <button
+                onClick={() => {
+                  setIsOpenAvatars(true)
+                  handleShow("avatars_modal")
+                }}
+                className="col-span-1 btn btn-warning btn-sm w-full">
+                {transI18n("avatars")}
+              </button>
+              <div className="col-span-1 dropdown dropdown-center w-full">
+                <label tabIndex={0} className="btn btn-info btn-sm w-full">
+                  {transI18n("actions")}
+                </label>
+                <ul
+                  tabIndex={0}
+                  className="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box min-w-max w-full mt-1 border border-base-300 max-h-60 overflow-y-auto"
+                >
+                  <li>
+                    <button onClick={() => actionMove('')}>
+                      {transI18n("characterInformation")}
+                    </button>
+                  </li>
+                  <li>
+                    <button onClick={() => actionMove('relics-info')}>
+                      {transI18n("relics")}
+                    </button>
+                  </li>
+                  <li>
+                    <button onClick={() => actionMove('eidolons-info')}>
+                      {transI18n("eidolons")}
+                    </button>
+                  </li>
+                  <li>
+                    <button onClick={() => actionMove('skills-info')}>
+                      {transI18n("skills")}
+                    </button>
+                  </li>
+                  <li>
+                    <button onClick={() => actionMove('showcase-card')}>
+                      {transI18n("showcaseCard")}
+                    </button>
+                  </li>
+                  <li>
+                    <button onClick={handleConnectOrSyncPS} className="btn btn-primary btn-sm">
+                      {isConnectPS ? transI18n("sync") : transI18n("connectPs")}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <div className="hidden sm:grid grid-cols-3 gap-2 w-full">
+          <button className="btn btn-success btn-sm" onClick={() => actionMove("")}>
+            {transI18n("characterInformation")}
+          </button>
+          <button className="btn btn-success btn-sm" onClick={() => actionMove("relics-info")}>
+            {transI18n("relics")}
+          </button>
+          <button className="btn btn-success btn-sm" onClick={() => actionMove("eidolons-info")}>
+            {transI18n("eidolons")}
+          </button>
+          <button className="btn btn-success btn-sm" onClick={() => actionMove("skills-info")}>
+            {transI18n("skills")}
+          </button>
+          <button className="btn btn-success btn-sm" onClick={() => actionMove("showcase-card")}>
+            {transI18n("showcaseCard")}
+          </button>
+          <button onClick={handleConnectOrSyncPS} className="btn btn-primary btn-sm">
+            {isConnectPS ? transI18n("sync") : transI18n("connectPs")}
+          </button>
+        </div>
+
+        {modalConfigs.map(({ id, title, onClose, content }) => (
+          <dialog key={id} id={id} className="modal">
+            <div className="modal-box w-11/12 max-w-[90%] max-h-[85vh] bg-base-100 text-base-content border border-purple-500/50 shadow-lg shadow-purple-500/20">
+              <div className="sticky top-0 z-10">
+                <motion.button
+                  whileHover={{ scale: 1.1, rotate: 90 }}
+                  transition={{ duration: 0.2 }}
+                  className="btn btn-circle btn-md absolute right-2 top-2 bg-red-600 hover:bg-red-700 text-white border-none"
+                  onClick={onClose}
+                >
+                  ✕
+                </motion.button>
+              </div>
+              <div className="border-b border-purple-500/30 px-6 py-4 mb-4">
+                <h3 className="font-bold text-2xl text-transparent bg-clip-text bg-linear-to-r from-pink-400 to-cyan-400">
+                  {title}
+                </h3>
+              </div>
+              {content}
+            </div>
+          </dialog>
+        ))}
+
+
+      </div>
+    </div>
+  );
+}

src/components/avatarBar/index.tsx

@@ -0,0 +1,140 @@
+"use client"
+import Image from "next/image"
+import { useMemo } from "react"
+import CharacterCard from "../card/characterCard"
+import useLocaleStore from "@/stores/localeStore"
+import { useTranslations } from "next-intl"
+import useDetailDataStore from "@/stores/detailDataStore"
+import useCurrentDataStore from '@/stores/currentDataStore';
+import { calcRarity, getNameChar } from "@/helper"
+
+export default function AvatarBar({ onClose }: { onClose?: () => void }) {
+    const { 
+        avatarSearch, 
+        mapAvatarElementActive, 
+        mapAvatarPathActive, 
+        setAvatarSearch,
+        setAvatarSelected,
+        setMapAvatarElementActive, 
+        setMapAvatarPathActive,
+        setSkillIDSelected,
+    } = useCurrentDataStore()
+    const { mapAvatar, baseType, damageType } = useDetailDataStore()
+    const transI18n = useTranslations("DataPage")
+    const {locale} = useLocaleStore()
+
+    const listAvatar = useMemo(() => {
+        if (!mapAvatar || !locale || !transI18n) return []
+
+        let list = Object.values(mapAvatar)
+
+        if (avatarSearch) {
+            list = list.filter(item =>
+                getNameChar(locale, transI18n, item)
+                    .toLowerCase()
+                    .includes(avatarSearch.toLowerCase())
+            )
+        }
+
+        const allElementFalse = !Object.values(mapAvatarElementActive).some(v => v)
+        const allPathFalse = !Object.values(mapAvatarPathActive).some(v => v)
+
+        list = list.filter(item =>
+            (allElementFalse || mapAvatarElementActive[item.DamageType]) &&
+            (allPathFalse || mapAvatarPathActive[item.BaseType])
+        )
+
+        list.sort((a, b) => {
+            const r = calcRarity(b.Rarity) - calcRarity(a.Rarity)
+            if (r !== 0) return r
+            return b.ID - a.ID
+        })
+
+        return list
+    }, [mapAvatar, mapAvatarElementActive, mapAvatarPathActive, avatarSearch, locale, transI18n])
+
+
+    return (
+        <div className="grid grid-flow-row h-full auto-rows-max w-full">
+            <div className="h-full rounded-lg mx-2 py-2">
+                <div className="container">
+                    <div className="flex flex-col h-full gap-2">
+                        <div className="flex flex-col gap-2">
+                            <div className="flex justify-center">
+                                <input type="text"
+                                    placeholder={transI18n("placeholderCharacter")}
+                                    className="input input-bordered input-primary w-full"
+                                    value={avatarSearch}
+                                    onChange={(e) => setAvatarSearch(e.target.value)}
+                                />
+                            </div>
+                            <div className="grid grid-cols-7 sm:grid-cols-4  lg:grid-cols-7 mb-1 mx-1 gap-2 w-full max-h-[17vh] min-h-[5vh] overflow-y-auto">
+                                {Object.entries(damageType).filter(([key]) => key !== "").map(([key, value]) => (
+                                    <div
+                                        key={key}
+                                        onClick={() => {
+                                            setMapAvatarElementActive({ ...mapAvatarElementActive, [key]: !mapAvatarElementActive[key] })
+                                        }}
+                                        className="hover:bg-gray-600 grid items-center justify-items-center cursor-pointer rounded-md shadow-lg"
+                                        style={{
+                                            backgroundColor: mapAvatarElementActive[key] ? "#374151" : "#6B7280"
+                                        }}>
+                                        <Image
+                                            src={`${process.env.CDN_URL}/${value.Icon}`}
+                                            alt={key}
+                                            unoptimized
+                                            crossOrigin="anonymous"
+                                            className="h-7 w-7 2xl:h-10 2xl:w-10 object-contain rounded-md"
+                                            width={200}
+                                            height={200} />
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="grid grid-cols-9 sm:grid-cols-5 lg:grid-cols-9 mb-1 mx-1 gap-2 overflow-y-auto w-full max-h-[17vh] min-h-[5vh]">
+                                {Object.entries(baseType).filter(([key]) => key !== "").map(([key, value]) => (
+                                    <div
+                                        key={key}
+                                        onClick={() => {
+                                            setMapAvatarPathActive({ ...mapAvatarPathActive, [key]: !mapAvatarPathActive[key] })
+                                        }}
+                                        className="hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-lg cursor-pointer"
+                                        style={{
+                                            backgroundColor: mapAvatarPathActive[key] ? "#374151" : "#6B7280"
+                                        }}
+                                    >
+
+                                        <Image
+                                            src={`${process.env.CDN_URL}/${value.Icon}`}
+                                            unoptimized
+                                            crossOrigin="anonymous"
+                                            alt={key}
+                                            className="h-7 w-7 2xl:h-10 2xl:w-10 object-contain rounded-md"
+                                            width={200}
+                                            height={200} />
+                                    </div>
+                                ))}
+
+                            </div>
+                        </div>
+
+                        <div className="flex items-start h-full">
+                            <ul className="grid grid-cols-3 sm:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-[65vh] overflow-y-scroll overflow-x-hidden">
+                                {listAvatar.map((item, index) => (
+                                    <div key={index} onClick={() => {
+                                        setAvatarSelected(item);
+                                        setSkillIDSelected(null)
+                                        if (onClose) onClose()
+                                    }}>
+                                        <CharacterCard data={item} />
+                                    </div>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/avatarInfo/index.tsx

@@ -0,0 +1,529 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client"
+
+import useUserDataStore from "@/stores/userDataStore";
+import { useEffect, useMemo } from "react";
+import { motion } from "framer-motion";
+import LightconeBar from '../lightconeBar'
+import { calcPromotion, calcRarity, replaceByParam } from '@/helper';
+import { getSkillTree } from '@/helper/getSkillTree';
+import { useTranslations } from 'next-intl';
+import ParseText from '../parseText';
+import useLocaleStore from '@/stores/localeStore';
+import useModelStore from '@/stores/modelStore';
+import Image from 'next/image';
+import useCurrentDataStore from "@/stores/currentDataStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import { getLocaleName } from "@/helper/getName";
+export default function AvatarInfo() {
+    const { avatarSelected, setResetDataLightcone } = useCurrentDataStore()
+    const { avatars, setAvatars, setAvatar } = useUserDataStore()
+    const { isOpenLightcone, setIsOpenLightcone } = useModelStore()
+    const { mapLightCone, baseType } = useDetailDataStore()
+    const transI18n = useTranslations("DataPage")
+    const { locale } = useLocaleStore();
+
+    const lightcone = useMemo(() => {
+        if (!avatarSelected) return null;
+        const avatar = avatars[avatarSelected.ID];
+        return avatar?.profileList[avatar.profileSelect]?.lightcone || null;
+    }, [avatarSelected, avatars]);
+
+    const lightconeDetail = useMemo(() => {
+        if (!mapLightCone || !lightcone?.item_id) return null;
+        return mapLightCone?.[lightcone.item_id.toString()] || null;
+    }, [lightcone, mapLightCone]);
+
+    const handleShow = (modalId: string) => {
+        const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+        if (modal) {
+            setIsOpenLightcone(true);
+            modal.showModal();
+        }
+    };
+
+    // Close modal handler
+    const handleCloseModal = (modalId: string) => {
+        setIsOpenLightcone(false);
+        const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+        if (modal) {
+            modal.close();
+        }
+    };
+
+    // Handle ESC key to close modal
+    useEffect(() => {
+        if (!isOpenLightcone) {
+            handleCloseModal("action_detail_modal");
+            return;
+        }
+
+        const handleEscKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isOpenLightcone) {
+                handleCloseModal("action_detail_modal");
+            }
+        };
+
+        window.addEventListener('keydown', handleEscKey);
+
+        return () => window.removeEventListener('keydown', handleEscKey);
+    }, [isOpenLightcone]);
+
+    return (
+        <div className="bg-base-100 max-h-[77vh] min-h-[50vh] overflow-y-scroll overflow-x-hidden">
+            {avatarSelected && avatars[avatarSelected?.ID.toString() || ""] && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
+                    <div className="m-2 min-h-96">
+                        <div className="container">
+                            <div className="card bg-base-200 shadow-xl">
+                                <div className="card-body">
+                                    {/* Header */}
+                                    <div className="flex items-center justify-between mb-6">
+                                        <h2 className="card-title text-2xl font-bold flex items-center gap-2">
+                                            <div className="w-2 h-8 bg-linear-to-b from-success to-success/50 rounded-full"></div>
+                                            {transI18n("characterSettings")}
+                                        </h2>
+                                    </div>
+
+                                    <div className="space-y-6">
+                                        {/* Level Control */}
+                                        <div className="bg-base-100 rounded-xl p-6 border border-base-content/10">
+                                            <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                                <div className="w-2 h-6 bg-linear-to-b from-info to-info/50 rounded-full"></div>
+                                                {transI18n("levelConfiguration")}
+                                            </h4>
+
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text font-medium">{transI18n("characterLevel")}</span>
+                                                    <span className="label-text-alt text-info font-mono">{avatars[avatarSelected?.ID.toString() || ""]?.level}/80</span>
+                                                </label>
+                                                <div className="relative">
+                                                    <input
+                                                        type="number"
+                                                        min="1"
+                                                        max="80"
+                                                        value={avatars[avatarSelected?.ID.toString() || ""]?.level}
+                                                        onChange={(e) => {
+                                                            const newLevel = Math.min(80, Math.max(1, parseInt(e.target.value) || 1));
+
+                                                            setAvatars({ ...avatars, [avatarSelected?.ID.toString() || ""]: { ...avatars[avatarSelected?.ID.toString() || ""], level: newLevel, promotion: calcPromotion(newLevel) } });
+                                                        }}
+                                                        className="input input-bordered w-full pr-16 font-mono"
+                                                        placeholder={transI18n("placeholderLevel")}
+                                                    />
+                                                    <div
+                                                        onClick={() => {
+                                                            setAvatars({ ...avatars, [avatarSelected?.ID.toString() || ""]: { ...avatars[avatarSelected?.ID.toString() || ""], level: 80, promotion: calcPromotion(80) } });
+                                                        }}
+                                                        className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/60 cursor-pointer">
+                                                        <span className="text-sm">{transI18n("max")}</span>
+                                                    </div>
+                                                </div>
+                                                <div className="mt-2">
+                                                    <input
+                                                        type="range"
+                                                        min="1"
+                                                        max="80"
+                                                        value={avatars[avatarSelected?.ID.toString() || ""]?.level}
+                                                        onChange={(e) => {
+                                                            const newLevel = Math.min(80, Math.max(1, parseInt(e.target.value) || 1));
+                                                            setAvatars({ ...avatars, [avatarSelected?.ID.toString() || ""]: { ...avatars[avatarSelected?.ID.toString() || ""], level: newLevel, promotion: calcPromotion(newLevel) } });
+                                                        }}
+                                                        className="range range-info range-sm w-full"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* Energy Control */}
+                                        <div className="bg-base-100 rounded-xl p-6 border border-base-content/10">
+                                            <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                                <div className="w-2 h-6 bg-linear-to-b from-warning to-warning/50 rounded-full"></div>
+                                                {transI18n("ultimateEnergy")}
+                                            </h4>
+
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text font-medium">{transI18n("currentEnergy")}</span>
+                                                    <span className="label-text text-warning font-mono">
+                                                        {Math.round(avatars[avatarSelected?.ID.toString() || ""]?.sp_value)}/{avatars[avatarSelected?.ID.toString() || ""]?.sp_max}
+                                                    </span>
+                                                </label>
+                                                <input
+                                                    type="range"
+                                                    min="0"
+                                                    max={avatars[avatarSelected?.ID.toString() || ""]?.sp_max}
+                                                    value={avatars[avatarSelected?.ID.toString() || ""]?.sp_value}
+                                                    onChange={(e) => {
+                                                        if (!avatars[avatarSelected?.ID.toString() || ""]?.can_change_sp) return
+                                                        const newSpValue = Math.min(avatars[avatarSelected?.ID.toString() || ""]?.sp_max, Math.max(0, parseInt(e.target.value) || 0));
+                                                        setAvatars({ ...avatars, [avatarSelected?.ID.toString() || ""]: { ...avatars[avatarSelected?.ID.toString() || ""], sp_value: newSpValue } });
+                                                    }}
+                                                    className="range range-warning range-sm w-full"
+                                                />
+                                                <div className="flex justify-between text-sm text-base-content/60 mt-1">
+                                                    <span>0%</span>
+                                                    <span className="font-mono text-warning">{((avatars[avatarSelected?.ID.toString() || ""]?.sp_value / avatars[avatarSelected?.ID.toString() || ""]?.sp_max) * 100).toFixed(1)}%</span>
+                                                    <span>100%</span>
+                                                </div>
+                                                <div className="mt-3">
+                                                    <button
+                                                        className="btn btn-sm btn-outline btn-warning"
+                                                        onClick={() => {
+                                                            if (!avatars[avatarSelected?.ID.toString() || ""]?.can_change_sp) return
+                                                            const newSpValue = Math.ceil(avatars[avatarSelected?.ID.toString() || ""]?.sp_max / 2);
+                                                            const newAvatar = { ...avatars[avatarSelected?.ID.toString() || ""], sp_value: newSpValue }
+                                                            setAvatar(newAvatar)
+                                                        }}
+                                                    >
+                                                        {transI18n("setTo50")}
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* Technique Toggle */}
+                                        <div className="bg-base-100 rounded-xl p-6 border border-base-content/10">
+                                            <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                                <div className="w-2 h-6 bg-linear-to-b from-accent to-accent/50 rounded-full"></div>
+                                                {transI18n("battleConfiguration")}
+                                            </h4>
+
+                                            <div className="form-control">
+                                                <label className="grid grid-cols-1 gap-2 sm:grid-cols-2 label cursor-pointer">
+                                                    <div className="flex items-center gap-2">
+                                                        <svg className="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                                        </svg>
+                                                        <span className="label-text font-medium">{transI18n("useTechnique")}</span>
+                                                    </div>
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={avatars[avatarSelected?.ID.toString() || ""]?.techniques.length > 0 }
+                                                        onChange={(e) => {
+                                                            if (!avatarSelected || avatarSelected?.MazeBuff?.length == 0) return
+                                                            const techniques = e.target.checked ? avatarSelected?.MazeBuff : [];
+                                                            const newAvatar = { ...avatars[avatarSelected?.ID.toString() || ""], techniques: techniques };
+                                                            setAvatar(newAvatar);
+                                                        }}
+                                                        className="toggle toggle-accent"
+                                                    />
+                                                </label>
+                                                <div className="text-xs text-base-content/60 mt-1">
+                                                    {transI18n("techniqueNote")}
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* Enhancement Selection */}
+                                        {avatarSelected?.Enhanced && (
+                                            <div className="bg-base-100 rounded-xl p-6 border border-base-content/10">
+                                                <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                                    <svg className="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" />
+                                                    </svg>
+                                                    {transI18n("enhancement")}
+                                                </h4>
+
+                                                <div className="form-control">
+                                                    <label className="label">
+                                                        <span className="label-text font-medium">{transI18n("enhancementLevel")}</span>
+                                                        <span className="label-text-alt text-secondary font-mono">
+                                                            {avatars[avatarSelected?.ID.toString() || ""]?.enhanced || transI18n("origin")}
+                                                        </span>
+                                                    </label>
+                                                    <select
+                                                        value={avatars[avatarSelected?.ID.toString() || ""]?.enhanced || ""}
+                                                        onChange={(e) => {
+                                                            const newAvatar = avatars[avatarSelected?.ID.toString() || ""]
+                                                            if (newAvatar) {
+                                                                newAvatar.enhanced = e.target.value
+                                                                const skillTree = getSkillTree(avatarSelected, e.target.value)
+                                                                if (skillTree) {
+                                                                    newAvatar.data.skills = skillTree
+                                                                }
+                                                                setAvatar(newAvatar)
+                                                            }
+                                                        }}
+                                                        className="select select-bordered select-secondary"
+                                                    >
+                                                        <option value="">{transI18n("origin")}</option>
+                                                        {Object.keys(avatarSelected?.Enhanced || {}).map((key) => (
+                                                            <option key={key} value={key}>
+                                                                {key}
+                                                            </option>
+                                                        ))}
+                                                    </select>
+                                                    <div className="text-xs text-base-content/60 mt-1">
+                                                        {transI18n("enhancedNote")}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div className="m-2 min-h-96">
+                        <div className="container">
+                            <div className="card bg-base-200 shadow-xl">
+                                <div className="card-body">
+                                    {/* Header */}
+                                    <div className="flex items-center justify-between mb-6">
+                                        <h2 className="card-title text-2xl font-bold flex items-center gap-2">
+                                            <div className="w-2 h-8 bg-linear-to-b from-primary to-secondary rounded-full"></div>
+                                            {transI18n("lightconeEquipment")}
+                                        </h2>
+                                    </div>
+
+                                    {lightcone && lightconeDetail ? (
+                                        <div className="grid lg:grid-cols-3 gap-6">
+                                            <div className="lg:col-span-3">
+                                                {/* Level & Rank Controls */}
+                                                <div className="bg-base-100 rounded-xl p-6 border border-base-content/10">
+                                                    <h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                                                        <div className="w-2 h-6 bg-linear-to-b from-accent to-accent/50 rounded-full"></div>
+                                                        {transI18n("lightconeSettings")}
+                                                    </h4>
+
+                                                    <div className="grid md:grid-cols-2 gap-6">
+                                                        {/* Level Input */}
+                                                        <div className="form-control">
+                                                            <label className="label">
+                                                                <span className="label-text font-medium">{transI18n("level")}</span>
+                                                                <span className="label-text-alt text-primary font-mono">{lightcone.level}/80</span>
+                                                            </label>
+                                                            <div className="relative">
+                                                                <input
+                                                                    type="number"
+                                                                    min="1"
+                                                                    max="80"
+                                                                    value={lightcone.level || 1}
+                                                                    onChange={(e) => {
+                                                                        const newLightconeLevel = Math.min(80, Math.max(1, parseInt(e.target.value) || 1))
+                                                                        const newLightcone = { ...lightcone, level: newLightconeLevel, promotion: calcPromotion(newLightconeLevel) }
+                                                                        const newAvatar = { ...avatars[avatarSelected.ID] }
+                                                                        newAvatar.profileList[newAvatar.profileSelect].lightcone = newLightcone
+                                                                        setAvatar(newAvatar)
+                                                                    }}
+                                                                    className="input input-bordered w-full pr-16 font-mono"
+                                                                    placeholder={transI18n("placeholderLevel")}
+                                                                />
+                                                                <div
+                                                                    onClick={() => {
+                                                                        const newLightcone = { ...lightcone, level: 80, promotion: calcPromotion(80) }
+                                                                        const newAvatar = { ...avatars[avatarSelected.ID] }
+                                                                        newAvatar.profileList[newAvatar.profileSelect].lightcone = newLightcone
+                                                                        setAvatar(newAvatar)
+                                                                    }}
+                                                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/60 cursor-pointer">
+                                                                    <span className="text-sm">{transI18n("max")}</span>
+                                                                </div>
+                                                            </div>
+                                                            <div className="mt-2">
+                                                                <input
+                                                                    type="range"
+                                                                    min="1"
+                                                                    max="80"
+                                                                    value={lightcone.level || 1}
+                                                                    onChange={(e) => {
+                                                                        const newLightconeLevel = Math.min(80, Math.max(1, parseInt(e.target.value) || 1))
+                                                                        const newLightcone = { ...lightcone, level: newLightconeLevel, promotion: calcPromotion(newLightconeLevel) }
+                                                                        const newAvatar = { ...avatars[avatarSelected.ID] }
+                                                                        newAvatar.profileList[newAvatar.profileSelect].lightcone = newLightcone
+                                                                        setAvatar(newAvatar)
+                                                                    }}
+                                                                    className="range range-primary range-sm"
+                                                                />
+                                                            </div>
+                                                        </div>
+
+                                                        {/* Rank Selection */}
+                                                        <div className="form-control space-y-3">
+                                                            {/* Header */}
+                                                            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                                                                <span className="font-medium text-sm sm:text-base">{transI18n("superimpositionRank")}</span>
+                                                                <span className="text-info font-mono text-lg sm:text-xl font-semibold">S{lightcone.rank}</span>
+                                                            </div>
+
+                                                            {/* Rank Buttons */}
+                                                            <div className="w-full">
+                                                                <div className="grid grid-cols-5 gap-1.5 sm:gap-2 md:grid-cols-3 xl:grid-cols-5 max-w-sm mx-auto sm:mx-0">
+                                                                    {[1, 2, 3, 4, 5].map((r) => (
+                                                                        <button
+                                                                            key={r}
+                                                                            onClick={() => {
+                                                                                const newLightcone = { ...lightcone, rank: r }
+                                                                                const newAvatar = { ...avatars[avatarSelected.ID] }
+                                                                                newAvatar.profileList[newAvatar.profileSelect].lightcone = newLightcone
+                                                                                setAvatar(newAvatar)
+                                                                            }}
+                                                                            className={`
+                                                                                btn btn-sm sm:btn-md font-mono font-semibold
+                                                                                transition-all duration-200 hover:scale-105
+                                                                                ${lightcone.rank === r
+                                                                                    ? 'btn-primary shadow-lg'
+                                                                                    : 'btn-outline btn-primary hover:btn-primary'
+                                                                                }`}
+                                                                        >
+                                                                            S{r}
+                                                                        </button>
+                                                                    ))}
+                                                                </div>
+                                                            </div>
+
+                                                            {/* Help Text */}
+                                                            <div className="text-xs sm:text-sm text-base-content/60 text-center sm:text-left mt-2">
+                                                                {transI18n("ranksNote")}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                {/* Action Buttons */}
+                                                <div className="flex flex-wrap gap-3 mt-2">
+                                                    <button
+                                                        onClick={() => {
+                                                            if (avatarSelected) {
+                                                                setResetDataLightcone(avatarSelected, baseType)
+                                                                handleShow("action_detail_modal")
+                                                            }
+                                                        }}
+                                                        className="btn btn-primary btn-lg flex-1 min-w-fit"
+                                                    >
+                                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                                                        </svg>
+                                                        {transI18n("changeLightcone")}
+                                                    </button>
+                                                    <button
+                                                        onClick={() => {
+                                                            const newAvatar = { ...avatars[avatarSelected.ID] }
+                                                            newAvatar.profileList[newAvatar.profileSelect].lightcone = null
+                                                            setAvatar(newAvatar)
+                                                        }}
+                                                        className="btn btn-warning btn-lg flex-1 min-w-fit"
+                                                    >
+                                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                                        </svg>
+                                                        {transI18n("removeLightcone")}
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                                            {/* Lightcone Image */}
+                                            <div className="lg:col-span-1">
+                                                <div className="">
+                                                    <Image
+                                                        unoptimized
+                                                        crossOrigin="anonymous"
+                                                        width={904}
+                                                        height={1260}
+                                                        priority
+                                                        src={`${process.env.CDN_URL}/${lightconeDetail?.Image?.ImagePath}`}
+                                                        className="w-full h-full rounded-lg object-cover shadow-lg"
+                                                        alt="Lightcone"
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            {/* Lightcone Info & Controls */}
+                                            <div className="lg:col-span-2 space-y-6">
+                                                {/* Basic Info */}
+                                                {lightconeDetail && (
+                                                    <div className="bg-base-300 rounded-xl p-6 border border-base-content/10">
+                                                        <div className="flex flex-wrap items-center gap-3 mb-4">
+                                                            <h3 className="text-2xl font-bold text-base-content">
+                                                                <ParseText
+                                                                    locale={locale}
+                                                                    text={getLocaleName(locale, lightconeDetail.Name)}
+                                                                />
+                                                            </h3>
+                                                            <div className="badge badge-outline badge-lg">
+                                                                {transI18n(lightconeDetail.BaseType.toLowerCase())}
+                                                            </div>
+                                                            <div className="badge badge-outline badge-lg">
+                                                                {calcRarity(lightconeDetail.Rarity) + "⭐"}
+                                                            </div>
+                                                            <div className="badge badge-outline badge-lg">
+                                                                {"id: " + lightcone.item_id}
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="prose prose-sm max-w-none">
+                                                            <div
+                                                                className="text-base-content/80 leading-relaxed"
+                                                                dangerouslySetInnerHTML={{
+                                                                    __html: replaceByParam(
+                                                                       getLocaleName(locale, lightconeDetail.Skills.Desc),
+                                                                       lightconeDetail.Skills.Level[lightcone.rank.toString()]?.Param || []
+                                                                    )
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                )}
+
+
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        /* No Lightcone Equipped State */
+                                        <div className="text-center py-12">
+                                            <div
+                                                onClick={() => handleShow("action_detail_modal")}
+                                                className="w-24 h-24 mx-auto mb-6 bg-base-300 rounded-full flex items-center justify-center cursor-pointer"
+                                            >
+                                                <svg className="w-12 h-12 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                                </svg>
+                                            </div>
+                                            <h3 className="text-xl font-semibold mb-2">{transI18n("noLightconeEquipped")}</h3>
+                                            <p className="text-base-content/60 mb-6">{transI18n("equipLightconeNote")}</p>
+                                            <button
+                                                onClick={() => {
+                                                    if (avatarSelected) {
+                                                        setResetDataLightcone(avatarSelected, baseType)
+                                                        handleShow("action_detail_modal")
+                                                    }
+                                                }}
+                                                className="btn btn-success btn-lg"
+                                            >
+                                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                                                </svg>
+                                                {transI18n("equipLightcone")}
+                                            </button>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <dialog id="action_detail_modal" className="modal backdrop-blur-sm">
+                <div className="modal-box w-11/12 max-w-5xl max-h-[85vh] bg-base-100 text-base-content border border-purple-500/50 shadow-lg shadow-purple-500/20">
+                    <div className="sticky top-0 z-10">
+                        <motion.button
+                            whileHover={{ scale: 1.1, rotate: 90 }}
+                            transition={{ duration: 0.2 }}
+                            className="btn btn-circle btn-md absolute right-2 top-2 bg-red-600 hover:bg-red-700 text-white border-none"
+                            onClick={() => handleCloseModal("action_detail_modal")}
+                        >
+                            ✕
+                        </motion.button>
+                    </div>
+                    <LightconeBar />
+                </div>
+
+            </dialog>
+        </div>
+
+    );
+}

src/components/card/characterCard.tsx

@@ -0,0 +1,83 @@
+"use client";
+import { getNameChar } from '@/helper';
+import useLocaleStore from '@/stores/localeStore';
+import { AvatarDetail } from '@/types';
+import ParseText from '../parseText';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import useDetailDataStore from '@/stores/detailDataStore';
+
+interface CharacterCardProps {
+  data: AvatarDetail
+}
+
+export default function CharacterCard({ data }: CharacterCardProps) {
+  const { locale } = useLocaleStore();
+  const transI18n = useTranslations("DataPage");
+  const { baseType, damageType } = useDetailDataStore()
+
+  return (
+    <li
+      className="z-10 flex flex-col items-center rounded-xl shadow-xl 
+               bg-linear-to-br from-base-300 via-base-100 to-warning/70
+               transform transition-transform duration-300 ease-in-out 
+               hover:scale-105 cursor-pointer min-h-45 sm:min-h-45 md:min-h-52.5 lg:min-h-55 xl:min-h-60 2xl:min-h-65"
+    >
+      <div
+        className={`w-full rounded-md bg-linear-to-br ${data.Rarity === "CombatPowerAvatarRarityType5"
+          ? "from-yellow-400 via-yellow-600/70 to-yellow-800/50"
+          : "from-purple-400 via-purple-600/70 to-purple-800/50"
+          }`}
+      >
+
+        <div className="relative w-full h-32 lg:h-26 xl:h-36">
+          <Image
+            width={376}
+            height={512}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${data.Image.AvatarIconPath}`}
+            priority={true}
+            className="rounded-md w-full h-full object-contain"
+            alt="ALT"
+          />
+          <Image
+            width={32}
+            height={32}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${damageType?.[data.DamageType].Icon}`}
+            className="absolute top-0 left-0 w-6 h-6 rounded-full"
+            alt={data.DamageType.toLowerCase()}
+          />
+          <Image
+            width={32}
+            height={32}
+            unoptimized
+            crossOrigin="anonymous"
+            src={`${process.env.CDN_URL}/${baseType?.[data.BaseType].Icon}`}
+            className="absolute top-0 right-0 w-6 h-6 rounded-full"
+            alt={data.BaseType.toLowerCase()}
+            style={{
+              boxShadow: "inset 0 0 8px 4px #9CA3AF"
+            }}
+          />
+        </div>
+      </div>
+
+      <ParseText
+        locale={locale}
+        text={getNameChar(locale, transI18n, data)}
+        className="
+          w-full px-0.5
+          my-1
+          text-center font-bold text-shadow-white
+          leading-tight
+          wrap-break-word
+          text-sm sm:text-base 2xl:text-lg
+        "
+      />
+    </li>
+
+  );
+}

src/components/card/characterInfoCard.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import React from 'react';
+import { CharacterInfoCardType } from '@/types';
+import useLocaleStore from '@/stores/localeStore';
+import Image from 'next/image';
+import ParseText from '../parseText';
+import useDetailDataStore from '@/stores/detailDataStore';
+import { getLocaleName } from '@/helper/getName';
+
+export default function CharacterInfoCard({ character, selectedCharacters, onCharacterToggle }: { character: CharacterInfoCardType, selectedCharacters: CharacterInfoCardType[], onCharacterToggle: (characterId: CharacterInfoCardType) => void }) {
+    const isSelected = selectedCharacters.some((selectedCharacter) => selectedCharacter.avatar_id === character.avatar_id);
+    const { mapAvatar, mapLightCone, baseType, damageType } = useDetailDataStore();
+    const { locale } = useLocaleStore();
+
+    return (
+        <div
+            className={`bg-base-200/60 rounded-xl p-4 border cursor-pointer transition-all duration-200 ${isSelected
+                ? 'border-blue-400 ring-2 ring-blue-400/50'
+                : 'border-base-300/50 hover:border-base-300 opacity-75'
+                }`}
+
+            onClick={() => onCharacterToggle(character)}
+        >
+
+            {/* Character Portrait */}
+            <div className="relative mb-4">
+                <div className="w-full h-48 rounded-lg overflow-hidden relative">
+                    <Image
+                        src={`${process.env.CDN_URL}/${mapAvatar?.[character.avatar_id.toString()]?.Image?.AvatarIconPath}`}
+                        alt={getLocaleName(locale, mapAvatar?.[character.avatar_id.toString()]?.Name)}
+                        width={376}
+                        height={512}
+                        unoptimized
+                        crossOrigin="anonymous"
+                        className="w-full h-full object-contain"
+                    />
+                    <Image
+                        width={48}
+                        height={48}
+                        unoptimized
+                        crossOrigin="anonymous"
+                        src={`${process.env.CDN_URL}/${damageType?.[mapAvatar?.[character.avatar_id.toString()]?.DamageType || ""].Icon}`}
+                        className="absolute top-0 left-0 w-10 h-10 rounded-full"
+                        alt={mapAvatar[character.avatar_id.toString()]?.DamageType.toLowerCase()}
+                    />
+                    <Image
+                        width={48}
+                        height={48}
+                        unoptimized
+                        crossOrigin="anonymous"
+                        src={`${process.env.CDN_URL}/${baseType?.[mapAvatar?.[character.avatar_id.toString()]?.BaseType || ""].Icon}`}
+                        className="absolute top-0 right-0 w-10 h-10 rounded-full"
+                        alt={mapAvatar[character.avatar_id.toString()]?.BaseType.toLowerCase()}
+                        style={{
+                            boxShadow: "inset 0 0 8px 4px #9CA3AF"
+                        }}
+                    />
+                </div>
+            </div>
+
+            {/* Character Name and Level */}
+            <div className="w-full rounded-lg flex items-center justify-center mb-2">
+                <div className="text-center">
+                    <ParseText className="text-lg font-bold"
+                        text={getLocaleName(locale, mapAvatar[character.avatar_id.toString()]?.Name)}
+                        locale={locale}
+                    />
+                    <div className="text-base mb-1">Lv.{character.level}  E{character.rank}</div>
+                </div>
+            </div>
+            {character.relics.length > 0 && (
+                <div className="flex flex-wrap items-center justify-center gap-2 mb-4">
+                    {character.relics.map((relic, index) => (
+                        <div key={index} className="relative">
+                            <div className="w-9 h-9 rounded-lg flex items-center justify-center border border-amber-500/50">
+                                <Image
+                                    src={`${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${relic.relic_set_id}_${relic.relic_id.toString()[relic.relic_id.toString().length - 1]}.png`}
+                                    alt="Relic"
+                                    unoptimized
+                                    crossOrigin="anonymous"
+                                    width={124}
+                                    height={124}
+                                    className="w-14 h-14 object-contain"
+                                />
+                            </div>
+                            <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs px-1 rounded">
+                                +{relic.level}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {/* Light Cone */}
+            {character.lightcone.item_id && (
+                <div className="">
+                    <div className="rounded-lg h-42 flex items-center justify-center">
+                        <Image
+                            unoptimized
+                            crossOrigin="anonymous"
+                            src={`${process.env.CDN_URL}/${mapLightCone?.[character.lightcone.item_id.toString()]?.Image?.ImagePath}`}
+                            alt={getLocaleName(locale, mapLightCone?.[character.lightcone.item_id.toString()]?.Name)}
+                            width={348}
+                            height={408}
+                            className="w-full h-full object-contain rounded-lg"
+                        />
+
+                    </div>
+                    <div className="w-full h-full rounded-lg flex items-center justify-center">
+                        <div className="text-center">
+                            <div className="text-lg font-bold">
+                                <ParseText
+                                    text={getLocaleName(locale, mapLightCone[character.lightcone.item_id.toString()]?.Name)}
+                                    locale={locale}
+                                />
+                            </div>
+                            <div className="text-base mb-1">Lv.{character.lightcone.level}  S{character.lightcone.rank}</div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

src/components/card/lightconeCard.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { getLocaleName } from '@/helper';
+import useLocaleStore from '@/stores/localeStore';
+import ParseText from '../parseText';
+import Image from 'next/image';
+import { LightConeDetail } from '@/types';
+
+interface LightconeCardProps {
+    data: LightConeDetail
+}
+
+export default function LightconeCard({ data }: LightconeCardProps) {
+
+    const { locale } = useLocaleStore();
+    const text = getLocaleName(locale, data.Name)
+    return (
+        <li className="z-10 flex flex-col items-center rounded-md shadow-lg 
+            bg-linear-to-b from-customStart to-customEnd transform transition-transform duration-300 
+            hover:scale-105 cursor-pointer min-h-55"
+        >
+            <div
+                className={`w-full rounded-md bg-linear-to-br ${data.Rarity === "CombatPowerLightconeRarity5"
+                    ? "from-yellow-400 via-yellow-600/70 to-yellow-800/50"
+                    : data.Rarity === "CombatPowerLightconeRarity4" ? "from-purple-400 via-purple-600/70 to-purple-800/50" :
+                        "from-blue-400 via-blue-600/70 to-blue-800/50"
+                    }`}
+            >
+
+                <div className="relative w-full h-full">
+                    <Image
+                        loading="lazy"
+                        src={`${process.env.CDN_URL}/${data?.Image?.ThumbnailPath}`}
+                        unoptimized
+                        crossOrigin="anonymous"
+                        width={348}
+                        height={408}
+                        className="w-full h-full rounded-md object-cover"
+                        alt="ALT"
+                    />
+                </div>
+            </div>
+
+            <ParseText
+                locale={locale}
+                text={text}
+                className="mt-2 px-1 text-center text-sm sm:text-base  font-bold leading-tight"
+            />
+        </li>
+
+    );
+
+}

src/components/card/profileCard.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from 'react';
+import { AvatarProfileCardType } from '@/types';
+import useLocaleStore from '@/stores/localeStore';
+import Image from 'next/image';
+import ParseText from '../parseText';
+import useDetailDataStore from '@/stores/detailDataStore';
+import { getLocaleName } from '@/helper/getName';
+
+
+export default function ProfileCard({ profile, selectedProfile, onProfileToggle }: { profile: AvatarProfileCardType, selectedProfile: AvatarProfileCardType[], onProfileToggle: (profileId: AvatarProfileCardType) => void }) {
+    const isSelected = selectedProfile.some((selectedProfile) => selectedProfile.key === profile.key);
+    const { mapLightCone } = useDetailDataStore();
+    const { locale } = useLocaleStore();
+
+    return (
+        <div
+            className={`bg-base-200/60 rounded-xl p-4 border cursor-pointer transition-all duration-200 ${isSelected
+                ? 'border-blue-400 ring-2 ring-blue-400/50'
+                : 'border-base-300/50 hover:border-base-300 opacity-75'
+                }`}
+
+            onClick={() => onProfileToggle(profile)}
+        >
+            {/* Light Cone */}
+            {profile.lightcone && (
+                <div className="">
+                    <div className="rounded-lg h-42 flex items-center justify-center">
+                        <Image
+                            unoptimized
+                            crossOrigin="anonymous"
+                            src={`${process.env.CDN_URL}/spriteoutput/lightconemaxfigures/${profile.lightcone.item_id}.png`}
+                            alt={getLocaleName(locale, mapLightCone[profile.lightcone.item_id.toString()]?.Name)}
+                            width={348}
+                            height={408}
+                            className="w-full h-full object-contain rounded-lg"
+                        />
+
+                    </div>
+                    <div className="w-full h-full rounded-lg flex items-center justify-center">
+                        <div className="text-center">
+                            <div className="text-lg font-bold">
+                                <ParseText
+                                    text={getLocaleName(locale, mapLightCone[profile.lightcone.item_id.toString()]?.Name)}
+                                    locale={locale}
+                                />
+                            </div>
+                            <div className="text-base mb-1">Lv.{profile.lightcone.level}  S{profile.lightcone.rank}</div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {Object.keys(profile.relics).length > 0 && (
+                <div className="flex flex-wrap items-center justify-center gap-2 mb-4">
+                    {Object.values(profile.relics).map((relic, index) => (
+                        <div key={index} className="relative">
+                            <div className="w-9 h-9 rounded-lg flex items-center justify-center border border-amber-500/50">
+                                <Image
+                                    unoptimized
+                                    crossOrigin="anonymous"
+                                    src={`${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${relic.relic_set_id}_${relic.relic_id.toString()[relic.relic_id.toString().length - 1]}.png`}
+                                    alt="Relic"
+                                    width={124}
+                                    height={124}
+                                    className="w-14 h-14 object-contain"
+                                />
+                            </div>
+                            <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white text-xs px-1 rounded">
+                                +{relic.level}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

src/components/card/relicCard.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import useRelicMakerStore from "@/stores/relicMakerStore";
+import useUserDataStore from "@/stores/userDataStore";
+import Image from "next/image";
+import { useMemo } from "react";
+
+interface RelicCardProps {
+    slot: string
+    avatarId: string
+}
+const getRarityColor = (rarity: string) => {
+    switch (rarity) {
+        case '3': return 'border-green-500 shadow-green-500/50 bg-linear-to-br from-green-700 via-green-400 to-green-500';
+        case '4': return 'border-blue-500 shadow-blue-500/50 bg-linear-to-br from-blue-700 via-blue-400 to-blue-500';
+        case '5': return 'border-purple-500 shadow-purple-500/50 bg-linear-to-br from-purple-700 via-purple-400 to-purple-500';
+        case '6': return 'border-yellow-500 shadow-yellow-500/50 bg-linear-to-br from-yellow-700 via-yellow-400 to-yellow-500';
+        default: return 'border-gray-500 shadow-gray-500/50';
+    }
+};
+
+const getRarityName = (slot: string) => {
+    switch (slot) {
+        case '1': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/HEAD.png"
+                    alt="Head"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Head</h2>
+            </div>
+        );
+        case '2': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/HAND.png"
+                    alt="Hand"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Hands</h2>
+            </div>
+        );
+        case '3': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/BODY.png"
+                    alt="Body"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Body</h2>
+            </div>
+        );
+        case '4': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/FOOT.png"
+                    alt="Foot"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Feet</h2>
+            </div>
+        );
+        case '5': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/NECK.png"
+                    alt="Neck"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Planar sphere</h2>
+            </div>
+        );
+        case '6': return (
+            <div className="flex items-center gap-1">
+                <Image
+                    unoptimized
+                    crossOrigin="anonymous"
+                    src="/relics/OBJECT.png"
+                    alt="Object"
+                    width={20}
+                    height={20}
+                    className="bg-black/50 rounded-full"
+                />
+                <h2>Link rope</h2>
+            </div>
+        );
+        default: return '';
+    }
+};
+export default function RelicCard({ slot, avatarId }: RelicCardProps) {
+    const { avatars } = useUserDataStore()
+    const { selectedRelicSlot } = useRelicMakerStore()
+
+    const relicDetail = useMemo(() => {
+        const avatar = avatars[avatarId];
+        if (avatar) {
+            if (avatar.profileList[avatar.profileSelect].relics[slot]) {
+                return avatar.profileList[avatar.profileSelect].relics[slot];
+            }
+            return null;
+        }
+        return null;
+    }, [avatars, avatarId, slot]);
+
+    return (
+        <div>
+            {relicDetail ? (
+                <div
+                    className="flex flex-col items-center cursor-pointer ">
+                    <div
+                        className={`
+                              relative w-24 h-24 rounded-full
+                              ${getRarityColor(relicDetail.relic_id.toString()[0])}
+                              shadow-xl
+                              flex items-center justify-center
+                              cursor-pointer transition-transform
+                              ${selectedRelicSlot === slot ? 'ring-5 ring-success scale-105' : 'ring-3 ring-primary'}
+                            `}
+                    >
+                        <span>
+                            <Image
+                                unoptimized
+                                crossOrigin="anonymous"
+                                src={`${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${relicDetail.relic_set_id}_${slot}.png`}
+                                alt="Relic"
+                                width={124}
+                                height={124}
+                                className="w-14 h-14 object-contain"
+                            />
+                        </span>
+
+                        {/* Level Badge */}
+                        <div className="absolute -bottom-2 bg-base-100 border-2 border-base-300 rounded-full px-2 py-1">
+                            <span className="text-sm font-bold text-primary">+{relicDetail.level}</span>
+                        </div>
+                    </div>
+
+                    <div className="mt-3 text-center">
+                        <div className="text-sm font-medium text-base-content">{getRarityName(slot)}</div>
+                    </div>
+                </div>
+            ) : (
+                <div
+                    className="flex flex-col items-center cursor-pointer">
+                    <div
+                        className={`
+                              relative w-24 h-24 rounded-full border-4 
+                              ${getRarityColor("None")}
+                              bg-base-300 shadow-xl
+                              flex items-center justify-center
+                              cursor-pointer hover:scale-105 transition-transform
+                              ring-4 ring-primary
+                            `}
+                    >
+                        <span className="text-3xl">
+                            <svg className="w-12 h-12 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                            </svg>
+                        </span>
+
+                        {/* Level Badge */}
+                        <div className="absolute -bottom-2 bg-base-100 border-2 border-base-300 rounded-full px-2 py-1">
+                            <span className="text-sm font-bold text-primary">+{0}</span>
+                        </div>
+                    </div>
+
+                    <div className="mt-3 text-center">
+                        <div>{getRarityName(slot)}</div>
+                    </div>
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/card/simpleCharacterCard.tsx

@@ -0,0 +1,69 @@
+"use client";
+import Image from 'next/image';
+import { AvatarDetail } from '@/types';
+import useDetailDataStore from '@/stores/detailDataStore';
+
+
+interface SimpleAvatarCardProps {
+  data: AvatarDetail;
+  isSelected?: boolean;
+  onClick?: () => void;
+  showRemoveHover?: boolean;
+}
+
+export const SimpleAvatarCard = ({ data, isSelected, onClick, showRemoveHover }: SimpleAvatarCardProps) => {
+const { baseType, damageType } = useDetailDataStore()
+
+  return (
+    <div 
+      onClick={onClick}
+      className={`relative w-16 h-16 sm:w-20 sm:h-20 rounded-md cursor-pointer transition-transform duration-200 ease-in-out hover:scale-105 shadow-md shrink-0
+        ${isSelected ? 'ring-2 ring-success opacity-60' : ''}
+        bg-linear-to-br ${data.Rarity === "CombatPowerAvatarRarityType5"
+          ? "from-yellow-400 via-yellow-600/70 to-yellow-800/50"
+          : "from-purple-400 via-purple-600/70 to-purple-800/50"
+        }`}
+    >
+      <Image
+        width={80}
+        height={80}
+        unoptimized
+        crossOrigin="anonymous"
+        src={`${process.env.CDN_URL}/${data.Image.ActionAvatarHeadIconPath}`}
+        priority={true}
+        className="w-full h-full object-contain"
+        alt="Avatar"
+      />
+      <div className="absolute top-0 left-0 w-5 h-5 bg-black/40 rounded-full flex items-center justify-center p-0.5">
+        <Image
+          width={20}
+          height={20}
+          unoptimized
+          crossOrigin="anonymous"
+          src={`${process.env.CDN_URL}/${damageType?.[data.DamageType]?.Icon}`}
+          className="w-full h-full object-contain"
+          alt="Element"
+        />
+      </div>
+      <div className="absolute top-0 right-0 w-5 h-5 bg-black/40 rounded-full flex items-center justify-center p-0.5">
+        <Image
+          width={20}
+          height={20}
+          unoptimized
+          crossOrigin="anonymous"
+          src={`${process.env.CDN_URL}/${baseType?.[data.BaseType]?.Icon}`}
+          className="w-full h-full object-contain"
+          alt="Path"
+        />
+      </div>
+
+      {showRemoveHover && (
+        <div className="absolute inset-0 bg-error/80 rounded-md flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/changelog/index.tsx

@@ -0,0 +1,91 @@
+
+import useLocaleStore from '@/stores/localeStore';
+import { Check, Sparkles, Bug, Zap, Package, Calendar } from 'lucide-react';
+
+export default function ChangelogBar() {
+    const { changelog } = useLocaleStore()
+
+    const getIcon = (type: string) => {
+        switch (type) {
+            case 'feature':
+                return <Sparkles className="w-3 h-3 md:w-4 md:h-4" />;
+            case 'fix':
+                return <Bug className="w-3 h-3 md:w-4 md:h-4" />;
+            case 'improvement':
+                return <Zap className="w-3 h-3 md:w-4 md:h-4" />;
+            default:
+                return <Package className="w-3 h-3 md:w-4 md:h-4" />;
+        }
+    };
+
+    const getBadgeClass = (type: string) => {
+        switch (type) {
+            case 'feature':
+                return 'badge-success';
+            case 'fix':
+                return 'badge-error';
+            case 'improvement':
+                return 'badge-warning';
+            default:
+                return 'badge-info';
+        }
+    };
+
+    const getTypeLabel = (type: string) => {
+        switch (type) {
+            case 'feature':
+                return 'Feature';
+            case 'fix':
+                return 'Fix';
+            case 'improvement':
+                return 'Improvement';
+            default:
+                return 'Update';
+        }
+    };
+
+    return (
+        <div className="md:p-4">
+            {/* Alert */}
+            {/* <div className="alert alert-info mb-4 md:p-2 p-1">
+                <AlertCircle className="w-6 h-6" />
+            </div> */}
+
+            {/* Timeline */}
+            <div className="flex flex-col gap-4">
+                {changelog.map((change, index) => (
+                    <div key={index} className="bg-base-100 shadow-sm">
+                        <div className="flex flex-col gap-2">
+                            {/* Version Header */}
+                            <div className="flex flex-row items-center gap-2 md:gap-3">
+                                <div className={`badge ${getBadgeClass(change.type)} gap-1 md:gap-2 p-1`}>
+                                    {getIcon(change.type)}
+                                    {getTypeLabel(change.type)}
+                                </div>
+                                <h2 className="card-title text-sm md:text-lg">
+                                    Version {change.version}
+                                </h2>
+                                <div className="flex items-center gap-1 md:gap-2 text-base-content/60 ml-auto">
+                                    <Calendar className="w-3 h-3 md:w-4 md:h-4" />
+                                    <span className="text-sm">{change.date}</span>
+                                </div>
+                            </div>
+
+                            {/* Changes List */}
+                            <ul className="space-y-3">
+                                {change.items.map((item, itemIndex) => (
+                                    <li key={itemIndex} className="flex items-start gap-3">
+                                        <div className="mt-1">
+                                            <Check className="w-5 h-5 text-success" />
+                                        </div>
+                                        <span className="text-base-content">{item}</span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

src/components/clientDataFetcher/index.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import {
+  useFetchASGroupData,
+  useFetchAvatarData,
+  useFetchChangelog,
+  useFetchConfigData,
+  useFetchLightconeData,
+  useFetchMOCGroupData,
+  useFetchMonsterData,
+  useFetchPeakGroupData,
+  useFetchPFGroupData,
+  useFetchRelicSetData
+} from "@/lib/hooks"
+
+export default function ClientDataFetcher({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const q1 = useFetchConfigData()
+  const q2 = useFetchAvatarData()
+  const q3 = useFetchLightconeData()
+  const q4 = useFetchRelicSetData()
+  const q5 = useFetchMonsterData()
+  const q6 = useFetchPFGroupData()
+  const q7 = useFetchMOCGroupData()
+  const q8 = useFetchASGroupData()
+  const q9 = useFetchPeakGroupData()
+  const q10 = useFetchChangelog()
+
+  const queries = [q1,q2,q3,q4,q5,q6,q7,q8,q9,q10]
+
+  const loading = queries.some(q => q.isLoading)
+
+  const progress =
+    (queries.filter(q => q.isSuccess).length / queries.length) * 100
+
+  if (loading) {
+    return (
+      <div className="flex h-screen flex-col items-center justify-center gap-4">
+        <div className="text-lg font-semibold">Loading data...</div>
+
+        <progress
+          className="progress progress-primary w-56"
+          value={progress}
+          max="100"
+        />
+
+        <div>{Math.floor(progress)}%</div>
+      </div>
+    )
+  }
+
+  return <>{children}</>
+}

src/components/connectBar/index.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import { connectToPS, syncDataToPS } from "@/helper"
+import useConnectStore from "@/stores/connectStore"
+import useGlobalStore from "@/stores/globalStore"
+import { PSConnectType } from "@/types"
+import { useTranslations } from "next-intl"
+import { useState } from "react"
+
+export default function ConnectBar() {
+    const transI18n = useTranslations("DataPage")
+    const [message, setMessage] = useState({ text: '', type: '' });
+    const {
+        connectionType,
+        privateType,
+        serverUrl,
+        username,
+        password,
+        setConnectionType,
+        setPrivateType,
+        setServerUrl,
+        setUsername,
+        setPassword
+    } = useConnectStore()
+    const { isConnectPS, setIsConnectPS } = useGlobalStore()
+
+    return (
+        <div className="px-6 py-4">
+            <div className="form-control grid grid-cols-1 w-full mb-6">
+                <label className="label">
+                    <span className="label-text font-semibold text-purple-300">{transI18n("connectionType")}</span>
+                </label>
+                <select
+                    className="select w-full select-bordered border-purple-500/30 focus:border-purple-500 bg-base-200 mt-1"
+                    value={connectionType}
+                    onChange={(e) => { 
+                        setIsConnectPS(false) 
+                        setConnectionType(e.target.value)
+                    }}
+                >
+                    <option value={PSConnectType.FireflyGo}>FireflyGo</option>
+                    <option value={PSConnectType.RobinSR}>RobinSR</option>
+                    <option value={PSConnectType.Other}>{transI18n("other")}</option>
+                </select>
+            </div>
+
+            {connectionType === PSConnectType.Other && (
+                <div className="flex flex-col md:space-x-4 mb-6 gap-2">
+                    <div className="form-control w-full mb-4 md:mb-0">
+                        <label className="label">
+                            <span className="label-text font-semibold text-purple-300">{transI18n("serverUrl")}</span>
+                        </label>
+                        <input
+                            type="text"
+                            placeholder={transI18n("placeholderServerUrl")}
+                            className="input input-bordered w-full border-purple-500/30 focus:border-purple-500 bg-base-200 mt-1"
+                            value={serverUrl}
+                            onChange={(e) => setServerUrl(e.target.value)}
+                        />
+                    </div>
+                    <div className="form-control w-full mb-4 md:mb-0">
+                        <label className="label">
+                            <span className="label-text font-semibold text-purple-300">{transI18n("privateType")}</span>
+                        </label>
+                        <select
+                            className="select w-full select-bordered border-purple-500/30 focus:border-purple-500 bg-base-200 mt-1"
+                            value={privateType}
+                            onChange={(e) => setPrivateType(e.target.value)}
+                        >
+                            <option value="Local">{transI18n("local")}</option>
+                            <option value="Server">{transI18n("server")}</option>
+                        </select>
+                    </div>
+
+                    <div className="form-control w-full mb-4 md:mb-0">
+                        <label className="label">
+                            <span className="label-text font-semibold text-purple-300">{transI18n("username")}</span>
+                        </label>
+                        <input
+                            type="text"
+                            placeholder={transI18n("placeholderUsername")}
+                            className="input input-bordered w-full border-purple-500/30 focus:border-purple-500 bg-base-200 mt-1"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                        />
+                    </div>
+                    <div className="form-control w-full mb-4 md:mb-0">
+                        <label className="label">
+                            <span className="label-text font-semibold text-purple-300">{transI18n("password")}</span>
+                        </label>
+                        <input
+                            type="password"
+                            placeholder={transI18n("placeholderPassword")}
+                            className="input input-bordered w-full border-purple-500/30 focus:border-purple-500 bg-base-200 mt-1"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                    </div>
+                </div>
+            )}
+
+            {message.text && (
+                <div className={`alert ${message.type === 'success' ? 'alert-success' :
+                    message.type === 'error' ? 'alert-error' : 'alert-info'
+                    } mb-6`}>
+                    <span>{message.text}</span>
+                </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6 mb-2">
+                <div className="flex items-center justify-center md:justify-start">
+                    <span className="text-md mr-2">{transI18n("status")}:</span>
+                    <span
+                        className={`badge ${isConnectPS ? "badge-success" : "badge-error"
+                            } badge-lg`}
+                    >
+                        {isConnectPS ? transI18n("connected") : transI18n("unconnected")}
+                    </span>
+                </div>
+
+                {/* Buttons */}
+                <div className="flex flex-col sm:flex-row gap-2 w-full justify-center md:justify-end">
+                    <button
+                        onClick={async () => {
+                            const response = await connectToPS();
+                            if (response.success) {
+                                setMessage({
+                                    type: "success",
+                                    text: transI18n("connectedSuccess"),
+                                });
+                            } else {
+                                setMessage({
+                                    type: "error",
+                                    text: response.message,
+                                });
+                            }
+                        }}
+                        className="btn btn-primary w-full sm:w-auto"
+                    >
+                        {transI18n("connectPs")}
+                    </button>
+
+                    {isConnectPS && (
+                        <button
+                            onClick={async () => {
+                                const response = await syncDataToPS();
+                                if (response.success) {
+                                    setMessage({
+                                        type: "success",
+                                        text: transI18n("syncSuccess"),
+                                    });
+                                } else {
+                                    setMessage({
+                                        type: "error",
+                                        text: `${transI18n("syncFailed")}: ${response.message}`,
+                                    });
+                                }
+                            }}
+                            className="btn btn-success w-full sm:w-auto"
+                        >
+                            {transI18n("sync")}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+        </div>
+    )
+}

src/components/eidolonsInfo/index.tsx

@@ -0,0 +1,85 @@
+"use client"
+import { replaceByParam, getLocaleName } from '@/helper';
+import Image from "next/image";
+import ParseText from "../parseText";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";
+import { useMemo } from "react";
+import { useTranslations } from "next-intl";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import ExtraEffectList from '../extraInfo';
+
+
+export default function EidolonsInfo() {
+    const { avatarSelected } = useCurrentDataStore()
+    const { locale } = useLocaleStore()
+    const transI18n = useTranslations("DataPage")
+    const { setAvatars, avatars } = useUserDataStore()
+
+    const charRank = useMemo(() => {
+        if (!avatarSelected) return null;
+        const avatar = avatars[avatarSelected.ID];
+        if (avatar?.enhanced != "") {
+            return avatarSelected?.Enhanced?.[avatar?.enhanced]?.Ranks
+        }
+        return avatarSelected?.Ranks
+    }, [avatarSelected, avatars]);
+
+    return (
+        <div className="bg-base-100 rounded-xl p-6 shadow-lg">
+            <h2 className="flex items-center gap-2 text-2xl font-bold mb-6 text-base-content">
+                <div className="w-2 h-6 bg-linear-to-b from-primary to-primary/50 rounded-full"></div>
+                {transI18n("eidolons")}
+            </h2>
+            <div className="grid grid-cols-1 m-4 p-4 font-bold gap-4 w-fit max-h-[77vh] min-h-[50vh] overflow-y-scroll overflow-x-hidden">
+                {charRank && avatars[avatarSelected?.ID || ""] && (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        {Object.entries(charRank || {}).map(([key, rank]) => (
+                            <div key={key}
+                                className="flex flex-col items-center"
+
+                            >
+                                <div
+                                    className="cursor-pointer"
+                                    onClick={() => {
+                                        let newRank = Number(rank.Rank)
+                                        if (avatars[avatarSelected?.ID || ""]?.data?.rank == Number(rank.Rank)) {
+                                            newRank = Number(rank.Rank) - 1
+                                        }
+                                        setAvatars({ ...avatars, [avatarSelected?.ID || ""]: { ...avatars[avatarSelected?.ID || ""], data: { ...avatars[avatarSelected?.ID || ""].data, rank: newRank } } })
+                                    }}
+                                >
+                                    <Image
+                                        className={`w-60 object-contain mb-2 ${Number(rank.Rank) <= avatars[avatarSelected?.ID.toString() || ""]?.data?.rank ? "" : "grayscale"}`}
+                                        src={`${process.env.CDN_URL}/ui/ui3d/rank/_dependencies/textures/${avatarSelected?.ID}/${avatarSelected?.ID}_Rank_${rank.Rank}.png`}
+                                        alt={`Rank ${rank.Rank} Image`}
+                                        priority
+                                        unoptimized
+                                        crossOrigin="anonymous"
+                                        width={240}
+                                        height={240}
+                                    />
+
+                                    <div className="text-lg pb-1 flex items-center justify-items-center gap-2">
+                                        <span className="inline-block text-indigo-500">{rank.Rank}.</span>
+                                        <ParseText
+                                            locale={locale}
+                                            text={getLocaleName(locale, rank.Name)}
+                                            className="text-center text-base font-normal leading-tight"
+                                        />
+                                    </div>
+                                </div>
+
+                                <div className="text-sm font-normal">
+                                    <div dangerouslySetInnerHTML={{ __html: replaceByParam(getLocaleName(locale, rank.Desc), rank.Param) }} />
+                                    <ExtraEffectList extras={rank?.Extra} locale={locale} />
+                                </div>
+                            </div>
+                        ))}
+
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

src/components/extraInfo/index.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useState } from "react"
+import { replaceByParam, getLocaleName } from "@/helper"
+import { ExtraEffect } from "@/types"
+import { useTranslations } from "next-intl"
+
+type Props = {
+    extras: Record<string, ExtraEffect> | undefined
+    locale: string
+}
+
+export default function ExtraEffectList({ extras, locale }: Props) {
+    const [openList, setOpenList] = useState(false)
+    const [openId, setOpenId] = useState<number | null>(null)
+    const transI18n = useTranslations("DataPage")
+    if (!extras || Object.keys(extras).length === 0) return null
+
+    return (
+        <div className="mt-3">
+            <div
+                className="flex items-center justify-between cursor-pointer bg-primary/10 px-3 py-2 rounded-md"
+                onClick={() => setOpenList(!openList)}
+            >
+                <span className="text-sm font-semibold text-primary">
+                    {transI18n("listExtraEffect")} ({Object.keys(extras).length})
+                </span>
+
+                <span
+                    className={`transition-transform ${
+                        openList ? "rotate-90" : ""
+                    }`}
+                >
+                    ▶
+                </span>
+            </div>
+
+            <div
+                className={`overflow-hidden transition-all duration-300 ${
+                    openList ? "max-h-125 mt-2" : "max-h-0"
+                }`}
+            >
+                <div className="flex flex-col gap-2">
+                    {Object.values(extras).map((extra) => {
+                        const isOpen = openId === extra.ID
+
+                        return (
+                            <div
+                                key={extra.ID}
+                                className="bg-primary/5 rounded-md"
+                            >
+                                <div
+                                    className="flex items-center justify-between px-3 py-2 cursor-pointer"
+                                    onClick={() =>
+                                        setOpenId(isOpen ? null : extra.ID)
+                                    }
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-[10px] uppercase font-bold bg-primary/50 px-1.5 py-0.5 rounded">
+                                            {transI18n("extra")}
+                                        </span>
+
+                                        <span className="text-sm font-medium text-primary/80">
+                                            {getLocaleName(locale, extra.Name)}
+                                        </span>
+                                    </div>
+
+                                    <span
+                                        className={`transition-transform ${
+                                            isOpen ? "rotate-90" : ""
+                                        }`}
+                                    >
+                                        ▶
+                                    </span>
+                                </div>
+
+                                <div
+                                    className={`overflow-hidden transition-all duration-300 ${
+                                        isOpen ? "max-h-40 px-3 pb-2" : "max-h-0"
+                                    }`}
+                                >
+                                    <div
+                                        className="text-sm opacity-90"
+                                        dangerouslySetInnerHTML={{
+                                            __html: replaceByParam(
+                                                getLocaleName(locale, extra.Desc),
+                                                extra.Param
+                                            )
+                                        }}
+                                    />
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/extraSettingBar/index.tsx

@@ -0,0 +1,584 @@
+'use client'
+import { motion } from "framer-motion"
+import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info, RouteIcon, Search, CupSoda, UsersIcon } from "lucide-react"
+import useGlobalStore from '@/stores/globalStore'
+import { useTranslations } from "next-intl"
+import { getLocaleName, getNameChar } from "@/helper"
+import useLocaleStore from "@/stores/localeStore"
+import SelectCustomImage from "../select/customSelectImage"
+import { useMemo, useState } from "react"
+import useDetailDataStore from "@/stores/detailDataStore"
+import Editor from "react-simple-code-editor"
+import Prism from "prismjs"
+import "prismjs/components/prism-lua"
+import "prismjs/themes/prism-tomorrow.css"
+import { SimpleAvatarCard } from "../card/simpleCharacterCard"
+
+export default function ExtraSettingBar() {
+  const { extraData, setExtraData, isEnableChangePath, setIsEnableChangePath, isEnableLua, setIsEnableLua } = useGlobalStore()
+  const transI18n = useTranslations("DataPage")
+  const { mapAvatar, mapPeak, stage, baseType } = useDetailDataStore()
+  const { locale } = useLocaleStore()
+  const [showSearchStage, setShowSearchStage] = useState(false)
+  const [showSearchLineup, setShowSearchLineup] = useState(false)
+  const [isChildClick, setIsChildClick] = useState(false)
+  const [stageSearchTerm, setStageSearchTerm] = useState("")
+  const [stagePage, setStagePage] = useState(1)
+
+  const pageSize = 30
+  const stageList = useMemo(() => Object.values(stage), [stage])
+
+  const term = stageSearchTerm.toLowerCase()
+
+  const filteredStages = useMemo(() => stageList.filter((s) =>
+    getLocaleName(locale, s.Name).toLowerCase().includes(term) ||
+    String(s.ID).toLowerCase().includes(term)
+  ), [stageList, term, locale])
+
+  const paginatedStages = useMemo(() => filteredStages.slice(
+    (stagePage - 1) * pageSize,
+    stagePage * pageSize
+  ), [filteredStages, stagePage, pageSize])
+
+  const hasMorePages = useMemo(() => stagePage * pageSize < filteredStages.length, [stagePage, filteredStages])
+
+  const onChangeSearch = (v: string) => {
+    setStageSearchTerm(v)
+    setStagePage(1)
+  }
+
+  return (
+    <div className="px-4 sm:px-6 py-4 space-y-8">
+      {extraData?.theory_craft && (
+        <div className="space-y-4">
+          <h3 className="text-lg font-bold flex items-center gap-2">
+            {transI18n("theoryCraft")}
+            <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailTheoryCraft")}>
+              <Info className="text-primary" size={20} />
+            </div>
+          </h3>
+
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              <Hammer className="text-primary" size={20} />
+              <input
+                type="checkbox"
+                className="toggle toggle-primary"
+                checked={extraData?.theory_craft?.mode}
+                onChange={(e) => {
+                  setExtraData({
+                    ...extraData,
+                    theory_craft: {
+                      hp: extraData?.theory_craft?.hp || {},
+                      cycle_count: extraData?.theory_craft?.cycle_count || 1,
+                      mode: e.target.checked,
+                      stage_id: extraData?.theory_craft?.stage_id || 0
+                    }
+                  })
+                }
+
+                }
+              />
+              <span className="label-text font-semibold">{transI18n("theoryCraftMode")}</span>
+            </label>
+          </motion.div>
+
+          {extraData?.theory_craft?.mode && (
+            <>
+              <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+                <label className="flex flex-wrap items-center justify-start gap-3">
+                  <RefreshCw className="text-info" size={20} />
+                  <span className="label-text font-semibold">{transI18n("cycleCount")}</span>
+                  <input
+                    type="number"
+                    className="input input-primary"
+                    value={extraData?.theory_craft?.cycle_count}
+                    onChange={(e) =>
+                      setExtraData({
+                        ...extraData,
+                        theory_craft: {
+                          hp: extraData?.theory_craft?.hp || {},
+                          cycle_count: Number(e.target.value) || 1,
+                          mode: extraData?.theory_craft?.mode || false,
+                          stage_id: extraData?.theory_craft?.stage_id || 0
+                        }
+                      })
+                    }
+                    min="1"
+                  />
+                </label>
+              </motion.div>
+
+              <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+                <label className="flex flex-wrap items-center justify-start gap-3">
+                  <RouteIcon className="text-info" size={20} />
+                  <span className="label-text font-semibold">{transI18n("stage")}</span>
+                  <div className="relative">
+                    <div className="flex items-center justify-center gap-2">
+                      <button
+                        className="btn btn-outline w-full text-left flex items-center gap-2"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (!isChildClick) {
+                            setShowSearchStage(pre => !pre)
+                          }
+                          setIsChildClick(false)
+                        }}
+                      >
+                        <Search className="w-6 h-6" />
+                        <span className="text-left"> {transI18n("stage")}: {getLocaleName(locale, stageList.find((s) => s.ID.toString() === extraData?.theory_craft?.stage_id?.toString())?.Name) || transI18n("selectStage")}</span>
+                      </button>
+                    </div>
+                    {showSearchStage && (
+                      <div onClick={(e) => e.stopPropagation()} className="absolute top-full mt-2 w-full z-50 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-lg">
+                        <div className="flex items-center gap-2 mb-2">
+
+                          <label className="input w-full">
+                            <svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                              <g
+                                strokeLinejoin="round"
+                                strokeLinecap="round"
+                                strokeWidth="2.5"
+                                fill="none"
+                                stroke="currentColor"
+                              >
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="m21 21-4.3-4.3"></path>
+                              </g>
+                            </svg>
+                            <input
+                              type="search" className="grow"
+                              placeholder={transI18n("searchStage")}
+                              value={stageSearchTerm}
+                              onChange={(e) => onChangeSearch(e.target.value)}
+                              autoFocus
+                            />
+
+                          </label>
+                        </div>
+
+                        <div className="max-h-60 overflow-y-auto space-y-1">
+                          {paginatedStages.length > 0 ? (
+                            <>
+                              {paginatedStages.map((stage) => (
+                                <div
+                                  key={stage.ID}
+                                  className="p-2 hover:bg-primary/20 rounded cursor-pointer"
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    setIsChildClick(true)
+
+                                    if (extraData?.theory_craft?.stage_id !== Number(stage.ID)) {
+                                      setExtraData({
+                                        ...extraData,
+                                        theory_craft: {
+                                          stage_id: Number(stage.ID),
+                                          cycle_count: extraData?.theory_craft?.cycle_count ?? 1,
+                                          mode: extraData?.theory_craft?.mode ?? false,
+                                          hp: extraData?.theory_craft?.hp ?? {},
+                                          custom_lineup: extraData?.theory_craft?.custom_lineup ?? []
+                                        }
+                                      })
+                                    }
+                                    setShowSearchStage(pre => !pre)
+                                    onChangeSearch("")
+                                  }}
+                                >
+                                  {getLocaleName(locale, stage.Name)}
+                                </div>
+                              ))}
+
+
+                            </>
+                          ) : (
+                            <div className="text-sm text-center py-4">{transI18n("noStageFound")}</div>
+                          )}
+                        </div>
+                        {paginatedStages.length > 0 && (
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            <button
+                              disabled={stagePage === 1}
+                              className="btn btn-sm btn-outline btn-success mt-2"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setStagePage(stagePage - 1)
+                              }}
+                            >
+                              {transI18n("previous")}
+                            </button>
+
+                            <button
+                              disabled={!hasMorePages}
+                              className="btn btn-sm btn-outline btn-success mt-2"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                setStagePage(stagePage + 1)
+                              }}
+                            >
+                              {transI18n("next")}
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </label>
+              </motion.div>
+              <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow relative">
+                <div className="flex flex-col gap-3">
+                  <label className="flex flex-wrap items-center justify-start gap-3">
+                    <UsersIcon className="text-info" size={20} />
+                    <span className="label-text font-semibold">{transI18n("customLineup")}</span>
+                  </label>
+                  <div className="flex flex-wrap items-center gap-2 min-h-20 p-2 bg-base-300 rounded-lg border border-base-content/10">
+                    {(extraData?.theory_craft?.custom_lineup || []).length > 0 && (
+                      (extraData?.theory_craft?.custom_lineup || []).map((avatarId) => {
+                        const avatarData = mapAvatar[avatarId];
+                        if (!avatarData) return null;
+                        return (
+                          <SimpleAvatarCard
+                            key={`selected-${avatarId}`}
+                            data={avatarData}
+                            showRemoveHover={true}
+                            onClick={() => {
+                              const newLineup = (extraData?.theory_craft?.custom_lineup || []).filter(id => id !== avatarId);
+                              setExtraData({
+                                ...extraData,
+                                theory_craft: {
+                                  stage_id: extraData?.theory_craft?.stage_id ?? 30118121,
+                                  cycle_count: extraData?.theory_craft?.cycle_count ?? 1,
+                                  mode: extraData?.theory_craft?.mode ?? false,
+                                  hp: extraData?.theory_craft?.hp ?? {},
+                                  custom_lineup: newLineup
+                                }
+                              });
+                            }}
+                          />
+                        );
+                      })
+                    )}
+
+                    <button
+                      className="btn btn-outline btn-square border-dashed w-16 h-16 sm:w-20 sm:h-20"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowSearchLineup(pre => !pre);
+                      }}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" /></svg>
+                    </button>
+                  </div>
+
+                  {showSearchLineup && (
+                    <div
+                      onClick={(e) => e.stopPropagation()}
+                      className="mt-2 w-full z-50 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-2xl"
+                    >
+                      <div className="flex justify-between items-center mb-3">
+                        <span className="font-semibold text-sm">{transI18n("selectedCharacters")}</span>
+                        <button className="btn btn-sm btn-circle btn-error" onClick={() => setShowSearchLineup(false)}>X</button>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2 max-h-72 overflow-y-auto p-1">
+                        {Object.values(mapAvatar).map((avatar) => {
+                          const currentLineup = extraData?.theory_craft?.custom_lineup || [];
+                          const isSelected = currentLineup.includes(avatar.ID.toString());
+
+                          return (
+                            <SimpleAvatarCard
+                              key={avatar.ID}
+                              data={avatar}
+                              isSelected={isSelected}
+                              onClick={() => {
+                                const idStr = avatar.ID.toString();
+                                let newLineup = [...currentLineup];
+
+                                if (isSelected) {
+                                  newLineup = newLineup.filter(id => id !== idStr);
+                                } else {
+                                  newLineup.push(idStr);
+                                }
+
+                                setExtraData({
+                                  ...extraData,
+                                  theory_craft: {
+                                    stage_id: extraData?.theory_craft?.stage_id ?? 30118121,
+                                    cycle_count: extraData?.theory_craft?.cycle_count ?? 1,
+                                    mode: extraData?.theory_craft?.mode ?? false,
+                                    hp: extraData?.theory_craft?.hp ?? {},
+                                    custom_lineup: newLineup
+                                  }
+                                });
+                              }}
+                            />
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </motion.div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/*MULTIPATH CHAR */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold flex items-center gap-2">
+          {transI18n("multipathCharacter")}
+          <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailMultipathCharacter")}>
+            <Info className="text-primary" size={20} />
+          </div>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary"
+            checked={isEnableChangePath}
+            onChange={(e) => setIsEnableChangePath(e.target.checked)}
+          />
+        </h3>
+        {isEnableChangePath && (
+          <>
+            <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+              <label className="flex items-center gap-3">
+                <User className="text-warning" size={20} />
+                <span className="label-text font-semibold">{transI18n("mainPath")}</span>
+                <SelectCustomImage
+                  customSet={Object.values(mapAvatar).filter((it) => extraData?.multi_path?.multi_path_main?.includes(Number(it.ID))).map((it) => ({
+                    value: it.ID.toString(),
+                    label: getNameChar(locale, transI18n, it),
+                    imageUrl: `${process.env.CDN_URL}/${baseType?.[it.BaseType].Icon}`
+                  }))}
+                  excludeSet={[]}
+                  selectedCustomSet={extraData?.multi_path?.main?.toString() || ""}
+                  placeholder={transI18n("selectAMainStat")}
+                  setSelectedCustomSet={(it) => {
+                    if (!it) return
+                    setExtraData({
+                      ...extraData,
+                      multi_path: {
+                        march_7: extraData?.multi_path?.march_7 || 1001,
+                        main: Number(it) || 8001,
+                        multi_path_main: extraData?.multi_path?.multi_path_main || [],
+                        multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
+                      },
+                      lua: extraData?.lua || null
+                    })
+                  }}
+                />
+
+              </label>
+            </motion.div>
+
+            <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+              <label className="flex items-center gap-3">
+                <BowArrow className="text-info" size={20} />
+                <span className="label-text font-semibold">{transI18n("march7Path")}</span>
+                <SelectCustomImage
+                  customSet={Object.values(mapAvatar).filter((it) => extraData?.multi_path?.multi_path_march_7?.includes(Number(it.ID))).map((it) => ({
+                    value: it.ID.toString(),
+                    label: getNameChar(locale, transI18n, it),
+                    imageUrl: `${process.env.CDN_URL}/${baseType?.[it.BaseType].Icon}`
+                  }))}
+                  excludeSet={[]}
+                  selectedCustomSet={extraData?.multi_path?.march_7?.toString() || ""}
+                  placeholder={transI18n("selectAMainStat")}
+                  setSelectedCustomSet={(it) => {
+                    if (!it) return
+                    setExtraData({
+                      ...extraData,
+                      multi_path: {
+                        march_7: Number(it) || 1001,
+                        main: extraData?.multi_path?.main || 8001,
+                        multi_path_main: extraData?.multi_path?.multi_path_main || [],
+                        multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
+                      },
+                      lua: extraData?.lua || null
+                    })
+                  }}
+                />
+              </label>
+            </motion.div>
+          </>
+        )}
+      </div>
+
+      {/* CHALLENGE */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold">{transI18n("challenge")}</h3>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <Swords className="text-error" size={20} />
+            <span className="label-text font-semibold">{transI18n("anomalyArbitration")}</span>
+            <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailChallengePeak")}>
+              <Info className="text-primary" size={20} />
+            </div>
+            <select
+              value={extraData?.challenge?.challenge_peak_group_id || ""}
+              className="select select-error"
+              onChange={(e) =>
+                setExtraData({
+                  ...extraData,
+                  challenge: {
+                    skip_node: extraData?.challenge?.skip_node || 0,
+                    challenge_peak_group_id: parseInt(e.target.value) || 0,
+                    challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || []
+                  },
+                  lua: extraData?.lua || null
+                })
+              }
+            >
+              {Object.values(mapPeak).filter(event => extraData?.challenge?.challenge_peak_group_id_list?.includes(Number(event.ID))).map(event => (
+                <option key={event.ID} value={event.ID}>
+                  {getLocaleName(locale, event.Name)} ({event.ID})
+                </option>
+              ))}
+            </select>
+          </label>
+        </motion.div>
+
+        <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+          <label className="flex items-center gap-3">
+            <SkipForward className="text-warning" size={20} />
+            <span className="label-text font-semibold">{transI18n("skipNode")}</span>
+            <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailSkipNode")}>
+              <Info className="text-primary" size={20} />
+            </div>
+            <select
+              value={extraData?.challenge?.skip_node || "0"}
+              className="select select-warning"
+              onChange={(e) =>
+                setExtraData({
+                  ...extraData,
+                  challenge: {
+                    challenge_peak_group_id: extraData?.challenge?.challenge_peak_group_id || 0,
+                    challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || [],
+                    skip_node: parseInt(e.target.value) || 0
+                  },
+                  lua: extraData?.lua || null
+                })
+              }
+            >
+              <option value="0">{transI18n("disableSkip")}</option>
+              <option value="1">{transI18n("skipNode1")}</option>
+              <option value="2">{transI18n("skipNode2")}</option>
+            </select>
+          </label>
+        </motion.div>
+      </div>
+
+      {/*EXTRA FEATURES */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold">{transI18n("extraFeatures")}</h3>
+
+        {extraData?.setting?.hide_ui !== undefined && (
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              {extraData?.setting?.hide_ui
+                ? <EyeOff className="text-warning" size={20} />
+                : <Eye className="text-success" size={20} />
+              }
+
+              <input
+                type="checkbox"
+                className="toggle toggle-secondary"
+                checked={extraData?.setting?.hide_ui}
+                onChange={(e) =>
+                  setExtraData({
+                    ...extraData,
+                    setting: {
+                      hide_ui: e.target.checked,
+                      censorship: extraData?.setting?.censorship || false,
+                      cm: extraData?.setting?.cm || false,
+                      first_person: extraData?.setting?.first_person || false
+                    }
+                  })
+                }
+              />
+              <span className="label-text font-semibold">{transI18n("hideUI")}</span>
+              <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailHiddenUi")}>
+                <Info className="text-primary" size={20} />
+              </div>
+            </label>
+          </motion.div>
+        )}
+
+        {extraData?.setting?.censorship !== undefined && (
+          <motion.div className="form-control bg-base-200 p-4 rounded-xl shadow">
+            <label className="flex flex-wrap items-center cursor-pointer justify-start gap-3">
+              <ShieldBan className="text-error" size={20} />
+              <input
+                type="checkbox"
+                className="toggle toggle-accent"
+                checked={extraData?.setting?.censorship}
+                onChange={(e) =>
+                  setExtraData({
+                    ...extraData,
+                    setting: {
+                      censorship: e.target.checked,
+                      hide_ui: extraData?.setting?.hide_ui || false,
+                      cm: extraData?.setting?.cm || false,
+                      first_person: extraData?.setting?.first_person || false
+                    }
+                  })
+                }
+              />
+              <span className="label-text font-semibold">{transI18n("disableCensorship")}</span>
+              <div className="tooltip tooltip-info tooltip-bottom" data-tip={transI18n("detailDisableCensorship")}>
+                <Info className="text-primary" size={20} />
+              </div>
+            </label>
+          </motion.div>
+        )}
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold flex items-center gap-2">
+          {"Lua"}
+          <div className="tooltip tooltip-info tooltip-bottom">
+            <CupSoda className="text-primary" size={20} />
+          </div>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary"
+            checked={isEnableLua}
+            onChange={(e) => setIsEnableLua(e.target.checked)}
+          />
+        </h3>
+        {isEnableLua && (
+          <>
+            <div className="form-control bg-base-200 p-4 rounded-xl shadow">
+              <label className="label">
+                <span className="label-text">Lua Script</span>
+              </label>
+
+              <div className="rounded-xl overflow-hidden border border-base-300">
+                <Editor
+                  value={extraData?.lua || ""}
+                  onValueChange={(code) =>
+                    setExtraData(
+                      {
+                        ...extraData,
+                        lua: code
+                      }
+                    )
+                  }
+                  highlight={(code) => Prism.highlight(code, Prism.languages.lua, "lua")}
+                  padding={16}
+                  textareaClassName="outline-none"
+                  className="text-sm font-mono min-h-75"
+                  style={{
+                    background: "#1e1e1e",
+                    color: "#fff",
+                  }}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+    </div>
+  )
+}

src/components/footer/index.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+    return (
+        <footer className="footer footer-horizontal footer-center bg-base-200 text-base-content rounded p-10">
+            <aside>
+                <p>Copyright © {new Date().getFullYear()} - Firefly Shelter (Powered by Nextjs & DaisyUi)</p>
+            </aside>
+        </footer>
+    )
+}

src/components/header/index.tsx

@@ -0,0 +1,594 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client"
+import { downloadJson } from "@/helper";
+import { converterToFreeSRJson } from "@/helper/converterToFreeSRJson";
+import { useChangeTheme } from "@/hooks/useChangeTheme";
+import { listCurrentLanguage } from "@/constant/constant";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";
+import { motion } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import EnkaImport from "../importBar/enka";
+import useModelStore from "@/stores/modelStore";
+import FreeSRImport from "../importBar/freesr";
+import { toast } from "react-toastify";
+import { micsSchema } from "@/zod";
+import useGlobalStore from "@/stores/globalStore";
+import MonsterBar from "../monsterBar";
+import Image from "next/image";
+import ConnectBar from "../connectBar";
+import ExtraSettingBar from "../extraSettingBar";
+import ChangelogBar from "../changelog";
+import { ModalConfig } from "@/types";
+import { ScrollText } from "lucide-react";
+
+const themes = [
+    { label: "Winter" },
+    { label: "Night" },
+    { label: "Cupcake" },
+    { label: "Coffee" },
+];
+
+export default function Header() {
+    const { changeTheme } = useChangeTheme()
+    const { locale, setLocale } = useLocaleStore()
+    const {
+        avatars,
+        battle_type,
+        setAvatars,
+        setBattleType,
+        moc_config,
+        pf_config,
+        as_config,
+        ce_config,
+        peak_config,
+        setMocConfig,
+        setPfConfig,
+        setAsConfig,
+        setCeConfig,
+        setPeakConfig,
+    } = useUserDataStore()
+
+    const router = useRouter()
+    const transI18n = useTranslations("DataPage")
+    const {
+        setIsOpenImport,
+        isOpenImport,
+        setIsOpenMonster,
+        isOpenMonster,
+        setIsOpenConnect,
+        isOpenConnect,
+        setIsOpenExtra,
+        isOpenExtra,
+        setIsChangelog,
+        isChangelog
+    } = useModelStore()
+
+    const [importModal, setImportModal] = useState("enka");
+
+    const { isConnectPS, extraData } = useGlobalStore()
+
+    useEffect(() => {
+
+        const cookieLocale = document.cookie.split("; ")
+            .find((row) => row.startsWith("MYNEXTAPP_LOCALE"))
+            ?.split("=")[1];
+
+        if (cookieLocale) {
+            if (!listCurrentLanguage.hasOwnProperty(cookieLocale)) {
+                setLocale("en")
+            } else {
+                setLocale(cookieLocale)
+            }
+
+        } else {
+            let browserLocale = navigator.language.slice(0, 2);
+
+            if (!listCurrentLanguage.hasOwnProperty(browserLocale)) {
+                browserLocale = "en"
+            }
+            setLocale(browserLocale);
+            document.cookie = `MYNEXTAPP_LOCALE=${browserLocale};`
+            router.refresh()
+        }
+    }, [router, setLocale])
+
+    const changeLocale = (newLocale: string) => {
+        setLocale(newLocale)
+        document.cookie = `MYNEXTAPP_LOCALE=${newLocale};`
+        router.refresh()
+    }
+
+    const handleShow = (modalId: string) => {
+        const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+        if (modal) {
+            modal.showModal();
+        }
+    };
+
+    // Close modal handler
+    const handleCloseModal = (modalId: string) => {
+        const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+        if (modal) {
+            modal.close()
+        }
+    };
+
+    const modalConfigs: ModalConfig[] = [
+        {
+            id: "connect_modal",
+            title: transI18n("psConnection"),
+            isOpen: isOpenConnect,
+            onClose: () => {
+                setIsOpenConnect(false)
+                handleCloseModal("connect_modal")
+            },
+            content: <ConnectBar />
+        },
+        {
+            id: "import_modal",
+            title: transI18n("importSetting"),
+            isOpen: isOpenImport,
+            onClose: () => {
+                setIsOpenImport(false)
+                handleCloseModal("import_modal")
+            },
+            content: (
+                <>
+                    {importModal === "enka" && <EnkaImport />}
+                    {importModal === "freesr" && <FreeSRImport />}
+                </>
+            )
+        },
+        {
+            id: "monster_modal",
+            title: transI18n("monsterSetting"),
+            isOpen: isOpenMonster,
+            onClose: () => {
+                setIsOpenMonster(false)
+                handleCloseModal("monster_modal")
+            },
+            content: <MonsterBar />
+        },
+        {
+            id: "extra_modal",
+            title: transI18n("extraSetting"),
+            isOpen: isOpenExtra,
+            onClose: () => {
+                setIsOpenExtra(false)
+                handleCloseModal("extra_modal")
+            },
+            content: <ExtraSettingBar />
+        },
+        {
+            id: "changelog_modal",
+            title: "Changelog",
+            isOpen: isChangelog,
+            onClose: () => {
+                setIsChangelog(false)
+                handleCloseModal("changelog_modal")
+            },
+            content: <ChangelogBar />
+        }
+    ]
+
+    // Handle ESC key to close modal
+    useEffect(() => {
+        for (const item of modalConfigs) {
+            if (!item?.isOpen) {
+                handleCloseModal(item?.id || "")
+            } else {
+                handleShow(item?.id || "")
+            }
+        }
+        const handleEscKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                for (const item of modalConfigs) {
+                    handleCloseModal(item?.id || "")
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleEscKey);
+        return () => window.removeEventListener('keydown', handleEscKey);
+    }, [isOpenImport, isOpenMonster, isOpenConnect, isOpenExtra, isChangelog]);
+
+    const handleImportDatabase = (event: React.ChangeEvent<HTMLInputElement>) => {
+
+        const file = event.target.files?.[0];
+        if (!file) {
+            toast.error(transI18n("pleaseSelectAFile"))
+            return
+        }
+        if (!file.name.endsWith(".json") || file.type !== "application/json") {
+            toast.error(transI18n("fileMustBeAValidJsonFile"))
+            return
+        }
+
+        if (file) {
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const data = JSON.parse(e.target?.result as string);
+                    const parsed = micsSchema.parse(data)
+                    setAvatars(parsed.avatars)
+                    setBattleType(parsed.battle_type)
+                    setMocConfig(parsed.moc_config)
+                    setPfConfig(parsed.pf_config)
+                    setAsConfig(parsed.as_config)
+                    setCeConfig(parsed.ce_config)
+                    setPeakConfig(parsed.peak_config)
+                    toast.success(transI18n("importDatabaseSuccess"))
+                } catch {
+                    toast.error(transI18n("fileMustBeAValidJsonFile"))
+                }
+            };
+            reader.readAsText(file);
+        }
+
+    };
+
+    return (
+        <div className="navbar bg-base-100 shadow-md sticky top-0 z-50 px-3 py-1">
+            <div className="navbar-start">
+                {/* Mobile menu dropdown */}
+                <div className="dropdown">
+                    <div tabIndex={0} role="button" className="btn btn-ghost btn-sm lg:hidden hover:bg-base-200 transition-all duration-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" />
+                        </svg>
+                    </div>
+                    <ul
+                        tabIndex={0}
+                        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-10 mt-3 w-52 p-2 shadow-md border border-base-200"
+                    >
+                        <li>
+                            <details>
+                                <summary className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium w-full">{transI18n("loadData")}</summary>
+                                <ul className="p-2">
+                                    <li><a onClick={() => {
+                                        setImportModal("freesr")
+                                        setIsOpenImport(true)
+                                    }}>{transI18n("freeSr")}</a></li>
+                                    <li>
+                                        <>
+                                            <input
+                                                type="file"
+                                                accept="application/json"
+                                                id="database-data-upload"
+                                                className="hidden"
+                                                onChange={handleImportDatabase}
+                                            />
+                                            <button
+                                                onClick={() => document.getElementById('database-data-upload')?.click()}
+                                            >
+                                                {transI18n("database")}
+                                            </button>
+                                        </>
+                                    </li>
+                                    <li><a onClick={() => {
+                                        setImportModal("enka")
+                                        setIsOpenImport(true)
+                                    }}>{transI18n("enka")}</a></li>
+                                </ul>
+                            </details>
+                        </li>
+                        <li>
+                            <details>
+                                <summary className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium">{transI18n("exportData")}</summary>
+                                <ul className="p-2">
+                                    <li><a onClick={() => downloadJson("freesr-data",
+                                        converterToFreeSRJson(
+                                            avatars,
+                                            battle_type,
+                                            moc_config,
+                                            pf_config,
+                                            as_config,
+                                            ce_config,
+                                            peak_config
+                                        )
+                                    )}>{transI18n("freeSr")}</a></li>
+                                    <li><a onClick={() => downloadJson("database-data", {
+                                        avatars: avatars,
+                                        battle_type: battle_type,
+                                        moc_config: moc_config,
+                                        pf_config: pf_config,
+                                        as_config: as_config,
+                                        ce_config: ce_config,
+                                        peak_config: peak_config
+                                    })}>{transI18n("database")}</a></li>
+                                </ul>
+                            </details>
+                        </li>
+                        <li>
+                            <button
+                                className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                                onClick={() => {
+                                    setIsOpenConnect(true)
+                                }}
+                            >
+                                {transI18n("connectSetting")}
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                onClick={() => {
+                                    setIsOpenMonster(true)
+                                }}
+                                className="disabled px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                            >
+                                {transI18n("monsterSetting")}
+                            </button>
+                        </li>
+
+                        {extraData && (
+                            <li>
+                                <button
+                                    onClick={() => {
+                                        setIsOpenExtra(true)
+                                    }}
+                                    className="disabled px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                                >
+                                    {transI18n("extraSetting")}
+                                </button>
+                            </li>
+                        )}
+                    </ul>
+                </div>
+
+                {/* Logo */}
+
+                <a className="hidden sm:grid sm:grid-cols-1 items-start justify-items-center text-left gap-0 hover:scale-105 px-2">
+                    <div className="flex items-center justify-center gap-2">
+                        <Image
+                            unoptimized
+                            crossOrigin="anonymous"
+                            src="/ff-srtool.png"
+                            alt="Logo"
+                            width={250}
+                            height={250}
+                            className="w-10 h-10 xl:w-12 xl:h-12 object-contain"
+                        />
+                        <div className="flex flex-col justify-center items-start">
+                            <h1 className="text-lg xl:text-xl font-bold leading-tight">
+                                <span className="text-emerald-500">Firefly Sr</span>
+                                <span className="bg-clip-text text-transparent bg-linear-to-r from-emerald-400 via-orange-500 to-red-500">
+                                    Tools
+                                </span>
+                            </h1>
+                            <p className="text-sm text-gray-500">Firefly Shelter</p>
+                        </div>
+                    </div>
+                </a>
+
+            </div>
+
+            {/* Desktop navigation */}
+            <div className="navbar-center hidden lg:flex">
+                <ul className="menu menu-horizontal gap-1">
+                    <li>
+                        <details>
+                            <summary className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium">{transI18n("loadData")}</summary>
+                            <ul className="p-2">
+                                <li><a onClick={() => {
+                                    setImportModal("freesr")
+                                    setIsOpenImport(true)
+                                }}>{transI18n("freeSr")}</a></li>
+                                <li>
+                                    <>
+                                        <input
+                                            type="file"
+                                            accept="application/json"
+                                            id="database-data-upload"
+                                            className="hidden"
+                                            onChange={handleImportDatabase}
+                                        />
+                                        <button
+                                            onClick={() => document.getElementById('database-data-upload')?.click()}
+                                        >
+                                            {transI18n("database")}
+                                        </button>
+                                    </>
+                                </li>
+                                <li><a onClick={() => {
+                                    setImportModal("enka")
+                                    setIsOpenImport(true)
+                                }}>{transI18n("enka")}</a></li>
+                            </ul>
+                        </details>
+                    </li>
+                    <li>
+                        <details>
+                            <summary className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium">{transI18n("exportData")}</summary>
+                            <ul className="p-2">
+                                <li><a onClick={() => downloadJson("freesr-data",
+                                    converterToFreeSRJson(
+                                        avatars,
+                                        battle_type,
+                                        moc_config,
+                                        pf_config,
+                                        as_config,
+                                        ce_config,
+                                        peak_config
+                                    )
+                                )}>{transI18n("freeSr")}</a></li>
+                                <li><a onClick={() => downloadJson("database-data", {
+                                    avatars: avatars,
+                                    battle_type: battle_type,
+                                    moc_config: moc_config,
+                                    pf_config: pf_config,
+                                    as_config: as_config,
+                                    ce_config: ce_config,
+                                    peak_config: peak_config
+                                })}>{transI18n("database")}</a></li>
+                            </ul>
+                        </details>
+                    </li>
+                    <li>
+                        <button
+                            className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                            onClick={() => {
+                                setIsOpenConnect(true)
+                            }}
+                        >
+                            {transI18n("connectSetting")}
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            onClick={() => {
+                                setIsOpenMonster(true)
+                            }}
+                            className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                        >
+                            {transI18n("monsterSetting")}
+                        </button>
+                    </li>
+                    {extraData && (
+                        <li>
+                            <button
+                                onClick={() => {
+                                    setIsOpenExtra(true)
+                                }}
+                                className="px-3 py-2 hover:bg-base-200 rounded-md transition-all duration-200 font-medium"
+                            >
+                                {transI18n("extraSetting")}
+                            </button>
+                        </li>
+                    )}
+                </ul>
+            </div>
+
+            {/* Right side items */}
+            <div className="navbar-end gap-2 pr-1 ">
+                <div data-tip="Connection Status" className="tooltip tooltip-bottom">
+                    <div className="flex items-center space-x-2 p-1.5 rounded-full shadow-md">
+                        <div className={`hidden xl:block text-sm italic ${isConnectPS ? 'text-green-500' : 'text-red-500'}`}>
+                            {isConnectPS ? transI18n("connected") : transI18n("unconnected")}
+                        </div>
+                        <div className={`w-3 h-3 rounded-full ${isConnectPS ? 'bg-green-500' : 'bg-red-500'}`}></div>
+                    </div>
+                </div>
+
+                <div
+                    data-tip="View Logs"
+                    className="btn btn-ghost btn-sm btn-circle items-center justify-center w-fit tooltip tooltip-bottom"
+                    onClick={() => {
+                        setIsChangelog(true)
+                    }}
+                >
+                    <ScrollText className="w-5 h-5 text-warning" />
+                </div>
+
+                {/* Language selector - REFINED */}
+                <div className="dropdown dropdown-end">
+                    <div className="flex items-center gap-1 border border-base-300 rounded text-sm px-1.5 py-0.5 hover:bg-base-200 cursor-pointer transition-all duration-200">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-4">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+                        </svg>
+
+                        <select
+                            className="outline-none bg-base-200 cursor-pointer text-sm pr-0"
+                            value={locale}
+                            onChange={(e) => changeLocale(e.target.value)}
+                        >
+                            {Object.entries(listCurrentLanguage).map(([key, value]) => (
+                                <option key={key} value={key}>{value}</option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+
+                <div className="dropdown dropdown-end">
+                    <div tabIndex={0} role="button" className="btn btn-ghost btn-sm hover:bg-base-200 transition-all duration-200 px-2">
+                        <svg
+                            width={16}
+                            height={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            className="h-4 w-4 stroke-current"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+                            />
+                        </svg>
+                        <svg
+                            width="10px"
+                            height="10px"
+                            className="ml-1 h-2 w-2 fill-current opacity-60"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 2048 2048"
+                        >
+                            <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" />
+                        </svg>
+                    </div>
+
+                    <div
+                        tabIndex={0}
+                        className="dropdown-content bg-base-100 text-base-content rounded-lg top-px overflow-y-auto border border-base-200 shadow-md mt-12"
+                    >
+                        <ul className="menu w-40 p-1">
+                            {themes.map((theme) => (
+                                <li
+                                    key={theme.label}
+                                    onClick={() => {
+                                        if (changeTheme) changeTheme(theme.label.toLowerCase());
+                                    }}
+                                >
+                                    <button
+                                        className="gap-2 px-2 py-1.5 hover:bg-base-200 rounded text-sm transition-all duration-200"
+                                        data-set-theme={theme.label.toLowerCase()}
+                                        data-act-class="[&_svg]:visible"
+                                    >
+                                        <div
+                                            data-theme={theme.label.toLowerCase()}
+                                            className="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded p-1 shadow-sm"
+                                        >
+                                            <div className="bg-base-content size-1 rounded-full" />
+                                            <div className="bg-primary size-1 rounded-full" />
+                                            <div className="bg-secondary size-1 rounded-full" />
+                                            <div className="bg-accent size-1 rounded-full" />
+                                        </div>
+                                        <div className="text-sm">{theme.label}</div>
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {modalConfigs?.map(({ id, title, onClose, content }) => (
+                <dialog key={id} id={id} className="modal">
+                    <div className="modal-box w-11/12 max-w-[90%] max-h-[85vh] bg-base-100 text-base-content border border-purple-500/50 shadow-lg shadow-purple-500/20">
+                        <div className="sticky top-0 z-10">
+                            <motion.button
+                                whileHover={{ scale: 1.1, rotate: 90 }}
+                                transition={{ duration: 0.2 }}
+                                className="btn btn-circle btn-md absolute right-2 top-2 bg-red-600 hover:bg-red-700 text-white border-none"
+                                onClick={onClose}
+                            >
+                                ✕
+                            </motion.button>
+                        </div>
+
+                        <div className="border-b border-purple-500/30 px-6 py-4 mb-4">
+                            <h3 className="font-bold text-2xl text-transparent bg-clip-text bg-linear-to-r from-pink-400 to-cyan-400">
+                                {title}
+                            </h3>
+                        </div>
+
+                        {content}
+                    </div>
+                </dialog>
+            ))}
+        </div>
+    )
+}

src/components/importBar/copy.tsx

@@ -0,0 +1,294 @@
+"use client"
+import useUserDataStore from "@/stores/userDataStore";
+import { useState, useMemo } from "react";
+import useCopyProfileStore from "@/stores/copyProfile";
+import ProfileCard from "../card/profileCard";
+import { AvatarProfileCardType, AvatarProfileStore } from "@/types";
+import Image from "next/image";
+import { getNameChar, calcRarity } from "@/helper";
+import useLocaleStore from "@/stores/localeStore";
+import { useTranslations } from "next-intl";
+import SelectCustomImage from "../select/customSelectImage";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function CopyImport() {
+    const { avatars, setAvatar } = useUserDataStore();
+    const { avatarSelected } = useCurrentDataStore()
+    const { mapAvatar, baseType, damageType } = useDetailDataStore()
+    const { locale } = useLocaleStore()
+    const {
+        selectedProfiles,
+        avatarCopySelected,
+        setSelectedProfiles,
+        setAvatarCopySelected,
+        listElement,
+        listPath,
+        listRank,
+        setListElement,
+        setListPath,
+        setListRank
+    } = useCopyProfileStore()
+    const transI18n = useTranslations("DataPage")
+
+    const [message, setMessage] = useState({
+        type: "",
+        text: ""
+    })
+
+    const listAvatar = useMemo(() => {
+        if (!mapAvatar || !locale || !transI18n) return []
+        let list = Object.values(mapAvatar);
+        const allElementFalse = !Object.values(listElement).some(v => v)
+        const allPathFalse = !Object.values(listPath).some(v => v)
+        const allRarityFalse = !Object.values(listRank).some(v => v)
+        list = list.filter(item => (allElementFalse || listElement[item.DamageType]) && (allPathFalse || listPath[item.BaseType]) && (allRarityFalse || listRank[calcRarity(item.Rarity)]))
+        list.sort((a, b) => {
+            const r = calcRarity(b.Rarity) - calcRarity(a.Rarity)
+            if (r !== 0) return r
+            return a.ID - b.ID
+        })
+        return list
+    }, [mapAvatar, listElement, listPath, listRank, locale, transI18n])
+    
+
+    const handleProfileToggle = (profile: AvatarProfileCardType) => {
+        if (selectedProfiles.some((selectedProfile) => selectedProfile.key === profile.key)) {
+            setSelectedProfiles(selectedProfiles.filter((selectedProfile) => selectedProfile.key !== profile.key));
+            return;
+        }
+        setSelectedProfiles([...selectedProfiles, profile]);
+    };
+
+
+    const clearSelection = () => {
+        setSelectedProfiles([]);
+        setMessage({
+            type: "success",
+            text: transI18n("clearAll")
+        })
+    };
+
+    const selectAll = () => {
+        if (avatarCopySelected) {
+            setSelectedProfiles(avatars[avatarCopySelected?.ID.toString()].profileList.map((profile, index) => {
+                if (!profile.lightcone?.item_id && Object.keys(profile.relics).length == 0) {
+                    return null;
+                }
+                return {
+                    key: index,
+                    ...profile,
+                } as AvatarProfileCardType
+            }).filter((profile) => profile !== null));
+        }
+        setMessage({
+            type: "success",
+            text: transI18n("selectAll")
+        })
+    };
+
+    const handleCopy = () => {
+        if (selectedProfiles.length === 0) {
+            setMessage({
+                type: "error",
+                text: transI18n("pleaseSelectAtLeastOneProfile")
+            });
+            return;
+        }
+        if (!avatarCopySelected) {
+            setMessage({
+                type: "error",
+                text: transI18n("noAvatarToCopySelected")
+            });
+            return;
+        }
+        if (!avatarSelected) {
+            setMessage({
+                type: "error",
+                text: transI18n("noAvatarSelected")
+            });
+            return;
+        }
+
+        const newListProfile = avatars[avatarCopySelected.ID.toString()].profileList.map((profile) => {
+            if (!profile.lightcone?.item_id && Object.keys(profile.relics).length == 0) {
+                return null;
+            }
+            return {
+                ...profile,
+                profile_name: profile.profile_name + ` - Copy: ${avatarCopySelected?.ID}`,
+            } as AvatarProfileStore
+        }).filter((profile) => profile !== null);
+
+        const newAvatar = {
+            ...avatars[avatarSelected?.ID?.toString()],
+            profileList: avatars[avatarSelected?.ID?.toString()].profileList.concat(newListProfile),
+            profileSelect: avatars[avatarSelected?.ID?.toString()].profileList.length - 1,
+        }
+        setAvatar(newAvatar);
+        setSelectedProfiles([]);
+        setMessage({
+            type: "success",
+            text: transI18n("copied")
+        });
+    };
+
+    return (
+        <div className="rounded-lg px-2 min-h-[60vh]">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="mb-2">
+
+                    <div className="mt-2 w-full">
+
+                        <div className="flex items-start flex-col gap-2 mt-2 w-full">
+                            <div>{transI18n("filter")}</div>
+                            <div className="flex flex-wrap justify-start gap-5 md:gap-10 mt-2 w-full">
+                                {/* Path */}
+                                <div>
+                                    <div className="flex flex-wrap gap-2 justify-start items-center">
+                                        {Object.entries(baseType).filter(([key]) => key !== "").map(([key, value]) => (
+                                            <div
+                                                key={key}
+                                                onClick={() => {
+                                                    setListPath({ ...listPath, [key]: !listPath[key] })
+                                                }}
+                                                className="w-12.5 h-12.5 hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-md cursor-pointer"
+                                                style={{
+                                                    backgroundColor: listPath[key] ? "#374151" : "#6B7280"
+                                                }}>
+                                                <Image
+                                                    unoptimized
+                                                    crossOrigin="anonymous"
+                                                    src={`${process.env.CDN_URL}/${value.Icon}`}
+                                                    alt={key}
+                                                    className="h-8 w-8 object-contain rounded-md"
+                                                    width={200}
+                                                    height={200}
+                                                />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                {/* Element */}
+                                <div>
+                                    <div className="flex flex-wrap gap-2 justify-start items-center">
+                                        {Object.entries(damageType).filter(([key]) => key !== "").map(([key, value]) => (
+                                            <div
+                                                key={key}
+                                                onClick={() => {
+                                                    setListElement({ ...listElement, [key]: !listElement[key] })
+                                                }}
+                                                className="w-12.5 h-12.5 hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-md cursor-pointer"
+                                                style={{
+                                                    backgroundColor: listElement[key] ? "#374151" : "#6B7280"
+                                                }}>
+                                                <Image
+                                                    unoptimized
+                                                    crossOrigin="anonymous"
+                                                    src={`${process.env.CDN_URL}/${value.Icon}`}
+                                                    alt={key}
+                                                    className="h-7 w-7 2xl:h-10 2xl:w-10 object-contain rounded-md"
+                                                    width={200}
+                                                    height={200}
+                                                />
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                {/* Rank */}
+                                <div>
+                                    <div className="flex flex-wrap gap-2 justify-end items-center">
+                                        {Object.entries(listRank).map(([key], index) => (
+                                            <div
+                                                key={index}
+                                                onClick={() => {
+                                                    setListRank({ ...listRank, [key]: !listRank[key] })
+                                                }}
+                                                className="w-12.5 h-12.5 hover:bg-gray-600 grid items-center justify-items-center rounded-md shadow-md cursor-pointer"
+                                                style={{
+                                                    backgroundColor: listRank[key] ? "#374151" : "#6B7280"
+                                                }}>
+                                                <div className="font-bold text-white h-8 w-8 text-center flex items-center justify-center">{key}*</div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                        <div className="grid grid-cols-1 gap-2">
+
+                            {listAvatar.length > 0 && (
+                                <div>
+                                    <div>{transI18n("characterName")}</div>
+                                    <SelectCustomImage
+                                        customSet={listAvatar.map((avatar) => ({
+                                            value: avatar.ID.toString(),
+                                            label: getNameChar(locale, transI18n, avatar),
+                                            imageUrl: `${process.env.CDN_URL}/${avatar.Image.AvatarIconPath}`
+                                        }))}
+                                        excludeSet={[]}
+                                        selectedCustomSet={avatarCopySelected?.ID.toString() || ""}
+                                        placeholder="Character Select"
+                                        setSelectedCustomSet={(value) => setAvatarCopySelected(mapAvatar[value] || null)}
+                                    />
+                                </div>
+                            )}
+
+                        </div>
+                    </div>
+
+
+
+                    {/* Selection Info */}
+                    <div className="mt-6 flex items-center gap-4 bg-slate-800/50 p-4 rounded-lg">
+                        <span className="text-blue-400 font-medium">
+                            {transI18n("selectedProfiles")}: {selectedProfiles.length}
+                        </span>
+                        <button
+                            onClick={clearSelection}
+                            className="text-error/75 hover:text-error text-sm font-medium px-3 py-1 border border-error/75 rounded hover:bg-error/10 transition-colors cursor-pointer"
+                        >
+                            {transI18n("clearAll")}
+                        </button>
+                        <button
+                            onClick={selectAll}
+                            className="text-primary/75 hover:text-primary text-sm font-medium px-3 py-1 border border-primary/75 rounded hover:bg-primary/10 transition-colors cursor-pointer">
+                            {transI18n("selectAll")}
+                        </button>
+                        {selectedProfiles.length > 0 && (
+                            <button
+                                onClick={handleCopy}
+                                className="text-success/75 hover:text-success text-sm font-medium px-3 py-1 border border-success/75 rounded hover:bg-success/10 transition-colors cursor-pointer">
+                                {transI18n("copy")}
+                            </button>
+                        )}
+                    </div>
+                    {message.type && message.text && (
+                        <div className={(message.type == "error" ? "text-error" : "text-success") + " text-lg mt-2"} >{message.type == "error" ? "😭" : "🎉"} {message.text}</div>
+                    )}
+                </div>
+
+                {/* Character Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {avatarCopySelected && avatars[avatarCopySelected?.ID.toString()]?.profileList.map((profile, index) => {
+                        if (!profile.lightcone?.item_id && Object.keys(profile.relics).length == 0) {
+                            return null;
+                        }
+                        return (
+                            <ProfileCard
+                                key={index}
+                                profile={{ ...profile, key: index }}
+                                selectedProfile={selectedProfiles}
+                                onProfileToggle={handleProfileToggle}
+                            />
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/importBar/enka.tsx

@@ -0,0 +1,224 @@
+"use client"
+import { useState } from "react";
+import CharacterInfoCard from "../card/characterInfoCard";
+import useEnkaStore from "@/stores/enkaStore";
+import { SendDataThroughProxy } from "@/lib/api/api";
+import { CharacterInfoCardType, EnkaResponse } from "@/types";
+import useUserDataStore from "@/stores/userDataStore";
+import { converterOneEnkaDataToAvatarStore } from "@/helper";
+import useModelStore from "@/stores/modelStore";
+import { toast } from "react-toastify";
+import { useTranslations } from "next-intl";
+
+export default function EnkaImport() {
+    const {
+        uidInput,
+        setUidInput,
+        enkaData,
+        selectedCharacters,
+        setSelectedCharacters,
+        setEnkaData,
+    } = useEnkaStore();
+    const transI18n = useTranslations("DataPage")
+    const { avatars, setAvatar } = useUserDataStore();
+    const { setIsOpenImport } = useModelStore()
+    const [isLoading, setIsLoading] = useState(false)
+    const [Error, setError] = useState("")
+
+    const handlerFetchData = async () => {
+        if (!uidInput) {
+            setError(transI18n("pleaseEnterUid"))
+            return;
+        }
+        setIsLoading(true)
+        const data : EnkaResponse = await SendDataThroughProxy({data: {serverUrl: "https://enka.network/api/hsr/uid/" + uidInput, method: "GET"}})
+        if (data) {
+            setEnkaData(data)
+            setSelectedCharacters(data.detailInfo.avatarDetailList.map((character) => {
+                return {
+                    key: character.avatarId,
+                    avatar_id: character.avatarId,
+                    rank: character.rank ?? 0,
+                    level: character.level,
+                    lightcone: {
+                        level: character.equipment?.level ?? 0,
+                        rank: character.equipment?.rank ?? 0,
+                        item_id: character.equipment?.tid ?? 0,
+                    },
+                    relics: character.relicList.map((relic) => ({
+                        level: relic.level,
+                        relic_id: relic.tid,
+                        relic_set_id: parseInt(relic.tid.toString().slice(1, -1), 10),
+                    })),
+                } as CharacterInfoCardType
+            }))
+            setError("")
+        } else {
+            setError(transI18n("failedToFetchEnkaData"))
+        }
+        setIsLoading(false)
+    }
+
+    const handleCharacterToggle = (character: CharacterInfoCardType) => {
+        if (selectedCharacters.some((selectedCharacter) => selectedCharacter.key === character.key)) {
+            setSelectedCharacters(selectedCharacters.filter((selectedCharacter) => selectedCharacter.key !== character.key));
+            return;
+        }
+        setSelectedCharacters([...selectedCharacters, character]);
+    };
+
+    const clearSelection = () => {
+        setSelectedCharacters([]);
+    };
+
+    const selectAll = () => {
+        if (enkaData) {
+            setSelectedCharacters(enkaData?.detailInfo.avatarDetailList.map((character) => {
+                return {
+                    key: character.avatarId,
+                    avatar_id: character.avatarId,
+                    rank: character.rank ?? 0,
+                    level: character.level,
+                    lightcone: (character.equipment && character.equipment.tid) ? {
+                        level: character.equipment?.level ?? 0,
+                        rank: character.equipment?.rank ?? 0,
+                        item_id: character.equipment?.tid ?? 0,
+                    } : null,
+                    relics: character.relicList.map((relic) => {
+                        return {
+                            level: relic.level,
+                            relic_id: relic.tid,
+                            relic_set_id: parseInt(relic.tid.toString().slice(1, -1), 10),
+                        }
+                    }),
+                } as CharacterInfoCardType
+            }));
+        }
+    };
+
+    const handleImport = () => {
+        if (selectedCharacters.length === 0) {
+            setError(transI18n("pleaseSelectAtLeastOneCharacter"));
+            return;
+        }
+        if (!enkaData) {
+            setError(transI18n("noDataToImport"));
+            return;
+        }
+        setError("");
+        const listAvatars = { ...avatars }
+        const filterData = enkaData.detailInfo.avatarDetailList.filter((character) => selectedCharacters.some((selectedCharacter) => selectedCharacter.avatar_id === character.avatarId))
+        filterData.forEach((character) => {
+            const newAvatar = { ...listAvatars[character.avatarId.toString()] }
+            if (Object.keys(newAvatar).length !== 0) {
+                newAvatar.level = character.level ?? 0
+                newAvatar.promotion = character.promotion ?? 0
+                newAvatar.data = {
+                    rank: character.rank ?? 0,
+                    skills: character.skillTreeList.reduce((acc, skill) => {
+                        acc[skill.pointId] = skill.level;
+                        return acc;
+                    }, {} as Record<string, number>),
+                }
+                const newProfile = converterOneEnkaDataToAvatarStore(character, newAvatar.profileList.length)
+                if (newProfile) {
+                    newAvatar.profileList.push(newProfile)
+                    newAvatar.profileSelect = newAvatar.profileList.length - 1
+                }
+                setAvatar(newAvatar)
+            }
+
+        })
+        setIsOpenImport(false)
+        toast.success(transI18n("importEnkaDataSuccess"))
+    };
+
+    return (
+        <div className="bg-slate-900 p-6">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="mb-8">
+                    <h1 className="text-white text-2xl font-bold mb-6">HSR UID</h1>
+
+                    <div className="flex gap-4 items-center mb-6">
+                        <input
+                            type="text"
+                            value={uidInput}
+                            onChange={(e) => setUidInput(e.target.value)}
+                            className="bg-slate-800 text-white px-4 py-3 rounded-lg border border-slate-700 flex-1 max-w-md focus:outline-none focus:border-blue-500"
+                            placeholder="Enter UID"
+                        />
+                        <button onClick={handlerFetchData} className="btn btn-success rounded-lg transition-colors">
+                            {transI18n("getData")}
+                        </button>
+                        {selectedCharacters.length > 0 && (
+                            <button onClick={handleImport} className="btn btn-primary rounded-lg transition-colors">
+                                {transI18n("import")}
+                            </button>
+                        )}
+                    </div>
+                    {Error && (
+                        <div className="text-error text-base mt-2">😭 {Error}</div>
+                    )}
+
+                    {/* Player Info */}
+                    {enkaData && (
+                        <div className="text-white space-y-2">
+                            <div className="text-lg">Name: {enkaData.detailInfo.nickname}</div>
+                            <div className="text-lg">UID: {enkaData.detailInfo.uid}</div>
+                            <div className="text-lg">Level: {enkaData.detailInfo.level}</div>
+                        </div>
+                    )}
+
+                    {/* Selection Info */}
+                    <div className="mt-6 flex items-center gap-4 bg-slate-800/50 p-4 rounded-lg">
+                        <span className="text-blue-400 font-medium">
+                            {transI18n("selectedCharacters")}: {selectedCharacters.length}
+                        </span>
+                        <button
+                            onClick={clearSelection}
+                            className="text-error/75 hover:text-error text-sm font-medium px-3 py-1 border border-error/75 rounded hover:bg-error/10 transition-colors cursor-pointer"
+                        >
+                            {transI18n("clearAll")}
+                        </button>
+                        <button onClick={selectAll} className="text-primary/75 hover:text-primary text-sm font-medium px-3 py-1 border border-primary/75 rounded hover:bg-primary/10 transition-colors cursor-pointer">
+                            {transI18n("selectAll")}
+                        </button>
+                    </div>
+                </div>
+                {isLoading && (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
+                    </div>
+                )}
+                {/* Character Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {enkaData?.detailInfo.avatarDetailList.map((character) => (
+                        <CharacterInfoCard
+                            key={character.avatarId}
+                            character={{
+                                key: character.avatarId,
+                                avatar_id: character.avatarId,
+                                rank: character.rank ?? 0,
+                                level: character.level ?? 0,
+                                lightcone: {
+                                    level: character.equipment?.level ?? 0,
+                                    rank: character.equipment?.rank ?? 0,
+                                    item_id: character.equipment?.tid ?? 0,
+                                },
+                                relics: character.relicList.map((relic) => ({
+                                    level: relic.level ?? 0,
+                                    relic_id: relic.tid,
+                                    relic_set_id: parseInt(relic.tid.toString().slice(1, -1), 10),
+                                })),
+                            } as CharacterInfoCardType
+                            }
+                            selectedCharacters={selectedCharacters}
+                            onCharacterToggle={handleCharacterToggle}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/importBar/freesr.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import useFreeSRStore from "@/stores/freesrStore";
+import useModelStore from "@/stores/modelStore";
+import useUserDataStore from "@/stores/userDataStore";
+import { CharacterInfoCardType } from "@/types";
+import { useState } from "react";
+import CharacterInfoCard from "../card/characterInfoCard";
+import { freeSrJsonSchema } from "@/zod";
+import { toast } from "react-toastify";
+import { converterOneFreeSRDataToAvatarStore } from "@/helper";
+import { useTranslations } from "next-intl";
+
+export default function FreeSRImport() {
+    const { avatars, setAvatar } = useUserDataStore();
+    const { setIsOpenImport } = useModelStore()
+    const [isLoading, setIsLoading] = useState(false)
+    const [Error, setError] = useState("")
+    const { freeSRData, setFreeSRData, selectedCharacters, setSelectedCharacters } = useFreeSRStore()
+    const transI18n = useTranslations("DataPage")
+
+    const handleCharacterToggle = (character: CharacterInfoCardType) => {
+        if (selectedCharacters.some((selectedCharacter) => selectedCharacter.key === character.key)) {
+            setSelectedCharacters(selectedCharacters.filter((selectedCharacter) => selectedCharacter.key !== character.key));
+            return;
+        }
+        setSelectedCharacters([...selectedCharacters, character]);
+    };
+
+    const clearSelection = () => {
+        setSelectedCharacters([]);
+    };
+
+    const selectAll = () => {
+        if (freeSRData) {
+            setSelectedCharacters(Object.values(freeSRData?.avatars).map((character) => {
+                const lightcone = freeSRData.lightcones.find((lightcone) => lightcone.equip_avatar === character.avatar_id)
+                const relics = freeSRData.relics.filter((relic) => relic.equip_avatar === character.avatar_id)
+                return {
+                    key: character.avatar_id,
+                    avatar_id: character.avatar_id,
+                    rank: character.data.rank ?? 0,
+                    level: character.level,
+                    lightcone: {
+                        level: lightcone?.level ?? 0,
+                        rank: lightcone?.rank ?? 0,
+                        item_id: lightcone?.item_id ?? "",
+                    },
+                    relics: relics.map((relic) => ({
+                        level: relic.level,
+                        relic_id: relic.relic_id,
+                        relic_set_id: relic.relic_set_id,
+                    })),
+                } as CharacterInfoCardType
+            }));
+        }
+    };
+
+    const handlerReadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setIsLoading(true)
+        const file = event.target.files?.[0];
+        if (!file) {
+            setSelectedCharacters([])
+            setFreeSRData(null)
+            setError(transI18n("pleaseSelectAFile"))
+            setIsLoading(false)
+            return
+        }
+        if (!file.name.endsWith(".json") || file.type !== "application/json") {
+            setSelectedCharacters([])
+            setFreeSRData(null)
+            setError(transI18n("fileMustBeAValidJsonFile"))
+            setIsLoading(false)
+            return
+        }
+
+        if (file) {
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const data = JSON.parse(e.target?.result as string);
+                    const parsed = freeSrJsonSchema.parse(data)
+                    setFreeSRData(parsed)
+                    setError("")
+
+                    setSelectedCharacters(Object.values(parsed?.avatars || {}).map((character) => {
+                        const lightcone = parsed?.lightcones.find((lightcone) => lightcone.equip_avatar === character.avatar_id)
+                        const relics = parsed?.relics.filter((relic) => relic.equip_avatar === character.avatar_id)
+                        return {
+                            key: character.avatar_id,
+                            avatar_id: character.avatar_id,
+                            rank: character.data.rank ?? 0,
+                            level: character.level,
+                            lightcone: {
+                                level: lightcone?.level ?? 0,
+                                rank: lightcone?.rank ?? 0,
+                                item_id: lightcone?.item_id ?? "",
+                            },
+                            relics: relics?.map((relic) => ({
+                                level: relic.level,
+                                relic_id: relic.relic_id,
+                                relic_set_id: relic.relic_set_id,
+                            })) ?? [],
+                        } as CharacterInfoCardType
+                    }));
+                } catch {
+
+                    setSelectedCharacters([])
+                    setFreeSRData(null)
+                    setError(transI18n("fileMustBeAValidJsonFile"))
+                }
+            };
+            reader.readAsText(file);
+            setIsLoading(false)
+        }
+        setIsLoading(false)
+    };
+
+    const handleImport = () => {
+        if (selectedCharacters.length === 0) {
+            setError(transI18n("pleaseSelectAtLeastOneCharacter"));
+            return;
+        }
+        if (!freeSRData) {
+            setError(transI18n("noDataToImport"));
+            return;
+        }
+        setError("");
+
+        const listAvatars = { ...avatars }
+        const filterData = Object.values(freeSRData?.avatars || {}).filter((character) => selectedCharacters.some((selectedCharacter) => selectedCharacter.avatar_id === character.avatar_id))
+        filterData.forEach((character) => {
+            const newAvatar = { ...listAvatars[character.avatar_id] }
+            if (Object.keys(newAvatar).length !== 0) {
+                newAvatar.level = character.level
+                newAvatar.promotion = character.promotion
+                newAvatar.data = {
+                    rank: character.data.rank ?? 0,
+                    skills: character.data.skills
+                }
+                const newProfile = converterOneFreeSRDataToAvatarStore(freeSRData, newAvatar.profileList.length, character.avatar_id)
+                if (newProfile) {
+                    newAvatar.profileList.push(newProfile)
+                    newAvatar.profileSelect = newAvatar.profileList.length - 1
+                }
+                setAvatar(newAvatar)
+            }
+
+        })
+        setIsOpenImport(false)
+        toast.success(transI18n("importFreeSRDataSuccess"))
+    }
+
+    return (
+        <div className="bg-slate-900 p-6">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="mb-8">
+                    <h1 className="text-white text-2xl font-bold mb-6">{transI18n("freeSRImport")}</h1>
+
+                    <div className="flex gap-4 items-center mb-6">
+                        <fieldset className="fieldset">
+                            <legend className="fieldset-legend">{transI18n("pickAFile")}</legend>
+                            <input type="file" accept=".json" className="file-input file-input-info" onChange={handlerReadFile} />
+                            <label className="label">{transI18n("onlySupportFreeSRJsonFile")}</label>
+                        </fieldset>
+
+                        {selectedCharacters.length > 0 && (
+                            <button onClick={handleImport} className="btn btn-primary rounded-lg transition-colors">
+                                {transI18n("import")}
+                            </button>
+                        )}
+                    </div>
+                    {Error && (
+                        <div className="text-error text-base mt-2">😭 {Error}</div>
+                    )}
+
+
+                    {/* Selection Info */}
+                    <div className="mt-6 flex items-center gap-4 bg-slate-800/50 p-4 rounded-lg">
+                        <span className="text-blue-400 font-medium">
+                            {transI18n("selectedCharacters")}: {selectedCharacters.length}
+                        </span>
+                        <button
+                            onClick={clearSelection}
+                            className="text-error/75 hover:text-error text-sm font-medium px-3 py-1 border border-error/75 rounded hover:bg-error/10 transition-colors cursor-pointer"
+                        >
+                            {transI18n("clearAll")}
+                        </button>
+                        <button onClick={selectAll} className="text-primary/75 hover:text-primary text-sm font-medium px-3 py-1 border border-primary/75 rounded hover:bg-primary/10 transition-colors cursor-pointer">
+                            {transI18n("selectAll")}
+                        </button>
+                    </div>
+                </div>
+                {isLoading && (
+                    <div className="flex justify-center items-center h-64">
+                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
+                    </div>
+                )}
+                {/* Character Grid */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {Object.values(freeSRData?.avatars || {}).map((character) => {
+                        const lightcone = freeSRData?.lightcones.find((lightcone) => lightcone.equip_avatar === character.avatar_id)
+                        const relics = freeSRData?.relics.filter((relic) => relic.equip_avatar === character.avatar_id)
+                        return (
+                            <CharacterInfoCard
+                                key={character.avatar_id}
+                                character={{
+                                    key: character.avatar_id,
+                                    avatar_id: character.avatar_id,
+                                    rank: character.data.rank ?? 0,
+                                    level: character.level,
+                                    lightcone: {
+                                        level: lightcone?.level ?? 0,
+                                        rank: lightcone?.rank ?? 0,
+                                        item_id: lightcone?.item_id ?? "",
+                                    },
+                                    relics: relics?.map((relic) => ({
+                                        level: relic.level,
+                                        relic_id: relic.relic_id,
+                                        relic_set_id: relic.relic_set_id,
+                                    })) ?? [],
+                                } as CharacterInfoCardType
+                                }
+                                selectedCharacters={selectedCharacters}
+                                onCharacterToggle={handleCharacterToggle}
+                            />
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/lightconeBar/index.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import { useMemo } from "react"
+import Image from "next/image";
+import useLocaleStore from "@/stores/localeStore"
+import LightconeCard from "../card/lightconeCard";
+import useUserDataStore from "@/stores/userDataStore";
+import useModelStore from "@/stores/modelStore";
+import { useTranslations } from "next-intl";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import { calcRarity, getLocaleName } from "@/helper";
+
+export default function LightconeBar() {
+    const { locale } = useLocaleStore()
+    const {
+        avatarSelected,
+        mapLightconePathActive,
+        mapLightconeRankActive,
+        setMapLightconePathActive,
+        setMapLightconeRankActive,
+        lightconeSearch,
+        setLightconeSearch
+    } = useCurrentDataStore()
+    const { setAvatar, avatars } = useUserDataStore()
+    const { setIsOpenLightcone } = useModelStore()
+    const { mapLightCone, baseType } = useDetailDataStore()
+    const transI18n = useTranslations("DataPage")
+
+    const listLightcone = useMemo(() => {
+        if (!mapLightCone || !locale) return []
+
+        let list = Object.values(mapLightCone)
+
+        if (lightconeSearch) {
+            list = list.filter(item => getLocaleName(locale, item.Name).toLowerCase().includes(lightconeSearch.toLowerCase()))
+        }
+
+        const allRankFalse = !Object.values(mapLightconeRankActive).some(v => v)
+        const allPathFalse = !Object.values(mapLightconePathActive).some(v => v)
+
+        list = list.filter(item =>
+            (allRankFalse || mapLightconeRankActive[item.Rarity]) &&
+            (allPathFalse || mapLightconePathActive[item.BaseType])
+        )
+        
+        list.sort((a, b) => {
+            const r = calcRarity(b.Rarity) - calcRarity(a.Rarity)
+            if (r !== 0) return r
+            return b.ID - a.ID
+        })
+
+        return list
+    }, [mapLightCone, mapLightconePathActive, mapLightconeRankActive, lightconeSearch, locale])
+
+  
+
+    return (
+        <div>
+            <div className="border-b border-purple-500/30 px-6 py-4 mb-4">
+                <h3 className="font-bold text-2xl text-transparent bg-clip-text bg-linear-to-r from-pink-400 to-cyan-400">
+                    {transI18n("lightConeSetting")}
+                </h3>
+            </div>
+            <div className="mt-2 w-full">
+                <div className="flex items-start flex-col gap-2">
+                    <div>Search</div>
+                    <input
+                        value={lightconeSearch}
+                        onChange={(e) => setLightconeSearch(e.target.value)}
+                        type="text" placeholder="LightCone Name" className="input input-accent mt-1 w-full"
+                    />
+                </div>
+                <div className="flex items-start flex-col gap-2 mt-2 w-full">
+                    <div>Filter</div>
+                    <div className="flex flex-row flex-wrap justify-between mt-1 w-full">
+                        <div className="flex flex-wrap mb-1 mx-1 gap-2">
+                            {Object.entries(baseType).filter(([key]) => key !== "").map(([key, value]) => (
+                                <div
+                                    key={key}
+                                    onClick={() => {
+                                        setMapLightconePathActive({ ...mapLightconePathActive, [key]: !mapLightconePathActive[key] })
+                                    }}
+                                    className="h-9.5 w-9.5 md:h-12.5 md:w-12.5 hover:bg-gray-600 grid place-items-center rounded-md shadow-lg cursor-pointer"
+                                    style={{
+                                        backgroundColor: mapLightconePathActive[key] ? "#374151" : "#6B7280"
+                                    }}
+                                >
+                                    <Image
+                                        unoptimized
+                                        crossOrigin="anonymous"
+                                        src={`${process.env.CDN_URL}/${value.Icon}`}
+                                        alt={key}
+                                        className="h-7 w-7 md:h-8 md:w-8 object-contain rounded-md"
+                                        width={200}
+                                        height={200}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="flex flex-wrap mb-1 mx-1 gap-2">
+                            {Object.keys(mapLightconeRankActive).map((key, index) => (
+                                <div
+                                    key={index}
+                                    onClick={() => {
+                                        setMapLightconeRankActive({ ...mapLightconeRankActive, [key]: !mapLightconeRankActive[key] })
+                                    }}
+                                    className="h-9.5 w-9.5 md:h-12.5 md:w-12.5 hover:bg-gray-600 grid place-items-center rounded-md shadow-lg cursor-pointer"
+                                    style={{
+                                        backgroundColor: mapLightconeRankActive[key] ? "#374151" : "#6B7280"
+                                    }}
+                                >
+                                    <div className="font-bold text-white h-8 w-8 text-center flex items-center justify-center">
+                                        {key}*
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div className="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 mt-2 gap-2">
+                {listLightcone.map((item, index) => (
+                    <div key={index} onClick={() => {
+                        if (avatarSelected) {
+                            const avatar = avatars[avatarSelected?.ID?.toString()]
+                            avatar.profileList[avatar.profileSelect].lightcone = {
+                                level: 80,
+                                item_id: item.ID,
+                                rank: 1,
+                                promotion: 6
+                            }
+                            setAvatar({ ...avatar })
+                            setIsOpenLightcone(false)
+                        }
+                    }}>
+                        <LightconeCard data={item} />
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

src/components/monsterBar/as.tsx

@@ -0,0 +1,417 @@
+"use client"
+import { useEffect, useMemo } from "react";
+import SelectCustomText from "../select/customSelectText";
+import { calcMonsterStats, getLocaleName, replaceByParam } from "@/helper";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";
+import Image from "next/image";
+import { MonsterStore } from "@/types";
+import { useTranslations } from "next-intl";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function AsBar() {
+    const { locale } = useLocaleStore()
+    const {
+        as_config,
+        setAsConfig
+    } = useUserDataStore()
+    const { mapMonster, mapAS, damageType, hardLevelConfig, eliteConfig } = useDetailDataStore()
+
+    const transI18n = useTranslations("DataPage")
+
+    const challengeSelected = useMemo(() => {
+        return mapAS[as_config.event_id.toString()]?.Level.find((as) => as.ID === as_config.challenge_id)
+    }, [as_config, mapAS])
+
+    const eventSelected = useMemo(() => {
+        return mapAS[as_config.event_id.toString()]
+    }, [as_config, mapAS])
+
+    const buffList = useMemo(() => {
+        if (!eventSelected) return [];
+
+        if (as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower") {
+            return eventSelected?.BuffList1 ?? [];
+        }
+
+        if (as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper") {
+            return eventSelected?.BuffList2 ?? [];
+        }
+        return [];
+    }, [as_config.floor_side, eventSelected]);
+
+
+    useEffect(() => {
+        if (!challengeSelected || as_config.event_id === 0 || as_config.challenge_id === 0) return
+        const newBattleConfig = structuredClone(as_config)
+        newBattleConfig.cycle_count = challengeSelected.TurnLimit
+
+        newBattleConfig.blessings = []
+        if (as_config.buff_id !== 0) {
+            newBattleConfig.blessings.push({
+                id: as_config.buff_id,
+                level: 1
+            })
+        }
+
+        if (challengeSelected) {
+            challengeSelected.MazeBuff.map((item) => {
+                newBattleConfig.blessings.push({
+                    id: item.ID,
+                    level: 1
+                })
+            })
+        }
+
+        newBattleConfig.monsters = []
+        newBattleConfig.stage_id = 0
+        if ((as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower")
+            && challengeSelected.EventList1.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList1[0].ID
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if ((as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper")
+            && challengeSelected.EventList2.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList2[0].ID
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if (as_config.floor_side === "Lower -> Upper"
+            && challengeSelected.EventList1.length > 0) {
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        } else if (as_config.floor_side === "Upper -> Lower"
+            && challengeSelected.EventList2.length > 0) {
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        setAsConfig(newBattleConfig)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        challengeSelected,
+        mapAS,
+        as_config.event_id,
+        as_config.challenge_id,
+        as_config.floor_side,
+        as_config.buff_id,
+    ])
+
+    if (!mapAS) return null
+    return (
+        <div className="py-8 relative">
+
+            {/* Title Card */}
+            <div className="rounded-xl p-4 mb-2 border border-warning">
+                <div className="mb-4 w-full">
+                    <SelectCustomText
+                        customSet={Object.values(mapAS).sort((a, b) => b.ID - a.ID).map((as) => ({
+                            id: as.ID.toString(),
+                            name: getLocaleName(locale, as.Name),
+                            time: `${as.BeginTime} - ${as.EndTime}`,
+                        }))}
+                        excludeSet={[]}
+                        selectedCustomSet={as_config.event_id.toString()}
+                        placeholder={transI18n("selectASEvent")}
+                        setSelectedCustomSet={(id) => setAsConfig({
+                            ...as_config,
+                            event_id: Number(id),
+                            challenge_id: mapAS[Number(id)]?.Level.at(-1)?.ID || 0,
+                            buff_id: 0
+                        })}
+                    />
+                </div>
+                {/* Settings */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
+                        </label>
+                        <select
+                            value={as_config.challenge_id}
+                            className="select select-success"
+                            onChange={(e) => setAsConfig({ ...as_config, challenge_id: Number(e.target.value) })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectFloor")}</option>
+                            {eventSelected?.Level.map((as) => (
+                                <option key={as.ID} value={as.ID}>{getLocaleName(locale, as.Name)}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
+                        </label>
+                        <select
+                            value={as_config.floor_side}
+                            className="select select-success"
+                            onChange={(e) => setAsConfig({ ...as_config, floor_side: e.target.value })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectSide")}</option>
+                            <option value="Upper">{transI18n("upper")}</option>
+                            <option value="Lower">{transI18n("lower")}</option>
+                            <option value="Upper -> Lower">{transI18n("upperToLower")}</option>
+                            <option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
+                        </select>
+                    </div>
+                </div>
+                <div className="label-text font-bold text-success mb-2">StageId: {as_config?.stage_id}</div>
+                {eventSelected && (
+                    <div className="mb-4 w-full">
+                        <SelectCustomText
+                            customSet={buffList.map((buff) => ({
+                                id: buff.ID?.toString() || "",
+                                name: getLocaleName(locale, buff?.Name) || "",
+                                description: replaceByParam(getLocaleName(locale, buff?.Desc) || "", buff?.Param || []),
+                            }))}
+                            excludeSet={[]}
+                            selectedCustomSet={as_config?.buff_id?.toString()}
+                            placeholder={transI18n("selectBuff")}
+                            setSelectedCustomSet={(id) => setAsConfig({ ...as_config, buff_id: Number(id) })}
+                        />
+                    </div>
+                )}
+                {/* Turbulence Buff */}
+                <div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
+                    <h2 className="text-2xl font-bold mb-2 text-info">{transI18n("turbulenceBuff")}</h2>
+                    {challengeSelected ? (
+                        challengeSelected.MazeBuff.map((buff, i) => (
+                            <div
+                                key={i}
+                                className="text-base"
+                                dangerouslySetInnerHTML={{
+                                    __html: replaceByParam(
+                                        getLocaleName(locale, buff?.Desc) || "",
+                                        buff?.Param || []
+                                    )
+                                }}
+                            />
+                        ))
+                    ) : (
+                        <div className="text-base">{transI18n("noTurbulenceBuff")}</div>
+                    )}
+                </div>
+            </div>
+
+            {/* Enemy Waves */}
+            {(as_config?.challenge_id ?? 0) !== 0 && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    {/* First Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-6 text-info">{transI18n("firstHalfEnemies")}</h2>
+
+                        {challengeSelected && challengeSelected?.EventList1?.length > 0 && challengeSelected?.EventList1?.[0]?.MonsterList?.map((wave, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Object.values(wave).map((waveValue, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[waveValue.toString()],
+                                            challengeSelected?.EventList1?.[0]?.EliteGroup,
+                                            challengeSelected?.EventList1?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList1?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList1[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[waveValue.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[waveValue.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                        
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                        
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-3 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[waveValue.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Second Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
+
+                        {challengeSelected && challengeSelected?.EventList2?.length > 0 && challengeSelected?.EventList2?.[0]?.MonsterList?.map((wave, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold mb-t">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Object.values(wave).map((waveValue, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[waveValue.toString()],
+                                            challengeSelected?.EventList2?.[0]?.EliteGroup,
+                                            challengeSelected?.EventList2?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList2?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList2[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[waveValue.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[waveValue.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                        
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                        
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[waveValue.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/monsterBar/ce.tsx

@@ -0,0 +1,533 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+import {
+    Plus,
+    Trash2,
+    ChevronUp,
+    ChevronDown,
+    Search,
+    CopyPlus,
+} from "lucide-react";
+
+import useUserDataStore from "@/stores/userDataStore";
+import useLocaleStore from "@/stores/localeStore";
+import { getLocaleName } from "@/helper";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import useGlobalStore from "@/stores/globalStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import { MonsterDetail } from "@/types";
+
+
+export default function CeBar() {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [showSearchWaveId, setShowSearchWaveId] = useState<number | null>(null);
+    const { ce_config, setCeConfig } = useUserDataStore()
+    const { mapMonster, stage, damageType } = useDetailDataStore()
+    const { locale } = useLocaleStore()
+    const transI18n = useTranslations("DataPage")
+    const [showSearchStage, setShowSearchStage] = useState(false)
+    const [stageSearchTerm, setStageSearchTerm] = useState("")
+    const [stagePage, setStagePage] = useState(1)
+    const { extraData, setExtraData } = useGlobalStore()
+
+    const pageSize = 30
+
+    const pageSizeMonsters = 30
+    const [monsterPage, setMonsterPage] = useState(1)
+
+    const filteredMonsters = useMemo(() => {
+        const newlistMonster = new Set<MonsterDetail>()
+        for (const monster of Object.values(mapMonster)) {
+            if (getLocaleName(locale, monster.Name).toLowerCase().includes(searchTerm.toLowerCase())) {
+                newlistMonster.add(monster)
+            }
+            if (monster.ID.toString().includes(searchTerm.toLowerCase())) {
+                newlistMonster.add(monster)
+            }
+        }
+        return Array.from(newlistMonster)
+    }, [locale, searchTerm, mapMonster]);
+
+    const paginatedMonsters = useMemo(() =>
+        filteredMonsters.slice((monsterPage - 1) * pageSizeMonsters, monsterPage * pageSizeMonsters),
+        [filteredMonsters, monsterPage]
+    )
+
+    const hasMoreMonsterPages = useMemo(
+        () => monsterPage * pageSizeMonsters < filteredMonsters.length,
+        [monsterPage, filteredMonsters]
+    )
+
+    useEffect(() => {
+        setMonsterPage(1)
+    }, [searchTerm])
+
+    const stageList = useMemo(() => Object.values(stage).map((item) => ({
+        id: item.ID.toString(),
+        name: `${getLocaleName(locale, item.Name)} (${item.ID})`,
+    })), [stage, locale])
+
+    const filteredStages = useMemo(() => stageList.filter((s) =>
+        s.name.toLowerCase().includes(stageSearchTerm.toLowerCase())
+    ), [stageList, stageSearchTerm])
+
+    const paginatedStages = useMemo(() => filteredStages.slice(
+        (stagePage - 1) * pageSize,
+        stagePage * pageSize
+    ), [filteredStages, stagePage, pageSize])
+
+    const hasMorePages = useMemo(() => stagePage * pageSize < filteredStages.length, [stagePage, filteredStages])
+
+    useEffect(() => {
+        setStagePage(1)
+    }, [stageSearchTerm])
+
+
+    useEffect(() => {
+        if (!ce_config) return
+        if (!extraData || !extraData.theory_craft?.mode) return
+
+        const newExtraData = structuredClone(extraData)
+        if (!newExtraData?.theory_craft?.hp) {
+            newExtraData.theory_craft!.hp = {}
+        }
+
+        for (let i = 0; i < ce_config.monsters.length; i++) {
+            const waveKey = (i + 1).toString()
+            if (!newExtraData.theory_craft!.hp[waveKey]) {
+                newExtraData.theory_craft!.hp[waveKey] = []
+            }
+            for (let j = 0; j < ce_config.monsters[i].length; j++) {
+                if (newExtraData.theory_craft!.hp[waveKey][j] === undefined) {
+                    newExtraData.theory_craft!.hp[waveKey][j] = 0
+                }
+            }
+        }
+        setExtraData(newExtraData)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ce_config])
+
+
+    return (
+        <div className="z-4 py-8 h-full w-full" onClick={() => {
+
+            setShowSearchWaveId(null)
+            setShowSearchStage(false)
+        }}>
+
+            <div className="mb-4 w-full relative">
+                <div className="flex items-center justify-center gap-2">
+                    <button
+                        className="btn btn-outline w-full text-left flex items-center gap-2"
+                        onClick={(e) => {
+                            e.stopPropagation()
+                            setShowSearchStage(!showSearchStage)
+                        }}
+                    >
+                        <Search className="w-6 h-6" />
+                        <span className="text-left"> {transI18n("stage")}: {stageList.find((s) => s.id === ce_config.stage_id.toString())?.name || transI18n("selectStage")}</span>
+                    </button>
+                </div>
+                {showSearchStage && (
+                    <div onClick={(e) => e.stopPropagation()} className="absolute top-full mt-2 w-full z-50 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-lg">
+                        <div className="flex items-center gap-2 mb-2">
+
+                            <label className="input w-full">
+                                <svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                    <g
+                                        strokeLinejoin="round"
+                                        strokeLinecap="round"
+                                        strokeWidth="2.5"
+                                        fill="none"
+                                        stroke="currentColor"
+                                    >
+                                        <circle cx="11" cy="11" r="8"></circle>
+                                        <path d="m21 21-4.3-4.3"></path>
+                                    </g>
+                                </svg>
+                                <input
+                                    type="search" className="grow"
+                                    placeholder={transI18n("searchStage")}
+                                    value={stageSearchTerm}
+                                    onChange={(e) => setStageSearchTerm(e.target.value)}
+                                    autoFocus
+                                />
+
+                            </label>
+                        </div>
+
+                        <div className="max-h-60 overflow-y-auto space-y-1">
+                            {paginatedStages.length > 0 ? (
+                                <>
+                                    {paginatedStages.map((stage) => (
+                                        <div
+                                            key={stage.id}
+                                            className="p-2 hover:bg-primary/20 rounded cursor-pointer"
+                                            onClick={() => {
+                                                if (ce_config.stage_id !== Number(stage.id)) {
+                                                    setCeConfig({ ...ce_config, stage_id: Number(stage.id), cycle_count: 30 })
+                                                }
+                                                setShowSearchStage(false)
+                                                setStageSearchTerm("")
+                                            }}
+                                        >
+                                            {stage.name}
+                                        </div>
+                                    ))}
+
+
+                                </>
+                            ) : (
+                                <div className="text-sm text-center py-4">{transI18n("noStageFound")}</div>
+                            )}
+                        </div>
+                        {paginatedStages.length > 0 && (
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                                <button
+                                    disabled={stagePage === 1}
+                                    className="btn btn-sm btn-outline btn-success mt-2"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        setStagePage(stagePage - 1)
+                                    }}
+                                >
+                                    {transI18n("previous")}
+                                </button>
+
+                                <button
+                                    disabled={!hasMorePages}
+                                    className="btn btn-sm btn-outline btn-success mt-2"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        setStagePage(stagePage + 1)
+                                    }}
+                                >
+                                    {transI18n("next")}
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            <div className="relative max-w-7xl mx-auto space-y-6">
+                {ce_config.monsters.map((wave, waveIndex) => (
+                    <div key={waveIndex} className="card border border-slate-700/50 ">
+                        <div className="card-body p-6">
+                            <div className="flex items-center flex-wrap justify-between mb-4">
+                                <h2 className="text-xl font-bold text-white">{transI18n("wave")} {waveIndex + 1}</h2>
+                                <div className="flex gap-2">
+                                    <button
+                                        disabled={waveIndex === 0}
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+
+                                            const newCeConfig = structuredClone(ce_config)
+                                            const waves = newCeConfig.monsters
+                                            const temp = waves[waveIndex - 1]
+                                            waves[waveIndex - 1] = waves[waveIndex]
+                                            waves[waveIndex] = temp
+
+                                            setCeConfig(newCeConfig)
+                                        }}
+                                        className="btn btn-sm btn-success"
+                                    >
+                                        <ChevronUp className="w-4 h-4" />
+                                    </button>
+
+                                    <button
+                                        disabled={waveIndex === ce_config.monsters.length - 1}
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            const newCeConfig = structuredClone(ce_config)
+                                            const waves = newCeConfig.monsters
+                                            const temp = waves[waveIndex + 1]
+                                            waves[waveIndex + 1] = waves[waveIndex]
+                                            waves[waveIndex] = temp
+
+                                            setCeConfig(newCeConfig)
+                                        }}
+                                        className="btn btn-sm btn-success">
+                                        <ChevronDown className="w-4 h-4" />
+                                    </button>
+
+                                    <button
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            const newCeConfig = structuredClone(ce_config)
+                                            const waves = newCeConfig.monsters
+                                            const temp = waves[waveIndex]
+                                            newCeConfig.monsters.push([...temp])
+                                            setCeConfig(newCeConfig)
+                                        }}
+                                        className="btn btn-sm btn-success">
+                                        <CopyPlus className="w-4 h-4" />
+                                    </button>
+
+                                    <button
+                                        onClick={(e) => {
+                                            e.stopPropagation()
+                                            const newCeConfig = structuredClone(ce_config)
+                                            newCeConfig.monsters.splice(waveIndex, 1)
+                                            setCeConfig(newCeConfig)
+                                        }}
+                                        className="btn btn-sm btn-error">
+                                        <Trash2 className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 w-full h-full">
+                                {wave.map((member, memberIndex) => (
+                                    <div key={memberIndex} className="relative group z-7 w-full h-full">
+                                        <div className="card border hover:border-slate-500 transition-colors w-full h-full">
+                                            <div className="card-body p-4">
+                                                <button
+                                                    className="btn btn-xs btn-success absolute -top-2 right-12 opacity-50 group-hover:opacity-100 transition-opacity"
+                                                    onClick={() => {
+                                                        const newCeConfig = structuredClone(ce_config)
+
+                                                        newCeConfig.monsters[waveIndex].push({
+                                                            monster_id: Number(member.monster_id),
+                                                            level: member.level,
+                                                            amount: member.amount,
+                                                        })
+                                                        setCeConfig(newCeConfig)
+                                                    }}
+                                                >
+                                                    <CopyPlus className="w-3 h-3" />
+                                                </button>
+                                                <button
+                                                    className="btn btn-xs btn-error absolute -top-2 right-2 opacity-50 group-hover:opacity-100 transition-opacity"
+                                                    onClick={() => {
+                                                        const newCeConfig = structuredClone(ce_config)
+                                                        newCeConfig.monsters[waveIndex].splice(memberIndex, 1)
+                                                        setCeConfig(newCeConfig)
+                                                    }}
+                                                >
+                                                    <Trash2 className="w-3 h-3" />
+                                                </button>
+
+                                                <div className="flex justify-center">
+                                                    {mapMonster?.[member.monster_id.toString()]?.Image?.IconPath && <Image
+                                                        unoptimized
+                                                        crossOrigin="anonymous"
+                                                        src={`${process.env.CDN_URL}/${mapMonster?.[member.monster_id.toString()]?.Image?.IconPath}`}
+                                                        alt="Enemy Icon"
+                                                        width={376}
+                                                        height={512}
+                                                        className=" object-contain w-20 h-20 overflow-hidden"
+                                                    />}
+                                                </div>
+
+                                                <div className="flex flex-wrap justify-center gap-1 mb-2">
+                                                    {mapMonster?.[member.monster_id.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                        <Image
+                                                            unoptimized
+                                                            crossOrigin="anonymous"
+                                                            src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                            alt={icon}
+                                                            className="h-7 w-7 2xl:h-10 2xl:w-10 object-contain rounded-md border border-white/20 shadow-sm"
+                                                            width={200}
+                                                            height={200}
+                                                            key={iconIndex}
+                                                        />
+                                                    ))}
+                                                </div>
+                                                <div className="text-center flex flex-col items-center justify-center">
+                                                    <div className="text-sm font-medium">
+                                                        {getLocaleName(locale, mapMonster?.[member.monster_id.toString()]?.Name)}  {`(${member.monster_id})`}
+                                                    </div>
+                                                    <div className="flex items-center gap-1 mt-1 mx-2">
+                                                        <span className="text-sm">LV.</span>
+                                                        <input
+                                                            type="number"
+                                                            className="text-center input input-sm"
+                                                            value={member.level}
+
+                                                            onChange={(e) => {
+                                                                const val = Number(e.target.value)
+                                                                if (isNaN(val) || val < 1 || val > 95) return
+                                                                if (ce_config.monsters[waveIndex][memberIndex].level === val) return
+
+                                                                const newCeConfig = structuredClone(ce_config)
+                                                                newCeConfig.monsters[waveIndex][memberIndex].level = val
+                                                                setCeConfig(newCeConfig)
+                                                            }}
+                                                        />
+                                                    </div>
+                                                    {(extraData?.theory_craft?.mode === true && (
+                                                        <div className="flex items-center gap-1 mt-1 mx-2">
+                                                            <span className="text-sm">HP</span>
+                                                            <input
+                                                                type="number"
+                                                                className="text-center input input-sm"
+                                                                value={extraData?.theory_craft?.hp?.[(waveIndex + 1).toString()]?.[memberIndex] || 0}
+
+                                                                onChange={(e) => {
+                                                                    const val = Number(e.target.value)
+                                                                    if (isNaN(val) || val < 0) return
+
+                                                                    const newData = structuredClone(extraData)
+
+                                                                    if (!newData?.theory_craft?.hp?.[(waveIndex + 1).toString()]) {
+                                                                        newData.theory_craft!.hp![(waveIndex + 1).toString()] = []
+                                                                    }
+
+                                                                    newData.theory_craft!.hp![(waveIndex + 1).toString()][memberIndex] = val
+
+                                                                    setExtraData(newData)
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    ))}
+                                                </div>
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+
+                                {/* Add Member Button + Search */}
+                                <div
+                                    className="relative flex items-start justify-center w-full h-full"
+                                    onClick={(e) => e.stopPropagation()}
+                                >
+                                    <button
+                                        className="btn btn-outline btn-primary w-full h-full border-dashed"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            if (showSearchWaveId === waveIndex) {
+                                                setShowSearchWaveId(null)
+                                                return
+                                            }
+
+                                            setShowSearchWaveId(waveIndex)
+                                        }}
+                                    >
+                                        <Plus className="w-8 h-8" />
+                                    </button>
+
+                                    {showSearchWaveId === waveIndex && (
+                                        <div className="absolute top-full mt-2 w-72 border bg-base-200 border-slate-600 rounded-lg p-4 shadow-lg z-50">
+                                            <div className="flex items-center gap-2 mb-2">
+
+                                                <label className="input w-full">
+                                                    <svg className="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                                        <g
+                                                            strokeLinejoin="round"
+                                                            strokeLinecap="round"
+                                                            strokeWidth="2.5"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                        >
+                                                            <circle cx="11" cy="11" r="8"></circle>
+                                                            <path d="m21 21-4.3-4.3"></path>
+                                                        </g>
+                                                    </svg>
+                                                    <input
+                                                        type="search" className="grow"
+                                                        placeholder={transI18n("searchMonster")}
+                                                        value={searchTerm}
+                                                        onChange={(e) => setSearchTerm(e.target.value)}
+                                                        autoFocus
+                                                    />
+
+                                                </label>
+
+                                            </div>
+
+                                            <div className="max-h-60 overflow-y-auto space-y-1">
+                                                {paginatedMonsters.length > 0 ? (
+                                                    paginatedMonsters.map((monster) => (
+                                                        <div
+                                                            key={monster.ID}
+                                                            className="flex items-center gap-2 p-2 hover:bg-success/40 rounded cursor-pointer"
+                                                            onClick={() => {
+                                                                const newCeConfig = structuredClone(ce_config)
+                                                                newCeConfig.monsters[waveIndex].push({
+                                                                    monster_id: monster.ID,
+                                                                    level: 95,
+                                                                    amount: 1,
+                                                                })
+                                                                setCeConfig(newCeConfig)
+                                                                setShowSearchWaveId(null)
+                                                            }}
+                                                        >
+                                                            <div className="relative w-8 h-8 rounded-full overflow-hidden shrink-0 border border-white/10 shadow-sm">
+                                                                {mapMonster?.[monster.ID.toString()]?.Image?.IconPath && (
+                                                                    <Image
+                                                                        unoptimized
+                                                                        crossOrigin="anonymous"
+                                                                        src={`${process.env.CDN_URL}/${mapMonster?.[monster.ID.toString()]?.Image?.IconPath}`}
+                                                                        alt="Enemy Icon"
+                                                                        width={376}
+                                                                        height={512}
+                                                                        className="w-full h-full object-cover"
+                                                                    />
+                                                                )}
+                                                            </div>
+                                                            <span>{getLocaleName(locale, monster.Name)} {`(${monster.ID})`}</span>
+                                                        </div>
+                                                    ))
+                                                ) : (
+                                                    <div className="text-sm text-center py-4">
+                                                        {transI18n("noMonstersFound")}
+                                                    </div>
+                                                )}
+                                            </div>
+
+                                            {filteredMonsters.length > 0 && (
+                                                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
+                                                    <button
+                                                        disabled={monsterPage === 1}
+                                                        className="btn btn-sm btn-outline btn-success"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation()
+                                                            setMonsterPage(monsterPage - 1)
+                                                        }}
+                                                    >
+                                                        {transI18n("previous")}
+                                                    </button>
+
+                                                    <button
+                                                        disabled={!hasMoreMonsterPages}
+                                                        className="btn btn-sm btn-outline btn-success"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation()
+                                                            setMonsterPage(monsterPage + 1)
+                                                        }}
+                                                    >
+                                                        {transI18n("next")}
+                                                    </button>
+                                                </div>
+                                            )}
+
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+
+                {/* Add New Wave Button */}
+                <div className="card border border-slate-700/50 border-dashed">
+                    <div className="card-body p-8">
+                        <button
+                            onClick={() => {
+                                const newCeConfig = structuredClone(ce_config)
+                                newCeConfig.monsters.push([])
+                                setCeConfig(newCeConfig)
+                            }}
+                            className="btn btn-primary btn-lg w-full">
+                            <Plus className="w-6 h-6 mr-2" />
+                            {transI18n("addNewWave")}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/monsterBar/index.tsx

@@ -0,0 +1,100 @@
+import MocBar from "./moc";
+import useUserDataStore from "@/stores/userDataStore";
+import PfBar from "./pf";
+import Image from "next/image";
+import AsBar from "./as";
+import { useTranslations } from "next-intl";
+import CeBar from "./ce";
+import PeakBar from "./peak";
+
+export default function MonsterBar() {
+    const { battle_type, setBattleType } = useUserDataStore()
+    const transI18n = useTranslations("DataPage")
+
+    const navItems = [
+        { name: transI18n("memoryOfChaos"), icon: 'AbyssIcon01', value: 'MOC' },
+        { name: transI18n("pureFiction"), icon: 'ChallengeStory', value: 'PF' },
+        { name: transI18n("apocalypticShadow"), icon: 'ChallengeBoss', value: 'AS' },
+        { name: transI18n("anomalyArbitration"), icon: 'ChallengePeakIcon', value: 'PEAK' },
+        { name: transI18n("customEnemy"), icon: 'MonsterIcon', value: 'CE' },
+        { name: transI18n("simulatedUniverse"), icon: 'SimulatedUniverse', value: 'SU' },
+
+    ];
+
+
+    return (
+        <div className="min-h-screen">
+            {/* Header Navigation */}
+            <nav className="border-b border-warning/30 relative pb-2">
+                <div className="flex items-center justify-center">
+                    {/* Mobile Select */}
+                    <div className="block md:hidden w-full">
+                        <select
+                            className="select select-bordered w-full"
+                            value={battle_type.toUpperCase()}
+                            onChange={(e) => setBattleType(e.target.value.toUpperCase())}
+                        >
+                            {navItems.map((item) => (
+                                <option key={item.name} value={item.value.toUpperCase()}>
+                                    {item.name}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+
+                    {/* Desktop Tabs */}
+                    <div className="hidden md:grid grid-cols-3 lg:grid-cols-6 gap-1">
+                        {navItems.map((item) => (
+                            <button
+                                key={item.name}
+                                onClick={() => setBattleType(item.value.toUpperCase())}
+                                className={`px-4 py-2 rounded-lg transition-all cursor-pointer duration-300 flex items-center space-x-2 ${battle_type.toUpperCase() === item.value.toUpperCase()
+                                    ? 'bg-success/30 shadow-lg'
+                                    : 'bg-base-200/20 hover:bg-base-200/40 '
+                                    }`}
+                            >
+                                <span
+                                    style={
+                                        battle_type.toUpperCase() === item.value.toUpperCase()
+                                            ? {
+                                                filter:
+                                                    'brightness(0) saturate(100%) invert(63%) sepia(78%) saturate(643%) hue-rotate(1deg) brightness(93%) contrast(89%)',
+                                            }
+                                            : undefined
+                                    }
+                                >
+                                    <Image
+                                        unoptimized
+                                        crossOrigin="anonymous"
+                                        src={`/icon/${item.icon}.webp`}
+                                        alt={item.name}
+                                        width={24}
+                                        height={24}
+                                    />
+                                </span>
+                                <span>{item.name}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            </nav>
+
+            {(battle_type.toUpperCase() === "DEFAULT" || battle_type.toUpperCase() === "") && (
+                <div className="container mx-auto px-4 py-8 text-center font-bold text-3xl">
+                    {transI18n("noEventSelected")}
+                </div>
+            )}
+            {battle_type.toUpperCase() === 'MOC' && <MocBar />}
+            {battle_type.toUpperCase() === 'PF' && <PfBar />}
+            {battle_type.toUpperCase() === 'AS' && <AsBar />}
+            {battle_type.toUpperCase() === 'CE' && <CeBar />}
+            {battle_type.toUpperCase() === 'PEAK' && <PeakBar />}
+            {battle_type.toUpperCase() === 'SU' && (
+                <div className="container mx-auto px-4 py-8 text-center font-bold text-3xl">
+                    {transI18n("comingSoon")}
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/monsterBar/moc.tsx

@@ -0,0 +1,416 @@
+"use client"
+
+import { useEffect, useMemo } from "react";
+import SelectCustomText from "../select/customSelectText";
+import { calcMonsterStats, getLocaleName, replaceByParam } from "@/helper";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { MonsterStore } from "@/types";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function MocBar() {
+    const { locale } = useLocaleStore()
+    const {
+        moc_config,
+        setMocConfig
+    } = useUserDataStore()
+    const { mapMonster, mapMoc, damageType, hardLevelConfig, eliteConfig } = useDetailDataStore()
+
+    const transI18n = useTranslations("DataPage")
+
+    const challengeSelected = useMemo(() => {
+        return mapMoc[moc_config.event_id.toString()]?.Level.find((moc) => moc.ID === moc_config.challenge_id)
+    }, [moc_config, mapMoc])
+
+    const eventSelected = useMemo(() => {
+        return mapMoc[moc_config.event_id.toString()]
+    }, [moc_config, mapMoc])
+
+    useEffect(() => {
+        if (!challengeSelected || moc_config.event_id === 0 || moc_config.challenge_id === 0) return
+
+        const newBattleConfig = structuredClone(moc_config)
+        newBattleConfig.cycle_count = 0
+        if (moc_config.use_cycle_count) {
+            newBattleConfig.cycle_count = challengeSelected.TurnLimit
+        }
+        newBattleConfig.blessings = []
+        if (moc_config.use_turbulence_buff && challengeSelected) {
+            challengeSelected.MazeBuff.map((item) => {
+                newBattleConfig.blessings.push({
+                    id: item.ID,
+                    level: 1
+                })
+            })
+        }
+        newBattleConfig.monsters = []
+        newBattleConfig.stage_id = 0
+        if ((moc_config.floor_side === "Upper" || moc_config.floor_side === "Upper -> Lower") && challengeSelected.EventList1.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList1[0].ID
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if ((moc_config.floor_side === "Lower" || moc_config.floor_side === "Lower -> Upper") && challengeSelected.EventList2.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList2[0].ID
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if (moc_config.floor_side === "Lower -> Upper" && challengeSelected.EventList1.length > 0) {
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        } else if (moc_config.floor_side === "Upper -> Lower" && challengeSelected.EventList2.length > 0) {
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        setMocConfig(newBattleConfig)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        moc_config.event_id,
+        moc_config.challenge_id,
+        moc_config.floor_side,
+        moc_config.use_cycle_count,
+        moc_config.use_turbulence_buff,
+        mapMoc,
+    ])
+
+    if (!mapMoc) return null
+
+    return (
+        <div className="py-8 relative">
+
+            {/* Title Card */}
+            <div className="rounded-xl p-4 mb-2 border border-warning">
+                <div className="mb-4 w-full">
+                    <SelectCustomText
+                        customSet={Object.values(mapMoc).sort((a, b) => b.ID - a.ID).map((moc) => ({
+                            id: moc.ID.toString(),
+                            name: getLocaleName(locale, moc.Name),
+                            time: `${moc.BeginTime} - ${moc.EndTime}`,
+                        }))}
+                        excludeSet={[]}
+                        selectedCustomSet={moc_config.event_id.toString()}
+                        placeholder={transI18n("selectMOCEvent")}
+                        setSelectedCustomSet={(id) => setMocConfig({
+                            ...moc_config,
+                            event_id: Number(id),
+                            challenge_id: mapMoc[Number(id)]?.Level.at(-1)?.ID || 0,
+                        })}
+                    />
+                </div>
+                {/* Settings */}
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
+                        </label>
+                        <select
+                            value={moc_config.challenge_id}
+                            className="select select-success"
+                            onChange={(e) => setMocConfig({
+                                ...moc_config,
+                                challenge_id: Number(e.target.value)
+                            })}
+                        >
+                            <option value={0} disabled={true}>Select a Floor</option>
+                            {eventSelected?.Level?.map((moc) => (
+                                <option key={moc.ID} value={moc.ID}>{getLocaleName(locale, moc.Name)}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
+                        </label>
+                        <select
+                            value={moc_config.floor_side}
+                            className="select select-success"
+                            onChange={(e) => setMocConfig({ ...moc_config, floor_side: e.target.value })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectSide")}</option>
+                            <option value="Upper">{transI18n("upper")}</option>
+                            <option value="Lower">{transI18n("lower")}</option>
+                            <option value="Upper -> Lower">{transI18n("upperToLower")}</option>
+                            <option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
+                        </select>
+                    </div>
+                    
+                    
+
+                    <div className="flex items-center gap-2">
+                        <label className="label cursor-pointer">
+                            <span
+                                onClick={() => setMocConfig({ ...moc_config, use_cycle_count: !moc_config.use_cycle_count })}
+                                className="label-text font-bold text-success cursor-pointer"
+                            >
+                                {transI18n("useCycleCount")} {" "}
+                            </span>
+                            <input
+                                type="checkbox"
+                                checked={moc_config.use_cycle_count}
+                                onChange={(e) => setMocConfig({ ...moc_config, use_cycle_count: e.target.checked })}
+                                className="checkbox checkbox-primary"
+                            />
+                        </label>
+                    </div>
+                </div>
+                <div className="label-text font-bold text-success mb-2">StageId: {moc_config?.stage_id}</div>
+
+                {/* Turbulence Buff */}
+                <div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
+                    <div className="flex items-center space-x-2 mb-2">
+                        <input
+                            type="checkbox"
+                            checked={moc_config.use_turbulence_buff}
+                            onChange={(e) => setMocConfig({ ...moc_config, use_turbulence_buff: e.target.checked })}
+                            className="checkbox checkbox-primary"
+                        />
+                        <span
+                            onClick={() => setMocConfig({ ...moc_config, use_turbulence_buff: !moc_config.use_turbulence_buff })}
+                            className="font-bold text-success cursor-pointer">
+                            {transI18n("useTurbulenceBuff")}
+                        </span>
+                    </div>
+                    {challengeSelected ? (
+                        challengeSelected.MazeBuff.map((buff, i) => (
+                            <div
+                                key={i}
+                                className="text-base"
+                                dangerouslySetInnerHTML={{
+                                    __html: replaceByParam(
+                                        getLocaleName(locale, buff?.Desc) || "",
+                                        buff?.Param || []
+                                    )
+                                }}
+                            />
+                        ))
+                    ) : (
+                        <div className="text-base">{transI18n("noTurbulenceBuff")}</div>
+                    )}
+                </div>
+            </div>
+
+            {/* Enemy Waves */}
+            {(moc_config?.challenge_id ?? 0) !== 0 && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    {/* First Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-6 text-info">{transI18n("firstHalfEnemies")}</h2>
+
+                        {challengeSelected && challengeSelected?.EventList1?.length > 0 && challengeSelected?.EventList1?.[0]?.MonsterList?.map((wave, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Object.values(wave).map((waveValue, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[waveValue.toString()],
+                                            challengeSelected?.EventList1?.[0]?.EliteGroup,
+                                            challengeSelected?.EventList1?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList1?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList1[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[waveValue.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[waveValue.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[waveValue.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Second Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
+
+                        {challengeSelected && challengeSelected?.EventList2?.length > 0 && challengeSelected?.EventList2?.[0]?.MonsterList?.map((wave, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Object.values(wave).map((waveValue, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[waveValue.toString()],
+                                            challengeSelected?.EventList2?.[0]?.EliteGroup,
+                                            challengeSelected?.EventList2?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList2?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList2[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[waveValue.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[waveValue.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[waveValue.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/monsterBar/peak.tsx

@@ -0,0 +1,308 @@
+"use client"
+import { useEffect, useMemo } from "react";
+import SelectCustomText from "../select/customSelectText";
+import { calcMonsterStats, getLocaleName, replaceByParam } from "@/helper";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";;
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { MonsterStore } from "@/types";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function PeakBar() {
+    const { locale } = useLocaleStore()
+    const {
+        peak_config,
+        setPeakConfig
+    } = useUserDataStore()
+    const { mapMonster, mapPeak, damageType, eliteConfig, hardLevelConfig } = useDetailDataStore()
+    const transI18n = useTranslations("DataPage")
+
+    const listFloor = useMemo(() => {
+        const peak = mapPeak?.[peak_config?.event_id?.toString()]
+        if (!peak) return []
+
+        return [...peak.PreLevel, peak.BossLevel].filter(it => it != null)
+    }, [peak_config, mapPeak])
+    const eventSelected = useMemo(() => {
+        return mapPeak?.[peak_config?.event_id?.toString()]
+    }, [peak_config, mapPeak])
+
+    const bossConfig = useMemo(() => {
+        return mapPeak?.[peak_config?.event_id?.toString()]?.BossConfig;
+    }, [peak_config, mapPeak])
+
+    const challengeSelected = useMemo(() => {
+        const challenge = structuredClone(listFloor?.find((peak) => peak?.ID === peak_config.challenge_id))
+        if (
+            challenge
+            && challenge.ID === mapPeak?.[peak_config?.event_id?.toString()]?.BossLevel?.ID
+            && bossConfig
+            && peak_config?.boss_mode === "Hard"
+        ) {
+            return { challenge: bossConfig, isBoss: true }
+        }
+        return {
+            challenge: challenge,
+            isBoss: challenge?.ID === mapPeak?.[peak_config?.event_id?.toString()]?.BossLevel?.ID, 
+        }
+    }, [peak_config, listFloor, mapPeak, bossConfig])
+
+    useEffect(() => {
+        if (!challengeSelected.challenge) return
+        if (peak_config.event_id !== 0 && peak_config.challenge_id !== 0 && challengeSelected) {
+            const newBattleConfig = structuredClone(peak_config)
+            newBattleConfig.cycle_count = 6
+            newBattleConfig.blessings = []
+            for (const value of challengeSelected?.challenge?.MazeBuff) {
+                newBattleConfig.blessings.push({
+                    id: value.ID,
+                    level: 1
+                })
+            }
+            if (peak_config.buff_id !== 0 && challengeSelected.isBoss) {
+                newBattleConfig.blessings.push({
+                    id: peak_config.buff_id,
+                    level: 1
+                })
+            }
+            newBattleConfig.monsters = []
+            newBattleConfig.stage_id = challengeSelected.challenge.EventList[0].ID
+            for (const wave of challengeSelected.challenge.EventList[0].MonsterList) {
+                if (!wave) continue
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    if (!value) continue
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.challenge.EventList[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+
+            setPeakConfig(newBattleConfig)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        peak_config.event_id,
+        peak_config.challenge_id,
+        peak_config.buff_id,
+        peak_config.boss_mode,
+        mapPeak,
+    ])
+
+    if (!mapPeak) return null
+
+    return (
+        <div className="py-8 relative">
+
+            {/* Title Card */}
+            <div className="rounded-xl p-4 mb-2 border border-warning">
+                <div className="mb-4 w-full">
+                    <SelectCustomText
+                        customSet={Object.values(mapPeak).sort((a, b) => b.ID - a.ID).map((peak) => ({
+                            id: peak.ID.toString(),
+                            name: `${getLocaleName(locale, peak.Name)} (${peak.ID})`,
+                        }))}
+                        excludeSet={[]}
+                        selectedCustomSet={peak_config.event_id.toString()}
+                        placeholder={transI18n("selectPEAKEvent")}
+                        setSelectedCustomSet={(id) => setPeakConfig({ ...peak_config, event_id: Number(id), challenge_id: 0, buff_id: 0 })}
+                    />
+                </div>
+                {/* Settings */}
+                <div className={
+                    `grid grid-cols-1 
+                    ${eventSelected && eventSelected.BossLevel?.ID === peak_config.challenge_id ? "md:grid-cols-2" : ""}
+                    gap-4 mb-2 justify-items-center items-center w-full`}
+                >
+
+                    <div className="flex items-center gap-2 w-full">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
+                        </label>
+                        <select
+                            value={peak_config.challenge_id}
+                            className="select select-success w-full"
+                            onChange={(e) => setPeakConfig({ ...peak_config, challenge_id: Number(e.target.value) })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectFloor")}</option>
+                            {listFloor.map((peak) => (
+                                <option key={peak.ID} value={peak.ID}>{getLocaleName(locale, peak.Name)}</option>
+                            ))}
+                        </select>
+                    </div>
+                    {eventSelected && eventSelected.BossLevel?.ID === peak_config.challenge_id && (
+                        <div className="flex items-center gap-2 w-full">
+                            <label className="label">
+                                <span className="label-text font-bold text-success">{transI18n("mode")}:{" "}</span>
+                            </label>
+                            <select
+                                value={peak_config.boss_mode}
+                                className="select select-success w-full"
+                                onChange={(e) => setPeakConfig({ ...peak_config, boss_mode: e.target.value })}
+                            >
+                                <option value={0} disabled={true}>{transI18n("selectSide")}</option>
+                                <option value="Normal">{transI18n("normalMode")}</option>
+                                <option value="Hard">{transI18n("hardMode")}</option>
+                            </select>
+                        </div>
+                    )}
+
+                </div>
+                <div className="label-text font-bold text-success mb-2">StageId: {peak_config?.stage_id}</div>
+                {
+                    eventSelected
+                    && eventSelected.BossLevel?.ID === peak_config.challenge_id
+                    && bossConfig
+                    && (
+                        <div className="mb-4 w-full">
+                            <SelectCustomText
+                                customSet={
+                                    bossConfig.BuffList.map((buff) => ({
+                                        id: buff.ID.toString(),
+                                        name: getLocaleName(locale, buff?.Name || ""),
+                                        description: replaceByParam(getLocaleName(locale, buff?.Desc || ""), buff?.Param || []),
+                                    }))
+                                }
+                                excludeSet={[]}
+                                selectedCustomSet={peak_config?.buff_id?.toString()}
+                                placeholder={transI18n("selectBuff")}
+                                setSelectedCustomSet={(id) => setPeakConfig({ ...peak_config, buff_id: Number(id) })}
+                            />
+                        </div>
+                    )
+                }
+
+                {/* Turbulence Buff */}
+
+                <div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
+                    <h2 className="text-2xl font-bold mb-2 text-info">
+                        {transI18n("turbulenceBuff")}
+                    </h2>
+
+                    {challengeSelected?.challenge && challengeSelected?.challenge?.MazeBuff?.length > 0 ? (
+                        challengeSelected.challenge.MazeBuff.map((subOption, index) => (
+                            <div key={index}>
+                                <label className="label">
+                                    <span className="label-text font-bold text-success">
+                                        {index + 1}. {getLocaleName(locale, subOption.Name)}
+                                    </span>
+                                </label>
+                                <div
+                                    className="text-base"
+                                    dangerouslySetInnerHTML={{
+                                        __html: replaceByParam(
+                                            getLocaleName(locale, subOption.Desc),
+                                            subOption.Param || []
+                                        )
+                                    }}
+                                />
+                            </div>
+                        ))
+                    ) : (
+                        <div className="text-base">{transI18n("noTurbulenceBuff")}</div>
+                    )}
+                </div>
+            </div>
+
+            {/* Enemy Waves */}
+
+            {(peak_config?.challenge_id ?? 0) !== 0 && (
+                <div className="grid grid-cols-1 gap-4">
+
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-2 text-info">{getLocaleName(locale, challengeSelected?.challenge?.Name)}</h2>
+                        
+
+                        {challengeSelected?.challenge && Object.values(challengeSelected?.challenge?.EventList?.[0]?.Infinite || []).map((waveValue, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Array.from(new Set(waveValue.MonsterList)).map((monsterId, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[monsterId.toString()],
+                                            waveValue.EliteGroup,
+                                            challengeSelected?.challenge?.EventList?.[0]?.HardLevelGroup || 0,
+                                            challengeSelected?.challenge?.EventList?.[0]?.Level || 0,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.challenge?.EventList?.[0]?.Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[monsterId.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[monsterId.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[monsterId.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/monsterBar/pf.tsx

@@ -0,0 +1,416 @@
+"use client"
+import { useEffect, useMemo } from "react";
+import SelectCustomText from "../select/customSelectText";
+import { calcMonsterStats, getLocaleName, replaceByParam } from "@/helper";
+import useLocaleStore from "@/stores/localeStore";
+import useUserDataStore from "@/stores/userDataStore";
+import Image from "next/image";
+import { MonsterStore } from "@/types";
+import { useTranslations } from "next-intl";
+import useDetailDataStore from "@/stores/detailDataStore";
+
+export default function PfBar() {
+    const { locale } = useLocaleStore()
+    const {
+        pf_config,
+        setPfConfig
+    } = useUserDataStore()
+    const { mapMonster, mapPF, damageType, hardLevelConfig, eliteConfig } = useDetailDataStore()
+
+    const transI18n = useTranslations("DataPage")
+    const challengeSelected = useMemo(() => {
+        return mapPF[pf_config.event_id.toString()]?.Level.find((pf) => pf.ID === pf_config.challenge_id)
+    }, [pf_config, mapPF])
+
+    const eventSelected = useMemo(() => {
+        return mapPF[pf_config.event_id.toString()]
+    }, [pf_config, mapPF])
+
+
+    useEffect(() => {
+        if (!challengeSelected || pf_config.event_id === 0 || pf_config.challenge_id === 0) {
+            return
+        }
+        const newBattleConfig = structuredClone(pf_config)
+        newBattleConfig.cycle_count = challengeSelected.TurnLimit
+        newBattleConfig.blessings = []
+        if (pf_config.buff_id !== 0) {
+            newBattleConfig.blessings.push({
+                id: pf_config.buff_id,
+                level: 1
+            })
+        }
+        if (challengeSelected) {
+            challengeSelected.MazeBuff.map((item) => {
+                newBattleConfig.blessings.push({
+                    id: item.ID,
+                    level: 1
+                })
+            })
+        }
+        newBattleConfig.monsters = []
+        newBattleConfig.stage_id = 0
+        if ((pf_config.floor_side === "Upper" || pf_config.floor_side === "Upper -> Lower") && challengeSelected.EventList1.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList1[0].ID
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if ((pf_config.floor_side === "Lower" || pf_config.floor_side === "Lower -> Upper") && challengeSelected.EventList2.length > 0) {
+            newBattleConfig.stage_id = challengeSelected.EventList2[0].ID
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        if (pf_config.floor_side === "Lower -> Upper" && challengeSelected.EventList1.length > 0) {
+            for (const wave of challengeSelected.EventList1[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList1[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        } else if (pf_config.floor_side === "Upper -> Lower" && challengeSelected.EventList2.length > 0) {
+            for (const wave of challengeSelected.EventList2[0].MonsterList) {
+                const newWave: MonsterStore[] = []
+                for (const value of Object.values(wave)) {
+                    newWave.push({
+                        monster_id: value,
+                        level: challengeSelected.EventList2[0].Level,
+                        amount: 1,
+                    })
+                }
+                newBattleConfig.monsters.push(newWave)
+            }
+        }
+        setPfConfig(newBattleConfig)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        challengeSelected,
+        pf_config.event_id,
+        pf_config.challenge_id,
+        pf_config.floor_side,
+        pf_config.buff_id,
+        mapPF,
+    ])
+    if (!mapPF) return null
+
+    return (
+        <div className="py-8 relative">
+
+            {/* Title Card */}
+            <div className="rounded-xl p-4 mb-2 border border-warning">
+                <div className="mb-4 w-full">
+                    <SelectCustomText
+                        customSet={Object.values(mapPF).sort((a, b) => b.ID - a.ID).map((pf) => ({
+                            id: pf.ID.toString(),
+                            name: getLocaleName(locale, pf.Name),
+                            time: `${pf.BeginTime} - ${pf.EndTime}`,
+                        }))}
+                        excludeSet={[]}
+                        selectedCustomSet={pf_config.event_id.toString()}
+                        placeholder={transI18n("selectPFEvent")}
+                        setSelectedCustomSet={(id) => setPfConfig({
+                            ...pf_config,
+                            event_id: Number(id),
+                            challenge_id: mapPF[Number(id)]?.Level.slice(-1)[0]?.ID || 0,
+                            buff_id: 0
+                        })}
+                    />
+                </div>
+                {/* Settings */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("floor")}:{" "}</span>
+                        </label>
+                        <select
+                            value={pf_config.challenge_id}
+                            className="select select-success"
+                            onChange={(e) => setPfConfig({ ...pf_config, challenge_id: Number(e.target.value) })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectFloor")}</option>
+                            {eventSelected?.Level.map((pf) => (
+                                <option key={pf.ID} value={pf.ID}>{getLocaleName(locale, pf.Name)}</option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <label className="label">
+                            <span className="label-text font-bold text-success">{transI18n("side")}:{" "}</span>
+                        </label>
+                        <select
+                            value={pf_config.floor_side}
+                            className="select select-success"
+                            onChange={(e) => setPfConfig({ ...pf_config, floor_side: e.target.value })}
+                        >
+                            <option value={0} disabled={true}>{transI18n("selectSide")}</option>
+                            <option value="Upper">{transI18n("upper")}</option>
+                            <option value="Lower">{transI18n("lower")}</option>
+                            <option value="Upper -> Lower">{transI18n("upperToLower")}</option>
+                            <option value="Lower -> Upper">{transI18n("lowerToUpper")}</option>
+                        </select>
+                    </div>
+                </div>
+                <div className="label-text font-bold text-success mb-2">StageId: {pf_config?.stage_id}</div>
+                {eventSelected && (
+                    <div className="mb-4 w-full">
+                        <SelectCustomText
+                            customSet={eventSelected.Option.map((buff) => ({
+                                id: buff.ID?.toString() || "",
+                                name: getLocaleName(locale, buff?.Name) || "",
+                                description: replaceByParam(getLocaleName(locale, buff?.Desc) || "", buff?.Param || []),
+                            }))}
+                            excludeSet={[]}
+                            selectedCustomSet={pf_config?.buff_id?.toString()}
+                            placeholder={transI18n("selectBuff")}
+                            setSelectedCustomSet={(id) => setPfConfig({ ...pf_config, buff_id: Number(id) })}
+                        />
+                    </div>
+                )}
+                {/* Turbulence Buff */}
+                <div className="bg-base-200/20 rounded-lg p-4 border border-purple-500/20">
+                    <h2 className="text-2xl font-bold mb-2 text-info">{transI18n("turbulenceBuff")}</h2>
+                    {eventSelected && eventSelected.SubOption.length > 0 ? (
+                        eventSelected.SubOption.map((subOption, index) => (
+                            <div key={index}>
+                                <label className="label">
+                                    <span className="label-text font-bold text-success">{index + 1}. {getLocaleName(locale, subOption.Name)}</span>
+                                </label>
+                                <div
+                                    className="text-base"
+                                    dangerouslySetInnerHTML={{
+                                        __html: replaceByParam(
+                                            getLocaleName(locale, subOption.Desc) || "",
+                                            subOption.Param || []
+                                        )
+                                    }}
+                                />
+                            </div>
+                        ))
+                    ) : eventSelected && challengeSelected && eventSelected.SubOption.length === 0 ? (
+                        challengeSelected?.MazeBuff?.map((buff, i) => (
+                            <div
+                                key={i}
+                                className="text-base"
+                                dangerouslySetInnerHTML={{
+                                    __html: replaceByParam(
+                                        getLocaleName(locale, buff?.Desc) || "",
+                                        buff?.Param || []
+                                    )
+                                }}
+                            />
+                        ))
+                    ) : (
+                        <div className="text-base">{transI18n("noTurbulenceBuff")}</div>
+                    )}
+                </div>
+            </div>
+
+            {/* Enemy Waves */}
+
+            {(pf_config?.challenge_id ?? 0) !== 0 && (
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                    {/* First Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-2 text-info">{transI18n("firstHalfEnemies")}</h2>
+                    
+                        {challengeSelected && Object.values(challengeSelected.EventList1?.[0]?.Infinite || []).map((waveValue, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Array.from(new Set(waveValue.MonsterList)).map((monsterId, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[monsterId.toString()],
+                                            waveValue.EliteGroup,
+                                            challengeSelected?.EventList1?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList1?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList1[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[monsterId.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[monsterId.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[monsterId.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Second Half */}
+                    <div className="rounded-xl p-4 mt-2 border border-warning">
+                        <h2 className="text-2xl font-bold mb-6 text-info">{transI18n("secondHalfEnemies")}</h2>
+
+                        {challengeSelected && Object.values(challengeSelected?.EventList2[0]?.Infinite || []).map((waveValue, waveIndex) => (
+                            <div key={waveIndex} className="mb-6">
+                                <h3 className="text-lg font-semibold">{transI18n("wave")} {waveIndex + 1}</h3>
+                                <div className="flex flex-wrap gap-2 mt-2">
+                                    {Array.from(new Set(waveValue.MonsterList)).map((monsterId, enemyIndex) => {
+                                        const monsterStats = calcMonsterStats(
+                                            mapMonster?.[monsterId.toString()],
+                                            waveValue.EliteGroup,
+                                            challengeSelected?.EventList2?.[0]?.HardLevelGroup,
+                                            challengeSelected?.EventList2?.[0]?.Level,
+                                            hardLevelConfig,
+                                            eliteConfig
+                                        );
+                                        return (
+                                            <div
+                                                key={enemyIndex}
+                                                className="group relative flex flex-col w-40 bg-base-100 rounded-2xl border border-base-300 shadow-md"
+                                            >
+                                                <div className="badge badge-warning badge-sm font-bold absolute top-2 right-2 z-10 shadow-sm">
+                                                    Lv. {challengeSelected?.EventList2[0].Level}
+                                                </div>
+
+                                                <div className="relative w-full h-20 bg-base-200 flex items-center justify-center p-4 rounded-t-2xl">
+                                                    {mapMonster?.[monsterId.toString()]?.Image?.IconPath && (
+                                                        <div className="relative w-16 h-16 rounded-full border-2 border-base-300 shadow-md overflow-hidden group-hover:scale-110 transition-transform duration-300 bg-base-100">
+                                                            <Image
+                                                                unoptimized
+                                                                crossOrigin="anonymous"
+                                                                src={`${process.env.CDN_URL}/${mapMonster?.[monsterId.toString()]?.Image?.IconPath}`}
+                                                                alt="Enemy Icon"
+                                                                width={150}
+                                                                height={150}
+                                                                className="w-full h-full object-cover"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+
+                                                <div className="flex flex-col px-1 pb-2 pt-2">
+                                                    <div className="flex flex-col space-y-1.5">
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-error">HP</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.hp.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-info">Speed</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.spd.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+
+                                                        <div className="flex justify-between items-center bg-base-200 px-2.5 py-1.5 rounded-lg">
+                                                            <span className="text-xs font-semibold text-base-content/70">Toughness</span>
+                                                            <span className="text-sm font-bold text-base-content">{monsterStats.stance.toLocaleString(undefined, { maximumFractionDigits: 0 })}</span>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="mt-2 pt-2 border-t border-base-300 flex flex-col items-center">
+                                                        <span className="text-[10px] text-base-content/60 font-bold uppercase tracking-widest mb-1.5">
+                                                            Weakness
+                                                        </span>
+                                                        <div className="flex items-center justify-center gap-1.5 flex-wrap">
+                                                            {mapMonster?.[monsterId.toString()]?.StanceWeakList?.map((icon, iconIndex) => (
+                                                                <Image
+                                                                    key={iconIndex}
+                                                                    unoptimized
+                                                                    crossOrigin="anonymous"
+                                                                    src={`${process.env.CDN_URL}/${damageType[icon]?.Icon}`}
+                                                                    alt={icon}
+                                                                    width={40}
+                                                                    height={40}
+                                                                    className="h-6 w-6 object-contain rounded-full bg-base-300 border border-base-content/10 p-0.5 shadow-sm hover:scale-110 transition-transform"
+                                                                />
+                                                            ))}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+        </div>
+    )
+}

src/components/parseText/index.tsx

@@ -0,0 +1,16 @@
+
+'use client'
+import { parseRuby } from "@/helper";
+
+interface TextProps {
+    text: string;
+    locale: string;
+    className?: string;
+}
+
+export default function ParseText({ text, locale, className }: TextProps) {
+    if (locale === "ja") {
+        return <div className={className} dangerouslySetInnerHTML={{ __html: parseRuby(text) }} />;
+    }
+    return <div className={className}>{text}</div>;
+}

src/components/queryProvider/index.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react';
+
+export default function QueryProviderWrapper({ children }: { children: React.ReactNode }) {
+  const [queryClient] = React.useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

src/components/quickView/index.tsx

@@ -0,0 +1,473 @@
+"use client"
+import NextImage from "next/image"
+import useUserDataStore from "@/stores/userDataStore";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { calcAffixBonus, calcBaseStatRaw, calcBonusStatRaw, calcMainAffixBonus, calcMainAffixBonusRaw, calcPromotion, calcSubAffixBonusRaw, getLocaleName, replaceByParam } from "@/helper";
+import { mappingStats } from "@/constant/constant";
+import RelicShowcase from "../showcaseCard/relicShowcase";
+import useLocaleStore from "@/stores/localeStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import useCurrentDataStore from "@/stores/currentDataStore";
+
+export default function QuickView() {
+    const { avatars } = useUserDataStore()
+    const transI18n = useTranslations("DataPage")
+    const { locale } = useLocaleStore()
+    const { avatarSelected,  } = useCurrentDataStore()
+    const { mainAffix, subAffix, mapRelicSet, mapLightCone, mapAvatar  } = useDetailDataStore()
+
+ 
+    const avatarSkillTree = useMemo(() => {
+        if (!avatarSelected || !avatars[avatarSelected?.ID?.toString()]) return {}
+        if (avatars[avatarSelected?.ID?.toString()].enhanced) {
+            return avatarSelected?.Enhanced?.[avatars[avatarSelected?.ID?.toString()].enhanced.toString()].SkillTrees || {}
+        }
+        return avatarSelected?.SkillTrees || {}
+    }, [avatarSelected, avatars])
+
+    const avatarData = useMemo(() => {
+        if (!avatarSelected) return
+        return avatars[avatarSelected?.ID?.toString()]
+    }, [avatarSelected, avatars])
+
+    const avatarProfile = useMemo(() => {
+        if (!avatarSelected || !avatarData) return
+        return avatarData?.profileList?.[avatarData?.profileSelect]
+    }, [avatarSelected, avatarData])
+
+    const relicEffects = useMemo(() => {
+        const avatar = avatars[avatarSelected?.ID?.toString() || ""];
+        const relicCount: { [key: string]: number } = {};
+        if (avatar) {
+            for (const relic of Object.values(avatar.profileList[avatar.profileSelect].relics)) {
+                if (relicCount[relic.relic_set_id]) {
+                    relicCount[relic.relic_set_id]++;
+                } else {
+                    relicCount[relic.relic_set_id] = 1;
+                }
+            }
+        }
+        const listEffects: { key: string, count: number }[] = [];
+        Object.entries(relicCount).forEach(([key, value]) => {
+            if (value >= 2) {
+                listEffects.push({ key: key, count: value });
+            }
+        });
+        return listEffects;
+    }, [avatars, avatarSelected]);
+
+    const relicStats = useMemo(() => {
+        if (!avatarSelected || !avatarProfile?.relics || !mainAffix || !subAffix) return
+
+        return Object.entries(avatarProfile?.relics).map(([key, value]) => {
+            const mainAffixMap = mainAffix["5" + key]
+            const subAffixMap = subAffix["5"]
+            if (!mainAffixMap || !subAffixMap) return
+            return {
+                img: `${process.env.CDN_URL}/spriteoutput/relicfigures/IconRelic_${value.relic_set_id}_${key}.png`,
+                mainAffix: {
+                    property: mainAffixMap?.[value?.main_affix_id]?.Property,
+                    level: value?.level,
+                    valueAffix: calcMainAffixBonus(mainAffixMap?.[value?.main_affix_id], value?.level),
+                    detail: mappingStats?.[mainAffixMap?.[value?.main_affix_id]?.Property]
+                },
+                subAffix: value?.sub_affixes?.map((subValue) => {
+                    return {
+                        property: subAffixMap?.[subValue?.sub_affix_id]?.Property,
+                        valueAffix: calcAffixBonus(subAffixMap?.[subValue?.sub_affix_id], subValue?.step, subValue?.count),
+                        detail: mappingStats?.[subAffixMap?.[subValue?.sub_affix_id]?.Property],
+                        step: subValue?.step,
+                        count: subValue?.count
+                    }
+                })
+            }
+        })
+    }, [avatarSelected, avatarProfile, mainAffix, subAffix])
+
+    const characterStats = useMemo(() => {
+        if (!avatarSelected || !avatarData) return
+        const charPromotion = calcPromotion(avatarData.level)
+
+        const statsData: Record<string, {
+            value: number,
+            base: number,
+            name: string,
+            icon: string,
+            unit: string,
+            round: number
+        }> = {
+            HP: {
+                value: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.HPBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.HPAdd,
+                    avatarData.level
+                ),
+                base: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.HPBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.HPAdd,
+                    avatarData.level
+                ),
+                name: "HP",
+                icon: "spriteoutput/ui/avatar/icon/IconMaxHP.png",
+                unit: "",
+                round: 0
+            },
+            ATK: {
+                value: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.AttackBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.AttackAdd,
+                    avatarData.level
+                ),
+                base: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.AttackBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.AttackAdd,
+                    avatarData.level
+                ),
+                name: "ATK",
+                icon: "spriteoutput/ui/avatar/icon/IconAttack.png",
+                unit: "",
+                round: 0
+            },
+            DEF: {
+                value: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.DefenceBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.DefenceAdd,
+                    avatarData.level
+                ),
+                base: calcBaseStatRaw(
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.DefenceBase,
+                    mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.DefenceAdd,
+                    avatarData.level
+                ),
+                name: "DEF",
+                icon: "spriteoutput/ui/avatar/icon/IconDefence.png",
+                unit: "",
+                round: 0
+            },
+            SPD: {
+                value: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.SpeedBase || 0,
+                base: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.SpeedBase || 0,
+                name: "SPD",
+                icon: "spriteoutput/ui/avatar/icon/IconSpeed.png",
+                unit: "",
+                round: 1
+            },
+            CRITRate: {
+                value: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.CriticalChance || 0,
+                base: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.CriticalChance || 0,
+                name: "CRIT Rate",
+                icon: "spriteoutput/ui/avatar/icon/IconCriticalChance.png",
+                unit: "%",
+                round: 1
+            },
+            CRITDmg: {
+                value: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.CriticalDamage || 0,
+                base: mapAvatar?.[avatarSelected?.ID?.toString()]?.Stats[charPromotion]?.CriticalDamage || 0,
+                name: "CRIT DMG",
+                icon: "spriteoutput/ui/avatar/icon/IconCriticalDamage.png",
+                unit: "%",
+                round: 1
+            },
+            BreakEffect: {
+                value: 0,
+                base: 0,
+                name: "Break Effect",
+                icon: "spriteoutput/ui/avatar/icon/IconBreakUp.png",
+                unit: "%",
+                round: 1
+            },
+            EffectRES: {
+                value: 0,
+                base: 0,
+                name: "Effect RES",
+                icon: "spriteoutput/ui/avatar/icon/IconStatusResistance.png",
+                unit: "%",
+                round: 1
+            },
+            EnergyRate: {
+                value: 0,
+                base: 0,
+                name: "Energy Rate",
+                icon: "spriteoutput/ui/avatar/icon/IconEnergyRecovery.png",
+                unit: "%",
+                round: 1
+            },
+            EffectHitRate: {
+                value: 0,
+                base: 0,
+                name: "Effect Hit Rate",
+                icon: "spriteoutput/ui/avatar/icon/IconStatusProbability.png",
+                unit: "%",
+                round: 1
+            },
+            HealBoost: {
+                value: 0,
+                base: 0,
+                name: "Healing Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconHealRatio.png",
+                unit: "%",
+                round: 1
+            },
+            PhysicalAdd: {
+                value: 0,
+                base: 0,
+                name: "Physical Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconPhysicalAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            FireAdd: {
+                value: 0,
+                base: 0,
+                name: "Fire Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconFireAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            IceAdd: {
+                value: 0,
+                base: 0,
+                name: "Ice Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconIceAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            ThunderAdd: {
+                value: 0,
+                base: 0,
+                name: "Thunder Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconThunderAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            WindAdd: {
+                value: 0,
+                base: 0,
+                name: "Wind Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconWindAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            QuantumAdd: {
+                value: 0,
+                base: 0,
+                name: "Quantum Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconQuantumAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            ImaginaryAdd: {
+                value: 0,
+                base: 0,
+                name: "Imaginary Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconImaginaryAddedRatio.png",
+                unit: "%",
+                round: 1
+            },
+            ElationAdd: {
+                value: 0,
+                base: 0,
+                name: "Elation Boost",
+                icon: "spriteoutput/ui/avatar/icon/IconJoy.png",
+                unit: "%",
+                round: 1
+            }
+        }
+
+        if (avatarProfile?.lightcone && mapLightCone[avatarProfile?.lightcone?.item_id]) {
+            const lightconePromotion = calcPromotion(avatarProfile?.lightcone?.level)
+            statsData.HP.value += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
+                avatarProfile?.lightcone?.level
+            )
+            statsData.HP.base += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHP,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseHPAdd,
+                avatarProfile?.lightcone?.level
+            )
+            statsData.ATK.value += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
+                avatarProfile?.lightcone?.level
+            )
+            statsData.ATK.base += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttack,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseAttackAdd,
+                avatarProfile?.lightcone?.level
+            )
+            statsData.DEF.value += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
+                avatarProfile?.lightcone?.level
+            )
+            statsData.DEF.base += calcBaseStatRaw(
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefence,
+                mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Stats[lightconePromotion]?.BaseDefenceAdd,
+                avatarProfile?.lightcone?.level
+            )
+
+            const bonusData = mapLightCone?.[avatarProfile?.lightcone?.item_id]?.Skills?.Level?.[avatarProfile?.lightcone.rank]?.Bonus
+            if (bonusData && bonusData.length > 0) {
+                const bonusSpd = bonusData.filter((bonus) => bonus.PropertyType === "BaseSpeed")
+                const bonusOther = bonusData.filter((bonus) => bonus.PropertyType !== "BaseSpeed")
+                bonusSpd.forEach((bonus) => {
+                    statsData.SPD.value += bonus.Value
+                    statsData.SPD.base += bonus.Value
+                })
+                bonusOther.forEach((bonus) => {
+                    const statsBase = mappingStats?.[bonus.PropertyType]?.baseStat
+                    if (statsBase && statsData[statsBase]) {
+                        statsData[statsBase].value += calcBonusStatRaw(bonus.PropertyType, statsData[statsBase].base, bonus.Value)
+                    }
+                })
+            }
+        }
+        if (avatarSkillTree) {
+            Object.values(avatarSkillTree).forEach((value) => {
+                if (value?.["1"]
+                    && value?.["1"]?.PointID
+                    && typeof avatarData?.data?.skills?.[value?.["1"]?.PointID] === "number"
+                    && avatarData?.data?.skills?.[value?.["1"]?.PointID] !== 0
+                    && value?.["1"]?.StatusAddList
+                    && value?.["1"].StatusAddList.length > 0) {
+                    value?.["1"]?.StatusAddList.forEach((status) => {
+                        const statsBase = mappingStats?.[status?.PropertyType]?.baseStat
+                        if (statsBase && statsData[statsBase]) {
+                            statsData[statsBase].value += calcBonusStatRaw(status?.PropertyType, statsData[statsBase].base, status.Value)
+                        }
+                    })
+                }
+            })
+        }
+
+
+
+        if (avatarProfile?.relics && mainAffix && subAffix) {
+            Object.entries(avatarProfile?.relics).forEach(([key, value]) => {
+                const mainAffixMap = mainAffix["5" + key]
+                const subAffixMap = subAffix["5"]
+                if (!mainAffixMap || !subAffixMap) return
+                const mainStats = mappingStats?.[mainAffixMap?.[value.main_affix_id]?.Property]?.baseStat
+                if (mainStats && statsData[mainStats]) {
+                    statsData[mainStats].value += calcMainAffixBonusRaw(mainAffixMap?.[value.main_affix_id], value.level, statsData[mainStats].base)
+                }
+                value?.sub_affixes.forEach((subValue) => {
+                    const subStats = mappingStats?.[subAffixMap?.[subValue.sub_affix_id]?.Property]?.baseStat
+                    if (subStats && statsData[subStats]) {
+                        statsData[subStats].value += calcSubAffixBonusRaw(subAffixMap?.[subValue.sub_affix_id], subValue.step, subValue.count, statsData[subStats].base)
+                    }
+                })
+            })
+        }
+
+        if (relicEffects && relicEffects.length > 0) {
+            relicEffects.forEach((relic) => {
+                const dataBonus = mapRelicSet?.[relic.key]?.Skills
+                if (!dataBonus || Object.keys(dataBonus).length === 0) return
+                Object.entries(dataBonus || {}).forEach(([key, value]) => {
+                    if (relic.count < Number(key)) return
+                    value.Bonus.forEach((bonus) => {
+                        const statsBase = mappingStats?.[bonus.PropertyType]?.baseStat
+                        if (statsBase && statsData[statsBase]) {
+                            statsData[statsBase].value += calcBonusStatRaw(bonus.PropertyType, statsData[statsBase].base, bonus.Value)
+                        }
+                    })
+                })
+            })
+        }
+
+
+        return statsData
+    }, [
+        avatarSelected,
+        avatarData,
+        mapAvatar,
+        avatarProfile?.lightcone,
+        avatarProfile?.relics,
+        mapLightCone,
+        mainAffix,
+        subAffix,
+        relicEffects,
+        mapRelicSet,
+        avatarSkillTree
+    ])
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="col-span-1 md:col-span-2 flex flex-col justify-between py-3">
+                <div className="flex w-full flex-col justify-between gap-y-0.5 text-base">
+                    {Object.entries(characterStats || {})?.map(([key, stat], index) => {
+                        if (!stat || (key.includes("Add") && stat.value === 0)) return null
+                        return (
+                            <div key={index} className="flex flex-row items-center justify-between">
+                                <div className="flex flex-row items-center">
+                                    <NextImage 
+                                        src={`${process.env.CDN_URL}/${stat?.icon}`} 
+                                        unoptimized
+                                        crossOrigin="anonymous"
+                                        alt="Stat Icon" 
+                                        width={40} 
+                                        height={40} 
+                                        className="h-10 w-10 p-1 mx-1 bg-black/20 rounded-full" 
+                                    />
+                                    <div className="font-bold">{stat.name}</div>
+                                </div>
+                                <div className="ml-3 mr-3 grow border rounded opacity-50" />
+                                <div className="flex cursor-default flex-col text-right font-bold">{
+                                    stat.value ? stat.unit === "%" ? (stat.value * 100).toFixed(stat.round) : stat.value.toFixed(stat.round) : 0
+                                }{stat.unit}</div>
+                            </div>
+                        )
+                    })}
+                    <hr />
+                </div>
+
+                <div className="flex flex-col items-center gap-1 w-full my-2">
+                    {relicEffects.map((setEffect, index) => {
+                        const relicInfo = mapRelicSet[setEffect.key];
+                        if (!relicInfo) return null;
+                        return (
+                            <div key={index} className="flex w-full flex-row justify-between text-left">
+                                <div
+                                    className="font-bold truncate max-w-full mr-1"
+                                    style={{
+                                        fontSize: 'clamp(0.5rem, 2vw, 1rem)'
+                                    }}
+                                    dangerouslySetInnerHTML={{
+                                        __html: replaceByParam(
+                                            getLocaleName(locale, relicInfo.Name),
+                                            []
+                                        )
+                                    }}
+                                />
+                                <div>
+                                    <span className="black-blur bg-black/20 flex w-5 justify-center rounded px-1.5 py-0.5">{setEffect.count}</span>
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-2 justify-between py-3 text-lg">
+
+                {relicStats?.map((relic, index) => {
+                    if (!relic || !avatarSelected) return null
+                    return (
+                        <RelicShowcase key={index} relic={relic} avatarInfo={avatarSelected} />
+                    )
+                })}
+
+                {(!relicStats || !relicStats?.length) && (
+                    <div className="flex flex-col items-center justify-center">
+                        <div className="text-center p-6 rounded-lg bg-black/40 backdrop-blur-sm border border-white/10">
+                            <span className="text-lg text-gray-400">{transI18n("noRelicEquipped")}</span>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

src/components/relicBar/index.tsx

@@ -0,0 +1,498 @@
+"use client";
+import useUserDataStore from '@/stores/userDataStore';
+import { useEffect, useMemo, useState } from 'react';
+import SelectCustomImage from '../select/customSelectImage';
+import { calcAffixBonus, calcMainAffixBonus, randomPartition, randomStep, replaceByParam, getLocaleName } from '@/helper';
+import { mappingStats } from '@/constant/constant';
+import useModelStore from '@/stores/modelStore';
+import useRelicMakerStore from '@/stores/relicMakerStore';
+import { toast } from 'react-toastify';
+import { useTranslations } from 'next-intl'
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
+import useDetailDataStore from '@/stores/detailDataStore';
+import useCurrentDataStore from '@/stores/currentDataStore';
+import { RelicSetDetail, SubAffixData } from '@/types';
+import useLocaleStore from '@/stores/localeStore';
+import { mappingRelicSlot } from "@/constant/constant";
+
+export default function RelicMaker() {
+    const { avatars, setAvatars } = useUserDataStore()
+    const { avatarSelected } = useCurrentDataStore()
+    const { setIsOpenRelic } = useModelStore()
+    const { mainAffix, subAffix, mapRelicSet } = useDetailDataStore()
+    const { locale } = useLocaleStore()
+    const transI18n = useTranslations("DataPage")
+    const {
+        selectedRelicSlot,
+        selectedRelicSet,
+        selectedMainStat,
+        listSelectedSubStats,
+        selectedRelicLevel,
+        preSelectedSubStats,
+        setSelectedRelicSet,
+        setSelectedMainStat,
+        setSelectedRelicLevel,
+        setListSelectedSubStats,
+        resetHistory,
+        popHistory,
+        addHistory,
+    } = useRelicMakerStore()
+    const [error, setError] = useState<string>("");
+
+    const relicSets = useMemo(() => {
+        const listSet: Record<string, RelicSetDetail> = {};
+        for (const [key, value] of Object.entries(mapRelicSet  || {})) {
+            let isOk = false;
+            for (const key2 of Object.keys(value.Parts)) {
+                if (key2 == mappingRelicSlot?.[selectedRelicSlot]) {
+                    isOk = true;
+                    break;
+                }
+            }
+            if (isOk) {
+                listSet[key] = value;
+            }
+        }
+        return listSet;
+    }, [mapRelicSet , selectedRelicSlot]);
+
+    const subAffixOptions = useMemo(() => {
+        const listSet: Record<string, SubAffixData> = {};
+        const subAffixMap = subAffix["5"];
+        const mainAffixMap = mainAffix["5" + selectedRelicSlot]
+
+        if (Object.keys(subAffixMap || {}).length === 0 || Object.keys(mainAffixMap || {}).length === 0) return listSet;
+
+        for (const [key, value] of Object.entries(subAffixMap)) {
+            if (value.Property !== mainAffixMap[selectedMainStat]?.Property) {
+                listSet[key] = value;
+            }
+        }
+        return listSet;
+    }, [subAffix, mainAffix, selectedRelicSlot, selectedMainStat]);
+
+    useEffect(() => {
+        const subAffixMap = subAffix["5"];
+        const mainAffixMap = mainAffix["5" + selectedRelicSlot];
+
+        if (!subAffixMap || !mainAffixMap) return;
+
+        const mainProp = mainAffixMap[selectedMainStat]?.Property;
+        if (!mainProp) return;
+
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        let updated = false;
+
+        for (let i = 0; i < newSubAffixes.length; i++) {
+            if (newSubAffixes[i].property === mainProp) {
+                newSubAffixes[i].affixId = "";
+                newSubAffixes[i].property = "";
+                newSubAffixes[i].rollCount = 0;
+                newSubAffixes[i].stepCount = 0;
+                updated = true;
+            }
+        }
+
+        if (updated) setListSelectedSubStats(newSubAffixes);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedMainStat, subAffix, mainAffix, selectedRelicSlot]);
+
+    const exSubAffixOptions = useMemo(() => {
+        const listSet: Record<string, SubAffixData> = {};
+        const subAffixMap = subAffix["5"];
+        const mainAffixMap = mainAffix["5" + selectedRelicSlot];
+
+        if (!subAffixMap || !mainAffixMap) return listSet;
+
+        for (const [key, value] of Object.entries(subAffixMap)) {
+            const subAffix = listSelectedSubStats.find((item) => item.property === value.Property);
+            if (subAffix && value.Property !== mainAffixMap[selectedMainStat]?.Property) {
+                listSet[key] = value;
+            }
+        }
+        return listSet;
+    }, [subAffix, listSelectedSubStats, mainAffix, selectedRelicSlot, selectedMainStat]);
+
+    const effectBonus = useMemo(() => {
+        const affixSet = mainAffix?.["5" + selectedRelicSlot];
+        if (!affixSet) return 0;
+
+        const data = affixSet[selectedMainStat];
+        if (!data) return 0;
+
+        return calcMainAffixBonus(data, selectedRelicLevel);
+    }, [mainAffix, selectedRelicSlot, selectedMainStat, selectedRelicLevel]);
+
+    const handleSubStatChange = (key: string, index: number, rollCount: number, stepCount: number) => {
+        setError("");
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        if (!subAffixOptions[key]) {
+            newSubAffixes[index].affixId = "";
+            newSubAffixes[index].property = "";
+            newSubAffixes[index].rollCount = rollCount;
+            newSubAffixes[index].stepCount = stepCount;
+            setListSelectedSubStats(newSubAffixes);
+            addHistory(index, newSubAffixes[index]);
+            return;
+        }
+        newSubAffixes[index].affixId = key;
+        newSubAffixes[index].property = subAffixOptions[key].Property;
+        newSubAffixes[index].rollCount = rollCount;
+        newSubAffixes[index].stepCount = stepCount;
+        setListSelectedSubStats(newSubAffixes);
+        addHistory(index, newSubAffixes[index]);
+    };
+
+    const handlerRollback = (index: number) => {
+        setError("");
+        if (!preSelectedSubStats[index]) return;
+
+        const keys = Object.keys(preSelectedSubStats[index]);
+        if (keys.length <= 1) return;
+
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        const listHistory = structuredClone(preSelectedSubStats[index]);
+        const secondLastKey = listHistory.length - 2;
+        const preSubAffixes = { ...listHistory[secondLastKey] };
+        newSubAffixes[index].rollCount = preSubAffixes.rollCount;
+        newSubAffixes[index].stepCount = preSubAffixes.stepCount;
+        setListSelectedSubStats(newSubAffixes);
+        popHistory(index);
+    };
+
+    const resetSubStat = (index: number) => {
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        resetHistory(index);
+        newSubAffixes[index].affixId = "";
+        newSubAffixes[index].property = "";
+        newSubAffixes[index].rollCount = 0;
+        newSubAffixes[index].stepCount = 0;
+        setListSelectedSubStats(newSubAffixes);
+    };
+
+    const randomizeStats = () => {
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        const exKeys = Object.keys(exSubAffixOptions);
+        for (let i = 0; i < newSubAffixes.length; i++) {
+            const keys = Object.keys(subAffixOptions).filter((key) => !exKeys.includes(key));
+            const randomKey = keys[Math.floor(Math.random() * keys.length)];
+            exKeys.push(randomKey);
+            const randomValue = subAffixOptions[randomKey];
+            newSubAffixes[i].affixId = randomKey;
+            newSubAffixes[i].property = randomValue.Property;
+            newSubAffixes[i].rollCount = 0;
+            newSubAffixes[i].stepCount = 0;
+        }
+        for (let i = 0; i < newSubAffixes.length; i++) {
+            addHistory(i, newSubAffixes[i]);
+        }
+        setListSelectedSubStats(newSubAffixes);
+
+    };
+
+    const randomizeRolls = () => {
+        const newSubAffixes = structuredClone(listSelectedSubStats);
+        const randomRolls = randomPartition(9, listSelectedSubStats.length);
+        for (let i = 0; i < listSelectedSubStats.length; i++) {
+            newSubAffixes[i].rollCount = randomRolls[i];
+            newSubAffixes[i].stepCount = randomStep(randomRolls[i]);
+        }
+        setListSelectedSubStats(newSubAffixes);
+        for (let i = 0; i < newSubAffixes.length; i++) {
+            addHistory(i, newSubAffixes[i]);
+        }
+    };
+
+    const handlerSaveRelic = () => {
+        setError("");
+        const avatar = avatars[avatarSelected?.ID?.toString() || ""];
+        if (!selectedRelicSet || !selectedMainStat || !selectedRelicLevel || !selectedRelicSlot) {
+            setError(transI18n("pleaseSelectAllOptions"));
+            return;
+        };
+
+        if (listSelectedSubStats.find((item) => item.affixId === "")) {
+            setError(transI18n("pleaseSelectAllSubStats"));
+            return;
+        };
+
+        if (avatar) {
+            avatar.profileList[avatar.profileSelect].relics[selectedRelicSlot] = {
+                level: selectedRelicLevel,
+                relic_id: Number(`6${selectedRelicSet}${selectedRelicSlot}`),
+                relic_set_id: Number(selectedRelicSet),
+                main_affix_id: Number(selectedMainStat),
+                sub_affixes: listSelectedSubStats.map((item) => {
+                    return {
+                        sub_affix_id: Number(item.affixId),
+                        count: item.rollCount,
+                        step: item.stepCount
+                    }
+                })
+            }
+        }
+        setAvatars({ ...avatars });
+        setIsOpenRelic(false);
+
+        toast.success(transI18n("relicSavedSuccessfully"));
+    }
+
+    return (
+        <div>
+            <div className="border-b border-purple-500/30 px-6 py-4 mb-4">
+                <h3 className="font-bold text-2xl text-transparent bg-clip-text bg-linear-to-r from-pink-400 to-cyan-400">
+                    {transI18n("relicMaker")}
+                </h3>
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+
+                {/* Left Panel */}
+                <div className="space-y-6">
+
+                    {/* Set Configuration */}
+                    <div className="bg-base-100 rounded-xl p-6 border border-slate-700">
+                        <h2 className="text-xl font-bold mb-6 text-warning">{transI18n("mainSettings")}</h2>
+
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                            {/* Main Stat */}
+                            <div>
+                                <label className="block text-lg font-medium mb-2">{transI18n("mainStat")}</label>
+                                <SelectCustomImage
+                                    customSet={Object.entries(mainAffix["5" + selectedRelicSlot] || {}).map(([key, value]) => ({
+                                        value: key,
+                                        label: mappingStats[value.Property].name + " " + mappingStats[value.Property].unit,
+                                        imageUrl: `${process.env.CDN_URL}/${mappingStats[value.Property].icon}`
+                                    }))}
+                                    excludeSet={[]}
+                                    selectedCustomSet={selectedMainStat}
+                                    placeholder={transI18n("selectAMainStat")}
+                                    setSelectedCustomSet={setSelectedMainStat}
+                                />
+                            </div>
+                            {/* Relic Set Selection */}
+                            <div>
+                                <label className="block text-lg font-medium mb-2">{transI18n("set")}</label>
+                                <SelectCustomImage
+                                    customSet={Object.entries(relicSets).map(([key, value]) => ({
+                                        value: key,
+                                        label: getLocaleName(locale, value.Name),
+                                        imageUrl: `${process.env.CDN_URL}/${value.Image.SetIconPath}`
+                                    }))}
+                                    excludeSet={[]}
+                                    selectedCustomSet={selectedRelicSet}
+                                    placeholder={transI18n("selectASet")}
+                                    setSelectedCustomSet={setSelectedRelicSet}
+                                />
+                            </div>
+                        </div>
+
+                        {/* Set Bonus Display */}
+                        <div className="mb-6 py-4 bg-base-100 rounded-lg">
+                            {selectedRelicSet !== "" ? Object.entries(mapRelicSet[selectedRelicSet].Skills).map(([key, value]) => (
+                                <div key={key} className="text-blue-300 text-sm mb-1">
+                                    <span className="text-info font-bold">{key}-Pc:
+                                        <div
+                                            className="text-warning leading-relaxed font-bold"
+                                            dangerouslySetInnerHTML={{
+                                                __html: replaceByParam(
+                                                    getLocaleName(locale, value.Desc),
+                                                    value.Param || []
+                                                )
+                                            }}
+                                        /> </span>
+                                </div>
+                            )) : <p className="text-blue-300 text-sm font-bold mb-1">{transI18n("pleaseSelectASet")}</p>}
+                        </div>
+
+
+                        {/* Rarity */}
+                        <div className="grid grid-cols-2 items-center gap-4 mb-6">
+                            <label className="block text-lg font-medium mb-2">{transI18n("rarity")}: {5} ⭐</label>
+                            <label className="block text-lg font-medium mb-2">{transI18n("effectBonus")}: <span className="text-warning font-bold">{effectBonus}</span></label>
+                        </div>
+
+                        {/* Level */}
+                        <div className="mb-6">
+                            <label className="block text-lg font-medium mb-2">{transI18n("level")}</label>
+                            <div className="bg-base-200 rounded-lg p-4">
+                                <input
+                                    type="range"
+                                    min="0"
+                                    max="15"
+                                    value={selectedRelicLevel}
+                                    onChange={(e) => setSelectedRelicLevel(parseInt(e.target.value))}
+                                    className="range range-primary w-full"
+                                />
+                                <div className="text-center text-2xl font-bold mt-2">{selectedRelicLevel}</div>
+                            </div>
+                        </div>
+                        <AnimatePresence>
+                            {error && (
+                                <motion.p
+                                    key="error"
+                                    initial={{ x: 0 }}
+                                    animate={{ x: [0, -2, 2, -2, 2, 0] }}
+                                    transition={{
+                                        duration: 6,
+                                        repeat: Infinity,
+                                        ease: "easeInOut",
+                                        repeatDelay: 1.5,
+                                    }}
+                                    className="text-error my-2 text-center font-bold"
+                                >
+                                    {error}!
+                                </motion.p>
+                            )}
+                        </AnimatePresence>
+
+
+
+                        {/* Save Button */}
+                        <button onClick={handlerSaveRelic} className="btn btn-success w-full">
+                            {transI18n("save")}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Right Panel - Sub Stats */}
+                <div className="space-y-4">
+                    {/* Total Roll */}
+                    <div className="bg-base-100 rounded-xl p-4 border border-slate-700 z-1">
+                        <h3 className="text-lg font-bold mb-4">{transI18n("totalRoll")} {listSelectedSubStats.reduce((a, b) => a + b.rollCount, 0)}</h3>
+
+                        <div className="grid grid-cols-2 gap-2">
+                            <button
+                                className="btn btn-outline btn-success sm:btn-sm"
+                                onClick={randomizeStats}
+                            >
+                                {transI18n("randomizeStats")}
+                            </button>
+                            <button
+                                className="btn btn-outline btn-success sm:btn-sm"
+                                onClick={randomizeRolls}
+                            >
+                                {transI18n("randomizeRolls")}
+                            </button>
+                        </div>
+                    </div>
+                    {listSelectedSubStats.map((v, index) => (
+                        <div key={index} className={`bg-base-100 rounded-xl p-4 border border-slate-700`}>
+                            <div className="grid grid-cols-12 gap-2 items-center">
+
+                                {/* Stat Selection */}
+                                <div className="col-span-8">
+                                    <SelectCustomImage
+                                        customSet={Object.entries(subAffixOptions).map(([key, value]) => ({
+                                            value: key,
+                                            label: mappingStats[value.Property].name + " " + mappingStats[value.Property].unit,
+                                            imageUrl: `${process.env.CDN_URL}/${mappingStats[value.Property].icon}`
+                                        }))}
+                                        excludeSet={Object.entries(exSubAffixOptions).map(([key, value]) => ({
+                                            value: key,
+                                            label: mappingStats[value.Property].name + " " + mappingStats[value.Property].unit,
+                                            imageUrl: `${process.env.CDN_URL}/${mappingStats[value.Property].icon}`
+                                        }))}
+                                        selectedCustomSet={v.affixId}
+                                        placeholder={transI18n("selectASubStat")}
+                                        setSelectedCustomSet={(key) => handleSubStatChange(key, index, 0, 0)}
+                                    />
+                                </div>
+
+                                {/* Current Value */}
+                                <div className="col-span-4 text-center flex items-center justify-center gap-2">
+                                    <span className="text-2xl font-mono">+{ }</span>
+                                    <div className="text-xl font-bold text-info">{calcAffixBonus(subAffixOptions[v.affixId], v.stepCount, v.rollCount)}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}</div>
+                                </div>
+
+                                {/* Up Roll Values */}
+                                <div className="col-span-12">
+                                    <div className="flex items-center gap-2 mb-2">
+                                        <ChevronUp className="w-4 h-4 text-success" />
+                                        <span className="text-sm font-semibold text-success">{transI18n("upRoll")}</span>
+                                    </div>
+                                    <div className="grid grid-cols-3 gap-1">
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 0)}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], 0, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 1)}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], v.stepCount + 1, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, v.rollCount + 1, v.stepCount + 2)}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], v.stepCount + 2, v.rollCount + 1)}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {/* Down Roll Values */}
+                                <div className="col-span-12">
+                                    <div className="flex items-center gap-2 mb-2">
+                                        <ChevronDown className="w-4 h-4 text-error" />
+                                        <span className="text-sm font-semibold text-error">{transI18n("downRoll")}</span>
+                                    </div>
+                                    <div className="grid grid-cols-3 gap-1">
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount, 0))}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], 0, Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount - 1, 0))}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], Math.max(v.stepCount - 1, 0), Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                        <button
+                                            onClick={() => handleSubStatChange(v.affixId, index, Math.max(v.rollCount - 1, 0), Math.max(v.stepCount - 2, 0))}
+                                            className="btn btn-sm btn-info border-0"
+                                        >
+                                            {calcAffixBonus(subAffixOptions[v.affixId], Math.max(v.stepCount - 2, 0), Math.max(v.rollCount - 1, 0))}{mappingStats?.[subAffixOptions[v.affixId]?.Property]?.unit || ""}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {/* Reset Button & Roll Info */}
+                                <div className="col-span-12 text-center w-full">
+                                    <div className="grid grid-rows-2 gap-1 items-center justify-items-start w-full">
+                                        <div className="grid grid-cols-2 gap-2 items-center w-full">
+                                            <button
+                                                className="btn btn-error btn-sm mb-1"
+                                                onClick={() => resetSubStat(index)}
+                                            >
+                                                {transI18n("reset")}
+                                            </button>
+                                            <button
+                                                className="btn btn-warning btn-sm mb-1"
+                                                onClick={() => handlerRollback(index)}
+                                            >
+                                                {transI18n("rollBack")}
+                                            </button>
+                                        </div>
+
+                                        <div className="grid grid-cols-2 gap-2 items-center w-full">
+                                            <span className="font-bold">{transI18n("roll")}: <span className="text-info">{v.rollCount}</span></span>
+                                            <span className="font-bold">{transI18n("step")}: <span className="text-info">{v.stepCount}</span></span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    ))}
+
+
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/relicsInfo/index.tsx

@@ -0,0 +1,366 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+import { useCallback, useEffect, useMemo } from "react";
+import RelicMaker from "../relicBar";
+import { motion } from "framer-motion";
+import useUserDataStore from "@/stores/userDataStore";
+import { useTranslations } from "next-intl";
+import RelicCard from "../card/relicCard";
+import useModelStore from '@/stores/modelStore';
+import { replaceByParam } from '@/helper';
+import useRelicMakerStore from '@/stores/relicMakerStore';
+import QuickView from "../quickView";
+import { ModalConfig } from "@/types";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import { getLocaleName } from '@/helper';
+import useLocaleStore from "@/stores/localeStore";
+
+export default function RelicsInfo() {
+  const { avatars, setAvatars } = useUserDataStore()
+  const {
+    setSelectedRelicSlot,
+    selectedRelicSlot,
+    setSelectedMainStat,
+    setSelectedRelicSet,
+    setSelectedRelicLevel,
+    setListSelectedSubStats,
+    resetHistory,
+    resetSubStat,
+    listSelectedSubStats,
+  } = useRelicMakerStore()
+
+  const {
+    isOpenRelic,
+    setIsOpenRelic,
+    isOpenQuickView,
+    setIsOpenQuickView
+  } = useModelStore()
+  const transI18n = useTranslations("DataPage")
+  const { avatarSelected } = useCurrentDataStore()
+  const { mapRelicSet, subAffix } = useDetailDataStore()
+  const { locale } = useLocaleStore()
+
+  const handleShow = (modalId: string) => {
+    const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (modal) {
+      modal.showModal();
+    }
+  };
+
+  // Close modal handler
+  const handleCloseModal = (modalId: string) => {
+    const modal = document.getElementById(modalId) as HTMLDialogElement | null;
+    if (modal) {
+      modal.close();
+    }
+  };
+
+
+  const getRelic = useCallback((slot: string) => {
+    const avatar = avatars[avatarSelected?.ID.toString() || ""];
+    if (avatar) {
+      return avatar.profileList[avatar.profileSelect]?.relics[slot] || null;
+    }
+    return null;
+  }, [avatars, avatarSelected]);
+
+  const handlerDeleteRelic = (slot: string) => {
+    const avatar = avatars[avatarSelected?.ID.toString() || ""];
+    if (avatar) {
+      delete avatar.profileList[avatar.profileSelect].relics[slot]
+      setAvatars({ ...avatars });
+    }
+  }
+
+  const handlerChangeRelic = (slot: string) => {
+    const relic = getRelic(slot)
+    setSelectedRelicSlot(slot)
+    resetSubStat()
+    resetHistory(null)
+    if (relic) {
+      setSelectedMainStat(relic.main_affix_id.toString())
+      setSelectedRelicSet(relic.relic_set_id.toString())
+      setSelectedRelicLevel(relic.level)
+      const newSubAffixes: { affixId: string, property: string, rollCount: number, stepCount: number }[] = [...listSelectedSubStats];
+      relic.sub_affixes.forEach((item, index) => {
+        newSubAffixes[index].affixId = item.sub_affix_id.toString();
+        newSubAffixes[index].property = subAffix["5"][item.sub_affix_id.toString()]?.Property || "";
+        newSubAffixes[index].rollCount = item.count || 0;
+        newSubAffixes[index].stepCount = item.step || 0;
+      })
+      setListSelectedSubStats(newSubAffixes)
+    } else {
+      setSelectedMainStat("")
+      setSelectedRelicSet("")
+      setSelectedRelicLevel(15)
+      const newSubAffixes: { affixId: string, property: string, rollCount: number, stepCount: number }[] = [...listSelectedSubStats];
+      newSubAffixes.forEach((item) => {
+        item.affixId = ""
+        item.property = ""
+        item.rollCount = 0
+        item.stepCount = 0
+      })
+
+      setListSelectedSubStats(newSubAffixes)
+    }
+    setIsOpenRelic(true)
+    handleShow("action_detail_modal")
+  }
+
+  const relicEffects = useMemo(() => {
+    const avatar = avatars[avatarSelected?.ID.toString() || ""];
+    const relicCount: { [key: string]: number } = {};
+    if (avatar) {
+      for (const relic of Object.values(avatar.profileList[avatar.profileSelect].relics)) {
+        if (relicCount[relic.relic_set_id]) {
+          relicCount[relic.relic_set_id]++;
+        } else {
+          relicCount[relic.relic_set_id] = 1;
+        }
+      }
+    }
+    const listEffects: { key: string, count: number }[] = [];
+    Object.entries(relicCount).forEach(([key, value]) => {
+      if (value >= 2) {
+        listEffects.push({ key: key, count: value });
+      }
+    });
+    return listEffects;
+  }, [avatars, avatarSelected]);
+
+  const modalConfigs: ModalConfig[] = [
+    {
+      id: "action_detail_modal",
+      title: "",
+      isOpen: isOpenRelic,
+      onClose: () => {
+        setIsOpenRelic(false)
+        handleCloseModal("action_detail_modal")
+      },
+      content: <RelicMaker />
+    },
+    {
+      id: "quick_view_modal",
+      title: transI18n("quickView").toUpperCase(),
+      isOpen: isOpenQuickView,
+      onClose: () => {
+        setIsOpenQuickView(false)
+        handleCloseModal("quick_view_modal")
+      },
+      content: <QuickView />
+    }
+  ]
+
+  // Handle ESC key to close modal
+  useEffect(() => {
+    for (const item of modalConfigs) {
+      if (!item?.isOpen) {
+        handleCloseModal(item?.id || "")
+      }
+    }
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        for (const item of modalConfigs) {
+          handleCloseModal(item?.id || "")
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleEscKey);
+    return () => window.removeEventListener('keydown', handleEscKey);
+  }, [isOpenRelic]);
+
+  return (
+    <div className="max-h-[77vh] min-h-[50vh] overflow-y-scroll overflow-x-hidden">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+        {/* Left Section - Items Grid */}
+        <div className="lg:col-span-2">
+          <div className="bg-base-100 rounded-xl p-6 shadow-lg">
+            <h2 className="flex items-center gap-2 text-2xl font-bold mb-6 text-base-content">
+              <div className="w-2 h-6 bg-linear-to-b from-primary to-primary/50 rounded-full"></div>
+              {transI18n("relics")}
+            </h2>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+              {["1", "2", "3", "4", "5", "6"].map((item, index) => (
+                <div key={index} className="relative group">
+                  <div
+                    onClick={() => {
+                      if (item === selectedRelicSlot) {
+                        setSelectedRelicSlot("")
+                      } else {
+                        setSelectedRelicSlot(item)
+                      }
+                      handlerChangeRelic(item)
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <RelicCard
+                      slot={item}
+                      avatarId={avatarSelected?.ID.toString() || ""}
+                    />
+                  </div>
+
+                  <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex gap-1">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handlerChangeRelic(item)
+                      }}
+                      className="btn btn-info p-1.5 rounded-full shadow-lg transition-colors duration-200"
+                      title={transI18n("changeRelic")}
+                    >
+                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                      </svg>
+                    </button>
+
+                    {getRelic(item) && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (window.confirm(`${transI18n("deleteRelicConfirm")} ${item}?`)) {
+                            handlerDeleteRelic(item)
+                          }
+                        }}
+                        className="btn btn-error p-1.5 rounded-full shadow-lg transition-colors duration-200"
+                        title={transI18n("deleteRelic")}
+                      >
+                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="grid grid-cols-2 gap-2 mt-10">
+              <button
+                disabled={!selectedRelicSlot}
+                onClick={() => {
+                  handlerChangeRelic(selectedRelicSlot)
+                }}
+                className="btn btn-info"
+              >
+                {transI18n("changeRelic")}
+              </button>
+              <button
+                disabled={!selectedRelicSlot}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (window.confirm(`${transI18n("deleteRelicConfirm")} ${selectedRelicSlot}?`)) {
+                    handlerDeleteRelic(selectedRelicSlot)
+                  }
+                }}
+                className="btn btn-error"
+              >
+                {transI18n("deleteRelic")}
+              </button>
+            </div>
+            <button
+              onClick={() => {
+                setIsOpenQuickView(true)
+                handleShow("quick_view_modal")
+              }}
+              className="btn btn-info w-full mt-2"
+            >
+              {transI18n("quickView")}
+            </button>
+          </div>
+        </div>
+
+        {/* Right Section - Stats and Set Effects */}
+        <div className="space-y-6">
+
+          {/* Set Effects Panel */}
+          <div className="bg-base-100 rounded-xl p-6 shadow-lg">
+            <h3 className="flex items-center gap-2 text-xl font-bold mb-4 text-base-content">
+              <div className="w-2 h-6 bg-linear-to-b from-primary to-primary/50 rounded-full"></div>
+              {transI18n("setEffects")}
+            </h3>
+
+            <div className="space-y-6">
+              {relicEffects.map((setEffect, index) => {
+                const relicInfo = mapRelicSet[setEffect.key];
+                if (!relicInfo) return null;
+                return (
+                  <div key={index} className="space-y-3">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="font-bold text-warning"
+                        dangerouslySetInnerHTML={{
+                          __html: replaceByParam(
+                            getLocaleName(locale, relicInfo.Name),
+                            []
+                          )
+                        }}
+                      />
+                      {setEffect.count && (
+                        <span className={`text-sm text-info`}>
+                          ({setEffect.count})
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="space-y-2 pl-4">
+                      {Object.entries(relicInfo.Skills).map(([requireNum, value]) => {
+                        if (Number(requireNum) > Number(setEffect.count)) return null;
+                        return (
+                          <div key={requireNum} className="space-y-1">
+                            <div className={`font-medium text-success`}>
+                              {requireNum}-PC:
+                            </div>
+                            <div
+                              className="text-sm text-base-content/80 leading-relaxed pl-4"
+                              dangerouslySetInnerHTML={{
+                                __html: replaceByParam(
+                                  getLocaleName(locale, value.Desc),
+                                  value.Param || []
+                                )
+                              }}
+                            />
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {modalConfigs.map(({ id, title, onClose, content }) => (
+        <dialog key={id} id={id} className="modal">
+          <div className="modal-box w-11/12 max-w-[90%] max-h-[85vh] bg-base-100 text-base-content border border-purple-500/50 shadow-lg shadow-purple-500/20">
+            <div className="sticky top-0 z-10">
+              <motion.button
+                whileHover={{ scale: 1.1, rotate: 90 }}
+                transition={{ duration: 0.2 }}
+                className="btn btn-circle btn-md absolute right-2 top-2 bg-red-600 hover:bg-red-700 text-white border-none"
+                onClick={onClose}
+              >
+                ✕
+              </motion.button>
+            </div>
+
+            {title && (
+              <div className="border-b border-purple-500/30 px-6 py-4 mb-4">
+                <h3 className="font-bold text-2xl text-transparent bg-clip-text bg-linear-to-r from-pink-400 to-cyan-400">
+                  {title}
+                </h3>
+              </div>
+            )}
+
+            {content}
+          </div>
+        </dialog>
+      ))}
+
+    </div>
+  );
+}

src/components/select/customSelectImage.tsx

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import dynamic from "next/dynamic"
+import type { SingleValue } from "react-select"
+import Image from "next/image"
+import useLocaleStore from "@/stores/localeStore"
+import ParseText from "../parseText"
+import { themeColors } from "@/constant/constant"
+import type { Props as SelectProps } from "react-select"
+import { JSX } from "react"
+
+const Select = dynamic(
+  () => import("react-select").then(m => m.default),
+  { ssr: false }
+) as <Option, IsMulti extends boolean = false>(
+  props: SelectProps<Option, IsMulti>
+) => JSX.Element
+
+export type SelectOption = {
+  value: string
+  label: string
+  imageUrl: string
+}
+
+type SelectCustomProp = {
+  customSet: SelectOption[]
+  excludeSet: SelectOption[]
+  selectedCustomSet: string
+  placeholder: string
+  setSelectedCustomSet: (value: string) => void
+}
+
+export default function SelectCustomImage({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
+  const options: SelectOption[] = customSet
+  const { locale, theme } = useLocaleStore()
+
+  const c = themeColors[theme] || themeColors.winter
+
+  const customStyles = {
+    option: (p: any, s: any) => ({
+      ...p,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '8px 12px',
+      backgroundColor: s.isFocused ? c.bgHover : c.bg,
+      color: c.text,
+      cursor: 'pointer'
+    }),
+
+    singleValue: (p: any) => ({
+      ...p,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      color: c.text
+    }),
+
+    control: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      borderColor: c.border,
+      boxShadow: 'none'
+    }),
+
+    menu: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      color: c.text,
+      zIndex: 9999
+    }),
+
+    menuPortal: (p: any) => ({
+      ...p,
+      zIndex: 9999
+    })
+  }
+
+  const formatOptionLabel = (option: SelectOption) => (
+    <div className="flex items-center gap-1 w-full h-full">
+      <Image
+        unoptimized
+        crossOrigin="anonymous"
+        src={option.imageUrl}
+        alt=""
+        width={125}
+        height={125}
+        className="w-8 h-8 object-contain bg-warning-content rounded-full"
+      />
+      <ParseText className='font-bold' text={option.label} locale={locale} />
+    </div>
+  )
+
+  return (
+    <Select
+      options={options.filter(opt => !excludeSet.some(ex => ex.value === opt.value))}
+      value={options.find(opt => {
+        return opt.value === selectedCustomSet
+      }) || null}
+      onChange={(selected: SingleValue<SelectOption>) => {
+        setSelectedCustomSet(selected?.value || '')
+      }}
+      formatOptionLabel={formatOptionLabel}
+      styles={customStyles}
+      placeholder={placeholder}
+      className="my-react-select-container"
+      classNamePrefix="my-react-select"
+      isSearchable
+      isClearable
+    />
+  )
+}

src/components/select/customSelectText.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import dynamic from "next/dynamic"
+import type { SingleValue } from "react-select"
+import { replaceByParam } from '@/helper'
+import useLocaleStore from '@/stores/localeStore'
+import { themeColors } from '@/constant/constant'
+import type { Props as SelectProps } from "react-select"
+import { JSX } from "react"
+
+const Select = dynamic(
+  () => import("react-select").then(m => m.default),
+  { ssr: false }
+) as <Option, IsMulti extends boolean = false>(
+  props: SelectProps<Option, IsMulti>
+) => JSX.Element
+
+export type SelectOption = {
+  id: string
+  name: string
+  time?: string
+  description?: string
+}
+
+type SelectCustomProp = {
+  customSet: SelectOption[]
+  excludeSet: SelectOption[]
+  selectedCustomSet: string
+  placeholder: string
+  setSelectedCustomSet: (value: string) => void
+}
+
+export default function SelectCustomText({ customSet, excludeSet, selectedCustomSet, placeholder, setSelectedCustomSet }: SelectCustomProp) {
+  const options: SelectOption[] = customSet
+  const { theme } = useLocaleStore()
+  const c = themeColors[theme] || themeColors.winter
+
+  const customStyles = {
+    option: (p: any, s: any) => ({
+      ...p,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '8px 12px',
+      backgroundColor: s.isFocused ? c.bgHover : c.bg,
+      color: c.text,
+      cursor: 'pointer'
+    }),
+
+    singleValue: (p: any) => ({
+      ...p,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      color: c.text
+    }),
+
+    control: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      borderColor: c.border,
+      boxShadow: 'none'
+    }),
+
+    menu: (p: any) => ({
+      ...p,
+      backgroundColor: c.bg,
+      color: c.text,
+      zIndex: 9999
+    }),
+
+    menuPortal: (p: any) => ({
+      ...p,
+      zIndex: 9999
+    })
+  }
+
+
+  const formatOptionLabel = (option: SelectOption) => (
+    <div className="flex flex-col gap-1 w-full h-full">
+      <div
+        className="font-bold text-lg"
+        dangerouslySetInnerHTML={{
+          __html: replaceByParam(
+            option.name,
+            []
+          )
+        }}
+      />
+      {option.time && <div className='text-base'>{option.time}</div>}
+      {option.description && <div
+        className="text-base"
+        dangerouslySetInnerHTML={{
+          __html: option.description
+        }}
+      />}
+    </div>
+  )
+
+  return (
+    <Select
+      options={options.filter(opt => !excludeSet.some(ex => ex.id === opt.id))}
+      value={options.find(opt => {
+        return opt.id === selectedCustomSet
+      }) || null}
+      onChange={(selected: SingleValue<SelectOption>) => {
+        setSelectedCustomSet(selected?.id || '')
+      }}
+      formatOptionLabel={formatOptionLabel}
+      styles={customStyles}
+      placeholder={placeholder}
+      className="my-react-select-container"
+      classNamePrefix="my-react-select"
+      isSearchable
+      isClearable
+    />
+  )
+}

src/components/showcaseCard/relicShowcase.tsx

@@ -0,0 +1,108 @@
+
+"use client"
+
+import NextImage from "next/image"
+import { AvatarDetail, RelicShowcaseType } from "@/types";
+
+export default function RelicShowcase({
+    relic,
+    avatarInfo,
+}: {
+    relic: RelicShowcaseType;
+    avatarInfo: AvatarDetail;
+}) {
+    return (
+        <>
+            <div
+                className="relative w-full flex flex-row items-center rounded-s-lg border-l-2 p-1 border-yellow-600/60  bg-linear-to-r from-yellow-600/20 to-transparent"
+            >
+                {/* Subtle glow overlay */}
+                <div className="absolute inset-0 rounded-s-lg  pointer-events-none"></div>
+
+                <div className="flex relative">
+                    <div className="absolute inset-0 rounded-lg blur-lg -z-10"></div>
+                    <NextImage
+                        src={relic?.img || ""}
+                        unoptimized
+                        crossOrigin="anonymous"
+                        width={78}
+                        height={78}
+                        alt="Relic Icon"
+                        className="h-19.5 w-19.5 rounded-lg"
+                    />
+
+                    <div
+                        className="absolute text-yellow-400 font-bold z-10 drop-shadow-[0_0_6px_rgba(251,191,36,0.8)]"
+                        style={{
+                            left: '0.65rem',
+                            bottom: '-0.45rem',
+                            fontSize: '1.05rem',
+                            letterSpacing: '-0.1em',
+                        }}
+                    >
+                        ✦✦✦✦✦
+                    </div>
+                </div>
+
+                <div className=" flex w-1/6 flex-col items-center justify-center">
+                    <div className="relative">
+                        <div className="absolute inset-0 bg-yellow-500/15 rounded-full blur-md -z-10"></div>
+                        <NextImage
+                            src={`${process.env.CDN_URL}/${relic?.mainAffix?.detail?.icon}` || ""}
+                            unoptimized
+                            crossOrigin="anonymous"
+                            width={35}
+                            height={35}
+                            alt="Main Affix Icon"
+                            className="h-8.75 w-8.75"
+                        />
+                    </div>
+                    <span className="text-base text-yellow-400 font-semibold drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]">
+                        {relic?.mainAffix?.valueAffix + relic?.mainAffix?.detail?.unit}
+                    </span>
+                    <span className="bg-black/20 backdrop-blur-sm rounded px-1.5 py-0.5 text-xs border border-white/10">
+                        +{relic?.mainAffix?.level}
+                    </span>
+                </div>
+
+                <div style={{ opacity: 0.3, height: '78px', borderLeftWidth: '1px' }}></div>
+
+                <div className="grid w-[65%] m-2 grid-cols-2 gap-1">
+                    {relic?.subAffix?.map((subAffix, index) => {
+                        if (!subAffix) return null
+                        return (
+                            <div key={index} className="flex flex-col">
+                                <div className="relative flex flex-row items-center bg-black/20 backdrop-blur-sm rounded-md p-1 border border-white/5 min-w-0">
+                                    {subAffix?.detail?.icon ? (
+                                        <NextImage
+                                            src={`${process.env.CDN_URL}/${subAffix?.detail?.icon}` || ""}
+                                            unoptimized
+                                            crossOrigin="anonymous"
+                                            width={32}
+                                            height={32}
+                                            alt="Sub Affix Icon"
+                                            className="h-6 w-6 shrink-0"
+                                        />
+                                    ) : (
+                                        <div className="h-6 w-6 bg-black/60 rounded flex items-center justify-center border border-white/10 shrink-0">
+                                            <span className="text-xs text-white/50">?</span>
+                                        </div>
+                                    )}
+                                    <span className="text-xs text-gray-200 ml-0.5 truncate flex-1 min-w-0">
+                                        +{subAffix?.valueAffix + subAffix?.detail?.unit}
+                                    </span>
+                                    {
+                                        (avatarInfo?.Relics?.SubAffixPropertyList.findIndex((item) => item === subAffix?.property) !== -1) && (
+                                            <span className="ml-1 bg-yellow-600/20 text-yellow-400 rounded-full px-1 py-0.5 text-[10px] font-semibold border border-yellow-600/30 shrink-0 leading-none">
+                                                {subAffix?.count}
+                                            </span>
+                                        )}
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}

src/components/skillsInfo/index.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { traceButtonsInfo, traceLink } from "@/constant/traceConstant";
+import useUserDataStore from "@/stores/userDataStore";
+import useLocaleStore from "@/stores/localeStore";
+import Image from "next/image";
+import { replaceByParam, getLocaleName } from '@/helper';
+import { mappingStats } from "@/constant/constant";
+import { toast } from "react-toastify";
+import useCurrentDataStore from "@/stores/currentDataStore";
+import { StatusAdd } from '@/types/avatarDetail';
+import { SkillDescription } from "./skillDescription";
+
+export default function SkillsInfo() {
+    const transI18n = useTranslations("DataPage")
+    const { theme } = useLocaleStore()
+    const { avatarSelected, skillIDSelected, setSkillIDSelected } = useCurrentDataStore()
+    const { avatars, setAvatar } = useUserDataStore()
+    const { locale } = useLocaleStore()
+    const traceButtons = useMemo(() => {
+        if (!avatarSelected) return
+        return traceButtonsInfo[avatarSelected.BaseType]
+    }, [avatarSelected])
+
+    const avatarData = useMemo(() => {
+        if (!avatarSelected) return
+        return avatars[avatarSelected?.ID?.toString()]
+    }, [avatarSelected, avatars])
+
+    const avatarSkillTree = useMemo(() => {
+        if (!avatarSelected || !avatars[avatarSelected?.ID?.toString()]) return {}
+        if (avatars[avatarSelected?.ID?.toString()].enhanced) {
+            return avatarSelected?.Enhanced?.[avatars[avatarSelected?.ID?.toString()].enhanced.toString()].SkillTrees || {}
+        }
+        return avatarSelected?.SkillTrees || {}
+    }, [avatarSelected, avatars])
+
+    const skillInfo = useMemo(() => {
+        if (!avatarSelected || !skillIDSelected) return
+        return avatarSkillTree?.[skillIDSelected || ""]?.["1"]
+    }, [avatarSelected, avatarSkillTree, skillIDSelected])
+
+    const getTraceBuffDisplay = (status: StatusAdd) => {
+        const dataDisplay = mappingStats[status.PropertyType]
+        if (!dataDisplay) return ""
+        if (dataDisplay.unit === "%") {
+            return `${(status.Value * 100).toFixed(1)}${dataDisplay.unit}`
+        }
+        if (dataDisplay.name === "SPD") {
+            return `${status.Value.toFixed(1)}${dataDisplay.unit}`
+        }
+        return `${status.Value.toFixed(0)}${dataDisplay.unit}`
+    }
+
+    const dataLevelUpSkill = useMemo(() => {
+        const skillIds: number[] = skillInfo?.LevelUpSkillID || []
+        if (!avatarSelected || !avatarData) return undefined
+        let result = Object.values(avatarSelected.Skills || {})?.filter((skill) => skillIds.includes(skill.ID))
+        if (avatarData.enhanced) {
+            result = Object.values(avatarSelected?.Enhanced?.[avatarData.enhanced.toString()]?.Skills || {})?.filter((skill) => skillIds.includes(skill.ID))
+        }
+
+        if (result && result.length > 0) {
+            return {
+                isServant: false,
+                data: result,
+                servantData: null,
+            }
+        }
+        const resultServant = Object.values(avatarSelected?.Memosprite?.Skills || {})
+            ?.filter((skill) => skillIds.includes(skill.ID))
+
+        if (resultServant && resultServant.length > 0) {
+            return {
+                isServant: true,
+                data: resultServant,
+                servantData: avatarSelected.Memosprite,
+            }
+        }
+        return undefined
+    }, [skillInfo?.LevelUpSkillID, avatarSelected, avatarData])
+
+
+    const handlerMaxAll = () => {
+        if (!avatarData || !avatarSkillTree) {
+            toast.error(transI18n("maxAllFailed"))
+            return
+        }
+        const newData = structuredClone(avatarData)
+        newData.data.skills = Object.values(avatarSkillTree).reduce((acc, dataPointEntry) => {
+            const firstEntry = Object.values(dataPointEntry)[0];
+            if (firstEntry) {
+                acc[firstEntry.PointID] = firstEntry.MaxLevel;
+            }
+            return acc;
+        }, {} as Record<string, number>)
+        toast.success(transI18n("maxAllSuccess"))
+        setAvatar(newData)
+    }
+
+    const handlerChangeStatusTrace = (status: boolean) => {
+        if (!avatarData || !skillInfo) return
+        const newData = structuredClone(avatarData)
+        newData.data.skills[skillInfo?.PointID] = status ? 1 : 0
+
+        if (!status && traceLink?.[avatarSelected?.BaseType || ""]?.[skillIDSelected || ""]) {
+            traceLink[avatarSelected?.BaseType || ""][skillIDSelected || ""].forEach((pointId) => {
+                if (avatarSkillTree?.[pointId]?.["1"]) {
+                    newData.data.skills[avatarSkillTree?.[pointId]?.["1"].PointID] = 0
+                }
+            })
+        }
+        setAvatar(newData)
+    }
+
+    return (
+        <div className="w-full">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                <div className="rounded-xl p-6 shadow-lg">
+                    <h2 className="flex items-center gap-2 text-2xl font-bold mb-6 text-base-content">
+                        <div className="w-2 h-6 bg-linear-to-b from-primary to-primary/50 rounded-full"></div>
+                        {transI18n("skills")}
+                    </h2>
+                    <div className="flex flex-col items-center">
+                        <button className="btn btn-success" onClick={handlerMaxAll}>{transI18n("maxAll")}</button>
+                        {traceButtons && avatarSelected && (
+                            <div className="grid col-span-4 relative w-full aspect-square">
+                                <Image
+                                    unoptimized
+                                    crossOrigin="anonymous"
+                                    src={`/skilltree/${avatarSelected?.BaseType?.toUpperCase()}.webp`}
+                                    alt=""
+                                    width={312}
+                                    priority={true}
+                                    height={312}
+                                    style={{
+                                        filter: (theme === "winter" || theme === "cupcake") ? "invert(1)" : "none"
+                                    }}
+                                    className={`w-full h-full object-cover rounded-xl`}
+                                />
+                                {traceButtons.map((btn, index) => {
+                                    if (!avatarSelected?.SkillTrees?.[btn.id]) {
+                                        return null
+                                    }
+                                    return (
+                                        <div
+                                            key={`${btn.id} + ${index}`}
+                                            id={btn.id}
+                                            className={`
+                                            absolute rounded-full border border-black 
+                                            bg-no-repeat bg-contain 
+                                            cursor-pointer transition-all duration-200 ease-in-out 
+                                            shadow-[0_0_5px_white] flex justify-center items-center 
+                                            hover:scale-110z-10
+                                            ${btn.size === "small" ? "w-[6vw] h-[6vw] md:w-[2vw] md:h-[2vw] bg-white" : ""}
+                                            ${btn.size === "medium" ? "w-[8vw] h-[8vw] md:w-[3vw] md:h-[3vw] bg-white" : ""}
+                                            ${btn.size === "big" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-black" : ""}
+                                            ${btn.size === "special" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-white" : ""}
+                                            ${btn.size === "memory" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-black" : ""}
+                                            ${btn.size === "elation" ? "w-[9vw] h-[9vw] md:w-[3.5vw] md:h-[3.5vw] bg-black" : ""}
+                                            ${skillIDSelected === btn.id ? "border-4 border-primary" : ""}
+                                            ${!avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID]
+                                                    ? "opacity-50 cursor-not-allowed"
+                                                    : ""}
+                                        `}
+                                            onClick={() => {
+                                                setSkillIDSelected(btn.id === skillIDSelected ? null : btn.id)
+                                            }}
+                                            style={{
+                                                left: btn.left,
+                                                top: btn.top,
+                                                transform: "translate(-50%, -50%)",
+                                            }}
+                                        >
+                                            <Image
+                                                src={`${process.env.CDN_URL}/${avatarSelected?.SkillTrees?.[btn.id]?.["1"]?.Icon}`}
+                                                alt={btn.id.replaceAll("Point", "")}
+                                                priority={true}
+                                                unoptimized
+                                                crossOrigin="anonymous"
+                                                width={124}
+                                                height={124}
+                                                style={{
+                                                    objectFit: "contain",
+                                                    padding: "2px",
+                                                    filter: (btn.size !== "big" && btn.size !== "memory" && btn.size !== "elation") ? "brightness(0%)" : ""
+                                                }}
+                                            />
+                                            {(btn.size === "big" || btn.size === "memory" || btn.size === "elation") && (
+                                                <p className="
+                                                z-12 text-sm sm:text-xs lg:text-sm xl:text-base 2xl:text-2xl
+                                                font-bold text-center rounded-full absolute
+                                                translate-y-full mt-1
+                                                bg-base-300 px-1
+                                                left-1/2 transform -translate-x-1/2
+                                                ">
+                                                    {`${avatarData?.data.skills?.[avatarSkillTree?.[btn.id]?.["1"]?.PointID] || 0}/${avatarSkillTree?.[btn.id]?.["1"]?.MaxLevel}`}
+                                                </p>
+
+                                            )}
+                                            {btn.size === "special" && (
+                                                <div
+                                                    style={{
+                                                        position: "absolute",
+                                                        inset: 0,
+                                                        backgroundColor: "#4a6eff",
+                                                        mixBlendMode: "screen",
+                                                        opacity: 0.8,
+                                                        borderRadius: "50%"
+                                                    }}
+                                                />
+                                            )}
+                                            {btn.size === "memory" && (
+                                                <div
+                                                    style={{
+                                                        position: "absolute",
+                                                        inset: 0,
+                                                        backgroundColor: "#9a89ff",
+                                                        mixBlendMode: "screen",
+                                                        opacity: 0.4,
+                                                        borderRadius: "50%"
+                                                    }}
+                                                />
+                                            )}
+                                            {btn.size === "elation" && (
+                                                <div
+                                                    style={{
+                                                        position: "absolute",
+                                                        inset: 0,
+                                                        backgroundColor: "#ff8c00",
+                                                        mixBlendMode: "screen",
+                                                        opacity: 0.5,
+                                                        borderRadius: "50%"
+                                                    }}
+                                                />
+                                            )}
+                                            {btn.size === "big" && (
+                                                <div
+                                                    style={{
+                                                        position: "absolute",
+                                                        inset: 0,
+                                                        backgroundColor: "#f5e4b0",
+                                                        mixBlendMode: "screen",
+                                                        opacity: 0.3,
+                                                        borderRadius: "50%"
+                                                    }}
+                                                />
+                                            )}
+                                        </div>
+
+
+                                    )
+                                })}
+                            </div>
+                        )}
+
+                        {!traceButtons && avatarSelected && (
+                            <div className="flex flex-col relative w-full aspect-square">
+
+                            </div>
+                        )}
+                    </div>
+
+                </div>
+                <div className="bg-base-100 rounded-xl p-6 shadow-lg">
+                    <h2 className="flex items-center gap-2 text-2xl font-bold mb-6 text-base-content">
+                        <div className="w-2 h-6 bg-linear-to-b from-primary to-primary/50 rounded-full"></div>
+                        {transI18n("details")}
+                    </h2>
+                    {skillIDSelected && avatarSelected?.SkillTrees && avatarData && (
+                        <div>
+                            {skillInfo?.MaxLevel && skillInfo?.MaxLevel > 1 ? (
+                                <div>
+                                    <div className="font-bold text-success">{transI18n("level")}</div>
+                                    <div className="w-full max-w-xs">
+                                        <input type="range"
+                                            min={1}
+                                            max={skillInfo?.MaxLevel || 1}
+                                            value={avatarData?.data.skills?.[skillInfo?.PointID] || 1}
+                                            onChange={(e) => {
+                                                const newData = structuredClone(avatarData)
+                                                newData.data.skills[skillInfo?.PointID] = parseInt(e.target.value)
+                                                setAvatar(newData)
+                                            }}
+                                            className="range range-success"
+                                            step="1" />
+                                        <div className="flex justify-between px-2.5 mt-2 text-xs">
+                                            {Array.from({ length: skillInfo?.MaxLevel }, (_, index) => index + 1).map((index) => (
+                                                <span key={index}>{index}</span>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            ) : skillInfo?.MaxLevel && skillInfo?.MaxLevel === 1 && traceButtons?.find((btn) => btn.id === skillIDSelected)?.size !== "big" ? (
+                                <div className="flex items-center gap-2">
+                                    <input
+                                        type="checkbox"
+                                        checked={avatarData?.data.skills?.[skillInfo?.PointID] === 1}
+                                        className="toggle toggle-success"
+                                        onChange={(e) => {
+                                            if (traceButtons?.find((btn) => btn.id === skillIDSelected)?.size === "special") {
+                                                if (e.target.checked) {
+                                                    const newData = structuredClone(avatarData)
+                                                    newData.data.skills[skillInfo?.PointID] = 1
+                                                    setAvatar(newData)
+                                                    return
+                                                }
+                                                const newData = structuredClone(avatarData)
+                                                delete newData.data.skills[skillInfo?.PointID]
+                                                setAvatar(newData)
+                                                return
+                                            }
+                                            handlerChangeStatusTrace(e.target.checked)
+                                        }}
+                                    />
+                                    <div className="font-bold text-success">
+                                        {avatarData?.data.skills?.[skillInfo?.PointID] === 1 ? transI18n("active") : transI18n("inactive")}
+                                    </div>
+                                </div>
+                            ) : (
+                                null
+                            )}
+
+                            {((skillInfo?.PointName && skillInfo?.PointDesc) ||
+                                (skillInfo?.PointName && skillInfo?.StatusAddList.length > 0))
+                                && (
+                                    <div className="text-xl font-bold flex items-center gap-2 mt-2">
+                                        {getLocaleName(locale, skillInfo.PointName)}
+                                        {skillInfo.StatusAddList.length > 0 && (
+                                            <div>
+                                                {skillInfo.StatusAddList.map((status, index) => (
+                                                    <div key={index}>
+                                                        <div className="text-xl font-bold">{getTraceBuffDisplay(status)}</div>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+
+                            {skillInfo?.PointDesc && (
+                                <div
+                                    dangerouslySetInnerHTML={{
+                                        __html: replaceByParam(
+                                            getLocaleName(locale, skillInfo?.PointDesc) || "",
+                                            skillInfo?.Param || []
+                                        )
+                                    }}
+                                />
+                            )}
+
+                            {skillInfo?.LevelUpSkillID
+                                && skillInfo?.LevelUpSkillID.length > 0
+                                && dataLevelUpSkill
+                                && (
+                                    <div className="mt-2 flex flex-col gap-2">
+
+                                        {dataLevelUpSkill?.data?.map((skill, index) => (
+                                            <div key={index}>
+
+                                                <div className="text-xl font-bold text-primary">
+                                                    {transI18n(dataLevelUpSkill.isServant ? `${skill?.AttackType ? "severaltalent" : "servantskill"}` : `${skill?.AttackType ? skill?.AttackType.toLowerCase() : "talent"}`)}
+                                                    {` (${transI18n(skill?.SkillEffect?.toLowerCase())})`}
+                                                </div>
+
+                                                <SkillDescription
+                                                    skill={skill}
+                                                    locale={locale}
+                                                    avatarData={avatarData}
+                                                    skillInfo={skillInfo}
+                                                />
+                                            </div>
+                                        ))}
+
+                                    </div>
+                                )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/skillsInfo/skillDescription.tsx

@@ -0,0 +1,41 @@
+import { getLocaleName, replaceByParam } from "@/helper";
+import { AvatarStore, SkillDetail, SkillTreePoint } from "@/types";
+import ExtraEffectList from "../extraInfo";
+
+export const SkillDescription = ({ skill, locale, avatarData, skillInfo }: {
+    skill: SkillDetail,
+    locale: string,
+    avatarData: AvatarStore,
+    skillInfo: SkillTreePoint
+}) => {
+    const levelKey = avatarData?.data.skills?.[skillInfo?.PointID]?.toString() || "";
+    const params = skill.Level[levelKey]?.Param || [];
+    const descHtml = getLocaleName(locale, skill.Desc) || getLocaleName(locale, skill.SimpleDesc);
+
+    const extraList = Object.values(skill.Extra).length > 0
+        ? skill.Extra
+        : skill?.SimpleExtra || {};
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="space-y-2 pb-2">
+                <div className="flex items-center gap-2">
+                    <div className="w-1 h-5 bg-primary/80 rounded-sm" />
+                    <div 
+                        className="text-lg font-bold tracking-wide text-foreground uppercase" 
+                        dangerouslySetInnerHTML={{ __html: replaceByParam(getLocaleName(locale, skill.Name), []) }} 
+                    />
+                </div>
+                
+                <div 
+                    className="text-[15px] leading-relaxed text-foreground/90 pl-3 border-l border-transparent"
+                    dangerouslySetInnerHTML={{ __html: replaceByParam(descHtml, params) }} 
+                />
+            </div>
+
+            {Object.keys(extraList).length > 0 && (
+                <ExtraEffectList extras={extraList} locale={locale} />
+            )}
+        </div>
+    );
+};

src/components/themeController/clientThemeWrapper.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { PropsWithChildren, useContext } from "react";
+import { ThemeContext } from "./themeContext";
+
+export function ClientThemeWrapper({ children }: PropsWithChildren) {
+    const { theme } = useContext(ThemeContext);
+    return <div data-theme={theme} className="h-full">{children}</div>;
+}

src/components/themeController/index.ts

@@ -0,0 +1,2 @@
+export * from "./clientThemeWrapper"
+export * from "./themeContext"

src/components/themeController/themeContext.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { createContext, PropsWithChildren, useEffect } from "react";
+import useLocaleStore from "@/stores/localeStore";
+
+interface ThemeContextType {
+    theme?: string;
+    changeTheme?: (nextTheme: string | null) => void;
+}
+export const ThemeContext = createContext<ThemeContextType>({});
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+
+    const { theme, setTheme } = useLocaleStore()
+
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const storedTheme = localStorage.getItem("theme");
+            if (storedTheme) setTheme(storedTheme);
+        }
+    }, [setTheme]);
+
+    const changeTheme = (nextTheme: string | null) => {
+        if (nextTheme) {
+            setTheme(nextTheme);
+            if (typeof window !== "undefined") {
+                localStorage.setItem("theme", nextTheme);
+            }
+        } else {
+            setTheme(theme === "winter" ? "night" : "winter");
+            if (typeof window !== "undefined") {
+                localStorage.setItem("theme", theme);
+            }
+        }
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, changeTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};

src/constant/constant.ts

@@ -0,0 +1,206 @@
+export const listCurrentLanguage = {
+    ja: "JP",
+    ko: "KR",
+    en: "EN",
+    vi: "VN",
+    zh: "CN"
+};
+
+export const listCurrentLanguageApi : Record<string, string> = {
+    ja: "jp",
+    ko: "kr",
+    en: "en",
+    vi: "vi",
+    zh: "cn"
+};
+
+export const mappingStats = <Record<string, {name: string, icon: string, unit: string, baseStat: string}> > {
+    "HPDelta": {
+        name:"HP",
+        icon:"spriteoutput/ui/avatar/icon/IconMaxHP.png",
+        unit: "",
+        baseStat: "HP"
+    },
+    "AttackDelta": {
+        name:"ATK",
+        icon:"spriteoutput/ui/avatar/icon/IconAttack.png",
+        unit: "",
+        baseStat: "ATK"
+    },
+    "HPAddedRatio": {
+        name:"HP",
+        icon:"spriteoutput/ui/avatar/icon/IconMaxHP.png",
+        unit: "%",
+        baseStat: "HP"
+    },
+    "AttackAddedRatio": {
+        name:"ATK",
+        icon:"spriteoutput/ui/avatar/icon/IconAttack.png",
+        unit: "%",
+        baseStat: "ATK"
+    },
+    "DefenceDelta": {
+        name:"DEF",
+        icon:"spriteoutput/ui/avatar/icon/IconDefence.png",
+        unit: "",
+        baseStat: "DEF"
+    },
+    "DefenceAddedRatio": {
+        name:"DEF",
+        icon:"spriteoutput/ui/avatar/icon/IconDefence.png",
+        unit: "%",
+        baseStat: "DEF"
+    },
+    "SpeedAddedRatio": {
+        name:"SPD",
+        icon:"spriteoutput/ui/avatar/icon/IconSpeed.png",
+        unit: "%",
+        baseStat: "SPD"
+    },
+    "BaseSpeed": {
+        name:"SPD",
+        icon:"spriteoutput/ui/avatar/icon/IconSpeed.png",
+        unit: "",
+        baseStat: "SPD"
+    },
+    "CriticalChanceBase": {
+        name:"CRIT Rate",
+        icon:"spriteoutput/ui/avatar/icon/IconCriticalChance.png",
+        unit: "%",
+        baseStat: "CRITRate"
+    },
+    "CriticalDamageBase": {
+        name:"CRIT DMG",
+        icon:"spriteoutput/ui/avatar/icon/IconCriticalDamage.png",
+        unit: "%",
+        baseStat: "CRITDmg"
+    },
+    "HealRatioBase": {
+        name:"Outgoing Healing Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconHealRatio.png",
+        unit: "%",
+        baseStat: "HealBoost"
+    },
+    "StatusProbabilityBase": {
+        name:"Effect Hit Rate",
+        icon:"spriteoutput/ui/avatar/icon/IconStatusProbability.png",
+        unit: "%",
+        baseStat: "EffectHitRate"
+    },
+    "StatusResistanceBase": {
+        name:"Effect RES",
+        icon:"spriteoutput/ui/avatar/icon/IconStatusResistance.png",
+        unit: "%",
+        baseStat: "EffectRES"
+    },
+    "BreakDamageAddedRatioBase": {
+        name:"Break Effect",
+        icon:"spriteoutput/ui/avatar/icon/IconBreakUp.png",
+        unit: "%",
+        baseStat: "BreakEffect"
+    },
+    "SpeedDelta": {
+        name:"SPD",
+        icon:"spriteoutput/ui/avatar/icon/IconSpeed.png",
+        unit: "",
+        baseStat: "SPD"
+    },
+    "PhysicalAddedRatio": {
+        name:"Physical DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconPhysicalAddedRatio.png",
+        unit: "%",
+        baseStat: "PhysicalAdd"
+    },
+    "FireAddedRatio": {
+        name:"Fire DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconFireAddedRatio.png",
+        unit: "%",
+        baseStat: "FireAdd"
+    },
+    "IceAddedRatio": {
+        name:"Ice DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconIceAddedRatio.png",
+        unit: "%",
+        baseStat: "IceAdd"
+    },
+    "ThunderAddedRatio": {
+        name:"Thunder DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconThunderAddedRatio.png",
+        unit: "%",
+        baseStat: "ThunderAdd"
+    },
+    "WindAddedRatio": {
+        name:"Wind DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconWindAddedRatio.png",
+        unit: "%",
+        baseStat: "WindAdd"
+    },
+    "QuantumAddedRatio": {
+        name:"Quantum DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconQuantumAddedRatio.png",
+        unit: "%",
+        baseStat: "QuantumAdd"
+    },
+    "ImaginaryAddedRatio": {
+        name:"Imaginary DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconImaginaryAddedRatio.png",
+        unit: "%",
+        baseStat: "ImaginaryAdd"
+    },
+    "ElationDamageAddedRatioBase": {
+        name:"Elation DMG Boost",
+        icon:"spriteoutput/ui/avatar/icon/IconJoy.png",
+        unit: "%",
+        baseStat: "ElationAdd"
+    },
+    "SPRatioBase": {
+        name:"Energy Regeneration Rate",
+        icon:"spriteoutput/ui/avatar/icon/IconEnergyRecovery.png",
+        unit: "%",
+        baseStat: "EnergyRate"
+    }
+}
+
+
+export const ratioStats = [
+    "HPAddedRatio",
+    "AttackAddedRatio",
+    "DefenceAddedRatio",
+    "SpeedAddedRatio",
+]
+
+export const mappingRelicSlot: Record<string, string> = {
+    "1": "HEAD",
+    "2": "HAND",
+    "3": "BODY",
+    "4": "FOOT",
+    "5": "NECK",
+    "6": "OBJECT",
+}
+
+export const themeColors: Record<string, { bg: string; bgHover: string; text: string; border: string }> = {
+  winter: {
+    bg: '#ffffff',
+    bgHover: '#f1f5f9',
+    text: '#3a4f6b',
+    border: '#cbd5e1'
+  },
+  night: {
+    bg: '#1d232a',
+    bgHover: '#2a323c',
+    text: '#cbcdd1',
+    border: '#3f3f46'
+  },
+  cupcake: {
+    bg: '#faf7f5',
+    bgHover: '#f3eae6',
+    text: '#281333',
+    border: '#e5d3cb'
+  },
+  coffee: {
+    bg: '#20161f',
+    bgHover: '#2a1d29',
+    text: '#c4a051',
+    border: '#3a2a36'
+  }
+}

src/helper/calcData.ts

@@ -0,0 +1,138 @@
+import { mappingStats, ratioStats } from "@/constant/constant"
+import { EliteData, HardLevelData, MainAffixData, MonsterDetail, SubAffixData} from "@/types"
+
+export function calcPromotion(level: number) {
+    if (level < 20) {
+        return 0
+    }
+    if (level < 30) {
+        return 1
+    }
+    if (level < 40) {
+        return 2
+    }
+    if (level < 50) {
+        return 3
+    }
+    if (level < 60) {
+        return 4
+    }
+    if (level < 70) {
+        return 5
+    }
+    return 6
+}
+
+
+export function calcRarity(rarity: string) {
+    if (rarity.includes("5")) {
+        return 5
+    }
+    if (rarity.includes("4")) {
+        return 4
+    }
+    if (rarity.includes("3")) {
+        return 3
+    }
+    return 1
+}
+
+export function calcMainAffixBonus(affix?: MainAffixData, level?: number) {
+    if (!affix || typeof level !== "number") return "0"
+    const value = affix.BaseValue + affix.LevelAdd * level;
+
+    if (mappingStats?.[affix.Property].unit === "%") {
+        return (value * 100).toFixed(1);
+    }
+    if (mappingStats?.[affix.Property].name === "SPD") {
+        return value.toFixed(1);
+    }
+
+    return value.toFixed(0);
+}
+
+export const calcAffixBonus = (affix?: SubAffixData, stepCount?: number, rollCount?: number) => {
+    if (!affix || typeof stepCount !== "number" || typeof rollCount !== "number") return "0"
+    if (mappingStats?.[affix.Property].unit === "%") {
+        return ((affix.BaseValue * rollCount + affix.StepValue * stepCount) * 100).toFixed(1);
+    }
+    if (mappingStats?.[affix.Property].name === "SPD") {
+        return (affix.BaseValue * rollCount + affix.StepValue * stepCount).toFixed(1);
+    }
+    return (affix.BaseValue * rollCount + affix.StepValue * stepCount).toFixed(0);
+}
+
+export const calcBaseStat = (baseStat: number, stepStat: number, roundFixed: number, level: number) => {
+    const promotionStat = baseStat + stepStat * (level-1);
+    return promotionStat.toFixed(roundFixed);
+}
+
+export const calcBaseStatRaw = (baseStat?: number, stepStat?: number, level?: number) => {
+    if (typeof baseStat !== "number" || typeof stepStat !== "number" || typeof level !== "number") return 0
+    return baseStat + stepStat * (level-1);
+}
+
+export const calcSubAffixBonusRaw = (affix?: SubAffixData, stepCount?: number, rollCount?: number, baseStat?: number) => {
+    if (!affix || typeof stepCount !== "number" || typeof rollCount !== "number" || typeof baseStat !== "number") return 0
+    if (ratioStats.includes(affix.Property)) {
+        return (affix.BaseValue * rollCount + affix.StepValue * stepCount) * baseStat;
+    }
+    return affix.BaseValue * rollCount + affix.StepValue * stepCount;
+}
+
+export const calcMainAffixBonusRaw = (affix?: MainAffixData, level?: number, baseStat?: number) => {
+    if (!affix || typeof level !== "number" || typeof baseStat !== "number") return 0
+    const value = affix.BaseValue + affix.LevelAdd * level;
+
+    if (ratioStats.includes(affix.Property)) {
+        return baseStat * value
+    }
+
+    return value
+}
+
+export const calcBonusStatRaw = (affix?: string, baseStat?: number, bonusValue?: number) => {
+    if (!affix || typeof baseStat !== "number" || typeof bonusValue !== "number") return 0
+    if (ratioStats.includes(affix)) {
+        return baseStat * bonusValue
+    }
+    return bonusValue
+}
+
+export const calcMonsterStats = (
+    monster: MonsterDetail, 
+    eliteGroup: number, 
+    hardLevelGroup: number, 
+    level: number,
+    hardLevelConfig: Record<string, Record<string, HardLevelData>>,
+    eliteConfig: Record<string, EliteData>
+) => {
+    let hardLevelRatio = {
+        AttackRatio: 1,
+        DefenceRatio:1,
+        HPRatio: 1,
+        SpeedRatio: 1,
+        StanceRatio: 1
+    } 
+    if (hardLevelConfig?.[hardLevelGroup.toString()]?.[level.toString()]) {
+        hardLevelRatio = hardLevelConfig?.[hardLevelGroup.toString()]?.[level.toString()]
+    }
+    let eliteRatio = {
+        AttackRatio: 1,
+        DefenceRatio:1,
+        HPRatio: 1,
+        SpeedRatio: 1,
+        StanceRatio: 1
+    } 
+    if (eliteConfig?.[eliteGroup.toString()]) {
+        eliteRatio = eliteConfig?.[eliteGroup.toString()]
+    }
+
+    return {
+        atk: monster.Base.AttackBase * monster.Modify.AttackModifyRatio * hardLevelRatio.AttackRatio * eliteRatio.AttackRatio,
+        def: monster.Base.DefenceBase * monster.Modify.DefenceModifyRatio * hardLevelRatio.DefenceRatio * eliteRatio.DefenceRatio,
+        hp: monster.Base.HPBase * monster.Modify.HPModifyRatio * hardLevelRatio.HPRatio * eliteRatio.HPRatio,
+        spd: monster.Base.SpeedBase * monster.Modify.SpeedModifyRatio * hardLevelRatio.SpeedRatio * eliteRatio.SpeedRatio,
+        stance: (monster.Base.StanceBase * monster.Modify.StanceModifyRatio * hardLevelRatio.StanceRatio * eliteRatio.StanceRatio) / 3,
+    }
+}

src/helper/connect.ts

@@ -0,0 +1,105 @@
+"use client"
+import { SendDataThroughProxy, SendDataToServer } from "@/lib/api/api"
+import useConnectStore from "@/stores/connectStore"
+import useUserDataStore from "@/stores/userDataStore"
+import { converterToFreeSRJson } from "./converterToFreeSRJson"
+import { psResponseSchema } from "@/zod"
+import useGlobalStore from "@/stores/globalStore"
+import { ActionResult, ExtraData, ProxyPayload, ProxyResponse, PSConnectType, PSResponse } from "@/types"
+
+
+const getUrlQuery = (connectionType: PSConnectType | string, serverUrl: string): string => {
+    if (connectionType === PSConnectType.FireflyGo) return "http://localhost:21000/sync"
+    if (connectionType === PSConnectType.RobinSR) return "http://localhost:21000/srtools"
+
+    if (!serverUrl.startsWith("http://") && !serverUrl.startsWith("https://")) {
+        return `http://${serverUrl}`
+    }
+    return serverUrl
+}
+
+const handleProxyRequest = async (payload: ProxyPayload): Promise<ActionResult> => {
+    const response = await SendDataThroughProxy({ 
+        data: { ...payload, method: "POST" } 
+    }) as ProxyResponse | Error
+    
+    if (response instanceof Error) {
+        return { success: false, message: response.message }
+    }
+    if (response.error) {
+        return { success: false, message: response.error }
+    }
+    
+    const parsed = psResponseSchema.safeParse(response.data)
+    if (!parsed.success) {
+        return { success: false, message: "Invalid response schema" }
+    }
+    
+    return { success: true, message: "" }
+}
+
+const handleDirectServerResponse = (
+    response: PSResponse | string, 
+    setIsConnectPS: (val: boolean) => void, 
+    onSuccess: (extraData?: ExtraData) => void
+): ActionResult => {
+    if (typeof response === "string") {
+        setIsConnectPS(false)
+        return { success: false, message: response }
+    } 
+    if (response.status !== 200) {
+        setIsConnectPS(false)
+        return { success: false, message: response.message }
+    }
+    
+    setIsConnectPS(true)
+    onSuccess(response?.extra_data)
+    return { success: true, message: "" }
+}
+
+
+export const connectToPS = async (): Promise<ActionResult> => {
+    const { connectionType, privateType, serverUrl, username, password } = useConnectStore.getState()
+    const { setExtraData, setIsConnectPS } = useGlobalStore.getState()
+
+    if (connectionType === "Other" && privateType === "Server") {
+        return handleProxyRequest({ username, password, serverUrl, data: undefined })
+    }
+
+    const urlQuery = getUrlQuery(connectionType, serverUrl)
+    const response = await SendDataToServer(username, password, urlQuery, undefined)
+
+    return handleDirectServerResponse(response, setIsConnectPS, (extraData) => {
+        setExtraData(extraData)
+    })
+}
+
+export const syncDataToPS = async (): Promise<ActionResult> => {
+    const { connectionType, privateType, serverUrl, username, password } = useConnectStore.getState()
+    const { extraData, setIsConnectPS, setExtraData, isEnableChangePath, isEnableLua } = useGlobalStore.getState()
+    const { avatars, battle_type, moc_config, pf_config, as_config, ce_config, peak_config } = useUserDataStore.getState()
+
+    const data = converterToFreeSRJson(avatars, battle_type, moc_config, pf_config, as_config, ce_config, peak_config)
+
+    if (connectionType === "Other" && privateType === "Server") {
+        return handleProxyRequest({ username, password, serverUrl, data })
+    }
+
+    const urlQuery = getUrlQuery(connectionType, serverUrl)
+    
+    const payloadExtra: PSResponse['extra_data'] = structuredClone(extraData)
+    if (payloadExtra) {
+        if (!isEnableChangePath) payloadExtra.multi_path = undefined
+        if (!isEnableLua) payloadExtra.lua = null
+    }
+
+    const response = await SendDataToServer(username, password, urlQuery, data, payloadExtra)
+
+    return handleDirectServerResponse(response, setIsConnectPS, (responseExtraData) => {
+        const newData = structuredClone(responseExtraData)
+        if (newData) {
+            newData.lua = extraData?.lua || null
+        }
+        setExtraData(newData)
+    })
+}

src/helper/convertData.ts

@@ -0,0 +1,15 @@
+export function convertToRoman(num: number): string {
+    const roman: [number, string][] = [
+      [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+      [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+      [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I']
+    ];
+    let result = '';
+    for (const [val, sym] of roman) {
+      while (num >= val) {
+        result += sym;
+        num -= val;
+      }
+    }
+    return result;
+  }

src/helper/converterToAvatarStore.ts

@@ -0,0 +1,101 @@
+import { AvatarEnkaDetail, AvatarProfileStore, AvatarStore, AvatarDetail, FreeSRJson, RelicStore } from "@/types";
+
+function safeNumber(val: string | number | null, fallback = 0): number {
+    if (!val) return fallback;
+    const num = Number(val);
+    return Number.isFinite(num) && num !== 0 ? num : fallback;
+}
+
+export function converterToAvatarStore(data: Record<string, AvatarDetail>): { [key: string]: AvatarStore } {
+    return Object.fromEntries(
+        Object.entries(data).map(([key, value]) => [
+            key,
+            {
+                owner_uid: 0,
+                avatar_id: Number(key),
+                data: {
+                    rank: 0,
+                    skills: Object.values(value.SkillTrees).reduce((acc, dataPointEntry) => {
+                        const firstEntry = Object.values(dataPointEntry)[0];
+                        if (firstEntry) {
+                            acc[firstEntry.PointID] = firstEntry.MaxLevel;
+                        }
+                        return acc;
+                    }, {} as Record<string, number>)
+                },
+                level: 80,
+                promotion: 6,
+                techniques: [],
+                sp_max: safeNumber(value.SPNeed, 100),
+                can_change_sp: safeNumber(value.SPNeed) !== 0,
+                sp_value: Math.ceil(safeNumber(value.SPNeed) / 2),
+                profileSelect: 0,
+                enhanced: "",
+                profileList: [{
+                    profile_name: "Default",
+                    lightcone: null,
+                    relics: {} as Record<string, RelicStore>
+                } as AvatarProfileStore]
+            }
+        ])
+    ) as { [key: string]: AvatarStore }
+}
+
+export function converterOneEnkaDataToAvatarStore(data: AvatarEnkaDetail, count: number): AvatarProfileStore | null  {
+    if (!data.equipment && (!data.relicList || data.relicList.length === 0)) return null
+    const profile: AvatarProfileStore = {
+        profile_name: `Enka Profile ${count}`,
+        lightcone:  (data.equipment && data.equipment.tid) ? {
+            level: data.equipment?.level ?? 0,
+            item_id: data.equipment?.tid ?? 0,
+            rank: data.equipment?.rank ?? 0,
+            promotion: data.equipment?.promotion ?? 0,
+        } : null,
+        relics: Object.fromEntries(data.relicList.map((relic) => [relic.tid.toString()[relic.tid.toString().length - 1], {
+            level: relic.level ?? 0,
+            relic_id: relic.tid,
+            relic_set_id: parseInt(relic.tid.toString().slice(1, -1), 10),
+            main_affix_id: relic.mainAffixId,
+            sub_affixes: relic.subAffixList.map((subAffix) => ({
+                sub_affix_id: subAffix.affixId,
+                count: subAffix.cnt,
+                step: subAffix.step ?? 0
+            }))
+        }]))
+    }
+    return profile
+}
+
+
+export function converterOneFreeSRDataToAvatarStore(data: FreeSRJson, count: number , avatar_id: number): AvatarProfileStore | null  {
+    const lightcone = data.lightcones.find((lightcone) => lightcone.equip_avatar === avatar_id)
+    const relics = data.relics.filter((relic) => relic.equip_avatar === avatar_id)
+    if (!lightcone && (!relics || relics.length === 0)) return null
+    const relicsMap = {} as Record<string, RelicStore>
+
+    relics.forEach((relic) => {
+        relicsMap[relic.relic_id.toString()[relic.relic_id.toString().length - 1]] = {
+            level: relic.level,
+            relic_id: relic.relic_id,
+            relic_set_id: relic.relic_set_id,
+            main_affix_id: relic.main_affix_id,
+            sub_affixes: relic.sub_affixes.map((subAffix) => ({
+                sub_affix_id: subAffix.sub_affix_id,
+                count: subAffix.count,
+                step: subAffix.step ?? 0
+            }))
+        }
+    })
+
+    const profile: AvatarProfileStore = {
+        profile_name: `FreeSR Profile ${count}`,
+        lightcone: (lightcone && lightcone.item_id) ? {
+            level: lightcone?.level ?? 0,
+            item_id: lightcone?.item_id ?? 0,
+            rank: lightcone?.rank ?? 0,
+            promotion: lightcone?.promotion ?? 0,
+        } : null,
+        relics: relicsMap
+    }
+    return profile
+}

src/helper/converterToFreeSRJson.ts

@@ -0,0 +1,149 @@
+
+import useConnectStore from "@/stores/connectStore";
+import useDetailDataStore from "@/stores/detailDataStore";
+import { ASConfigStore, AvatarJson, AvatarStore, BattleConfigJson, CEConfigStore, FreeSRJson, LightconeJson, MOCConfigStore, PEAKConfigStore, PFConfigStore, PSConnectType, RelicJson } from "@/types";
+
+
+export function converterToFreeSRJson(
+    avatars: Record<string, AvatarStore>,
+    battle_type: string,
+    moc_config: MOCConfigStore,
+    pf_config: PFConfigStore,
+    as_config: ASConfigStore,
+    ce_config: CEConfigStore,
+    peak_config: PEAKConfigStore,
+): FreeSRJson {
+    const { skillConfig } = useDetailDataStore.getState()
+    const { connectionType } = useConnectStore.getState()
+    const lightcones: LightconeJson[] = []
+    const relics: RelicJson[] = []
+    let battleJson: BattleConfigJson
+    if (battle_type === "MOC") {
+        battleJson = {
+            battle_type: battle_type,
+            blessings: moc_config.blessings,
+            custom_stats: [],
+            cycle_count: moc_config.cycle_count,
+            stage_id: moc_config.stage_id,
+            path_resonance_id: 0,
+            monsters: moc_config.monsters,
+        }
+    } else if (battle_type === "PF") {
+        battleJson = {
+            battle_type: battle_type,
+            blessings: pf_config.blessings,
+            custom_stats: [],
+            cycle_count: pf_config.cycle_count,
+            stage_id: pf_config.stage_id,
+            path_resonance_id: 0,
+            monsters: pf_config.monsters,
+        }
+    } else if (battle_type === "AS") {
+        battleJson = {
+            battle_type: battle_type,
+            blessings: as_config.blessings,
+            custom_stats: [],
+            cycle_count: as_config.cycle_count,
+            stage_id: as_config.stage_id,
+            path_resonance_id: 0,
+            monsters: as_config.monsters,
+        }
+    } else if (battle_type === "CE") {
+        battleJson = {
+            battle_type: connectionType === PSConnectType.FireflyGo ? battle_type : "DEFAULT",
+            blessings: ce_config.blessings,
+            custom_stats: [],
+            cycle_count: ce_config.cycle_count,
+            stage_id: ce_config.stage_id,
+            path_resonance_id: 0,
+            monsters: ce_config.monsters,
+        }
+    } else if (battle_type === "PEAK") {
+        battleJson = {
+            battle_type: connectionType === PSConnectType.FireflyGo ? battle_type : "DEFAULT",
+            blessings: peak_config.blessings,
+            custom_stats: [],
+            cycle_count: peak_config.cycle_count,
+            stage_id: peak_config.stage_id,
+            path_resonance_id: 0,
+            monsters: peak_config.monsters,
+        }
+    } else {
+        battleJson = {
+            battle_type: battle_type,
+            blessings: [],
+            custom_stats: [],
+            cycle_count: 0,
+            stage_id: 0,
+            path_resonance_id: 0,
+            monsters: [],
+        }
+    }
+
+    const avatarsJson: { [key: string]: AvatarJson } = {}
+    let internalUidLightcone = 0
+    let internalUidRelic = 0
+
+    Object.entries(avatars).forEach(([avatarId, avatar]) => {
+        const skillsByAnchorType: Record<string, number> = {}
+        for (const [skillId, level] of Object.entries(avatar?.data?.skills || {})) {
+            if (skillConfig?.[skillId]) {
+                skillsByAnchorType[skillConfig[skillId].IndexSlot] = level > skillConfig[skillId].MaxLevel ? skillConfig[skillId].MaxLevel : level
+            }
+        }
+        avatarsJson[avatarId] = {
+            owner_uid: Number(avatar.owner_uid || 0),
+            avatar_id: Number(avatar.avatar_id || 0),
+            data: {
+                rank: Number(avatar.data.rank || 0),
+                skills: avatar.data.skills,
+                skills_by_anchor_type: Object.keys(skillsByAnchorType).length > 0 ? skillsByAnchorType : undefined,
+            },
+            level: Number(avatar.level || 0),
+            promotion: Number(avatar.promotion || 0),
+            techniques: avatar.techniques,
+            sp_value: Number(avatar.sp_value || 0),
+            sp_max: Number(avatar.sp_max || 0),
+        }
+        const currentProfile = avatar.profileList[avatar.profileSelect]
+        if (currentProfile.lightcone && currentProfile.lightcone.item_id !== 0) {
+            const newLightcone: LightconeJson = {
+                level: Number(currentProfile.lightcone.level || 0),
+                item_id: Number(currentProfile.lightcone.item_id || 0),
+                rank: Number(currentProfile.lightcone.rank || 0),
+                promotion: Number(currentProfile.lightcone.promotion || 0),
+                internal_uid: internalUidLightcone,
+                equip_avatar: Number(avatar.avatar_id || 0),
+            }
+            internalUidLightcone++
+            lightcones.push(newLightcone)
+        }
+
+        if (currentProfile.relics) {
+            ["1", "2", "3", "4", "5", "6"].forEach(slot => {
+                const relic = currentProfile.relics[slot]
+                if (relic && relic.relic_id !== 0) {
+                    const newRelic: RelicJson = {
+                        level: Number(relic.level || 0),
+                        relic_id: Number(relic.relic_id || 0),
+                        relic_set_id: Number(relic.relic_set_id || 0),
+                        main_affix_id: Number(relic.main_affix_id || 0),
+                        sub_affixes: relic.sub_affixes,
+                        internal_uid: internalUidRelic,
+                        equip_avatar: Number(avatar.avatar_id || 0),
+                    }
+                    internalUidRelic++
+                    relics.push(newRelic)
+                }
+            })
+        }
+
+    })
+
+    return {
+        lightcones,
+        relics,
+        avatars: avatarsJson,
+        battle_config: battleJson,
+    }
+}

src/helper/getName.ts

@@ -0,0 +1,62 @@
+import { listCurrentLanguage } from "@/constant/constant";
+import { AvatarDetail } from "@/types";
+import { useTranslations } from "next-intl"
+
+type TFunc = ReturnType<typeof useTranslations>
+function cleanText(text: string): string {
+  if (!text) return ""
+  return text.replace(/<unbreak>(.*?)<\/unbreak>/g, "$1")
+}
+
+export function getNameChar(
+  locale: string,
+  t: TFunc,
+  data: AvatarDetail | undefined
+): string {
+  if (!data) return "";
+
+  if (!Object.prototype.hasOwnProperty.call(listCurrentLanguage, locale)) {
+    return "";
+  }
+
+  const langKey = listCurrentLanguage[locale as keyof typeof listCurrentLanguage].toLowerCase();
+
+  let text = data.Name[langKey] ?? "";
+
+  if (!text) {
+    text = data.Name["en"] ?? "";
+  }
+
+  if (data.ID > 8000) {
+    text = `${t("trailblazer")} • ${t(data?.BaseType?.toLowerCase() ?? "")}`;
+  }
+
+  return cleanText(text)
+}
+
+export function getLocaleName(locale: string, data: Record<string, string> | undefined | null): string {
+    if (!data) {
+        return ""
+    }
+    if (!Object.prototype.hasOwnProperty.call(listCurrentLanguage, locale)) {
+        return ""
+    }
+
+    const langKey = listCurrentLanguage[locale as keyof typeof listCurrentLanguage].toLowerCase();
+
+
+    let text = data[langKey] ?? "";
+
+    if (!text) {
+        text = data["en"] ?? "";
+    }
+    
+    return cleanText(text)
+}
+
+export function parseRuby(text: string): string {
+    const rubyRegex = /\{RUBY_B#(.*?)\}(.*?)\{RUBY_E#\}/gs;
+    return text.replace(rubyRegex, (_match, furigana, kanji) => {
+        return `<ruby>${kanji}<rt>${furigana}</rt></ruby>`;
+    });
+}

src/helper/getSkillTree.ts

@@ -0,0 +1,23 @@
+import { AvatarDetail } from "@/types";
+
+export function getSkillTree(avatarSelected: AvatarDetail | null, enhanced: string) {
+    if (!avatarSelected) return null;
+    if (enhanced != "" && !!avatarSelected?.Enhanced?.[enhanced]?.SkillTrees) {
+        return Object.values(avatarSelected?.Enhanced?.[enhanced]?.SkillTrees).reduce((acc, dataPointEntry) => {
+            const firstEntry = Object.values(dataPointEntry)[0];
+            if (firstEntry) {
+                acc[firstEntry.PointID] = firstEntry.MaxLevel;
+            }
+            return acc;
+        }, {} as Record<string, number>)
+    }
+
+    return Object.values(avatarSelected?.SkillTrees).reduce((acc, dataPointEntry) => {
+        const firstEntry = Object.values(dataPointEntry)[0];
+        if (firstEntry) {
+            acc[firstEntry.PointID] = firstEntry.MaxLevel;
+        }
+        return acc;
+    }, {} as Record<string, number>);
+}
+

src/helper/index.ts

@@ -0,0 +1,8 @@
+export *  from "./getName"
+export * from "./replaceByParam"
+export * from "./converterToAvatarStore"
+export * from "./calcData"
+export * from "./random"
+export * from "./json"
+export * from "./convertData"
+export * from "./connect"

src/helper/json.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function downloadJson(fileName: string, data: any) {
+  const json = JSON.stringify(data, null, 2)
+  const blob = new Blob([json], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${fileName}.json`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(url)
+}

src/helper/random.ts

@@ -0,0 +1,27 @@
+export function randomPartition(sum: number, parts: number): number[] {
+    const raw = Array.from({ length: parts }, () => Math.random());
+    const total = raw.reduce((a, b) => a + b, 0);
+    const result = raw.map(r => Math.floor((r / total) * (sum - parts)) + 1);
+    let diff = sum - result.reduce((a, b) => a + b, 0);
+    while (diff !== 0) {
+        for (let i = 0; i < result.length && diff !== 0; i++) {
+            if (diff > 0) {
+                result[i]++;
+                diff--;
+            } else if (result[i] > 1) {
+                result[i]--;
+                diff++;
+            }
+        }
+    }
+
+    return result;
+}
+
+export function randomStep(x: number): number {
+    let total = 0;
+    for (let i = 0; i < x; i++) {
+        total += Math.floor(Math.random() * 3);
+    }
+    return total;
+}

src/helper/replaceByParam.ts

@@ -0,0 +1,38 @@
+const formatValue = (value: number, format: string, floatDigits?: string, hasPercent?: boolean): string => {
+    if (format.startsWith('f')) {
+        const digits = parseInt(floatDigits || "1", 10);
+        const num = hasPercent ? value * 100 : value;
+        return `${num.toFixed(digits)}${hasPercent ? "%" : ""}`;
+    }
+
+    if (format === 'i') {
+        const num = hasPercent ? value * 100 : value;
+        return `${Math.round(num)}${hasPercent ? "%" : ""}`;
+    }
+
+    return String(value);
+};
+
+export function replaceByParam(desc: string, params: number[]): string {
+
+    const PARAM_REGEX = /#(\d+)\[(f(\d+)|i)\](%)?/g;
+
+    const processor = (_match: string, index: string, format: string, digits?: string, percent?: string): string => {
+        const i = parseInt(index, 10) - 1;
+        const val = params[i];
+        return val !== undefined ? formatValue(val, format, digits, !!percent) : "";
+    };
+
+    let result = desc.replace(/<color=(#[0-9a-fA-F]{8})>(.*?)<\/color>/g, (_, color, inner) => {
+        const processedInner = inner.replace(PARAM_REGEX, processor);
+        return `<span style="color: ${color}">${processedInner}</span>`;
+    });
+
+    result = result.replace(/<unbreak>(.*?)<\/unbreak>/g, (_, inner) => {
+        return inner.replace(PARAM_REGEX, processor);
+    });
+
+    result = result.replace(PARAM_REGEX, processor);
+
+    return result.split("\\n").join("<br/>");
+}

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useChangeTheme";

src/hooks/useChangeTheme.ts

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { ThemeContext } from "@/components/themeController";
+
+export const useChangeTheme = () => useContext(ThemeContext);

src/lib/api/api.ts

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ASGroupDetail, ChangelogItemType, AvatarDetail, FreeSRJson, LightConeDetail, MOCGroupDetail, MonsterDetail, PeakGroupDetail, PFGroupDetail, PSResponse, RelicSetDetail } from "@/types";
+import axios from 'axios';
+import { psResponseSchema } from "@/zod";
+import { ExtraData, Metadata } from "@/types";
+
+export async function getMetadataApi(): Promise<Metadata> {
+    try {
+        const res = await axios.get<Metadata>(`/api/data/metadata`);
+        return res.data as Metadata;
+    } catch (error: unknown) {
+        console.error('Failed to fetch metadata:', error);
+        return {
+            BaseType: {},
+            DamageType: {},
+            MainAffix: {},
+            SubAffix: {},
+            SkillConfig: {},
+            Stage: {},
+            HardLevelConfig: {},
+            EliteConfig: {}
+        };
+    }
+}
+
+export async function getAvatarListApi(): Promise<Record<string, AvatarDetail>> {
+    try {
+        const res = await axios.get<Record<string, AvatarDetail>>(`/api/data/avatar`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch Avatars:', error);
+        return {};
+    }
+}
+
+export async function getLightconeListApi(): Promise<Record<string, LightConeDetail>> {
+    try {
+        const res = await axios.get<Record<string, LightConeDetail>>(`/api/data/lightcone`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch lightcones:', error);
+        return {};
+    }
+}
+
+export async function getRelicSetListApi(): Promise<Record<string, RelicSetDetail>> {
+    try {
+        const res = await axios.get<Record<string, RelicSetDetail>>(`/api/data/relic`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch relics:', error);
+        return {};
+    }
+}
+
+export async function getMonsterListApi(): Promise<Record<string, MonsterDetail>> {
+    try {
+        const res = await axios.get<Record<string, MonsterDetail>>(`/api/data/monster`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch monster:', error);
+        return {};
+    }
+}
+
+export async function getASEventListApi(): Promise<Record<string, ASGroupDetail>> {
+    try {
+        const res = await axios.get<Record<string, ASGroupDetail>>(`/api/data/as`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch AS:', error);
+        return {};
+    }
+}
+
+export async function getPFEventListApi(): Promise<Record<string, PFGroupDetail>> {
+    try {
+        const res = await axios.get<Record<string, PFGroupDetail>>(`/api/data/pf`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch PF:', error);
+        return {};
+    }
+}
+
+export async function getMOCEventListApi(): Promise<Record<string, MOCGroupDetail>> {
+    try {
+        const res = await axios.get<Record<string, MOCGroupDetail>>(`/api/data/moc`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch MOC:', error);
+        return {};
+    }
+}
+
+export async function getPeakEventListApi(): Promise<Record<string, PeakGroupDetail>> {
+    try {
+        const res = await axios.get<Record<string, PeakGroupDetail>>(`/api/data/peak`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch peak:', error);
+        return {};
+    }
+}
+
+export async function getChangelog(): Promise<ChangelogItemType[]> {
+    try {
+        const res = await axios.get<ChangelogItemType[]>(`/api/data/changelog`);
+        return res.data;
+    } catch (error) {
+        console.error('Failed to fetch monster:', error);
+        return [];
+    }
+}
+
+export async function SendDataToServer(
+    username: string,
+    password: string,
+    serverUrl: string,
+    data?: FreeSRJson,
+    extraData?: ExtraData
+): Promise<PSResponse | string> {
+    try {
+        const response = await axios.post(`${serverUrl}`, { username, password, data, extra_data: extraData })
+        const parsed = psResponseSchema.safeParse(response.data)
+        if (!parsed.success) {
+            return "Invalid response schema";
+        }
+        return parsed.data;
+    } catch (error: any) {
+        return error?.message || "Unknown error";
+    }
+}
+
+export async function SendDataThroughProxy({ data }: { data: any }) {
+    try {
+        const response = await axios.post(`/api/proxy`, { ...data })
+        return response.data;
+    } catch (error: any) {
+        return error;
+    }
+}

src/lib/api/index.ts

@@ -0,0 +1 @@
+export * from "./api";

src/lib/cache/cache.ts

@@ -0,0 +1,38 @@
+import { readFileSync, readdirSync } from "fs"
+import path from "path"
+
+type CacheItem = {
+  buf: Uint8Array
+  type: "json" | "br"
+}
+
+const cache = new Map<string, CacheItem>()
+
+const dir = path.join(process.cwd(), "data")
+
+for (const f of readdirSync(dir)) {
+  const file = path.join(dir, f)
+
+  if (f.endsWith(".json.br")) {
+    const name = f.replace(".json.br", "")
+    const buf = new Uint8Array(readFileSync(file))
+    cache.set(name, {
+      buf,
+      type: "br"
+    })
+  }
+
+  if (f.endsWith(".json")) {
+    const name = f.replace(".json", "")
+    const buf = new Uint8Array(readFileSync(file))
+
+    cache.set(name, {
+      buf,
+      type: "json"
+    })
+  }
+}
+
+export function getDataCache(name: string) {
+  return cache.get(name)
+}

src/lib/cache/index.ts

@@ -0,0 +1 @@
+export * from "./cache"

src/lib/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from "./useFetchMetaData";
+export * from "./useFetchAvatarData";
+export * from "./useFetchLightconeData";
+export * from "./useFetchRelicData";
+export * from "./useFetchMonsterData";
+export * from "./useFetchPFData";
+export * from "./useFetchMOCData";
+export * from "./useFetchASData";
+export * from "./useFetchPEAKData";
+export * from "./useFetchChangelog";

src/lib/hooks/useFetchASData.ts

@@ -0,0 +1,26 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getASEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useDetailDataStore from '@/stores/detailDataStore'
+
+export const useFetchASGroupData = () => {
+    const { setMapAS } = useDetailDataStore()
+    
+    const query = useQuery({
+        queryKey: ['ASGroupData'],
+        queryFn: getASEventListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data) {
+            setMapAS(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load ASGroup data")
+        }
+    }, [query.data, query.error, setMapAS])
+    
+    return query
+}

src/lib/hooks/useFetchAvatarData.ts

@@ -0,0 +1,43 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getAvatarListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useDetailDataStore from '@/stores/detailDataStore'
+import useCurrentDataStore from '@/stores/currentDataStore'
+import useUserDataStore from '@/stores/userDataStore'
+import { converterToAvatarStore } from '@/helper'
+
+export const useFetchAvatarData = () => {
+  const { setMapAvatar, mapAvatar } = useDetailDataStore()
+  const { setAvatar, avatars } = useUserDataStore()
+  const { avatarSelected, setAvatarSelected } = useCurrentDataStore()
+
+  const query = useQuery({
+    queryKey: ['AvatarData'],
+    queryFn: getAvatarListApi,
+    staleTime: 1000 * 60 * 5,
+  })
+    useEffect(() => {
+        const listAvatarId = Object.keys(avatars)
+        const listAvatarNotExist = Object.entries(mapAvatar).filter(([avatarId]) => !listAvatarId.includes(avatarId))
+        const avatarStore = converterToAvatarStore(Object.fromEntries(listAvatarNotExist))
+        if (Object.keys(avatarStore).length === 0) return
+        for (const avatar of Object.values(avatarStore)) {
+            setAvatar(avatar)
+        }
+    }, [mapAvatar])
+
+  useEffect(() => {
+    if (query.data) {
+        setMapAvatar(query.data)
+        if (!avatarSelected) {
+            setAvatarSelected(Object.values(query.data)[0])
+        }
+    }
+    if (query.error) toast.error("Failed to load Avatar data")
+  }, [query.data, query.error, setMapAvatar, avatarSelected, setAvatarSelected])
+
+  return query
+}

src/lib/hooks/useFetchChangelog.ts

@@ -0,0 +1,32 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getChangelog } from '@/lib/api'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useModelStore from '@/stores/modelStore'
+import useLocaleStore from '@/stores/localeStore'
+
+export const useFetchChangelog = () => {
+    const { currentVersion, setChangelog, setCurrentVersion } = useLocaleStore()
+    const { setIsChangelog } = useModelStore()
+    const query = useQuery({
+        queryKey: ['changelog'],
+        queryFn: getChangelog,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setChangelog(query.data)
+            if (query.data?.[0] && query.data[0].version != currentVersion) {
+                setIsChangelog(true)
+                setCurrentVersion(query.data[0].version)
+            }
+        } else if (query.error) {
+            toast.error("Failed to load changelog data")
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query.data, query.error, setChangelog, setCurrentVersion, setIsChangelog])
+
+    return query
+}

src/lib/hooks/useFetchLightconeData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getLightconeListApi } from '@/lib/api';
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useDetailDataStore from '@/stores/detailDataStore';
+
+export const useFetchLightconeData = () => {
+    const { setMapLightCone } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['lightconeData'],
+        queryFn: getLightconeListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapLightCone(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load lightcone data")
+        }
+    }, [query.data, query.error, setMapLightCone])
+
+    return query
+}

src/lib/hooks/useFetchMOCData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getMOCEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useDetailDataStore from '@/stores/detailDataStore'
+import { toast } from 'react-toastify'
+
+export const useFetchMOCGroupData = () => {
+    const { setMapMoc } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['MOCGroupData'],
+        queryFn: getMOCEventListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapMoc(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load MOCGroup data")
+        }
+    }, [query.data, query.error, setMapMoc])
+
+    return query
+}

src/lib/hooks/useFetchMetaData.ts

@@ -0,0 +1,33 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import { getMetadataApi } from '@/lib/api'
+import useCurrentDataStore from '@/stores/currentDataStore'
+import useDetailDataStore from '@/stores/detailDataStore'
+
+export const useFetchConfigData = () => {
+    const { setMetaData } = useDetailDataStore()
+    const { setSettingData } = useCurrentDataStore()
+
+    const query = useQuery({
+        queryKey: ['initialConfigData'],
+        queryFn: async () => {
+            const metaData = await getMetadataApi()
+            return { metaData }
+        },
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setSettingData(query.data.metaData)
+            setMetaData(query.data.metaData)
+        }
+        else if (query.error) {
+            toast.error("Failed to load initial config data")
+        }
+    }, [query.data, query.error, setMetaData, setSettingData])
+
+    return query
+}

src/lib/hooks/useFetchMonsterData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getMonsterListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useDetailDataStore from '@/stores/detailDataStore'
+import { toast } from 'react-toastify'
+
+export const useFetchMonsterData = () => {
+    const { setMapMonster } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['MonsterData'],
+        queryFn: getMonsterListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapMonster(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load Monster data")
+        }
+    }, [query.data, query.error, setMapMonster])
+
+    return query
+}

src/lib/hooks/useFetchPEAKData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getPeakEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useDetailDataStore from '@/stores/detailDataStore'
+import { toast } from 'react-toastify'
+
+export const useFetchPeakGroupData = () => {
+    const { setMapPeak } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['PeakGroupData'],
+        queryFn: getPeakEventListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapPeak(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load PeakGroup data")
+        }
+    }, [query.data, query.error, setMapPeak])
+    
+    return query
+}

src/lib/hooks/useFetchPFData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getPFEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useDetailDataStore from '@/stores/detailDataStore'
+import { toast } from 'react-toastify'
+
+export const useFetchPFGroupData = () => {
+    const { setMapPF } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['PFGroupData'],
+        queryFn: getPFEventListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapPF(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load PFGroup data")
+        }
+    }, [query.data, query.error, setMapPF])
+    
+    return query
+}

src/lib/hooks/useFetchRelicData.ts

@@ -0,0 +1,25 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getRelicSetListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useDetailDataStore from '@/stores/detailDataStore'
+import { toast } from 'react-toastify'
+
+export const useFetchRelicSetData = () => {
+    const { setMapRelicSet } = useDetailDataStore()
+    const query = useQuery({
+        queryKey: ['RelicSetData'],
+        queryFn: getRelicSetListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (query.data && !query.error) {
+            setMapRelicSet(query.data)
+        } else if (query.error) {
+            toast.error("Failed to load RelicSet data")
+        }
+    }, [query.data, query.error, setMapRelicSet])
+    
+    return query
+}

src/stores/connectStore.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+
+interface ConnectState {
+    connectionType: string;
+    privateType: string;
+    serverUrl: string;
+    username: string;
+    password: string;
+    setConnectionType: (newConnectionType: string) => void;
+    setPrivateType: (newPrivateType: string) => void;
+    setServerUrl: (newServerUrl: string) => void;
+    setUsername: (newUsername: string) => void;
+    setPassword: (newPassword: string) => void;
+}
+
+const useConnectStore = create<ConnectState>()(
+    persist(
+        (set) => ({
+            connectionType: "FireflyGo",
+            privateType: "Local",
+            serverUrl: "http://localhost:21000",
+            username: "",
+            password: "",
+            setConnectionType: (newConnectionType: string) => set({ connectionType: newConnectionType }),
+            setPrivateType: (newPrivateType: string) => set({ privateType: newPrivateType }),
+            setServerUrl: (newServerUrl: string) => set({ serverUrl: newServerUrl }),
+            setUsername: (newUsername: string) => set({ username: newUsername }),
+            setPassword: (newPassword: string) => set({ password: newPassword }),
+        }),
+        {
+            name: 'connect-storage',
+            storage: createJSONStorage(() => localStorage),
+        }
+    )
+);
+
+export default useConnectStore;

src/stores/copyProfile.ts

@@ -0,0 +1,41 @@
+import { AvatarDetail, AvatarProfileCardType, BaseTypeData, DamageTypeData } from '@/types';
+import { create } from 'zustand'
+
+interface CopyProfileState {
+    selectedProfiles: AvatarProfileCardType[];
+    avatarCopySelected: AvatarDetail | null;
+    listElement: Record<string, boolean>;
+    listPath: Record<string, boolean>;
+    listRank: Record<string, boolean>;
+    setListElement: (newListElement: Record<string, boolean>) => void;
+    setListPath: (newListPath: Record<string, boolean>) => void;
+    setListRank: (newListRank: Record<string, boolean>) => void;
+    setSelectedProfiles: (newListAvatar: AvatarProfileCardType[]) => void;
+    setAvatarCopySelected: (newAvatarSelected: AvatarDetail | null) => void;
+    setResetData: (baseType: Record<string, BaseTypeData>, damageType: Record<string, DamageTypeData>) => void;
+}
+
+const useCopyProfileStore = create<CopyProfileState>((set) => ({
+    selectedProfiles: [],
+    avatarCopySelected: null,
+    listElement: {},
+    listPath: {},
+    listRank: { "4": false, "5": false },
+    listCopyAvatar: [],
+    listRawCopyAvatar: [],
+    
+    setListElement: (newListElement: Record<string, boolean>) => set({ listElement: newListElement }),
+    setListPath: (newListPath: Record<string, boolean>) => set({ listPath: newListPath }),
+    setListRank: (newListRank: Record<string, boolean>) => set({ listRank: newListRank }),
+    setAvatarCopySelected: (newAvatarSelected: AvatarDetail | null) => set({ avatarCopySelected: newAvatarSelected }),
+    setSelectedProfiles: (newListAvatar: AvatarProfileCardType[]) => set({ selectedProfiles: newListAvatar }),
+    setResetData: (baseType: Record<string, BaseTypeData>, damageType: Record<string, DamageTypeData>) => {
+        set({ 
+            listElement: Object.fromEntries(Object.keys(damageType).map(key => [key, false])) as Record<string, boolean>,
+            listPath: Object.fromEntries(Object.keys(baseType).map(key => [key, false])) as Record<string, boolean>,
+            listRank: { "4": false, "5": false }
+        })
+    }
+}));
+
+export default useCopyProfileStore;

src/stores/currentDataStore.ts

@@ -0,0 +1,58 @@
+import { AvatarDetail, BaseTypeData, Metadata } from '@/types'
+import { create } from 'zustand'
+
+interface CurrentDataState {
+    avatarSelected: AvatarDetail | null;
+    skillIDSelected: string | null;
+    avatarSearch: string;
+    lightconeSearch: string;
+    mapAvatarElementActive: Record<string, boolean>;
+    mapAvatarPathActive: Record<string, boolean>;
+    mapLightconePathActive: Record<string, boolean>;
+    mapLightconeRankActive: Record<string, boolean>;
+    setSettingData: (newMetaData: Metadata) => void;
+    setAvatarSelected: (avatar: AvatarDetail | null) => void;
+    setSkillIDSelected: (skillID: string | null) => void;
+    setAvatarSearch: (avatarSearch: string) => void;
+    setLightconeSearch: (lightconeSearch: string) => void;
+    setMapAvatarElementActive: (mapAvatarElementActive: Record<string, boolean>) => void;
+    setMapAvatarPathActive: (mapAvatarPathActive: Record<string, boolean>) => void;
+    setMapLightconePathActive: (mapLightconePathActive: Record<string, boolean>) => void;
+    setMapLightconeRankActive: (mapLightconeRankActive: Record<string, boolean>) => void;
+    setResetDataLightcone: (avtarSeleted: AvatarDetail| null, baseType: Record<string, BaseTypeData>) => void;
+}
+
+const useCurrentDataStore = create<CurrentDataState>((set) => ({
+    avatarSelected: null,
+    skillIDSelected: null,
+    mapAvatarElementActive: {},
+    mapAvatarPathActive: {},
+    mapLightconePathActive: {},
+    mapLightconeRankActive: {"3": false, "4": false, "5": false },
+    avatarSearch: "",
+    lightconeSearch: "",
+    setSettingData: (newMetaData: Metadata) => set({ 
+        mapAvatarElementActive: Object.fromEntries(Object.keys(newMetaData.DamageType).map(key => [key, false])) as Record<string, boolean>,
+        mapAvatarPathActive: Object.fromEntries(Object.keys(newMetaData.BaseType).map(key => [key, false])) as Record<string, boolean>,
+        mapLightconePathActive: Object.fromEntries(Object.keys(newMetaData.BaseType).map(key => [key, false])) as Record<string, boolean>,
+    }),
+    setAvatarSearch: (avatarSearch: string) => set({ avatarSearch }),
+    setLightconeSearch: (lightconeSearch: string) => set({ lightconeSearch }),
+    setAvatarSelected: (avatar: AvatarDetail | null) => set({ avatarSelected: avatar }),
+    setSkillIDSelected: (skillID: string | null) => set({ skillIDSelected: skillID }),
+    setMapAvatarElementActive: (mapAvatarElementActive: Record<string, boolean>) => set({ mapAvatarElementActive }),
+    setMapAvatarPathActive: (mapAvatarPathActive: Record<string, boolean>) => set({ mapAvatarPathActive }),
+    setMapLightconePathActive: (mapLightconePathActive: Record<string, boolean>) => set({ mapLightconePathActive }),
+    setMapLightconeRankActive: (mapLightconeRankActive: Record<string, boolean>) => set({ mapLightconeRankActive }),
+    setResetDataLightcone: (avtarSeleted: AvatarDetail| null, baseType: Record<string, BaseTypeData>) => {
+        const newListPath: Record<string, boolean> = Object.fromEntries(Object.keys(baseType).map(key => [key, false]))
+        const newListRank: Record<string, boolean> = {"3": false, "4": false, "5": false }
+        if (avtarSeleted) {
+            newListPath[avtarSeleted.BaseType] = true
+        }
+        set({ mapLightconeRankActive: newListRank })
+        set({ mapLightconePathActive: newListPath })
+    }
+}))
+
+export default useCurrentDataStore;

src/stores/detailDataStore.ts

@@ -0,0 +1,69 @@
+import { ASGroupDetail, AvatarDetail, BaseTypeData, DamageTypeData, EliteData, HardLevelData, LightConeDetail, MainAffixData, Metadata, MOCGroupDetail, MonsterDetail, PeakGroupDetail, PFGroupDetail, RelicSetDetail, SkillMaxLevelData, StageData, SubAffixData } from '@/types'
+import { create } from 'zustand'
+
+interface DetailDataState {
+  mapMonster: Record<string, MonsterDetail>
+  mapRelicSet: Record<string, RelicSetDetail>
+  mapAvatar: Record<string, AvatarDetail>
+  mapLightCone: Record<string, LightConeDetail>
+  mapAS: Record<string, ASGroupDetail>
+  mapMoc: Record<string, MOCGroupDetail>
+  mapPF: Record<string, PFGroupDetail>
+  mapPeak: Record<string, PeakGroupDetail>
+  baseType: Record<string, BaseTypeData>;
+  damageType: Record<string, DamageTypeData>;
+  mainAffix: Record<string, Record<string, MainAffixData>>;
+  subAffix: Record<string, Record<string, SubAffixData>>;
+  skillConfig: Record<string, SkillMaxLevelData>;
+  stage: Record<string, StageData>;
+  hardLevelConfig: Record<string, Record<string, HardLevelData>>;
+  eliteConfig: Record<string, EliteData>;
+  setMetaData: (newMetaData: Metadata) => void;
+  setMapMonster: (newMonster: Record<string, MonsterDetail>) => void
+  setMapRelicSet: (newRelicSet: Record<string, RelicSetDetail>) => void
+  setMapAvatar: (newAvatar: Record<string, AvatarDetail>) => void
+  setMapLightCone: (newLightCone: Record<string, LightConeDetail>) => void
+  setMapAS: (newAS: Record<string, ASGroupDetail>) => void
+  setMapMoc: (newMoc: Record<string, MOCGroupDetail>) => void
+  setMapPF: (newPF: Record<string, PFGroupDetail>) => void
+  setMapPeak: (newPeak: Record<string, PeakGroupDetail>) => void
+}
+
+const useDetailDataStore = create<DetailDataState>((set) => ({
+  mapMonster: {},
+  mapRelicSet: {},
+  mapAvatar: {},
+  mapLightCone: {},
+  mapAS: {},
+  mapMoc: {},
+  mapPF: {},
+  mapPeak: {},
+  baseType: {},
+  damageType: {},
+  mainAffix: {},
+  subAffix: {},
+  skillConfig: {},
+  stage: {},
+  hardLevelConfig: {},
+  eliteConfig: {},
+  setMapMonster: (newMonster) => set({ mapMonster: newMonster }),
+  setMapRelicSet: (newRelicSet) => set({ mapRelicSet: newRelicSet }),
+  setMapAvatar: (newAvatar) => set({ mapAvatar: newAvatar }),
+  setMapLightCone: (newLightCone) => set({ mapLightCone: newLightCone }),
+  setMapAS: (newAS) => set({ mapAS: newAS }),
+  setMapMoc: (newMoc) => set({ mapMoc: newMoc }),
+  setMapPF: (newPF) => set({ mapPF: newPF }),
+  setMapPeak: (newPeak) => set({ mapPeak: newPeak }),
+  setMetaData: (newMetaData: Metadata) => set({ 
+    baseType: newMetaData.BaseType,
+    damageType: newMetaData.DamageType,
+    mainAffix: newMetaData.MainAffix,
+    subAffix: newMetaData.SubAffix,
+    skillConfig: newMetaData.SkillConfig,
+    stage: newMetaData.Stage,
+    hardLevelConfig: newMetaData.HardLevelConfig,
+    eliteConfig: newMetaData.EliteConfig,
+  }),
+}))
+
+export default useDetailDataStore

src/stores/enkaStore.ts

@@ -0,0 +1,22 @@
+import { CharacterInfoCardType, EnkaResponse } from '@/types';
+import { create } from 'zustand'
+
+interface EnkaState {
+    selectedCharacters: CharacterInfoCardType[];
+    enkaData: EnkaResponse | null;
+    uidInput: string;
+    setSelectedCharacters: (newListAvatar: CharacterInfoCardType[]) => void;
+    setEnkaData: (newEnkaData: EnkaResponse) => void;
+    setUidInput: (newUidInput: string) => void;
+}
+
+const useEnkaStore = create<EnkaState>((set) => ({
+    selectedCharacters: [],
+    enkaData: null,
+    uidInput: "",
+    setUidInput: (newUidInput: string) => set({ uidInput: newUidInput }),
+    setSelectedCharacters: (newListAvatar: CharacterInfoCardType[]) => set({ selectedCharacters: newListAvatar }),
+    setEnkaData: (newEnkaData: EnkaResponse) => set({ enkaData: newEnkaData }),
+}));
+
+export default useEnkaStore;

src/stores/freesrStore.ts

@@ -0,0 +1,18 @@
+import { CharacterInfoCardType, FreeSRJson } from '@/types';
+import { create } from 'zustand'
+
+interface FreeSRState {
+    selectedCharacters: CharacterInfoCardType[];
+    freeSRData: FreeSRJson | null;
+    setSelectedCharacters: (newListAvatar: CharacterInfoCardType[]) => void;
+    setFreeSRData: (newFreeSRData: FreeSRJson | null) => void;
+}
+
+const useFreeSRStore = create<FreeSRState>((set) => ({
+    selectedCharacters: [],
+    freeSRData: null,
+    setSelectedCharacters: (newListAvatar: CharacterInfoCardType[]) => set({ selectedCharacters: newListAvatar }),
+    setFreeSRData: (newFreeSRData: FreeSRJson | null) => set({ freeSRData: newFreeSRData }),
+}));
+
+export default useFreeSRStore;

src/stores/globalStore.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+import { ExtraData } from '@/types'
+
+interface GlobalState {
+    isConnectPS: boolean;
+    extraData?: ExtraData;
+    isEnableChangePath: boolean
+    isEnableLua: boolean
+    setIsEnableChangePath: (newIsEnableChangePath: boolean) => void;
+    setIsEnableLua: (newIsEnableLua: boolean) => void;
+    setExtraData: (newExtraData: ExtraData | undefined) => void;
+    setIsConnectPS: (newIsConnectPS: boolean) => void;
+}
+
+const useGlobalStore = create<GlobalState>((set) => ({
+    isConnectPS: false,
+    extraData: undefined,
+    isEnableChangePath: false,
+    isEnableLua: false,
+    setIsEnableChangePath: (newIsEnableChangePath: boolean) => set({ isEnableChangePath: newIsEnableChangePath }),
+    setIsEnableLua: (newIsEnableLua: boolean) => set({ isEnableLua: newIsEnableLua }),
+    setExtraData: (newExtraData: ExtraData | undefined) => set({ extraData: newExtraData }),
+    setIsConnectPS: (newIsConnectPS: boolean) => set({ isConnectPS: newIsConnectPS }),
+}));
+
+export default useGlobalStore;

src/stores/localeStore.ts

@@ -0,0 +1,36 @@
+import { ChangelogItemType } from '@/types';
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+
+interface LocaleState {
+    locale: string;
+    theme: string;
+    currentVersion: string
+    changelog: ChangelogItemType[]
+    setCurrentVersion: (currentVersion: string) => void;
+    setChangelog: (newChangelog: ChangelogItemType[]) => void;
+    setTheme: (newTheme: string) => void;
+    setLocale: (newLocale: string) => void;
+}
+
+const useLocaleStore = create<LocaleState>()(
+    persist(
+        (set) => ({
+            locale: "en",
+            theme: "night",
+            currentVersion: "",
+            changelog: [],
+            setCurrentVersion: (currentVersion: string) => set({ currentVersion }),
+            setChangelog: (newChangelog: ChangelogItemType[]) => set({ changelog: newChangelog }),
+            setTheme: (newTheme: string) => set({ theme: newTheme }),
+            setLocale: (newLocale: string) => set({ locale: newLocale }),
+        }),
+        {
+            name: 'locale-storage',
+            storage: createJSONStorage(() => localStorage),
+        }
+    )
+);
+
+export default useLocaleStore;

src/stores/modelStore.ts

@@ -0,0 +1,58 @@
+import { create } from 'zustand'
+
+
+interface ModelState {
+    isOpenLightcone: boolean;
+    isOpenRelic: boolean;
+    isOpenAvatar: boolean;
+    isOpenCreateProfile: boolean;
+    isOpenImport: boolean;
+    isOpenCopy: boolean;
+    isOpenMonster: boolean;
+    isOpenConnect: boolean;
+    isOpenAvatars: boolean;
+    isOpenQuickView: boolean;
+    isOpenExtra: boolean;
+    isChangelog: boolean;
+    setIsOpenExtra: (newIsOpenExtra: boolean) => void;
+    setIsOpenQuickView: (newIsOpenQuickView: boolean) => void;
+    setIsOpenAvatars: (newIsOpenAvatars: boolean) => void;
+    setIsOpenConnect: (newIsOpenConnect: boolean) => void;
+    setIsOpenMonster: (newIsOpenMonster: boolean) => void;
+    setIsOpenLightcone: (newIsOpenLightcone: boolean) => void;
+    setIsOpenRelic: (newIsOpenRelic: boolean) => void;
+    setIsOpenAvatar: (newIsOpenAvatar: boolean) => void;
+    setIsOpenCreateProfile: (newIsOpenCreateProfile: boolean) => void;
+    setIsOpenImport: (newIsOpenImport: boolean) => void;
+    setIsOpenCopy: (newIsOpenCopy: boolean) => void;
+    setIsChangelog: (newChangelog: boolean) => void;
+}
+
+const useModelStore = create<ModelState>((set) => ({
+    isOpenLightcone: false,
+    isOpenRelic: false,
+    isOpenAvatar: false,
+    isOpenCreateProfile: false,
+    isOpenImport: false,
+    isOpenCopy: false,
+    isOpenMonster: false,
+    isOpenConnect: false,
+    isOpenAvatars: false,
+    isOpenQuickView: false,
+    isOpenExtra: false,
+    isChangelog: false,
+    setIsOpenExtra: (newIsOpenExtra: boolean) => set({ isOpenExtra: newIsOpenExtra }),
+    setIsOpenQuickView: (newIsOpenQuickView: boolean) => set({ isOpenQuickView: newIsOpenQuickView }),
+    setIsOpenAvatars: (newIsOpenAvatars: boolean) => set({ isOpenAvatars: newIsOpenAvatars }),
+    setIsOpenConnect: (newIsOpenConnect: boolean) => set({ isOpenConnect: newIsOpenConnect }),
+    setIsOpenMonster: (newIsOpenMonster: boolean) => set({ isOpenMonster: newIsOpenMonster }),
+    setIsOpenLightcone: (newIsOpenLightcone: boolean) => set({ isOpenLightcone: newIsOpenLightcone }),
+    setIsOpenRelic: (newIsOpenRelic: boolean) => set({ isOpenRelic: newIsOpenRelic }),
+    setIsOpenAvatar: (newIsOpenAvatar: boolean) => set({ isOpenAvatar: newIsOpenAvatar }),
+    setIsOpenCreateProfile: (newIsOpenCreateProfile: boolean) => set({ isOpenCreateProfile: newIsOpenCreateProfile }),
+    setIsOpenImport: (newIsOpenImport: boolean) => set({ isOpenImport: newIsOpenImport }),
+    setIsOpenCopy: (newIsOpenCopy: boolean) => set({ isOpenCopy: newIsOpenCopy }),
+    setIsChangelog: (newChangelog: boolean) => set({ isChangelog: newChangelog }),
+}));
+
+export default useModelStore;

src/stores/relicMakerStore.ts

@@ -0,0 +1,213 @@
+import { create } from 'zustand'
+interface RelicMakerState {
+    selectedRelicSlot: string;
+    selectedMainStat: string;
+    selectedRelicSet: string;
+    selectedRelicLevel: number;
+    listSelectedSubStats: {
+        property: string,
+        affixId: string,
+        rollCount: number,
+        stepCount: number
+    }[];
+    preSelectedSubStats: Record<string, {
+        property: string,
+        affixId: string,
+        rollCount: number,
+        stepCount: number
+    }[]>;
+    setSelectedRelicSlot: (newSelectedRelicSlot: string) => void;
+    setSelectedRelicSet: (newSelectedRelicSet: string) => void;
+    setSelectedMainStat: (newSelectedMainStat: string) => void;
+    setSelectedRelicLevel: (newSelectedRelicLevel: number) => void;
+    setListSelectedSubStats: (newSubAffixes: { property: string, affixId: string, rollCount: number, stepCount: number }[]) => void;
+    resetHistory: (index: number | null) => void;
+    resetSubStat: () => void;
+    popHistory: (index: number) => void;
+    addHistory: (index: number, affix: { property: string, affixId: string, rollCount: number, stepCount: number }) => void;
+
+}
+
+const useRelicMakerStore = create<RelicMakerState>((set) => ({
+    selectedRelicSlot: "",
+    selectedMainStat: "",
+    selectedRelicSet: "",
+    selectedRelicLevel: 15,
+    listSelectedSubStats: [
+        {
+            property: "",
+            affixId: "",
+            rollCount: 0,
+            stepCount: 0
+        },
+        {
+            property: "",
+            affixId: "",
+            rollCount: 0,
+            stepCount: 0
+        },
+        {
+            property: "",
+            affixId: "",
+            rollCount: 0,
+            stepCount: 0
+        },
+        {
+            property: "",
+            affixId: "",
+            rollCount: 0,
+            stepCount: 0
+        },
+    ],
+    preSelectedSubStats: {
+        "0": [
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+        ],
+        "1": [
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+        ],
+        "2": [
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+        ],
+        "3": [
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+        ],
+    },
+    resetSubStat: () => set({
+        listSelectedSubStats: [
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+            {
+                property: "",
+                affixId: "",
+                rollCount: 0,
+                stepCount: 0
+            },
+        ],
+    }),
+    setSelectedRelicSlot: (newSelectedRelicSlot: string) => set({ selectedRelicSlot: newSelectedRelicSlot }),
+    setSelectedRelicSet: (newSelectedRelicSet: string) => set({ selectedRelicSet: newSelectedRelicSet }),
+    setSelectedMainStat: (newSelectedMainStat: string) => set({ selectedMainStat: newSelectedMainStat }),
+    setSelectedRelicLevel: (newSelectedRelicLevel: number) => set({ selectedRelicLevel: newSelectedRelicLevel }),
+    setListSelectedSubStats: (newSubAffixes) => set(() => ({
+        listSelectedSubStats: newSubAffixes.map(item => ({ ...item }))
+    })),
+    resetHistory: (index: number | null) => set((state) => {
+        if (index !== null) {
+            return {
+                preSelectedSubStats: {
+                    "0": [
+                        {
+                            property: "",
+                            affixId: "",
+                            rollCount: 0,
+                            stepCount: 0
+                        },
+                    ],
+                    "1": [
+                        {
+                            property: "",
+                            affixId: "",
+                            rollCount: 0,
+                            stepCount: 0
+                        },
+                    ],
+                    "2": [
+                        {
+                            property: "",
+                            affixId: "",
+                            rollCount: 0,
+                            stepCount: 0
+                        },
+                    ],
+                    "3": [
+                        {
+                            property: "",
+                            affixId: "",
+                            rollCount: 0,
+                            stepCount: 0
+                        },
+                    ],
+                }
+            }
+        } else if (index !== null) {
+            const newPreSelectedSubStats = { ...state.preSelectedSubStats };
+            newPreSelectedSubStats[index] = [
+                {
+                    property: "",
+                    affixId: "",
+                    rollCount: 0,
+                    stepCount: 0
+                },
+            ]
+            return {
+                preSelectedSubStats: newPreSelectedSubStats
+            }
+        }
+        return {}
+    }),
+    popHistory: (index: number) => set((state) => {
+        const newPreSelectedSubStats = structuredClone(state.preSelectedSubStats);
+        const copied = state.preSelectedSubStats[index].map(item => ({ ...item }));
+        copied.pop();
+        newPreSelectedSubStats[index] = copied;
+        return { preSelectedSubStats: newPreSelectedSubStats };
+    }),
+    addHistory: (index, affix) => set((state) => {
+        const newPreSelectedSubStats = structuredClone(state.preSelectedSubStats);
+
+        const currentList = state.preSelectedSubStats[index];
+        const copied = currentList ? currentList.map(item => ({ ...item })) : [
+            { property: "", affixId: "", rollCount: 0, stepCount: 0 },
+            { property: "", affixId: "", rollCount: 0, stepCount: 0 },
+            { property: "", affixId: "", rollCount: 0, stepCount: 0 },
+            { property: "", affixId: "", rollCount: 0, stepCount: 0 },
+        ];
+
+        if (copied) {
+            const newAffix = structuredClone(affix);
+            copied.push(newAffix);
+            newPreSelectedSubStats[index] = copied;
+            return { preSelectedSubStats: newPreSelectedSubStats };
+        }
+        return {}
+    }),
+}));
+
+export default useRelicMakerStore;

src/stores/userDataStore.ts

@@ -0,0 +1,92 @@
+import { ASConfigStore, AvatarStore, CEConfigStore, MOCConfigStore, PEAKConfigStore, PFConfigStore } from '@/types';
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+
+interface UserDataState {
+    avatars: { [key: string]: AvatarStore };
+    battle_type: string;
+    moc_config: MOCConfigStore;
+    pf_config: PFConfigStore;
+    as_config: ASConfigStore;
+    peak_config: PEAKConfigStore;
+    ce_config: CEConfigStore;
+    setAvatars: (newAvatars: { [key: string]: AvatarStore }) => void;
+    setAvatar: (newAvatar: AvatarStore) => void;
+    setBattleType: (newBattleType: string) => void;
+    setMocConfig: (newMocConfig: MOCConfigStore) => void;
+    setPfConfig: (newPfConfig: PFConfigStore) => void;
+    setAsConfig: (newAsConfig: ASConfigStore) => void;
+    setPeakConfig: (newPeakConfig: PEAKConfigStore) => void;
+    setCeConfig: (newCeConfig: CEConfigStore) => void;
+}
+
+const useUserDataStore = create<UserDataState>()(
+    persist(
+        (set) => ({
+            avatars: {},
+            battle_type: "",
+            moc_config: {
+                event_id: 0,
+                challenge_id: 0,
+                floor_side: "Upper",
+                use_turbulence_buff: true,
+                use_cycle_count: true,
+                blessings: [],
+                cycle_count: 0,
+                stage_id: 0,
+                monsters: [],
+            },
+            pf_config: {
+                event_id: 0,
+                challenge_id: 0,
+                buff_id: 0,
+                floor_side: "Upper",
+                blessings: [],
+                cycle_count: 0,
+                stage_id: 0,
+                monsters: [],
+            },
+            as_config: {
+                event_id: 0,
+                challenge_id: 0,
+                buff_id: 0,
+                floor_side: "Upper",
+                blessings: [],
+                cycle_count: 0,
+                stage_id: 0,
+                monsters: [],
+            },
+            ce_config: {
+                blessings: [],
+                cycle_count: 30,
+                stage_id: 0,
+                monsters: [],
+            },
+            peak_config: {
+                event_id: 0,
+                challenge_id: 0,
+                buff_id: 0,
+                boss_mode: "Normal",
+                blessings: [],
+                cycle_count: 0,
+                stage_id: 0,
+                monsters: [],
+            },
+            setAvatars: (newAvatars: { [key: string]: AvatarStore }) => set({ avatars: newAvatars }),
+            setAvatar: (newAvatar: AvatarStore) => set((state) => ({ avatars: { ...state.avatars, [newAvatar.avatar_id.toString()]: newAvatar } })),
+            setBattleType: (newBattleType: string) => set({ battle_type: newBattleType }),
+            setMocConfig: (newMocConfig: MOCConfigStore) => set({ moc_config: newMocConfig }),
+            setPfConfig: (newPfConfig: PFConfigStore) => set({ pf_config: newPfConfig }),
+            setAsConfig: (newAsConfig: ASConfigStore) => set({ as_config: newAsConfig }),
+            setPeakConfig: (newPeakConfig: PEAKConfigStore) => set({ peak_config: newPeakConfig }),
+            setCeConfig: (newCeConfig: CEConfigStore) => set({ ce_config: newCeConfig }),
+        }),
+        {
+            name: 'user-data-storage',
+            storage: createJSONStorage(() => localStorage),
+        }
+    )
+);
+
+export default useUserDataStore;

src/types/asDetail.ts

@@ -0,0 +1,116 @@
+import { ExtraEffect } from "./avatarDetail";
+import { InfiniteWave, MazeBuff } from "./pfDetail";
+
+export interface ASGroupDetail {
+    ID: number;
+    ChallengeGroupType: string;
+    Name: Record<string, string>;
+    BeginTime: string;
+    EndTime: string;
+    BuffList1: ASBuff[];
+    BuffList2: ASBuff[];
+    Level: ASLevel[];
+}
+
+export interface ASBuff {
+    ID: number;
+    Param: number[];
+    Icon: string;
+    Name: Record<string, string>;
+    Desc: Record<string, string>;
+    ExtraList?: ExtraEffect[];
+}
+
+export interface ASLevel {
+    Floor: number;
+    ID: number;
+    StageNum: number;
+    Name: Record<string, string>;
+    Target: ASTarget[];
+    DamageType1: string[];
+    DamageType2: string[];
+    MazeBuff: MazeBuff[];
+    TurnLimit: number;
+    EventList1: ASEvent[];
+    EventList2: ASEvent[];
+    Monster1: ASMonster;
+    Monster2: ASMonster;
+}
+
+export interface ASTarget {
+    ID: number;
+    Name: Record<string, string>;
+    Param: number[];
+}
+
+export interface ASEvent {
+    ID: number;
+    Name: Record<string, string>;
+    HardLevelGroup: number;
+    EliteGroup: number;
+    Level: number;
+    Release: boolean;
+    MonsterList: number[][];
+    Infinite: InfiniteWave[] | null;
+}
+
+export interface ASMonster {
+    ID: number;
+    Tag: ASTag[];
+    Phase: ASPhase[];
+    DifficultyGuide: ASDifficultyGuide[];
+    TextGuide: ASTextGuide[];
+}
+
+export interface ASTag {
+    ID: number;
+    Name: Record<string, string>;
+    BriefDescription: Record<string, string>;
+    Param: number[];
+    SkillID: number | null;
+    Effect: ASEffect[];
+}
+
+export interface ASEffect {
+    ID: number;
+    Desc: Record<string, string>;
+    Name: Record<string, string>;
+    Icon: string;
+    Param: number[];
+    EffectType: number;
+}
+
+export interface ASPhase {
+    ID: number;
+    Name: Record<string, string>;
+    Answer: Record<string, string>;
+    Description: Record<string, string>;
+    SkillList: ASSkillList[];
+}
+
+export interface ASSkillList {
+    ID: number;
+    SkillType: string;
+    Name: Record<string, string>;
+    TextList: ASTextList[];
+}
+
+export interface ASTextList {
+    ID: number;
+    Description: Record<string, string>;
+    Param: number[];
+    Effect: ASEffect[];
+}
+
+export interface ASDifficultyGuide {
+    ID: number;
+    Description: Record<string, string>;
+    Param: number[];
+    SkillID: number | null;
+}
+
+export interface ASTextGuide {
+    ID: number;
+    Description: Record<string, string>;
+    Param: number[];
+}

src/types/avatarDetail.ts

@@ -0,0 +1,227 @@
+
+export interface AvatarDetail {
+    ID: number;
+    BaseType: string;
+    DamageType: string;
+    Name: Record<string, string>;
+    Image: AvatarImage;
+    Release: boolean;
+    MaxPromotion: number;
+    MaxRank: number;
+    SPNeed: number | null;
+    Rarity: string;
+    BGDesc: Record<string, string>;
+    Lightcones: number[];
+    Stats: Record<string, StatLevel>;
+    Skins: Record<string, AvatarSkin>;
+    Ranks: Record<string, RankDetail>;
+    Skills: Record<string, SkillDetail>;
+    Memosprite: Memosprite | null;
+    SkillTrees: Record<string, Record<string, SkillTreePoint>>;
+    Relics: Relics;
+    Teams: AvatarTeams;
+    Enhanced: Record<string, EnhancedData> | null;
+    Unique: Record<string, GlobalBuff> | null;
+    MazeBuff: number[];
+}
+
+export interface AvatarImage {
+    DefaultAvatarHeadIconPath: string;
+    AvatarSideIconPath: string;
+    AvatarMiniIconPath: string;
+    AvatarGachaResultImgPath: string;
+    ActionAvatarHeadIconPath: string;
+    SideAvatarHeadIconPath: string;
+    WaitingAvatarHeadIconPath: string;
+    AvatarCutinImgPath: string;
+    AvatarCutinBgImgPath: string;
+    AvatarCutinFrontImgPath: string;
+    AvatarIconPath: string;
+}
+
+
+export interface StatLevel {
+    Promotion: number;
+    MaxLevel: number;
+    WorldLevelRequirement: number;
+    PlayerLevelRequirement: number;
+    AttackBase: number;
+    AttackAdd: number;
+    DefenceBase: number;
+    DefenceAdd: number;
+    HPBase: number;
+    HPAdd: number;
+    SpeedBase: number;
+    CriticalChance: number;
+    CriticalDamage: number;
+    BaseAggro: number;
+}
+
+export interface AvatarSkin {
+    ID: number;
+    Type: string;
+    PlayerCardID: number;
+    Name: Record<string, string>;
+    PlayerCardTitleText: Record<string, string>;
+    AvatarNameOnDropSkin: Record<string, string>;
+    AvatarSkinSynopsis: Record<string, string>;
+    Image: AvatarSkinImage;
+}
+
+export interface AvatarSkinImage {
+    AvatarCutinFrontImgPath: string;
+    DefaultAvatarHeadIconPath: string;
+    AdventureDefaultAvatarHeadIconPath: string;
+    WaitingAvatarHeadIconPath: string;
+    ActionAvatarHeadIconPath: string;
+    SideAvatarHeadIconPath: string;
+    AvatarSideIconPath: string;
+    AvatarCutinImgPath: string;
+    AvatarCutinBgImgPath: string;
+    AvatarMiniIconPath: string;
+    DressIconPath: string;
+}
+
+export interface RankDetail {
+    Rank: number;
+    Name: Record<string, string>;
+    Desc: Record<string, string>;
+    RankAbility: string[];
+    SkillAddLevelList: Record<string, number>;
+    Icon: string;
+    Image: string;
+    Param: number[];
+    Extra: Record<string, ExtraEffect>;
+}
+
+export interface ExtraEffect {
+    ID: number;
+    Desc: Record<string, string>;
+    Name: Record<string, string>;
+    Icon: string;
+    Param: number[];
+    EffectType: number;
+}
+
+export interface SkillDetail {
+    ID: number;
+    Name: Record<string, string>;
+    Tag: Record<string, string>;
+    TypeDesc: Record<string, string>;
+    MaxLevel: number;
+    Level: Record<string, SkillLevel>;
+    Icon: string;
+    Desc: Record<string, string>;
+    SimpleDesc: Record<string, string>;
+    RatedSkillTreeID: number[];
+    RatedRankID: number[];
+    Extra: Record<string, ExtraEffect>;
+    SimpleExtra: Record<string, ExtraEffect>;
+    SPBase: number | null;
+    StanceDamageDisplay: number;
+    SPMultipleRatio: number | null;
+    BPNeed: number | null;
+    BPAdd: number | null;
+    StanceDamageType: string | null;
+    AttackType: string | null;
+    SkillEffect: string;
+}
+
+export interface SkillLevel {
+    Level: number;
+    Param: number[];
+}
+
+export interface Memosprite {
+    ID: number;
+    Name: Record<string, string>;
+    Image: MemospriteImage;
+    Skills: Record<string, SkillDetail>;
+    HPBase?: number | null;
+    HPInherit?: number | null;
+    HPSkill?: number | null;
+    SpeedBase?: number | null;
+    SpeedInherit?: number | null;
+    SpeedSkill?: number | null;
+    Aggro?: number | null;
+}
+
+export interface MemospriteImage {
+    HeadIcon: string;
+    UnCreateHeadIconPath: string;
+    WaitingServantHeadIconPath: string;
+    ActionServantHeadIconPath: string;
+    ServantSideIconPath: string;
+    ServantMiniIconPath: string;
+}
+
+export interface SkillTreePoint {
+    PointID: number;
+    PointType: number;
+    AnchorType: string;
+    Level: number;
+    MaxLevel: number;
+    PrePoint: number[];
+    StatusAddList: StatusAdd[];
+    LevelUpSkillID: number[];
+    Icon: string;
+    PointName: Record<string, string>;
+    PointDesc: Record<string, string>;
+    Extra: Record<string, ExtraEffect>;
+    Param: number[];
+}
+
+
+export interface StatusAdd {
+    PropertyType: string;
+    Value: number;
+}
+
+export interface Relics {
+    Set4IDList: number[];
+    Set2IDList: number[];
+    PropertyList3: string[];
+    PropertyList4: string[];
+    PropertyList5: string[];
+    PropertyList6: string[];
+    PropertyList: RelicProperty[];
+    SubAffixPropertyList: string[];
+    ScoreRankList: number[];
+    LocalCriticalChance: { Value: number };
+}
+
+export interface RelicProperty {
+    RelicType: string;
+    PropertyType: string;
+}
+
+export interface AvatarTeams {
+    TeamID: number;
+    Position: number;
+    MemberList: number[];
+    BackupList1: number[];
+    BackupList2: number[];
+    BackupList3: number[];
+    BackupGroupList1: number[];
+    BackupGroupList2: number[];
+    BackupGroupList3: number[];
+}
+
+export interface EnhancedData {
+    EnhancedID: number;
+    SPNeed: number | null;
+    Ranks: Record<string, RankDetail>;
+    Skills: Record<string, SkillDetail>;
+    SkillTrees: Record<string, Record<string, SkillTreePoint>> | null;
+}
+
+export interface GlobalBuff {
+    ID: number;
+    AvatarID: number;
+    Name: Record<string, string>;
+    Tag: Record<string, string>;
+    Desc: Record<string, string>;
+    Param: number[];
+    Extra: Record<string, ExtraEffect>;
+    MazeBuffID: number | null;
+}

src/types/card.ts

@@ -0,0 +1,25 @@
+import { LightconeStore, RelicStore } from "./mics";
+
+export interface CharacterInfoCardType {
+    key: number;
+    avatar_id: number;
+    rank: number;
+    level: number;
+    lightcone: {
+        level: number;
+        rank: number;
+        item_id: number;
+    };
+    relics: {
+        level: number;
+        relic_id: number;
+        relic_set_id: number;
+    }[];
+}
+
+export interface AvatarProfileCardType {
+    key: number;
+    profile_name: string,
+    lightcone?: LightconeStore | null,
+    relics: Record<string, RelicStore>
+}

src/types/changelog.ts

@@ -0,0 +1,7 @@
+
+export interface ChangelogItemType {
+    version: string,
+    date: string,
+    type: string,
+    items: string[]
+}

src/types/enka.ts

@@ -0,0 +1,96 @@
+interface PrivacySettingInfo {
+    displayCollection: boolean
+    displayRecord: boolean
+    displayRecordTeam: boolean
+    displayOnlineStatus: boolean
+    displayDiary: boolean
+}
+
+interface RecordInfo {
+    achievementCount: number
+    bookCount: number
+    avatarCount: number
+    equipmentCount: number
+    musicCount: number
+    relicCount: number
+    challengeInfo: unknown;
+    maxRogueChallengeScore: number
+}
+
+
+interface SubAffix {
+    affixId: number
+    cnt: number
+    step?: number
+}
+
+interface FlatProp {
+    type: string
+    value: number
+}
+
+interface RelicFlat {
+    props: FlatProp[]
+    setName: string
+    setID: number
+}
+
+interface Relic {
+    mainAffixId: number
+    subAffixList: SubAffix[]
+    tid: number
+    type: number
+    level: number
+    _flat: RelicFlat
+}
+
+interface SkillTree {
+    pointId: number
+    level: number
+}
+
+interface EquipmentFlat {
+    props: FlatProp[]
+    name: string
+}
+
+interface Equipment {
+    rank: number
+    tid: number
+    promotion: number
+    level: number
+    _flat: EquipmentFlat
+}
+
+export interface AvatarEnkaDetail {
+    relicList: Relic[]
+    level: number
+    promotion: number
+    rank?: number
+    skillTreeList: SkillTree[]
+    equipment: Equipment
+    avatarId: number
+    _assist?: boolean
+}
+
+interface DetailInfo {
+    worldLevel: number
+    privacySettingInfo: PrivacySettingInfo
+    headIcon: number
+    signature: string
+    avatarDetailList: AvatarEnkaDetail[]
+    platform: string
+    recordInfo: RecordInfo
+    uid: number
+    level: number
+    nickname: string
+    isDisplayAvatar: boolean
+    friendCount: number
+    personalCardId: number
+}
+
+export interface EnkaResponse {
+    detailInfo: DetailInfo
+    ttl: number
+    uid: string
+}

src/types/extraData.ts

@@ -0,0 +1,27 @@
+export interface ExtraData {
+    theory_craft?: {
+        hp: Record<string, number[]>
+        cycle_count: number
+        mode: boolean
+        stage_id: number
+        custom_lineup?: string[]
+    }
+    setting?: {
+        censorship: boolean
+        cm: boolean
+        first_person: boolean
+        hide_ui: boolean
+    }
+    challenge?: {
+        skip_node: number
+        challenge_peak_group_id: number
+        challenge_peak_group_id_list: number[]
+    }
+    multi_path?: {
+        main: number
+        march_7: number
+        multi_path_main: number[]
+        multi_path_march_7: number[]
+    },
+    lua?: string | null
+}

src/types/filter.ts

@@ -0,0 +1,20 @@
+export interface FilterAvatarType {
+    name: string;
+    path: string[];
+    element: string[];
+    rarity: string[];
+    locale: string;
+}
+
+export interface FilterLightconeType {
+    path: string[];
+    rarity: string[];
+    locale: string;
+    name: string;
+}
+
+
+export interface FilterRelicType {
+    locale: string;
+    name: string;
+}

src/types/gloval.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.module.css';
+declare module '*.module.scss';

src/types/index.ts

@@ -0,0 +1,21 @@
+export * from "./avatarDetail"
+export * from "./srtools"
+export * from "./mics"
+export * from "./lightconeDetail"
+export * from "./relicDetail"
+export * from "./enka"
+export * from "./card"
+export * from "./pfDetail"
+export * from "./asDetail"
+export * from "./mocDetail"
+export * from "./peakDetail"
+export * from "./extraData"
+export * from "./showcase"
+export * from "./srtools"
+export * from "./changelog"
+export * from "./modelConfig"
+export * from "./metaData"
+export * from "./monsterDetail"
+export * from "./filter"
+export * from "./metaData"
+export * from "./psConnect"