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

resources/js/components/StrukOverlay.vue

@@ -52,17 +52,16 @@
         <!-- Nomor Transaksi -->
         <p class="mt-1 text-sm">TRS-XXX-XXX</p>
 
-        <!-- Table Barang -->
+       <table class="w-full border-D mt-0 text-sm table-fixed">
-        <table class="w-full border-D mt-0 text-sm">
   <thead>
     <tr class="border-b border-D">
-              <th class="w-32 py-2 border-r border-D">Item</th>
+      <th class="w-[260px] py-2 border-r border-D">Item</th>
-              <th class="w-32 py-2 border-r border-D">Posisi</th>
+      <th class="w-[70px] border-r border-D">Posisi</th>
-              <th class="w-20 border-r border-D">Berat</th>
+      <th class="w-[60px] border-r border-D">Berat</th>
-              <th class="w-20 border-r border-D">Kadar</th>
+      <th class="w-[60px] border-r border-D">Kadar</th>
-              <th class="w-32 border-r border-D">Harga Satuan</th>
+      <th class="w-[140px] border-r border-D">Harga Satuan</th>
-              <th class="w-20 border-r border-D">Jumlah</th>
+      <th class="w-[60px] border-r border-D">Jumlah</th>
-              <th class="w-32">Total Harga</th>
+      <th class="w-[140px]">Total Harga</th>
     </tr>
   </thead>
   <tbody>
@@ -94,25 +93,19 @@
       <td>Rp3.000.000</td>
     </tr>
 
+    <!-- Baris Ongkos + Total -->
     <tr class="align-top">
       <td colspan="2" rowspan="2" class="p-2 text-left align-top">
         <p class="font-semibold">PERHATIAN</p>
         <ol class="list-decimal ml-4 text-xs space-y-1">
           <li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
-                  <li>
+          <li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin, barang rusak lain harga.</li>
-                    Barang yang dikembalikan menurut harga pasaran dan dipotong
+          <li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
-                    ongkos bikin, barang rusak lain harga.
+          <li>Surat ini harap dibawa pada saat menjual kembali.</li>
-                  </li>
-                  <li>
-                    Barang yang sudah dibeli berarti sudah diperiksa dan
-                    disetujui.
-                  </li>
-                  <li>Surat ini harus dibawa pada saat menjual kembali.</li>
         </ol>
       </td>
 
-
+      <td colspan="2" rowspan="2" class="p-2 text-center align-top">
-              <td colspan="3" rowspan="2" class="p-2 text-center align-top">
         <div class="flex flex-col items-center justify-center h-full">
           <p><strong>Sales</strong></p>
           <inputSelect
@@ -121,13 +114,13 @@
                 { value: 'Timothy', label: 'Timothy' },
                 { value: 'Iwan', label: 'Iwan' }
             ]"
-                    class="mt-16 text-sm rounded bg-B text-center cursor-pointer !w-[160px]"
+            class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left"
             />
+
         </div>
       </td>
 
-
+      <td colspan="2"  class="p-2 text-right text-sm font-semibold align-top border-r">
-              <td class="p-2 text-right text-sm font-semibold align-top border-r">
         <div class="space-y-2">
           <p>Ongkos bikin</p>
           <p class="text-red-500 text-xs">diluar harga jual</p>
@@ -135,7 +128,6 @@
         </div>
       </td>
 
-
       <td class="p-2 text-sm align-top">
         <div class="space-y-2">
           <div class="flex items-center">
@@ -152,21 +144,27 @@
       </td>
     </tr>
 
-
+    <!-- Baris Tombol -->
     <tr>
+      <td></td>
+      <td></td>
       <td class="p-2 text-center">
+        <div class="flex gap-2">
           <button class="bg-gray-400 text-white px-6 py-2 rounded w-full">
             Batal
           </button>
-              </td>
-              <td class="p-2 text-center">
           <button class="bg-C text-white px-6 py-2 rounded w-full">
             Simpan
           </button>
+        </div>
       </td>
     </tr>
   </tbody>
-        </table>
+</table>
+
+
+
+
       </div>
 
       <!-- Pesan bawah -->
@@ -179,6 +177,8 @@
   </div>
 </template>
 
+
+
 <script setup>
 import { ref } from 'vue'
 import logo from '@/../images/logo.png'

resources/js/pages/Produk.vue

@@ -20,23 +20,30 @@
             <!-- Judul -->
             <p class="font-serif italic text-[25px] text-D">PRODUK</p>
 
-            <!-- Filter -->
+            <!-- Wrapper -->
-            <div
+            <div class="mt-3">
-                class="mt-3 flex flex-col md:flex-row md:items-center md:justify-between gap-3"
+                <!-- Mobile Layout -->
-            >
+                <div class="flex flex-col gap-3 sm:hidden">
-                <!-- Dropdown Kategori -->
+                    <!-- Search -->
+                    <div class="w-full">
+                        <searchbar
+                            v-model:search="searchQuery"
+                            class="searchbar-mobile"
+                        />
+                    </div>
+
+                    <!-- Filter + Tombol -->
+                    <div class="flex flex-row justify-between items-center">
+                        <!-- Filter Kategori -->
+                        <div class="w-40 shrink-0">
                             <InputSelect
                                 v-model="selectedCategory"
                                 :options="kategori"
-                    class="w-full md:w-48"
+                                class="w-full"
                             />
-
-                <!-- Search -->
-                <searchbar v-model:search="searchQuery" class="flex-1" />
                         </div>
 
                         <!-- Tombol Tambah Produk -->
-            <div class="mt-3 flex justify-end">
                         <router-link
                             to="/produk/baru"
                             class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
@@ -44,6 +51,35 @@
                             Tambah Produk
                         </router-link>
                     </div>
+                </div>
+
+                <!-- Desktop Layout -->
+                <div class="hidden sm:flex flex-row gap-3 items-start">
+                    <!-- Filter -->
+                    <div class="w-40 sm:w-48 shrink-0">
+                        <InputSelect
+                            v-model="selectedCategory"
+                            :options="kategori"
+                            class="w-full"
+                        />
+                    </div>
+
+                    <!-- Search -->
+                    <div class="flex-1 mt-[2px]">
+                        <searchbar v-model:search="searchQuery" class="w-full" />
+                    </div>
+                </div>
+
+                <!-- Tombol Tambah Produk (desktop) -->
+                <div class="hidden sm:flex justify-end mt-3">
+                    <router-link
+                        to="/produk/baru"
+                        class="bg-C text-[#0a1a3c] px-4 py-2 rounded-md shadow hover:bg-C transition"
+                    >
+                        Tambah Produk
+                    </router-link>
+                </div>
+            </div>
 
             <!-- Grid Produk -->
             <div
@@ -297,3 +333,15 @@ async function deleteProduk() {
     }
 }
 </script>
+
+<style scoped>
+/* 🔥 Tambahan agar searchbar mobile full */
+.searchbar-mobile:deep(div) {
+  width: 100% !important;
+  justify-content: flex-start !important;
+}
+
+.searchbar-mobile:deep(input) {
+  width: 100% !important;
+}
+</style>