fix : correct color

components/commission/request-summary.tsx

@@ -2,15 +2,15 @@ import Image from "next/image";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { elementBackgroundColor } from "@/lib/catalog/element";
-import { rarityGradientClass } from "@/lib/catalog/rarity";
+import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
 import type { CommissionRequest } from "@/lib/commission/request";
 import { cn } from "@/lib/utils";
 
 type Item = { key: string; name: string; imageUrl: string; rarity?: number | null; element?: string | null };
 type Catalog = { characters: Item[]; weapons: Item[]; artifacts: Item[] };
 
-function ItemImage({ item, size = "small" }: { item: Item; size?: "small" | "large" }) {
-  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", rarityGradientClass(item.rarity))}>
+function ItemImage({ item, size = "small", character = false }: { item: Item; size?: "small" | "large"; character?: boolean }) {
+  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", character ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity))}>
     <Image src={item.imageUrl} alt={item.name} fill sizes={size === "large" ? "160px" : "64px"} className="object-contain" />
   </div>;
 }
@@ -30,7 +30,7 @@ function CommissionTeamCard({ team, index, catalog }: { team: CommissionRequest[
           const artifact = artifacts.get(member.artifactKey);
           return <div key={memberIndex} className="min-w-0 rounded-lg p-1 lg:p-1.5" style={{ backgroundColor: elementBackgroundColor(character?.element) }}>
             <div className="grid grid-cols-1 gap-1 lg:grid-cols-[2fr_1fr]">
-              {character ? <ItemImage item={character} size="large" /> : <div className="aspect-square rounded-lg bg-muted" />}
+              {character ? <ItemImage item={character} size="large" character /> : <div className="aspect-square rounded-lg bg-muted" />}
               <div className="grid min-w-0 grid-cols-2 gap-0.5 lg:grid-cols-1 lg:grid-rows-2 lg:gap-1">
                 {weapon ? <ItemImage item={weapon} /> : <div title={member.weaponKey} className="aspect-square rounded-lg bg-muted" />}
                 {artifact ? <ItemImage item={artifact} /> : <div title={member.artifactKey} className="aspect-square rounded-lg bg-muted" />}
@@ -77,7 +77,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
                 : <p key={key} className="w-16 wrap-break-word text-xs">{key}</p>;
             })}
           </div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
         </CardContent>
       </Card>;
     })}
@@ -89,7 +89,7 @@ export function CommissionRequestSummary({ request, catalog, amountBaht }: {
         </CardHeader>
         <CardContent className="grid grid-cols-[minmax(0,1fr)_64px] items-center gap-3">
           <div className="flex min-w-0 flex-wrap gap-2">{set.levels.map((level) => <Badge key={level} variant="outline">C{level}</Badge>)}</div>
-          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
+          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
         </CardContent>
       </Card>;
     })}

components/commission/ticket-chat.tsx

@@ -776,8 +776,24 @@ export function CommissionTicketChat({
                         mine ? "items-end" : "items-start",
                       )}
                     >
+                      <div
+                        className={cn(
+                          "w-full px-1 text-center text-xs font-medium text-muted-foreground",
+                          mine ? "translate-x-5" : "-translate-x-5",
+                        )}
+                      >
+                        <time
+                          dateTime={sentAt.toISOString()}
+                          title={sentAt.toLocaleString("th-TH")}
+                        >
+                          {sentAt.toLocaleTimeString("th-TH", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </time>
+                      </div>
                       <MessageHeader className="px-1">
-                        {mine ? "คุณ" : message.authorName}
+                        {message.authorName}
                       </MessageHeader>
                       <div
                         className={cn(
@@ -947,22 +963,6 @@ export function CommissionTicketChat({
                           ))}
                         </div>
                       )}
-                      <MessageFooter
-                        className={cn(
-                          "w-full justify-center gap-1 px-1 group-data-[align=end]/message:justify-center",
-                          mine ? "translate-x-5" : "-translate-x-5",
-                        )}
-                      >
-                        <time
-                          dateTime={sentAt.toISOString()}
-                          title={sentAt.toLocaleString("th-TH")}
-                        >
-                          {sentAt.toLocaleTimeString("th-TH", {
-                            hour: "2-digit",
-                            minute: "2-digit",
-                          })}
-                        </time>
-                      </MessageFooter>
                     </MessageContent>
                   </Message>
                 );
@@ -970,7 +970,6 @@ export function CommissionTicketChat({
               {visibleOptimisticMessages.map((message) => (
                 <Message key={message.localId} align="end">
                   <MessageContent className="w-full items-end gap-1">
-                    <MessageHeader className="px-1">คุณ</MessageHeader>
                     <Bubble
                       variant={message.imageUrl ? "ghost" : "muted"}
                       className="max-w-[min(82%,36rem)]"

components/commission/ticket-detail.tsx

@@ -21,7 +21,7 @@ export async function CommissionTicketDetail({ id, admin }: { id: string; admin:
   const catalog = await getCommissionLabels(data.checkout.request);
   return <div className="flex min-h-0 flex-1 flex-col gap-3">
     <CommissionTicketPanels summary={
-      <Card className="h-full min-h-0"><CardHeader className="shrink-0"><CardTitle>คำขอที่ชำระเงินแล้ว - ฿{data.checkout.amountBaht}</CardTitle></CardHeader>
+      <Card className="h-full min-h-0"><CardHeader className="shrink-0"><CardTitle>รายละเอียดคำขอ - ฿{data.checkout.amountBaht}</CardTitle></CardHeader>
         <CardContent className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">{catalog && <CommissionRequestSummary request={data.checkout.request} catalog={catalog} amountBaht={data.checkout.amountBaht} />}
           <p className="text-sm text-muted-foreground">การชำระเงิน: {data.payment.transRef} - {data.payment.transferredAt.toLocaleString("th-TH")}</p>
           <CommissionSlipDialog src={publicMediaUrl(data.payment.slipObjectKey)} />