Refactor TypeScript interfaces and types across multiple files for consistency and clarity

- Updated metadata interfaces in `metaData.ts` for improved readability.
- Refactored `mics.ts` types to enhance structure and maintainability.
- Added `Invasion` type to `mocDetail.ts` and `peakDetail.ts` for new functionality.
- Simplified modal configuration in `modelConfig.ts`.
- Cleaned up monster detail interfaces in `monsterDetail.ts`.
- Enhanced battle configuration types in `pfDetail.ts` to include `Invasion`.
- Updated JSON schemas in `srtools.zod.ts` to use `nullish` for optional fields.
- Introduced new skills-lock.json for skill management.
- Added global type declarations for CSS and SCSS modules in `global.d.ts`.

src/components/importBar/freesr.tsx

@@ -1,16 +1,17 @@
-"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";
+"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";
 import useDetailDataStore from "@/stores/detailDataStore";
+import { useShallow } from "zustand/react/shallow";
 import { z } from "zod";
 
 type FreeSRJsonInput = z.infer<typeof freeSrJsonSchema>;
@@ -36,55 +37,75 @@ const toCharacterInfoCard = (data: FreeSRJsonInput, character: FreeSRJsonInput["
         })),
     }
 }
-
-export default function FreeSRImport() {
-    const { avatars, setAvatar } = useUserDataStore();
-    const { mapAvatar } = useDetailDataStore();
-    const { setIsOpenImport } = useModelStore()
-    const [isLoading, setIsLoading] = useState(false)
+
+export default function FreeSRImport() {
+    const { avatars, setAvatar } = useUserDataStore(
+        useShallow((state) => ({
+            avatars: state.avatars,
+            setAvatar: state.setAvatar,
+        }))
+    );
+    const { mapAvatar } = useDetailDataStore(
+        useShallow((state) => ({
+            mapAvatar: state.mapAvatar,
+        }))
+    );
+    const { setIsOpenImport } = useModelStore(
+        useShallow((state) => ({
+            setIsOpenImport: state.setIsOpenImport,
+        }))
+    )
+    const [isLoading, setIsLoading] = useState(false)
     const [Error, setError] = useState("")
-    const { freeSRData, setFreeSRData, selectedCharacters, setSelectedCharacters } = useFreeSRStore()
+    const { freeSRData, setFreeSRData, selectedCharacters, setSelectedCharacters } = useFreeSRStore(
+        useShallow((state) => ({
+            freeSRData: state.freeSRData,
+            setFreeSRData: state.setFreeSRData,
+            selectedCharacters: state.selectedCharacters,
+            setSelectedCharacters: state.setSelectedCharacters,
+        }))
+    )
     const transI18n = useTranslations("DataPage")
     const parsedFreeSRData = freeSrJsonSchema.safeParse(freeSRData)
     const validFreeSRData = parsedFreeSRData.success ? parsedFreeSRData.data : null
-
-    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 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 = () => {
         const parsed = freeSrJsonSchema.safeParse(freeSRData)
         if (parsed.success) {
             setSelectedCharacters(Object.values(parsed.data.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => toCharacterInfoCard(parsed.data, character)));
         }
     };
-
-    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
-        }
-
+
+    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();
@@ -121,18 +142,18 @@ export default function FreeSRImport() {
             reader.readAsText(file);
         }
     };
-
-    const handleImport = () => {
-        if (selectedCharacters.length === 0) {
-            setError(transI18n("pleaseSelectAtLeastOneCharacter"));
-            return;
-        }
-        if (!freeSRData) {
-            setError(transI18n("noDataToImport"));
-            return;
-        }
-        setError("");
-
+
+    const handleImport = () => {
+        if (selectedCharacters.length === 0) {
+            setError(transI18n("pleaseSelectAtLeastOneCharacter"));
+            return;
+        }
+        if (!freeSRData) {
+            setError(transI18n("noDataToImport"));
+            return;
+        }
+        setError("");
+
         const parsed = freeSrJsonSchema.safeParse(freeSRData)
         if (!parsed.success) {
             setError(transI18n("fileMustBeAValidJsonFile"));
@@ -142,75 +163,88 @@ export default function FreeSRImport() {
         const listAvatars = { ...avatars }
         const filterData = Object.values(parsed.data.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(parsed.data, 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">
+            const currentAvatar = listAvatars[character.avatar_id]
+            if (currentAvatar && Object.keys(currentAvatar).length !== 0) {
+                const newProfileList = [...(currentAvatar.profileList || [])]
+                const newProfile = converterOneFreeSRDataToAvatarStore(parsed.data, newProfileList.length, character.avatar_id)
+                if (newProfile) {
+                    newProfileList.push(newProfile)
+                }
+                const newAvatar = {
+                    ...currentAvatar,
+                    level: character.level,
+                    promotion: character.promotion,
+                    data: {
+                        rank: character.data.rank ?? 0,
+                        skills: character.data.skills
+                    },
+                    profileList: newProfileList,
+                    profileSelect: newProfile ? newProfileList.length - 1 : currentAvatar.profileSelect,
+                }
+                setAvatar(newAvatar)
+            }
+        })
+        setIsOpenImport(false)
+        toast.success(transI18n("importFreeSRDataSuccess"))
+    }
+
+    return (
+        <div className="bg-base-100 p-4 sm:p-6 rounded-2xl">
+            <div className="max-w-7xl mx-auto space-y-6">
+                {/* Header */}
+                <div className="space-y-4">
+                    <h1 className="text-base-content text-xl sm:text-2xl font-bold">{transI18n("freeSRImport")}</h1>
+
+                    <div className="flex flex-wrap gap-4 items-center">
+                        <fieldset className="fieldset">
+                            <legend className="fieldset-legend text-xs font-semibold">{transI18n("pickAFile")}</legend>
+                            <input type="file" accept=".json" className="file-input file-input-sm file-input-bordered rounded-xl" onChange={handlerReadFile} />
+                            <label className="label text-[11px] text-base-content/60">{transI18n("onlySupportFreeSRJsonFile")}</label>
+                        </fieldset>
+
+                        {selectedCharacters.length > 0 && (
+                            <button onClick={handleImport} className="btn btn-sm btn-primary rounded-xl font-bold shadow-xs">
+                                {transI18n("import")}
+                            </button>
+                        )}
+                    </div>
+                    {Error && (
+                        <div className="text-error text-sm font-semibold mt-2">😭 {Error}</div>
+                    )}
+
+                    {/* Selection Info */}
+                    <div className="flex flex-wrap items-center justify-between gap-3 bg-base-200 border border-base-300 p-3.5 rounded-2xl shadow-xs">
+                        <div className="flex items-center gap-2">
+                            <span className="text-xs sm:text-sm font-bold text-base-content">
+                                {transI18n("selectedCharacters")}:
+                            </span>
+                            <span className="badge badge-primary font-mono font-bold text-xs">
+                                {selectedCharacters.length}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={clearSelection}
+                                className="btn btn-xs sm:btn-sm btn-ghost text-error hover:bg-error/10 border border-error/30 rounded-xl"
+                            >
+                                {transI18n("clearAll")}
+                            </button>
+                            <button
+                                onClick={selectAll}
+                                className="btn btn-xs sm:btn-sm btn-ghost text-primary hover:bg-primary/10 border border-primary/30 rounded-xl"
+                            >
+                                {transI18n("selectAll")}
+                            </button>
+                        </div>
+                    </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">
                     {validFreeSRData && Object.values(validFreeSRData.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => {
                         return (
                             <CharacterInfoCard
@@ -219,10 +253,10 @@ export default function FreeSRImport() {
                                 selectedCharacters={selectedCharacters}
                                 onCharacterToggle={handleCharacterToggle}
                             />
-                        )
-                    })}
-                </div>
-            </div>
-        </div>
-    )
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
 }