classify admin

2026-02-24 12:52:01 +05:00
commit e0f1989655
769 changed files with 1263008 additions and 0 deletions
--- a/public/assets/js/apexcharts.js
+++ b/public/assets/js/apexcharts.js
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
--- a/public/assets/js/bootstrap.js
+++ b/public/assets/js/bootstrap.js
--- a/public/assets/js/bootstrap.min.js
+++ b/public/assets/js/bootstrap.min.js
--- a/public/assets/js/bundle.min.js
+++ b/public/assets/js/bundle.min.js
--- a/public/assets/js/clipboard.min.js
+++ b/public/assets/js/clipboard.min.js
--- a/public/assets/js/custom/bootstrap-table/actionEvents.js
+++ b/public/assets/js/custom/bootstrap-table/actionEvents.js
@@ -0,0 +1,506 @@
+window.languageEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $('.filepond').filepond('removeFile');
+
+        $("#edit_name").val(row.name);
+        $("#edit_name_in_english").val(row.name_in_english);
+        $("#edit_code").val(row.code);
+        $("#edit_country_code").val(row.country_code);
+        $("#edit_rtl_switch").prop('checked', row.rtl);
+        $("#edit_rtl").val(row.rtl ? 1 : 0);
+        // ✅ Update download links dynamically
+        $("#download_panel_file").attr("href", "/language/" + row.id + "/download/panel");
+        $("#download_app_file").attr("href", "/language/" + row.id + "/download/app");
+        $("#download_web_file").attr("href", "/language/" + row.id + "/download/web");
+    },
+    'click .delete_btn': function (e, value, row) {
+        e.preventDefault();
+        showDeleteLanguagePopupModal($(this).attr('href'), {
+            successCallBack: function () {
+                $('#table_list').bootstrapTable('refresh');
+            }
+        });
+    }
+};
+
+
+// window.SeoSettingEvents = {
+//     'click .edit_btn': function (e, value, row) {
+//         $('.filepond').filepond('removeFile')
+//         $("#edit_page").val(row.page);
+//         $("#edit_title").val(row.title);
+//         $("#edit_description").val(row.description);
+//         $("#edit_keywords").val(row.keywords);
+//     }
+// };
+window.SeoSettingEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $("#edit_page").val(row.page);
+        $('.filepond').filepond('removeFile');
+
+        if (row.image) {
+            $('.filepond').filepond('addFile', row.image);
+        }
+        $("#edit_title_1").val(row.title ?? '');
+        $("#edit_description_1").val(row.description ?? '');
+        $("#edit_keywords_1").val(row.keywords ?? '');
+
+        let translations = row.translations ?? [];
+        translations.forEach(function (translation) {
+            const langId = translation.language_id;
+            $("#edit_title_" + langId).val(translation.title);
+            $("#edit_description_" + langId).val(translation.description);
+            $("#edit_keywords_" + langId).val(translation.keywords);
+        });
+    }
+};
+
+window.customFieldValueEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $("#new_custom_field_value").val(row.value);
+        $("#old_custom_field_value").val(row.value);
+    }
+}
+window.verificationFieldValueEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $("#new_verification_field_value").val(row.value);
+        $("#old_verification_field_value").val(row.value);
+    }
+}
+
+
+window.itemEvents = {
+    'click .editdata': function (e, value, row) {
+        let html = `<table class="table">
+            <tr>
+                <th width="10%">${trans("No.")}</th>
+                <th width="25%" class="text-center">${trans("Image")}</th>
+                <th width="25%">${trans("Name")}</th>
+                <th width="40%">${trans("Value")}</th>
+            </tr>`;
+        $.each(row.custom_fields, function (key, value) {
+            html += `<tr class="mb-2">
+                <td>${key + 1}</td>
+                <td class="text-center">
+                <a class="image-popup-no-margins" href="${value.image}" >
+                <img src=${value.image} height="30px" width="30px" style="border-radius:8px;" alt="" onerror="onErrorImage(event)">
+                </a>
+                </td>
+                <td>${value.name}</td>`;
+
+            if (value.type == "fileinput") {
+                if (value.value != undefined) {
+                    if (value.value?.value.match(/\.(jpg|jpeg|png|svg)$/i)) {
+                        html += `<td><img src="${value.value?.value}" alt="Custom Field Files" class="w-25" onerror="onErrorImage(event)"></td>`
+                    } else {
+                        html += `<td><a target="_blank" href="${value.value?.value}">View File</a></td>`
+                    }
+
+                } else {
+                    html += `<td></td>`
+                }
+            } else {
+                html += `<td class="text-break">${value.value?.value || ''}</td>`
+            }
+
+            html += `</tr>`;
+        });
+
+        html += "</table>";
+        $('#custom_fields').html(html)
+    },
+
+    'click .edit-status': function (e, value, row) {
+        $('#status').val(row.status).trigger('change');
+        $('#rejected_reason').val(row.rejected_reason);
+    }
+}
+
+window.packageEvents = {
+    'click .edit_btn': function (e, value, row) {
+        // Clear all translation fields first
+        $('[id^="edit_name_"]').val('');
+        $('[id^="edit_description_"]').val('');
+
+        // Set English (language ID 1) fields
+        $('#edit_name_1').val(row.name);
+        $('#edit_description_1').val(row.description);
+        
+        // Set non-translatable fields (in English tab)
+        $('#edit_price').val(row.price);
+        $('#edit_discount_in_percentage').val(row.discount_in_percentage);
+        $('#edit_final_price').val(row.final_price);
+        $('#edit_ios_product_id').val(row.ios_product_id);
+
+        // Populate translations for other languages
+        if (row.translations && Array.isArray(row.translations)) {
+            row.translations.forEach(function (trans) {
+                const langId = trans.language_id;
+                if (langId != 1) { // Skip English as it's already set above
+                    $('#edit_name_' + langId).val(trans.name || '');
+                    $('#edit_description_' + langId).val(trans.description || '');
+                }
+            });
+        }
+
+        // Handle duration
+        if (row.duration && row.duration.toString().toLowerCase() === "unlimited") {
+            $('#edit_duration_type_unlimited').prop('checked', true);
+            $('#edit_durationLimit').val('');
+            $('#edit_limitation_for_duration').hide();
+        } else {
+            $('#edit_duration_type_limited').prop('checked', true);
+            $('#edit_limitation_for_duration').show();
+            $('#edit_durationLimit').val(row.duration || '');
+        }
+
+        // Handle item limit
+        if (row.item_limit && row.item_limit.toString().toLowerCase() === "unlimited") {
+            $('#edit_item_limit_type_unlimited').prop('checked', true);
+            $('#edit_ForLimit').val('');
+            $('#edit_limitation_for_limit').hide();
+        } else {
+            $('#edit_item_limit_type_limited').prop('checked', true);
+            $('#edit_limitation_for_limit').show();
+            $('#edit_ForLimit').val(row.item_limit || '');
+        }
+    }
+};
+
+window.advertisementPackageEvents = {
+    'click .edit_btn': function (e, value, row) {
+        // Clear all translation fields first
+        $('[id^="edit_name_"]').val('');
+        $('[id^="edit_description_"]').val('');
+
+        // Set English (language ID 1) fields
+        $('#edit_name_1').val(row.name);
+        $('#edit_description_1').val(row.description);
+        
+        // Set non-translatable fields (in English tab)
+        $('#edit_price').val(row.price);
+        $('#edit_discount_in_percentage').val(row.discount_in_percentage);
+        $('#edit_final_price').val(row.final_price);
+        $('#edit_durationLimit').val(row.duration || '');
+        $('#edit_ForLimit').val(row.item_limit || '');
+        $('#edit_ios_product_id').val(row.ios_product_id);
+        row.translations.forEach(function (translation) {
+            const langId = translation.language_id;
+            $("#edit_name_" + langId).val(translation.name);
+            $("#edit_description_" + langId).val(translation.description);
+        });
+    }
+};
+
+window.reportReasonEvents = {
+    'click .edit_btn': function (e, value, row) {
+        let translations = row.translations ?? [];
+
+        // Reset all language inputs first (clear old values)
+        $("[id^=edit_reason_]").val("");
+
+        // Set English reason (default)
+        $("#edit_reason_1").val(row.reason);
+
+        // Fill translations if available
+        translations.forEach(function (translation) {
+            const langId = translation.language_id;
+            $("#edit_reason_" + langId).val(translation.reason);
+        });
+
+        // Set the form action URL if needed
+        // $(".edit-form").attr("action", `/report-reasons/${row.id}`);
+    }
+}
+
+window.featuredSectionEvents = {
+    'click .edit_btn': function (e, value, row) {
+        // Clear all translation fields first
+        $('[id^="edit_title_"]').val('');
+        $('[id^="edit_description_"]').val('');
+
+        // Set English (language ID 1) fields
+        $('#edit_title_1').val(row.title);
+        $('#edit_description_1').val(row.description);
+        
+        // Set non-translatable fields (in English tab)
+        $('#edit_slug').val(row.slug);
+        $('#edit_filter').val(row.filter).trigger('change');
+        
+        // Populate translations for other languages
+        if (row.translations && Array.isArray(row.translations)) {
+            row.translations.forEach(function (trans) {
+                const langId = trans.language_id;
+                if (langId != 1) { // Skip English as it's already set above
+                    $('#edit_title_' + langId).val(trans.name || '');
+                    $('#edit_description_' + langId).val(trans.description || '');
+                }
+            });
+        }
+        
+        // Handle filter-specific fields
+        if (row.filter === "price_criteria") {
+            $('#edit_price_criteria').show();
+            $('#edit_min_price').val(row.min_price || '');
+            $('#edit_max_price').val(row.max_price || '');
+        } else {
+            $('#edit_price_criteria').hide();
+            $('#edit_min_price').val('');
+            $('#edit_max_price').val('');
+        }
+        
+        if (row.filter == "category_criteria") {
+            $('#edit_category_criteria').show();
+            if (row.value && row.value != '') {
+                $('#edit_category_id').val(row.value.split(',')).trigger('change');
+            } else {
+                $('#edit_category_id').val('').trigger('change');
+            }
+        } else {
+            $('#edit_category_criteria').hide();
+            $('#edit_category_id').val('').trigger('change');
+        }
+
+        // Set style
+        $('input[name="style"]').prop('checked', false);
+        $('input[name="style"][value="' + row.style + '"]').prop('checked', true);
+    }
+};
+
+window.staffEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $('#edit_role').val(row.roles[0].id);
+        $('#edit_name').val(row.name);
+        $('#edit_email').val(row.email);
+    }
+}
+window.verificationfeildEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $('#edit_name').val(row.name);
+        $('#edit_is_required').val(row.is_required)
+    }
+}
+
+window.userEvents = {
+    'click .assign_package': function (e, value, row) {
+        $("#user_id").val(row.id);
+        $('.package_type').prop('checked', false);
+
+        // $('#item-listing-package-div').hide();
+        // $('#advertisement-package-div').hide();
+
+        $('#advertisement-package').attr('required', false);
+        $('#item-listing-package').attr('required', false);
+
+        $('#package_details').hide();
+        $('.payment').hide();
+        $('.cheque').hide();
+    },
+    'click .manage_packages': function (e, value, row) {
+        // This is handled in the customer/index.blade.php file
+        // The button already has data-user-id attribute
+    }
+}
+
+// window.faqEvents = {
+//     'click .edit_btn': function (e, value, row) {
+//         $('#edit_question').val(row.question);
+//         $('#edit_answer').val(row.answer);
+//     }
+// }
+
+window.faqEvents = {
+    'click .edit_btn': function (e, value, row) {
+        let updateUrl = "{{ url('admin/faq') }}/" + row.id;
+        $('.edit-form').attr('action', updateUrl);
+        $("[id^=edit_question_]").val("");
+        $("[id^=edit_answer_]").val("");
+        $('#edit_faq_id').val(row.id);
+        $("#edit_question_1").val(row.question);
+        $("#edit_answer_1").val(row.answer);
+        let translations = row.translations ?? [];
+        translations.forEach(function (translation) {
+            const langId = translation.language_id;
+            $("#edit_question_" + langId).val(translation.question);
+            $("#edit_answer_" + langId).val(translation.answer);
+        });
+    }
+};
+
+window.areaEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $('#edit_name').val(row.name);
+        $('#edit_country').val(row.country_id);
+        $('#edit_state').val(row.state_id);
+        $('#edit_city').val(row.city_id);
+        $('#edit_latitude').val(row.latitude);
+        $('#edit_longitude').val(row.longitude);
+
+        // Initialize map after modal is shown
+        $('#editModal').on('shown.bs.modal', function () {
+            // Get coordinates from the row data
+            const lat = parseFloat(row.latitude) || 0;
+            const lng = parseFloat(row.longitude) || 0;
+
+            // Initialize map with current coordinates
+            const editMap = window.mapUtils.initializeMap('edit_map', lat, lng);
+
+            // Create a marker at the current position
+            let currentMarker = L.marker([lat, lng], {
+                draggable: true
+            }).addTo(editMap);
+
+            // Update coordinates when marker is dragged
+            currentMarker.on('dragend', function(event) {
+                const position = event.target.getLatLng();
+                $('#edit_latitude').val(position.lat);
+                $('#edit_longitude').val(position.lng);
+            });
+
+            // Update marker position and coordinates when map is clicked
+            editMap.on('click', function(e) {
+                const position = e.latlng;
+                currentMarker.setLatLng(position);
+                $('#edit_latitude').val(position.lat);
+                $('#edit_longitude').val(position.lng);
+            });
+        });
+
+        // Clean up when modal is hidden
+        $('#editModal').on('hidden.bs.modal', function () {
+            window.mapUtils.removeMap('edit_map');
+            $(this).off('shown.bs.modal');
+            $(this).off('hidden.bs.modal');
+        });
+    }
+}
+window.cityEvents = {
+    'click .edit_btn': function (e, value, row) {
+        $('#edit_country').val(row.country_id);
+        $('#edit_state').val(row.state_id);
+        $('#edit_name').val(row.name);
+        $('#edit_latitude').val(row.latitude);
+        $('#edit_longitude').val(row.longitude);
+
+        // Initialize map after modal is shown
+        $('#editModal').on('shown.bs.modal', function () {
+            // Get coordinates from the row data
+            const lat = parseFloat(row.latitude) || 0;
+            const lng = parseFloat(row.longitude) || 0;
+
+            // Initialize map with current coordinates
+            const editMap = window.mapUtils.initializeMap('edit_map', lat, lng);
+
+            // Create a marker at the current position
+            let currentMarker = L.marker([lat, lng], {
+                draggable: true
+            }).addTo(editMap);
+
+            // Update coordinates when marker is dragged
+            currentMarker.on('dragend', function(event) {
+                const position = event.target.getLatLng();
+                $('#edit_latitude').val(position.lat);
+                $('#edit_longitude').val(position.lng);
+            });
+
+            // Update marker position and coordinates when map is clicked
+            editMap.on('click', function(e) {
+                const position = e.latlng;
+                currentMarker.setLatLng(position);
+                $('#edit_latitude').val(position.lat);
+                $('#edit_longitude').val(position.lng);
+            });
+        });
+
+        // Clean up when modal is hidden
+        $('#editModal').on('hidden.bs.modal', function () {
+            window.mapUtils.removeMap('edit_map');
+            $('#edit_map').html('');
+            $(this).off('shown.bs.modal');
+            $(this).off('hidden.bs.modal');
+        });
+    }
+}
+window.verificationEvents = {
+    'click .view-verification-fields': function (e, value, row) {
+        let tabs = '<ul class="nav nav-tabs" role="tablist">';
+        let content = '<div class="tab-content mt-3">';
+
+        $.each(row.languages, function (index, lang) {
+            let activeClass = index === 0 ? 'active' : '';
+            let showClass   = index === 0 ? 'show active' : '';
+
+            // Tab header
+            tabs += `
+                <li class="nav-item">
+                    <button class="nav-link ${activeClass}" data-bs-toggle="tab" data-bs-target="#lang-${lang.id}">
+                        ${lang.name}
+                    </button>
+                </li>
+            `;
+
+            // Tab body
+            content += `<div class="tab-pane fade ${showClass}" id="lang-${lang.id}">`;
+            content += `<table class="table">
+                <tr>
+                    <th width="10%">${trans("No.")}</th>
+                    <th width="25%">${trans("Name")}</th>
+                    <th width="65%">${trans("Value")}</th>
+                </tr>`;
+
+            let count = 1;
+            console.log(row.verification_field_values);
+            $.each(row.verification_field_values, function (key, field) {
+                // ✅ Filter based on language for this tab
+                let showField = false;
+                if (lang.id === 1 && (field.language_id === null || field.language_id === 1)) {
+                    showField = true;
+                } else if (field.language_id === lang.id) {
+                    showField = true;
+                }
+
+                if (showField) {
+                    let fieldName = field.verification_field.name;
+                    let fieldValue = field.value;
+
+                    let displayValue = '';
+                    if (fieldValue) {
+                        if (typeof fieldValue === 'string' && fieldValue.includes('verification_field_files')) {
+                            displayValue = `<a class='text-decoration-underline' href='${fieldValue}' target='_blank'>${trans('Click Here')}</a>`;
+                        } else {
+                            displayValue = Array.isArray(fieldValue) ? fieldValue.join(', ') : fieldValue;
+                        }
+                    } else {
+                        displayValue = trans('No value provided');
+                    }
+
+                    content += `<tr>
+                        <td>${count}</td>
+                        <td>${fieldName}</td>
+                        <td class="text-break">${displayValue}</td>
+                    </tr>`;
+                    count++;
+                }
+            });
+
+            content += `</table></div>`;
+        });
+
+        tabs += '</ul>';
+        content += '</div>';
+
+        $('#verification_fields').html(tabs + content);
+        $('#editModal').modal('show');
+    },
+
+    'click .edit_btn': function (e, value, row) {
+        $('#status').val(row.status).trigger('change');
+        $('#rejection_reason').val(row.rejection_reason);
+    }
+};
+window.reviewReportEvents = {
+    'click .edit-status': function (e, value, row) {
+        $('#report_status').val(row.report_status).trigger('change');
+        $('#report_rejected_reason').val(row.report_rejected_reason);
+    }
+}
--- a/public/assets/js/custom/bootstrap-table/formatter.js
+++ b/public/assets/js/custom/bootstrap-table/formatter.js
@@ -0,0 +1,377 @@
+function imageFormatter(value) {
+    if (value) {
+        return '<a class="image-popup-no-margins one-image" href="' + value + '">' +
+            '<img class="rounded avatar-md shadow img-fluid " alt="" src="' + value + '" style="height: 55px !important;" width="55" onerror="onErrorImage(event)">' +
+            '</a>'
+    } else {
+        return '-'
+    }
+}
+
+function galleryImageFormatter(value) {
+    if (value) {
+        let html = '<div class="gallery">';
+        $.each(value, function (index, data) {
+            html += '<a href="' + data.image + '"><img class="rounded avatar-md shadow img-fluid m-1" alt="" src="' + data.image + '" width="55" onerror="onErrorImage(event)"></a>';
+        })
+        html += "</div>"
+        return html;
+    } else {
+        return '-'
+    }
+}
+
+function subCategoryFormatter(value, row) {
+     const subcategoriesLabel = window?.languageLabels["Subcategories"] || "Subcategories";
+    let url = `/category/${row.id}/subcategories`;
+    return '<span> <div class="category_count">' + value + ' '+ subcategoriesLabel + '</div></span>';
+}
+
+function customFieldFormatter(value, row) {
+      const customFieldsLabel =window?.languageLabels["Custom Fields"] || "Custom Fields";
+    let url = `/category/${row.id}/custom-fields`;
+   return '<a href="' + url + '"><div class="category_count">' + value + ' ' + customFieldsLabel + '</div></a>';
+
+}
+
+function statusSwitchFormatter(value, row) {
+    return `<div class="form-check form-switch">
+        <input class = "form-check-input switch1 update-status" id="${row.id}" type = "checkbox" role = "switch${status}" ${value ? 'checked' : ''}>
+    </div>`
+}
+function autoApproveItemSwitchFormatter(value, row) {
+    return `<div class="form-check form-switch">
+        <input class="form-check-input switch1 update-auto-approve-status" id="${row.id}" type="checkbox" role="switch" ${value ? 'checked' : ''}>
+    </div>`;
+}
+
+function itemStatusSwitchFormatter(value, row) {
+    return `<div class="form-check form-switch">
+        <input class = "form-check-input switch1 update-item-status" id="${row.item_id}" type = "checkbox" role = "switch${status}" ${value ? 'checked' : ''}>
+    </div>`
+}
+
+function userStatusSwitchFormatter(value, row) {
+    return `<div class="form-check form-switch">
+        <input class = "form-check-input switch1 update-user-status" id="${row.item.user_id}" type = "checkbox" role = "switch${status}" ${value ? 'checked' : ''}>
+    </div>`
+}
+
+function trans(label) {
+    // return window.languageLabels.hasOwnProperty(label) ? window.languageLabels[label] : label;
+    return window?.languageLabels[label] || label;
+}
+
+function itemStatusFormatter(value) {
+    const statusMap = {
+        "review": { badge: "primary", text: window?.languageLabels?.["Under Review"] || "Under Review" },
+        "approved": { badge: "success", text: window?.languageLabels?.["Approved"] || "Approved" },
+        "permanent rejected": { badge: "danger", text: window?.languageLabels?.["Permanent Rejected"] || "Permanent Rejected" },
+        "sold out": { badge: "warning", text: window?.languageLabels?.["Sold Out"] || "Sold Out" },
+        "featured": { badge: "black", text: window?.languageLabels?.["Featured"] || "Featured" },
+        "inactive": { badge: "danger", text: window?.languageLabels?.["Inactive"] || "Inactive" },
+        "expired": { badge: "danger", text: window?.languageLabels?.["Expired"] || "Expired" },
+        "soft rejected": { badge: "black", text: window?.languageLabels?.["Soft Rejected"] || "Soft Rejected" },
+        "resubmitted": { badge: "primary", text: window?.languageLabels?.["Resubmitted"] || "Resubmitted" },
+    };
+
+    const status = statusMap[value] || { badge: "secondary", text: value || "Unknown" };
+    return `<span class="badge rounded-pill bg-${status.badge}">${status.text}</span>`;
+}
+function featuredItemStatusFormatter(value) {
+    let badgeClass, badgeText;
+    if (value == "Not-Featured") {
+        badgeClass = 'primary';
+        badgeText = window?.languageLabels["Not-featured"] || "Not-featured";
+    } else if (value == "Featured") {
+        badgeClass = 'success';
+        badgeText = window?.languageLabels["Featured"] || "Featured";
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass + '">' + badgeText + '</span>';
+}
+function status_badge(value, row) {
+    let badgeClass, badgeText;
+    if (value == '0') {
+        badgeClass = 'danger';
+        badgeText = 'OFF';
+    } else {
+        badgeClass = 'success';
+        badgeText = 'ON';
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass + '">' + badgeText + '</span>';
+}
+
+function userStatusBadgeFormatter(value, row) {
+    let badgeClass, badgeText;
+    if (value == '0') {
+        badgeClass = 'danger';
+        badgeText = 'Inactive';
+    } else {
+        badgeClass = 'success';
+        badgeText = 'Active';
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass +'">' + badgeText + '</span>';
+}
+function styleImageFormatter(value, row) {
+    return '<a class="image-popup-no-margins" href="images/app_styles/' + value + '.png"><img src="images/app_styles/' + value + '.png" alt="style_4"  height="60" width="60" class="rounded avatar-md shadow img-fluid"></a>';
+}
+
+function filterTextFormatter(value) {
+    let filter;
+    if (value == "most_liked") {
+        filter = "Most Liked";
+    } else if (value == "price_criteria") {
+        filter = "Price Criteria";
+    } else if (value == "category_criteria") {
+        filter = "Category Criteria";
+    } else if (value == "most_viewed") {
+        filter = "Most Viewed";
+    }
+    return filter;
+}
+
+function adminFile(value, row) {
+    return "<a href='languages/" + row.code + ".json ' )+' > View File < /a>";
+}
+
+function appFile(value, row) {
+    return "<a href='lang/" + row.code + ".json ' )+' > View File < /a>";
+}
+
+function textReadableFormatter(value, row) {
+    let string = value.replace("_", " ");
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function userPackageStatusBadgeFormatter(value) {
+    let badgeClass, badgeText;
+    if (value == 'Expired') {
+        badgeClass = 'danger';
+        badgeText = 'Expired';
+    } else {
+        badgeClass = 'success';
+        badgeText = 'Active';
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass +'">' + badgeText + '</span>';
+}
+
+function unlimitedBadgeFormatter(value) {
+    if (!value) {
+        return 'Unlimited';
+    }
+    return value;
+}
+
+function detailFormatter(index, row) {
+    let html = []
+
+    if (row.translations && row.translations.length > 0) {
+        $.each(row.translations, function (key, value) {
+            html.push('<p><b>' + value.language.name + ':</b> ' + value.description + '</p>')
+        })
+    } else {
+        const noTranslations = window?.languageLabels?.["No translations available"] || "No translations available";
+        html.push('<p class="text-muted"><i>' + noTranslations + '</i></p>')
+    }
+
+    return html.join('')
+}
+
+
+function truncateDescription(value, row, index) {
+    if (!value) {
+        return '<span class="no-description">No Description Available</span>';
+    }
+
+    // Create a temporary DOM element to handle HTML safely
+    let tempDiv = document.createElement("div");
+    tempDiv.innerHTML = value;
+
+    let textContent = tempDiv.textContent || tempDiv.innerText || "";
+    if (textContent.length > 100) {
+        let shortText = textContent.substring(0, 50);
+
+        return `
+            <div class="short-description">
+                ${shortText}...
+                <a href="#" class="view-more" data-index="${index}">${window?.languageLabels?.["View More"] || "View More"}</a>
+            </div>
+            <div class="full-description" style="display:none;">
+                ${value}
+                <a href="#" class="view-more" data-index="${index}">${window?.languageLabels?.["View Less"] || "View Less"}</a>
+            </div>
+        `;
+    } else {
+        return value;
+    }
+}
+function videoLinkFormatter(value, row, index) {
+    if (!value) {
+        return '';
+    }
+    const maxLength = 20;
+    const displayText = value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
+    return `<a href="${value}" target="_blank">${displayText}</a>`;
+}
+
+function dateFormatter(value, row, index) {
+    if (!value) {
+        return '<span class="text-muted">-</span>';
+    }
+    
+    try {
+        const date = new Date(value);
+        if (isNaN(date.getTime())) {
+            return '<span class="text-muted">-</span>';
+        }
+        
+        // Format: MM/DD/YYYY HH:MM AM/PM (US format)
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const year = date.getFullYear();
+        let hours = date.getHours();
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        const formattedHours = String(hours).padStart(2, '0');
+        
+        return `${month}/${day}/${year} ${formattedHours}:${minutes} ${ampm}`;
+    } catch (error) {
+        console.error('Date formatting error:', error);
+        return '<span class="text-muted">-</span>';
+    }
+}
+
+function sellerverificationStatusFormatter(value) {
+    let badgeClass, badgeText;
+    if (value == "review") {
+        badgeClass = 'primary';
+        badgeText = window?.languageLabels?.["Under Review"] || "Under Review";
+    } else if (value == "approved") {
+        badgeClass = 'success';
+        badgeText = window?.languageLabels?.["Approved"] || "Approved";
+    } else if (value == "rejected") {
+        badgeClass = 'danger';
+        badgeText = window?.languageLabels?.["Rejected"] || "Rejected";
+    } else if (value == "pending") {
+        badgeClass = 'warning';
+        badgeText = window?.languageLabels?.["Pending"] || "Pending";
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass + '">' + badgeText + '</span>';
+}
+function categoryNameFormatter(value, row) {
+    let buttonHtml = '';
+    let count = parseInt(row.subcategories_count);
+    if (count > 0) {
+        buttonHtml = `<button class="btn icon btn-xs btn-icon rounded-pill toggle-subcategories float-left btn-outline-primary text-center"
+                            style="padding:.20rem; font-size:.875rem;cursor: pointer; margin-right: 5px;" data-id="${row.id}">
+                        <i class="fa fa-plus"></i>
+                      </button>`;
+    } else {
+        buttonHtml = `<span style="display:inline-block; width:30px;"></span>`;
+    }
+    return `${buttonHtml}${value}`;
+
+}
+
+function subCategoryNameFormatter(value, row, level) {
+    let dataLevel = 0;
+    let indent = level * 35;
+    let buttonHtml = '';
+   let count = parseInt(row.subcategories_count);
+    if (count > 0) {
+        buttonHtml = `<button class="btn icon btn-xs btn-icon rounded-pill toggle-subcategories float-left btn-outline-primary text-center"
+                            style="padding:.20rem; cursor: pointer; margin-right: 5px;" data-id="${row.id}" data-level="${dataLevel}">
+                        <i class="fa fa-plus"></i>
+                      </button>`;
+    } else {
+        buttonHtml = `<span style="display:inline-block; width:30px;"></span>`;
+    }
+    dataLevel += 1;
+    return `<div style="padding-left:${indent}px;" class="justify-content-center">${buttonHtml}<span>${value}</span></div>`;
+
+}
+function descriptionFormatter(value, row, index) {
+    if (value.length >= 50) {
+        return '<div class="short-description">' + value.substring(0, 50) +
+            '... <a href="#" class="view-more" data-index="' + index + '">' + (window?.languageLabels["View More"]) + '</a></div>' +
+            '<div class="full-description" style="display:none;">' + value +
+            ' <a href="#" class="view-more" data-index="' + index + '">' + (window?.languageLabels["View Less"]) + '</a></div>';
+    } else {
+        return value;
+    }
+}
+function rejectedReasonFormatter(value, row, index) {
+    if (value !== null && value !== undefined && value !== '') {
+    if (value.length > 20) {
+        return '<div class="short-description">' + value.substring(0, 100) +
+            '... <a href="#" class="view-more" data-index="' + index + '">' + (window?.languageLabels["View More"]) + '</a></div>' +
+            '<div class="full-description" style="display:none;">' + value +
+            ' <a href="#" class="view-more" data-index="' + index + '">' + (window?.languageLabels["View Less"]) + '</a></div>';
+    } else {
+        return value;
+    }
+    }
+    return '<span class="no-description">-</span>';
+}
+
+
+
+function ratingFormatter(value, row, index) {
+    const maxRating = 5;
+    let stars = '';
+    for (let i = 1; i <= maxRating; i++) {
+        if (i <= Math.floor(value)) {
+            stars += '<i class="fa fa-star text-warning"></i>';
+        } else if (i === Math.ceil(value) && value % 1 !== 0) {
+            stars += '<i class="fa fa-star-half text-warning" aria-hidden></i>';
+        } else {
+            stars += '<i class="fa fa-star text-secondary"></i>';
+        }
+    }
+    return stars;
+}
+
+function reportStatusFormatter(value) {
+    let badgeClass, badgeText;
+    if (value == "reported") {
+        badgeClass = 'primary';
+        badgeText = window?.languageLabels?.["Reported"] || "Reported";
+    } else if (value == "approved") {
+        badgeClass = 'success';
+        badgeText = window?.languageLabels?.["Approved"] || "Approved";
+    } else if (value == "rejected") {
+        badgeClass = 'danger';
+        badgeText = window?.languageLabels?.["Rejected"] || "Rejected";
+    }
+    return '<span class="badge rounded-pill bg-' + badgeClass + '">' + badgeText + '</span>';
+}
+
+
+function typeFormatter(value, row) {
+    if (value === 'App\\Models\\Category') {
+        return 'Category';
+    } else if (value === 'App\\Models\\Item') {
+        return 'Advertisement';
+    } else {
+        return '-';
+    }
+}
+function packageTypeFormatter(value, row, index) {
+        if (value === 'item_listing') {
+            return '<span class="badge bg-primary">' + (window?.languageLabels["Item Listing (Ads)"]) + '</span>';
+        } else if (value === 'advertisement') {
+            return '<span class="badge bg-success">' + (window?.languageLabels["Advertisement (Featured Ads)"]) + '</span>';
+        }
+        return value;
+ }
+function categoryNamesFormatter(value, row, index) {
+    if (row.is_global == 1) {
+        return '<span class="badge bg-info">' + (window?.languageLabels["Global"]) + '</span>';
+    }
+    if (value === 'Category Based') {
+        return '<span class="badge bg-warning">' + (window?.languageLabels["Category Based"]) + '</span>';
+    }
+    return '<span class="badge bg-warning">' + (window?.languageLabels["Category Based"]) + '</span>';
+}
--- a/public/assets/js/custom/bootstrap-table/queryParams.js
+++ b/public/assets/js/custom/bootstrap-table/queryParams.js
@@ -0,0 +1,24 @@
+function queryParams(p) {
+    return p;
+}
+
+function reportReasonQueryParams(p) {
+    return {
+        ...p,
+        "status": $('#filter_status').val(),
+    };
+}
+
+function userListQueryParams(p) {
+    return {
+        ...p,
+        "status": $('#filter_status').val(),
+    };
+}
+
+function notificationUserList(p) {
+    return {
+        ...p,
+        notification_list: 1
+    };
+}
--- a/public/assets/js/custom/common.js
+++ b/public/assets/js/custom/common.js
@@ -0,0 +1,228 @@
+/*
+* Common JS is used to write code which is generally used for all the UI components
+* Specific component related code won't be written here
+*/
+
+"use strict";
+$(document).ready(function () {
+    $('#table_list').on('all.bs.table', function () {
+        $('#toolbar').parent().addClass('col-12  col-md-7 col-lg-7 p-0');
+    })
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    })
+
+    if ($('.permission-tree').length > 0) {
+        $(function () {
+            $('.permission-tree').on('changed.jstree', function (e, data) {
+                // let i, j = [];
+                let html = "";
+                for (let i = 0, j = data.selected.length; i < j; i++) {
+                    let permissionName = data.instance.get_node(data.selected[i]).data.name;
+                    if (permissionName) {
+                        html += "<input type='hidden' name='permission[]' value='" + permissionName + "'/>"
+                    }
+                }
+                $('#permission-list').html(html);
+            }).jstree({
+                "plugins": ["checkbox"],
+            });
+        });
+    }
+})
+//Setup CSRF Token default in AJAX Request
+$.ajaxSetup({
+    headers: {
+        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+    }
+});
+
+$('#create-form,.create-form,.create-form-without-reset').on('submit', function (e) {
+    e.preventDefault();
+    let formElement = $(this);
+    let submitButtonElement = $(this).find(':submit');
+    let url = $(this).attr('action');
+
+    let data = new FormData(this);
+    let preSubmitFunction = $(this).data('pre-submit-function');
+    if (preSubmitFunction) {
+        //If custom function name is set in the Form tag then call that function using eval
+        if (eval(preSubmitFunction + "()") == false) {
+            return false;
+        }
+    }
+    let customSuccessFunction = $(this).data('success-function');
+
+    // noinspection JSUnusedLocalSymbols
+
+    function successCallback(response) {
+        if (!$(formElement).hasClass('create-form-without-reset')) {
+            formElement[0].reset();
+            $(".select2").val("").trigger('change');
+            $('.filepond').filepond('removeFile')
+        }
+        $('#table_list').bootstrapTable('refresh');
+        if (customSuccessFunction) {
+            //If custom function name is set in the Form tag then call that function using eval
+            eval(customSuccessFunction + "(response)");
+        }
+    }
+
+    formAjaxRequest('POST', url, data, formElement, submitButtonElement, successCallback);
+})
+
+$('#edit-form,.edit-form').on('submit', function (e) {
+    e.preventDefault();
+    let formElement = $(this);
+    let submitButtonElement = $(this).find(':submit');
+    let data = new FormData(this);
+    $(formElement).parents('modal').modal('hide');
+    // let url = $(this).attr('action') + "/" + data.get('edit_id');
+    let url = $(this).attr('action');
+    let preSubmitFunction = $(this).data('pre-submit-function');
+    if (preSubmitFunction) {
+        //If custom function name is set in the Form tag then call that function using eval
+        eval(preSubmitFunction + "()");
+    }
+    let customSuccessFunction = $(this).data('success-function');
+
+    // noinspection JSUnusedLocalSymbols
+    function successCallback(response) {
+        $('#table_list').bootstrapTable('refresh');
+        setTimeout(function () {
+            $('#editModal').modal('hide');
+            $(formElement).parents('.modal').modal('hide');
+        }, 1000)
+        if (customSuccessFunction) {
+            //If custom function name is set in the Form tag then call that function using eval
+            eval(customSuccessFunction + "(response)");
+        }
+    }
+
+    formAjaxRequest('PUT', url, data, formElement, submitButtonElement, successCallback);
+})
+
+$(document).on('click', '.delete-form', function (e) {
+    e.preventDefault();
+    // console.log($(this).attr('href'));                                  
+    showDeletePopupModal($(this).attr('href'), {
+        successCallBack: function () {
+            $('#table_list').bootstrapTable('refresh');
+        }, errorCallBack: function (response) {
+            showErrorToast(response.message);
+        }
+    })
+})
+
+$(document).on('click', '.restore-data', function (e) {
+    e.preventDefault();
+    showRestorePopupModal($(this).attr('href'), {
+        successCallBack: function () {
+            $('#table_list').bootstrapTable('refresh');
+        }
+    })
+})
+
+$(document).on('click', '.trash-data', function (e) {
+    e.preventDefault();
+    showPermanentlyDeletePopupModal($(this).attr('href'), {
+        successCallBack: function () {
+            $('#table_list').bootstrapTable('refresh');
+        }
+    })
+})
+
+$(document).on('click', '.set-form-url', function (e) {
+    //This event will be called when user clicks on the edit button of the bootstrap table
+    e.preventDefault();
+    $('#edit-form,.edit-form').attr('action', $(this).attr('href'));
+})
+
+$(document).on('click', '.delete-form-reload', function (e) {
+    e.preventDefault();
+    showDeletePopupModal($(this).attr('href'), {
+        successCallBack: function () {
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        }
+    })
+})
+
+// Change event for Status toggle change in Bootstrap-table
+$(document).on('change', '.update-status', function () {
+    let tableElement = $(this).parents('table');
+    let url = $(tableElement).data('custom-status-change-url') || window.baseurl + "common/change-status";
+    ajaxRequest('PUT', url, {
+        id: $(this).attr('id'),
+        table: $(tableElement).data('table'),
+        column: $(tableElement).data('status-column') || "",
+        status: $(this).is(':checked') ? 1 : 0
+    }, null, function (response) {
+        showSuccessToast(response.message);
+    }, function (error) {
+        showErrorToast(error.message);
+    })
+})
+
+
+//Fire Ajax request when the Bootstrap-table rows are rearranged
+$('#table_list').on('reorder-row.bs.table', function (element, rows) {
+    let url = $(element.currentTarget).data('custom-reorder-row-url') || window.baseurl + "common/change-row-order";
+    ajaxRequest('PUT', url, {
+        table: $(element.currentTarget).data('table'),
+        column: $(element.currentTarget).data('reorder-column') || "",
+        data: rows
+    }, null, function (success) {
+        $('#table_list').bootstrapTable('refresh');
+        showSuccessToast(success.message);
+    }, function (error) {
+        showErrorToast(error.message);
+    })
+})
+
+
+$('.img_input').click(function () {
+    $('#edit_cs_image').click();
+});
+$('.preview-image-file').on('change', function () {
+    const [file] = this.files
+    if (file) {
+        $('.preview-image').attr('src', URL.createObjectURL(file));
+    }
+})
+
+
+$('.form-redirection').on('submit', function (e) {
+    let parsley = $(this).parsley({
+        excluded: 'input[type=button], input[type=submit], input[type=reset], :hidden'
+    });
+    parsley.validate();
+    if (parsley.isValid()) {
+        $(this).find(':submit').attr('disabled', true);
+    }
+})
+
+$('#editlanguage-form,.editlanguage-form').on('submit', function (e) {
+    e.preventDefault();
+    let formElement = $(this);
+    let submitButtonElement = $(this).find(':submit');
+    let data = new FormData(this);
+    $(formElement).parents('modal').modal('hide');
+    // let url = $(this).attr('action') + "/" + data.get('edit_id');
+    let url = $(this).attr('action');
+    let preSubmitFunction = $(this).data('pre-submit-function');
+    if (preSubmitFunction) {
+        //If custom function name is set in the Form tag then call that function using eval
+        eval(preSubmitFunction + "()");
+    }
+    let customSuccessFunction = $(this).data('success-function');
+
+    // noinspection JSUnusedLocalSymbols
+    function successCallback(response) {
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
+    }
+    formAjaxRequest('PUT', url, data, formElement, submitButtonElement, successCallback);
+})
--- a/public/assets/js/custom/custom.js
+++ b/public/assets/js/custom/custom.js
--- a/public/assets/js/custom/function.js
+++ b/public/assets/js/custom/function.js
@@ -0,0 +1,443 @@
+"use strict";
+
+function trans(label) {
+    // return window.languageLabels.hasOwnProperty(label) ? window.languageLabels[label] : label;
+    return window?.languageLabels[label] || label;
+}
+
+function showErrorToast(message) {
+    Toastify({
+        text: trans(message),
+        duration: 6000,
+        close: !0,
+        style: {
+            background: '#dc3545'
+        }
+    }).showToast();
+}
+
+function showSuccessToast(message) {
+    Toastify({
+        text: message,
+        duration: 6000,
+        close: !0,
+        style: {
+            background: "linear-gradient(to right, #00b09b, #96c93d)"
+        }
+    }).showToast();
+}
+
+function showWarningToast(message) {
+    Toastify({
+        text: message,
+        duration: 6000,
+        close: !0,
+        style: {
+            background: "linear-gradient(to right, #a7b000, #b08d00)"
+        }
+    }).showToast();
+}
+
+/**
+ *
+ * @param type
+ * @param url
+ * @param data
+ * @param {function} beforeSendCallback
+ * @param {function} successCallback - This function will be executed if no Error will occur
+ * @param {function} errorCallback - This function will be executed if some error will occur
+ * @param {function} finalCallback - This function will be executed after all the functions are executed
+ * @param processData
+ */
+function ajaxRequest(type, url, data, beforeSendCallback = null, successCallback = null, errorCallback = null, finalCallback = null, processData = false) {
+    // Modifying the data attribute here according to the type method
+    if (!["get", "post"].includes(type.toLowerCase())) {
+        if (data instanceof FormData) {
+            data.append("_method", type);
+        } else {
+            data = {...data, "_method": type};
+            data = JSON.stringify(data);
+        }
+        type = "POST";
+    }
+    $.ajax({
+        type: type,
+        url: url,
+        data: data,
+        cache: false,
+        processData: processData,
+        contentType: data instanceof FormData ? false : "application/json",
+        dataType: 'json',
+        beforeSend: function () {
+            if (beforeSendCallback != null) {
+                beforeSendCallback();
+            }
+        },
+        success: function (data) {
+            try {
+                if (!data.error) {
+                    if (successCallback != null) {
+                        successCallback(data);
+                    }
+                } else {
+                    if (errorCallback != null) {
+                        errorCallback(data);
+                    }
+                }
+            } finally {
+                if (finalCallback != null) {
+                    finalCallback(data);
+                }
+            }
+        }, error: function (jqXHR) {
+            if (jqXHR.responseJSON) {
+                showErrorToast(jqXHR.responseJSON.message);
+            }
+            if (finalCallback != null) {
+                finalCallback();
+            }
+        }
+    })
+}
+
+function formAjaxRequest(type, url, data, formElement, submitButtonElement, successCallback = null, errorCallback = null) {
+    // To Remove Red Border from the Validation tag.
+    // formElement.find('.has-danger').removeClass("has-danger");
+    // formElement.validate();
+
+    let parsley = formElement.parsley({
+        excluded: 'input[type=button], input[type=submit], input[type=reset], :hidden'
+    });
+    parsley.validate();
+    if (parsley.isValid()) {
+        let submitButtonText = submitButtonElement.val();
+
+        function beforeSendCallback() {
+            submitButtonElement.val('Please Wait...').attr('disabled', true);
+        }
+
+        function mainSuccessCallback(response) {
+            if (response.warning) {
+                showWarningToast(response.message);
+            } else {
+                showSuccessToast(response.message);
+            }
+
+            if (successCallback != null) {
+                successCallback(response);
+            }
+        }
+
+        function mainErrorCallback(response) {
+            showErrorToast(response.message);
+            if (errorCallback != null) {
+                errorCallback(response);
+            }
+        }
+
+        function finalCallback() {
+            submitButtonElement.val(submitButtonText).attr('disabled', false);
+        }
+
+
+        ajaxRequest(type, url, data, beforeSendCallback, mainSuccessCallback, mainErrorCallback, finalCallback)
+    }
+}
+
+function Select2SearchDesignTemplate(repo) {
+    /**
+     * This function is used in Select2 Searching Functionality
+     */
+    if (repo.loading) {
+        return repo.text;
+    }
+    let $container;
+    if (repo.id && repo.text) {
+        $container = $(
+            "<div class='select2-result-repository clearfix'>" +
+            "<div class='select2-result-repository__title'></div>" +
+            "</div>"
+        );
+        $container.find(".select2-result-repository__title").text(repo.text);
+    } else {
+        $container = $(
+            "<div class='select2-result-repository clearfix'>" +
+            "<div class='row'>" +
+            "<div class='col-1 select2-result-repository__avatar' style='width:20px'>" +
+            "<img src='" + repo.image + "' class='w-100' alt=''/>" +
+            "</div>" +
+            "<div class='col-10'>" +
+            "<div class='select2-result-repository__title'></div>" +
+            "<div class='select2-result-repository__description'></div>" +
+            "</div>" +
+            "</div>"
+        );
+
+        $container.find(".select2-result-repository__title").text(repo.first_name + " " + repo.last_name);
+        $container.find(".select2-result-repository__description").text(repo.email);
+    }
+
+    return $container;
+}
+
+/**
+ *
+ * @param searchElement
+ * @param searchUrl
+ * @param {Object|null} data
+ * @param {number} data.total_count
+ * @param {string} data.email
+ * @param {number} data.page
+ * @param placeHolder
+ * @param templateDesignEvent
+ * @param onTemplateSelectEvent
+ */
+function select2Search(searchElement, searchUrl, data, placeHolder, templateDesignEvent, onTemplateSelectEvent) {
+    //Select2 Ajax Searching Functionality function
+    if (!data) {
+        data = {};
+    }
+    $(searchElement).select2({
+        tags: true,
+        ajax: {
+            url: searchUrl,
+            dataType: 'json',
+            delay: 250,
+            cache: true,
+            data: function (params) {
+                data.email = params.term;
+                data.page = params.page;
+                return data;
+            },
+            processResults: function (data, params) {
+                params.page = params.page || 1;
+                return {
+                    results: data.data,
+                    pagination: {
+                        more: (params.page * 30) < data.total_count
+                    }
+                };
+            }
+        },
+        placeholder: placeHolder,
+        minimumInputLength: 1,
+        templateResult: templateDesignEvent,
+        templateSelection: onTemplateSelectEvent,
+    });
+}
+
+/**
+ * @param {string} [url] - Ajax URL that will be called when the Confirm button will be clicked
+ * @param {string} [method] - GET / POST / PUT / PATCH / DELETE
+ * @param {Object} [options] - Options to Configure SweetAlert
+ * @param {string} [options.title] - Are you sure
+ * @param {string} [options.text] - You won't be able to revert this
+ * @param {string} [options.icon] - 'warning'
+ * @param {boolean} [options.showCancelButton] - true
+ * @param {string} [options.confirmButtonColor] - '#3085d6'
+ * @param {string} [options.cancelButtonColor] - '#d33'
+ * @param {string} [options.confirmButtonText] - Confirm
+ * @param {string} [options.cancelButtonText] - Cancel
+ * @param {function} [options.successCallBack] - function()
+ * @param {function} [options.errorCallBack] - function()
+ * @param {function} [options.data] - FormData Object / Object
+ */
+function showSweetAlertConfirmPopup(url, method, options = {}) {
+    let opt = {
+        title: trans("Are you sure"),
+        text: trans("You wont be able to revert this"),
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: trans("Confirm"),
+        cancelButtonText: trans("Cancel"),
+        successCallBack: function () {
+        },
+        errorCallBack: function (response) {
+        },
+        ...options,
+    }
+
+    Swal.fire({
+        title: opt.title,
+        text: opt.text,
+        icon: opt.icon,
+        showCancelButton: opt.showCancelButton,
+        confirmButtonColor: opt.showCancelButton,
+        cancelButtonColor: opt.cancelButtonColor,
+        confirmButtonText: opt.confirmButtonText,
+        cancelButtonText: opt.cancelButtonText
+    }).then((result) => {
+        if (result.isConfirmed) {
+            function successCallback(response) {
+                showSuccessToast(response.message);
+                opt.successCallBack(response);
+            }
+
+            function errorCallback(response) {
+                showErrorToast(response.message);
+                opt.errorCallBack(response);
+            }
+
+            ajaxRequest(method, url, options.data || null, null, successCallback, errorCallback);
+        }
+    })
+}
+
+/**
+ *
+ * @param {string} [url] - Ajax URL that will be called when the Delete will be successfully
+ * @param {Object} [options] - Options to Configure SweetAlert
+ * @param {string} [options.text] - "Are you sure?"
+ * @param {string} [options.title] - "You won't be able to revert this!"
+ * @param {string} [options.icon] - "warning"
+ * @param {boolean} [options.showCancelButton] - true
+ * @param {string} [options.confirmButtonColor] - "#3085d6"
+ * @param {string} [options.cancelButtonColor] - "#d33"
+ * @param {string} [options.confirmButtonText] - "Yes, delete it!"
+ * @param {string} [options.cancelButtonText] - "Cancel"
+ * @param {function} [options.successCallBack] - function()
+ * @param {function} [options.errorCallBack] - function()
+ * @param {function} [options.data] - FormData Object / Object
+ */
+function showDeletePopupModal(url, options = {}) {
+    // console.log(windows.trans("Are you sure"));
+    // To Preserve OLD
+    let opt = {
+        title: window?.languageLabels["Are you sure"] || "Are you sure",
+        text: window?.languageLabels["You wont be able to revert this"] || "You wont be able to revert this",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: window?.languageLabels["Yes Delete"] || "Yes Delete",
+        cancelButtonText: window?.languageLabels["Cancel"] || "Cancel",
+        successCallBack: function () {
+        },
+        errorCallBack: function (response) {
+        },
+        ...options,
+    }
+    showSweetAlertConfirmPopup(url, 'DELETE', opt);
+}
+
+
+/**
+ *
+ * @param {string} [url] - Ajax URL that will be called when the Delete will be successfully
+ * @param {Object} [options] - Options to Configure SweetAlert
+ * @param {string} [options.text] - "Are you sure?"
+ * @param {string} [options.title] - "You won't be able to revert this!"
+ * @param {string} [options.icon] - "warning"
+ * @param {boolean} [options.showCancelButton] - true
+ * @param {string} [options.confirmButtonColor] - "#3085d6"
+ * @param {string} [options.cancelButtonColor] - "#d33"
+ * @param {string} [options.confirmButtonText] - "Yes, delete it!"
+ * @param {string} [options.cancelButtonText] - "Cancel"
+ * @param {function} [options.successCallBack]
+ * @param {function} [options.errorCallBack]
+ */
+function showRestorePopupModal(url, options = {}) {
+    // To Preserve OLD
+    let opt = {
+        title: trans("Are you sure"),
+        text: trans("You wont be able to revert this"),
+        icon: 'success',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: trans('Yes Restore it'),
+        cancelButtonText: trans('Cancel'),
+        successCallBack: function () {
+        },
+        errorCallBack: function (response) {
+        },
+        ...options,
+    }
+    showSweetAlertConfirmPopup(url, 'PUT', opt);
+}
+
+/**
+ *
+ * @param {string} [url] - Ajax URL that will be called when the Delete will be successfully
+ * @param {Object} [options] - Options to Configure SweetAlert
+ * @param {string} [options.text] - "Are you sure?"
+ * @param {string} [options.title] - "You won't be able to revert this!"
+ * @param {string} [options.icon] - "warning"
+ * @param {boolean} [options.showCancelButton] - true
+ * @param {string} [options.confirmButtonColor] - "#3085d6"
+ * @param {string} [options.cancelButtonColor] - "#d33"
+ * @param {string} [options.confirmButtonText] - "Yes, delete it!"
+ * @param {string} [options.cancelButtonText] - "Cancel"
+ * @param {function} [options.successCallBack]
+ * @param {function} [options.errorCallBack]
+ */
+function showPermanentlyDeletePopupModal(url, options = {}) {
+    // To Preserve OLD
+    let opt = {
+        title: trans("Are you sure"),
+        text: trans("You are about to Delete this data"),
+        icon: 'error',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: trans("Yes Delete Permanently"),
+        cancelButtonText: trans('Cancel'),
+        successCallBack: function () {
+        },
+        errorCallBack: function (response) {
+        },
+        ...options,
+    }
+    showSweetAlertConfirmPopup(url, 'DELETE', opt);
+}
+
+/**
+ * Calculate Discounted price based on the Price and Discount(%)
+ * @param price
+ * @param discount
+ * @returns {string}
+ */
+function calculateDiscountedAmount(price, discount) {
+    let finalPrice = price - (price * discount / 100);
+    return finalPrice.toFixed(2);
+}
+
+/**
+ * Calculate Discount(%)
+ * @param price
+ * @param discountedPrice
+ * @returns {string}
+ */
+function calculateDiscount(price, discountedPrice) {
+    let finalDiscount = 100 - discountedPrice * 100 / price;
+    return finalDiscount.toFixed(2);
+}
+
+function generateSlug(text){
+        // Remove non-English and non-number/dash/underscore characters, replace spaces with dash, to lower case
+    return text
+        .toLowerCase()
+        .replace(/[^a-z0-9 -_]/g, '')      // Remove non-English chars except dash/underscore
+        .replace(/\s+/g, '-')              // Replace spaces with dash
+        .replace(/[-_]+/g, '-')            // Collapse multiple - or _
+        .replace(/^-+|-+$/g, '');          // Remove leading/trailing dash
+}
+
+function showDeleteLanguagePopupModal(url, options = {}) {
+    let opt = {
+        title: trans("Are you sure?"),
+        text: trans("Deleting this language will delete all the language files and translations associated with it."),
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: trans("Yes Delete"),
+        cancelButtonText: trans('Cancel'),
+        successCallBack: function () {},
+        errorCallBack: function (response) {},
+        ...options,
+    };
+    showSweetAlertConfirmPopup(url, 'DELETE', opt);
+}
--- a/public/assets/js/custom/table-translations.js
+++ b/public/assets/js/custom/table-translations.js
@@ -0,0 +1,35 @@
+$(document).ready(function() {
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Function to apply translations to a table
+    function applyTableTranslations($table) {
+        $table.attr({
+            'data-search-text': window.trans('Search'),
+            'data-search-placeholder': window.trans('Search...'),
+            'data-refresh-text': window.trans('Refresh'),
+            'data-toggle-text': window.trans('Toggle'),
+            'data-columns-text': window.trans('Columns'),
+            'data-detail-view-text': window.trans('Detail'),
+            'data-detail-formatter-text': window.trans('Detail Formatter'),
+            'data-pagination-pre-text': window.trans('Previous'),
+            'data-pagination-next-text': window.trans('Next'),
+            'data-pagination-first-text': window.trans('First'),
+            'data-pagination-last-text': window.trans('Last'),
+            'data-pagination-info-text': window.trans('Showing {ctx.start} to {ctx.end} of {ctx.total} entries'),
+            'data-pagination-info-formatted': window.trans('Showing {ctx.start} to {ctx.end} of {ctx.total} entries')
+        });
+    }
+
+    // Apply translations to all translatable tables
+    $('.translatable-table').each(function() {
+        applyTableTranslations($(this));
+    });
+
+    // Listen for language change events (if you have a language switcher)
+    $(document).on('languageChanged', function() {
+        // Reload translations and update tables
+        if (typeof loadTableTranslations === 'function') {
+            loadTableTranslations();
+        }
+    });
+});
--- a/public/assets/js/firebase-app.js
+++ b/public/assets/js/firebase-app.js
--- a/public/assets/js/firebase-messaging.js
+++ b/public/assets/js/firebase-messaging.js
--- a/public/assets/js/jquery.min.js
+++ b/public/assets/js/jquery.min.js
--- a/public/assets/js/leaflet.js
+++ b/public/assets/js/leaflet.js
--- a/public/assets/js/map.js
+++ b/public/assets/js/map.js
@@ -0,0 +1,90 @@
+// Map initialization function
+function initializeMap(containerId, defaultLat, defaultLng, defaultZoom = 13) {
+    const map = L.map(containerId).setView([defaultLat, defaultLng], defaultZoom);
+
+    // Configure default icon path
+    const defaultIcon = L.icon({
+        iconUrl: '/assets/css/images/marker-icon.png',
+        shadowUrl: '/assets/css/images/marker-shadow.png',
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41]
+    });
+    L.Marker.prototype.options.icon = defaultIcon;
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors'
+    }).addTo(map);
+
+    // Add a draggable marker
+    const marker = L.marker([defaultLat, defaultLng], {
+        draggable: true
+    }).addTo(map);
+
+    // Handle map click events
+    map.on('click', function(e) {
+        const lat = e.latlng.lat;
+        const lng = e.latlng.lng;
+
+        // Update marker position
+        marker.setLatLng([lat, lng]);
+
+        // Update coordinates in form
+        updateCoordinates(lat, lng);
+    });
+
+    // Handle marker drag events
+    marker.on('dragend', function(e) {
+        const lat = e.target.getLatLng().lat;
+        const lng = e.target.getLatLng().lng;
+
+        // Update coordinates in form
+        updateCoordinates(lat, lng);
+    });
+
+    return map;
+}
+
+// Function to update coordinates in form fields
+function updateCoordinates(lat, lng) {
+    // Update city coordinates if on city page
+    if (typeof window.updateCityCoordinates === 'function') {
+        window.updateCityCoordinates(lat, lng);
+    }
+
+    // Update area coordinates if on area page
+    if (typeof window.updateAreaCoordinates === 'function') {
+        window.updateAreaCoordinates(lat, lng);
+    }
+}
+
+// Function to set map view to specific coordinates
+function setMapView(map, lat, lng, zoom = 13) {
+    map.setView([lat, lng], zoom);
+}
+
+// Function to update marker position
+function updateMarkerPosition(marker, lat, lng) {
+    marker.setLatLng([lat, lng]);
+}
+
+// Export functions for use in other files
+window.mapUtils = {
+    initializeMap,
+    updateCoordinates,
+    setMapView,
+    updateMarkerPosition,
+    removeMap(containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        if (container._leaflet_id) {
+            const map = L.map(containerId);
+            map.remove();
+        }
+
+        // Optional: Clear inner HTML to fully reset the container
+        container.innerHTML = '';
+    }
+};
--- a/public/assets/js/mazer.js
+++ b/public/assets/js/mazer.js
--- a/public/assets/js/pages/ckeditor.js
+++ b/public/assets/js/pages/ckeditor.js
@@ -0,0 +1,3 @@
+ClassicEditor.create(document.querySelector("#editor")).catch((error) => {
+  console.error(error)
+})
--- a/public/assets/js/pages/component-toasts.js
+++ b/public/assets/js/pages/component-toasts.js
@@ -0,0 +1,9 @@
+const toastTrigger = document.getElementById("liveToastBtn")
+const toastLiveExample = document.getElementById("liveToast")
+if (toastTrigger) {
+  toastTrigger.addEventListener("click", () => {
+    const toast = new bootstrap.Toast(toastLiveExample)
+
+    toast.show()
+  })
+}
--- a/public/assets/js/pages/dashboard.js
+++ b/public/assets/js/pages/dashboard.js
@@ -0,0 +1,158 @@
+var optionsProfileVisit = {
+  annotations: {
+    position: "back",
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  chart: {
+    type: "bar",
+    height: 300,
+  },
+  fill: {
+    opacity: 1,
+  },
+  plotOptions: {},
+  series: [
+    {
+      name: "sales",
+      data: [9, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20],
+    },
+  ],
+  colors: " #087C7C",
+  xaxis: {
+    categories: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ],
+  },
+}
+let optionsVisitorsProfile = {
+  series: [70, 30],
+  labels: ["Male", "Female"],
+  colors: [" #087C7C", "#55c6e8"],
+  chart: {
+    type: "donut",
+    width: "100%",
+    height: "350px",
+  },
+  legend: {
+    position: "bottom",
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: "30%",
+      },
+    },
+  },
+}
+
+var optionsEurope = {
+  series: [
+    {
+      name: "series1",
+      data: [310, 800, 600, 430, 540, 340, 605, 805, 430, 540, 340, 605],
+    },
+  ],
+  chart: {
+    height: 80,
+    type: "area",
+    toolbar: {
+      show: false,
+    },
+  },
+  colors: ["#5350e9"],
+  stroke: {
+    width: 2,
+  },
+  grid: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  xaxis: {
+    type: "datetime",
+    categories: [
+      "2018-09-19T00:00:00.000Z",
+      "2018-09-19T01:30:00.000Z",
+      "2018-09-19T02:30:00.000Z",
+      "2018-09-19T03:30:00.000Z",
+      "2018-09-19T04:30:00.000Z",
+      "2018-09-19T05:30:00.000Z",
+      "2018-09-19T06:30:00.000Z",
+      "2018-09-19T07:30:00.000Z",
+      "2018-09-19T08:30:00.000Z",
+      "2018-09-19T09:30:00.000Z",
+      "2018-09-19T10:30:00.000Z",
+      "2018-09-19T11:30:00.000Z",
+    ],
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+    labels: {
+      show: false,
+    },
+  },
+  show: false,
+  yaxis: {
+    labels: {
+      show: false,
+    },
+  },
+  tooltip: {
+    x: {
+      format: "dd/MM/yy HH:mm",
+    },
+  },
+}
+
+let optionsAmerica = {
+  ...optionsEurope,
+  colors: ["#008b75"],
+}
+let optionsIndonesia = {
+  ...optionsEurope,
+  colors: ["#dc3545"],
+}
+
+var chartProfileVisit = new ApexCharts(
+  document.querySelector("#chart-profile-visit"),
+  optionsProfileVisit
+)
+var chartVisitorsProfile = new ApexCharts(
+  document.getElementById("chart-visitors-profile"),
+  optionsVisitorsProfile
+)
+var chartEurope = new ApexCharts(
+  document.querySelector("#chart-europe"),
+  optionsEurope
+)
+var chartAmerica = new ApexCharts(
+  document.querySelector("#chart-america"),
+  optionsAmerica
+)
+var chartIndonesia = new ApexCharts(
+  document.querySelector("#chart-indonesia"),
+  optionsIndonesia
+)
+
+chartIndonesia.render()
+chartAmerica.render()
+chartEurope.render()
+chartProfileVisit.render()
+chartVisitorsProfile.render()
--- a/public/assets/js/pages/datatables.js
+++ b/public/assets/js/pages/datatables.js
@@ -0,0 +1 @@
+let jquery_datatable = $("#table1").DataTable()
--- a/public/assets/js/pages/filepond.js
+++ b/public/assets/js/pages/filepond.js
@@ -0,0 +1,181 @@
+// Filepond: Basic
+FilePond.create(document.querySelector(".basic-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: false,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: Multiple Files
+FilePond.create(document.querySelector(".multiple-files-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: false,
+})
+
+// Filepond: With Validation
+FilePond.create(document.querySelector(".with-validation-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  allowMultiple: true,
+  allowFileEncode: false,
+  required: true,
+  acceptedFileTypes: ["image/png"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: ImgBB with server property
+FilePond.create(document.querySelector(".imgbb-filepond"), {
+  credits: null,
+  allowImagePreview: false,
+  server: {
+    process: (fieldName, file, metadata, load, error, progress, abort) => {
+      // We ignore the metadata property and only send the file
+
+      const formData = new FormData()
+      formData.append(fieldName, file, file.name)
+
+      const request = new XMLHttpRequest()
+      // you can change it by your client api key
+      request.open(
+        "POST",
+        "https://api.imgbb.com/1/upload?key=762894e2014f83c023b233b2f10395e2"
+      )
+
+      request.upload.onprogress = (e) => {
+        progress(e.lengthComputable, e.loaded, e.total)
+      }
+
+      request.onload = function () {
+        if (request.status >= 200 && request.status < 300) {
+          load(request.responseText)
+        } else {
+          error("oh no")
+        }
+      }
+
+      request.onreadystatechange = function () {
+        if (this.readyState == 4) {
+          if (this.status == 200) {
+            let response = JSON.parse(this.responseText)
+
+            Toastify({
+              text: "Success uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#4fbe87",
+            }).showToast()
+
+            console.log(response)
+          } else {
+            Toastify({
+              text: "Failed uploading to imgbb! see console f12",
+              duration: 3000,
+              close: true,
+              gravity: "bottom",
+              position: "right",
+              backgroundColor: "#ff0000",
+            }).showToast()
+
+            console.log("Error", this.statusText)
+          }
+        }
+      }
+
+      request.send(formData)
+    },
+  },
+})
+
+// Filepond: Image Preview
+FilePond.create(document.querySelector(".image-preview-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Crop
+FilePond.create(document.querySelector(".image-crop-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Exif Orientation
+FilePond.create(document.querySelector(".image-exif-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: true,
+  allowImageCrop: false,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Filter
+FilePond.create(document.querySelector(".image-filter-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: true,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  imageFilterColorMatrix: [
+    0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114, 0, 0, 0.299, 0.587, 0.114,
+    0, 0, 0.0, 0.0, 0.0, 1, 0,
+  ],
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
+
+// Filepond: Image Resize
+FilePond.create(document.querySelector(".image-resize-filepond"), {
+  credits: null,
+  allowImagePreview: true,
+  allowImageFilter: false,
+  allowImageExifOrientation: false,
+  allowImageCrop: false,
+  allowImageResize: true,
+  imageResizeTargetWidth: 200,
+  imageResizeTargetHeight: 200,
+  imageResizeMode: "cover",
+  imageResizeUpscale: true,
+  acceptedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  fileValidateTypeDetectType: (source, type) =>
+    new Promise((resolve, reject) => {
+      // Do custom type detection here and return with promise
+      resolve(type)
+    }),
+})
--- a/public/assets/js/pages/form-editor.js
+++ b/public/assets/js/pages/form-editor.js
@@ -0,0 +1,27 @@
+var snow = new Quill("#snow", {
+  theme: "snow",
+})
+var bubble = new Quill("#bubble", {
+  theme: "bubble",
+})
+new Quill("#full", {
+  bounds: "#full-container .editor",
+  modules: {
+    toolbar: [
+      [{ font: [] }, { size: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ script: "super" }, { script: "sub" }],
+      [
+        { list: "ordered" },
+        { list: "bullet" },
+        { indent: "-1" },
+        { indent: "+1" },
+      ],
+      ["direction", { align: [] }],
+      ["link", "image", "video"],
+      ["clean"],
+    ],
+  },
+  theme: "snow",
+})
--- a/public/assets/js/pages/form-element-select.js
+++ b/public/assets/js/pages/form-element-select.js
@@ -0,0 +1,14 @@
+let choices = document.querySelectorAll(".choices")
+let initChoice
+for (let i = 0; i < choices.length; i++) {
+  if (choices[i].classList.contains("multiple-remove")) {
+    initChoice = new Choices(choices[i], {
+      delimiter: ",",
+      editItems: true,
+      maxItemCount: -1,
+      removeItemButton: true,
+    })
+  } else {
+    initChoice = new Choices(choices[i])
+  }
+}
--- a/public/assets/js/pages/horizontal-layout.js
+++ b/public/assets/js/pages/horizontal-layout.js
@@ -0,0 +1,43 @@
+function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) }
+
+// Responsive burger btn onclick
+document.querySelector(".burger-btn").addEventListener("click", (e) => {
+  e.preventDefault()
+  let navbar = document.querySelector(".main-navbar")
+
+  slideToggle(navbar, 300)
+})
+
+window.onload = () => checkWindowSize()
+window.addEventListener("resize", (event) => {
+  checkWindowSize()
+})
+
+function checkWindowSize() {
+  if (window.innerWidth < 1200) listener()
+  if (window.innerWidth > 1200)
+    document.querySelector(".main-navbar").style.display = ""
+}
+
+function listener() {
+  let menuItems = document.querySelectorAll(".menu-item.has-sub")
+  menuItems.forEach((menuItem) => {
+    menuItem.querySelector(".menu-link").addEventListener("click", (e) => {
+      e.preventDefault()
+      let submenu = menuItem.querySelector(".submenu")
+      submenu.classList.toggle("active")
+    })
+  })
+
+  // Three level menu event listener
+  let submenuItems = document.querySelectorAll(".submenu-item.has-sub")
+
+  submenuItems.forEach((submenuItem) => {
+    submenuItem
+      .querySelector(".submenu-link")
+      .addEventListener("click", (e) => {
+        e.preventDefault()
+        submenuItem.querySelector(".subsubmenu").classList.toggle("active")
+      })
+  })
+}
--- a/public/assets/js/pages/jquery.js
+++ b/public/assets/js/pages/jquery.js
@@ -0,0 +1 @@
+let $ = require("jquery")
--- a/public/assets/js/pages/parsley.js
+++ b/public/assets/js/pages/parsley.js
@@ -0,0 +1,147 @@
+$.extend(window.Parsley.options, {
+    focus: "first",
+    excluded:
+        "input[type=button], input[type=submit], input[type=reset], .search, .ignore",
+    triggerAfterFailure: "change blur",
+    errorsContainer: function (element) {
+    },
+    trigger: "change",
+    successClass: "is-valid",
+    errorClass: "is-invalid",
+    classHandler: function (el) {
+        return el.$element.closest(".form-group")
+    },
+    errorsContainer: function (el) {
+        return el.$element.closest(".form-group")
+    },
+    errorsWrapper: '<div class="parsley-error"></div>',
+    errorTemplate: "<span></span>",
+})
+
+Parsley.on("field:validated", function (el) {
+    var elNode = $(el)[0]
+    if (elNode && !elNode.isValid()) {
+        var rqeuiredValResult = elNode.validationResult.filter(function (vr) {
+            return vr.assert.name === "required"
+        })
+        if (rqeuiredValResult.length > 0) {
+            var fieldNode = $(elNode.element)
+            var formGroupNode = fieldNode.closest(".form-group")
+            var lblNode = formGroupNode.find(".form-label:first")
+            if (lblNode.length > 0) {
+                // change default error message to include field label
+                var errorNode = formGroupNode.find(
+                    "div.parsley-error span[class*=parsley-]"
+                )
+                if (errorNode.length > 0) {
+                    var lblText = lblNode.text()
+                    if (lblText) {
+                        errorNode.html(lblText + " is required.")
+                    }
+                }
+            }
+        }
+    }
+})
+
+Parsley.addValidator("restrictedCity", {
+    requirementType: "string",
+    validateString: function (value, requirement) {
+        value = (value || "").trim()
+        return value === "" || value.toLowerCase() === requirement.toLowerCase()
+    },
+    messages: {
+        en: 'You have to live in <a href="https://www.google.com/maps/place/Jakarta">Jakarta</a>.',
+    },
+})
+
+
+//has uppercase
+Parsley.addValidator('uppercase', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var uppercases = value.match(/[A-Z]/g) || [];
+        return uppercases.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) uppercase letter.' + '<br>'
+    }
+});
+
+//has lowercase
+Parsley.addValidator('lowercase', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var lowecases = value.match(/[a-z]/g) || [];
+        return lowecases.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) lowercase letter.' + '<br>'
+    }
+});
+
+//has number
+Parsley.addValidator('number', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var numbers = value.match(/[0-9]/g) || [];
+        return numbers.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) number.' + '<br>'
+    }
+});
+
+//has special char
+Parsley.addValidator('special', {
+    requirementType: 'number',
+    validateString: function (value, requirement) {
+        var specials = value.match(/[^a-zA-Z0-9]/g) || [];
+        return specials.length >= requirement;
+    },
+    messages: {
+        en: 'Your password must contain at least (%s) special characters.' + '<br>'
+    }
+});
+
+
+Parsley.addValidator('minSelect', function (value, requirement) {
+    return value.split(',').length >= parseInt(requirement, 10);
+}, 32)
+    .addMessage('en', 'minSelect', 'You must select at least %s.');
+
+
+Parsley.addValidator('notequalto',
+    function (value, requirement) {
+        return value !== $(requirement).val();
+    }, 32)
+    .addMessage('en', 'notequalto', 'This value should not be the same.');
+
+// Greater than validator
+Parsley.addValidator('gt',
+    function (value, requirement) {
+        console.log('asdfsdfd');
+        return parseFloat(value) > parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'gt', 'This value should be greater %s');
+
+// Greater than or equal to validator
+Parsley.addValidator('ge',
+    function (value, requirement) {
+        return parseFloat(value) >= parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'ge', 'This value should be greater or equal ');
+
+// Less than validator
+Parsley.addValidator('lt',
+    function (value, requirement) {
+        return parseFloat(value) < parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'lt', 'This value should be less %s');
+
+// Less than or equal to validator
+Parsley.addValidator('le',
+    function (value, requirement) {
+        return parseFloat(value) <= parseFloat($(requirement).val());
+    }, 32)
+    .addMessage('en', 'le', 'This value should be less or equal');
--- a/public/assets/js/pages/quill.js
+++ b/public/assets/js/pages/quill.js
@@ -0,0 +1,27 @@
+var snow = new Quill("#snow", {
+  theme: "snow",
+})
+var bubble = new Quill("#bubble", {
+  theme: "bubble",
+})
+new Quill("#full", {
+  bounds: "#full-container .editor",
+  modules: {
+    toolbar: [
+      [{ font: [] }, { size: [] }],
+      ["bold", "italic", "underline", "strike"],
+      [{ color: [] }, { background: [] }],
+      [{ script: "super" }, { script: "sub" }],
+      [
+        { list: "ordered" },
+        { list: "bullet" },
+        { indent: "-1" },
+        { indent: "+1" },
+      ],
+      ["direction", { align: [] }],
+      ["link", "image", "video"],
+      ["clean"],
+    ],
+  },
+  theme: "snow",
+})
--- a/public/assets/js/pages/rater-js.js
+++ b/public/assets/js/pages/rater-js.js
@@ -0,0 +1,38 @@
+raterJs({
+  element: document.querySelector("#basic"),
+  starSize: 32,
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+})
+
+raterJs({
+  element: document.querySelector("#step"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli1"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 10,
+  step: 0.5,
+})
+raterJs({
+  element: document.querySelector("#unli2"),
+  rateCallback: function rateCallback(rating, done) {
+    this.setRating(rating)
+    done()
+  },
+  starSize: 32,
+  max: 16,
+  step: 0.5,
+})
--- a/public/assets/js/pages/simple-datatables.js
+++ b/public/assets/js/pages/simple-datatables.js
@@ -0,0 +1,46 @@
+let dataTable = new simpleDatatables.DataTable(
+  document.getElementById("table1")
+)
+// Move "per page dropdown" selector element out of label
+// to make it work with bootstrap 5. Add bs5 classes.
+function adaptPageDropdown() {
+  const selector = dataTable.wrapper.querySelector(".dataTable-selector")
+  selector.parentNode.parentNode.insertBefore(selector, selector.parentNode)
+  selector.classList.add("form-select")
+}
+
+// Add bs5 classes to pagination elements
+function adaptPagination() {
+  const paginations = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list"
+  )
+
+  for (const pagination of paginations) {
+    pagination.classList.add(...["pagination", "pagination-primary"])
+  }
+
+  const paginationLis = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li"
+  )
+
+  for (const paginationLi of paginationLis) {
+    paginationLi.classList.add("page-item")
+  }
+
+  const paginationLinks = dataTable.wrapper.querySelectorAll(
+    "ul.dataTable-pagination-list li a"
+  )
+
+  for (const paginationLink of paginationLinks) {
+    paginationLink.classList.add("page-link")
+  }
+}
+
+// Patch "per page dropdown" and pagination after table rendered
+dataTable.on("datatable.init", function () {
+  adaptPageDropdown()
+  adaptPagination()
+})
+
+// Re-patch pagination after the page was changed
+dataTable.on("datatable.page", adaptPagination)
--- a/public/assets/js/pages/summernote.js
+++ b/public/assets/js/pages/summernote.js
@@ -0,0 +1,20 @@
+$("#summernote").summernote({
+  tabsize: 2,
+  height: 120,
+})
+$("#hint").summernote({
+  height: 100,
+  toolbar: false,
+  placeholder: "type with apple, orange, watermelon and lemon",
+  hint: {
+    words: ["apple", "orange", "watermelon", "lemon"],
+    match: /\b(\w{1,})$/,
+    search: function (keyword, callback) {
+      callback(
+        $.grep(this.words, function (item) {
+          return item.indexOf(keyword) === 0
+        })
+      )
+    },
+  },
+})
--- a/public/assets/js/pages/sweetalert2.js
+++ b/public/assets/js/pages/sweetalert2.js
@@ -0,0 +1,142 @@
+document.getElementById("basic").addEventListener("click", (e) => {
+  Swal.fire("Any fool can use a computer")
+})
+document.getElementById("footer").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Oops...",
+    text: "Something went wrong!",
+    footer: "<a href>Why do I have this issue?</a>",
+  })
+})
+document.getElementById("title").addEventListener("click", (e) => {
+  Swal.fire("The Internet?", "That thing is still around?", "question")
+})
+document.getElementById("success").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "success",
+    title: "Success",
+  })
+})
+document.getElementById("error").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "error",
+    title: "Error",
+  })
+})
+document.getElementById("warning").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "warning",
+    title: "Warning",
+  })
+})
+document.getElementById("info").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "info",
+    title: "Info",
+  })
+})
+document.getElementById("question").addEventListener("click", (e) => {
+  Swal.fire({
+    icon: "question",
+    title: "Question",
+  })
+})
+document.getElementById("text").addEventListener("click", (e) => {
+  Swal.fire({
+    title: "Enter your IP address",
+    input: "text",
+    inputLabel: "Your IP address",
+    showCancelButton: true,
+  })
+})
+document.getElementById("email").addEventListener("click", async (e) => {
+  const { value: email } = await Swal.fire({
+    title: "Input email address",
+    input: "email",
+    inputLabel: "Your email address",
+    inputPlaceholder: "Enter your email address",
+  })
+
+  if (email) {
+    Swal.fire(`Entered email: ${email}`)
+  }
+})
+document.getElementById("url").addEventListener("click", async (e) => {
+  const { value: url } = await Swal.fire({
+    input: "url",
+    inputLabel: "URL address",
+    inputPlaceholder: "Enter the URL",
+  })
+
+  if (url) {
+    Swal.fire(`Entered URL: ${url}`)
+  }
+})
+document.getElementById("password").addEventListener("click", async (e) => {
+  const { value: password } = await Swal.fire({
+    title: "Enter your password",
+    input: "password",
+    inputLabel: "Password",
+    inputPlaceholder: "Enter your password",
+    inputAttributes: {
+      maxlength: 10,
+      autocapitalize: "off",
+      autocorrect: "off",
+    },
+  })
+
+  if (password) {
+    Swal.fire(`Entered password: ${password}`)
+  }
+})
+document.getElementById("textarea").addEventListener("click", async (e) => {
+  const { value: text } = await Swal.fire({
+    input: "textarea",
+    inputLabel: "Message",
+    inputPlaceholder: "Type your message here...",
+    inputAttributes: {
+      "aria-label": "Type your message here",
+    },
+    showCancelButton: true,
+  })
+
+  if (text) {
+    Swal.fire(text)
+  }
+})
+document.getElementById("select").addEventListener("click", async (e) => {
+  const { value: fruit } = await Swal.fire({
+    title: "Select field validation",
+    input: "select",
+    inputOptions: {
+      Fruits: {
+        apples: "Apples",
+        bananas: "Bananas",
+        grapes: "Grapes",
+        oranges: "Oranges",
+      },
+      Vegetables: {
+        potato: "Potato",
+        broccoli: "Broccoli",
+        carrot: "Carrot",
+      },
+      icecream: "Ice cream",
+    },
+    inputPlaceholder: "Select a fruit",
+    showCancelButton: true,
+    inputValidator: (value) => {
+      return new Promise((resolve) => {
+        if (value === "oranges") {
+          resolve()
+        } else {
+          resolve("You need to select oranges :)")
+        }
+      })
+    },
+  })
+
+  if (fruit) {
+    Swal.fire(`You selected: ${fruit}`)
+  }
+})
--- a/public/assets/js/pages/tinymce.js
+++ b/public/assets/js/pages/tinymce.js
@@ -0,0 +1,22 @@
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("initing", document.body.classList.contains("theme-dark"))
+
+  const themeOptions = document.body.classList.contains("theme-dark")
+    ? {
+        skin: "oxide-dark",
+        content_css: "dark",
+      }
+    : {
+        skin: "oxide",
+        content_css: "default",
+      }
+
+  tinymce.init({ selector: "#default", ...themeOptions })
+  tinymce.init({
+    selector: "#dark",
+    toolbar:
+      "undo redo styleselect bold italic alignleft aligncenter alignright bullist numlist outdent indent code",
+    plugins: "code",
+    ...themeOptions,
+  })
+})
--- a/public/assets/js/pages/toastify.js
+++ b/public/assets/js/pages/toastify.js
@@ -0,0 +1,81 @@
+document.getElementById("basic").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+  }).showToast()
+})
+document.getElementById("background").addEventListener("click", () => {
+  Toastify({
+    text: "This is a toast",
+    duration: 3000,
+    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+  }).showToast()
+})
+document.getElementById("close").addEventListener("click", () => {
+  Toastify({
+    text: "Click close button",
+    duration: 3000,
+    close: true,
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top left",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top center",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("top-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in top right",
+    duration: 3000,
+    close: true,
+    gravity: "top",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-right").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom right",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "right",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-center").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom center",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "center",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
+document.getElementById("bottom-left").addEventListener("click", () => {
+  Toastify({
+    text: "This is toast in bottom left",
+    duration: 3000,
+    close: true,
+    gravity: "bottom",
+    position: "left",
+    backgroundColor: "#4fbe87",
+  }).showToast()
+})
--- a/public/assets/js/pages/ui-apexchart.js
+++ b/public/assets/js/pages/ui-apexchart.js
@@ -0,0 +1,521 @@
+var lineOptions = {
+  chart: {
+    type: "line",
+  },
+  series: [
+    {
+      name: "sales",
+      data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+    },
+  ],
+  xaxis: {
+    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
+  },
+}
+var candleOptions = {
+  series: [
+    {
+      name: "candle",
+      data: [
+        {
+          x: new Date(1538778600000),
+          y: [6629.81, 6650.5, 6623.04, 6633.33],
+        },
+        {
+          x: new Date(1538780400000),
+          y: [6632.01, 6643.59, 6620, 6630.11],
+        },
+        {
+          x: new Date(1538782200000),
+          y: [6630.71, 6648.95, 6623.34, 6635.65],
+        },
+        {
+          x: new Date(1538784000000),
+          y: [6635.65, 6651, 6629.67, 6638.24],
+        },
+        {
+          x: new Date(1538785800000),
+          y: [6638.24, 6640, 6620, 6624.47],
+        },
+        {
+          x: new Date(1538787600000),
+          y: [6624.53, 6636.03, 6621.68, 6624.31],
+        },
+        {
+          x: new Date(1538789400000),
+          y: [6624.61, 6632.2, 6617, 6626.02],
+        },
+        {
+          x: new Date(1538791200000),
+          y: [6627, 6627.62, 6584.22, 6603.02],
+        },
+        {
+          x: new Date(1538793000000),
+          y: [6605, 6608.03, 6598.95, 6604.01],
+        },
+        {
+          x: new Date(1538794800000),
+          y: [6604.5, 6614.4, 6602.26, 6608.02],
+        },
+        {
+          x: new Date(1538796600000),
+          y: [6608.02, 6610.68, 6601.99, 6608.91],
+        },
+        {
+          x: new Date(1538798400000),
+          y: [6608.91, 6618.99, 6608.01, 6612],
+        },
+        {
+          x: new Date(1538800200000),
+          y: [6612, 6615.13, 6605.09, 6612],
+        },
+        {
+          x: new Date(1538802000000),
+          y: [6612, 6624.12, 6608.43, 6622.95],
+        },
+        {
+          x: new Date(1538803800000),
+          y: [6623.91, 6623.91, 6615, 6615.67],
+        },
+        {
+          x: new Date(1538805600000),
+          y: [6618.69, 6618.74, 6610, 6610.4],
+        },
+        {
+          x: new Date(1538807400000),
+          y: [6611, 6622.78, 6610.4, 6614.9],
+        },
+        {
+          x: new Date(1538809200000),
+          y: [6614.9, 6626.2, 6613.33, 6623.45],
+        },
+        {
+          x: new Date(1538811000000),
+          y: [6623.48, 6627, 6618.38, 6620.35],
+        },
+        {
+          x: new Date(1538812800000),
+          y: [6619.43, 6620.35, 6610.05, 6615.53],
+        },
+        {
+          x: new Date(1538814600000),
+          y: [6615.53, 6617.93, 6610, 6615.19],
+        },
+        {
+          x: new Date(1538816400000),
+          y: [6615.19, 6621.6, 6608.2, 6620],
+        },
+        {
+          x: new Date(1538818200000),
+          y: [6619.54, 6625.17, 6614.15, 6620],
+        },
+        {
+          x: new Date(1538820000000),
+          y: [6620.33, 6634.15, 6617.24, 6624.61],
+        },
+        {
+          x: new Date(1538821800000),
+          y: [6625.95, 6626, 6611.66, 6617.58],
+        },
+        {
+          x: new Date(1538823600000),
+          y: [6619, 6625.97, 6595.27, 6598.86],
+        },
+        {
+          x: new Date(1538825400000),
+          y: [6598.86, 6598.88, 6570, 6587.16],
+        },
+        {
+          x: new Date(1538827200000),
+          y: [6588.86, 6600, 6580, 6593.4],
+        },
+        {
+          x: new Date(1538829000000),
+          y: [6593.99, 6598.89, 6585, 6587.81],
+        },
+        {
+          x: new Date(1538830800000),
+          y: [6587.81, 6592.73, 6567.14, 6578],
+        },
+        {
+          x: new Date(1538832600000),
+          y: [6578.35, 6581.72, 6567.39, 6579],
+        },
+        {
+          x: new Date(1538834400000),
+          y: [6579.38, 6580.92, 6566.77, 6575.96],
+        },
+        {
+          x: new Date(1538836200000),
+          y: [6575.96, 6589, 6571.77, 6588.92],
+        },
+        {
+          x: new Date(1538838000000),
+          y: [6588.92, 6594, 6577.55, 6589.22],
+        },
+        {
+          x: new Date(1538839800000),
+          y: [6589.3, 6598.89, 6589.1, 6596.08],
+        },
+        {
+          x: new Date(1538841600000),
+          y: [6597.5, 6600, 6588.39, 6596.25],
+        },
+        {
+          x: new Date(1538843400000),
+          y: [6598.03, 6600, 6588.73, 6595.97],
+        },
+        {
+          x: new Date(1538845200000),
+          y: [6595.97, 6602.01, 6588.17, 6602],
+        },
+        {
+          x: new Date(1538847000000),
+          y: [6602, 6607, 6596.51, 6599.95],
+        },
+        {
+          x: new Date(1538848800000),
+          y: [6600.63, 6601.21, 6590.39, 6591.02],
+        },
+        {
+          x: new Date(1538850600000),
+          y: [6591.02, 6603.08, 6591, 6591],
+        },
+        {
+          x: new Date(1538852400000),
+          y: [6591, 6601.32, 6585, 6592],
+        },
+        {
+          x: new Date(1538854200000),
+          y: [6593.13, 6596.01, 6590, 6593.34],
+        },
+        {
+          x: new Date(1538856000000),
+          y: [6593.34, 6604.76, 6582.63, 6593.86],
+        },
+        {
+          x: new Date(1538857800000),
+          y: [6593.86, 6604.28, 6586.57, 6600.01],
+        },
+        {
+          x: new Date(1538859600000),
+          y: [6601.81, 6603.21, 6592.78, 6596.25],
+        },
+        {
+          x: new Date(1538861400000),
+          y: [6596.25, 6604.2, 6590, 6602.99],
+        },
+        {
+          x: new Date(1538863200000),
+          y: [6602.99, 6606, 6584.99, 6587.81],
+        },
+        {
+          x: new Date(1538865000000),
+          y: [6587.81, 6595, 6583.27, 6591.96],
+        },
+        {
+          x: new Date(1538866800000),
+          y: [6591.97, 6596.07, 6585, 6588.39],
+        },
+        {
+          x: new Date(1538868600000),
+          y: [6587.6, 6598.21, 6587.6, 6594.27],
+        },
+        {
+          x: new Date(1538870400000),
+          y: [6596.44, 6601, 6590, 6596.55],
+        },
+        {
+          x: new Date(1538872200000),
+          y: [6598.91, 6605, 6596.61, 6600.02],
+        },
+        {
+          x: new Date(1538874000000),
+          y: [6600.55, 6605, 6589.14, 6593.01],
+        },
+        {
+          x: new Date(1538875800000),
+          y: [6593.15, 6605, 6592, 6603.06],
+        },
+        {
+          x: new Date(1538877600000),
+          y: [6603.07, 6604.5, 6599.09, 6603.89],
+        },
+        {
+          x: new Date(1538879400000),
+          y: [6604.44, 6604.44, 6600, 6603.5],
+        },
+        {
+          x: new Date(1538881200000),
+          y: [6603.5, 6603.99, 6597.5, 6603.86],
+        },
+        {
+          x: new Date(1538883000000),
+          y: [6603.85, 6605, 6600, 6604.07],
+        },
+        {
+          x: new Date(1538884800000),
+          y: [6604.98, 6606, 6604.07, 6606],
+        },
+      ],
+    },
+  ],
+  chart: {
+    height: 350,
+    type: "candlestick",
+  },
+  title: {
+    text: "CandleStick Chart - Category X-axis",
+    align: "left",
+  },
+  annotations: {
+    xaxis: [
+      {
+        x: "Oct 06 14:00",
+        borderColor: "#00E396",
+        label: {
+          borderColor: "#00E396",
+          style: {
+            fontSize: "12px",
+            color: "#fff",
+            background: "#00E396",
+          },
+          orientation: "horizontal",
+          offsetY: 7,
+          text: "Annotation Test",
+        },
+      },
+    ],
+  },
+  tooltip: {
+    enabled: true,
+  },
+  xaxis: {
+    type: "category",
+    labels: {
+      formatter: function (val) {
+        return dayjs(val).format("MMM DD HH:mm")
+      },
+    },
+  },
+  yaxis: {
+    tooltip: {
+      enabled: true,
+    },
+  },
+}
+
+var barOptions = {
+  series: [
+    {
+      name: "Net Profit",
+      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+    },
+    {
+      name: "Revenue",
+      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+    },
+    {
+      name: "Free Cash Flow",
+      data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+    },
+  ],
+  chart: {
+    type: "bar",
+    height: 350,
+  },
+  plotOptions: {
+    bar: {
+      horizontal: false,
+      columnWidth: "55%",
+      endingShape: "rounded",
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    show: true,
+    width: 2,
+    colors: ["transparent"],
+  },
+  xaxis: {
+    categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+  },
+  yaxis: {
+    title: {
+      text: "$ (thousands)",
+    },
+  },
+  fill: {
+    opacity: 1,
+  },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return "$ " + val + " thousands"
+      },
+    },
+  },
+}
+
+var radialGradientOptions = {
+  series: [75],
+  chart: {
+    height: 350,
+    type: "radialBar",
+    toolbar: {
+      show: true,
+    },
+  },
+  plotOptions: {
+    radialBar: {
+      startAngle: -135,
+      endAngle: 225,
+      hollow: {
+        margin: 0,
+        size: "70%",
+        background: "#fff",
+        image: undefined,
+        imageOffsetX: 0,
+        imageOffsetY: 0,
+        position: "front",
+        dropShadow: {
+          enabled: true,
+          top: 3,
+          left: 0,
+          blur: 4,
+          opacity: 0.24,
+        },
+      },
+      track: {
+        background: "#fff",
+        strokeWidth: "67%",
+        margin: 0, // margin is in pixels
+        dropShadow: {
+          enabled: true,
+          top: -3,
+          left: 0,
+          blur: 4,
+          opacity: 0.35,
+        },
+      },
+
+      dataLabels: {
+        show: true,
+        name: {
+          offsetY: -10,
+          show: true,
+          color: "#888",
+          fontSize: "17px",
+        },
+        value: {
+          formatter: function (val) {
+            return parseInt(val)
+          },
+          color: "#111",
+          fontSize: "36px",
+          show: true,
+        },
+      },
+    },
+  },
+  fill: {
+    type: "gradient",
+    gradient: {
+      shade: "dark",
+      type: "horizontal",
+      shadeIntensity: 0.5,
+      gradientToColors: ["#ABE5A1"],
+      inverseColors: true,
+      opacityFrom: 1,
+      opacityTo: 1,
+      stops: [0, 100],
+    },
+  },
+  stroke: {
+    lineCap: "round",
+  },
+  labels: ["Percent"],
+}
+var areaOptions = {
+  series: [
+    {
+      name: "series1",
+      data: [31, 40, 28, 51, 42, 109, 100],
+    },
+    {
+      name: "series2",
+      data: [11, 32, 45, 32, 34, 52, 41],
+    },
+  ],
+  chart: {
+    height: 350,
+    type: "area",
+  },
+  dataLabels: {
+    enabled: false,
+  },
+  stroke: {
+    curve: "smooth",
+  },
+  xaxis: {
+    type: "datetime",
+    categories: [
+      "2018-09-19T00:00:00.000Z",
+      "2018-09-19T01:30:00.000Z",
+      "2018-09-19T02:30:00.000Z",
+      "2018-09-19T03:30:00.000Z",
+      "2018-09-19T04:30:00.000Z",
+      "2018-09-19T05:30:00.000Z",
+      "2018-09-19T06:30:00.000Z",
+    ],
+  },
+  tooltip: {
+    x: {
+      format: "dd/MM/yy HH:mm",
+    },
+  },
+}
+var radialBarOptions = {
+  series: [44, 55, 67, 83],
+  chart: {
+    height: 350,
+    type: "radialBar",
+  },
+  plotOptions: {
+    radialBar: {
+      dataLabels: {
+        name: {
+          fontSize: "22px",
+        },
+        value: {
+          fontSize: "16px",
+        },
+        total: {
+          show: true,
+          label: "Total",
+          formatter: function (w) {
+            // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
+            return 249
+          },
+        },
+      },
+    },
+  },
+  labels: ["Apples", "Oranges", "Bananas", "Berries"],
+}
+var bar = new ApexCharts(document.querySelector("#bar"), barOptions)
+var line = new ApexCharts(document.querySelector("#line"), lineOptions)
+var candle = new ApexCharts(document.querySelector("#candle"), candleOptions)
+var radialGradient = new ApexCharts(
+  document.querySelector("#radialGradient"),
+  radialGradientOptions
+)
+var area = new ApexCharts(document.querySelector("#area"), areaOptions)
+
+area.render()
+radialGradient.render()
+candle.render()
+bar.render()
+line.render()
--- a/public/assets/js/pages/ui-chartjs.js
+++ b/public/assets/js/pages/ui-chartjs.js
@@ -0,0 +1,445 @@
+var chartColors = {
+  red: "rgb(255, 99, 132)",
+  orange: "rgb(255, 159, 64)",
+  yellow: "rgb(255, 205, 86)",
+  green: "rgb(75, 192, 192)",
+  info: "#41B1F9",
+  blue: "#3245D1",
+  purple: "rgb(153, 102, 255)",
+  grey: "#EBEFF6",
+}
+
+var config1 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Balance",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config2 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Revenue",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 800, 300, 400, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config3 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Orders",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 200, 10, 540, 723],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config4 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First dataset",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 5, 23],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+
+var ctxBar = document.getElementById("bar").getContext("2d")
+var myBar = new Chart(ctxBar, {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    datasets: [
+      {
+        label: "Students",
+        backgroundColor: [
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.info,
+          chartColors.blue,
+          chartColors.grey,
+        ],
+        data: [5, 10, 30, 40, 35, 55, 15],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    barRoundness: 1,
+    title: {
+      display: true,
+      text: "Students in 2020",
+    },
+    legend: {
+      display: false,
+    },
+    scales: {
+      yAxes: [
+        {
+          ticks: {
+            beginAtZero: true,
+            suggestedMax: 40 + 20,
+            padding: 10,
+          },
+          gridLines: {
+            drawBorder: false,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+        },
+      ],
+    },
+  },
+})
+var line = document.getElementById("line").getContext("2d")
+var gradient = line.createLinearGradient(0, 0, 0, 400)
+gradient.addColorStop(0, "rgba(50, 69, 209,1)")
+gradient.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var gradient2 = line.createLinearGradient(0, 0, 0, 400)
+gradient2.addColorStop(0, "rgba(255, 91, 92,1)")
+gradient2.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var myline = new Chart(line, {
+  type: "line",
+  data: {
+    labels: [
+      "16-07-2018",
+      "17-07-2018",
+      "18-07-2018",
+      "19-07-2018",
+      "20-07-2018",
+      "21-07-2018",
+      "22-07-2018",
+      "23-07-2018",
+      "24-07-2018",
+      "25-07-2018",
+    ],
+    datasets: [
+      {
+        label: "Balance",
+        data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45],
+        backgroundColor: "rgba(50, 69, 209,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(63,82,227,1)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+      {
+        label: "Balance",
+        data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53],
+        backgroundColor: "rgba(253, 183, 90,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(253, 183, 90,.6)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    layout: {
+      padding: {
+        top: 10,
+      },
+    },
+    tooltips: {
+      intersect: false,
+      titleFontFamily: "Helvetica",
+      titleMarginBottom: 10,
+      xPadding: 10,
+      yPadding: 10,
+      cornerRadius: 3,
+    },
+    legend: {
+      display: true,
+    },
+    scales: {
+      yAxes: [
+        {
+          gridLines: {
+            display: true,
+            drawBorder: true,
+          },
+          ticks: {
+            display: true,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+})
+
+// let ctx1 = document.getElementById("canvas1").getContext("2d");
+// let ctx2 = document.getElementById("canvas2").getContext("2d");
+// let ctx3 = document.getElementById("canvas3").getContext("2d");
+// let ctx4 = document.getElementById("canvas4").getContext("2d");
+// var lineChart1 = new Chart(ctx1, config1);
+// var lineChart2 = new Chart(ctx2, config2);
+// var lineChart3 = new Chart(ctx3, config3);
+// var lineChart4 = new Chart(ctx4, config4);
--- a/public/assets/js/pages/ui-todolist.js
+++ b/public/assets/js/pages/ui-todolist.js
@@ -0,0 +1,5 @@
+dragula([document.getElementById("widget-todo-list")], {
+  moves: function (e, a, t) {
+    return t.classList.contains("cursor-move")
+  },
+})
--- a/public/assets/js/parsley.min.js
+++ b/public/assets/js/parsley.min.js
--- a/public/assets/js/popper.min.js
+++ b/public/assets/js/popper.min.js
				`@@ -0,0 +1 @@`
				`let jquery_datatable = $("#table1").DataTable()`