Change mode toggle. Add type edit

src/components/items/commissions/types/EditTypeForm.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { updateCommissionType } from "@/actions/items/commissions/types/updateType";
+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 { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma";
+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 { CommissionExtraField } from "./form/CommissionExtraField";
+import { CommissionOptionField } from "./form/CommissionOptionField";
+
+type CommissionTypeWithConnections = CommissionType & {
+  options: (CommissionTypeOption & { option: CommissionOption })[]
+  extras: (CommissionTypeExtra & { extra: CommissionExtra })[]
+}
+
+type Props = {
+  type: CommissionTypeWithConnections
+  allOptions: CommissionOption[],
+  allExtras: CommissionExtra[],
+}
+
+export default function EditTypeForm({ type, allOptions, allExtras }: Props) {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof commissionTypeSchema>>({
+    resolver: zodResolver(commissionTypeSchema),
+    defaultValues: {
+      name: type.name,
+      description: type.description ?? "",
+      options: type.options.map((o) => ({
+        optionId: o.optionId,
+        price: o.price ?? undefined,
+        pricePercent: o.pricePercent ?? undefined,
+        priceRange: o.priceRange ?? undefined,
+      })),
+      extras: type.extras.map((e) => ({
+        extraId: e.extraId,
+        price: e.price ?? undefined,
+        pricePercent: e.pricePercent ?? undefined,
+        priceRange: e.priceRange ?? undefined,
+      })),
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof commissionTypeSchema>) {
+    try {
+      await updateCommissionType(type.id, values)
+      toast.success("Commission type updated.")
+      router.push("/items/commissions/types")
+    } catch (err) {
+      console.error(err)
+      toast("Failed to create commission type.")
+    }
+  }
+
+  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 commission type.</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>
+            )}
+          />
+
+          <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/items/commissions/types/ListTypes.tsx

@@ -2,7 +2,7 @@
 
 import { updateCommissionTypeSortOrder } from "@/actions/items/commissions/types/updateCommissionTypeSortOrder";
 import SortableItemCard from "@/components/drag/SortableItemCard";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma";
 import {
   closestCenter,
@@ -17,6 +17,8 @@ import {
   rectSortingStrategy,
   SortableContext
 } from "@dnd-kit/sortable";
+import { PencilIcon } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 
 type CommissionTypeWithItems = CommissionType & {
@@ -66,6 +68,7 @@ export default function ListTypes({ types }: { types: CommissionTypeWithItems[]
                 <CardHeader>
                   <CardTitle className="text-xl truncate">{type.name}</CardTitle>
                   <CardDescription>{type.description}</CardDescription>
+
                 </CardHeader>
                 <CardContent className="flex flex-col justify-start gap-4">
                   <div>
@@ -103,6 +106,15 @@ export default function ListTypes({ types }: { types: CommissionTypeWithItems[]
                     </ul>
                   </div>
                 </CardContent>
+                <CardFooter className="flex items-center justify-between">
+                  <Link
+                    href={`/items/commissions/types/${type.id}/edit`}
+                    className="text-sm text-primary hover:underline flex items-center gap-1"
+                  >
+                    <PencilIcon className="h-4 w-4" />
+                    Edit
+                  </Link>
+                </CardFooter>
               </Card>
             </SortableItemCard >
           ))}

src/components/items/commissions/types/form/CommissionExtraField.tsx

@@ -24,7 +24,7 @@ import {
   SortableContext,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useFieldArray, useFormContext } from "react-hook-form"
 import { ComboboxCreateable } from "./ComboboxCreateable"
 
@@ -33,12 +33,17 @@ type Props = {
 }
 
 export function CommissionExtraField({ extras: initialExtras }: Props) {
+  const [mounted, setMounted] = useState(false)
   const { control } = useFormContext()
   const { fields, append, remove, move } = useFieldArray({
     control,
     name: "extras",
   })
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const [extras, setExtras] = useState(initialExtras)
 
   const sensors = useSensors(useSensor(PointerSensor))
@@ -58,6 +63,8 @@ export function CommissionExtraField({ extras: initialExtras }: Props) {
     }
   }
 
+  if (!mounted) return null
+
   return (
     <div className="space-y-4">
       <h3 className="text-lg font-semibold">Extras</h3>

src/components/items/commissions/types/form/CommissionOptionField.tsx

@@ -24,7 +24,7 @@ import {
   SortableContext,
   verticalListSortingStrategy
 } from "@dnd-kit/sortable"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useFieldArray, useFormContext } from "react-hook-form"
 import { ComboboxCreateable } from "./ComboboxCreateable"
 
@@ -33,12 +33,17 @@ type Props = {
 }
 
 export function CommissionOptionField({ options: initialOptions }: Props) {
+  const [mounted, setMounted] = useState(false)
   const { control } = useFormContext()
   const { fields, append, remove, move } = useFieldArray({
     control,
     name: "options",
   })
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   const [options, setOptions] = useState(initialOptions)
 
   const sensors = useSensors(useSensor(PointerSensor))
@@ -58,6 +63,8 @@ export function CommissionOptionField({ options: initialOptions }: Props) {
     }
   }
 
+  if (!mounted) return null
+
   return (
     <div className="space-y-4">
       <h3 className="text-lg font-semibold">Options</h3>