fix bugs and add log viewer package

resources/js/componentss/features/sliders/Slider.vue

@@ -2,9 +2,10 @@
   <div v-if="loading" class="relative z-0 min-h-[calc(100vh)] items-center">
     <div class="group block rounded-xl overflow-hidden animate-pulse min-h-[calc(100vh)] bg-gray-200"></div>
   </div>
-  <div v-else>
+
+  <transition v-else name="fade">
     <SliderBody :slides="slider.slides" />
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -12,40 +13,46 @@ import axios from "axios";
 import SliderBody from "@/componentss/features/sliders/components/SliderBody.vue";
 
 export default {
-	name: 'Slider',
+  name: 'Slider',
   components: {SliderBody},
-	props: {
+  props: {
     sliderId: {
       type: String,
       required: true,
     }
-	},
-	data() {
-		return {
+  },
+  data() {
+    return {
       loading: true,
       slider: null,
     }
-	},
-	methods: {
+  },
+  methods: {
     getSlider(id) {
       axios.get(route('client.widget.slider.show', id))
           .then(response => {
             this.slider = response.data;
-            this.loading = false; // Установить состояние загрузки в false
+            this.loading = false;
           })
           .catch(error => {
             console.error('Ошибка:', error);
           });
     },
-
   },
-	mounted() {
+  mounted() {
     const id = this.sliderId
     this.getSlider(id)
-	},
+  },
 }
 </script>
 
 <style>
+/* Анимация появления */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
 
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
 </style>

resources/js/componentss/features/sliders/components/SliderBody.vue

@@ -64,21 +64,26 @@
         <div class="">
           <div class="flex space-x-3 items-center justify-between">
             <button @click="prev" class="bg-gray-200 w-8 h-8 hover:bg-gray-300 text-gray-800 font-bold rounded-full">
-              <svg class="w-4 h-4 mx-auto my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-4 h-4 mx-auto my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                   xmlns="http://www.w3.org/2000/svg">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
               </svg>
             </button>
 
             <div class="flex space-x-3 w-[200px] items-center font-semibold text-xl text-white">
               <span>{{ currentIndex + 1 }}</span>
-              <div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-                <div class="flex flex-col justify-center rounded-full overflow-hidden bg-secondary text-xs text-white text-center whitespace-nowrap transition-all duration-500 ease-in-out" :style="{ 'width': `${progressBarStep}%` }"></div>
+              <div class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden" role="progressbar"
+                   aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                <div
+                    class="flex flex-col justify-center rounded-full overflow-hidden bg-secondary text-xs text-white text-center whitespace-nowrap transition-all duration-500 ease-in-out"
+                    :style="{ 'width': `${progressBarStep}%` }"></div>
               </div>
               <span>{{ slides.length }}</span>
             </div>
 
             <button @click="next" class="bg-gray-200 w-8 h-8 hover:bg-gray-300 text-gray-800 font-bold rounded-full">
-              <svg class="w-4 h-4 mx-auto my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-4 h-4 mx-auto my-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                   xmlns="http://www.w3.org/2000/svg">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19l7-7-7-7"></path>
               </svg>
             </button>
@@ -90,7 +95,7 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import {mapActions} from "vuex";
 import axios from "axios";
 
 export default {