fix styling opnames and mutations same with stock audit

public/js/warehouse_management/opnames/detail.js

@@ -1,32 +1,2 @@
-/*
+(()=>{$.ajaxSetup({headers:{"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr("content")}});var a=$("#opname-detail-table").data("url");$("#opname-detail-table").DataTable({processing:!0,serverSide:!0,ajax:a,columns:[{data:"opname_date",name:"opname_date"},{data:"user_name",name:"user.name"},{data:"product_name",name:"product.name"},{data:"system_stock",name:"system_stock"},{data:"physical_stock",name:"physical_stock"},{data:"difference",name:"difference"}]})})();
- * ATTENTION: An "eval-source-map" devtool has been used.
+//# sourceMappingURL=detail.js.map
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-/******/ (() => { // webpackBootstrap
-/******/ 	var __webpack_modules__ = ({
-
-/***/ "./resources/js/warehouse_management/opnames/detail.js":
-/*!*************************************************************!*\
-  !*** ./resources/js/warehouse_management/opnames/detail.js ***!
-  \*************************************************************/
-/***/ (() => {
-
-eval("$.ajaxSetup({\n  headers: {\n    \"X-CSRF-TOKEN\": $('meta[name=\"csrf-token\"]').attr(\"content\")\n  }\n});\nvar tableContainer = $(\"#opname-detail-table\");\nvar url = tableContainer.data(\"url\");\nvar table = $(\"#opname-detail-table\").DataTable({\n  processing: true,\n  serverSide: true,\n  ajax: url,\n  columns: [{\n    data: \"opname_date\",\n    name: \"opname_date\"\n  }, {\n    data: \"user_name\",\n    name: \"user.name\"\n  }, {\n    data: \"product_name\",\n    name: \"product.name\"\n  }, {\n    data: \"system_stock\",\n    name: \"system_stock\"\n  }, {\n    data: \"physical_stock\",\n    name: \"physical_stock\"\n  }, {\n    data: \"difference\",\n    name: \"difference\"\n  }]\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyIkIiwiYWpheFNldHVwIiwiaGVhZGVycyIsImF0dHIiLCJ0YWJsZUNvbnRhaW5lciIsInVybCIsImRhdGEiLCJ0YWJsZSIsIkRhdGFUYWJsZSIsInByb2Nlc3NpbmciLCJzZXJ2ZXJTaWRlIiwiYWpheCIsImNvbHVtbnMiLCJuYW1lIl0sInNvdXJjZXMiOlsid2VicGFjazovLy8uL3Jlc291cmNlcy9qcy93YXJlaG91c2VfbWFuYWdlbWVudC9vcG5hbWVzL2RldGFpbC5qcz9mMzY3Il0sInNvdXJjZXNDb250ZW50IjpbIiQuYWpheFNldHVwKHtcbiAgICBoZWFkZXJzOiB7XG4gICAgICAgIFwiWC1DU1JGLVRPS0VOXCI6ICQoJ21ldGFbbmFtZT1cImNzcmYtdG9rZW5cIl0nKS5hdHRyKFwiY29udGVudFwiKSxcbiAgICB9LFxufSk7XG5sZXQgdGFibGVDb250YWluZXIgPSAkKFwiI29wbmFtZS1kZXRhaWwtdGFibGVcIik7XG5sZXQgdXJsID0gdGFibGVDb250YWluZXIuZGF0YShcInVybFwiKTtcbmxldCB0YWJsZSA9ICQoXCIjb3BuYW1lLWRldGFpbC10YWJsZVwiKS5EYXRhVGFibGUoe1xuICAgIHByb2Nlc3Npbmc6IHRydWUsXG4gICAgc2VydmVyU2lkZTogdHJ1ZSxcbiAgICBhamF4OiB1cmwsXG4gICAgY29sdW1uczogW1xuICAgICAgICB7IGRhdGE6IFwib3BuYW1lX2RhdGVcIiwgbmFtZTogXCJvcG5hbWVfZGF0ZVwiIH0sXG4gICAgICAgIHsgZGF0YTogXCJ1c2VyX25hbWVcIiwgbmFtZTogXCJ1c2VyLm5hbWVcIiB9LFxuICAgICAgICB7IGRhdGE6IFwicHJvZHVjdF9uYW1lXCIsIG5hbWU6IFwicHJvZHVjdC5uYW1lXCIgfSxcbiAgICAgICAgeyBkYXRhOiBcInN5c3RlbV9zdG9ja1wiLCBuYW1lOiBcInN5c3RlbV9zdG9ja1wiIH0sXG4gICAgICAgIHsgZGF0YTogXCJwaHlzaWNhbF9zdG9ja1wiLCBuYW1lOiBcInBoeXNpY2FsX3N0b2NrXCIgfSxcbiAgICAgICAgeyBkYXRhOiBcImRpZmZlcmVuY2VcIiwgbmFtZTogXCJkaWZmZXJlbmNlXCIgfSxcbiAgICBdLFxufSk7XG4iXSwibWFwcGluZ3MiOiJBQUFBQSxDQUFDLENBQUNDLFNBQUYsQ0FBWTtFQUNSQyxPQUFPLEVBQUU7SUFDTCxnQkFBZ0JGLENBQUMsQ0FBQyx5QkFBRCxDQUFELENBQTZCRyxJQUE3QixDQUFrQyxTQUFsQztFQURYO0FBREQsQ0FBWjtBQUtBLElBQUlDLGNBQWMsR0FBR0osQ0FBQyxDQUFDLHNCQUFELENBQXRCO0FBQ0EsSUFBSUssR0FBRyxHQUFHRCxjQUFjLENBQUNFLElBQWYsQ0FBb0IsS0FBcEIsQ0FBVjtBQUNBLElBQUlDLEtBQUssR0FBR1AsQ0FBQyxDQUFDLHNCQUFELENBQUQsQ0FBMEJRLFNBQTFCLENBQW9DO0VBQzVDQyxVQUFVLEVBQUUsSUFEZ0M7RUFFNUNDLFVBQVUsRUFBRSxJQUZnQztFQUc1Q0MsSUFBSSxFQUFFTixHQUhzQztFQUk1Q08sT0FBTyxFQUFFLENBQ0w7SUFBRU4sSUFBSSxFQUFFLGFBQVI7SUFBdUJPLElBQUksRUFBRTtFQUE3QixDQURLLEVBRUw7SUFBRVAsSUFBSSxFQUFFLFdBQVI7SUFBcUJPLElBQUksRUFBRTtFQUEzQixDQUZLLEVBR0w7SUFBRVAsSUFBSSxFQUFFLGNBQVI7SUFBd0JPLElBQUksRUFBRTtFQUE5QixDQUhLLEVBSUw7SUFBRVAsSUFBSSxFQUFFLGNBQVI7SUFBd0JPLElBQUksRUFBRTtFQUE5QixDQUpLLEVBS0w7SUFBRVAsSUFBSSxFQUFFLGdCQUFSO0lBQTBCTyxJQUFJLEVBQUU7RUFBaEMsQ0FMSyxFQU1MO0lBQUVQLElBQUksRUFBRSxZQUFSO0lBQXNCTyxJQUFJLEVBQUU7RUFBNUIsQ0FOSztBQUptQyxDQUFwQyxDQUFaIiwiZmlsZSI6Ii4vcmVzb3VyY2VzL2pzL3dhcmVob3VzZV9tYW5hZ2VtZW50L29wbmFtZXMvZGV0YWlsLmpzIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./resources/js/warehouse_management/opnames/detail.js\n");
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval-source-map devtool is used.
-/******/ 	var __webpack_exports__ = {};
-/******/ 	__webpack_modules__["./resources/js/warehouse_management/opnames/detail.js"]();
-/******/ 	
-/******/ })()
-;

resources/js/warehouse_management/mutations/index.js

@@ -20,14 +20,12 @@ $(document).ready(function () {
 function initializeSelect2() {
     console.log("Initializing Select2...");
 
-    // Initialize Select2 for dealer filter
+    // Initialize Select2 for dealer filter - same as stock audit
     if (typeof $.fn.select2 !== "undefined") {
         $("#dealer_filter").select2({
-            placeholder: "Pilih Dealer",
+            placeholder: "Pilih...",
-            allowClear: false,
+            allowClear: true,
             width: "100%",
-            dropdownAutoWidth: true,
-            minimumResultsForSearch: 5, // Show search box if more than 5 options
         });
     } else {
         console.warn("Select2 not available, using regular select");
@@ -37,39 +35,34 @@ function initializeSelect2() {
 function initializeDatepickers() {
     console.log("Initializing datepickers...");
 
-    // Initialize start date picker
+    // Initialize start date picker with bootstrap datepicker
-    $("#date_from").datepicker({
+    $("#date_from")
-        dateFormat: "yy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        onSelect: function (selectedDate) {
+            language: "id",
-            console.log("Start date selected:", selectedDate);
+            clearBtn: true,
-            enableEndDatePicker(selectedDate);
+            container: "body",
-            $(this).datepicker("hide");
+            endDate: new Date(), // Don't allow future dates
-        },
+        })
-        onClose: function (selectedDate) {
+        .on("changeDate", function (e) {
-            if (selectedDate) {
+            console.log("Start date selected:", e.format());
-                console.log("Start date closed with value:", selectedDate);
+            enableEndDatePicker(e.format());
-                enableEndDatePicker(selectedDate);
+        })
-            }
+        .on("clearDate", function (e) {
-        },
+            console.log("Start date cleared");
-    });
+            resetEndDatePicker();
+        });
 
-    // Initialize end date picker (initially disabled)
+    // Initialize end date picker with bootstrap datepicker
     initializeEndDatePicker();
 
     // Initially disable end date input
     $("#date_to").prop("disabled", true);
 
-    // Add calendar icons
+    // Setup change event handlers
-    addCalendarIcons();
-
-    // Setup calendar icon click handlers
-    setupIconClickHandlers();
-
-    // Backup: Listen to change event
     setupChangeEventHandlers();
 }
 
@@ -80,70 +73,64 @@ function enableEndDatePicker(startDate) {
     $("#date_to").prop("disabled", false);
 
     // Destroy existing datepicker
-    $("#date_to").datepicker("destroy");
+    $("#date_to").datepicker("remove");
 
-    // Re-initialize with new minDate
+    // Re-initialize with new startDate constraint using bootstrap datepicker
-    $("#date_to").datepicker({
+    $("#date_to")
-        dateFormat: "yy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        minDate: new Date(startDate), // Convert to Date object for proper comparison
+            language: "id",
-        onSelect: function (selectedDate) {
+            clearBtn: true,
-            console.log("End date selected:", selectedDate);
+            container: "body",
-            $(this).datepicker("hide");
+            startDate: startDate, // Set minimum date to selected start date
-        },
+            endDate: new Date(), // Don't allow future dates
-    });
+        })
+        .on("changeDate", function (e) {
+            console.log("End date selected:", e.format());
+        })
+        .on("clearDate", function (e) {
+            console.log("End date cleared");
+        });
 
-    console.log("End date picker enabled with minDate:", startDate);
+    console.log("End date picker enabled with startDate:", startDate);
 }
 
 function initializeEndDatePicker() {
-    $("#date_to").datepicker({
+    $("#date_to")
-        dateFormat: "yy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        onSelect: function (selectedDate) {
+            language: "id",
-            console.log("End date selected:", selectedDate);
+            clearBtn: true,
-            $(this).datepicker("hide");
+            container: "body",
-        },
+            endDate: new Date(), // Don't allow future dates
-    });
+        })
+        .on("changeDate", function (e) {
+            console.log("End date selected:", e.format());
+        })
+        .on("clearDate", function (e) {
+            console.log("End date cleared");
+        });
 }
 
-function addCalendarIcons() {
+// Calendar icons and click handlers removed since bootstrap datepicker handles these automatically
-    // Remove any existing icons first
-    $(".input-icon").remove();
-
-    // Add calendar icons with just the classes, no inline styles
-    const iconHtml = '<i class="fa fa-calendar input-icon"></i>';
-
-    $("#date_from").after(iconHtml);
-    $("#date_to").after(iconHtml);
-
-    // Ensure parent containers have relative positioning
-    $("#date_from, #date_to")
-        .closest(".form-group")
-        .css("position", "relative");
-}
-
-function setupIconClickHandlers() {
-    $(document).on("click", ".input-icon", function () {
-        const input = $(this).prev("input");
-        if (!input.prop("disabled")) {
-            input.datepicker("show");
-        }
-    });
-}
 
 function setupChangeEventHandlers() {
+    // For bootstrap datepicker, we already handle events in the datepicker initialization
+    // But we can add additional handling if needed
     $("#date_from").on("change", function () {
         const selectedDate = $(this).val();
         if (selectedDate) {
             console.log("Start date change event:", selectedDate);
             enableEndDatePicker(selectedDate);
+        } else {
+            console.log("Start date cleared via change event");
+            resetEndDatePicker();
         }
     });
 }
@@ -249,10 +236,12 @@ function setupFilterHandlers(table) {
     $("#kt_reset").on("click", function () {
         console.log("Reset button clicked");
 
-        // Clear all filters
+        // Reset select2 elements properly - same as stock audit
-        $("#dealer_filter").val("").trigger("change"); // Reset Select2
+        $("#dealer_filter").val(null).trigger("change.select2");
-        $("#date_from").val("");
+
-        $("#date_to").val("");
+        // Clear datepicker values using bootstrap datepicker method
+        $("#date_from").datepicker("clearDates");
+        $("#date_to").datepicker("clearDates");
 
         // Reset end date picker and disable it
         resetEndDatePicker();
@@ -278,10 +267,13 @@ function setupFilterHandlers(table) {
 }
 
 function resetEndDatePicker() {
-    // Destroy existing datepicker
+    // Remove existing datepicker
-    $("#date_to").datepicker("destroy");
+    $("#date_to").datepicker("remove");
 
-    // Re-initialize without minDate constraint
+    // Clear the input value
+    $("#date_to").val("");
+
+    // Re-initialize without startDate constraint
     initializeEndDatePicker();
 
     // Disable the input

resources/js/warehouse_management/opnames/index.js

@@ -18,18 +18,16 @@ $(document).ready(function () {
 });
 
 /**
- * Initialize Select2 for dealer filter
+ * Initialize Select2 for dealer filter - same as stock audit
  */
 function initializeSelect2() {
     console.log("Initializing Select2...");
 
     if (typeof $.fn.select2 !== "undefined") {
         $("#dealer_filter").select2({
-            placeholder: "Pilih Dealer",
+            placeholder: "Pilih...",
-            allowClear: false,
+            allowClear: true,
             width: "100%",
-            dropdownAutoWidth: true,
-            minimumResultsForSearch: 5, // Show search box if more than 5 options
         });
     } else {
         console.warn("Select2 not available, using regular select");
@@ -37,54 +35,44 @@ function initializeSelect2() {
 }
 
 /**
- * Initialize date pickers with validation
+ * Initialize date pickers with bootstrap datepicker - same as stock audit
  */
 function initializeDatepickers() {
     console.log("Initializing datepickers...");
 
-    // Initialize start date picker
+    // Initialize start date picker with bootstrap datepicker
-    $("#date_from .datepicker").datepicker({
+    $("#date_from")
-        dateFormat: "yyyy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        autoclose: true,
+            language: "id",
-        todayHighlight: true,
+            clearBtn: true,
-        orientation: "bottom auto",
+            container: "body",
-        language: "id",
+            endDate: new Date(), // Don't allow future dates
-        clearBtn: true,
+        })
-        onSelect: function (selectedDate) {
+        .on("changeDate", function (e) {
-            console.log("Start date selected:", selectedDate);
+            console.log("Start date selected:", e.format());
-            enableEndDatePicker(selectedDate);
+            enableEndDatePicker(e.format());
-            $(this).datepicker("hide");
+        })
-        },
+        .on("clearDate", function (e) {
-        onClose: function (selectedDate) {
+            console.log("Start date cleared");
-            if (selectedDate) {
+            resetEndDatePicker();
-                console.log("Start date closed with value:", selectedDate);
+        });
-                enableEndDatePicker(selectedDate);
-            }
-        },
-    });
 
-    // Initialize end date picker (initially disabled)
+    // Initialize end date picker with bootstrap datepicker
     initializeEndDatePicker();
 
     // Initially disable end date input
     $("#date_to").prop("disabled", true);
 
-    // Add calendar icons
-    addCalendarIcons();
-
-    // Setup calendar icon click handlers
-    setupIconClickHandlers();
-
     // Setup change event handlers as backup
     setupChangeEventHandlers();
 }
 
 /**
- * Enable end date picker with minimum date constraint
+ * Enable end date picker with minimum date constraint using bootstrap datepicker
  */
 function enableEndDatePicker(startDate) {
     console.log("Enabling end date picker with min date:", startDate);
@@ -92,83 +80,71 @@ function enableEndDatePicker(startDate) {
     // Enable the input
     $("#date_to").prop("disabled", false);
 
-    // Destroy existing datepicker
+    // Remove existing datepicker
-    $("#date_to").datepicker("destroy");
+    $("#date_to").datepicker("remove");
 
-    // Re-initialize with new minDate
+    // Re-initialize with new startDate constraint using bootstrap datepicker
-    $("#date_to .datepicker").datepicker({
+    $("#date_to")
-        dateFormat: "yy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        minDate: new Date(startDate), // Convert to Date object for proper comparison
+            language: "id",
-        onSelect: function (selectedDate) {
+            clearBtn: true,
-            console.log("End date selected:", selectedDate);
+            container: "body",
-            $(this).datepicker("hide");
+            startDate: startDate, // Set minimum date to selected start date
-        },
+            endDate: new Date(), // Don't allow future dates
-    });
+        })
+        .on("changeDate", function (e) {
+            console.log("End date selected:", e.format());
+        })
+        .on("clearDate", function (e) {
+            console.log("End date cleared");
+        });
 
-    console.log("End date picker enabled with minDate:", startDate);
+    console.log("End date picker enabled with startDate:", startDate);
 }
 
 /**
- * Initialize end date picker without constraints
+ * Initialize end date picker without constraints using bootstrap datepicker
  */
 function initializeEndDatePicker() {
-    $("#date_to").datepicker({
+    $("#date_to")
-        dateFormat: "yyyy-mm-dd",
+        .datepicker({
-        changeMonth: true,
+            format: "yyyy-mm-dd",
-        changeYear: true,
+            autoclose: true,
-        maxDate: new Date(),
+            todayHighlight: true,
-        yearRange: "-5:+0",
+            orientation: "bottom auto",
-        onSelect: function (selectedDate) {
+            language: "id",
-            console.log("End date selected:", selectedDate);
+            clearBtn: true,
-            $(this).datepicker("hide");
+            container: "body",
-        },
+            endDate: new Date(), // Don't allow future dates
-    });
+        })
+        .on("changeDate", function (e) {
+            console.log("End date selected:", e.format());
+        })
+        .on("clearDate", function (e) {
+            console.log("End date cleared");
+        });
 }
 
-/**
+// Calendar icons and click handlers removed since bootstrap datepicker handles these automatically
- * Add calendar icons to date inputs
- */
-function addCalendarIcons() {
-    // Remove any existing icons first
-    $(".input-icon").remove();
-
-    // Add calendar icons with CSS classes
-    const iconHtml = '<i class="fa fa-calendar input-icon"></i>';
-
-    $("#date_from").after(iconHtml);
-    $("#date_to").after(iconHtml);
-
-    // Ensure parent containers have relative positioning
-    $("#date_from, #date_to")
-        .closest(".form-group")
-        .css("position", "relative");
-}
-
-/**
- * Setup click handlers for calendar icons
- */
-function setupIconClickHandlers() {
-    $(document).on("click", ".input-icon", function () {
-        const input = $(this).prev("input");
-        if (!input.prop("disabled")) {
-            input.datepicker("show");
-        }
-    });
-}
 
 /**
  * Setup change event handlers for date inputs
  */
 function setupChangeEventHandlers() {
+    // For bootstrap datepicker, we already handle events in the datepicker initialization
+    // But we can add additional handling if needed
     $("#date_from").on("change", function () {
         const selectedDate = $(this).val();
         if (selectedDate) {
             console.log("Start date change event:", selectedDate);
             enableEndDatePicker(selectedDate);
+        } else {
+            console.log("Start date cleared via change event");
+            resetEndDatePicker();
         }
     });
 }
@@ -287,10 +263,12 @@ function setupFilterHandlers(table) {
     $("#kt_reset").on("click", function () {
         console.log("Reset button clicked");
 
-        // Clear all filters
+        // Reset select2 elements properly - same as stock audit
-        $("#dealer_filter").val("").trigger("change"); // Reset Select2
+        $("#dealer_filter").val(null).trigger("change.select2");
-        $("#date_from").val("");
+
-        $("#date_to").val("");
+        // Clear datepicker values using bootstrap datepicker method
+        $("#date_from").datepicker("clearDates");
+        $("#date_to").datepicker("clearDates");
 
         // Reset end date picker and disable it
         resetEndDatePicker();
@@ -316,13 +294,16 @@ function setupFilterHandlers(table) {
 }
 
 /**
- * Reset end date picker to initial state
+ * Reset end date picker to initial state using bootstrap datepicker
  */
 function resetEndDatePicker() {
-    // Destroy existing datepicker
+    // Remove existing datepicker
-    $("#date_to").datepicker("destroy");
+    $("#date_to").datepicker("remove");
 
-    // Re-initialize without minDate constraint
+    // Clear the input value
+    $("#date_to").val("");
+
+    // Re-initialize without startDate constraint
     initializeEndDatePicker();
 
     // Disable the input

resources/js/warehouse_management/stock_audit/index.js

@@ -140,7 +140,7 @@ $(document).ready(function () {
             },
         ],
         order: [[8, "desc"]], // Order by created_at desc (column index 8)
-        pageLength: 25,
+        pageLength: 10,
         responsive: true,
         ordering: true, // Enable column ordering
         orderMulti: false, // Single column ordering only

resources/views/layouts/backapp.blade.php

@@ -39,6 +39,8 @@ License: You must have a valid license purchased only from themeforest(the above
 
     <link rel="shortcut icon" href="{{ asset('assets/media/logos/ckb.jpeg') }}" />
 
+    <link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
+    
     <!--begin::DataTables CSS -->
     <link href="{{ asset('css/vendor/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
     <link href="{{ asset('css/vendor/fixedColumns.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@@ -67,18 +69,6 @@ License: You must have a valid license purchased only from themeforest(the above
     </script>
     <!-- end::Global Config -->
 
-    <!--begin::Global Theme Bundle(used by all pages) -->
-    <script src="{{ asset('js/app.bundle.min.js') }}" type="text/javascript"></script>
-    <script src="//maps.google.com/maps/api/js?key=AIzaSyBTGnKT7dt597vo9QgeQ7BFhvSRP4eiMSM" type="text/javascript"></script>
-    <!--end::Global Theme Bundle -->
-
-    <!--begin::DataTables -->
-    <script src="{{ asset('js/vendor.js') }}"></script>
-
-    <!--begin::Common Script -->
-    <script src="{{ asset('js/init.js') }}" type="text/javascript"></script>
-    <!--end::Common Scripts -->
-
     @yield('styles')
 </head>
 <!-- end::Head -->
@@ -120,7 +110,17 @@ License: You must have a valid license purchased only from themeforest(the above
     </div>
     <!-- end::Scrolltop -->
 
+    <!--begin::Global Theme Bundle(used by all pages) -->
+    <script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
+    <script src="{{ asset('js/app.bundle.min.js') }}"></script>
+    <script src="//maps.google.com/maps/api/js?key=AIzaSyBTGnKT7dt597vo9QgeQ7BFhvSRP4eiMSM"></script>
+    <!--end::Global Theme Bundle -->
+    
+    <!--begin::Common Script -->
+    <script src="{{ asset('js/vendor.js') }}"></script>
     <script src="{{ mix('js/app.js') }}"></script>
+    <script src="{{ asset('js/init.js') }}"></script>
+    <!--end::Common Scripts -->
     @yield('javascripts')
 </body>
 <!-- end::Body -->

resources/views/layouts/frontapp.blade.php

@@ -132,9 +132,6 @@ License: You must have a valid license purchased only from themeforest(the above
     <script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>
     <!--end::DataTables -->
 
-    <!--begin::Common Script -->
-    <script src="{{ asset('js/init.js') }}" type="text/javascript"></script>
-    <!--end::Common Scripts -->
     
     <!--begin::SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -143,6 +140,9 @@ License: You must have a valid license purchased only from themeforest(the above
     <!--end::Common Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script> --}}
+    <!--begin::Common Script -->
+    <script src="{{ asset('js/init.js') }}" type="text/javascript"></script>
+    <!--end::Common Scripts -->
     <script src="{{ asset('js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
     
 

resources/views/layouts/partials/sidebarMenu.blade.php

@@ -162,27 +162,27 @@
                 </div>
             
                 {{-- Submenu Items --}}
-                @can('view', $menus['dealer.index'])
+                @can('view', $menus['report.transaction_sa'])
                 <li class="kt-menu__item" aria-haspopup="true">
-                    <a href="{{ route('dealer.index') }}" class="kt-menu__link">
+                    <a href="{{ route('report.transaction_sa') }}" class="kt-menu__link">
                         <i class="fa fa-car" style="display: flex; align-items: center; margin-right: 10px;"></i>
                         <span class="kt-menu__link-text">SA</span>
                     </a>
                 </li>
                 @endcan
         
-                @can('view', $menus['category.index'])
+                @can('view', $menus['report.transaction'])
                 <li class="kt-menu__item" aria-haspopup="true">
-                    <a href="{{ route('category.index') }}" class="kt-menu__link">
+                    <a href="{{ route('report.transaction') }}" class="kt-menu__link">
                         <i class="fa fa-users" style="display: flex; align-items: center; margin-right: 10px;"></i>
                         <span class="kt-menu__link-text">Pekerjaan</span>
                     </a>
                 </li>
                 @endcan
         
-                @can('view', $menus['work.index'])
+                @can('view', $menus['report.transaction_dealer'])
                 <li class="kt-menu__item" aria-haspopup="true">
-                    <a href="{{ route('work.index') }}" class="kt-menu__link">
+                    <a href="{{ route('report.transaction_dealer') }}" class="kt-menu__link">
                         <i class="fa fa-list" style="display: flex; align-items: center; margin-right: 10px;"></i>
                         <span class="kt-menu__link-text">Dealer</span>
                     </a>

resources/views/transaction/index.blade.php

@@ -182,6 +182,94 @@ use Illuminate\Support\Facades\Auth;
     .alert ul li {
         margin-bottom: 0.25rem;
     }
+    
+    /* Select2 styling for mutasi form */
+    .select2-container {
+        width: 100% !important;
+    }
+    
+    .select2-container--default .select2-selection--single {
+        height: 38px;
+        border: 1px solid #e2e5ec;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        padding: 0;
+    }
+    
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 36px;
+        padding-left: 12px;
+        padding-right: 30px;
+        color: #74788d;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: calc(100% - 30px);
+    }
+    
+    .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: #74788d;
+        line-height: 36px;
+    }
+    
+    .select2-container--default .select2-selection--single .select2-selection__arrow {
+        height: 36px;
+        right: 8px;
+        top: 1px;
+        width: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .select2-container--default .select2-selection--single .select2-selection__arrow b {
+        border-color: #74788d transparent transparent transparent;
+        border-style: solid;
+        border-width: 5px 4px 0 4px;
+        height: 0;
+        left: 50%;
+        margin-left: -4px;
+        margin-top: -2px;
+        position: absolute;
+        top: 50%;
+        width: 0;
+    }
+    
+    /* Hide clear button completely */
+    .select2-container--default .select2-selection--single .select2-selection__clear {
+        display: none !important;
+    }
+    
+    .select2-dropdown {
+        border: 1px solid #e2e5ec;
+        border-radius: 4px;
+        z-index: 9999 !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    }
+    
+    .select2-results__option {
+        padding: 8px 12px;
+        line-height: 1.4;
+    }
+    
+    .select2-results__option--highlighted {
+        background-color: #5d78ff;
+        color: white;
+    }
+    
+    .select2-container--default.select2-container--focus .select2-selection--single {
+        border-color: #5d78ff;
+        outline: 0;
+        box-shadow: 0 0 0 0.2rem rgba(93, 120, 255, 0.25);
+    }
+    
+    /* Select2 for table cells - adjust width */
+    #products-table-mutasi .select2-container {
+        width: 100% !important;
+        max-width: 100%;
+    }
 </style>
 @endsection
 
@@ -1318,6 +1406,9 @@ use Illuminate\Support\Facades\Auth;
         // Initialize mutasi form
         updateRemoveButtonsMutasi();
         
+        // Initialize select2 for mutasi form
+        initMutasiSelect2();
+        
         // Check if we should show specific tab (after form submission)
         @if(session('success') || session('error') || $errors->any())
             @if(session('active_tab') == 'opname')
@@ -1412,6 +1503,12 @@ use Illuminate\Support\Facades\Auth;
                 `);
                 productIndexMutasi = 0;
                 updateRemoveButtonsMutasi();
+                
+                // Reinitialize select2
+                setTimeout(function() {
+                    initMutasiSelect2();
+                }, 100);
+                
                 $("#btn-save-mutasi").attr("disabled", false);
                 $("#btn-save-mutasi").removeClass("disabled");
                 $("#btn-save-mutasi").html('Kirim Mutasi');
@@ -1604,6 +1701,22 @@ use Illuminate\Support\Facades\Auth;
         `;
         
         $('#products-tbody-mutasi').append(newRow);
+        
+        // Initialize select2 for the new product select
+        var newSelect = $(`select[name="products[${productIndexMutasi}][product_id]"]`);
+        newSelect.select2({
+            placeholder: 'Pilih Produk',
+            width: '100%',
+            language: {
+                noResults: function() {
+                    return "Tidak ada hasil ditemukan";
+                },
+                searching: function() {
+                    return "Mencari...";
+                }
+            }
+        });
+        
         updateRemoveButtonsMutasi();
     });
     
@@ -1653,6 +1766,13 @@ use Illuminate\Support\Facades\Auth;
         }
     });
 
+    // Initialize select2 when mutasi tab is shown
+    $('a[href="#mutasi"]').on('shown.bs.tab', function (e) {
+        setTimeout(function() {
+            initMutasiSelect2();
+        }, 100);
+    });
+    
     // Validate quantity against available stock for mutasi
     $(document).on('input', '.quantity-input-mutasi', function() {
         var quantity = parseFloat($(this).val()) || 0;
@@ -1687,6 +1807,43 @@ use Illuminate\Support\Facades\Auth;
 
 
 
+    // Initialize Select2 for mutasi form
+    function initMutasiSelect2() {
+        // Initialize select2 for dealer tujuan
+        if ($('#to_dealer_id').length && !$('#to_dealer_id').hasClass('select2-hidden-accessible')) {
+            $('#to_dealer_id').select2({
+                placeholder: 'Pilih Dealer Tujuan',
+                width: '100%',
+                language: {
+                    noResults: function() {
+                        return "Tidak ada hasil ditemukan";
+                    },
+                    searching: function() {
+                        return "Mencari...";
+                    }
+                }
+            });
+        }
+        
+        // Initialize select2 for all product selects
+        $('.product-select-mutasi').each(function() {
+            if (!$(this).hasClass('select2-hidden-accessible')) {
+                $(this).select2({
+                    placeholder: 'Pilih Produk',
+                    width: '100%',
+                    language: {
+                        noResults: function() {
+                            return "Tidak ada hasil ditemukan";
+                        },
+                        searching: function() {
+                            return "Mencari...";
+                        }
+                    }
+                });
+            }
+        });
+    }
+
     // Initialize DataTable for receive mutations
     var receiveMutationsTable;
     

resources/views/warehouse_management/mutations/index.blade.php

@@ -25,77 +25,40 @@
   </div>
 
   <div class="kt-portlet__body">
-      <!-- Filter Section -->
+    <!-- Filter Section -->
-      {{-- <div class="kt-form kt-form--label-right kt-margin-b-10">
+    <div class="row mb-3">
-          <div class="row align-items-end">
+        <div class="col-md-3">
-              <div class="col-md-2">
+            <div class="form-group">
-                  <div class="form-group mb-0">
+                <label class="form-label">Tanggal Awal</label>
-                      <label class="form-label">Tanggal Awal</label>
+                <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
-                      <input type="text" class="form-control" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
-                  </div>
-              </div>
-              <div class="col-md-2">
-                  <div class="form-group mb-0">
-                      <label class="form-label">Tanggal Akhir</label>
-                      <input type="text" class="form-control" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
-                  </div>
-              </div>
-              <div class="col-md-4">
-                  <div class="form-group mb-0">
-                      <label class="form-label">Dealer</label>
-                      <select class="form-control select2" id="dealer_filter" name="dealer_filter">
-                          <option value="">Pilih Dealer</option>
-                          @foreach($dealers as $dealer)
-                              <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
-                          @endforeach
-                      </select>
-                  </div>
-              </div>
-              <div class="col-md-4">
-                  <div class="form-group mb-0">
-                      <button type="button" class="btn btn-brand btn-bold mr-2" id="kt_search">
-                          <span>Filter</span>
-                      </button>
-                      <button type="button" class="btn btn-secondary btn-bold" id="kt_reset">
-                          <span>Reset</span>
-                      </button>
-                  </div>
-              </div>
-          </div>
-      </div> --}}
-
-    <div class="kt-form kt-form--label-right kt-margin-b-20">
-        <div class="row align-items-end">
-            <div class="col-xl-2 col-lg-3 col-md-6">
-                <div class="form-group mb-3 mb-lg-0">
-                    <label class="form-label">Tanggal Awal</label>
-                    <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
-                </div>
             </div>
-            <div class="col-xl-2 col-lg-3 col-md-6">
+        </div>
-                <div class="form-group mb-3 mb-lg-0">
+        <div class="col-md-3">
-                    <label class="form-label">Tanggal Akhir</label>
+            <div class="form-group">
-                    <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
+                <label class="form-label">Tanggal Akhir</label>
-                </div>
+                <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
             </div>
-            <div class="col-xl-3 col-lg-4 col-md-12">
+        </div>
-                <div class="form-group mb-3 mb-lg-0">
+        <div class="col-md-3">
-                    <label class="form-label">Dealer</label>
+            <div class="form-group">
-                    <select class="form-control select2" id="dealer_filter" name="dealer_filter">
+                <label class="form-label">Filter Dealer</label>
-                        <option value="">Pilih Dealer</option>
+                <select class="form-control select2" id="dealer_filter" name="dealer_filter">
-                        @foreach($dealers as $dealer)
+                    <option value="">Semua Dealer</option>
-                            <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
+                    @foreach($dealers as $dealer)
-                        @endforeach
+                        <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
-                    </select>
+                    @endforeach
-                </div>
+                </select>
             </div>
-            <div class="col-xl-5 col-lg-2 col-md-12">
+        </div>
-                <div class="form-group mb-0 d-flex align-items-end">
+        <div class="col-md-3">
-                    <button type="button" class="btn btn-brand btn-bold mr-2" id="kt_search">
+            <div class="form-group">
-                        <span>Filter</span>
+                <label class="form-label">&nbsp;</label>
+                <div class="filter-buttons">
+                    <button type="button" class="btn btn-primary btn-sm" id="kt_search">
+                        Filter
                     </button>
-                    <button type="button" class="btn btn-secondary btn-bold" id="kt_reset">
+                    <button type="button" class="btn btn-secondary btn-sm" id="kt_reset">
-                        <span>Reset</span>
+                        Reset
                     </button>
                 </div>
             </div>
@@ -127,482 +90,46 @@
 
 @section('styles')
 <style>
-/* Filter section styling */
+.filter-buttons {
-.kt-form--label-right {
+    display: flex;
-    background: #f8f9fa;
+    gap: 10px;
-    padding: 20px;
+}
-    border-radius: 6px;
+.filter-buttons .btn {
-    margin-bottom: 20px;
+    white-space: nowrap;
-    border: 1px solid #e2e5ec;
+}
+
+/* Datepicker styling */
+.datepicker {
+    width: 100% !important;
+    max-width: 100%;
+}
+.datepicker-dropdown {
+    width: auto !important;
+    min-width: 250px;
+    max-width: 300px;
+}
+/* Ensure input field follows parent width */
+input.datepicker {
+    width: 100% !important;
+    box-sizing: border-box;
 }
 
 .form-label {
     font-weight: 600;
     color: #595d6e;
     margin-bottom: 8px;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    display: block;
-}
-
-.form-group.mb-0 {
-    margin-bottom: 0 !important;
-}
-
-.form-group.mb-3 {
-    margin-bottom: 1rem !important;
-}
-
-/* Responsive spacing */
-@media (min-width: 992px) {
-    .form-group.mb-lg-0 {
-        margin-bottom: 0 !important;
-    }
-    
-    .kt-form--label-right [class*="col-"] {
-        margin-bottom: 0;
-    }
-    
-    /* Ensure buttons stay horizontal and aligned on desktop */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: 38px;
-        width: auto;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-/* Add spacing between columns */
-.row [class*="col-"] {
-    padding-left: 12px;
-    padding-right: 12px;
-    margin-bottom: 15px;
-}
-
-/* First and last column adjustments */
-.row [class*="col-"]:first-child {
-    padding-left: 15px;
-}
-
-
-/* Additional spacing for form elements */
-.form-control {
-    margin-bottom: 0;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.form-group {
-    margin-bottom: 20px !important;
-    width: 100%;
-}
-
-/* Override for filter section to ensure proper spacing */
-.kt-form--label-right .form-group {
-    margin-bottom: 0 !important;
-    width: 100%;
-}
-
-.kt-form--label-right [class*="col-"] {
-    margin-bottom: 20px;
-    box-sizing: border-box;
-}
-
-
-/* Ensure form controls take full width of their container */
-.kt-form--label-right .form-control,
-.kt-form--label-right .select2-container {
-    width: 100% !important;
-    max-width: 100%;
-}
-
-/* Button alignment and styling */
-.kt-form--label-right .form-group.d-flex {
-    min-height: 38px;
-    align-items: flex-end !important;
-}
-
-.kt-form--label-right .btn {
-    height: 38px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    padding: 0 16px;
-}
-
-/* Date input container styling */
-.form-group {
-    position: relative;
-}
-
-/* Input styling for date fields */
-#date_from, #date_to {
-    padding-right: 40px; /* Make space for icon */
-}
-
-/* Date picker icon styling */
-.input-icon {
-    position: absolute;
-    right: 12px;
-    bottom: 9px; /* Position from bottom to align with input field */
-    cursor: pointer;
-    color: #74788d;
-    z-index: 5;
-    font-size: 14px;
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-}
-
-.input-icon:hover {
-    color: #5d78ff;
-}
-
-/* Disabled input styling */
-input[disabled] {
-    background-color: #f8f9fa !important;
-    color: #6c757d !important;
-    cursor: not-allowed !important;
-    opacity: 0.65;
-}
-
-input[disabled] + .input-icon {
-    color: #ccc !important;
-    cursor: not-allowed !important;
-    opacity: 0.5;
-}
-
-/* Select2 styling */
-.select2-container {
-    z-index: 9999;
-    width: 100% !important;
-    max-width: 100% !important;
-    display: block !important;
-}
-
-.select2-container--default .select2-selection--single {
-    height: 38px;
-    border: 1px solid #e2e5ec;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    width: 100% !important;
-    box-sizing: border-box;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    line-height: 36px;
-    padding-left: 12px;
-    padding-right: 30px; /* Make space for dropdown arrow */
-    color: #74788d;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: calc(100% - 30px); /* Ensure text doesn't overlap with arrow */
-}
-
-.select2-container--default .select2-selection--single .select2-selection__placeholder {
-    color: #74788d;
-    line-height: 36px;
-}
-
-/* Dropdown arrow styling */
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-    height: 36px;
-    right: 8px;
-    top: 1px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow b {
-    border-color: #74788d transparent transparent transparent;
-    border-style: solid;
-    border-width: 5px 4px 0 4px;
-    height: 0;
-    left: 50%;
-    margin-left: -4px;
-    margin-top: -2px;
-    position: absolute;
-    top: 50%;
-    width: 0;
-}
-
-/* Hide clear button (×) completely */
-.select2-container--default .select2-selection--single .select2-selection__clear {
-    display: none !important;
-}
-
-/* Dropdown styling */
-.select2-dropdown {
-    border: 1px solid #e2e5ec;
-    border-radius: 4px;
-    z-index: 9999 !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Ensure dropdown container has proper positioning */
-.select2-container--open {
-    z-index: 9999 !important;
-}
-
-.select2-container--open .select2-dropdown {
-    z-index: 9999 !important;
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Prevent dropdown from taking full page width */
-.select2-dropdown--below {
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-.select2-dropdown--above {
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Specific styling for dealer filter dropdown */
-#dealer_filter + .select2-container .select2-dropdown {
-    width: auto !important;
-    min-width: 250px;
-    max-width: 350px;
-}
-
-/* Override any parent width constraints for select2 dropdowns */
-.select2-container .select2-dropdown {
-    left: 0 !important;
-    right: auto !important;
-}
-
-.select2-results__option {
-    padding: 8px 12px;
-    line-height: 1.4;
-}
-
-.select2-results__option--highlighted {
-    background-color: #5d78ff;
-    color: white;
-}
-
-/* Focus states */
-.select2-container--default.select2-container--focus .select2-selection--single {
-    border-color: #5d78ff;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(93, 120, 255, 0.25);
-}
-
-/* Custom datepicker styles */
-.ui-datepicker {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     font-size: 13px;
-    z-index: 9999 !important;
+    text-transform: none;
-}
+    letter-spacing: normal;
-
-.ui-datepicker-header {
-    background: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
-    padding: 10px;
-    border-radius: 4px 4px 0 0;
-}
-
-.ui-datepicker-title {
-    font-weight: 600;
-    color: #495057;
-}
-
-.ui-datepicker-calendar {
-    border-collapse: collapse;
-    width: 100%;
-}
-
-.ui-datepicker-calendar td {
-    padding: 5px;
-    text-align: center;
-    border: 1px solid #f8f9fa;
-}
-
-.ui-datepicker-calendar td a {
     display: block;
-    padding: 8px;
-    text-decoration: none;
-    color: #495057;
-    border-radius: 3px;
-    transition: all 0.2s;
 }
 
-.ui-datepicker-calendar td a:hover {
+/* Select2 styling - same as stock audit (minimal) */
-    background: #e9ecef;
+.select2-container {
-    color: #212529;
+    width: 100% !important;
 }
 
-.ui-datepicker-calendar .ui-datepicker-today a {
-    background: #007bff;
-    color: white;
-}
 
-.ui-datepicker-calendar .ui-datepicker-current-day a {
-    background: #28a745;
-    color: white;
-}
-
-@media (max-width: 991px) {
-    .kt-form--label-right {
-        padding: 15px;
-    }
-    
-    .row.align-items-end {
-        align-items: stretch !important;
-    }
-    
-    .form-group.mb-3 {
-        margin-bottom: 1.5rem !important;
-    }
-    
-    .form-label {
-        margin-bottom: 8px;
-    }
-    
-    .ui-datepicker {
-        font-size: 14px;
-    }
-    
-    /* Ensure spacing between columns on tablet */
-    .kt-form--label-right [class*="col-"] {
-        margin-bottom: 25px;
-        padding-left: 15px;
-        padding-right: 15px;
-    }
-    
-    
-    /* Button alignment on tablet */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 767px) {
-    .kt-form--label-right {
-        padding: 12px;
-    }
-    
-    /* Keep buttons horizontal and aligned */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-        margin-top: 15px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 576px) {
-    .kt-form--label-right {
-        padding: 15px;
-    }
-    
-    .kt-form--label-right [class*="col-"] {
-        padding-left: 15px;
-        padding-right: 15px;
-        margin-bottom: 25px;
-    }
-
-    /* Ensure proper form control widths on mobile */
-    .kt-form--label-right .form-control,
-    .kt-form--label-right .select2-container {
-        width: 100% !important;
-        max-width: 100% !important;
-    }
-    
-    .form-label {
-        margin-bottom: 8px;
-        display: block;
-        width: 100%;
-    }
-    
-    /* Keep buttons horizontal and aligned on mobile */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        min-width: 80px;
-        margin-right: 8px;
-        margin-bottom: 0;
-        flex-shrink: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
 </style>
 @endsection
 

resources/views/warehouse_management/opnames/index.blade.php

@@ -24,38 +24,39 @@
 
   <div class="kt-portlet__body">
     <!-- Filter Section -->
-    <div class="kt-form kt-form--label-right kt-margin-b-20">
+    <div class="row mb-3">
-        <div class="row align-items-end">
+        <div class="col-md-3">
-            <div class="col-xl-2 col-lg-3 col-md-6">
+            <div class="form-group">
-                <div class="form-group mb-3 mb-lg-0">
+                <label class="form-label">Tanggal Awal</label>
-                    <label class="form-label">Tanggal Awal</label>
+                <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
-                    <input type="text" class="form-control datepicker" id="date_from" name="date_from" placeholder="Tanggal awal" readonly>
-                </div>
             </div>
-            <div class="col-xl-2 col-lg-3 col-md-6">
+        </div>
-                <div class="form-group mb-3 mb-lg-0">
+        <div class="col-md-3">
-                    <label class="form-label">Tanggal Akhir</label>
+            <div class="form-group">
-                    <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
+                <label class="form-label">Tanggal Akhir</label>
-                </div>
+                <input type="text" class="form-control datepicker" id="date_to" name="date_to" placeholder="Tanggal akhir" readonly>
             </div>
-            <div class="col-xl-3 col-lg-4 col-md-12">
+        </div>
-                <div class="form-group mb-3 mb-lg-0">
+        <div class="col-md-3">
-                    <label class="form-label">Dealer</label>
+            <div class="form-group">
-                    <select class="form-control select2" id="dealer_filter" name="dealer_filter">
+                <label class="form-label">Filter Dealer</label>
-                        <option value="">Pilih Dealer</option>
+                <select class="form-control select2" id="dealer_filter" name="dealer_filter">
-                        @foreach($dealers as $dealer)
+                    <option value="">Semua Dealer</option>
-                            <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
+                    @foreach($dealers as $dealer)
-                        @endforeach
+                        <option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
-                    </select>
+                    @endforeach
-                </div>
+                </select>
             </div>
-            <div class="col-xl-5 col-lg-2 col-md-12">
+        </div>
-                <div class="form-group mb-0 d-flex align-items-end">
+        <div class="col-md-3">
-                    <button type="button" class="btn btn-brand btn-bold mr-2" id="kt_search">
+            <div class="form-group">
-                        <span>Filter</span>
+                <label class="form-label">&nbsp;</label>
+                <div class="filter-buttons">
+                    <button type="button" class="btn btn-primary btn-sm" id="kt_search">
+                        Filter
                     </button>
-                    <button type="button" class="btn btn-secondary btn-bold" id="kt_reset">
+                    <button type="button" class="btn btn-secondary btn-sm" id="kt_reset">
-                        <span>Reset</span>
+                        Reset
                     </button>
                 </div>
             </div>
@@ -83,482 +84,44 @@
 
 @section('styles')
 <style>
-/* Filter section styling */
+.filter-buttons {
-.kt-form--label-right {
+    display: flex;
-    background: #f8f9fa;
+    gap: 10px;
-    padding: 20px;
+}
-    border-radius: 6px;
+.filter-buttons .btn {
-    margin-bottom: 20px;
+    white-space: nowrap;
-    border: 1px solid #e2e5ec;
+}
+.datepicker {
+    width: 100% !important;
+    max-width: 100%;
+}
+.datepicker-dropdown {
+    width: auto !important;
+    min-width: 250px;
+    max-width: 300px;
+}
+/* Ensure input field follows parent width */
+input.datepicker {
+    width: 100% !important;
+    box-sizing: border-box;
 }
 
 .form-label {
     font-weight: 600;
     color: #595d6e;
     margin-bottom: 8px;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    display: block;
-}
-
-.form-group.mb-0 {
-    margin-bottom: 0 !important;
-}
-
-.form-group.mb-3 {
-    margin-bottom: 1rem !important;
-}
-
-/* Responsive spacing */
-@media (min-width: 992px) {
-    .form-group.mb-lg-0 {
-        margin-bottom: 0 !important;
-    }
-    
-    .kt-form--label-right [class*="col-"] {
-        margin-bottom: 0;
-    }
-    
-    /* Ensure buttons stay horizontal and aligned on desktop */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: 38px;
-        width: auto;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-/* Add spacing between columns */
-.row [class*="col-"] {
-    padding-left: 12px;
-    padding-right: 12px;
-    margin-bottom: 15px;
-}
-
-/* First and last column adjustments */
-.row [class*="col-"]:first-child {
-    padding-left: 15px;
-}
-
-
-/* Additional spacing for form elements */
-.form-control {
-    margin-bottom: 0;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.form-group {
-    margin-bottom: 20px !important;
-    width: 100%;
-}
-
-/* Override for filter section to ensure proper spacing */
-.kt-form--label-right .form-group {
-    margin-bottom: 0 !important;
-    width: 100%;
-}
-
-.kt-form--label-right [class*="col-"] {
-    margin-bottom: 20px;
-    box-sizing: border-box;
-}
-
-
-/* Ensure form controls take full width of their container */
-.kt-form--label-right .form-control,
-.kt-form--label-right .select2-container {
-    width: 100% !important;
-    max-width: 100%;
-}
-
-/* Button alignment and styling */
-.kt-form--label-right .form-group.d-flex {
-    min-height: 38px;
-    align-items: flex-end !important;
-}
-
-.kt-form--label-right .btn {
-    height: 38px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    padding: 0 16px;
-}
-
-/* Date input container styling */
-.form-group {
-    position: relative;
-}
-
-/* Input styling for date fields */
-#date_from, #date_to {
-    padding-right: 40px; /* Make space for icon */
-}
-
-/* Date picker icon styling */
-.input-icon {
-    position: absolute;
-    right: 12px;
-    bottom: 9px; /* Position from bottom to align with input field */
-    cursor: pointer;
-    color: #74788d;
-    z-index: 5;
-    font-size: 14px;
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-}
-
-.input-icon:hover {
-    color: #5d78ff;
-}
-
-/* Disabled input styling */
-input[disabled] {
-    background-color: #f8f9fa !important;
-    color: #6c757d !important;
-    cursor: not-allowed !important;
-    opacity: 0.65;
-}
-
-input[disabled] + .input-icon {
-    color: #ccc !important;
-    cursor: not-allowed !important;
-    opacity: 0.5;
-}
-
-/* Select2 styling */
-.select2-container {
-    z-index: 9999;
-    width: 100% !important;
-    max-width: 100% !important;
-    display: block !important;
-}
-
-.select2-container--default .select2-selection--single {
-    height: 38px;
-    border: 1px solid #e2e5ec;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding: 0;
-    width: 100% !important;
-    box-sizing: border-box;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__rendered {
-    line-height: 36px;
-    padding-left: 12px;
-    padding-right: 30px; /* Make space for dropdown arrow */
-    color: #74788d;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: calc(100% - 30px); /* Ensure text doesn't overlap with arrow */
-}
-
-.select2-container--default .select2-selection--single .select2-selection__placeholder {
-    color: #74788d;
-    line-height: 36px;
-}
-
-/* Dropdown arrow styling */
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-    height: 36px;
-    right: 8px;
-    top: 1px;
-    width: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow b {
-    border-color: #74788d transparent transparent transparent;
-    border-style: solid;
-    border-width: 5px 4px 0 4px;
-    height: 0;
-    left: 50%;
-    margin-left: -4px;
-    margin-top: -2px;
-    position: absolute;
-    top: 50%;
-    width: 0;
-}
-
-/* Hide clear button (×) completely */
-.select2-container--default .select2-selection--single .select2-selection__clear {
-    display: none !important;
-}
-
-/* Dropdown styling */
-.select2-dropdown {
-    border: 1px solid #e2e5ec;
-    border-radius: 4px;
-    z-index: 9999 !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Ensure dropdown container has proper positioning */
-.select2-container--open {
-    z-index: 9999 !important;
-}
-
-.select2-container--open .select2-dropdown {
-    z-index: 9999 !important;
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Prevent dropdown from taking full page width */
-.select2-dropdown--below {
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-.select2-dropdown--above {
-    width: auto !important;
-    min-width: 200px;
-    max-width: 400px;
-}
-
-/* Specific styling for dealer filter dropdown */
-#dealer_filter + .select2-container .select2-dropdown {
-    width: auto !important;
-    min-width: 250px;
-    max-width: 350px;
-}
-
-/* Override any parent width constraints for select2 dropdowns */
-.select2-container .select2-dropdown {
-    left: 0 !important;
-    right: auto !important;
-}
-
-.select2-results__option {
-    padding: 8px 12px;
-    line-height: 1.4;
-}
-
-.select2-results__option--highlighted {
-    background-color: #5d78ff;
-    color: white;
-}
-
-/* Focus states */
-.select2-container--default.select2-container--focus .select2-selection--single {
-    border-color: #5d78ff;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(93, 120, 255, 0.25);
-}
-
-/* Custom datepicker styles */
-.ui-datepicker {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     font-size: 13px;
-    z-index: 9999 !important;
+    text-transform: none;
-}
+    letter-spacing: normal;
-
-.ui-datepicker-header {
-    background: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
-    padding: 10px;
-    border-radius: 4px 4px 0 0;
-}
-
-.ui-datepicker-title {
-    font-weight: 600;
-    color: #495057;
-}
-
-.ui-datepicker-calendar {
-    border-collapse: collapse;
-    width: 100%;
-}
-
-.ui-datepicker-calendar td {
-    padding: 5px;
-    text-align: center;
-    border: 1px solid #f8f9fa;
-}
-
-.ui-datepicker-calendar td a {
     display: block;
-    padding: 8px;
-    text-decoration: none;
-    color: #495057;
-    border-radius: 3px;
-    transition: all 0.2s;
 }
 
-.ui-datepicker-calendar td a:hover {
+/* Select2 styling - same as stock audit (minimal) */
-    background: #e9ecef;
+.select2-container {
-    color: #212529;
+    width: 100% !important;
 }
 
-.ui-datepicker-calendar .ui-datepicker-today a {
-    background: #007bff;
-    color: white;
-}
 
-.ui-datepicker-calendar .ui-datepicker-current-day a {
-    background: #28a745;
-    color: white;
-}
-
-@media (max-width: 991px) {
-    .kt-form--label-right {
-        padding: 15px;
-    }
-    
-    .row.align-items-end {
-        align-items: stretch !important;
-    }
-    
-    .form-group.mb-3 {
-        margin-bottom: 1.5rem !important;
-    }
-    
-    .form-label {
-        margin-bottom: 8px;
-    }
-    
-    .ui-datepicker {
-        font-size: 14px;
-    }
-    
-    /* Ensure spacing between columns on tablet */
-    .kt-form--label-right [class*="col-"] {
-        margin-bottom: 25px;
-        padding-left: 15px;
-        padding-right: 15px;
-    }
-    
-    
-    /* Button alignment on tablet */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 767px) {
-    .kt-form--label-right {
-        padding: 12px;
-    }
-    
-    /* Keep buttons horizontal and aligned */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-        margin-top: 15px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        margin-right: 10px;
-        margin-bottom: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 576px) {
-    .kt-form--label-right {
-        padding: 15px;
-    }
-    
-    .kt-form--label-right [class*="col-"] {
-        padding-left: 15px;
-        padding-right: 15px;
-        margin-bottom: 25px;
-    }
-
-    /* Ensure proper form control widths on mobile */
-    .kt-form--label-right .form-control,
-    .kt-form--label-right .select2-container {
-        width: 100% !important;
-        max-width: 100% !important;
-    }
-    
-    .form-label {
-        margin-bottom: 8px;
-        display: block;
-        width: 100%;
-    }
-    
-    /* Keep buttons horizontal and aligned on mobile */
-    .kt-form--label-right [class*="col-"]:last-child .form-group {
-        display: flex;
-        align-items: flex-end;
-        min-height: 38px;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn {
-        height: 38px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: auto;
-        min-width: 80px;
-        margin-right: 8px;
-        margin-bottom: 0;
-        flex-shrink: 0;
-    }
-    
-    .kt-form--label-right [class*="col-"]:last-child .btn:last-child {
-        margin-right: 0;
-    }
-}
 </style>
 @endsection
 

resources/views/warehouse_management/stock_audit/index.blade.php

@@ -18,15 +18,10 @@
     min-width: 250px;
     max-width: 300px;
 }
-/* Ensure input field follows parent width */
 input.datepicker {
     width: 100% !important;
     box-sizing: border-box;
 }
-/* Fix for select2 dropdown width */
-.select2-container {
-    width: 100% !important;
-}
 </style>
 @endsection
 
@@ -43,8 +38,8 @@ input.datepicker {
 
     <div class="kt-portlet__body">
         <!-- Filter Section -->
-        <div class="row mb-3">
+        <div class="ke-form row mb-3">
-            <div class="col-md-3">
+            <div class="form-group col-md-3">
                 <label class="form-label">Filter Dealer</label>
                 <select class="form-control select2" id="filter-dealer">
                     <option value="">Semua Dealer</option>
@@ -53,7 +48,7 @@ input.datepicker {
                     @endforeach
                 </select>
             </div>
-            <div class="col-md-3">
+            <div class="form-group col-md-3">
                 <label class="form-label">Filter Produk</label>
                 <select class="form-control select2" id="filter-product">
                     <option value="">Semua Produk</option>
@@ -62,7 +57,7 @@ input.datepicker {
                     @endforeach
                 </select>
             </div>
-            <div class="col-md-3">
+            <div class="form-group col-md-3">
                 <label class="form-label">Jenis Perubahan</label>
                 <select class="form-control select2" id="filter-change-type">
                     <option value="">Semua Jenis</option>
@@ -71,7 +66,7 @@ input.datepicker {
                     <option value="no_change">Tidak Ada Perubahan</option>
                 </select>
             </div>
-            <div class="col-md-3">
+            <div class="form-group col-md-3">
                 <label class="form-label">Filter Tanggal</label>
                 <input type="text" class="form-control datepicker" id="filter-date" placeholder="Pilih tanggal">
             </div>