Add image edit function

package-lock.json

@@ -16,10 +16,12 @@
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "extract-colors": "^4.2.0",
         "get-pixels": "^3.3.3",
         "lucide-react": "^0.523.0",
@@ -28,6 +30,7 @@
         "next-themes": "^0.4.6",
         "node-vibrant": "^4.0.3",
         "react": "^19.0.0",
+        "react-day-picker": "^9.7.0",
         "react-dom": "^19.0.0",
         "react-hook-form": "^7.58.1",
         "react-icons": "^5.5.0",
@@ -986,6 +989,12 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==",
+      "license": "MIT"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
@@ -2513,6 +2522,43 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
+      "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
@@ -5491,6 +5537,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -8770,6 +8832,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.7.0.tgz",
+      "integrity": "sha512-urlK4C9XJZVpQ81tmVgd2O7lZ0VQldZeHzNejbwLWZSkzHH498KnArT0EHNfKBOWwKc935iMLGZdxXPRISzUxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "1.2.0",
+        "date-fns": "4.1.0",
+        "date-fns-jalali": "4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",

package.json

@@ -17,10 +17,12 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "extract-colors": "^4.2.0",
     "get-pixels": "^3.3.3",
     "lucide-react": "^0.523.0",
@@ -29,6 +31,7 @@
     "next-themes": "^0.4.6",
     "node-vibrant": "^4.0.3",
     "react": "^19.0.0",
+    "react-day-picker": "^9.7.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.58.1",
     "react-icons": "^5.5.0",

prisma/schema.prisma

@@ -110,8 +110,6 @@ model Image {
   stats         ImageStats[]
   theme         ThemeSeed[]
   variants      ImageVariant[]
-  // colors        ImageColor[]
-  // extractColors ExtractColor[]
   // 
   // albumCover    Album[]         @relation("AlbumCoverImage")
   // categories    Category[]      @relation("ImageCategories")
@@ -214,12 +212,10 @@ model ExtractColor {
   blue    Int
   green   Int
   red     Int
-  // isLight Boolean
 
   area       Float?
   hue        Float?
   saturation Float?
-  // value      Float?
 
   image Image @relation(fields: [imageId], references: [id])
 }

src/actions/images/updateImage.ts

@@ -1,21 +1,22 @@
 "use server"
 
-import prisma from "@/lib/prisma";
+import { imageSchema } from "@/schemas/images/imageSchema";
-import { gallerySchema } from "@/schemas/galleries/gallerySchema";
 import * as z from "zod/v4";
 
 export async function updateImage(
-  values: z.infer<typeof gallerySchema>, 
+  values: z.infer<typeof imageSchema>, 
   id: string
 ) {
-  return await prisma.gallery.update({
+  console.log(values, id)
-    where: {
+  // return await prisma.image.update({
-      id: id
+  //   where: {
-    },
+  //     id: id
-    data: {
+  //   },
-      name: values.name,
+  //   data: {
-      slug: values.slug,
+  //     name: values.name,
-      description: values.description,
+  //     slug: values.slug,
-    }
+  //     description: values.description,
-  })
+  //   }
+  // })
+  return null
 }

src/app/api/image/[...key]/route.ts

@@ -0,0 +1,33 @@
+import { s3 } from "@/lib/s3";
+import { GetObjectCommand } from "@aws-sdk/client-s3";
+
+export async function GET(req: Request, { params }: { params: { key: string[] } }) {
+  const { key } = await params;
+  const s3Key = key.join("/"); 
+
+  try {
+    const command = new GetObjectCommand({
+      Bucket: "felliesartapp",
+      Key: s3Key,
+    });
+
+    const response = await s3.send(command);
+
+    if (!response.Body) {
+      return new Response("No body", { status: 500 });
+    }
+
+    const contentType = response.ContentType ?? "application/octet-stream";
+
+    return new Response(response.Body as ReadableStream, {
+      headers: {
+        "Content-Type": contentType,
+        "Cache-Control": "public, max-age=3600",
+        "Content-Disposition": "inline", // use 'attachment' to force download
+      },
+    });
+  } catch (err) {
+    console.log(err)
+    return new Response("Image not found", { status: 404 });
+  }
+}

src/app/images/edit/[id]/page.tsx

@@ -1,22 +1,56 @@
-import EditGalleryForm from "@/components/galleries/edit/EditGalleryForm";
+import EditImageColors from "@/components/images/edit/EditImageColors";
+import EditImageForm from "@/components/images/edit/EditImageForm";
+import EditImagePalettes from "@/components/images/edit/EditImagePalettes";
+import EditImageVariants from "@/components/images/edit/EditImageVariants";
 import prisma from "@/lib/prisma";
 
-export default async function GalleriesEditPage({ params }: { params: { id: string } }) {
+export default async function ImagesEditPage({ params }: { params: { id: string } }) {
   const { id } = await params;
 
-  const gallery = await prisma.gallery.findUnique({
+  const image = await prisma.image.findUnique({
     where: {
       id,
     },
     include: {
-      albums: true
+      album: true,
+      artist: true,
+      colors: true,
+      extractColors: true,
+      metadata: true,
+      pixels: true,
+      stats: true,
+      theme: true,
+      variants: true,
+      palettes: {
+        include: {
+          items: true
+        }
+      }
     }
   });
 
+  const artists = await prisma.artist.findMany({ orderBy: { createdAt: "asc" } });
+  const albums = await prisma.album.findMany({ orderBy: { createdAt: "asc" } });
+
   return (
     <div>
-      <h1 className="text-2xl font-bold mb-4">Edit gallery</h1>
+      <h1 className="text-2xl font-bold mb-4">Edit image</h1>
-      {gallery ? <EditGalleryForm gallery={gallery} /> : 'Gallery not found...'}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div>
+          {image ? <EditImageForm image={image} artists={artists} albums={albums} /> : 'Image not found...'}
+        </div>
+        <div className="space-y-6">
+          <div>
+            {image && <EditImageColors extractColors={image.extractColors} colors={image.colors} />}
+          </div>
+          <div>
+            {image && <EditImagePalettes palettes={image.palettes} />}
+          </div>
+          <div>
+            {image && <EditImageVariants variants={image.variants} />}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

src/components/galleries/edit/EditGalleryForm.tsx

@@ -25,7 +25,7 @@ export default function EditGalleryForm({ gallery }: { gallery: Gallery & { albu
   })
 
   async function onSubmit(values: z.infer<typeof gallerySchema>) {
-    var updatedGallery = await updateGallery(values, gallery.id)
+    const updatedGallery = await updateGallery(values, gallery.id)
     if (updatedGallery) {
       toast.success("Gallery updated")
       router.push(`/galleries`)

src/components/images/edit/EditGalleryForm.tsx

@@ -1,152 +0,0 @@
-"use client"
-
-import { deleteGallery } from "@/actions/galleries/deleteGallery";
-import { updateGallery } from "@/actions/galleries/updateGallery";
-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 { Album, Gallery } from "@/generated/prisma";
-import { gallerySchema } from "@/schemas/galleries/gallerySchema";
-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";
-
-export default function EditGalleryForm({ gallery }: { gallery: Gallery & { albums: Album[] } }) {
-  const router = useRouter();
-  const form = useForm<z.infer<typeof gallerySchema>>({
-    resolver: zodResolver(gallerySchema),
-    defaultValues: {
-      name: gallery.name,
-      slug: gallery.slug,
-      description: gallery.description || "",
-    },
-  })
-
-  async function onSubmit(values: z.infer<typeof gallerySchema>) {
-    var updatedGallery = await updateGallery(values, gallery.id)
-    if (updatedGallery) {
-      toast.success("Gallery updated")
-      router.push(`/galleries`)
-    }
-  }
-
-  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>Gallery name</FormLabel>
-                <FormControl>
-                  <Input placeholder="Gallery name" {...field} />
-                </FormControl>
-                <FormDescription>
-                  This is your public display name.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="slug"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Gallery slug</FormLabel>
-                <FormControl>
-                  <Input placeholder="Gallery slug" {...field} />
-                </FormControl>
-                <FormDescription>
-                  Will be used for the navigation.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Gallery description</FormLabel>
-                <FormControl>
-                  <Input placeholder="Gallery description" {...field} />
-                </FormControl>
-                <FormDescription>
-                  Description of the gallery.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <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 className="pt-10">
-        <h2 className="text-lg font-semibold mb-2">Albums in this Gallery</h2>
-        {gallery.albums.length === 0 ? (
-          <p className="text-muted-foreground italic">No albums yet.</p>
-        ) : (
-          <ul className="space-y-2">
-            {gallery.albums.map((album) => (
-              <li key={album.id} className="flex items-center justify-between border rounded px-4 py-2">
-                <div className="space-y-1">
-                  <div className="font-medium">{album.name}</div>
-                  <div className="text-sm text-muted-foreground">Slug: {album.slug}</div>
-                </div>
-                <div className="text-sm text-right">
-                  {/* Replace this with actual image count later */}
-                  <span className="font-mono">Images: 0</span>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-      <p className="text-sm text-muted-foreground">
-        Total images in this gallery: <span className="font-semibold">0</span>
-      </p>
-      <div>
-        {gallery.albums.length === 0 ? (
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={async () => {
-              await deleteGallery(gallery.id);
-              toast.success("Gallery deleted");
-              router.push("/galleries");
-            }}
-          >
-            Delete Gallery
-          </Button>
-        ) : (
-          <>
-            <Button
-              type="button"
-              variant="destructive"
-              disabled
-              onClick={async () => {
-                await deleteGallery(gallery.id);
-                toast.success("Gallery deleted");
-                router.push("/galleries");
-              }}
-            >
-              Delete Gallery
-            </Button>
-            <p className="text-sm text-muted-foreground italic">
-              You must remove all albums before deleting this gallery.
-            </p>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

src/components/images/edit/EditImageColors.tsx

@@ -0,0 +1,20 @@
+import { ExtractColor, ImageColor } from "@/generated/prisma";
+
+export default function EditImageColors({ extractColors, colors }: { extractColors: ExtractColor[], colors: ImageColor[] }) {
+  return (
+    <>
+      <h2 className="font-semibold text-lg mb-2">Extracted Colors</h2>
+      <div className="flex flex-wrap gap-2">
+        {extractColors.map((color, index) => (
+          <div key={index} className="w-10 h-10 rounded" style={{ backgroundColor: color.hex }} title={color.hex}></div>
+        ))}
+      </div>
+      <h2 className="font-semibold text-lg mb-2">Image Colors</h2>
+      <div className="flex flex-wrap gap-2">
+        {colors.map((color, index) => (
+          <div key={index} className="w-10 h-10 rounded" style={{ backgroundColor: color.hex ?? "#000000" }} title={`Tone ${color.type} - ${color.hex}`}></div>
+        ))}
+      </div>
+    </>
+  );
+}

src/components/images/edit/EditImageForm.tsx

@@ -0,0 +1,354 @@
+"use client"
+
+import { updateImage } from "@/actions/images/updateImage";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Album, Artist, ColorPalette, ColorPaletteItem, ExtractColor, Image, ImageColor, ImageMetadata, ImageStats, ImageVariant, PixelSummary, ThemeSeed } from "@/generated/prisma";
+import { cn } from "@/lib/utils";
+import { imageSchema } from "@/schemas/images/imageSchema";
+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 * as z from "zod/v4";
+
+type ImageWithItems = Image & {
+  album: Album,
+  artist: Artist,
+  colors: ImageColor[],
+  extractColors: ExtractColor[],
+  metadata: ImageMetadata[],
+  pixels: PixelSummary[],
+  stats: ImageStats[],
+  theme: ThemeSeed[],
+  variants: ImageVariant[],
+  palettes: ColorPalette[] & {
+    items: ColorPaletteItem[]
+  }
+};
+
+export default function EditImageForm({ image, artists, albums }: { image: ImageWithItems, artists: Artist[], albums: Album[] }) {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof imageSchema>>({
+    resolver: zodResolver(imageSchema),
+    defaultValues: {
+      fileKey: image.fileKey,
+      imageName: image.imageName,
+      originalFile: image.originalFile,
+      uploadDate: image.uploadDate,
+
+      altText: image.altText || "",
+      description: image.description || "",
+      fileType: image.fileType || "",
+      imageData: image.imageData || "",
+      creationMonth: image.creationMonth || undefined,
+      creationYear: image.creationYear || undefined,
+      fileSize: image.fileSize || undefined,
+      creationDate: image.creationDate ? new Date(image.creationDate) : undefined,
+
+      artistId: image.artist?.id || undefined,
+      albumId: image.album?.id || undefined,
+    },
+  })
+
+  // const watchCreationDate = form.watch("creationDate");
+  // console.log("Watched creationDate:", watchCreationDate);
+
+  async function onSubmit(values: z.infer<typeof imageSchema>) {
+    const updatedImage = await updateImage(values, image.id)
+    if (updatedImage) {
+      toast.success("Image updated")
+      
+      router.push(`/images`)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="fileKey"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Image Key</FormLabel>
+                <FormControl><Input {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="imageName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Image Name</FormLabel>
+                <FormControl><Input {...field} /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="originalFile"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Original file</FormLabel>
+                <FormControl><Input {...field} /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="uploadDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Upload Date</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        className={cn(
+                          "pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value ? format(field.value, "PPP") : "Pick a date"}
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="altText"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alt Text</FormLabel>
+                <FormControl><Input {...field} /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl><Textarea {...field} /></FormControl>
+                <FormMessage />
+              </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="imageData"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>imageData</FormLabel>
+                <FormControl><Input {...field} disabled /></FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="creationDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col gap-1">
+                <FormLabel>Creation Date</FormLabel>
+                <div className="flex items-center gap-2">
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant="outline"
+                          className={cn(
+                            "pl-3 text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          {field.value ? format(field.value, "PPP") : "Pick a date"}
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={(date) => {
+                          field.onChange(date);
+                          if (date) {
+                            form.setValue("creationMonth", date.getUTCMonth() + 1);
+                            form.setValue("creationYear", date.getUTCFullYear());
+                          }
+                        }}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+
+                  {field.value && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        form.setValue("creationDate", undefined, { shouldValidate: true });
+                        form.setValue("creationMonth", undefined);
+                        form.setValue("creationYear", undefined);
+                      }}
+                    >
+                      Clear
+                    </Button>
+                  )}
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="creationMonth"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Creation Month</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={1}
+                      max={12}
+                      disabled={!!form.watch("creationDate")}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="creationYear"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Creation Year</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="number"
+                      min={1900}
+                      max={2100}
+                      disabled={!!form.watch("creationDate")}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="fileSize"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>fileSize in byte</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    {...field}
+                    disabled
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="artistId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Artist</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger><SelectValue placeholder="Select artist" /></SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {artists.map((artist) => (
+                      <SelectItem key={artist.id} value={artist.id}>{artist.displayName}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="albumId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Album</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger><SelectValue placeholder="Select album" /></SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {albums.map((album) => (
+                      <SelectItem key={album.id} value={album.id}>{album.name}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <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/images/edit/EditImagePalettes.tsx

@@ -0,0 +1,34 @@
+import { ColorPalette, ColorPaletteItem } from "@/generated/prisma";
+
+type PaletteWithItems = ColorPalette & {
+  items: ColorPaletteItem[];
+};
+
+export default function EditImagePalettes({ palettes }: { palettes: PaletteWithItems[] }) {
+  // console.log(JSON.stringify(palettes, null, 4));
+  return (
+    <>
+      <h2 className="font-semibold text-lg mb-2">Palettes</h2>
+      <div className="space-y-4">
+        {palettes.map((palette) => (
+          <div key={palette.id}>
+            <div className="text-sm font-medium mb-1">{palette.type}</div>
+            <div className="flex gap-1">
+              {palette.items
+                .filter((item) => item.tone !== null && item.hex !== null)
+                .sort((a, b) => (a.tone ?? 0) - (b.tone ?? 0))
+                .map((item) => (
+                  <div
+                    key={item.id}
+                    className="w-6 h-6 rounded"
+                    style={{ backgroundColor: item.hex ?? "#000000" }}
+                    title={`Tone ${item.tone} - ${item.hex}`}
+                  />
+                ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/components/images/edit/EditImageVariants.tsx

@@ -0,0 +1,20 @@
+import { ImageVariant } from "@/generated/prisma";
+import NextImage from "next/image";
+
+export default function EditImageVariants({ variants }: { variants: ImageVariant[] }) {
+  return (
+    <>
+      <h2 className="font-semibold text-lg mb-2">Variants</h2>
+      <div>
+        {variants.map((variant) => (
+          <div key={variant.id}>
+            <div className="text-sm mb-1">{variant.type}</div>
+            {variant.s3Key && (
+              <NextImage src={`/api/image/${variant.s3Key}`} alt={variant.s3Key} width={variant.width} height={variant.height} className="rounded shadow max-w-md" />
+            )}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

src/components/images/list/ListImages.tsx

@@ -8,7 +8,7 @@ export default function ListImages({ images }: { images: Image[] }) {
   return (
     <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
       {images.map((image) => (
-        <Link href={`/galleries/edit/${image.id}`} key={image.id}>
+        <Link href={`/images/edit/${image.id}`} key={image.id}>
           <Card className="overflow-hidden">
             <CardHeader>
               <CardTitle className="text-base truncate">{image.imageName}</CardTitle>

src/components/ui/calendar.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

src/schemas/images/imageSchema.ts

@@ -10,14 +10,21 @@ export const imageUploadSchema = z.object({
 })
 
 export const imageSchema = z.object({
-  imageName: z.string().min(1, "Image name is required"),
   fileKey: z.string().min(1, "File key is required"),
+  imageName: z.string().min(1, "Image name is required"),
   originalFile: z.string().min(1, "Original file is required"),
   uploadDate: z.date(),
+  
   altText: z.string().optional(),
   description: z.string().optional(),
+  fileType: z.string().optional(),
   imageData:  z.string().optional(),
-  creationMonth: z.coerce.number().int().min(1).max(12).optional(),
+
-  creationYear: z.coerce.number().int().min(1900).max(2100).optional(),
+  creationMonth: z.number().min(1).max(12).optional(),
+  creationYear: z.number().min(1900).max(2100).optional(),
+  fileSize: z.number().optional(),
   creationDate: z.date().optional(),
+
+  artistId: z.string().optional(),
+  albumId: z.string().optional(),
 })