Amirmahdi/meditation-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial

Browse Source
This commit is contained in:
Amirmahdi
2026-06-03 03:08:57 +03:30
parent 3d9585ac5c
commit 6fa30eb29a
45 changed files with 7053 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/dashboard/music/categories/page.tsx
+249
View File
@@ -0,0 +1,249 @@
"use client";
import { useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
import { DataTable, type Column } from "@/components/DataTable";
import {
Badge,
Button,
ConfirmDialog,
Field,
Input,
Textarea,
Switch,
Modal,
PageHeader,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { toFa } from "@/lib/utils";
interface MusicCategory {
id: number;
name?: string;
description?: string;
order?: number;
is_active?: boolean;
}
export default function MusicCategoriesPage() {
const { data, loading, error, reload } =
useList<MusicCategory>("/music-categories");
const toast = useToast();
const [editing, setEditing] = useState<MusicCategory | null>(null);
const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [order, setOrder] = useState("");
const [imageId, setImageId] = useState("");
const [isActive, setIsActive] = useState(true);
const [deleting, setDeleting] = useState<MusicCategory | null>(null);
const [removing, setRemoving] = useState(false);
function openCreate() {
setEditing(null);
setName("");
setDescription("");
setOrder("");
setImageId("");
setIsActive(true);
setOpen(true);
}
function openEdit(row: MusicCategory) {
setEditing(row);
setName(row.name ?? "");
setDescription(row.description ?? "");
setOrder(row.order != null ? String(row.order) : "");
setImageId("");
setIsActive(row.is_active ?? true);
setOpen(true);
}
async function save(e: React.FormEvent) {
e.preventDefault();
setSaving(true);
try {
if (editing) {
// Update is JSON on /music-categories/:id
await apiFetch(`/music-categories/${editing.id}`, {
method: "PUT",
body: {
name,
description,
order: order === "" ? undefined : Number(order),
is_active: isActive,
},
});
toast.success("دسته‌بندی ویرایش شد.");
} else {
// Create is multipart on /music-categories
await apiFetch("/music-categories", {
method: "POST",
body: toFormData({
name,
description,
order,
image_id: imageId,
is_active: isActive,
}),
});
toast.success("دسته‌بندی افزوده شد.");
}
setOpen(false);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
} finally {
setSaving(false);
}
}
async function confirmDelete() {
if (!deleting) return;
setRemoving(true);
try {
await apiFetch(`/music-categories/${deleting.id}`, { method: "DELETE" });
toast.success("دسته‌بندی حذف شد.");
setDeleting(null);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
} finally {
setRemoving(false);
}
}
const columns: Column<MusicCategory>[] = [
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
{ key: "name", header: "نام" },
{
key: "description",
header: "توضیحات",
render: (r) => r.description ?? "—",
},
{ key: "order", header: "ترتیب", render: (r) => toFa(r.order ?? 0) },
{
key: "is_active",
header: "وضعیت",
render: (r) =>
r.is_active ? (
<Badge tone="success">فعال</Badge>
) : (
<Badge tone="danger">غیرفعال</Badge>
),
},
];
return (
<div>
<PageHeader
title="دسته‌بندی موسیقی"
subtitle="مدیریت دسته‌بندی‌های اصلی موسیقی"
action={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
دسته‌بندی جدید
</Button>
}
/>
<DataTable
columns={columns}
rows={data}
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز دسته‌بندی موسیقی ثبت نشده است."
emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
دسته‌بندی جدید
</Button>
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => setDeleting(row)}
aria-label="حذف"
className="text-danger"
>
<TrashIcon className="h-4 w-4" />
</Button>
</>
)}
/>
<Modal
open={open}
onClose={() => setOpen(false)}
title={editing ? "ویرایش دسته‌بندی" : "دسته‌بندی جدید"}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
انصراف
</Button>
<Button form="music-category-form" type="submit" loading={saving}>
ذخیره
</Button>
</>
}
>
<form
id="music-category-form"
onSubmit={save}
className="flex flex-col gap-4"
>
<Field label="نام" required>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="مثلاً طبیعت"
required
autoFocus
/>
</Field>
<Field label="توضیحات">
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Field>
<Field label="ترتیب">
<Input
type="number"
value={order}
onChange={(e) => setOrder(e.target.value)}
dir="ltr"
/>
</Field>
{!editing && (
<Field label="شناسه تصویر">
<Input
value={imageId}
onChange={(e) => setImageId(e.target.value)}
dir="ltr"
placeholder="image_id"
/>
</Field>
)}
<Switch checked={isActive} onChange={setIsActive} label="فعال" />
</form>
</Modal>
<ConfirmDialog
open={!!deleting}
message={`آیا از حذف «${deleting?.name ?? ""}» مطمئن هستید؟`}
loading={removing}
onConfirm={confirmDelete}
onClose={() => setDeleting(null)}
/>
</div>
);
}
app/dashboard/music/playlists/page.tsx
+263
View File
@@ -0,0 +1,263 @@
"use client";
import { useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
import { DataTable, type Column } from "@/components/DataTable";
import {
Button,
ConfirmDialog,
Field,
Input,
Textarea,
Modal,
PageHeader,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { toFa } from "@/lib/utils";
interface Playlist {
id: number;
name?: string;
description?: string;
}
interface MusicCategory {
id: number;
name?: string;
}
export default function MusicPlaylistsPage() {
const { data, loading, error, reload } = useList<Playlist>("/music-playlists");
const { data: categories } = useList<MusicCategory>("/music-categories");
const { data: subcategories } = useList<MusicCategory>("/music-subcategories");
const toast = useToast();
const [editing, setEditing] = useState<Playlist | null>(null);
const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [categoryIds, setCategoryIds] = useState<number[]>([]);
const [subcategoryIds, setSubcategoryIds] = useState<number[]>([]);
const [deleting, setDeleting] = useState<Playlist | null>(null);
const [removing, setRemoving] = useState(false);
function toggle(list: number[], id: number): number[] {
return list.includes(id) ? list.filter((x) => x !== id) : [...list, id];
}
function openCreate() {
setEditing(null);
setName("");
setDescription("");
setCategoryIds([]);
setSubcategoryIds([]);
setOpen(true);
}
function openEdit(row: Playlist) {
setEditing(row);
setName(row.name ?? "");
setDescription(row.description ?? "");
setCategoryIds([]);
setSubcategoryIds([]);
setOpen(true);
}
async function save(e: React.FormEvent) {
e.preventDefault();
setSaving(true);
try {
if (editing) {
// Update is JSON on /music-playlists/:id
await apiFetch(`/music-playlists/${editing.id}`, {
method: "PUT",
body: { name, description },
});
toast.success("پلی‌لیست ویرایش شد.");
} else {
// Create is multipart on /music-playlists
await apiFetch("/music-playlists", {
method: "POST",
body: toFormData({
name,
description,
category_ids: categoryIds,
subcategory_ids: subcategoryIds,
}),
});
toast.success("پلی‌لیست افزوده شد.");
}
setOpen(false);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
} finally {
setSaving(false);
}
}
async function confirmDelete() {
if (!deleting) return;
setRemoving(true);
try {
await apiFetch(`/music-playlists/${deleting.id}`, { method: "DELETE" });
toast.success("پلی‌لیست حذف شد.");
setDeleting(null);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
} finally {
setRemoving(false);
}
}
const columns: Column<Playlist>[] = [
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
{ key: "name", header: "نام" },
{
key: "description",
header: "توضیحات",
render: (r) => r.description ?? "—",
},
];
return (
<div>
<PageHeader
title="پلی‌لیست‌ها"
subtitle="مدیریت پلی‌لیست‌های موسیقی"
action={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
پلی‌لیست جدید
</Button>
}
/>
<DataTable
columns={columns}
rows={data}
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز پلی‌لیستی ساخته نشده است."
emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
پلی‌لیست جدید
</Button>
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => setDeleting(row)}
aria-label="حذف"
className="text-danger"
>
<TrashIcon className="h-4 w-4" />
</Button>
</>
)}
/>
<Modal
open={open}
onClose={() => setOpen(false)}
title={editing ? "ویرایش پلی‌لیست" : "پلی‌لیست جدید"}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
انصراف
</Button>
<Button form="playlist-form" type="submit" loading={saving}>
ذخیره
</Button>
</>
}
>
<form id="playlist-form" onSubmit={save} className="flex flex-col gap-4">
<Field label="نام" required>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="مثلاً تمرکز عمیق"
required
autoFocus
/>
</Field>
<Field label="توضیحات">
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="توضیح کوتاه درباره پلی‌لیست"
/>
</Field>
{!editing && (
<>
<Field label="دسته‌بندی‌ها">
<div className="flex flex-col gap-2 rounded-xl border border-border p-3">
{categories.length === 0 && (
<span className="text-xs text-muted">موردی موجود نیست</span>
)}
{categories.map((c) => (
<label
key={c.id}
className="flex items-center gap-2 text-sm"
>
<input
type="checkbox"
checked={categoryIds.includes(c.id)}
onChange={() =>
setCategoryIds((prev) => toggle(prev, c.id))
}
/>
{c.name ?? `#${c.id}`}
</label>
))}
</div>
</Field>
<Field label="زیر‌دسته‌ها">
<div className="flex flex-col gap-2 rounded-xl border border-border p-3">
{subcategories.length === 0 && (
<span className="text-xs text-muted">موردی موجود نیست</span>
)}
{subcategories.map((c) => (
<label
key={c.id}
className="flex items-center gap-2 text-sm"
>
<input
type="checkbox"
checked={subcategoryIds.includes(c.id)}
onChange={() =>
setSubcategoryIds((prev) => toggle(prev, c.id))
}
/>
{c.name ?? `#${c.id}`}
</label>
))}
</div>
</Field>
</>
)}
</form>
</Modal>
<ConfirmDialog
open={!!deleting}
message={`آیا از حذف «${deleting?.name ?? ""}» مطمئن هستید؟`}
loading={removing}
onConfirm={confirmDelete}
onClose={() => setDeleting(null)}
/>
</div>
);
}
app/dashboard/music/sub-categories/page.tsx
+287
View File
@@ -0,0 +1,287 @@
"use client";
import { useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
import { DataTable, type Column } from "@/components/DataTable";
import {
Badge,
Button,
ConfirmDialog,
Field,
Input,
Textarea,
Select,
Switch,
Modal,
PageHeader,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { toFa } from "@/lib/utils";
interface MusicCategory {
id: number;
name?: string;
}
interface MusicSubcategory {
id: number;
name?: string;
description?: string;
order?: number;
is_active?: boolean;
category_id?: number;
category?: MusicCategory | null;
}
export default function MusicSubcategoriesPage() {
const { data, loading, error, reload } =
useList<MusicSubcategory>("/music-subcategories");
const { data: categories } = useList<MusicCategory>("/music-categories");
const toast = useToast();
const [editing, setEditing] = useState<MusicSubcategory | null>(null);
const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [categoryId, setCategoryId] = useState("");
const [name, setName] = useState("");
const [order, setOrder] = useState("");
const [description, setDescription] = useState("");
const [imageId, setImageId] = useState("");
const [isActive, setIsActive] = useState(true);
const [deleting, setDeleting] = useState<MusicSubcategory | null>(null);
const [removing, setRemoving] = useState(false);
function openCreate() {
setEditing(null);
setCategoryId("");
setName("");
setOrder("");
setDescription("");
setImageId("");
setIsActive(true);
setOpen(true);
}
function openEdit(row: MusicSubcategory) {
setEditing(row);
setCategoryId(row.category_id != null ? String(row.category_id) : "");
setName(row.name ?? "");
setOrder(row.order != null ? String(row.order) : "");
setDescription(row.description ?? "");
setImageId("");
setIsActive(row.is_active ?? true);
setOpen(true);
}
async function save(e: React.FormEvent) {
e.preventDefault();
setSaving(true);
try {
if (editing) {
// Update is JSON on /music-subcategories/:id
await apiFetch(`/music-subcategories/${editing.id}`, {
method: "PUT",
body: {
name,
order: order === "" ? undefined : Number(order),
is_active: isActive,
},
});
toast.success("زیر‌دسته ویرایش شد.");
} else {
// Create is multipart on /music-subcategories
await apiFetch("/music-subcategories", {
method: "POST",
body: toFormData({
category_id: categoryId,
name,
order,
description,
image_id: imageId,
is_active: isActive,
}),
});
toast.success("زیر‌دسته افزوده شد.");
}
setOpen(false);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
} finally {
setSaving(false);
}
}
async function confirmDelete() {
if (!deleting) return;
setRemoving(true);
try {
await apiFetch(`/music-subcategories/${deleting.id}`, {
method: "DELETE",
});
toast.success("زیر‌دسته حذف شد.");
setDeleting(null);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
} finally {
setRemoving(false);
}
}
function categoryName(row: MusicSubcategory): string {
if (row.category?.name) return row.category.name;
const match = categories.find((c) => c.id === row.category_id);
return match?.name ?? "—";
}
const columns: Column<MusicSubcategory>[] = [
{ key: "id", header: "شناسه", render: (r) => toFa(r.id), className: "w-24" },
{ key: "name", header: "نام" },
{
key: "category",
header: "دسته‌بندی والد",
render: (r) => categoryName(r),
},
{ key: "order", header: "ترتیب", render: (r) => toFa(r.order ?? 0) },
{
key: "is_active",
header: "وضعیت",
render: (r) =>
r.is_active ? (
<Badge tone="success">فعال</Badge>
) : (
<Badge tone="danger">غیرفعال</Badge>
),
},
];
return (
<div>
<PageHeader
title="زیر‌دسته موسیقی"
subtitle="مدیریت زیر‌دسته‌های موسیقی"
action={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
زیر‌دسته جدید
</Button>
}
/>
<DataTable
columns={columns}
rows={data}
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز زیر‌دسته‌ای ثبت نشده است."
emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
زیر‌دسته جدید
</Button>
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => setDeleting(row)}
aria-label="حذف"
className="text-danger"
>
<TrashIcon className="h-4 w-4" />
</Button>
</>
)}
/>
<Modal
open={open}
onClose={() => setOpen(false)}
title={editing ? "ویرایش زیر‌دسته" : "زیر‌دسته جدید"}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
انصراف
</Button>
<Button form="music-subcategory-form" type="submit" loading={saving}>
ذخیره
</Button>
</>
}
>
<form
id="music-subcategory-form"
onSubmit={save}
className="flex flex-col gap-4"
>
{!editing && (
<Field label="دسته‌بندی والد" required>
<Select
value={categoryId}
onChange={(e) => setCategoryId(e.target.value)}
required
>
<option value="">انتخاب کنید…</option>
{categories.map((c) => (
<option key={c.id} value={c.id}>
{c.name ?? `#${c.id}`}
</option>
))}
</Select>
</Field>
)}
<Field label="نام" required>
<Input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="مثلاً صدای باران"
required
autoFocus
/>
</Field>
<Field label="ترتیب">
<Input
type="number"
value={order}
onChange={(e) => setOrder(e.target.value)}
dir="ltr"
/>
</Field>
{!editing && (
<>
<Field label="توضیحات">
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Field>
<Field label="شناسه تصویر">
<Input
value={imageId}
onChange={(e) => setImageId(e.target.value)}
dir="ltr"
placeholder="image_id"
/>
</Field>
</>
)}
<Switch checked={isActive} onChange={setIsActive} label="فعال" />
</form>
</Modal>
<ConfirmDialog
open={!!deleting}
message={`آیا از حذف «${deleting?.name ?? ""}» مطمئن هستید؟`}
loading={removing}
onConfirm={confirmDelete}
onClose={() => setDeleting(null)}
/>
</div>
);
}
app/dashboard/music/tracks/page.tsx
+308
View File
@@ -0,0 +1,308 @@
"use client";
import { useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast";
import { DataTable, type Column } from "@/components/DataTable";
import {
Button,
ConfirmDialog,
Field,
Input,
Select,
Modal,
PageHeader,
} from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { toFa, formatDuration } from "@/lib/utils";
import { MediaPreview } from "@/components/MediaPreview";
import { pickUrl, SOUND_KEYS, IMAGE_KEYS } from "@/lib/media";
interface Track {
id: number;
title?: string;
artist?: string;
duration?: number | null;
type?: string;
order?: number;
playlist_id?: number;
}
interface Playlist {
id: number;
name?: string;
}
export default function MusicTracksPage() {
const { data, loading, error, reload } = useList<Track>("/music");
const { data: playlists } = useList<Playlist>("/music-playlists");
const toast = useToast();
const [editing, setEditing] = useState<Track | null>(null);
const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [title, setTitle] = useState("");
const [artist, setArtist] = useState("");
const [type, setType] = useState("");
const [duration, setDuration] = useState("");
const [playlistId, setPlaylistId] = useState("");
const [imageId, setImageId] = useState("");
const [order, setOrder] = useState("");
const [file, setFile] = useState<File | null>(null);
const [deleting, setDeleting] = useState<Track | null>(null);
const [removing, setRemoving] = useState(false);
function openCreate() {
setEditing(null);
setTitle("");
setArtist("");
setType("");
setDuration("");
setPlaylistId("");
setImageId("");
setOrder("");
setFile(null);
setOpen(true);
}
function openEdit(row: Track) {
setEditing(row);
setTitle(row.title ?? "");
setArtist(row.artist ?? "");
setType(row.type ?? "");
setDuration(row.duration != null ? String(row.duration) : "");
setPlaylistId(row.playlist_id != null ? String(row.playlist_id) : "");
setImageId("");
setOrder(row.order != null ? String(row.order) : "");
setFile(null);
setOpen(true);
}
async function save(e: React.FormEvent) {
e.preventDefault();
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),
},
});
toast.success("آهنگ ویرایش شد.");
} else {
// Create is multipart on /music
await apiFetch("/music", {
method: "POST",
body: toFormData({
title,
artist,
type,
duration,
playlist_id: playlistId,
image_id: imageId,
file,
}),
});
toast.success("آهنگ افزوده شد.");
}
setOpen(false);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
} finally {
setSaving(false);
}
}
async function confirmDelete() {
if (!deleting) return;
setRemoving(true);
try {
await apiFetch(`/music/${deleting.id}`, { method: "DELETE" });
toast.success("آهنگ حذف شد.");
setDeleting(null);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در حذف");
} finally {
setRemoving(false);
}
}
const columns: Column<Track>[] = [
{
key: "play",
header: "پخش",
className: "w-20",
render: (r) => (
<MediaPreview kind="audio" src={pickUrl(r, SOUND_KEYS)} label={r.title} />
),
},
{
key: "thumbnail",
header: "تصویر",
className: "w-20",
render: (r) => (
<MediaPreview kind="image" src={pickUrl(r, IMAGE_KEYS)} label={r.title} />
),
},
{ key: "title", header: "عنوان" },
{ key: "artist", header: "هنرمند", render: (r) => r.artist ?? "—" },
{
key: "duration",
header: "مدت زمان",
render: (r) => formatDuration(r.duration),
},
{ key: "type", header: "نوع", render: (r) => r.type ?? "—" },
];
return (
<div>
<PageHeader
title="آهنگ‌ها"
subtitle="مدیریت آهنگ‌ها و فایل‌های صوتی موسیقی"
action={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
آهنگ جدید
</Button>
}
/>
<DataTable
columns={columns}
rows={data}
loading={loading}
error={error}
onRetry={reload}
emptyMessage="هنوز آهنگی بارگذاری نشده است."
emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
آهنگ جدید
</Button>
}
actions={(row) => (
<>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button
variant="ghost"
onClick={() => setDeleting(row)}
aria-label="حذف"
className="text-danger"
>
<TrashIcon className="h-4 w-4" />
</Button>
</>
)}
/>
<Modal
open={open}
onClose={() => setOpen(false)}
title={editing ? "ویرایش آهنگ" : "آهنگ جدید"}
footer={
<>
<Button variant="secondary" onClick={() => setOpen(false)}>
انصراف
</Button>
<Button form="track-form" type="submit" loading={saving}>
ذخیره
</Button>
</>
}
>
<form id="track-form" onSubmit={save} className="flex flex-col gap-4">
<Field label="عنوان" required>
<Input
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="مثلاً آرامش شبانه"
required
autoFocus
/>
</Field>
<Field label="هنرمند">
<Input
value={artist}
onChange={(e) => setArtist(e.target.value)}
placeholder="نام هنرمند"
/>
</Field>
{editing ? (
<Field label="ترتیب">
<Input
type="number"
value={order}
onChange={(e) => setOrder(e.target.value)}
dir="ltr"
/>
</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>
</>
)}
</form>
</Modal>
<ConfirmDialog
open={!!deleting}
message={`آیا از حذف «${deleting?.title ?? ""}» مطمئن هستید؟`}
loading={removing}
onConfirm={confirmDelete}
onClose={() => setDeleting(null)}
/>
</div>
);
}