modify commission ordering form

src/components/commissions/CommissionCard.tsx

@@ -3,7 +3,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma"
 // import { useState } from "react"
-import { Badge } from "../ui/badge"
+// import { Badge } from "../ui/badge"
 
 type CommissionTypeWithItems = CommissionType & {
   options: (CommissionTypeOption & {
@@ -85,13 +85,13 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
             </ul>
           </div>
 
-          <div className="flex flex-wrap gap-2">
+          {/* <div className="flex flex-wrap gap-2">
             {commission.extras.map((extra) => (
               <Badge variant="outline" key={extra.id}>
                 {extra.extra?.name}
               </Badge>
             ))}
-          </div>
+          </div> */}
         </CardContent>
       </Card>
     </div>

src/components/commissions/CommissionOrderForm.tsx

@@ -77,7 +77,6 @@ export function CommissionOrderForm({ types }: Props) {
 
   async function onSubmit(values: z.infer<typeof commissionOrderSchema>) {
     console.log("Submit:", { ...values, files })
-    // TODO: send to server
   }
 
   return (
@@ -220,12 +219,23 @@ export function CommissionOrderForm({ types }: Props) {
           )}
         />
 
-        <div>
+        <FormItem>
           <FormLabel>Reference Images</FormLabel>
-          <FileDropzone onFilesSelected={(f: File[]) => setFiles(f)} />
-        </div>
+          <FormControl>
+            <div className="space-y-2">
+              <FileDropzone onFilesSelected={setFiles} />
+              {files.length > 0 && (
+                <ul className="list-disc pl-4 text-sm text-muted-foreground">
+                  {files.map((file, i) => (
+                    <li key={i}>{file.name}</li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </FormControl>
+        </FormItem>
 
-        <div className="text-xl font-semibold">
+        <div className="text-lg font-semibold">
           Estimated Price: €{price.toFixed(2)}
         </div>
 

src/components/commissions/FileDropzone.tsx

@@ -1,24 +1,65 @@
-// components/form/FileDropzone.tsx
 "use client"
-import { useCallback } from "react"
+
+import { cn } from "@/lib/utils"
+import { useCallback, useRef, useState } from "react"
 
 export function FileDropzone({
   onFilesSelected,
 }: {
   onFilesSelected: (files: File[]) => void
 }) {
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      onFilesSelected(Array.from(e.target.files))
+  const [isDragging, setIsDragging] = useState(false)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleFiles = (files: FileList | null) => {
+    if (files) {
+      onFilesSelected(Array.from(files))
     }
-  }, [onFilesSelected])
+  }
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragging(false)
+    handleFiles(e.dataTransfer.files)
+  }
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragging(true)
+  }
+
+  const handleDragLeave = () => {
+    setIsDragging(false)
+  }
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      handleFiles(e.target.files)
+    },
+    [onFilesSelected]
+  )
 
   return (
-    <input
-      type="file"
-      multiple
-      onChange={handleChange}
-      className="border p-2 rounded-md"
-    />
+    <div
+      onClick={() => inputRef.current?.click()}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      className={cn(
+        "w-full border-2 border-dashed rounded-md p-6 text-center cursor-pointer transition-colors",
+        isDragging ? "border-primary bg-muted" : "border-muted-foreground/30"
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        onChange={handleChange}
+        className="hidden"
+      />
+      <p className="text-sm text-muted-foreground">
+        Drag & drop images here or click to upload
+      </p>
+    </div>
   )
 }