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

prisma/migrations/20260202151753_tags_03/migration.sql

@@ -0,0 +1,16 @@
+-- CreateTable
+CREATE TABLE "_CommissionCustomCardTags" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_CommissionCustomCardTags_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE INDEX "_CommissionCustomCardTags_B_index" ON "_CommissionCustomCardTags"("B");
+
+-- AddForeignKey
+ALTER TABLE "_CommissionCustomCardTags" ADD CONSTRAINT "_CommissionCustomCardTags_A_fkey" FOREIGN KEY ("A") REFERENCES "CommissionCustomCard"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_CommissionCustomCardTags" ADD CONSTRAINT "_CommissionCustomCardTags_B_fkey" FOREIGN KEY ("B") REFERENCES "Tag"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -47,13 +47,13 @@ model Artwork {
   galleryId String?
   gallery   Gallery? @relation(fields: [galleryId], references: [id])
 
-  metadata ArtworkMetadata?
+  metadata  ArtworkMetadata?
   timelapse ArtworkTimelapse?
 
   albums     Album[]
   categories ArtCategory[]
   colors     ArtworkColor[]
-  tags       Tag[] @relation("ArtworkTags")
+  tags       Tag[]          @relation("ArtworkTags")
   variants   FileVariant[]
 
   @@index([colorStatus])
@@ -165,12 +165,12 @@ model ArtworkTimelapse {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  artworkId String @unique
+  artworkId String  @unique
   artwork   Artwork @relation(fields: [artworkId], references: [id], onDelete: Cascade)
 
   enabled Boolean @default(false)
 
-  s3Key     String @unique
+  s3Key     String  @unique
   fileName  String?
   mimeType  String?
   sizeBytes Int?
@@ -224,12 +224,13 @@ model Tag {
 
   description String?
 
-  aliases         TagAlias[]
+  aliases               TagAlias[]
-  categoryLinks   TagCategory[]
+  categoryLinks         TagCategory[]
-  categoryParents TagCategory[] @relation("TagCategoryParent")
+  categoryParents       TagCategory[]          @relation("TagCategoryParent")
-  artworks        Artwork[] @relation("ArtworkTags")
+  artworks              Artwork[]              @relation("ArtworkTags")
-  commissionTypes CommissionType[] @relation("CommissionTypeTags")
+  commissionTypes       CommissionType[]       @relation("CommissionTypeTags")
-  miniatures      Miniature[] @relation("MiniatureTags")
+  commissionCustomCards CommissionCustomCard[] @relation("CommissionCustomCardTags")
+  miniatures            Miniature[]            @relation("MiniatureTags")
 }
 
 model TagAlias {
@@ -240,7 +241,7 @@ model TagAlias {
   alias String @unique
 
   tagId String
-  tag   Tag @relation(fields: [tagId], references: [id], onDelete: Cascade)
+  tag   Tag    @relation(fields: [tagId], references: [id], onDelete: Cascade)
 
   @@unique([tagId, alias])
   @@index([alias])
@@ -310,13 +311,14 @@ model CommissionCustomCard {
 
   name String
 
-  description String?
+  description       String?
   referenceImageUrl String?
-  isVisible Boolean @default(true)
+  isVisible         Boolean @default(true)
-  isSpecialOffer Boolean @default(false)
+  isSpecialOffer    Boolean @default(false)
 
-  options CommissionCustomCardOption[]
+  tags     Tag[]                        @relation("CommissionCustomCardTags")
-  extras  CommissionCustomCardExtra[]
+  options  CommissionCustomCardOption[]
+  extras   CommissionCustomCardExtra[]
   requests CommissionRequest[]
 
   @@index([isVisible, sortIndex])
@@ -332,9 +334,9 @@ model CommissionOption {
 
   description String?
 
-  types    CommissionTypeOption[]
+  types       CommissionTypeOption[]
   customCards CommissionCustomCardOption[]
-  requests CommissionRequest[]
+  requests    CommissionRequest[]
 }
 
 model CommissionTypeOption {
@@ -366,8 +368,8 @@ model CommissionExtra {
 
   description String?
 
-  requests CommissionRequest[]
+  requests    CommissionRequest[]
-  types    CommissionTypeExtra[]
+  types       CommissionTypeExtra[]
   customCards CommissionCustomCardExtra[]
 }
 
@@ -475,12 +477,12 @@ model CommissionRequest {
   userAgent       String?
   customFields    Json?
 
-  optionId String?
+  optionId     String?
-  typeId   String?
+  typeId       String?
   customCardId String?
-  option   CommissionOption? @relation(fields: [optionId], references: [id])
+  option       CommissionOption?     @relation(fields: [optionId], references: [id])
-  type     CommissionType?   @relation(fields: [typeId], references: [id])
+  type         CommissionType?       @relation(fields: [typeId], references: [id])
-  customCard CommissionCustomCard? @relation(fields: [customCardId], references: [id])
+  customCard   CommissionCustomCard? @relation(fields: [customCardId], references: [id])
 
   extras CommissionExtra[]
   files  CommissionRequestFile[]
@@ -491,9 +493,9 @@ model CommissionGuidelines {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  markdown String
+  markdown        String
   exampleImageUrl String?
-  isActive Boolean @default(true)
+  isActive        Boolean @default(true)
 
   @@index([isActive])
 }

src/actions/commissions/customCards/newCard.ts

@@ -25,6 +25,9 @@ export async function createCommissionCustomCard(
       referenceImageUrl: data.referenceImageUrl ?? null,
       isVisible: data.isVisible ?? true,
       isSpecialOffer: data.isSpecialOffer ?? false,
+      tags: data.tagIds?.length
+        ? { connect: data.tagIds.map((id) => ({ id })) }
+        : undefined,
       options: {
         create:
           data.options?.map((opt, index) => ({

src/actions/commissions/customCards/updateCard.ts

@@ -20,6 +20,12 @@ export async function updateCommissionCustomCard(
       referenceImageUrl: data.referenceImageUrl ?? null,
       isVisible: data.isVisible ?? true,
       isSpecialOffer: data.isSpecialOffer ?? false,
+      tags: data.tagIds
+        ? {
+            set: [],
+            connect: data.tagIds.map((id) => ({ id })),
+          }
+        : undefined,
       options: {
         deleteMany: {},
         create: data.options?.map((opt, index) => ({

src/actions/commissions/types/newType.ts

@@ -1,7 +1,7 @@
-"use server"
+"use server";
 
-import { prisma } from "@/lib/prisma"
+import { prisma } from "@/lib/prisma";
-import { commissionTypeSchema } from "@/schemas/commissionType"
+import { commissionTypeSchema } from "@/schemas/commissionType";
 
 export async function createCommissionOption(data: { name: string }) {
   return await prisma.commissionOption.create({
@@ -9,7 +9,7 @@ export async function createCommissionOption(data: { name: string }) {
       name: data.name,
       description: "",
     },
-  })
+  });
 }
 
 export async function createCommissionExtra(data: { name: string }) {
@@ -18,64 +18,70 @@ export async function createCommissionExtra(data: { name: string }) {
       name: data.name,
       description: "",
     },
-  })
+  });
 }
 
 export async function createCommissionCustomInput(data: {
-  name: string
+  name: string;
-  fieldId: string
+  fieldId: string;
 }) {
   return await prisma.commissionCustomInput.create({
     data: {
       name: data.name,
       fieldId: data.fieldId,
     },
-  })
+  });
 }
 
 export async function createCommissionType(formData: commissionTypeSchema) {
-  const parsed = commissionTypeSchema.safeParse(formData)
+  const parsed = commissionTypeSchema.safeParse(formData);
 
   if (!parsed.success) {
-    console.error("Validation failed", parsed.error)
+    console.error("Validation failed", parsed.error);
-    throw new Error("Invalid input")
+    throw new Error("Invalid input");
   }
 
-  const data = parsed.data
+  const data = parsed.data;
 
   const created = await prisma.commissionType.create({
     data: {
       name: data.name,
       description: data.description,
+      tags: data.tagIds?.length
+        ? { connect: data.tagIds.map((id) => ({ id })) }
+        : undefined,
       options: {
-        create: data.options?.map((opt, index) => ({
+        create:
-          option: { connect: { id: opt.optionId } },
+          data.options?.map((opt, index) => ({
-          price: opt.price,
+            option: { connect: { id: opt.optionId } },
-          pricePercent: opt.pricePercent,
+            price: opt.price,
-          priceRange: opt.priceRange,
+            pricePercent: opt.pricePercent,
-          sortIndex: index,
+            priceRange: opt.priceRange,
-        })) || [],
+            sortIndex: index,
+          })) || [],
       },
       extras: {
-        create: data.extras?.map((ext, index) => ({
+        create:
-          extra: { connect: { id: ext.extraId } },
+          data.extras?.map((ext, index) => ({
-          price: ext.price,
+            extra: { connect: { id: ext.extraId } },
-          pricePercent: ext.pricePercent,
+            price: ext.price,
-          priceRange: ext.priceRange,
+            pricePercent: ext.pricePercent,
-          sortIndex: index,
+            priceRange: ext.priceRange,
-        })) || [],
+            sortIndex: index,
+          })) || [],
       },
       customInputs: {
-        create: data.customInputs?.map((c, index) => ({
+        create:
-          customInput: { connect: { id: c.customInputId } },
+          data.customInputs?.map((c, index) => ({
-          label: c.label,
+            customInput: { connect: { id: c.customInputId } },
-          inputType: c.inputType,
+            label: c.label,
-          required: c.required,
+            inputType: c.inputType,
-          sortIndex: index,
+            required: c.required,
-        })) || [],
+            sortIndex: index,
+          })) || [],
       },
     },
-  })
+  });
 
-  return created
+  return created;
 }

src/actions/commissions/types/updateType.ts

@@ -1,20 +1,26 @@
-"use server"
+"use server";
 
-import { prisma } from "@/lib/prisma"
+import { prisma } from "@/lib/prisma";
-import { commissionTypeSchema } from "@/schemas/commissionType"
+import { commissionTypeSchema } from "@/schemas/commissionType";
-import * as z from "zod/v4"
+import type * as z from "zod/v4";
 
 export async function updateCommissionType(
   id: string,
-  rawData: z.infer<typeof commissionTypeSchema>
+  rawData: z.infer<typeof commissionTypeSchema>,
 ) {
-  const data = commissionTypeSchema.parse(rawData)
+  const data = commissionTypeSchema.parse(rawData);
 
   const updated = await prisma.commissionType.update({
     where: { id },
     data: {
       name: data.name,
       description: data.description,
+      tags: data.tagIds
+        ? {
+            set: [],
+            connect: data.tagIds.map((id) => ({ id })),
+          }
+        : undefined,
       options: {
         deleteMany: {},
         create: data.options?.map((opt, index) => ({
@@ -37,13 +43,14 @@ export async function updateCommissionType(
       },
       customInputs: {
         deleteMany: {},
-        create: data.customInputs?.map((c, index) => ({
+        create:
-          customInput: { connect: { id: c.customInputId } },
+          data.customInputs?.map((c, index) => ({
-          label: c.label,
+            customInput: { connect: { id: c.customInputId } },
-          inputType: c.inputType,
+            label: c.label,
-          required: c.required,
+            inputType: c.inputType,
-          sortIndex: index,
+            required: c.required,
-        })) || [],
+            sortIndex: index,
+          })) || [],
       },
     },
     include: {
@@ -51,7 +58,7 @@ export async function updateCommissionType(
       extras: true,
       customInputs: true,
     },
-  })
+  });
 
-  return updated
+  return updated;
 }

src/actions/tags/migrateArtTags.ts

@@ -1,5 +0,0 @@
-"use server";
-
-export async function migrateArtTags() {
-  throw new Error("Migration disabled: ArtTag models removed.");
-}

src/actions/tags/migrateArtworkTagJoin.ts

@@ -1,75 +0,0 @@
-"use server";
-
-import { prisma } from "@/lib/prisma";
-import { revalidatePath } from "next/cache";
-
-type JoinMigrationResult = {
-  ok: boolean;
-  copied: number;
-  oldExists: boolean;
-  newExists: boolean;
-  droppedOld: boolean;
-  message?: string;
-};
-
-export async function migrateArtworkTagJoin(
-  opts: { dropOld?: boolean } = {},
-): Promise<JoinMigrationResult> {
-  const dropOld = Boolean(opts.dropOld);
-
-  const [oldRow, newRow] = await Promise.all([
-    prisma.$queryRaw<{ name: string | null }[]>`
-      select to_regclass('_ArtworkTagsV2')::text as name;
-    `,
-    prisma.$queryRaw<{ name: string | null }[]>`
-      select to_regclass('_ArtworkTags')::text as name;
-    `,
-  ]);
-
-  const oldExists = Boolean(oldRow?.[0]?.name);
-  const newExists = Boolean(newRow?.[0]?.name);
-
-  if (!newExists) {
-    return {
-      ok: false,
-      copied: 0,
-      oldExists,
-      newExists,
-      droppedOld: false,
-      message: "New join table _ArtworkTags does not exist. Run the migration first.",
-    };
-  }
-
-  if (!oldExists) {
-    return {
-      ok: true,
-      copied: 0,
-      oldExists,
-      newExists,
-      droppedOld: false,
-      message: "Old join table _ArtworkTagsV2 not found. Nothing to copy.",
-    };
-  }
-
-  const copied = await prisma.$executeRawUnsafe(`
-    INSERT INTO "_ArtworkTags" ("A","B")
-    SELECT "A","B" FROM "_ArtworkTagsV2"
-    ON CONFLICT ("A","B") DO NOTHING;
-  `);
-
-  let droppedOld = false;
-  if (dropOld) {
-    await prisma.$executeRawUnsafe(`DROP TABLE "_ArtworkTagsV2";`);
-    droppedOld = true;
-  }
-
-  revalidatePath("/tags");
-
-  return {
-    ok: true,
-    copied: Number(copied ?? 0),
-    oldExists,
-    newExists,
-    droppedOld,
-  };
-}

src/app/(admin)/commissions/custom-cards/[id]/page.tsx

@@ -10,17 +10,19 @@ export default async function CommissionCustomCardEditPage({
 }) {
   const { id } = await params;
 
-  const [card, options, extras, images] = await Promise.all([
+  const [card, options, extras, images, tags] = await Promise.all([
     prisma.commissionCustomCard.findUnique({
       where: { id },
       include: {
         options: { orderBy: { sortIndex: "asc" } },
         extras: { orderBy: { sortIndex: "asc" } },
+        tags: true,
       },
     }),
     prisma.commissionOption.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
     prisma.commissionExtra.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
     listCommissionCustomCardImages(),
+    prisma.tag.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
   ]);
 
   if (!card) {
@@ -37,6 +39,7 @@ export default async function CommissionCustomCardEditPage({
         allOptions={options}
         allExtras={extras}
         images={images}
+        allTags={tags}
       />
     </div>
   );

src/app/(admin)/commissions/custom-cards/new/page.tsx

@@ -3,10 +3,11 @@ import NewCustomCardForm from "@/components/commissions/customCards/NewCustomCar
 import { prisma } from "@/lib/prisma";
 
 export default async function CommissionCustomCardsNewPage() {
-  const [options, extras, images] = await Promise.all([
+  const [options, extras, images, tags] = await Promise.all([
     prisma.commissionOption.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
     prisma.commissionExtra.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
     listCommissionCustomCardImages(),
+    prisma.tag.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
   ]);
 
   return (
@@ -14,7 +15,7 @@ export default async function CommissionCustomCardsNewPage() {
       <div className="flex gap-4 justify-between pb-8">
         <h1 className="text-2xl font-bold mb-4">New Custom Commission Card</h1>
       </div>
-      <NewCustomCardForm options={options} extras={extras} images={images} />
+      <NewCustomCardForm options={options} extras={extras} images={images} tags={tags} />
     </div>
   );
 }

src/app/(admin)/commissions/types/[id]/page.tsx

@@ -11,8 +11,12 @@ export default async function CommissionTypesEditPage({ params }: { params: { id
       options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
       extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
       customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
+      tags: true,
     },
   })
+  const tags = await prisma.tag.findMany({
+    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+  });
   const options = await prisma.commissionOption.findMany({
     orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
   });
@@ -32,7 +36,12 @@ export default async function CommissionTypesEditPage({ params }: { params: { id
       <div className="flex gap-4 justify-between pb-8">
         <h1 className="text-2xl font-bold mb-4">Edit Commission Type</h1>
       </div>
-      <EditTypeForm type={commissionType} allOptions={options} allExtras={extras} />
+      <EditTypeForm
+        type={commissionType}
+        allOptions={options}
+        allExtras={extras}
+        allTags={tags}
+      />
     </div>
   );
 }

src/app/(admin)/commissions/types/new/page.tsx

@@ -2,6 +2,9 @@ import NewTypeForm from "@/components/commissions/types/NewTypeForm";
 import { prisma } from "@/lib/prisma";
 
 export default async function CommissionTypesNewPage() {
+  const tags = await prisma.tag.findMany({
+    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
+  });
   const options = await prisma.commissionOption.findMany({
     orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
   });
@@ -17,7 +20,12 @@ export default async function CommissionTypesNewPage() {
       <div className="flex gap-4 justify-between pb-8">
         <h1 className="text-2xl font-bold mb-4">New Commission Type</h1>
       </div>
-      <NewTypeForm options={options} extras={extras} customInputs={customInputs} />
+      <NewTypeForm
+        options={options}
+        extras={extras}
+        customInputs={customInputs}
+        tags={tags}
+      />
     </div>
 
   );

src/app/(admin)/tags/page.tsx

@@ -1,20 +1,9 @@
-import { migrateArtworkTagJoin } from "@/actions/tags/migrateArtworkTagJoin";
 import TagTabs from "@/components/tags/TagTabs";
 import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
 import Link from "next/link";
 
-async function migrateArtworkTagJoinCopy() {
-  "use server";
-  await migrateArtworkTagJoin();
-}
-
-async function migrateArtworkTagJoinDropOld() {
-  "use server";
-  await migrateArtworkTagJoin({ dropOld: true });
-}
-
 export default async function ArtTagsPage() {
   const items = await prisma.tag.findMany({
     include: {
@@ -56,22 +45,10 @@ export default async function ArtTagsPage() {
           <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
             Tags
           </h1>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-muted-foreground">Manage tags.</p>
-            Manage tags, aliases, categories, and usage across artworks.
-          </p>
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-          <form action={migrateArtworkTagJoinCopy}>
-            <Button type="submit" variant="secondary" className="h-11">
-              Copy tag relations
-            </Button>
-          </form>
-          <form action={migrateArtworkTagJoinDropOld}>
-            <Button type="submit" variant="destructive" className="h-11">
-              Copy + drop old
-            </Button>
-          </form>
           <Button asChild className="h-11 gap-2">
             <Link href="/tags/new">
               <PlusCircleIcon className="h-4 w-4" />
@@ -79,17 +56,15 @@ export default async function ArtTagsPage() {
             </Link>
           </Button>
         </div>
-      </header >
+      </header>
 
-      {
+      {rows.length > 0 ? (
-        rows.length > 0 ? (
+        <TagTabs tags={rows} />
-          <TagTabs tags={rows} />
+      ) : (
-        ) : (
+        <p className="text-muted-foreground">
-          <p className="text-muted-foreground">
+          There are no tags yet. Consider adding some!
-            There are no tags yet. Consider adding some!
+        </p>
-          </p>
+      )}
-        )
+    </div>
-      }
-    </div >
   );
 }

src/components/commissions/customCards/EditCustomCardForm.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,6 +26,7 @@ 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 CustomCardOption = {
   optionId: string;
@@ -48,6 +49,7 @@ type CustomCardWithItems = {
   referenceImageUrl: string | null;
   isVisible: boolean;
   isSpecialOffer: boolean;
+  tags: Tag[];
   options: CustomCardOption[];
   extras: CustomCardExtra[];
 };
@@ -57,6 +59,7 @@ type Props = {
   allOptions: CommissionOption[];
   allExtras: CommissionExtra[];
   images: CommissionCustomCardImageItem[];
+  allTags: Tag[];
 };
 
 export default function EditCustomCardForm({
@@ -64,6 +67,7 @@ export default function EditCustomCardForm({
   allOptions,
   allExtras,
   images,
+  allTags,
 }: Props) {
   const router = useRouter();
   const form = useForm<CommissionCustomCardValues>({
@@ -74,6 +78,7 @@ export default function EditCustomCardForm({
       isVisible: card.isVisible,
       isSpecialOffer: card.isSpecialOffer,
       referenceImageUrl: card.referenceImageUrl ?? null,
+      tagIds: card.tags.map((t) => t.id),
       options: card.options.map((o) => ({
         optionId: o.optionId,
         price: o.price ?? undefined,
@@ -171,6 +176,37 @@ export default function EditCustomCardForm({
             render={() => <CustomCardImagePicker form={form} initialImages={images} />}
           />
 
+          <FormField
+            control={form.control}
+            name="tagIds"
+            render={({ field }) => {
+              const selectedIds = field.value ?? [];
+              const selectedOptions = allTags
+                .filter((t) => selectedIds.includes(t.id))
+                .map((t) => ({ label: t.name, value: t.id }));
+
+              return (
+                <FormItem>
+                  <FormLabel>Tags</FormLabel>
+                  <FormControl>
+                    <MultipleSelector
+                      options={allTags.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={allOptions} />
           <CommissionExtraField extras={allExtras} />
 

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} />
 

src/components/commissions/types/EditTypeForm.tsx

@@ -1,10 +1,28 @@
-"use client"
+"use client";
 
 import { updateCommissionType } from "@/actions/commissions/types/updateType";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import type { CommissionCustomInput, CommissionExtra, CommissionOption, CommissionType, CommissionTypeCustomInput, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client";
+import MultipleSelector from "@/components/ui/multiselect";
+import type {
+  CommissionCustomInput,
+  CommissionExtra,
+  CommissionOption,
+  CommissionType,
+  CommissionTypeCustomInput,
+  CommissionTypeExtra,
+  CommissionTypeOption,
+  Tag,
+} from "@/generated/prisma/client";
 import { commissionTypeSchema } from "@/schemas/commissionType";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
@@ -15,25 +33,35 @@ import { CommissionExtraField } from "./form/CommissionExtraField";
 import { CommissionOptionField } from "./form/CommissionOptionField";
 
 type CommissionTypeWithConnections = CommissionType & {
-  options: (CommissionTypeOption & { option: CommissionOption })[]
+  options: (CommissionTypeOption & { option: CommissionOption })[];
-  extras: (CommissionTypeExtra & { extra: CommissionExtra })[]
+  extras: (CommissionTypeExtra & { extra: CommissionExtra })[];
-  customInputs: (CommissionTypeCustomInput & { customInput: CommissionCustomInput })[]
+  customInputs: (CommissionTypeCustomInput & {
-}
+    customInput: CommissionCustomInput;
+  })[];
+  tags: Tag[];
+};
 
 type Props = {
-  type: CommissionTypeWithConnections
+  type: CommissionTypeWithConnections;
-  allOptions: CommissionOption[],
+  allOptions: CommissionOption[];
-  allExtras: CommissionExtra[],
+  allExtras: CommissionExtra[];
+  allTags: Tag[];
   // allCustomInputs: CommissionCustomInput[]
-}
+};
 
-export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
+export default function EditTypeForm({
+  type,
+  allOptions,
+  allExtras,
+  allTags,
+}: Props) {
   const router = useRouter();
   const form = useForm<z.infer<typeof commissionTypeSchema>>({
     resolver: zodResolver(commissionTypeSchema),
     defaultValues: {
       name: type.name,
       description: type.description ?? "",
+      tagIds: type.tags.map((t) => t.id),
       options: type.options.map((o) => ({
         optionId: o.optionId,
         price: o.price ?? undefined,
@@ -54,16 +82,16 @@ export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
         required: f.required,
       })),
     },
-  })
+  });
 
   async function onSubmit(values: z.infer<typeof commissionTypeSchema>) {
     try {
-      await updateCommissionType(type.id, values)
+      await updateCommissionType(type.id, values);
-      toast.success("Commission type updated.")
+      toast.success("Commission type updated.");
-      router.push("/commissions/types")
+      router.push("/commissions/types");
     } catch (err) {
-      console.error(err)
+      console.error(err);
-      toast("Failed to create commission type.")
+      toast("Failed to create commission type.");
     }
   }
 
@@ -80,7 +108,9 @@ export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
-                <FormDescription>The name of the commission type.</FormDescription>
+                <FormDescription>
+                  The name of the commission type.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -99,6 +129,41 @@ export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
               </FormItem>
             )}
           />
+          <FormField
+            control={form.control}
+            name="tagIds"
+            render={({ field }) => {
+              const selectedIds = field.value ?? [];
+              const selectedOptions = allTags
+                .filter((t) => selectedIds.includes(t.id))
+                .map((t) => ({ label: t.name, value: t.id }));
+
+              return (
+                <FormItem>
+                  <FormLabel>Tags</FormLabel>
+                  <FormControl>
+                    <MultipleSelector
+                      options={allTags.map((t) => ({
+                        label: t.name,
+                        value: t.id,
+                      }))}
+                      placeholder="Select tags for this commission type"
+                      hidePlaceholderWhenSelected
+                      selectFirstItem
+                      value={selectedOptions}
+                      onChange={(options) =>
+                        field.onChange(options.map((o) => o.value))
+                      }
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Used to link this commission type to tagged artworks.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
 
           <CommissionOptionField options={allOptions} />
           <CommissionExtraField extras={allExtras} />
@@ -106,7 +171,13 @@ export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
 
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+            <Button
+              type="reset"
+              variant="secondary"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
           </div>
         </form>
       </Form>

src/components/commissions/types/ListTypes.tsx

@@ -5,7 +5,15 @@ import { updateCommissionTypeSortOrder } from "@/actions/commissions/types/updat
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { CommissionCustomInput, CommissionExtra, CommissionOption, CommissionType, CommissionTypeCustomInput, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma/client";
+import {
+  CommissionCustomInput,
+  CommissionExtra,
+  CommissionOption,
+  CommissionType,
+  CommissionTypeCustomInput,
+  CommissionTypeExtra,
+  CommissionTypeOption,
+} from "@/generated/prisma/client";
 import {
   closestCenter,
   DndContext,

src/components/commissions/types/NewTypeForm.tsx

@@ -1,47 +1,68 @@
-"use client"
+"use client";
 
 import { createCommissionType } from "@/actions/commissions/types/newType";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { CommissionCustomInput, CommissionExtra, CommissionOption } from "@/generated/prisma/client";
+import MultipleSelector from "@/components/ui/multiselect";
+import type {
+  CommissionCustomInput,
+  CommissionExtra,
+  CommissionOption,
+  Tag,
+} from "@/generated/prisma/client";
 import { commissionTypeSchema } from "@/schemas/commissionType";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import * as z from "zod/v4";
+import type * as z from "zod/v4";
 import { CommissionCustomInputField } from "./form/CommissionCustomInputField";
 import { CommissionExtraField } from "./form/CommissionExtraField";
 import { CommissionOptionField } from "./form/CommissionOptionField";
 
 type Props = {
-  options: CommissionOption[],
+  options: CommissionOption[];
-  extras: CommissionExtra[],
+  extras: CommissionExtra[];
-  customInputs: CommissionCustomInput[]
+  customInputs: CommissionCustomInput[];
-}
+  tags: Tag[];
+};
 
-export default function NewTypeForm({ options, extras, customInputs }: Props) {
+export default function NewTypeForm({
+  options,
+  extras,
+  customInputs,
+  tags,
+}: Props) {
   const router = useRouter();
   const form = useForm<z.infer<typeof commissionTypeSchema>>({
     resolver: zodResolver(commissionTypeSchema),
     defaultValues: {
       name: "",
       description: "",
+      tagIds: [],
       options: [],
       extras: [],
     },
-  })
+  });
 
   async function onSubmit(values: z.infer<typeof commissionTypeSchema>) {
     try {
-      const created = await createCommissionType(values)
+      const created = await createCommissionType(values);
-      console.log("CommissionType created:", created)
+      console.log("CommissionType created:", created);
-      toast("Commission type created.")
+      toast("Commission type created.");
-      router.push("/commissions/types")
+      router.push("/commissions/types");
     } catch (err) {
-      console.error(err)
+      console.error(err);
-      toast("Failed to create commission type.")
+      toast("Failed to create commission type.");
     }
   }
 
@@ -58,7 +79,9 @@ export default function NewTypeForm({ options, extras, customInputs }: Props) {
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
-                <FormDescription>The name of the commission type.</FormDescription>
+                <FormDescription>
+                  The name of the commission type.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -77,6 +100,41 @@ export default function NewTypeForm({ options, extras, customInputs }: Props) {
               </FormItem>
             )}
           />
+          <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 commission type"
+                      hidePlaceholderWhenSelected
+                      selectFirstItem
+                      value={selectedOptions}
+                      onChange={(options) =>
+                        field.onChange(options.map((o) => o.value))
+                      }
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Used to link this commission type to tagged artworks.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
 
           <CommissionOptionField options={options} />
           <CommissionExtraField extras={extras} />
@@ -84,7 +142,13 @@ export default function NewTypeForm({ options, extras, customInputs }: Props) {
 
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+            <Button
+              type="reset"
+              variant="secondary"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
           </div>
         </form>
       </Form>

src/components/tags/EditTagForm.tsx

@@ -1,18 +1,32 @@
-"use client"
+"use client";
 
 import { updateTag } from "@/actions/tags/updateTag";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ArtCategory, Tag, TagAlias } from "@/generated/prisma/client";
+import type { ArtCategory, Tag, TagAlias } from "@/generated/prisma/client";
-import { TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
+import { type TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import MultipleSelector from "../ui/multiselect";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 import { Switch } from "../ui/switch";
 import AliasEditor from "./AliasEditor";
 
@@ -42,19 +56,19 @@ export default function EditTagForm({
       isParent: tag.isParent ?? false,
       showOnAnimalPage: tag.showOnAnimalPage ?? false,
       isVisible: tag.isVisible ?? true,
-      aliases: tag.aliases?.map(a => a.alias) ?? []
+      aliases: tag.aliases?.map((a) => a.alias) ?? [],
-    }
+    },
-  })
+  });
 
   async function onSubmit(values: TagFormInput) {
     try {
-      const updated = await updateTag(tag.id, values)
+      const updated = await updateTag(tag.id, values);
-      console.log("Tag updated:", updated)
+      console.log("Tag updated:", updated);
-      toast("Tag updated.")
+      toast("Tag updated.");
-      router.push("/tags")
+      router.push("/tags");
     } catch (err) {
-      console.error(err)
+      console.error(err);
-      toast("Failed to update tag.")
+      toast("Failed to update tag.");
     }
   }
 
@@ -64,6 +78,10 @@ export default function EditTagForm({
 
   return (
     <div className="flex flex-col gap-8">
+      <p className="text-sm text-muted-foreground">
+        Tags can be used across artworks, commission types, and future miniatures. Category links
+        are optional and control category-specific behavior.
+      </p>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
           {/* String */}
@@ -87,7 +105,10 @@ export default function EditTagForm({
               <FormItem>
                 <FormLabel>Description</FormLabel>
                 <FormControl>
-                  <Textarea {...field} placeholder="A descriptive text (optional)" />
+                  <Textarea
+                    {...field}
+                    placeholder="A descriptive text (optional)"
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -98,14 +119,14 @@ export default function EditTagForm({
             name="categoryIds"
             render={({ field }) => {
               const selectedOptions = categories
-                .filter(cat => field.value?.includes(cat.id))
+                .filter((cat) => field.value?.includes(cat.id))
-                .map(cat => ({ label: cat.name, value: cat.id }));
+                .map((cat) => ({ label: cat.name, value: cat.id }));
               return (
                 <FormItem>
                   <FormLabel>Categories</FormLabel>
                   <FormControl>
                     <MultipleSelector
-                      defaultOptions={categories.map(cat => ({
+                      defaultOptions={categories.map((cat) => ({
                         label: cat.name,
                         value: cat.id,
                       }))}
@@ -114,14 +135,14 @@ export default function EditTagForm({
                       selectFirstItem
                       value={selectedOptions}
                       onChange={(options) => {
-                        const ids = options.map(option => option.value);
+                        const ids = options.map((option) => option.value);
                         field.onChange(ids);
                       }}
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
-              )
+              );
             }}
           />
           <FormField
@@ -159,7 +180,10 @@ export default function EditTagForm({
               <FormItem>
                 <FormLabel>Aliases</FormLabel>
                 <FormControl>
-                  <AliasEditor value={field.value ?? []} onChange={field.onChange} />
+                  <AliasEditor
+                    value={field.value ?? []}
+                    onChange={field.onChange}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -176,7 +200,10 @@ export default function EditTagForm({
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -193,7 +220,10 @@ export default function EditTagForm({
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -210,7 +240,10 @@ export default function EditTagForm({
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -218,10 +251,16 @@ export default function EditTagForm({
           </div>
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+            <Button
+              type="reset"
+              variant="secondary"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
           </div>
         </form>
       </Form>
-    </div >
+    </div>
   );
 }

src/components/tags/NewTagForm.tsx

@@ -1,23 +1,42 @@
-"use client"
+"use client";
 
 import { createTag } from "@/actions/tags/createTag";
 import { Button } from "@/components/ui/button";
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ArtCategory, Tag } from "@/generated/prisma/client";
+import type { ArtCategory, Tag } from "@/generated/prisma/client";
-import { TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
+import { type TagFormInput, tagSchema } from "@/schemas/artworks/tagSchema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import MultipleSelector from "../ui/multiselect";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 import { Switch } from "../ui/switch";
 import AliasEditor from "./AliasEditor";
 
-
+export default function NewTagForm({
-export default function NewTagForm({ categories, allTags }: { categories: ArtCategory[], allTags: Tag[] }) {
+  categories,
+  allTags,
+}: {
+  categories: ArtCategory[];
+  allTags: Tag[];
+}) {
   const router = useRouter();
   const form = useForm<TagFormInput>({
     resolver: zodResolver(tagSchema),
@@ -30,18 +49,18 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
       showOnAnimalPage: false,
       isVisible: true,
       aliases: [],
-    }
+    },
-  })
+  });
 
   async function onSubmit(values: TagFormInput) {
     try {
-      const created = await createTag(values)
+      const created = await createTag(values);
-      console.log("Tag created:", created)
+      console.log("Tag created:", created);
-      toast("Tag created.")
+      toast("Tag created.");
-      router.push("/tags")
+      router.push("/tags");
     } catch (err) {
-      console.error(err)
+      console.error(err);
-      toast("Failed to create tag.")
+      toast("Failed to create tag.");
     }
   }
 
@@ -51,6 +70,11 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
 
   return (
     <div className="flex flex-col gap-8">
+      <p className="text-sm text-muted-foreground">
+        Tags can be used across artworks, commission types, and future
+        miniatures. Category links are optional and control category-specific
+        behavior.
+      </p>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
           {/* String */}
@@ -74,7 +98,10 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
               <FormItem>
                 <FormLabel>Description</FormLabel>
                 <FormControl>
-                  <Textarea {...field} placeholder="A descriptive text (optional)" />
+                  <Textarea
+                    {...field}
+                    placeholder="A descriptive text (optional)"
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -85,14 +112,14 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
             name="categoryIds"
             render={({ field }) => {
               const selectedOptions = categories
-                .filter(cat => field.value?.includes(cat.id))
+                .filter((cat) => field.value?.includes(cat.id))
-                .map(cat => ({ label: cat.name, value: cat.id }));
+                .map((cat) => ({ label: cat.name, value: cat.id }));
               return (
                 <FormItem>
                   <FormLabel>Categories</FormLabel>
                   <FormControl>
                     <MultipleSelector
-                      defaultOptions={categories.map(cat => ({
+                      defaultOptions={categories.map((cat) => ({
                         label: cat.name,
                         value: cat.id,
                       }))}
@@ -101,14 +128,14 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
                       selectFirstItem
                       value={selectedOptions}
                       onChange={(options) => {
-                        const ids = options.map(option => option.value);
+                        const ids = options.map((option) => option.value);
                         field.onChange(ids);
                       }}
                     />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
-              )
+              );
             }}
           />
           <FormField
@@ -146,7 +173,10 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
               <FormItem>
                 <FormLabel>Aliases</FormLabel>
                 <FormControl>
-                  <AliasEditor value={field.value ?? []} onChange={field.onChange} />
+                  <AliasEditor
+                    value={field.value ?? []}
+                    onChange={field.onChange}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -163,7 +193,10 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -180,7 +213,10 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -197,7 +233,10 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
                     <FormDescription></FormDescription>
                   </div>
                   <FormControl>
-                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
                   </FormControl>
                 </FormItem>
               )}
@@ -205,10 +244,16 @@ export default function NewTagForm({ categories, allTags }: { categories: ArtCat
           </div>
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>
+            <Button
+              type="reset"
+              variant="secondary"
+              onClick={() => router.back()}
+            >
+              Cancel
+            </Button>
           </div>
         </form>
       </Form>
-    </div >
+    </div>
   );
 }

src/components/ui/multiselect.tsx

@@ -480,8 +480,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
         } // When onSearch is provided, we don't want to filter the options. You can still override it.
         filter={commandFilter()}
       >
-        <button
+        <div
-          type="button"
           className={cn(
             'min-h-10 rounded-md border border-input text-base ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 md:text-sm',
             {
@@ -490,11 +489,6 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
             },
             className,
           )}
-          onClick={() => {
-            if (disabled) return;
-            inputRef?.current?.focus();
-          }}
-          disabled={disabled}
         >
           <div className="relative flex flex-wrap gap-1">
             {selected.map((option) => {
@@ -581,7 +575,7 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
               <X />
             </button>
           </div>
-        </button>
+        </div>
         <div className="relative">
           {open && (
             <CommandList
@@ -597,7 +591,10 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
               }}
             >
               {isLoading ? (
-                <>{loadingIndicator}</>
+                // biome-ignore lint:  lint/complexity/noUselessFragments
+                <>
+                  {loadingIndicator}
+                </>
               ) : (
                 <>
                   {EmptyItem()}
@@ -605,47 +602,45 @@ const MultipleSelector = React.forwardRef<MultipleSelectorRef, MultipleSelectorP
                   {!selectFirstItem && <CommandItem value="-" className="hidden" />}
                   {orderedGroupEntries.map(([key, dropdowns]) => (
                     <CommandGroup key={key} heading={key} className="h-full overflow-auto">
-                      <>
+                      {dropdowns.map((option) => {
-                        {dropdowns.map((option) => {
+                        const alreadySelected = selected.some((s) => s.value === option.value);
-                          const alreadySelected = selected.some((s) => s.value === option.value);
+                        const disabledItem = option.disable || (showSelectedInDropdown && alreadySelected);
-                          const disabledItem = option.disable || (showSelectedInDropdown && alreadySelected);
 
-                          return (
+                        return (
-                            <CommandItem
+                          <CommandItem
-                              key={option.value}
+                            key={option.value}
-                              value={`${option.label}::${option.value}`}
+                            value={`${option.label}::${option.value}`}
-                              disabled={disabledItem}
+                            disabled={disabledItem}
-                              onMouseDown={(e) => {
+                            onMouseDown={(e) => {
-                                e.preventDefault();
+                              e.preventDefault();
-                                e.stopPropagation();
+                              e.stopPropagation();
-                              }}
+                            }}
-                              onSelect={() => {
+                            onSelect={() => {
-                                if (disabledItem) return;
+                              if (disabledItem) return;
 
-                                if (selected.length >= maxSelected) {
+                              if (selected.length >= maxSelected) {
-                                  onMaxSelected?.(selected.length);
+                                onMaxSelected?.(selected.length);
-                                  return;
+                                return;
-                                }
+                              }
 
-                                setInputValue('');
+                              setInputValue('');
 
-                                // Guard against duplicates (safety)
+                              // Guard against duplicates (safety)
-                                if (selected.some((s) => s.value === option.value)) return;
+                              if (selected.some((s) => s.value === option.value)) return;
 
-                                const newOptions = [...selected, option];
+                              const newOptions = [...selected, option];
-                                setSelected(newOptions);
+                              setSelected(newOptions);
-                                onChange?.(newOptions);
+                              onChange?.(newOptions);
-                              }}
+                            }}
-                              className={cn(
+                            className={cn(
-                                'cursor-pointer',
+                              'cursor-pointer',
-                                disabledItem && 'cursor-default text-muted-foreground',
+                              disabledItem && 'cursor-default text-muted-foreground',
-                              )}
+                            )}
-                            >
+                          >
-                              {option.label}
+                            {option.label}
-                            </CommandItem>
+                          </CommandItem>
-                          );
+                        );
-                        })}
+                      })}
-                      </>
                     </CommandGroup>
                   ))}
                 </>

src/components/ui/select.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as SelectPrimitive from "@radix-ui/react-select"
+import * as SelectPrimitive from "@radix-ui/react-select";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import * as React from "react"
+import type * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
@@ -30,7 +30,7 @@ function SelectTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -38,7 +38,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -47,7 +47,7 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -65,7 +65,7 @@ function SelectContent({
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
           position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         align={align}
@@ -76,7 +76,7 @@ function SelectContent({
           className={cn(
             "p-1",
             position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
           )}
         >
           {children}
@@ -84,7 +84,7 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
 function SelectLabel({
@@ -97,7 +97,7 @@ function SelectLabel({
       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -110,7 +110,7 @@ function SelectItem({
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -124,7 +124,7 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -137,7 +137,7 @@ function SelectSeparator({
       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -149,13 +149,13 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -167,13 +167,13 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "flex cursor-default items-center justify-center py-1",
-        className
+        className,
       )}
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
 export {
@@ -187,5 +187,5 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue
-}
+};
 

src/schemas/commissionCustomCard.ts

@@ -28,6 +28,7 @@ export const commissionCustomCardSchema = z.object({
   isVisible: z.boolean(),
   isSpecialOffer: z.boolean(),
   referenceImageUrl: z.string().nullable().optional(),
+  tagIds: z.array(z.string()).optional(),
   options: z.array(optionField).optional(),
   extras: z.array(extraField).optional(),
 });

src/schemas/commissionType.ts

@@ -32,6 +32,7 @@ const customInputsField = z.object({
 export const commissionTypeSchema = z.object({
   name: z.string().min(1, "Name is required. Min 1 character."),
   description: z.string().optional(),
+  tagIds: z.array(z.string()).optional(),
   options: z.array(optionField).optional(),
   extras: z.array(extraField).optional(),
   customInputs: z.array(customInputsField).optional(),