Add local AI vition option for alt text

prisma/migrations/20260201142100_com_7/migration.sql

@@ -1,65 +0,0 @@
--- CreateTable
-CREATE TABLE "CommissionCustomCard" (
-    "id" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-    "sortIndex" INTEGER NOT NULL DEFAULT 0,
-    "name" TEXT NOT NULL,
-    "description" TEXT,
-    "referenceImageUrl" TEXT,
-    "isVisible" BOOLEAN NOT NULL DEFAULT true,
-    "isSpecialOffer" BOOLEAN NOT NULL DEFAULT false,
-
-    CONSTRAINT "CommissionCustomCard_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "CommissionCustomCardOption" (
-    "id" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-    "sortIndex" INTEGER NOT NULL DEFAULT 0,
-    "cardId" TEXT NOT NULL,
-    "optionId" TEXT NOT NULL,
-    "priceRange" TEXT,
-    "pricePercent" DOUBLE PRECISION,
-    "price" DOUBLE PRECISION,
-
-    CONSTRAINT "CommissionCustomCardOption_pkey" PRIMARY KEY ("id")
-);
-
--- CreateTable
-CREATE TABLE "CommissionCustomCardExtra" (
-    "id" TEXT NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-    "sortIndex" INTEGER NOT NULL DEFAULT 0,
-    "cardId" TEXT NOT NULL,
-    "extraId" TEXT NOT NULL,
-    "priceRange" TEXT,
-    "pricePercent" DOUBLE PRECISION,
-    "price" DOUBLE PRECISION,
-
-    CONSTRAINT "CommissionCustomCardExtra_pkey" PRIMARY KEY ("id")
-);
-
--- CreateIndex
-CREATE INDEX "CommissionCustomCard_isVisible_sortIndex_idx" ON "CommissionCustomCard"("isVisible", "sortIndex");
-
--- CreateIndex
-CREATE UNIQUE INDEX "CommissionCustomCardOption_cardId_optionId_key" ON "CommissionCustomCardOption"("cardId", "optionId");
-
--- CreateIndex
-CREATE UNIQUE INDEX "CommissionCustomCardExtra_cardId_extraId_key" ON "CommissionCustomCardExtra"("cardId", "extraId");
-
--- AddForeignKey
-ALTER TABLE "CommissionCustomCardOption" ADD CONSTRAINT "CommissionCustomCardOption_cardId_fkey" FOREIGN KEY ("cardId") REFERENCES "CommissionCustomCard"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "CommissionCustomCardOption" ADD CONSTRAINT "CommissionCustomCardOption_optionId_fkey" FOREIGN KEY ("optionId") REFERENCES "CommissionOption"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "CommissionCustomCardExtra" ADD CONSTRAINT "CommissionCustomCardExtra_cardId_fkey" FOREIGN KEY ("cardId") REFERENCES "CommissionCustomCard"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
--- AddForeignKey
-ALTER TABLE "CommissionCustomCardExtra" ADD CONSTRAINT "CommissionCustomCardExtra_extraId_fkey" FOREIGN KEY ("extraId") REFERENCES "CommissionExtra"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20260201144904_com_8/migration.sql

@@ -1,5 +0,0 @@
--- AlterTable
-ALTER TABLE "CommissionRequest" ADD COLUMN     "customCardId" TEXT;
-
--- AddForeignKey
-ALTER TABLE "CommissionRequest" ADD CONSTRAINT "CommissionRequest_customCardId_fkey" FOREIGN KEY ("customCardId") REFERENCES "CommissionCustomCard"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/schema.prisma

@@ -271,26 +271,6 @@ model CommissionType {
   requests     CommissionRequest[]
 }
 
-model CommissionCustomCard {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  sortIndex Int      @default(0)
-
-  name String
-
-  description String?
-  referenceImageUrl String?
-  isVisible Boolean @default(true)
-  isSpecialOffer Boolean @default(false)
-
-  options CommissionCustomCardOption[]
-  extras  CommissionCustomCardExtra[]
-  requests CommissionRequest[]
-
-  @@index([isVisible, sortIndex])
-}
-
 model CommissionOption {
   id        String   @id @default(cuid())
   createdAt DateTime @default(now())
@@ -302,7 +282,6 @@ model CommissionOption {
   description String?
 
   types    CommissionTypeOption[]
-  customCards CommissionCustomCardOption[]
   requests CommissionRequest[]
 }
 
@@ -337,7 +316,6 @@ model CommissionExtra {
 
   requests CommissionRequest[]
   types    CommissionTypeExtra[]
-  customCards CommissionCustomCardExtra[]
 }
 
 model CommissionTypeExtra {
@@ -359,25 +337,6 @@ model CommissionTypeExtra {
   @@unique([typeId, extraId])
 }
 
-model CommissionCustomCardOption {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  sortIndex Int      @default(0)
-
-  cardId   String
-  optionId String
-
-  priceRange   String?
-  pricePercent Float?
-  price        Float?
-
-  card   CommissionCustomCard @relation(fields: [cardId], references: [id], onDelete: Cascade)
-  option CommissionOption     @relation(fields: [optionId], references: [id])
-
-  @@unique([cardId, optionId])
-}
-
 model CommissionCustomInput {
   id        String   @id @default(cuid())
   createdAt DateTime @default(now())
@@ -409,25 +368,6 @@ model CommissionTypeCustomInput {
   @@unique([typeId, customInputId])
 }
 
-model CommissionCustomCardExtra {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  sortIndex Int      @default(0)
-
-  cardId  String
-  extraId String
-
-  priceRange   String?
-  pricePercent Float?
-  price        Float?
-
-  card  CommissionCustomCard @relation(fields: [cardId], references: [id], onDelete: Cascade)
-  extra CommissionExtra      @relation(fields: [extraId], references: [id])
-
-  @@unique([cardId, extraId])
-}
-
 model CommissionRequest {
   id        String   @id @default(cuid())
   index     Int      @default(autoincrement())
@@ -446,10 +386,8 @@ model CommissionRequest {
 
   optionId String?
   typeId   String?
-  customCardId String?
   option   CommissionOption? @relation(fields: [optionId], references: [id])
   type     CommissionType?   @relation(fields: [typeId], references: [id])
-  customCard CommissionCustomCard? @relation(fields: [customCardId], references: [id])
 
   extras CommissionExtra[]
   files  CommissionRequestFile[]

src/actions/artworks/generateAltText.ts

@@ -0,0 +1,86 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { getImageBufferFromS3Key } from "@/utils/getImageBufferFromS3";
+
+export async function generateAltTextForArtwork(
+  artworkId: string,
+  prompt?: string,
+) {
+  const serviceUrl = process.env.ALT_TEXT_SERVICE_URL;
+  if (!serviceUrl) {
+    throw new Error("ALT_TEXT_SERVICE_URL is not set");
+  }
+
+  const artwork = await prisma.artwork.findUnique({
+    where: { id: artworkId },
+    select: {
+      variants: {
+        where: { type: "original" },
+        select: { s3Key: true },
+        take: 1,
+      },
+    },
+  });
+
+  const original = artwork?.variants?.[0];
+  if (!original?.s3Key) {
+    throw new Error("Original image variant not found");
+  }
+
+  const buffer = await getImageBufferFromS3Key(original.s3Key);
+
+  const formData = new FormData();
+  const bytes = new Uint8Array(buffer);
+  formData.append(
+    "image",
+    new Blob([bytes], { type: "image/jpeg" }),
+    "artwork.jpg",
+  );
+  if (prompt && prompt.trim().length > 0) {
+    formData.append("prompt", prompt.trim());
+  }
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 120000);
+
+  let response: Response | null = null;
+  let lastError: unknown = null;
+
+  for (let attempt = 0; attempt < 2; attempt += 1) {
+    try {
+      response = await fetch(`${serviceUrl}/caption`, {
+        method: "POST",
+        body: formData,
+        signal: controller.signal,
+      });
+      break;
+    } catch (err) {
+      lastError = err;
+      if (attempt === 0) {
+        await new Promise((resolve) => setTimeout(resolve, 750));
+      }
+    }
+  }
+
+  clearTimeout(timeoutId);
+
+  if (!response) {
+    throw new Error(`Alt text service failed: ${String(lastError)}`);
+  }
+
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(`Alt text service failed: ${text}`);
+  }
+
+  const data = (await response.json()) as { altText?: string; error?: string };
+  if (data.error) {
+    throw new Error(`Alt text service error: ${data.error}`);
+  }
+  if (!data.altText) {
+    throw new Error(`Alt text service returned no result: ${JSON.stringify(data)}`);
+  }
+
+  return data.altText.trim();
+}

src/actions/commissions/customCards/deleteCard.ts

@@ -1,9 +0,0 @@
-"use server";
-
-import { prisma } from "@/lib/prisma";
-
-export async function deleteCommissionCustomCard(id: string) {
-  await prisma.commissionCustomCard.delete({
-    where: { id },
-  });
-}

src/actions/commissions/customCards/images.ts

@@ -1,94 +0,0 @@
-"use server";
-
-import { s3 } from "@/lib/s3";
-import {
-  DeleteObjectCommand,
-  ListObjectsV2Command,
-  PutObjectCommand,
-} from "@aws-sdk/client-s3";
-
-const PREFIX = "commissions/custom-cards/";
-
-export type CommissionCustomCardImageItem = {
-  key: string;
-  url: string;
-  size: number | null;
-  lastModified: string | null;
-};
-
-function buildImageUrl(key: string) {
-  return `/api/image/${encodeURI(key)}`;
-}
-
-function sanitizeFilename(name: string) {
-  return name.replace(/[^a-zA-Z0-9._-]/g, "_");
-}
-
-export async function listCommissionCustomCardImages(): Promise<
-  CommissionCustomCardImageItem[]
-> {
-  const command = new ListObjectsV2Command({
-    Bucket: `${process.env.BUCKET_NAME}`,
-    Prefix: PREFIX,
-  });
-
-  const res = await s3.send(command);
-  return (
-    res.Contents?.filter((obj) => obj.Key && obj.Key !== PREFIX).map((obj) => {
-      const key = obj.Key as string;
-      return {
-        key,
-        url: buildImageUrl(key),
-        size: obj.Size ?? null,
-        lastModified: obj.LastModified?.toISOString() ?? null,
-      };
-    }) ?? []
-  );
-}
-
-export async function uploadCommissionCustomCardImage(
-  formData: FormData
-): Promise<CommissionCustomCardImageItem> {
-  const file = formData.get("file");
-
-  if (!(file instanceof File)) {
-    throw new Error("Missing file");
-  }
-
-  if (!file.type.startsWith("image/")) {
-    throw new Error("Only image uploads are allowed");
-  }
-
-  const safeName = sanitizeFilename(file.name || "custom-card");
-  const key = `${PREFIX}${Date.now()}-${safeName}`;
-  const buffer = Buffer.from(await file.arrayBuffer());
-
-  await s3.send(
-    new PutObjectCommand({
-      Bucket: `${process.env.BUCKET_NAME}`,
-      Key: key,
-      Body: buffer,
-      ContentType: file.type,
-    })
-  );
-
-  return {
-    key,
-    url: buildImageUrl(key),
-    size: file.size,
-    lastModified: new Date().toISOString(),
-  };
-}
-
-export async function deleteCommissionCustomCardImage(key: string) {
-  if (!key.startsWith(PREFIX)) {
-    throw new Error("Invalid key");
-  }
-
-  await s3.send(
-    new DeleteObjectCommand({
-      Bucket: `${process.env.BUCKET_NAME}`,
-      Key: key,
-    })
-  );
-}

src/actions/commissions/customCards/newCard.ts

@@ -1,52 +0,0 @@
-"use server";
-
-import { prisma } from "@/lib/prisma";
-import {
-  commissionCustomCardSchema,
-  type CommissionCustomCardValues,
-} from "@/schemas/commissionCustomCard";
-
-export async function createCommissionCustomCard(
-  formData: CommissionCustomCardValues
-) {
-  const parsed = commissionCustomCardSchema.safeParse(formData);
-
-  if (!parsed.success) {
-    console.error("Validation failed", parsed.error);
-    throw new Error("Invalid input");
-  }
-
-  const data = parsed.data;
-
-  const created = await prisma.commissionCustomCard.create({
-    data: {
-      name: data.name,
-      description: data.description,
-      referenceImageUrl: data.referenceImageUrl ?? null,
-      isVisible: data.isVisible ?? true,
-      isSpecialOffer: data.isSpecialOffer ?? false,
-      options: {
-        create:
-          data.options?.map((opt, index) => ({
-            option: { connect: { id: opt.optionId } },
-            price: opt.price,
-            pricePercent: opt.pricePercent,
-            priceRange: opt.priceRange,
-            sortIndex: index,
-          })) ?? [],
-      },
-      extras: {
-        create:
-          data.extras?.map((ext, index) => ({
-            extra: { connect: { id: ext.extraId } },
-            price: ext.price,
-            pricePercent: ext.pricePercent,
-            priceRange: ext.priceRange,
-            sortIndex: index,
-          })) ?? [],
-      },
-    },
-  });
-
-  return created;
-}

src/actions/commissions/customCards/updateCard.ts

@@ -1,51 +0,0 @@
-"use server";
-
-import { prisma } from "@/lib/prisma";
-import {
-  commissionCustomCardSchema,
-  type CommissionCustomCardValues,
-} from "@/schemas/commissionCustomCard";
-
-export async function updateCommissionCustomCard(
-  id: string,
-  rawData: CommissionCustomCardValues
-) {
-  const data = commissionCustomCardSchema.parse(rawData);
-
-  const updated = await prisma.commissionCustomCard.update({
-    where: { id },
-    data: {
-      name: data.name,
-      description: data.description,
-      referenceImageUrl: data.referenceImageUrl ?? null,
-      isVisible: data.isVisible ?? true,
-      isSpecialOffer: data.isSpecialOffer ?? false,
-      options: {
-        deleteMany: {},
-        create: data.options?.map((opt, index) => ({
-          option: { connect: { id: opt.optionId } },
-          price: opt.price ?? null,
-          pricePercent: opt.pricePercent ?? null,
-          priceRange: opt.priceRange ?? null,
-          sortIndex: index,
-        })),
-      },
-      extras: {
-        deleteMany: {},
-        create: data.extras?.map((ext, index) => ({
-          extra: { connect: { id: ext.extraId } },
-          price: ext.price ?? null,
-          pricePercent: ext.pricePercent ?? null,
-          priceRange: ext.priceRange ?? null,
-          sortIndex: index,
-        })),
-      },
-    },
-    include: {
-      options: true,
-      extras: true,
-    },
-  });
-
-  return updated;
-}

src/actions/commissions/customCards/updateSortOrder.ts

@@ -1,16 +0,0 @@
-"use server";
-
-import { prisma } from "@/lib/prisma";
-
-export async function updateCommissionCustomCardSortOrder(
-  items: { id: string; sortIndex: number }[]
-) {
-  await prisma.$transaction(
-    items.map((item) =>
-      prisma.commissionCustomCard.update({
-        where: { id: item.id },
-        data: { sortIndex: item.sortIndex },
-      })
-    )
-  );
-}

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

@@ -1,43 +0,0 @@
-import { listCommissionCustomCardImages } from "@/actions/commissions/customCards/images";
-import EditCustomCardForm from "@/components/commissions/customCards/EditCustomCardForm";
-import { prisma } from "@/lib/prisma";
-import { notFound } from "next/navigation";
-
-export default async function CommissionCustomCardEditPage({
-  params,
-}: {
-  params: { id: string };
-}) {
-  const { id } = await params;
-
-  const [card, options, extras, images] = await Promise.all([
-    prisma.commissionCustomCard.findUnique({
-      where: { id },
-      include: {
-        options: { orderBy: { sortIndex: "asc" } },
-        extras: { orderBy: { sortIndex: "asc" } },
-      },
-    }),
-    prisma.commissionOption.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
-    prisma.commissionExtra.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
-    listCommissionCustomCardImages(),
-  ]);
-
-  if (!card) {
-    notFound();
-  }
-
-  return (
-    <div>
-      <div className="flex gap-4 justify-between pb-8">
-        <h1 className="text-2xl font-bold mb-4">Edit Custom Commission Card</h1>
-      </div>
-      <EditCustomCardForm
-        card={card}
-        allOptions={options}
-        allExtras={extras}
-        images={images}
-      />
-    </div>
-  );
-}

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

@@ -1,20 +0,0 @@
-import { listCommissionCustomCardImages } from "@/actions/commissions/customCards/images";
-import NewCustomCardForm from "@/components/commissions/customCards/NewCustomCardForm";
-import { prisma } from "@/lib/prisma";
-
-export default async function CommissionCustomCardsNewPage() {
-  const [options, extras, images] = await Promise.all([
-    prisma.commissionOption.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
-    prisma.commissionExtra.findMany({ orderBy: [{ sortIndex: "asc" }, { name: "asc" }] }),
-    listCommissionCustomCardImages(),
-  ]);
-
-  return (
-    <div>
-      <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} />
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-import ListCustomCards from "@/components/commissions/customCards/ListCustomCards";
-import { prisma } from "@/lib/prisma";
-import { PlusCircleIcon } from "lucide-react";
-import Link from "next/link";
-
-export default async function CommissionCustomCardsPage() {
-  const cards = await prisma.commissionCustomCard.findMany({
-    include: {
-      options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
-      extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
-    },
-    orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
-  });
-
-  return (
-    <div>
-      <div className="flex gap-4 justify-between pb-8">
-        <h1 className="text-2xl font-bold mb-4">Custom Commission Cards</h1>
-        <Link
-          href="/commissions/custom-cards/new"
-          className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded"
-        >
-          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" />
-          Add new Card
-        </Link>
-      </div>
-      {cards && cards.length > 0 ? (
-        <ListCustomCards cards={cards} />
-      ) : (
-        <p className="text-muted-foreground italic">No custom cards found.</p>
-      )}
-    </div>
-  );
-}

src/app/api/v1/commissions/route.ts

@@ -7,7 +7,6 @@ import { z } from "zod/v4";
 
 const payloadSchema = z.object({
   typeId: z.string().min(1).optional().nullable(),
-  customCardId: z.string().min(1).optional().nullable(),
   optionId: z.string().min(1).optional().nullable(),
   extraIds: z.array(z.string().min(1)).default([]),
 
@@ -15,23 +14,6 @@ const payloadSchema = z.object({
   customerEmail: z.string().email().max(320),
   customerSocials: z.string().max(2000).optional().nullable(),
   message: z.string().min(1).max(20_000),
-}).superRefine((data, ctx) => {
-  const hasType = Boolean(data.typeId);
-  const hasCustom = Boolean(data.customCardId);
-  if (!hasType && !hasCustom) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      path: ["typeId"],
-      message: "Missing commission type or custom card",
-    });
-  }
-  if (hasType && hasCustom) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      path: ["typeId"],
-      message: "Only one of typeId or customCardId is allowed",
-    });
-  }
 });
 
 function safeJsonParse(input: string) {
@@ -101,7 +83,6 @@ export async function POST(request: Request) {
         message: payload.data.message,
 
         typeId: payload.data.typeId ?? null,
-        customCardId: payload.data.customCardId ?? null,
         optionId: payload.data.optionId ?? null,
 
         ipAddress,

src/components/artworks/single/EditArtworkForm.tsx

@@ -1,32 +1,50 @@
-"use client"
+"use client";
 
+import { generateAltTextForArtwork } from "@/actions/artworks/generateAltText";
 import { updateArtwork } from "@/actions/artworks/updateArtwork";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-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 MultipleSelector from "@/components/ui/multiselect";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import { ArtTag } from "@/generated/prisma/client";
+import type { ArtTag } from "@/generated/prisma/client";
 import { cn } from "@/lib/utils";
 import { artworkSchema } from "@/schemas/artworks/imageSchema";
-import { ArtworkWithRelations, CategoryWithTags } from "@/types/Artwork";
+import type { ArtworkWithRelations, CategoryWithTags } from "@/types/Artwork";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import { useRouter } from "next/navigation";
+import { useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod/v4";
+import type { z } from "zod/v4";
 
-export default function EditArtworkForm({ artwork, categories, tags }:
+export default function EditArtworkForm({
-  {
+  artwork,
-    artwork: ArtworkWithRelations,
+  categories,
-    categories: CategoryWithTags[]
+  tags,
-    tags: ArtTag[]
+}: {
-  }) {
+  artwork: ArtworkWithRelations;
+  categories: CategoryWithTags[];
+  tags: ArtTag[];
+}) {
   const router = useRouter();
+  const [isGeneratingAlt, startAltTransition] = useTransition();
   const form = useForm<z.infer<typeof artworkSchema>>({
     resolver: zodResolver(artworkSchema),
     defaultValues: {
@@ -41,19 +59,21 @@ export default function EditArtworkForm({ artwork, categories, tags }:
       notes: artwork.notes || "",
       month: artwork.month || undefined,
       year: artwork.year || undefined,
-      creationDate: artwork.creationDate ? new Date(artwork.creationDate) : undefined,
+      creationDate: artwork.creationDate
-      categoryIds: artwork.categories?.map(cat => cat.id) ?? [],
+        ? new Date(artwork.creationDate)
-      tagIds: artwork.tags?.map(tag => tag.id) ?? [],
+        : undefined,
+      categoryIds: artwork.categories?.map((cat) => cat.id) ?? [],
+      tagIds: artwork.tags?.map((tag) => tag.id) ?? [],
       newCategoryNames: [],
-      newTagNames: []
+      newTagNames: [],
-    }
+    },
-  })
+  });
 
   async function onSubmit(values: z.infer<typeof artworkSchema>) {
-    const updatedArtwork = await updateArtwork(values, artwork.id)
+    const updatedArtwork = await updateArtwork(values, artwork.id);
     if (updatedArtwork) {
-      toast.success("Artwork updated")
+      toast.success("Artwork updated");
-      router.push(`/artworks`)
+      router.push(`/artworks`);
     }
   }
 
@@ -80,10 +100,42 @@ export default function EditArtworkForm({ artwork, categories, tags }:
             name="altText"
             render={({ field }) => (
               <FormItem>
+                <div className="flex items-center justify-between gap-3">
                   <FormLabel>Alt Text</FormLabel>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    disabled={isGeneratingAlt}
+                    onClick={() =>
+                      startAltTransition(async () => {
+                        try {
+                          const alt = await generateAltTextForArtwork(
+                            artwork.id,
+                            field.value,
+                          );
+                          form.setValue("altText", alt, {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          });
+                          toast.success("Alt text generated");
+                        } catch (err) {
+                          console.error(err);
+                          toast.error("Alt text generation failed");
+                        }
+                      })
+                    }
+                  >
+                    {isGeneratingAlt ? "Generating..." : "Generate"}
+                  </Button>
+                </div>
                 <FormControl>
                   <Input {...field} placeholder="Alt for this image" />
                 </FormControl>
+                <FormDescription>
+                  Generates a caption from the original image. CPU-only can take
+                  10–30s.
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -95,7 +147,10 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               <FormItem>
                 <FormLabel>Description</FormLabel>
                 <FormControl>
-                  <Textarea {...field} placeholder="A descriptive text to the image" />
+                  <Textarea
+                    {...field}
+                    placeholder="A descriptive text to the image"
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -125,9 +180,11 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                   <Input
                     {...field}
                     type="number"
-                    value={field.value ?? ''}
+                    value={field.value ?? ""}
                     onChange={(e) =>
-                      field.onChange(e.target.value === '' ? undefined : +e.target.value)
+                      field.onChange(
+                        e.target.value === "" ? undefined : +e.target.value,
+                      )
                     }
                   />
                 </FormControl>
@@ -145,9 +202,11 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                   <Input
                     {...field}
                     type="number"
-                    value={field.value ?? ''}
+                    value={field.value ?? ""}
                     onChange={(e) =>
-                      field.onChange(e.target.value === '' ? undefined : +e.target.value)
+                      field.onChange(
+                        e.target.value === "" ? undefined : +e.target.value,
+                      )
                     }
                   />
                 </FormControl>
@@ -170,10 +229,12 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                           variant="outline"
                           className={cn(
                             "pl-3 text-left font-normal",
-                            !field.value && "text-muted-foreground"
+                            !field.value && "text-muted-foreground",
                           )}
                         >
-                          {field.value ? format(field.value, "PPP") : "Pick a date"}
+                          {field.value
+                            ? format(field.value, "PPP")
+                            : "Pick a date"}
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
@@ -182,7 +243,7 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                         mode="single"
                         selected={field.value}
                         onSelect={(date) => {
-                          field.onChange(date)
+                          field.onChange(date);
                         }}
                         initialFocus
                         fromYear={1990}
@@ -236,17 +297,23 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                       onChange={(options) => {
                         const values = options.map((o) => o.value);
 
-                        const existingIds = values.filter((v) => !v.startsWith("__new__:"));
+                        const existingIds = values.filter(
+                          (v) => !v.startsWith("__new__:"),
+                        );
                         const newNames = values
                           .filter((v) => v.startsWith("__new__:"))
                           .map((v) => v.replace("__new__:", "").trim())
                           .filter(Boolean);
 
                         field.onChange(existingIds);
-                        form.setValue("newCategoryNames", Array.from(new Set(newNames)), {
+                        form.setValue(
+                          "newCategoryNames",
+                          Array.from(new Set(newNames)),
+                          {
                             shouldDirty: true,
                             shouldValidate: true,
-                        });
+                          },
+                        );
                       }}
                     />
                   </FormControl>
@@ -276,7 +343,8 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                 .map((t) => {
                   let group = "Other tags";
                   if (selectedTagIds.includes(t.id)) group = "Selected";
-                  else if (preferredTagIds.has(t.id)) group = "From selected categories";
+                  else if (preferredTagIds.has(t.id))
+                    group = "From selected categories";
 
                   return { label: t.name, value: t.id, group };
                 })
@@ -301,12 +369,19 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                     <MultipleSelector
                       options={tagOptions}
                       groupBy="group"
-                      groupOrder={["Selected", "From selected categories", "Other tags"]}
+                      groupOrder={[
+                        "Selected",
+                        "From selected categories",
+                        "Other tags",
+                      ]}
                       showSelectedInDropdown
                       placeholder="Select or type to create tags"
                       hidePlaceholderWhenSelected
                       selectFirstItem
-                      value={[...selectedExistingOptions, ...selectedNewOptions]}
+                      value={[
+                        ...selectedExistingOptions,
+                        ...selectedNewOptions,
+                      ]}
                       creatable
                       createOption={(raw) => ({
                         value: `__new__:${raw}`,
@@ -316,17 +391,23 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                       onChange={(options) => {
                         const values = options.map((o) => o.value);
 
-                        const existingIds = values.filter((v) => !v.startsWith("__new__:"));
+                        const existingIds = values.filter(
+                          (v) => !v.startsWith("__new__:"),
+                        );
                         const newNames = values
                           .filter((v) => v.startsWith("__new__:"))
                           .map((v) => v.replace("__new__:", "").trim())
                           .filter(Boolean);
 
                         field.onChange(existingIds);
-                        form.setValue("newTagNames", Array.from(new Set(newNames)), {
+                        form.setValue(
+                          "newTagNames",
+                          Array.from(new Set(newNames)),
+                          {
                             shouldDirty: true,
                             shouldValidate: true,
-                        });
+                          },
+                        );
                       }}
                     />
                   </FormControl>
@@ -347,7 +428,10 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                   <FormDescription></FormDescription>
                 </div>
                 <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -359,10 +443,15 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               <FormItem className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-0.5">
                   <FormLabel>NSFW</FormLabel>
-                  <FormDescription>This image contains sensitive or adult content.</FormDescription>
+                  <FormDescription>
+                    This image contains sensitive or adult content.
+                  </FormDescription>
                 </div>
                 <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -374,10 +463,15 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               <FormItem className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-0.5">
                   <FormLabel>Publish</FormLabel>
-                  <FormDescription>Will this image be published.</FormDescription>
+                  <FormDescription>
+                    Will this image be published.
+                  </FormDescription>
                 </div>
                 <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -389,10 +483,15 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               <FormItem className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-0.5">
                   <FormLabel>Set as header image</FormLabel>
-                  <FormDescription>Will be the main banner image. Choose a fitting one.</FormDescription>
+                  <FormDescription>
+                    Will be the main banner image. Choose a fitting one.
+                  </FormDescription>
                 </div>
                 <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  <Switch
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -444,10 +543,16 @@ export default function EditArtworkForm({ artwork, categories, tags }:
           /> */}
           <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/commissions/customCards/CustomCardImagePicker.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import {
-  deleteCommissionCustomCardImage,
-  uploadCommissionCustomCardImage,
-} from "@/actions/commissions/customCards/images";
-import { Button } from "@/components/ui/button";
-import {
-  FormControl,
-  FormDescription,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form";
-import type { CommissionCustomCardValues } from "@/schemas/commissionCustomCard";
-import Image from "next/image";
-import { useMemo, useTransition } from "react";
-import type { UseFormReturn } from "react-hook-form";
-import { useWatch } from "react-hook-form";
-
-type Props = {
-  form: UseFormReturn<CommissionCustomCardValues>;
-  initialImages: { key: string; url: string }[];
-};
-
-export function CustomCardImagePicker({ form }: Props) {
-  const [isPending, startTransition] = useTransition();
-  const referenceImageUrl = useWatch({
-    control: form.control,
-    name: "referenceImageUrl",
-  });
-
-  const previewUrl = useMemo(() => {
-    if (!referenceImageUrl) return "";
-    return referenceImageUrl;
-  }, [referenceImageUrl]);
-
-  const handleUpload = (file: File) => {
-    const fd = new FormData();
-    fd.append("file", file);
-
-    startTransition(async () => {
-      const item = await uploadCommissionCustomCardImage(fd);
-      form.setValue("referenceImageUrl", item.url, { shouldDirty: true });
-    });
-  };
-
-  const handleDelete = () => {
-    const url = referenceImageUrl ?? "";
-    const key = url.replace(/^\/api\/image\//, "");
-    const decodedKey = decodeURIComponent(key);
-    if (!decodedKey) return;
-    if (!window.confirm("Delete this image from S3?")) return;
-
-    startTransition(async () => {
-      await deleteCommissionCustomCardImage(decodedKey);
-      form.setValue("referenceImageUrl", null, { shouldDirty: true });
-    });
-  };
-
-  return (
-    <FormItem>
-      <FormLabel>Reference image</FormLabel>
-      <FormControl>
-        <div className="flex flex-col gap-2">
-          <input type="hidden" {...form.register("referenceImageUrl")} />
-          {previewUrl ? (
-            <div className="flex flex-col gap-2">
-              <div className="relative w-full max-w-md overflow-hidden rounded-lg border border-border/60 bg-muted/40">
-                <Image
-                  src={previewUrl}
-                  alt="Reference preview"
-                  width={900}
-                  height={600}
-                  className="h-auto w-full object-cover"
-                />
-              </div>
-              <a
-                href={previewUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-primary underline"
-              >
-                Open full size
-              </a>
-            </div>
-          ) : (
-            <p className="text-sm text-muted-foreground">No image selected.</p>
-          )}
-
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-            <input
-              type="file"
-              accept="image/*"
-              onChange={(e) => {
-                const file = e.target.files?.[0];
-                if (file) handleUpload(file);
-                e.currentTarget.value = "";
-              }}
-            />
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={handleDelete}
-              disabled={!referenceImageUrl || isPending}
-            >
-              Delete image
-            </Button>
-          </div>
-        </div>
-      </FormControl>
-      <FormDescription>
-        Upload and preview a reference image stored in the custom card bucket folder.
-      </FormDescription>
-    </FormItem>
-  );
-}

src/components/commissions/customCards/EditCustomCardForm.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import { updateCommissionCustomCard } from "@/actions/commissions/customCards/updateCard";
-import type { CommissionCustomCardImageItem } from "@/actions/commissions/customCards/images";
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} 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 {
-  commissionCustomCardSchema,
-  type CommissionCustomCardValues,
-} from "@/schemas/commissionCustomCard";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { CommissionExtraField } from "../types/form/CommissionExtraField";
-import { CommissionOptionField } from "../types/form/CommissionOptionField";
-import { CustomCardImagePicker } from "./CustomCardImagePicker";
-
-type CustomCardOption = {
-  optionId: string;
-  price: number | null;
-  pricePercent: number | null;
-  priceRange: string | null;
-};
-
-type CustomCardExtra = {
-  extraId: string;
-  price: number | null;
-  pricePercent: number | null;
-  priceRange: string | null;
-};
-
-type CustomCardWithItems = {
-  id: string;
-  name: string;
-  description: string | null;
-  referenceImageUrl: string | null;
-  isVisible: boolean;
-  isSpecialOffer: boolean;
-  options: CustomCardOption[];
-  extras: CustomCardExtra[];
-};
-
-type Props = {
-  card: CustomCardWithItems;
-  allOptions: CommissionOption[];
-  allExtras: CommissionExtra[];
-  images: CommissionCustomCardImageItem[];
-};
-
-export default function EditCustomCardForm({
-  card,
-  allOptions,
-  allExtras,
-  images,
-}: Props) {
-  const router = useRouter();
-  const form = useForm<CommissionCustomCardValues>({
-    resolver: zodResolver(commissionCustomCardSchema),
-    defaultValues: {
-      name: card.name,
-      description: card.description ?? "",
-      isVisible: card.isVisible,
-      isSpecialOffer: card.isSpecialOffer,
-      referenceImageUrl: card.referenceImageUrl ?? null,
-      options: card.options.map((o) => ({
-        optionId: o.optionId,
-        price: o.price ?? undefined,
-        pricePercent: o.pricePercent ?? undefined,
-        priceRange: o.priceRange ?? undefined,
-      })),
-      extras: card.extras.map((e) => ({
-        extraId: e.extraId,
-        price: e.price ?? undefined,
-        pricePercent: e.pricePercent ?? undefined,
-        priceRange: e.priceRange ?? undefined,
-      })),
-    },
-  });
-
-  async function onSubmit(values: CommissionCustomCardValues) {
-    try {
-      await updateCommissionCustomCard(card.id, values);
-      toast.success("Custom commission card updated.");
-      router.push("/commissions/custom-cards");
-    } catch (err) {
-      console.error(err);
-      toast("Failed to update custom commission card.");
-    }
-  }
-
-  return (
-    <div className="flex flex-col gap-8">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>The name of the custom commission card.</FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>Optional description.</FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="isVisible"
-            render={({ field }) => (
-              <FormItem className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <FormLabel>Visible on app</FormLabel>
-                  <FormDescription>Controls whether the card is shown.</FormDescription>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="isSpecialOffer"
-            render={({ field }) => (
-              <FormItem className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <FormLabel>Special offer</FormLabel>
-                  <FormDescription>Adds a special offer badge on the app.</FormDescription>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="referenceImageUrl"
-            render={() => <CustomCardImagePicker form={form} initialImages={images} />}
-          />
-
-          <CommissionOptionField options={allOptions} />
-          <CommissionExtraField extras={allExtras} />
-
-          <div className="flex flex-col gap-4">
-            <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-}

src/components/commissions/customCards/ListCustomCards.tsx

@@ -1,219 +0,0 @@
-"use client";
-
-import { deleteCommissionCustomCard } from "@/actions/commissions/customCards/deleteCard";
-import { updateCommissionCustomCardSortOrder } from "@/actions/commissions/customCards/updateSortOrder";
-import { Badge } from "@/components/ui/badge";
-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 {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import { arrayMove, rectSortingStrategy, SortableContext } from "@dnd-kit/sortable";
-import { PencilIcon, TrashIcon } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState, useTransition } from "react";
-import SortableItemCard from "../types/SortableItemCard";
-
-type CustomCardOption = {
-  id: string;
-  optionId: string;
-  price: number | null;
-  pricePercent: number | null;
-  priceRange: string | null;
-  option: { name: string } | null;
-};
-
-type CustomCardExtra = {
-  id: string;
-  extraId: string;
-  price: number | null;
-  pricePercent: number | null;
-  priceRange: string | null;
-  extra: { name: string } | null;
-};
-
-export type CommissionCustomCardWithItems = {
-  id: string;
-  name: string;
-  description: string | null;
-  referenceImageUrl: string | null;
-  isVisible: boolean;
-  isSpecialOffer: boolean;
-  options: CustomCardOption[];
-  extras: CustomCardExtra[];
-};
-
-export default function ListCustomCards({
-  cards,
-}: {
-  cards: CommissionCustomCardWithItems[];
-}) {
-  const [items, setItems] = useState(cards);
-  const [isMounted, setIsMounted] = useState(false);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
-  const [isPending, startTransition] = useTransition();
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  const sensors = useSensors(useSensor(PointerSensor));
-
-  const handleDragEnd = async (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = items.findIndex((i) => i.id === active.id);
-    const newIndex = items.findIndex((i) => i.id === over.id);
-
-    if (oldIndex !== -1 && newIndex !== -1) {
-      const newItems = arrayMove(items, oldIndex, newIndex);
-      setItems(newItems);
-
-      await updateCommissionCustomCardSortOrder(
-        newItems.map((item, i) => ({ id: item.id, sortIndex: i }))
-      );
-    }
-  };
-
-  const confirmDelete = () => {
-    if (!deleteTargetId) return;
-    startTransition(async () => {
-      await deleteCommissionCustomCard(deleteTargetId);
-      setItems((prev) => prev.filter((i) => i.id !== deleteTargetId));
-      setDialogOpen(false);
-      setDeleteTargetId(null);
-    });
-  };
-
-  if (!isMounted) return null;
-
-  return (
-    <>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={items.map((i) => i.id)} strategy={rectSortingStrategy}>
-            {items.map((card) => (
-              <SortableItemCard key={card.id} id={card.id}>
-                <Card>
-                  <CardHeader className="relative">
-                    <div className="flex flex-wrap items-center gap-2">
-                      <CardTitle className="text-xl truncate">{card.name}</CardTitle>
-                      {!card.isVisible ? (
-                        <Badge variant="secondary">Hidden</Badge>
-                      ) : (
-                        <Badge variant="outline">Visible</Badge>
-                      )}
-                      {card.isSpecialOffer ? (
-                        <Badge className="bg-amber-500 text-amber-950 hover:bg-amber-500">
-                          Special
-                        </Badge>
-                      ) : null}
-                    </div>
-                    <CardDescription>{card.description}</CardDescription>
-                    {card.referenceImageUrl ? (
-                      <p className="text-xs text-muted-foreground">Has image</p>
-                    ) : null}
-                  </CardHeader>
-                  <CardContent className="flex flex-col justify-start gap-4">
-                    <div>
-                      <h4 className="font-semibold">Options</h4>
-                      <ul className="pl-4 list-disc">
-                        {card.options.map((opt) => (
-                          <li key={opt.id}>
-                            {opt.option?.name}:{" "}
-                            {opt.price !== null
-                              ? `${opt.price}€`
-                              : opt.pricePercent
-                                ? `+${opt.pricePercent}%`
-                                : opt.priceRange
-                                  ? `${opt.priceRange}€`
-                                  : "Included"}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                    <div>
-                      <h4 className="font-semibold">Extras</h4>
-                      <ul className="pl-4 list-disc">
-                        {card.extras.map((ext) => (
-                          <li key={ext.id}>
-                            {ext.extra?.name}:{" "}
-                            {ext.price !== null
-                              ? `${ext.price}€`
-                              : ext.pricePercent
-                                ? `+${ext.pricePercent}%`
-                                : ext.priceRange
-                                  ? `${ext.priceRange}€`
-                                  : "Included"}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </CardContent>
-                  <CardFooter className="flex flex-col gap-2">
-                    <Link href={`/commissions/custom-cards/${card.id}`} className="w-full">
-                      <Button variant="default" className="w-full flex items-center gap-2">
-                        <PencilIcon className="h-4 w-4" />
-                        Edit
-                      </Button>
-                    </Link>
-                    <Button
-                      variant="destructive"
-                      className="w-full flex items-center gap-2"
-                      onClick={() => {
-                        setDeleteTargetId(card.id);
-                        setDialogOpen(true);
-                      }}
-                    >
-                      <TrashIcon className="h-4 w-4" />
-                      Delete
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </SortableItemCard>
-            ))}
-          </SortableContext>
-        </DndContext>
-      </div>
-
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete this custom card?</DialogTitle>
-          </DialogHeader>
-          <p>This action cannot be undone. Are you sure you want to continue?</p>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button variant="destructive" disabled={isPending} onClick={confirmDelete}>
-              Confirm Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

src/components/commissions/customCards/NewCustomCardForm.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { createCommissionCustomCard } from "@/actions/commissions/customCards/newCard";
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} 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 {
-  commissionCustomCardSchema,
-  type CommissionCustomCardValues,
-} from "@/schemas/commissionCustomCard";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useRouter } from "next/navigation";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { CommissionExtraField } from "../types/form/CommissionExtraField";
-import { CommissionOptionField } from "../types/form/CommissionOptionField";
-import { CustomCardImagePicker } from "./CustomCardImagePicker";
-import type { CommissionCustomCardImageItem } from "@/actions/commissions/customCards/images";
-
-type Props = {
-  options: CommissionOption[];
-  extras: CommissionExtra[];
-  images: CommissionCustomCardImageItem[];
-};
-
-export default function NewCustomCardForm({ options, extras, images }: Props) {
-  const router = useRouter();
-  const form = useForm<CommissionCustomCardValues>({
-    resolver: zodResolver(commissionCustomCardSchema),
-    defaultValues: {
-      name: "",
-      description: "",
-      isVisible: true,
-      isSpecialOffer: false,
-      referenceImageUrl: null,
-      options: [],
-      extras: [],
-    },
-  });
-
-  async function onSubmit(values: CommissionCustomCardValues) {
-    try {
-      const created = await createCommissionCustomCard(values);
-      console.log("Commission custom card created:", created);
-      toast("Custom commission card created.");
-      router.push("/commissions/custom-cards");
-    } catch (err) {
-      console.error(err);
-      toast("Failed to create custom commission card.");
-    }
-  }
-
-  return (
-    <div className="flex flex-col gap-8">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>The name of the custom commission card.</FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormDescription>Optional description.</FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="isVisible"
-            render={({ field }) => (
-              <FormItem className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <FormLabel>Visible on app</FormLabel>
-                  <FormDescription>Controls whether the card is shown.</FormDescription>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="isSpecialOffer"
-            render={({ field }) => (
-              <FormItem className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <FormLabel>Special offer</FormLabel>
-                  <FormDescription>Adds a special offer badge on the app.</FormDescription>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="referenceImageUrl"
-            render={() => <CustomCardImagePicker form={form} initialImages={images} />}
-          />
-
-          <CommissionOptionField options={options} />
-          <CommissionExtraField extras={extras} />
-
-          <div className="flex flex-col gap-4">
-            <Button type="submit">Submit</Button>
-            <Button type="reset" variant="secondary" onClick={() => router.back()}>
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-}

src/components/global/TopNav.tsx

@@ -34,10 +34,6 @@ const commissionItems = [
     title: "Types",
     href: "/commissions/types",
   },
-  {
-    title: "Custom Cards",
-    href: "/commissions/custom-cards",
-  },
   {
     title: "Guidelines",
     href: "/commissions/guidelines",

src/components/global/nav.ts

@@ -45,7 +45,6 @@ export const adminNav: AdminNavGroup[] = [
       { title: "Requests", href: "/commissions/requests" },
       { title: "Board", href: "/commissions/kanban" },
       { title: "Types", href: "/commissions/types" },
-      { title: "Custom Cards", href: "/commissions/custom-cards" },
       { title: "TypeOptions", href: "/commissions/types/options" },
       { title: "TypeExtras", href: "/commissions/types/extras" },
       { title: "Guidelines", href: "/commissions/guidelines" },

src/schemas/commissionCustomCard.ts

@@ -1,35 +0,0 @@
-import * as z from "zod/v4";
-
-const rangePattern = /^\d{1,3}–\d{1,3}$/;
-
-const optionField = z.object({
-  optionId: z.string(),
-  price: z.number().optional(),
-  pricePercent: z.number().optional(),
-  priceRange: z
-    .string()
-    .regex(rangePattern, "Format must be like '10–80'")
-    .optional(),
-});
-
-const extraField = z.object({
-  extraId: z.string(),
-  price: z.number().optional(),
-  pricePercent: z.number().optional(),
-  priceRange: z
-    .string()
-    .regex(rangePattern, "Format must be like '10–80'")
-    .optional(),
-});
-
-export const commissionCustomCardSchema = z.object({
-  name: z.string().min(1, "Name is required. Min 1 character."),
-  description: z.string().optional(),
-  isVisible: z.boolean().default(true),
-  isSpecialOffer: z.boolean().default(false),
-  referenceImageUrl: z.string().nullable().optional(),
-  options: z.array(optionField).optional(),
-  extras: z.array(extraField).optional(),
-});
-
-export type CommissionCustomCardValues = z.infer<typeof commissionCustomCardSchema>;