update nice visuel

client/src/admin/AdminItems.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { api, formatCredits } from '../api';
+import { api, formatCredits, compareCents, centsJson, toCentsBigInt } from '../api';
 import ImageField from './ImageField';
 
 const emptyItem = {
@@ -10,23 +10,21 @@ const emptyItem = {
   imageUrl: '',
 };
 
-function CategoryField({ value, onChange, categories, id }) {
-  const listId = id || 'item-categories';
+function CategoryField({ value, onChange, categories }) {
+  const options =
+    value && !categories.includes(value) ? [...categories, value] : categories;
   return (
-    <>
-      <input
-        list={listId}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder="e.g. Rifle, Knife…"
-        required
-      />
-      <datalist id={listId}>
-        {categories.map((c) => (
-          <option key={c} value={c} />
-        ))}
-      </datalist>
-    </>
+    <select value={value} onChange={(e) => onChange(e.target.value)} required>
+      {options.length === 0 ? (
+        <option value="">No categories — create one first</option>
+      ) : (
+        options.map((c) => (
+          <option key={c} value={c}>
+            {c}
+          </option>
+        ))
+      )}
+    </select>
   );
 }
 
@@ -51,16 +49,23 @@ export default function AdminItems() {
     ]);
     setItems(i.items);
     setRarities(r.rarities);
-    setCategories(
-      (c.names || c.categories || []).map((entry) =>
-        typeof entry === 'string' ? entry : entry.name
-      )
+    const names = (c.names || c.categories || []).map((entry) =>
+      typeof entry === 'string' ? entry : entry.name
     );
-    setItemForm((f) => ({
-      ...f,
-      rarity: f.rarity || r.rarities[0] || 'MilSpec',
-      category: f.category || 'Misc',
-    }));
+    setCategories(names);
+    setItemForm((f) => {
+      const nextCategory =
+        f.category && names.includes(f.category)
+          ? f.category
+          : names.includes('Misc')
+            ? 'Misc'
+            : names[0] || '';
+      return {
+        ...f,
+        rarity: f.rarity || r.rarities[0] || 'MilSpec',
+        category: nextCategory,
+      };
+    });
   }, []);
 
   useEffect(() => {
@@ -89,7 +94,7 @@ export default function AdminItems() {
     list = [...list];
     list.sort((a, b) => {
       if (sort === 'name') return a.name.localeCompare(b.name);
-      if (sort === 'value') return Number(b.marketValue) - Number(a.marketValue);
+      if (sort === 'value') return compareCents(b.marketValue, a.marketValue);
       if (sort === 'rarity') return a.rarity.localeCompare(b.rarity);
       // category (default): group by category, then name
       const ca = (a.category || 'Misc').localeCompare(b.category || 'Misc');
@@ -164,12 +169,14 @@ export default function AdminItems() {
             try {
               await api.createItem({
                 ...itemForm,
-                marketValue: Number(itemForm.marketValue),
+                marketValue: centsJson(toCentsBigInt(itemForm.marketValue)),
               });
               setItemForm({
                 ...emptyItem,
                 rarity: rarities[0] || 'MilSpec',
-                category: 'Misc',
+                category: categories.includes('Misc')
+                  ? 'Misc'
+                  : categories[0] || '',
               });
               await load();
             } catch (err) {
@@ -188,7 +195,6 @@ export default function AdminItems() {
           <label>
             Category
             <CategoryField
-              id="create-item-categories"
               value={itemForm.category}
               categories={categories}
               onChange={(category) => setItemForm({ ...itemForm, category })}
@@ -247,7 +253,7 @@ export default function AdminItems() {
                       name: edit.name,
                       rarity: edit.rarity,
                       category: edit.category,
-                      marketValue: Number(edit.marketValue),
+                      marketValue: centsJson(toCentsBigInt(edit.marketValue)),
                       imageUrl: edit.imageUrl,
                     });
                     setEditingId(null);
@@ -270,7 +276,6 @@ export default function AdminItems() {
                 <label>
                   Category
                   <CategoryField
-                    id={`edit-item-categories-${item.id}`}
                     value={edit.category}
                     categories={categories}
                     onChange={(category) => setEdit({ ...edit, category })}