feat: add pagination to schedule list

src/components/shows/ScheduleList.vue

@@ -31,12 +31,20 @@
           </tr>
         </tbody>
       </table>
+
+      <div
+        class="tw-flex tw-flex-wrap tw-gap-3 tw-items-center tw-px-6 tw-mt-3 tw-py-3 tw-border-0 tw-border-t tw-border-solid tw-border-gray-200 empty:tw-hidden"
+      >
+        <PaginationRange v-if="result.count > 0" :pagination-data="result" />
+        <Pagination v-model="page" :items-per-page="result.itemsPerPage" :count="result.count" />
+      </div>
     </div>
   </ASection>
 </template>
 
 <script lang="ts" setup>
 import { usePaginatedList } from '@rokoli/bnb/drf'
+import { ref } from 'vue'
 
 import { useI18n } from '@/i18n'
 import { useScheduleStore } from '@/stores/schedules'
@@ -45,6 +53,8 @@ import { useQuery } from '@/util'
 
 import ASection from '@/components/generic/ASection.vue'
 import ScheduleRow from './ScheduleRow.vue'
+import Pagination from '@/components/generic/Pagination.vue'
+import PaginationRange from '@/components/generic/PaginationRange.vue'
 
 defineOptions({ compatConfig: { MODE: 3 } })
 
@@ -54,7 +64,8 @@ const props = defineProps<{
 
 const { t } = useI18n()
 const scheduleStore = useScheduleStore()
-const { result } = usePaginatedList(scheduleStore.listIsolated, 1, 100, {
+const page = ref(1)
+const { result } = usePaginatedList(scheduleStore.listIsolated, page, 100, {
   query: useQuery(() => ({
     showIds: props.show.id,
     excludeInactive: '1',