feat(items): add server field and improve item management

refactor(ai): enhance item structure generation with schema validation
feat(ai): add token usage tracking and cost calculation
fix(ui): improve item card number formatting with locale support
docs(items): add documentation for item value separation
test(items): add tests for value field validation

components/item-card.tsx

@@ -5,7 +5,7 @@ import { MagicCard } from "@/components/ui/magic-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { PriceDisplay } from "@/components/ui/price-display";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import {
   TrendingUp,
   TrendingDown,
@@ -39,6 +39,7 @@ import {
   getRarityBgColor,
   getRarityGlow,
 } from "@/lib/currency-utils";
+import { formatNumber } from "@/lib/utils/formatters";
 
 interface ItemCardProps {
   item: TibiaItem;
@@ -47,6 +48,7 @@ interface ItemCardProps {
 
 export function ItemCard({ item, mode = "market" }: ItemCardProps) {
   const t = useTranslations("home.item");
+  const locale = useLocale();
   const [isFavorited, setIsFavorited] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const formatVocation = (v: string | undefined): string | undefined => {
@@ -659,21 +661,21 @@ export function ItemCard({ item, mode = "market" }: ItemCardProps) {
                       <TrendingUp className="h-3 w-3" />
                       <span className="font-medium">{t("highest")}</span>
                     </div>
-                    <div className="font-bold">{item.priceHistory.highest.toLocaleString()} gp</div>
+                    <div className="font-bold">{formatNumber(item.priceHistory.highest, locale)} gp</div>
                   </div>
                   <div className="text-center space-y-1">
                     <div className="flex items-center justify-center gap-1 text-red-600">
                       <TrendingDown className="h-3 w-3" />
                       <span className="font-medium">{t("lowest")}</span>
                     </div>
-                    <div className="font-bold">{item.priceHistory.lowest.toLocaleString()} gp</div>
+                    <div className="font-bold">{formatNumber(item.priceHistory.lowest, locale)} gp</div>
                   </div>
                   <div className="text-center space-y-1">
                     <div className="flex items-center justify-center gap-1 text-muted-foreground">
                       <Minus className="h-3 w-3" />
                       <span className="font-medium">{t("average")}</span>
                     </div>
-                    <div className="font-bold">{item.priceHistory.average.toLocaleString()} gp</div>
+                    <div className="font-bold">{formatNumber(item.priceHistory.average, locale)} gp</div>
                   </div>
                 </div>
               </div>