diff --git a/src/components/items/commissions/types/form/CommissionCustomInputField.tsx b/src/components/items/commissions/types/form/CommissionCustomInputField.tsx
new file mode 100644
index 0000000..9d0e22c
--- /dev/null
+++ b/src/components/items/commissions/types/form/CommissionCustomInputField.tsx
@@ -0,0 +1,205 @@
+"use client"
+
+import { createCommissionCustomInput } from "@/actions/items/commissions/types/newType"
+import SortableItem from "@/components/drag/SortableItem"
+import { Button } from "@/components/ui/button"
+import {
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { CommissionCustomInput } from "@/generated/prisma"
+import {
+ closestCenter,
+ DndContext,
+ DragEndEvent,
+ PointerSensor,
+ useSensor,
+ useSensors,
+} from "@dnd-kit/core"
+import {
+ SortableContext,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { useEffect, useState } from "react"
+import { useFieldArray, useFormContext } from "react-hook-form"
+import { ComboboxCreateable } from "./ComboboxCreateable"
+
+type Props = {
+ customInputs: CommissionCustomInput[]
+}
+
+export function CommissionCustomInputField({ customInputs: initialInputs }: Props) {
+ const [mounted, setMounted] = useState(false)
+ const { control, setValue } = useFormContext()
+ const { fields, append, remove, move } = useFieldArray({
+ control,
+ name: "customInputs",
+ })
+
+ const [customInputs, setCustomInputs] = useState(initialInputs)
+ const sensors = useSensors(useSensor(PointerSensor))
+
+ useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ const handleDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event
+ if (!over || active.id === over.id) return
+ const oldIndex = fields.findIndex((f) => f.id === active.id)
+ const newIndex = fields.findIndex((f) => f.id === over.id)
+ if (oldIndex !== -1 && newIndex !== -1) {
+ move(oldIndex, newIndex)
+ }
+ }
+
+ if (!mounted) return null
+
+ return (
+
+
Custom Inputs
+
+
+ f.id)} strategy={verticalListSortingStrategy}>
+ {fields.map((field, index) => {
+ return (
+
+
+
+ {/* Picker */}
+ (
+
+ Input
+
+ ({
+ label: ci.name,
+ value: ci.id,
+ }))}
+ selected={inputField.value}
+ onSelect={(val) => {
+ const selected = customInputs.find((ci) => ci.id === val)
+ inputField.onChange(val)
+ if (selected) {
+ setValue(`customInputs.${index}.label`, selected.name)
+ setValue(`customInputs.${index}.inputType`, "text")
+ setValue(`customInputs.${index}.required`, false)
+ }
+ }}
+ onCreateNew={async (name) => {
+ const slug = name.toLowerCase().replace(/\s+/g, "-")
+ const newInput = await createCommissionCustomInput({
+ name,
+ fieldId: slug,
+ })
+ setCustomInputs((prev) => [...prev, newInput])
+ inputField.onChange(newInput.id)
+
+ setValue(`customInputs.${index}.label`, newInput.name)
+ setValue(`customInputs.${index}.inputType`, "text")
+ setValue(`customInputs.${index}.required`, false)
+ }}
+ />
+
+
+ )}
+ />
+
+ {/* Label */}
+ (
+
+ Label
+
+
+
+
+ )}
+ />
+
+ {/* Input Type */}
+ (
+
+ Input Type
+
+
+ )}
+ />
+
+ {/* Required */}
+ (
+
+ Required
+
+
+
+
+ )}
+ />
+
+ {/* Remove */}
+
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
diff --git a/src/schemas/commissionType.ts b/src/schemas/commissionType.ts
index 97dcabc..81008c1 100644
--- a/src/schemas/commissionType.ts
+++ b/src/schemas/commissionType.ts
@@ -16,11 +16,19 @@ const extraField = z.object({
priceRange: z.string().regex(rangePattern, "Format must be like '10–80'").optional(),
});
+const customInputsField = z.object({
+ customInputId: z.string(),
+ inputType: z.string(),
+ label: z.string(),
+ required: z.boolean(),
+});
+
export const commissionTypeSchema = z.object({
name: z.string().min(1, "Name is required. Min 1 character."),
description: z.string().optional(),
options: z.array(optionField).optional(),
extras: z.array(extraField).optional(),
+ customInputs: z.array(customInputsField).optional(),
})
export type commissionTypeSchema = z.infer
\ No newline at end of file