Merge branch 'production' of https://git.abbauf.com/Magang-2025/Kasir into production

resources/js/components/Footer.vue

@@ -0,0 +1,31 @@
+<template>
+    <footer class="bg-[#f9f3eb] border-t border-gray-200 py-4 px-6 flex flex-col md:flex-row items-center justify-between">
+      <!-- Left: Logo -->
+      <div class="flex items-center gap-2">
+        <img :src="logo" alt="Logo" class="h-10">
+      </div>
+
+      <!-- Center: Copyright -->
+      <div class="text-sm text-[#0f1d4a] font-medium text-center">
+        Abbauf Tech © 2025 Semua hak dilindungi
+      </div>
+
+      <!-- Right: Social Icons -->
+      <div class="flex items-center gap-4 text-[#0f1d4a] mt-2 md:mt-0">
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-facebook"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-twitter"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-instagram"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-youtube"></i></a>
+        <a href="#" class="hover:text-sky-600"><i class="fab fa-vk"></i></a>
+      </div>
+    </footer>
+  </template>
+
+  <script setup>
+  import logo from '@/../images/logo.png'
+  </script>
+
+  <style>
+  /* Pakai Font Awesome untuk ikon */
+  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+  </style>

resources/js/components/Header.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { ref } from "vue";
+import logo from "../../images/logo.png";
+
 
 const isOpen = ref(false);
 
@@ -25,8 +27,14 @@ const toggleDropdown = () => {
   <div class="h-25 shadow-lg shadow-D rounded-b-md">
     <div class="bg-D h-5 rounded-b-md shadow-lg">
       <div class="h-15"></div>
+      <div class="relative">
           <div class="w-full px-50 flex justify-between items-center h-5 relative">
+            <div class="absolute left-[50%]">
+                <img :src="logo" alt="Logo" class="h-12 w-auto" />
+            </div>
 
+            <!-- 🔹 LEFT MENU -->
+            <div class="flex items-center gap-10">
               <!-- Dropdown khusus "Manajemen Produk" -->
               <div class="relative">
                 <button
@@ -55,16 +63,33 @@ const toggleDropdown = () => {
                 </div>
               </div>
 
-        <!-- menu lain -->
+              <!-- Menu Kasir -->
               <router-link
-          v-for="item in items"
+                :to="items[0].route"
-          :key="item.label"
-          :to="item.route"
                 class="text-center text-lg text-D hover:underline cursor-pointer"
               >
-          {{ item.label }}
+                {{ items[0].label }}
               </router-link>
             </div>
+
+            <!-- 🔹 RIGHT MENU -->
+            <div class="flex items-center gap-8">
+              <router-link
+                :to="items[1].route"
+                class="text-center text-lg text-D hover:underline cursor-pointer"
+              >
+                {{ items[1].label }}
+              </router-link>
+              <router-link
+                :to="items[2].route"
+                class="text-center text-lg text-D hover:underline cursor-pointer"
+              >
+                {{ items[2].label }}
+              </router-link>
+            </div>
+
+          </div>
+      </div>
     </div>
   </div>
 </template>

resources/js/layouts/mainLayout.vue

@@ -1,10 +1,15 @@
 <template>
+    <div  class="relative min-h-screen max-w-screen">
         <Header />
         <div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
             <slot />
         </div>
+        <Footer class="absolute bottom-0 w-full" />
+
+    </div>
 </template>
 
 <script setup>
 import Header from '../components/Header.vue'
+import Footer from '../components/Footer.vue'
 </script>