Fix artwork edit page

src/actions/uploads/createImageFromFile.ts

@@ -151,7 +151,7 @@ export async function createImageFromFile(
       name: fileName,
       fileKey,
       originalFile: fileName,
-      uploadDate: lastModified,
+      uploadDate: new Date(),
       fileType: realFileType,
       fileSize,
     },

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

@@ -22,25 +22,25 @@ export default async function ArtworkSinglePage({ params }: { params: Promise<{
     <div>
       <h1 className="text-2xl font-bold mb-4">Edit artwork</h1>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div>
+        <div className="space-y-6">
           {item ? <EditArtworkForm artwork={item} tags={tags} categories={categories} /> : 'Artwork not found...'}
-          <div className="mt-6">
+          <div>
             {item && <DeleteArtworkButton artworkId={item.id} />}
           </div>
           <div>
-            {item && <ArtworkVariants artworkId={item.id} variants={item.variants} />}
+            {item && <ArtworkTimelapse artworkId={item.id} timelapse={item.timelapse} />}
           </div>
         </div>
         <div className="space-y-6">
-          <div>
-            {item && <ArtworkTimelapse artworkId={item.id} timelapse={item.timelapse} />}
-          </div>
           <div>
             {item && <ArtworkColors colors={item.colors} artworkId={item.id} />}
           </div>
           <div>
             {item && <ArtworkDetails artwork={item} />}
           </div>
+          <div>
+            {item && <ArtworkVariants artworkId={item.id} variants={item.variants} />}
+          </div>
         </div>
       </div>
     </div>

src/components/artworks/single/EditArtworkForm.tsx

@@ -2,23 +2,19 @@
 
 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 { Input } from "@/components/ui/input";
 import MultipleSelector from "@/components/ui/multiselect";
-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 { cn } from "@/lib/utils";
+import type { ArtTag } from "@/generated/prisma/client";
 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 { 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 }:
   {
@@ -82,7 +78,7 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               <FormItem>
                 <FormLabel>Alt Text</FormLabel>
                 <FormControl>
-                  <Input {...field} placeholder="Alt for this image" />
+                  <Textarea {...field} placeholder="Alt for this image" />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -155,7 +151,7 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               </FormItem>
             )}
           />
-          {/* Date  */}
+          {/* Date 
           <FormField
             control={form.control}
             name="creationDate"
@@ -195,7 +191,7 @@ export default function EditArtworkForm({ artwork, categories, tags }:
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           {/* Select */}
           <FormField
             control={form.control}
@@ -337,21 +333,6 @@ export default function EditArtworkForm({ artwork, categories, tags }:
           />
 
           {/* Boolean */}
-          <FormField
-            control={form.control}
-            name="needsWork"
-            render={({ field }) => (
-              <FormItem className="flex items-center justify-between rounded-lg border p-4">
-                <div className="space-y-0.5">
-                  <FormLabel>Needs some work</FormLabel>
-                  <FormDescription></FormDescription>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
           <FormField
             control={form.control}
             name="nsfw"
@@ -367,21 +348,6 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="published"
-            render={({ field }) => (
-              <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>
-                </div>
-                <FormControl>
-                  <Switch checked={field.value} onCheckedChange={field.onChange} />
-                </FormControl>
-              </FormItem>
-            )}
-          />
           <FormField
             control={form.control}
             name="setAsHeader"
@@ -397,51 +363,37 @@ export default function EditArtworkForm({ artwork, categories, tags }:
               </FormItem>
             )}
           />
-          {/* Read only */}
-          {/* <FormField
+          <FormField
             control={form.control}
-            name="fileKey"
+            name="needsWork"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Image Key</FormLabel>
-                <FormControl><Input {...field} disabled /></FormControl>
-                <FormMessage />
+              <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel>Needs some work</FormLabel>
+                  <FormDescription></FormDescription>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
               </FormItem>
             )}
           />
           <FormField
             control={form.control}
-            name="originalFile"
+            name="published"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Original file</FormLabel>
-                <FormControl><Input {...field} disabled /></FormControl>
-                <FormMessage />
+              <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>
+                </div>
+                <FormControl>
+                  <Switch checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
               </FormItem>
             )}
           />
-          <FormField
-            control={form.control}
-            name="fileType"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Filetype</FormLabel>
-                <FormControl><Input {...field} disabled /></FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="fileSize"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>FileSize</FormLabel>
-                <FormControl><Input type="number" {...field} disabled /></FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          /> */}
+
           <div className="flex flex-col gap-4">
             <Button type="submit">Submit</Button>
             <Button type="reset" variant="secondary" onClick={() => router.back()}>Cancel</Button>