Refactor js build - part 1

app/Http/Controllers/Assets/AssetsController.php

@@ -68,13 +68,7 @@ public function index(Request $request): View
     {
         $this->authorize('index', Asset::class);
         $company = Company::find($request->input('company_id'));
-        // $predefined_filters = PredefinedFilter::Auth();
-        // $predefined_filters = PredefinedFilter::orderBy('name')->get();
-        /*$predefined_filters = PredefinedFilter::where('created_by', auth()->user()->id)
-            ->orderBy('name')
-            ->get();*/
 
-        // $predefined_filter_edit_modal_open = $request->input('predefinedFilterEditModalOpen');
         $predefined_filter_id = $request->input('predefinedFilterId');
 
         // Validate if it's a valid integer
@@ -93,8 +87,7 @@ public function index(Request $request): View
             }
         } 
 
-        // TODO maybe switch later to user / role based view
-        return view('hardware/index')->with('company', $company)/*->with('predefined_filter_edit_modal_open', $predefined_filter_edit_modal_open)*/
+        return view('hardware/index')->with('company', $company)
                                      ->with('predefined_filter_id', $predefined_filter_id)
                                      ->with('predefined_filter_name', $predefined_filter_name);
     }

public/css/dist/advanced-search-index.css

@@ -0,0 +1,70 @@
+        /*
+    Layout container for the whole page.
+    Uses flexbox so the filter and table sections can sit side by side on desktop, and stack on mobile.
+    */
+        .responsive-layout {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+        }
+
+        /*
+    The filter (sidebar) section.
+    Transition allows smooth showing/hiding.
+    */
+        .filter-section {
+            transition: all 0.3s ease;
+        }
+
+        /*
+    When .hide is applied, the filter section is hidden.
+    !important ensures it's forced, even if overridden by other classes.
+    */
+        .filter-section.hide {
+            display: none !important;
+        }
+
+        /* ---------- DESKTOP Styles (screen ≥ 768px) ---------- */
+        @media (min-width: 768px) {
+
+            /*
+        Filter sidebar gets 25% width, and some space on the right.
+        */
+            .filter-section {
+                flex: 0 0 25%;
+                max-width: 25%;
+                padding-right: 15px;
+            }
+
+            /*
+        Main table takes the remaining 75%.
+        */
+            .table-section {
+                flex: 0 0 75%;
+                max-width: 75%;
+            }
+
+            /*
+        If filter is hidden, the table takes full width.
+        */
+            .filter-section.hide+.table-section {
+                flex: 0 0 100%;
+                max-width: 100%;
+            }
+        }
+
+        /* ---------- MOBILE Styles (screen < 768px) ---------- */
+        @media (max-width: 767px) {
+
+            /*
+        Filter takes full width, and sits above the table section.
+        */
+            .filter-section {
+                width: 100%;
+                margin-bottom: 15px;
+            }
+
+            .table-section {
+                width: 100%;
+            }
+        }