fix: upload image

app/dashboard/music/tracks/page.tsx

@@ -15,8 +15,9 @@ import {
   PageHeader,
 } from "@/components/ui";
 import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
-import { toFa, formatDuration } from "@/lib/utils";
+import { formatDuration } from "@/lib/utils";
 import { MediaPreview } from "@/components/MediaPreview";
+import { ImagePicker } from "@/components/ImagePicker";
 import { pickUrl, SOUND_KEYS, IMAGE_KEYS } from "@/lib/media";
 
 interface Track {
@@ -25,8 +26,8 @@ interface Track {
   artist?: string;
   duration?: number | null;
   type?: string;
-  order?: number;
   playlist_id?: number;
+  image_id?: number | null;
 }
 
 interface Playlist {
@@ -45,37 +46,41 @@ export default function MusicTracksPage() {
 
   const [title, setTitle] = useState("");
   const [artist, setArtist] = useState("");
-  const [type, setType] = useState("");
+  const [type, setType] = useState("public");
   const [duration, setDuration] = useState("");
   const [playlistId, setPlaylistId] = useState("");
-  const [imageId, setImageId] = useState("");
-  const [order, setOrder] = useState("");
+  const [imageId, setImageId] = useState<number | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
   const [deleting, setDeleting] = useState<Track | null>(null);
   const [removing, setRemoving] = useState(false);
 
-  function openCreate() {
-    setEditing(null);
+  function resetForm() {
     setTitle("");
     setArtist("");
-    setType("");
+    setType("public");
     setDuration("");
     setPlaylistId("");
-    setImageId("");
-    setOrder("");
+    setImageId(null);
+    setImageFile(null);
     setFile(null);
+  }
+
+  function openCreate() {
+    setEditing(null);
+    resetForm();
     setOpen(true);
   }
   function openEdit(row: Track) {
     setEditing(row);
     setTitle(row.title ?? "");
     setArtist(row.artist ?? "");
-    setType(row.type ?? "");
+    setType(row.type ?? "public");
     setDuration(row.duration != null ? String(row.duration) : "");
     setPlaylistId(row.playlist_id != null ? String(row.playlist_id) : "");
-    setImageId("");
-    setOrder(row.order != null ? String(row.order) : "");
+    setImageId(row.image_id ?? null);
+    setImageFile(null);
     setFile(null);
     setOpen(true);
   }
@@ -85,18 +90,21 @@ export default function MusicTracksPage() {
     setSaving(true);
     try {
       if (editing) {
-        // Update is JSON on /music/:id
-        await apiFetch(`/music/${editing.id}`, {
-          method: "PUT",
-          body: {
-            title,
-            artist,
-            order: order === "" ? undefined : Number(order),
-          },
+        // The PUT /music/:id route can carry files, so we POST multipart with
+        // Laravel method spoofing (_method=PUT).
+        const body = toFormData({
+          _method: "PUT",
+          title,
+          artist,
+          type,
+          duration,
+          image_id: imageId,
+          image: imageFile,
+          file,
         });
+        await apiFetch(`/music/${editing.id}`, { method: "POST", body });
         toast.success("آهنگ ویرایش شد.");
       } else {
-        // Create is multipart on /music
         await apiFetch("/music", {
           method: "POST",
           body: toFormData({
@@ -106,6 +114,7 @@ export default function MusicTracksPage() {
             duration,
             playlist_id: playlistId,
             image_id: imageId,
+            image: imageFile,
             file,
           }),
         });
@@ -159,7 +168,12 @@ export default function MusicTracksPage() {
       header: "مدت زمان",
       render: (r) => formatDuration(r.duration),
     },
-    { key: "type", header: "نوع", render: (r) => r.type ?? "—" },
+    {
+      key: "type",
+      header: "نوع",
+      render: (r) =>
+        r.type === "private" ? "خصوصی" : r.type === "public" ? "عمومی" : (r.type ?? "—"),
+    },
   ];
 
   return (
@@ -228,6 +242,7 @@ export default function MusicTracksPage() {
               autoFocus
             />
           </Field>
+
           <Field label="هنرمند">
             <Input
               value={artist}
@@ -236,63 +251,60 @@ export default function MusicTracksPage() {
             />
           </Field>
 
-          {editing ? (
-            <Field label="ترتیب">
-              <Input
-                type="number"
-                value={order}
-                onChange={(e) => setOrder(e.target.value)}
-                dir="ltr"
-              />
+          <Field label="تصویر جلد" hint="انتخاب از کتابخانه یا بارگذاری تصویر جدید">
+            <ImagePicker
+              imageId={imageId}
+              onPickId={setImageId}
+              file={imageFile}
+              onPickFile={setImageFile}
+              existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
+            />
+          </Field>
+
+          <Field label="نوع">
+            <Select value={type} onChange={(e) => setType(e.target.value)}>
+              <option value="public">عمومی</option>
+              <option value="private">خصوصی</option>
+            </Select>
+          </Field>
+
+          <Field label="مدت زمان (ثانیه)">
+            <Input
+              type="number"
+              value={duration}
+              onChange={(e) => setDuration(e.target.value)}
+              dir="ltr"
+            />
+          </Field>
+
+          {!editing && (
+            <Field label="پلی‌لیست">
+              <Select
+                value={playlistId}
+                onChange={(e) => setPlaylistId(e.target.value)}
+              >
+                <option value="">انتخاب کنید…</option>
+                {playlists.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name ?? `#${p.id}`}
+                  </option>
+                ))}
+              </Select>
             </Field>
-          ) : (
-            <>
-              <Field label="نوع">
-                <Input
-                  value={type}
-                  onChange={(e) => setType(e.target.value)}
-                  placeholder="مثلاً music"
-                />
-              </Field>
-              <Field label="مدت زمان (ثانیه)">
-                <Input
-                  type="number"
-                  value={duration}
-                  onChange={(e) => setDuration(e.target.value)}
-                  dir="ltr"
-                />
-              </Field>
-              <Field label="پلی‌لیست">
-                <Select
-                  value={playlistId}
-                  onChange={(e) => setPlaylistId(e.target.value)}
-                >
-                  <option value="">انتخاب کنید…</option>
-                  {playlists.map((p) => (
-                    <option key={p.id} value={p.id}>
-                      {p.name ?? `#${p.id}`}
-                    </option>
-                  ))}
-                </Select>
-              </Field>
-              <Field label="شناسه تصویر">
-                <Input
-                  value={imageId}
-                  onChange={(e) => setImageId(e.target.value)}
-                  dir="ltr"
-                  placeholder="image_id"
-                />
-              </Field>
-              <Field label="فایل صوتی" required>
-                <Input
-                  type="file"
-                  accept="audio/*"
-                  onChange={(e) => setFile(e.target.files?.[0] ?? null)}
-                  required
-                />
-              </Field>
-            </>
           )}
+
+          <Field
+            label={editing ? "فایل صوتی (در صورت تغییر)" : "فایل صوتی"}
+            hint={editing ? "در صورت خالی بودن، فایل قبلی حفظ می‌شود." : undefined}
+            required={!editing}
+          >
+            <Input
+              type="file"
+              accept="audio/*"
+              onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+              required={!editing}
+            />
+          </Field>
         </form>
       </Modal>