fix styling opnames and mutations same with stock audit

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",
-            allowClear: false,
+            placeholder: "Pilih...",
+            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
-    $("#date_from").datepicker({
-        dateFormat: "yy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        onSelect: function (selectedDate) {
-            console.log("Start date selected:", selectedDate);
-            enableEndDatePicker(selectedDate);
-            $(this).datepicker("hide");
-        },
-        onClose: function (selectedDate) {
-            if (selectedDate) {
-                console.log("Start date closed with value:", selectedDate);
-                enableEndDatePicker(selectedDate);
-            }
-        },
-    });
+    // Initialize start date picker with bootstrap datepicker
+    $("#date_from")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            container: "body",
+            endDate: new Date(), // Don't allow future dates
+        })
+        .on("changeDate", function (e) {
+            console.log("Start date selected:", e.format());
+            enableEndDatePicker(e.format());
+        })
+        .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
-    addCalendarIcons();
-
-    // Setup calendar icon click handlers
-    setupIconClickHandlers();
-
-    // Backup: Listen to change event
+    // Setup change event handlers
     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
-    $("#date_to").datepicker({
-        dateFormat: "yy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        minDate: new Date(startDate), // Convert to Date object for proper comparison
-        onSelect: function (selectedDate) {
-            console.log("End date selected:", selectedDate);
-            $(this).datepicker("hide");
-        },
-    });
+    // Re-initialize with new startDate constraint using bootstrap datepicker
+    $("#date_to")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            container: "body",
+            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({
-        dateFormat: "yy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        onSelect: function (selectedDate) {
-            console.log("End date selected:", selectedDate);
-            $(this).datepicker("hide");
-        },
-    });
+    $("#date_to")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            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() {
-    // 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");
-        }
-    });
-}
+// Calendar icons and click handlers removed since bootstrap datepicker handles these automatically
 
 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
-        $("#dealer_filter").val("").trigger("change"); // Reset Select2
-        $("#date_from").val("");
-        $("#date_to").val("");
+        // Reset select2 elements properly - same as stock audit
+        $("#dealer_filter").val(null).trigger("change.select2");
+
+        // 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
-    $("#date_to").datepicker("destroy");
+    // Remove existing datepicker
+    $("#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",
-            allowClear: false,
+            placeholder: "Pilih...",
+            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
-    $("#date_from .datepicker").datepicker({
-        dateFormat: "yyyy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        autoclose: true,
-        todayHighlight: true,
-        orientation: "bottom auto",
-        language: "id",
-        clearBtn: true,
-        onSelect: function (selectedDate) {
-            console.log("Start date selected:", selectedDate);
-            enableEndDatePicker(selectedDate);
-            $(this).datepicker("hide");
-        },
-        onClose: function (selectedDate) {
-            if (selectedDate) {
-                console.log("Start date closed with value:", selectedDate);
-                enableEndDatePicker(selectedDate);
-            }
-        },
-    });
+    // Initialize start date picker with bootstrap datepicker
+    $("#date_from")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            container: "body",
+            endDate: new Date(), // Don't allow future dates
+        })
+        .on("changeDate", function (e) {
+            console.log("Start date selected:", e.format());
+            enableEndDatePicker(e.format());
+        })
+        .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
-    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
-    $("#date_to").datepicker("destroy");
+    // Remove existing datepicker
+    $("#date_to").datepicker("remove");
 
-    // Re-initialize with new minDate
-    $("#date_to .datepicker").datepicker({
-        dateFormat: "yy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        minDate: new Date(startDate), // Convert to Date object for proper comparison
-        onSelect: function (selectedDate) {
-            console.log("End date selected:", selectedDate);
-            $(this).datepicker("hide");
-        },
-    });
+    // Re-initialize with new startDate constraint using bootstrap datepicker
+    $("#date_to")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            container: "body",
+            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({
-        dateFormat: "yyyy-mm-dd",
-        changeMonth: true,
-        changeYear: true,
-        maxDate: new Date(),
-        yearRange: "-5:+0",
-        onSelect: function (selectedDate) {
-            console.log("End date selected:", selectedDate);
-            $(this).datepicker("hide");
-        },
-    });
+    $("#date_to")
+        .datepicker({
+            format: "yyyy-mm-dd",
+            autoclose: true,
+            todayHighlight: true,
+            orientation: "bottom auto",
+            language: "id",
+            clearBtn: true,
+            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");
+        });
 }
 
-/**
- * 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");
-        }
-    });
-}
+// Calendar icons and click handlers removed since bootstrap datepicker handles these automatically
 
 /**
  * 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
-        $("#dealer_filter").val("").trigger("change"); // Reset Select2
-        $("#date_from").val("");
-        $("#date_to").val("");
+        // Reset select2 elements properly - same as stock audit
+        $("#dealer_filter").val(null).trigger("change.select2");
+
+        // 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
-    $("#date_to").datepicker("destroy");
+    // Remove existing datepicker
+    $("#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