fix : not null artifact and weapon in team calc

components/admin/guide-section-editor.tsx

@@ -563,7 +563,7 @@ function CatalogSlotPicker({
         aria-label={selected ? `${label}: ${selected.name}` : label}
         aria-invalid={invalid}
         className={cn(
-          "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-md border bg-muted p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring [&>svg]:hidden",
+          "relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-md border bg-muted p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&>svg]:hidden",
           rarityBackground && selected && rarityGradientClass(selected.rarity),
           className,
         )}
@@ -614,11 +614,13 @@ function ArtifactSlotPicker({
   values,
   onChange,
   label,
+  invalid = false,
 }: {
   items: CatalogItem[];
   values: string[];
   onChange: (values: string[]) => void;
   label: string;
+  invalid?: boolean;
 }) {
   const firstKey = values[0];
   const secondKey = values[1];
@@ -656,7 +658,8 @@ function ArtifactSlotPicker({
         aria-label={selected.length
           ? `${label}: ${selected.map((item) => item.name).join(", ")}`
           : label}
-        className="relative aspect-square w-full overflow-hidden rounded-md border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring [&>svg]:hidden"
+        aria-invalid={invalid}
+        className="relative aspect-square w-full overflow-hidden rounded-md border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&>svg]:hidden"
       >
         {selected.length ? (
           <TeamArtifactIcon
@@ -3550,22 +3553,13 @@ function TeamEditor({
                                                   value={member.characterKey}
                                                   label={`เลือกตัวละครตำแหน่ง ${memberIndex + 1}`}
                                                   placeholder="ค้นหาชื่อตัวละคร…"
+                                                  rarityBackground
                                                   invalid={memberFieldInvalid(
                                                     teamIndex,
                                                     memberIndex,
                                                     "characterKey",
                                                   )}
-                                                  className={cn(
-                                                    "rounded-lg border-0 [&>img]:object-cover [&>img]:p-0",
-                                                    character &&
-                                                      rarityGradientClass(
-                                                        isCustomTravelerKey(
-                                                          character.key,
-                                                        )
-                                                          ? 5
-                                                          : character.rarity,
-                                                      ),
-                                                  )}
+                                                  className="rounded-lg border-0 [&>img]:object-cover [&>img]:p-0"
                                                   onChange={(characterKey) =>
                                                     updateTeamMember(
                                                       teamIndex,
@@ -3589,6 +3583,11 @@ function TeamEditor({
                                                   label={`เลือกอาวุธของตัวละครตำแหน่ง ${memberIndex + 1}`}
                                                   placeholder="ค้นหาอาวุธที่รองรับ…"
                                                   rarityBackground
+                                                  invalid={memberFieldInvalid(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    "weaponKey",
+                                                  )}
                                                   onChange={(weaponKey) =>
                                                     updateTeamMember(
                                                       teamIndex,
@@ -3610,6 +3609,11 @@ function TeamEditor({
                                                     (key): key is string => Boolean(key),
                                                   )}
                                                   label={`เลือก Artifact สูงสุด 2 ชุดของตัวละครตำแหน่ง ${memberIndex + 1}`}
+                                                  invalid={memberFieldInvalid(
+                                                    teamIndex,
+                                                    memberIndex,
+                                                    "artifactKey",
+                                                  )}
                                                   onChange={(artifactKeys) =>
                                                     updateTeamMember(
                                                       teamIndex,

components/ui/empty.tsx

@@ -7,7 +7,7 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="empty"
       className={cn(
-        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance aria-invalid:border aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}