feat: add pagination music

app/dashboard/music/tracks/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { apiFetch, ApiError, toFormData } from "@/lib/api";
-import { useList } from "@/lib/useResource";
+import { useList, usePaginated } from "@/lib/useResource";
 import { useToast } from "@/components/toast";
 import { DataTable, type Column } from "@/components/DataTable";
 import {
@@ -13,6 +13,7 @@ import {
   Select,
   Modal,
   PageHeader,
+  Pagination,
 } from "@/components/ui";
 import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
 import { formatMinutes, fileNameToTitle } from "@/lib/utils";
@@ -45,7 +46,8 @@ interface Track {
 }
 
 export default function MusicTracksPage() {
-  const { data, loading, error, reload } = useList<Track>("/music");
+  const { data, meta, page, setPage, loading, error, reload } =
+    usePaginated<Track>("/music", { perPage: 20 });
   const { data: playlists } = useList<Playlist>("/music-playlists");
   const toast = useToast();
 
@@ -256,6 +258,15 @@ export default function MusicTracksPage() {
         )}
       />
 
+      {meta && (
+        <Pagination
+          page={page}
+          lastPage={meta.last_page}
+          total={meta.total}
+          onChange={setPage}
+        />
+      )}
+
       <Modal
         open={open}
         onClose={() => setOpen(false)}