From 2f976bade1e98944579b9da23dc51d1db130a1bc Mon Sep 17 00:00:00 2001
From: AmirmahdiNourkazemi <nourkazemi80@gmail.com>
Date: Sat, 6 Jun 2026 20:59:05 +0330
Subject: [PATCH] feat: add media_detail

---
 app/dashboard/media/page.tsx           | 23 ++++++++++++++++++++++-
 app/dashboard/music/playlists/page.tsx | 24 +++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/media/page.tsx b/app/dashboard/media/page.tsx
index 19aa5a1..26c5840 100644
--- a/app/dashboard/media/page.tsx
+++ b/app/dashboard/media/page.tsx
@@ -41,6 +41,9 @@ interface Media {
   is_premium?: boolean;
   external_url?: string | null;
   image_id?: number | null;
+  image?: unknown;
+  detail_image_id?: number | null;
+  detail_image?: unknown;
 }
 
 // Compact multi-select rendered as toggle chips.
@@ -101,6 +104,8 @@ export default function MediaPage() {
   const [externalUrl, setExternalUrl] = useState("");
   const [imageId, setImageId] = useState<number | null>(null);
   const [imageFile, setImageFile] = useState<File | null>(null);
+  const [detailImageId, setDetailImageId] = useState<number | null>(null);
+  const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
 
   const [deleting, setDeleting] = useState<Media | null>(null);
   const [removing, setRemoving] = useState(false);
@@ -118,6 +123,8 @@ export default function MediaPage() {
     setExternalUrl("");
     setImageId(null);
     setImageFile(null);
+    setDetailImageId(null);
+    setDetailImageFile(null);
   }
 
   function openCreate() {
@@ -142,6 +149,8 @@ export default function MediaPage() {
     setExternalUrl(row.external_url ?? "");
     setImageId(row.image_id ?? null);
     setImageFile(null);
+    setDetailImageId(row.detail_image_id ?? null);
+    setDetailImageFile(null);
     setOpen(true);
   }
 
@@ -166,6 +175,8 @@ export default function MediaPage() {
         external_url: externalUrl,
         image_id: imageId,
         image: imageFile,
+        detail_image_id: detailImageId,
+        detail_image: detailImageFile,
       });
       if (editing) {
         // File-bearing update: POST /media/:id (multipart, file optional)
@@ -335,7 +346,7 @@ export default function MediaPage() {
             />
           </Field>
 
-          <Field label="تصویر شاخص" hint="انتخاب از کتابخانه یا بارگذاری تصویر جدید">
+          <Field label="تصویر لیست" hint="در فهرست نمایش داده می‌شود">
             <ImagePicker
               imageId={imageId}
               onPickId={setImageId}
@@ -345,6 +356,16 @@ export default function MediaPage() {
             />
           </Field>
 
+          <Field label="تصویر جزئیات" hint="در صفحه جزئیات نمایش داده می‌شود">
+            <ImagePicker
+              imageId={detailImageId}
+              onPickId={setDetailImageId}
+              file={detailImageFile}
+              onPickFile={setDetailImageFile}
+              existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
+            />
+          </Field>
+
           <Field label="دسته‌بندی‌ها">
             <ChipMultiSelect
               options={categories}
diff --git a/app/dashboard/music/playlists/page.tsx b/app/dashboard/music/playlists/page.tsx
index 4895659..e87020b 100644
--- a/app/dashboard/music/playlists/page.tsx
+++ b/app/dashboard/music/playlists/page.tsx
@@ -26,6 +26,8 @@ interface Playlist {
   description?: string;
   image_id?: number | null;
   image?: unknown;
+  detail_image_id?: number | null;
+  detail_image?: unknown;
 }
 
 interface MusicCategory {
@@ -49,6 +51,8 @@ export default function MusicPlaylistsPage() {
   const [subcategoryIds, setSubcategoryIds] = useState<number[]>([]);
   const [imageId, setImageId] = useState<number | null>(null);
   const [imageFile, setImageFile] = useState<File | null>(null);
+  const [detailImageId, setDetailImageId] = useState<number | null>(null);
+  const [detailImageFile, setDetailImageFile] = useState<File | null>(null);
 
   const [deleting, setDeleting] = useState<Playlist | null>(null);
   const [removing, setRemoving] = useState(false);
@@ -65,6 +69,8 @@ export default function MusicPlaylistsPage() {
     setSubcategoryIds([]);
     setImageId(null);
     setImageFile(null);
+    setDetailImageId(null);
+    setDetailImageFile(null);
     setOpen(true);
   }
   function openEdit(row: Playlist) {
@@ -75,6 +81,8 @@ export default function MusicPlaylistsPage() {
     setSubcategoryIds([]);
     setImageId(row.image_id ?? null);
     setImageFile(null);
+    setDetailImageId(row.detail_image_id ?? null);
+    setDetailImageFile(null);
     setOpen(true);
   }
 
@@ -91,6 +99,8 @@ export default function MusicPlaylistsPage() {
             description,
             image_id: imageId,
             image: imageFile,
+            detail_image_id: detailImageId,
+            detail_image: detailImageFile,
           }),
         });
         toast.success("پلی‌لیست ویرایش شد.");
@@ -105,6 +115,8 @@ export default function MusicPlaylistsPage() {
             subcategory_ids: subcategoryIds,
             image_id: imageId,
             image: imageFile,
+            detail_image_id: detailImageId,
+            detail_image: detailImageFile,
           }),
         });
         toast.success("پلی‌لیست افزوده شد.");
@@ -225,7 +237,7 @@ export default function MusicPlaylistsPage() {
             />
           </Field>
 
-          <Field label="تصویر">
+          <Field label="تصویر لیست">
             <ImagePicker
               imageId={imageId}
               onPickId={setImageId}
@@ -235,6 +247,16 @@ export default function MusicPlaylistsPage() {
             />
           </Field>
 
+          <Field label="تصویر جزئیات">
+            <ImagePicker
+              imageId={detailImageId}
+              onPickId={setDetailImageId}
+              file={detailImageFile}
+              onPickFile={setDetailImageFile}
+              existingUrl={editing ? pickUrl(editing, ["detail_image"]) : null}
+            />
+          </Field>
+
           {!editing && (
             <>
               <Field label="دسته‌بندی‌ها">