serial numbers

Frontend/erp-system/components/ui/suggest-input.tsx

@@ -17,6 +17,8 @@ export interface SuggestOption {
   /** Optional pill shown on the right, before the hint (e.g. an available stock count). */
   badge?: string
   badgeTone?: SuggestBadgeTone
+  /** Optional highlighted pills right after the label (e.g. "Serial" / "Batch" tracking). */
+  tags?: { label: string; tone: SuggestTagTone }[]
 }
 
 export type SuggestBadgeTone = "muted" | "success" | "danger"
@@ -27,6 +29,29 @@ const badgeToneClass: Record<SuggestBadgeTone, string> = {
   danger: "bg-destructive/10 text-destructive",
 }
 
+export type SuggestTagTone = "serial" | "batch"
+
+const tagToneClass: Record<SuggestTagTone, string> = {
+  serial: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  batch: "border-amber-500/40 bg-amber-500/15 text-amber-700 dark:text-amber-300",
+}
+
+function OptionLabel({ option }: { option: SuggestOption }) {
+  return (
+    <span className="flex min-w-0 items-center gap-1.5">
+      <span className="truncate">{option.label}</span>
+      {option.tags?.map((tag) => (
+        <span
+          key={tag.label}
+          className={cn("shrink-0 rounded-md border px-1.5 py-px text-[11px] font-semibold uppercase tracking-wide", tagToneClass[tag.tone])}
+        >
+          {tag.label}
+        </span>
+      ))}
+    </span>
+  )
+}
+
 interface SuggestInputProps {
   options: SuggestOption[]
   /** Called with the picked option's value; the box then clears for the next entry. */
@@ -259,11 +284,11 @@ export function SuggestInput({
               >
                 {option.detail ? (
                   <span className="flex min-w-0 flex-col">
-                    <span className="truncate">{option.label}</span>
+                    <OptionLabel option={option} />
                     <span className="truncate text-xs text-muted-foreground">{option.detail}</span>
                   </span>
                 ) : (
-                  <span className="truncate">{option.label}</span>
+                  <OptionLabel option={option} />
                 )}
                 {(option.badge || option.hint) && (
                   <span className="flex shrink-0 items-center gap-2">