From 96328ff6ae385ab19ce0045d142ad3345476faef Mon Sep 17 00:00:00 2001
From: ahmadafriadi <ahmadafriadi0@gmail.com>
Date: Mon, 20 Oct 2025 17:01:28 +0700
Subject: [PATCH] Update Manga, Chapter & Pages

---
 components/layout/Sidebar.vue                 |  25 +++
 .../chapters/[chapterid]/pages/[id].vue       | 197 ++++++++++++++++++
 .../chapters/[chapterid]/pages/add.vue        | 180 ++++++++++++++++
 .../chapters/[chapterid]/pages/list.vue       | 178 ++++++++++++++++
 .../manga/[mangaid]/chapters/[id].vue         | 186 +++++++++++++++++
 .../manga/[mangaid]/chapters/add.vue          | 166 +++++++++++++++
 .../manga/[mangaid]/chapters/list.vue         | 179 ++++++++++++++++
 pages/entertainment/manga/add.vue             |   4 +-
 pages/entertainment/manga/list.vue            |  10 +-
 9 files changed, 1122 insertions(+), 3 deletions(-)
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/[id].vue
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/add.vue
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/list.vue
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/[id].vue
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/add.vue
 create mode 100644 pages/entertainment/manga/[mangaid]/chapters/list.vue

diff --git a/components/layout/Sidebar.vue b/components/layout/Sidebar.vue
index bf08e20..199d3a0 100644
--- a/components/layout/Sidebar.vue
+++ b/components/layout/Sidebar.vue
@@ -109,6 +109,31 @@
                                 </vue-collapsible>
                             </li>
 
+                            <li class="menu nav-item">
+                                <button
+                                    type="button"
+                                    class="nav-link group w-full"
+                                    :class="{ active: activeDropdown === 'entertainment' }"
+                                    @click="activeDropdown === 'entertainment' ? (activeDropdown = null) : (activeDropdown = 'entertainment')"
+                                >
+                                    <div class="flex items-center">
+                                        <icon-menu-pages class="shrink-0 group-hover:!text-primary" />
+
+                                        <span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">Entertainment</span>
+                                    </div>
+                                    <div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'entertainment' }">
+                                        <icon-caret-down />
+                                    </div>
+                                </button>
+                                <vue-collapsible :isOpen="activeDropdown === 'entertainment'">
+                                    <ul class="sub-menu text-gray-500">
+                                        <li>
+                                            <NuxtLink to="/entertainment/manga/list" @click="toggleMobileMenu">Manga</NuxtLink>
+                                        </li>
+                                    </ul>
+                                </vue-collapsible>
+                            </li>
+
 
                             <h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                                 <icon-minus class="hidden h-5 w-4 flex-none" />
diff --git a/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/[id].vue b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/[id].vue
new file mode 100644
index 0000000..fde39fe
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/[id].vue
@@ -0,0 +1,197 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Entertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
+                    Manga
+                </NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list`" class="text-primary hover:underline">Daftar Pages</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Edit Pages</span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Edit Pages</h5>
+                    <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list`" class="dark:text-white-light btn btn-dark !py-1">
+                        <icon-arrow-backward class="me-1" />
+                        Daftar
+                    </NuxtLink>
+                </div>
+                <div class="mb-5">
+                    <form v-if="form" class="space-y-5" @submit.prevent="submitForm()">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div :class="{ 'has-error': $validate.form.order.$error, 'has-success': isSubmitted && !$validate.form.order.$error }">
+                                <label for="order">Order</label>
+                                <input id="order" type="number" class="form-input" v-model="form.order" />
+                                <template v-if="isSubmitted && $validate.form.order.$error">
+                                    <p class="text-danger mt-1">Order harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="custom-file-container" data-upload-id="media"
+                                :class="{ 'has-error': $validate.form.media.$error, 'has-success': isSubmitted && !$validate.form.media.$error }">
+                                <div class="label-container">
+                                    <label for="media">Media </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="media" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleMediaChange" />
+                                    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
+                                    <span class="custom-file-container__custom-file__custom-file-control ltr:pr-20 rtl:pl-20"></span>
+                                </label>
+                                <template v-if="isSubmitted && $validate.form.media.$error">
+                                    <p class="text-danger mt-1">Gambar karakter harus diupload dengan file berjenis PNG atau JPEG dengan ukuran maksimal 1 MB</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center ltr:ml-auto mt-8">
+                            <button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> Simpan</button>
+                            <button type="reset" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useVuelidate } from '@vuelidate/core';
+    import { required, helpers } from '@vuelidate/validators';
+    import Multiselect from '@suadelabs/vue3-multiselect';
+    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
+    import '@/assets/css/file-upload-preview.css';
+
+    useHead({ title: 'Edit Pages' });
+
+    const isSubmitted = ref(false);
+
+    const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
+        if (!value) return true;
+        if (typeof value === 'string') return true;
+        return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
+    });
+    const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
+        if (!value) return true;
+        if (typeof value === 'string') return true;
+        return value.size <= 1048576; // 1MB dalam byte
+    });
+
+    const rules = {
+        form: {
+            order: { required },
+            media: { imageType, maxFileSize },
+        }
+    };
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
+
+    const isLoading = ref(false);
+
+    const featuredImageUploader = ref(null);
+
+    const { data: form, refresh } = await useAsyncData('page-get', 
+        () => $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${route.params.id}`, {}),
+    );
+
+    const $validate = useVuelidate(rules, { form });
+
+
+    onMounted(async () => {
+        if (!form.value) return;
+
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        mediaUploader.value =new FileUploadWithPreview('media', {
+            images: {
+                baseImage: form.value.media || '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+    });
+    
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+
+        formData.append('order', form.value.order);
+
+        if (form.value.media && typeof form.value.media !== 'string') {
+            formData.append('media', form.value.media);
+        }
+
+        isLoading.value = true;
+        await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${route.params.id}`, {
+            method: 'PUT',
+            body: formData
+        }).then(() => {
+            router.push({ path: "/entertainment/manga/" + route.params.mangaid + "/chapters/" + route.params.chapterid + "/pages/list"});
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+        .finally(() => {
+            isLoading.value = false;
+        });
+    }
+
+    function handleImageChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG atau JPG yang diizinkan')
+            return
+        }
+
+        form.value.media = file
+    }
+
+    function handleMediaChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG atau JPG yang diizinkan')
+            return
+        }
+
+        form.value.media = file
+    }
+
+    const resetForm = () => {
+        refresh()
+
+        isSubmitted.value = false;
+        $validate.value.form.$reset();
+
+        mediaUploader?.value?.clearPreviewPanel();
+        
+    };
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/add.vue b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/add.vue
new file mode 100644
index 0000000..33a8d24
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/add.vue
@@ -0,0 +1,180 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/list`" class="text-primary hover:underline">Manga</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Chapter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.mangaid}/pages/list`" class="text-primary hover:underline">Daftar Pages</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Tambah Pages</span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Tambah Pages</h5>
+                    <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.mangaid}/pages/list`" class="dark:text-white-light btn btn-dark !py-1">
+                        <icon-arrow-backward class="me-1" />
+                        Daftar
+                    </NuxtLink>
+                </div>
+                <div class="mb-5">
+                    <form class="space-y-5" @submit.prevent="submitForm()">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
+                            <div :class="{ 'has-error': $validate.form.order.$error, 'has-success': isSubmitted && !$validate.order.slug.$error }">
+                                <label for="order">Order</label>
+                                <input id="order" type="order" class="form-input" v-model="form.order" />
+                                <template v-if="isSubmitted && $validate.form.order.$error">
+                                    <p class="text-danger mt-1">Order harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="custom-file-container" data-upload-id="media"
+                                :class="{ 'has-error': $validate.form.media.$error, 'has-success': isSubmitted && !$validate.form.media.$error }">
+                                <div class="label-container">
+                                    <label for="media">Gambar </label> 
+                                    <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="media" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleImageChange" />
+                                    <input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
+                                    <span class="custom-file-container__custom-file__custom-file-control ltr:pr-20 rtl:pl-20"></span>
+                                </label>
+                                <template v-if="isSubmitted && $validate.form.featured_image.$error">
+                                    <p class="text-danger mt-1">Gambar pages harus diupload dengan file berjenis PNG atau JPEG dengan ukuran maksimal 1 MB</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center ltr:ml-auto mt-8">
+                            <button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> {{ isLoading ? 'Menyimpan...' : 'Simpan' }}</button>
+                            <button type="button" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { reactive } from 'vue'
+    import { useVuelidate } from '@vuelidate/core';
+    import { required, helpers } from '@vuelidate/validators';
+    import Multiselect from '@suadelabs/vue3-multiselect';
+    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
+    import '@/assets/css/file-upload-preview.css';
+
+    useHead({ title: 'Tambah Pages' });
+
+    const form = ref({
+        order: '',
+        media: '',
+    });
+    const isSubmitted = ref(false);
+    
+    const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
+        if (!value) return false;
+        return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
+    });
+    const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
+        if (!value) return false;
+        return value.size <= 1048576; 
+    });
+
+    const rules = {
+        form: {
+            order: { required },
+            media: { required, imageType, maxFileSize },
+        }
+    };
+    const $validate = useVuelidate(rules, { form });
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
+
+    const isLoading = ref(false);
+
+    const mediaUploader = ref(null);
+    
+    onMounted(async () => {
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        mediaUploader.value = new FileUploadWithPreview('media', {
+            images: {
+                baseImage: '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+    });
+
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+        
+        formData.append('order', form.value.order);
+        formData.append('chapter', parseInt(route.params.chapterid));
+        if (form.value.media) {
+            formData.append('media', form.value.media);
+        }
+
+        isLoading.value = true;
+        await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/`, {
+            method: 'POST',
+            body: formData
+        }).then(() => {
+            router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/list` });
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+        .finally(() => {
+            isLoading.value = false;
+        });
+    }
+
+    function handleImageChange(event: { target: { files: any[]; }; }) {
+        const file = event.target.files[0]
+
+        if (!file) return
+
+        const allowed = ['image/png', 'image/jpeg', 'image/jpg']
+        if (!allowed.includes(file.type)) {
+            alert('Hanya PNG atau JPG yang diizinkan')
+            return
+        }
+
+        form.value.media = file
+    }
+
+    const resetForm = () => {
+        form.value = {
+            order: '',
+            media: '',
+        };
+
+        isSubmitted.value = false;
+        $validate.value.form.$reset();
+
+        mediaUploader?.value?.clearPreviewPanel();
+    };
+
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/list.vue b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/list.vue
new file mode 100644
index 0000000..3c3fd09
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/[chapterid]/pages/list.vue
@@ -0,0 +1,178 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
+                    Manga
+                </NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">
+                    Chapter
+                </NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>
+                    Pages
+                </span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Page</h5>
+                    <div class="flex gap-2">
+                        <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-secondary !py-1">
+                            <icon-arrow-backward class="me-1" />
+                            Daftar Chapters
+                        </NuxtLink>
+                        <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/add`" class="dark:text-white-light btn btn-primary !py-1">
+                            <icon-plus class="me-1" />
+                            Tambah
+                        </NuxtLink>
+                    </div>
+                </div>
+                <div class="mb-5 flex items-center justify-between">
+                    <input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari... (tombol Enter untuk mencari)" @change="changeSearch"/>
+                </div>
+                <div class="mb-5">
+                    <div class="datatable">
+                        <vue3-datatable
+                            :rows="rows"
+                            :columns="cols"
+                            :totalRows="totalRows"
+                            :isServerMode=true
+                            :page="params.current_page"
+                            :pageSize="params.pagesize"
+                            :sortable="true"
+                            :sortColumn="params.sort_column"
+                            :sortDirection="params.sort_direction"
+                            @change="changeServer"
+                            skin="whitespace-nowrap bh-table-hover"
+                            firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                            lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
+                            previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                            nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                        >
+                            <template #actions="data">
+                                <div class="flex justify-end gap-1">
+                                    <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
+                                        <icon-edit class="me-1" />
+                                        Edit
+                                    </button>
+                                    <button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
+                                        <icon-trash class="me-1" />
+                                        Delete
+                                    </button>
+                                </div>
+                            </template>
+                        </vue3-datatable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, computed, onMounted } from 'vue';
+    import Vue3Datatable from '@bhplugin/vue3-datatable';
+    import { useDebounceFn } from '@vueuse/core';
+    useHead({ title: 'Daftar Pages' });
+
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
+
+    const cols =
+        ref([
+            { field: 'order', title: 'Order' },
+            { field: 'media', title: 'Media', render: (row: any) => `<img src="${config.public.apiBase + row.media}" class="h-20 object-contain" />` },
+            { 
+                field: 'actions', 
+                title: 'Aksi', 
+                headerClass: 'text-right',
+                cellClass: 'text-right',
+                sort: false, 
+                width: '150px' 
+            }
+        ]) || [];
+
+    const params = reactive({
+        search: null,
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'order',
+        sort_direction: 'asc',
+    });
+    
+    const rows = computed(() => pages.value?.results ?? []);
+    const totalRows = computed(() => pages.value?.count ?? 0);
+    const { data: pages } = await useAsyncData('pages', 
+    () => { 
+        return $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/`, {
+            params: {
+                page: params.current_page,
+                page_size: params.pagesize,
+                ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
+                search: params.search
+            },
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${useAuthStore().accessToken}`
+            },
+            });
+        },
+        {
+            watch: [params],
+            default: () => ({
+            results: [],
+            count: 0,
+            }),
+        }
+    );
+
+    const debouncedSearch = useDebounceFn(() => {
+        params.current_page = 1;
+        refreshNuxtData('pages');
+    }, 500);
+
+    watch(() => params.search, debouncedSearch);
+    
+    const changeServer = (data: any) => {
+        params.pagesize = data.pagesize;
+        params.sort_column = data.sort_column;
+        params.sort_direction = data.sort_direction;
+        params.current_page = data.current_page;
+    };
+
+    const changeSearch = (data: any) => {
+        params.current_page = 1; 
+    };
+
+    const viewData = (data: any) => {
+        router.push({
+            path: `/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${data.id}`,
+        });
+    };
+
+    const deleteData = async (data: any) => {
+        try {
+            await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.chapterid}/pages/${data.id}/`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${useAuthStore().accessToken}`
+                },
+            });
+            refreshNuxtData('pages');
+        } catch (err) {
+            console.error('Gagal menghapus data', err);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/[mangaid]/chapters/[id].vue b/pages/entertainment/manga/[mangaid]/chapters/[id].vue
new file mode 100644
index 0000000..9a90689
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/[id].vue
@@ -0,0 +1,186 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Entertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
+                    Manga
+                </NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Edit Chapter</span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Edit Karakter</h5>
+                    <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-dark !py-1">
+                        <icon-arrow-backward class="me-1" />
+                        Daftar
+                    </NuxtLink>
+                </div>
+                <div class="mb-5">
+                    <form v-if="form" class="space-y-5" @submit.prevent="submitForm()">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div :class="{ 'has-error': $validate.form.chapter.$error, 'has-success': isSubmitted && !$validate.form.chapter.$error }">
+                                <label for="chapter">Chapter</label>
+                                <input id="chapter" type="number" class="form-input" v-model="form.chapter" />
+                                <template v-if="isSubmitted && $validate.form.title.$error">
+                                    <p class="text-danger mt-1">Judul chapter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.status.$error, 'has-success': isSubmitted && !$validate.form.status.$error }">
+                                <label for="status">Status</label>
+                                <multiselect id="status"
+                                    v-model="form.status"
+                                    :options="statusOptions"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih genre status"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="label"
+                                    track-by="value"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.status.$error">
+                                    <p class="text-danger mt-1">Genre status harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
+                                <label for="posted_at">Tanggal Unggah</label>
+                                <input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
+                                <template v-if="isSubmitted && $validate.form.posted_at.$error">
+                                    <p class="text-danger mt-1">Tanggal unggah chapter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
+                                <label for="archived_at">Tanggal Arsip</label>
+                                <input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
+                                <template v-if="isSubmitted && $validate.form.archived_at.$error">
+                                    <p class="text-danger mt-1">Tanggal arsip chapter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="flex items-center ltr:ml-auto mt-8">
+                            <button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> Simpan</button>
+                            <button type="reset" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useVuelidate } from '@vuelidate/core';
+    import { required, helpers } from '@vuelidate/validators';
+    import Multiselect from '@suadelabs/vue3-multiselect';
+    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
+    import '@/assets/css/file-upload-preview.css';
+
+    useHead({ title: 'Edit Chapter' });
+
+    const isSubmitted = ref(false);
+
+    const imageType = helpers.withMessage('Format gambar harus PNG atau JPG', (value) => {
+        if (!value) return true;
+        if (typeof value === 'string') return true;
+        return ['image/png', 'image/jpeg', 'image/jpg'].includes(value.type);
+    });
+    const maxFileSize = helpers.withMessage('Ukuran gambar tidak boleh lebih dari 1MB', (value) => {
+        if (!value) return true;
+        if (typeof value === 'string') return true;
+        return value.size <= 1048576; // 1MB dalam byte
+    });
+
+    const rules = {
+        form: {
+            chapter: { required },
+            status: { required },
+            posted_at: { required },
+            archived_at: { required },
+        }
+    };
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
+
+    const statusOptions = [{ "value": "draft", "label": "Draft" }, { "value": "published", "label": "Dipublikasikan" }, { "value": "archived", "label": "Diarsipkan" } ]
+
+    const isLoading = ref(false);
+
+    const featuredImageUploader = ref(null);
+
+    const { data: form, refresh } = await useAsyncData('chapter-get', 
+        () => $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.id}`, {}),
+    );
+
+    const $validate = useVuelidate(rules, { form });
+
+
+    onMounted(async () => {
+        if (form.value.status) {
+            const foundStatus = statusOptions.find(opt => opt.value === form.value.status);
+            if (foundStatus) form.value.status = foundStatus;
+        }
+
+        if (form.value.posted_at) {
+            form.value.posted_at = form.value.posted_at.replace('Z', '').slice(0, 16);
+        }
+        if (form.value.archived_at) {
+            form.value.archived_at = form.value.archived_at.replace('Z', '').slice(0, 16);
+        }
+    });
+    
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+
+        formData.append('chapter', form.value.chapter);
+        formData.append('status', form.value.status.value);
+        formData.append('posted_at', new Date(form.value.posted_at).toISOString());
+        formData.append('archived_at', new Date(form.value.archived_at).toISOString());
+
+        isLoading.value = true;
+        await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${route.params.id}/`, {
+            method: 'PUT',
+            body: formData
+        }).then(() => {
+            router.push({ path: '/entertainment/manga/' + route.params.mangaid + '/chapters/' + route.params.id + '/list'});
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+        .finally(() => {
+            isLoading.value = false;
+        });
+    }
+
+    const resetForm = () => {
+        refresh()
+
+        isSubmitted.value = false;
+        $validate.value.form.$reset();
+
+        featuredImageUploader?.value?.clearPreviewPanel();
+        featuredIconUploader?.value?.clearPreviewPanel();
+        
+    };
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/[mangaid]/chapters/add.vue b/pages/entertainment/manga/[mangaid]/chapters/add.vue
new file mode 100644
index 0000000..f7ef406
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/add.vue
@@ -0,0 +1,166 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="text-primary hover:underline">Daftar Chapter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Tambah Chapter</span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Tambah Chapter</h5>
+                    <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/list`" class="dark:text-white-light btn btn-dark !py-1">
+                        <icon-arrow-backward class="me-1" />
+                        Daftar
+                    </NuxtLink>
+                </div>
+                <div class="mb-5">
+                    <form class="space-y-5" @submit.prevent="submitForm()">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div :class="{ 'has-error': $validate.form.chapter.$error, 'has-success': isSubmitted && !$validate.chapter.slug.$error }">
+                                <label for="chapter">Chapter</label>
+                                <input id="chapter" type="number" class="form-input" v-model="form.chapter" />
+                                <template v-if="isSubmitted && $validate.form.chapter.$error">
+                                    <p class="text-danger mt-1">Chapter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.status.$error, 'has-success': isSubmitted && !$validate.form.status.$error }">
+                                <label for="status">Status</label>
+                                <multiselect id="format"
+                                    v-model="form.status"
+                                    :options="statusOptions"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih status chapter"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="label"
+                                    track-by="value"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.status.$error">
+                                    <p class="text-danger mt-1">Stastus Chapter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 gap-2">
+                            <div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
+                                <label for="posted_at">Tanggal Unggah</label>
+                                <input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
+                                <template v-if="isSubmitted && $validate.form.posted_at.$error">
+                                    <p class="text-danger mt-1">Tanggal Harus Diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
+                                <label for="archived_at">Tanggal Arsip</label>
+                                <input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
+                                <template v-if="isSubmitted && $validate.form.archived_at.$error">
+                                    <p class="text-danger mt-1">Tanggal Harus Diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="flex items-center ltr:ml-auto mt-8">
+                            <button type="submit" class="btn btn-success !py-1" :disabled="isLoading"><icon-save class="me-1" /> {{ isLoading ? 'Menyimpan...' : 'Simpan' }}</button>
+                            <button type="button" class="btn btn-dark !py-1 ml-1" @click="resetForm"><icon-restore class="me-1" />Reset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { reactive } from 'vue'
+    import { useVuelidate } from '@vuelidate/core';
+    import { required, helpers } from '@vuelidate/validators';
+    import Multiselect from '@suadelabs/vue3-multiselect';
+    import '@suadelabs/vue3-multiselect/dist/vue3-multiselect.css';
+    import '@/assets/css/file-upload-preview.css';
+
+    useHead({ title: 'Tambah Chapter' });
+
+    const form = ref({
+        chapter: '',
+        status: '',
+        posted_at: '',
+        archived_at: '',
+    });
+    const isSubmitted = ref(false);
+
+    const rules = {
+        form: {
+            chapter: { required },
+            status: { required },
+            posted_at: { required },
+            archived_at: { required },
+        }
+    };
+    const $validate = useVuelidate(rules, { form });
+    const router = useRouter();
+    const route = useRoute();
+    const { $api } = useNuxtApp();
+
+    const statusOptions = [{ "value": "draft", "label": "Draft" }, { "value": "published", "label": "Dipublikasikan" }, { "value": "archived", "label": "Diarsipkan" } ]
+
+    const isLoading = ref(false);
+
+    const submitForm = async () => {
+        isSubmitted.value = true;
+        $validate.value.form.$touch();
+        if ($validate.value.form.$invalid) {
+            return false;
+        }
+
+        const formData = new FormData();
+        
+        formData.append('chapter', form.value.chapter);
+        formData.append('status', form.value.status?.value ?? '');
+        formData.append('manga', parseInt(route.params.mangaid));
+        if (form.value.posted_at) {
+            formData.append('posted_at', new Date(form.value.posted_at).toISOString());
+        } else {
+            formData.append('posted_at', '');
+        }
+
+        if (form.value.archived_at) {
+            formData.append('archived_at', new Date(form.value.archived_at).toISOString());
+        } else {
+            formData.append('archived_at', '');
+        }
+
+        isLoading.value = true;
+        await $api(`/entertainment/manga/${route.params.mangaid}/chapters/`, {
+            method: 'POST',
+            body: formData
+        }).then(() => {
+            router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/list` });
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+        .finally(() => {
+            isLoading.value = false;
+        });
+    }
+
+    const resetForm = () => {
+        form.value = {
+            chapter: '',
+            status: '',
+            posted_at: '',
+            archived_at: '',
+        };
+
+        isSubmitted.value = false;
+        $validate.value.form.$reset();
+    };
+
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/[mangaid]/chapters/list.vue b/pages/entertainment/manga/[mangaid]/chapters/list.vue
new file mode 100644
index 0000000..465652c
--- /dev/null
+++ b/pages/entertainment/manga/[mangaid]/chapters/list.vue
@@ -0,0 +1,179 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/entertainment/manga/list" class="text-primary hover:underline">
+                    Manga
+                </NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>
+                    Chapter
+                </span>
+            </li>
+        </ul>
+
+        <div class="grid grid-cols-1 gap-6 pt-5">
+            <div class="panel">
+                <div class="mb-5 flex items-center justify-between">
+                    <h5 class="text-lg font-semibold dark:text-white-light">Daftar Chapter</h5>
+                    <div class="flex gap-2">
+                        <NuxtLink to="/entertainment/manga/list" class="dark:text-white-light btn btn-secondary !py-1">
+                            <icon-arrow-backward class="me-1" />
+                            Daftar Manga
+                        </NuxtLink>
+                        <NuxtLink :to="`/entertainment/manga/${route.params.mangaid}/chapters/add`" class="dark:text-white-light btn btn-primary !py-1">
+                            <icon-plus class="me-1" />
+                            Tambah
+                        </NuxtLink>
+                    </div>
+                </div>
+                <div class="mb-5 flex items-center justify-between">
+                    <input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari... (tombol Enter untuk mencari)" @change="changeSearch"/>
+                </div>
+                <div class="mb-5">
+                    <div class="datatable">
+                        <vue3-datatable
+                            :rows="rows"
+                            :columns="cols"
+                            :totalRows="totalRows"
+                            :isServerMode=true
+                            :page="params.current_page"
+                            :pageSize="params.pagesize"
+                            :sortable="true"
+                            :sortColumn="params.sort_column"
+                            :sortDirection="params.sort_direction"
+                            @change="changeServer"
+                            skin="whitespace-nowrap bh-table-hover"
+                            firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                            lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
+                            previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                            nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
+                        >
+                            <template #actions="data">
+                                <div class="flex justify-end gap-1">
+                                    <button type="button" class="btn btn-info !py-1" @click="viewPages(data.value)">
+                                        <icon-book-open class="me-1" />
+                                        Page
+                                    </button>
+                                    <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
+                                        <icon-edit class="me-1" />
+                                        Edit
+                                    </button>
+                                    <button type="button" class="btn btn-danger !py-1" @click="deleteData(data.value)">
+                                        <icon-trash class="me-1" />
+                                        Delete
+                                    </button>
+                                </div>
+                            </template>
+                        </vue3-datatable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { ref, computed, onMounted } from 'vue';
+    import Vue3Datatable from '@bhplugin/vue3-datatable';
+    import { useDebounceFn } from '@vueuse/core';
+import IconMenuDragAndDrop from '~/components/icon/menu/icon-menu-drag-and-drop.vue';
+    useHead({ title: 'Daftar Karakter' });
+
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+    const { $api } = useNuxtApp();
+
+    const cols =
+        ref([
+            { field: 'chapter', title: 'Chapter' },
+            { field: 'status', title: 'Status' },
+            { 
+                field: 'actions', 
+                title: 'Aksi', 
+                headerClass: 'text-right',
+                cellClass: 'text-right',
+                sort: false, 
+                width: '150px' 
+            }
+        ]) || [];
+
+    const params = reactive({
+        search: null,
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'chapter',
+        sort_direction: 'asc',
+    });
+    
+    const rows = computed(() => chapters.value?.results ?? []);
+    const totalRows = computed(() => chapters.value?.count ?? 0);
+    const { data: chapters } = await useAsyncData('chapters', 
+        () => { 
+            return $api(`/entertainment/manga/${route.params.mangaid}/chapters/`, {
+                params: {
+                    page: params.current_page,
+                    page_size: params.pagesize,
+                    ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
+                    search: params.search
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${useAuthStore().accessToken}`
+                },
+            });
+        }, {
+            watch: [params],
+            default: () => ({
+                results: [],
+                count: 0,
+            }),
+        }
+    );
+
+    const debouncedSearch = useDebounceFn(() => {
+        params.current_page = 1;
+        refreshNuxtData('chapters');
+    }, 500);
+
+    watch(() => params.search, debouncedSearch);
+    
+    const changeServer = (data: any) => {
+        params.pagesize = data.pagesize;
+        params.sort_column = data.sort_column;
+        params.sort_direction = data.sort_direction;
+        params.current_page = data.current_page;
+    };
+
+    const changeSearch = (data: any) => {
+        params.current_page = 1; 
+    };
+
+    const viewPages = (data: any) => {
+        router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/${data.id}/pages/list` });
+    };
+
+    const viewData = (data: any) => {
+        router.push({ path: `/entertainment/manga/${route.params.mangaid}/chapters/` + data.id });
+    };
+
+    const deleteData = async (data: any) => {
+        try {
+            await $api(`/entertainment/manga/${route.params.mangaid}/chapters/${data.id}/`, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${useAuthStore().accessToken}`
+                },
+            });
+            refreshNuxtData('chapters');
+        } catch (err) {
+            console.error('Gagal menghapus data', err);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/pages/entertainment/manga/add.vue b/pages/entertainment/manga/add.vue
index 55147cb..34e8291 100644
--- a/pages/entertainment/manga/add.vue
+++ b/pages/entertainment/manga/add.vue
@@ -103,14 +103,14 @@
                         <div class="grid grid-cols-1 gap-4 md:grid-cols-4 gap-2">
                             <div :class="{ 'has-error': $validate.form.posted_at.$error, 'has-success': isSubmitted && !$validate.form.posted_at.$error }">
                                 <label for="posted_at">Tanggal Unggah</label>
-                                <input id="posted_at" type="date" class="form-input" v-model="form.posted_at" />
+                                <input id="posted_at" type="datetime-local" class="form-input" v-model="form.posted_at" />
                                 <template v-if="isSubmitted && $validate.form.posted_at.$error">
                                     <p class="text-danger mt-1">Tanggal Harus Diisi</p>
                                 </template>
                             </div>
                             <div :class="{ 'has-error': $validate.form.archived_at.$error, 'has-success': isSubmitted && !$validate.form.archived_at.$error }">
                                 <label for="archived_at">Tanggal Arsip</label>
-                                <input id="archived_at" type="date" class="form-input" v-model="form.archived_at" />
+                                <input id="archived_at" type="datetime-local" class="form-input" v-model="form.archived_at" />
                                 <template v-if="isSubmitted && $validate.form.archived_at.$error">
                                     <p class="text-danger mt-1">Tanggal Harus Diisi</p>
                                 </template>
diff --git a/pages/entertainment/manga/list.vue b/pages/entertainment/manga/list.vue
index f1304fb..ddb77a6 100644
--- a/pages/entertainment/manga/list.vue
+++ b/pages/entertainment/manga/list.vue
@@ -5,7 +5,7 @@
                 <a href="javascript:;" class="text-primary hover:underline">Intertainment</a>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
-                <span>Daftar Manga</span>
+                <span>Manga</span>
             </li>
         </ul>
 
@@ -42,6 +42,10 @@
                         >
                             <template #actions="data">
                                 <div class="flex justify-end gap-1">
+                                    <button type="button" class="btn btn-info !py-1" @click="viewChapters(data.value)">
+                                        <icon-book-open class="me-1" />
+                                        Chapter
+                                    </button>
                                     <button type="button" class="btn btn-success !py-1" @click="viewData(data.value)">
                                         <icon-edit class="me-1" />
                                         Edit
@@ -135,6 +139,10 @@
         params.current_page = 1; 
     };
 
+    const viewChapters = (data: any) => {
+        router.push({ path: `/entertainment/manga/${data.id}/chapters/list` });
+    };
+
     const viewData = (data: any) => {
         router.push({ path: "/entertainment/manga/" + data.id });
     };