Add tags to commssion types and custom types. Add button for example images to cards

src/components/commissions/customCards/NewCustomCardForm.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import type { CommissionExtra, CommissionOption } from "@/generated/prisma/client";
+import type { CommissionExtra, CommissionOption, Tag } from "@/generated/prisma/client";
 import {
   commissionCustomCardSchema,
   type CommissionCustomCardValues,
@@ -26,14 +26,16 @@ import { toast } from "sonner";
 import { CommissionExtraField } from "../types/form/CommissionExtraField";
 import { CommissionOptionField } from "../types/form/CommissionOptionField";
 import { CustomCardImagePicker } from "./CustomCardImagePicker";
+import MultipleSelector from "@/components/ui/multiselect";
 
 type Props = {
   options: CommissionOption[];
   extras: CommissionExtra[];
   images: CommissionCustomCardImageItem[];
+  tags: Tag[];
 };
 
-export default function NewCustomCardForm({ options, extras, images }: Props) {
+export default function NewCustomCardForm({ options, extras, images, tags }: Props) {
   const router = useRouter();
   const form = useForm<CommissionCustomCardValues>({
     resolver: zodResolver(commissionCustomCardSchema),
@@ -43,6 +45,7 @@ export default function NewCustomCardForm({ options, extras, images }: Props) {
       isVisible: true,
       isSpecialOffer: false,
       referenceImageUrl: null,
+      tagIds: [],
       options: [],
       extras: [],
     },
@@ -131,6 +134,37 @@ export default function NewCustomCardForm({ options, extras, images }: Props) {
             render={() => <CustomCardImagePicker form={form} initialImages={images} />}
           />
 
+          <FormField
+            control={form.control}
+            name="tagIds"
+            render={({ field }) => {
+              const selectedIds = field.value ?? [];
+              const selectedOptions = tags
+                .filter((t) => selectedIds.includes(t.id))
+                .map((t) => ({ label: t.name, value: t.id }));
+
+              return (
+                <FormItem>
+                  <FormLabel>Tags</FormLabel>
+                  <FormControl>
+                    <MultipleSelector
+                      options={tags.map((t) => ({ label: t.name, value: t.id }))}
+                      placeholder="Select tags for this custom card"
+                      hidePlaceholderWhenSelected
+                      selectFirstItem
+                      value={selectedOptions}
+                      onChange={(options) => field.onChange(options.map((o) => o.value))}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Used to link this custom card to tagged artworks.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
           <CommissionOptionField options={options} />
           <CommissionExtraField extras={extras} />