From 9293c4cde5f85666a811da753b905f3ccaead6f5 Mon Sep 17 00:00:00 2001
From: Irwan Cahyono <irwan.l.cahyono@gmail.com>
Date: Mon, 21 Jul 2025 14:48:10 +0700
Subject: [PATCH] character skin

---
 components/layout/Sidebar.vue       |   4 +-
 pages/character/characters/add.vue  |  65 ++++----
 pages/character/characters/list.vue |  54 +++++--
 pages/character/skins/[id].vue      | 240 ++++++++++++++++++++++++++++
 pages/character/skins/add.vue       | 238 +++++++++++++++++++++++++++
 pages/character/skins/list.vue      | 128 +++++++++++++++
 6 files changed, 681 insertions(+), 48 deletions(-)
 create mode 100644 pages/character/skins/[id].vue
 create mode 100644 pages/character/skins/add.vue
 create mode 100644 pages/character/skins/list.vue

diff --git a/components/layout/Sidebar.vue b/components/layout/Sidebar.vue
index 2f4d7de..e2f4f5a 100644
--- a/components/layout/Sidebar.vue
+++ b/components/layout/Sidebar.vue
@@ -111,7 +111,9 @@
                                         <li>
                                             <NuxtLink to="/character/characters/list" @click="toggleMobileMenu">Karakter</NuxtLink>
                                         </li>
-                                        
+                                        <li>
+                                            <NuxtLink to="/character/skins/list" @click="toggleMobileMenu">Skin Karakter</NuxtLink>
+                                        </li>
                                     </ul>
                                 </vue-collapsible>
                             </li>
diff --git a/pages/character/characters/add.vue b/pages/character/characters/add.vue
index cdff92f..fab243a 100644
--- a/pages/character/characters/add.vue
+++ b/pages/character/characters/add.vue
@@ -2,7 +2,7 @@
     <div>
         <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
-                <a href="javascript:;" class="text-primary hover:underline">Konten</a>
+                <a href="javascript:;" class="text-primary hover:underline">Karakter</a>
             </li>
             <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
                 <NuxtLink to="/character/characters/list" class="text-primary hover:underline">Daftar Karakter</NuxtLink>
@@ -15,7 +15,7 @@
         <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 Konten</h5>
+                    <h5 class="text-lg font-semibold dark:text-white-light">Tambah Karakter</h5>
                     <NuxtLink to="/character/characters/list" class="dark:text-white-light btn btn-dark !py-1">
                         <icon-arrow-backward class="me-1" />
                         Daftar
@@ -53,7 +53,7 @@
                                 <label for="grade">Jenis Kelamin</label>
                                 <div class="grid grid-cols-1 gap-2">
                                     <label class="inline-flex">
-                                        <input type="radio" v-model="form.sex" class="form-radio" value="1" checked />
+                                        <input type="radio" v-model="form.sex" class="form-radio" value="1" />
                                         <span>Laki-laki</span>
                                     </label>
                                     <label class="inline-flex">
@@ -110,8 +110,8 @@
                             </div>
                         </div>
                         <div class="flex items-center ltr:ml-auto mt-8">
-                            <button type="submit" class="btn btn-success !py-1"><icon-save class="me-1" /> Simpan</button>
-                            <button type="reset" class="btn btn-dark !py-1 ml-1"><icon-restore class="me-1" />Reset</button>
+                            <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>
@@ -132,7 +132,7 @@
 
     const form = ref({
         name: '',
-        decription: '',
+        description: '',
         sex: null,
         type: '',
         featured_image: '',
@@ -154,38 +154,23 @@
     const config = useRuntimeConfig();
     const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
 
-    const params = reactive({
-        current_page: 1,
-        pagesize: 10,
-        sort_column: 'id',
-        sort_direction: 'asc',
-    });
+    const isLoading = ref(false);
 
-    const { data: characters } = await useAsyncData('characters', 
-        () => $fetch(`${config.public.apiBase}character/characters/`, {
-            params: {
-                page: params.current_page,
-                page_size: 50
-            }
-        }), {
-            watch: [params]
-        }
-    );
+    const featuredImageUploader = ref(null);
+    const featuredIconUploader = ref(null);
     
     onMounted(async () => {
         const fileupload = await import('file-upload-with-preview');
         let FileUploadWithPreview = fileupload.default;
 
-        // single image upload
-        new FileUploadWithPreview('featuredImage', {
+        featuredImageUploader.value = new FileUploadWithPreview('featuredImage', {
             images: {
                 baseImage: '/assets/images/file-preview.svg',
                 backgroundImage: '',
             },
         });
 
-        // single image upload
-        new FileUploadWithPreview('featuredIcon', {
+        featuredIconUploader.value = new FileUploadWithPreview('featuredIcon', {
             images: {
                 baseImage: '/assets/images/file-preview.svg',
                 backgroundImage: '',
@@ -204,7 +189,7 @@
         
         formData.append('name', form.value.name);
         formData.append('sex', form.value.sex);
-        formData.append('type', form.value.type.value);
+        formData.append('type', form.value.type?.value ?? '');
         formData.append('description', form.value.description);
 
         if (form.value.featured_image) {
@@ -214,17 +199,18 @@
             formData.append('featured_icon', form.value.featured_icon);
         }
 
+        isLoading.value = true;
         await $fetch(`${config.public.apiBase}character/characters/`, {
             method: 'POST',
             body: formData
         }).then(() => {
-            //redirect
             router.push({ path: "/character/characters/list" });
         })
         .catch((error) => {
-
-            //assign response error data to state "errors"
             console.log(error);
+        })
+        .finally(() => {
+            isLoading.value = false;
         });
     }
 
@@ -255,4 +241,23 @@
 
         form.value.featured_icon = file
     }
+
+    const resetForm = () => {
+        form.value = {
+            name: '',
+            description: '',
+            sex: null,
+            type: '',
+            featured_image: '',
+            featured_icon: '',
+        };
+
+        isSubmitted.value = false;
+        $validate.value.form.$reset();
+
+        featuredImageUploader?.value?.clearPreviewPanel();
+        featuredIconUploader?.value?.clearPreviewPanel();
+        
+    };
+
 </script>
\ No newline at end of file
diff --git a/pages/character/characters/list.vue b/pages/character/characters/list.vue
index 8dd997c..1801d0e 100644
--- a/pages/character/characters/list.vue
+++ b/pages/character/characters/list.vue
@@ -24,9 +24,9 @@
                 <div class="mb-5">
                     <div class="datatable">
                         <vue3-datatable
-                            :rows="characters?.results"
+                            :rows="rows"
                             :columns="cols"
-                            :totalRows="characters?.count"
+                            :totalRows="totalRows"
                             :isServerMode=true
                             :page="params.current_page"
                             :pageSize="params.pagesize"
@@ -40,8 +40,8 @@
                             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 #id="data">
-                                <div class="flex gap-1">
+                            <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
@@ -63,7 +63,8 @@
 <script lang="ts" setup>
     import { ref, computed, onMounted } from 'vue';
     import Vue3Datatable from '@bhplugin/vue3-datatable';
-    useHead({ title: 'Daftar Konten' });
+    import { useDebounceFn } from '@vueuse/core';
+    useHead({ title: 'Daftar Karakter' });
 
     const router = useRouter();
     const config = useRuntimeConfig();
@@ -71,9 +72,15 @@
     const cols =
         ref([
             { field: 'name', title: 'Nama' },
-            { field: 'id', title: 'Aksi' },
-            
-        ]) || [];
+            { 
+                field: 'actions', 
+                title: 'Aksi', 
+                headerClass: 'text-right',
+                cellClass: 'text-right',
+                sort: false, 
+                width: '150px' 
+            }
+        ]);
 
     const params = reactive({
         search: null,
@@ -83,6 +90,8 @@
         sort_direction: 'asc',
     });
     
+    const rows = computed(() => characters.value?.results ?? []);
+    const totalRows = computed(() => characters.value?.count ?? 0);
     const { data: characters } = await useAsyncData('characters', 
         () => { 
             return $fetch(`${config.public.apiBase}/character/characters/`, {
@@ -93,9 +102,20 @@
                     search: params.search
                 }})
         }, {
-            watch: [params]
+            watch: [params],
+            default: () => ({
+                results: [],
+                count: 0,
+            }),
         }
     );
+
+    const debouncedSearch = useDebounceFn(() => {
+        params.current_page = 1;
+        refreshNuxtData('characters');
+    }, 500);
+
+    watch(() => params.search, debouncedSearch);
     
     const changeServer = (data: any) => {
         params.pagesize = data.pagesize;
@@ -115,13 +135,13 @@
     };
 
     const deleteData = async (data: any) => {
-
-        //delete data with API
-        await $fetch(`${config.public.apiBase}character/characters/${data.id}/`, {
-            method: 'DELETE'
-        });
-
-        //refersh data posts
-        refreshNuxtData('characters');
+        try {
+            await $fetch(`${config.public.apiBase}/character/characters/${data.id}/`, {
+                method: 'DELETE',
+            });
+            refreshNuxtData('characters');
+        } catch (err) {
+            console.error('Gagal menghapus data', err);
+        }
     }
 </script>
\ No newline at end of file
diff --git a/pages/character/skins/[id].vue b/pages/character/skins/[id].vue
new file mode 100644
index 0000000..926636e
--- /dev/null
+++ b/pages/character/skins/[id].vue
@@ -0,0 +1,240 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Skin Karakter</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/character/skins/list" class="text-primary hover:underline">Daftar Skin Karakter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Edit Skin Karakter</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 Skin Karakter</h5>
+                    <NuxtLink to="/character/skins/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.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
+                                <label for="name">Nama Skin</label>
+                                <input id="name" type="text" class="form-input" v-model="form.name" />
+                                <template v-if="isSubmitted && $validate.form.name.$error">
+                                    <p class="text-danger mt-1">Nama Skin Karakter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.character.$error, 'has-success': isSubmitted && !$validate.form.character.$error }">
+                                <label for="character">Karakter</label>
+                                <multiselect id="character"
+                                    v-model="form.character"
+                                    :options="characters?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih karakter"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="name"
+                                    track-by="id"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.character.$error">
+                                    <p class="text-danger mt-1">Karakter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                                <label for="description">Deskripsi Karakter</label>
+                                <textarea id="description" rows="3" class="form-textarea" v-model="form.description"></textarea>
+                                <template v-if="isSubmitted && $validate.form.description.$error">
+                                    <p class="text-danger mt-1">Deskripsi karakter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                                <div class="label-container">
+                                    <label for="featured_image">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="featured_image" 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 karakter harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                            <div class="custom-file-container" data-upload-id="featuredIcon"
+                                :class="{ 'has-error': $validate.form.featured_icon.$error, 'has-success': isSubmitted && !$validate.form.featured_icon.$error }">
+                                <div class="label-container">
+                                    <label for="featured_icon">Ikon </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="featured_icon" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleIconChange" />
+                                    <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_icon.$error">
+                                    <p class="text-danger mt-1">Gambar ikon karakter harus diisi</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"><icon-save class="me-1" /> Simpan</button>
+                            <button type="reset" class="btn btn-dark !py-1 ml-1"><icon-restore class="me-1" />Reset</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useVuelidate } from '@vuelidate/core';
+    import { integer, minValue,required } 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 Skin Karakter' });
+
+    const isSubmitted = ref(false);
+    const rules = {
+        form: {
+            name: { required },
+            description: { required },
+            character: { required },
+            featured_image: { required },
+            featured_icon: { required },
+        }
+    };
+    const router = useRouter();
+    const route = useRoute();
+    const config = useRuntimeConfig();
+
+    const params = reactive({
+        search: null,
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'name',
+        sort_direction: 'asc',
+    });
+
+    const { data: characters } = await useAsyncData('characters', 
+        () => { 
+            return $fetch(`${config.public.apiBase}/character/characters/`, {
+                params: {
+                    page: params.current_page,
+                    page_size: params.pagesize,
+                    ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
+                    search: params.search
+                }})
+        }, {
+            watch: [params]
+        }
+    );
+
+    const { data: form } = await useAsyncData('skins', 
+        () => $fetch(`${config.public.apiBase}character/character-skins/${route.params.id}`, {})
+    );
+
+    const $validate = useVuelidate(rules, { form });
+
+
+    onMounted(async () => {
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        // single image upload
+        new FileUploadWithPreview('featuredImage', {
+            images: {
+                baseImage: form.value.featured_image || '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+
+        // single image upload
+        new FileUploadWithPreview('featuredIcon', {
+            images: {
+                baseImage: form.value.featured_icon || '/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('name', form.value.name);
+        formData.append('character', form.value.character.id);
+        formData.append('description', form.value.description);
+
+        if (form.value.featured_image) {
+            formData.append('featured_image', form.value.featured_image);
+        }
+        if (form.value.featured_icon) {
+            formData.append('featured_icon', form.value.featured_icon);
+        }
+
+        await $fetch(`${config.public.apiBase}character/character-skins/${route.params.id}/`, {
+            method: 'PUT',
+            body: formData
+        }).then(() => {
+            //redirect
+            router.push({ path: "/character/skins/list" });
+        })
+        .catch((error) => {
+
+            console.log(error);
+        });
+    }
+
+    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.featured_image = file
+    }
+
+    function handleIconChange(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 yang diizinkan')
+            return
+        }
+
+        form.value.featured_icon = file
+    }
+</script>
\ No newline at end of file
diff --git a/pages/character/skins/add.vue b/pages/character/skins/add.vue
new file mode 100644
index 0000000..927769c
--- /dev/null
+++ b/pages/character/skins/add.vue
@@ -0,0 +1,238 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Skin Karakter</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <NuxtLink to="/character/skins/list" class="text-primary hover:underline">Daftar Skin Karakter</NuxtLink>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Tambah Skin Karakter</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 Skin Karakter</h5>
+                    <NuxtLink to="/character/skins/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.name.$error, 'has-success': isSubmitted && !$validate.form.name.$error }">
+                                <label for="name">Nama Skin</label>
+                                <input id="name" type="text" class="form-input" v-model="form.name" />
+                                <template v-if="isSubmitted && $validate.form.name.$error">
+                                    <p class="text-danger mt-1">Nama Skin Karakter harus diisi</p>
+                                </template>
+                            </div>
+                            <div :class="{ 'has-error': $validate.form.character.$error, 'has-success': isSubmitted && !$validate.form.character.$error }">
+                                <label for="type">Karakter</label>
+                                <multiselect id="format"
+                                    v-model="form.character"
+                                    :options="characters?.results"
+                                    class="custom-multiselect"
+                                    :searchable="true"
+                                    placeholder="Pilih karakter"
+                                    selected-label=""
+                                    select-label=""
+                                    deselect-label=""
+                                    label="name"
+                                    track-by="id"
+                                ></multiselect>
+                                <template v-if="isSubmitted && $validate.form.character.$error">
+                                    <p class="text-danger mt-1">Karakter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 gap-2">
+                            <div :class="{ 'has-error': $validate.form.description.$error, 'has-success': isSubmitted && !$validate.form.description.$error }">
+                                <label for="description">Deskripsi Skin Karakter</label>
+                                <textarea id="description" rows="3" class="form-textarea" v-model="form.description"></textarea>
+                                <template v-if="isSubmitted && $validate.form.description.$error">
+                                    <p class="text-danger mt-1">Deskripsi skin karakter harus diisi</p>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="custom-file-container" data-upload-id="featuredImage"
+                                :class="{ 'has-error': $validate.form.featured_image.$error, 'has-success': isSubmitted && !$validate.form.featured_image.$error }">
+                                <div class="label-container">
+                                    <label for="featured_image">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="featured_image" 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 karakter harus diisi</p>
+                                </template>
+                                <div class="custom-file-container__image-preview"></div>
+                            </div>
+                            <div class="custom-file-container" data-upload-id="featuredIcon"
+                                :class="{ 'has-error': $validate.form.featured_icon.$error, 'has-success': isSubmitted && !$validate.form.featured_icon.$error }">
+                                <div class="label-container">
+                                    <label for="featured_icon">Ikon </label> <a href="javascript:;" class="custom-file-container__image-clear" title="Clear Image">×</a>
+                                </div>
+                                <label class="custom-file-container__custom-file" >
+                                    <input id="featured_icon" type="file" class="custom-file-container__custom-file__custom-file-input" 
+                                        accept="image/png" @change="handleIconChange" />
+                                    <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_icon.$error">
+                                    <p class="text-danger mt-1">Gambar ikon karakter harus diisi</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"><icon-save class="me-1" /> Simpan</button>
+                            <button type="reset" class="btn btn-dark !py-1 ml-1"><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 } 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 Skin Karakter' });
+
+    const form = ref({
+        name: '',
+        decription: '',
+        character: '',
+        featured_image: '',
+        featured_icon: '',
+    });
+    const isSubmitted = ref(false);
+    const rules = {
+        form: {
+            name: { required },
+            description: { required },
+            character: { required },
+            featured_image: { required },
+            featured_icon: { required },
+        }
+    };
+    const $validate = useVuelidate(rules, { form });
+    const router = useRouter();
+    const config = useRuntimeConfig();
+
+    const params = reactive({
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'id',
+        sort_direction: 'asc',
+    });
+    
+    const { data: characters } = await useAsyncData('characters', 
+        () => $fetch(`${config.public.apiBase}character/characters/`, {
+            params: {
+                page: params.current_page,
+                page_size: 50
+            }
+        }), {
+            watch: [params]
+        }
+    );
+    
+    onMounted(async () => {
+        const fileupload = await import('file-upload-with-preview');
+        let FileUploadWithPreview = fileupload.default;
+
+        // single image upload
+        new FileUploadWithPreview('featuredImage', {
+            images: {
+                baseImage: '/assets/images/file-preview.svg',
+                backgroundImage: '',
+            },
+        });
+
+        // single image upload
+        new FileUploadWithPreview('featuredIcon', {
+            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('name', form.value.name);
+        formData.append('character', form.value.character.id);
+        formData.append('description', form.value.description);
+
+        if (form.value.featured_image) {
+            formData.append('featured_image', form.value.featured_image);
+        }
+        if (form.value.featured_icon) {
+            formData.append('featured_icon', form.value.featured_icon);
+        }
+
+        await $fetch(`${config.public.apiBase}character/character-skins/`, {
+            method: 'POST',
+            body: formData
+        }).then(() => {
+            //redirect
+            router.push({ path: "/character/skins/list" });
+        })
+        .catch((error) => {
+
+            //assign response error data to state "errors"
+            console.log(error);
+        });
+    }
+
+    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.featured_image = file
+    }
+
+    function handleIconChange(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.featured_icon = file
+    }
+</script>
\ No newline at end of file
diff --git a/pages/character/skins/list.vue b/pages/character/skins/list.vue
new file mode 100644
index 0000000..323f195
--- /dev/null
+++ b/pages/character/skins/list.vue
@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Skin Karakter</a>
+            </li>
+            <li class="before:mr-2 before:content-['/'] rtl:before:ml-2">
+                <span>Daftar Skin Karakter</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 Skin Karakter</h5>
+                    <NuxtLink to="/character/skins/add" class="dark:text-white-light btn btn-primary !py-1">
+                        <icon-plus class="me-1" />
+                        Tambah
+                    </NuxtLink>
+                </div>
+                <div class="mb-5">
+                    <input v-model.lazy="params.search" type="text" class="form-input max-w-xs" placeholder="Cari..." @change="changeSearch"/>
+                </div>
+                <div class="mb-5">
+                    <div class="datatable">
+                        <vue3-datatable
+                            :rows="skins?.results"
+                            :columns="cols"
+                            :totalRows="skins?.count"
+                            :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 #id="data">
+                                <div class="flex 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';
+    useHead({ title: 'Daftar Skin Karakter' });
+
+    const router = useRouter();
+    const config = useRuntimeConfig();
+
+    const cols =
+        ref([
+            { field: 'name', title: 'Nama' },
+            { field: 'character.name', title: 'Karakter' },
+            { field: 'id', title: 'Aksi' },
+            
+        ]) || [];
+
+    const params = reactive({
+        search: null,
+        current_page: 1,
+        pagesize: 10,
+        sort_column: 'name',
+        sort_direction: 'asc',
+    });
+    
+    const { data: skins } = await useAsyncData('skins', 
+        () => { 
+            return $fetch(`${config.public.apiBase}/character/character-skins/`, {
+                params: {
+                    page: params.current_page,
+                    page_size: params.pagesize,
+                    ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
+                    search: params.search
+                }})
+        }, {
+            watch: [params]
+        }
+    );
+    
+    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) => {
+        console.log(data);
+        params.current_page = 1; 
+        console.log(params);
+    };
+
+    const viewData = (data: any) => {
+        router.push({ path: "/character/skins/" + data.id });
+    };
+
+    const deleteData = async (data: any) => {
+
+        //delete data with API
+        await $fetch(`${config.public.apiBase}character/character-skins/${data.id}/`, {
+            method: 'DELETE'
+        });
+
+        //refersh data posts
+        refreshNuxtData('skins');
+    }
+</script>
\ No newline at end of file