localize library cdn, remove approve button from transaction page, fix all fitur running datatable as well, fixing sortable datatable using new cdn, fix modal approve, add note to receiver mutations

app/Http/Controllers/WarehouseManagement/MutationsController.php

@@ -19,8 +19,13 @@ class MutationsController extends Controller
         $menu = Menu::where('link','mutations.index')->first();
         
         if ($request->ajax()) {
-            $data = Mutation::with(['fromDealer', 'toDealer', 'requestedBy.role', 'approvedBy.role', 'receivedBy.role'])
+            // Use a more specific query to avoid join conflicts
-                           ->select('mutations.*');
+            $data = Mutation::query()
+                ->with(['fromDealer', 'toDealer', 'requestedBy.role', 'approvedBy.role', 'receivedBy.role'])
+                ->select([
+                    'mutations.*'
+                ])
+                ->orderBy('mutations.id', 'desc'); // Default order by ID desc
             
             // Filter berdasarkan dealer jika user bukan admin
             if (auth()->user()->dealer_id) {
@@ -60,6 +65,65 @@ class MutationsController extends Controller
                 ->addColumn('action', function($row) {
                     return view('warehouse_management.mutations._action', compact('row'))->render();
                 })
+                // Enhanced filtering
+                ->filterColumn('mutation_number', function($query, $keyword) {
+                    $query->where('mutations.mutation_number', 'like', "%{$keyword}%");
+                })
+                ->filterColumn('from_dealer', function($query, $keyword) {
+                    $query->whereHas('fromDealer', function($q) use ($keyword) {
+                        $q->where('name', 'like', "%{$keyword}%");
+                    });
+                })
+                ->filterColumn('to_dealer', function($query, $keyword) {
+                    $query->whereHas('toDealer', function($q) use ($keyword) {
+                        $q->where('name', 'like', "%{$keyword}%");
+                    });
+                })
+                ->filterColumn('requested_by', function($query, $keyword) {
+                    $query->whereHas('requestedBy', function($q) use ($keyword) {
+                        $q->where('name', 'like', "%{$keyword}%");
+                    });
+                })
+                ->filterColumn('status', function($query, $keyword) {
+                    $query->where('mutations.status', 'like', "%{$keyword}%");
+                })
+                ->filterColumn('created_at', function($query, $keyword) {
+                    $query->whereDate('mutations.created_at', 'like', "%{$keyword}%");
+                })
+                // Enhanced ordering - avoid join conflicts by using subqueries
+                ->orderColumn('mutation_number', function($query, $order) {
+                    $query->orderBy('mutations.mutation_number', $order);
+                })
+                ->orderColumn('from_dealer', function($query, $order) {
+                    $query->orderBy(
+                        DB::raw('(SELECT name FROM dealers WHERE dealers.id = mutations.from_dealer_id)'), 
+                        $order
+                    );
+                })
+                ->orderColumn('to_dealer', function($query, $order) {
+                    $query->orderBy(
+                        DB::raw('(SELECT name FROM dealers WHERE dealers.id = mutations.to_dealer_id)'), 
+                        $order
+                    );
+                })
+                ->orderColumn('requested_by', function($query, $order) {
+                    $query->orderBy(
+                        DB::raw('(SELECT name FROM users WHERE users.id = mutations.requested_by)'), 
+                        $order
+                    );
+                })
+                ->orderColumn('total_items', function($query, $order) {
+                    $query->orderBy(
+                        DB::raw('(SELECT SUM(quantity_requested) FROM mutation_details WHERE mutation_details.mutation_id = mutations.id)'), 
+                        $order
+                    );
+                })
+                ->orderColumn('status', function($query, $order) {
+                    $query->orderBy('mutations.status', $order);
+                })
+                ->orderColumn('created_at', function($query, $order) {
+                    $query->orderBy('mutations.created_at', $order);
+                })
                 ->rawColumns(['status', 'action'])
                 ->make(true);
         }
@@ -319,19 +383,26 @@ class MutationsController extends Controller
         
         // Get mutations that need action from this dealer:
         // 1. 'sent' status where this dealer is the recipient (need to receive)
-        // 2. 'received' status where this dealer is the recipient (need to approve) - CORRECTED LOGIC
+        // 2. 'received' status where this dealer is the recipient (show as waiting for admin approval)
+        // 3. 'approved' status where this dealer is the recipient (show as completed)
+        // 4. 'rejected' status where this dealer is the recipient (show as rejected)
         $data = Mutation::with(['fromDealer', 'toDealer', 'requestedBy.role'])
                        ->where(function($query) use ($dealerId) {
                            // Mutations sent to this dealer that need to be received
                            $query->where('to_dealer_id', $dealerId)
                                  ->where('status', 'sent');
-                           // OR mutations received by this dealer that need approval from recipient
+                           // OR mutations received by this dealer (waiting for admin approval)
                            $query->orWhere(function($subQuery) use ($dealerId) {
                                $subQuery->where('to_dealer_id', $dealerId)
                                        ->where('status', 'received');
                            });
+                           // OR mutations approved/rejected for this dealer (historical data)
+                           $query->orWhere(function($subQuery) use ($dealerId) {
+                               $subQuery->where('to_dealer_id', $dealerId)
+                                       ->whereIn('status', ['approved', 'rejected']);
+                           });
                        })
-                       ->select('mutations.*');
+                       ->orderBy('mutations.id', 'desc'); // Default order by ID desc
         
         return DataTables::of($data)
             ->addIndexColumn()
@@ -345,21 +416,11 @@ class MutationsController extends Controller
                 return $row->toDealer->name ?? '-';
             })
             ->addColumn('status', function($row) {
-                $statusColor = $row->status_color;
+                $status = $row->status instanceof MutationStatus ? $row->status : MutationStatus::from($row->status);
-                $statusLabel = $row->status_label;
+                $textColorClass = $status->textColorClass();
+                $label = $status->label();
                 
-                $textColorClass = match($statusColor) {
+                return "<span class=\"font-weight-bold {$textColorClass}\">{$label}</span>";
-                    'success' => 'text-success',
-                    'warning' => 'text-warning',
-                    'danger' => 'text-danger', 
-                    'info' => 'text-info',
-                    'primary' => 'text-primary',
-                    'brand' => 'text-primary',
-                    'secondary' => 'text-muted',
-                    default => 'text-dark'
-                };
-                
-                return "<span class=\"font-weight-bold {$textColorClass}\">{$statusLabel}</span>";
             })
             ->addColumn('total_items', function($row) {
                 return number_format($row->total_items, 0);
@@ -376,16 +437,23 @@ class MutationsController extends Controller
                                     Detail & Terima
                                 </button>';
                 } elseif ($row->status->value === 'received' && $row->to_dealer_id == $dealerId) {
-                    // For received mutations where current dealer is recipient - show approve/reject buttons
+                    // For received mutations where current dealer is recipient - only show detail (approval is admin only)
-                    $buttons .= '<button type="button" class="btn btn-info btn-sm btn-detail mr-1" onclick="showMutationDetail('.$row->id.')">
+                    $buttons .= '<button type="button" class="btn btn-info btn-sm btn-detail" onclick="showMutationDetail('.$row->id.')">
                                     Detail
                                 </button>';
-                    $buttons .= '<button type="button" class="btn btn-success btn-sm btn-approve-mutation mr-1" data-id="'.$row->id.'">
+                    $buttons .= '<div class="mt-1"><small class="text-muted">Menunggu persetujuan admin</small></div>';
-                                    Setujui
+                } elseif ($row->status->value === 'approved' && $row->to_dealer_id == $dealerId) {
+                    // For approved mutations - show detail only
+                    $buttons .= '<button type="button" class="btn btn-info btn-sm btn-detail" onclick="showMutationDetail('.$row->id.')">
+                                    Detail
                                 </button>';
-                    $buttons .= '<button type="button" class="btn btn-danger btn-sm btn-reject-mutation" data-id="'.$row->id.'">
+                    $buttons .= '<div class="mt-1"><small class="text-success">Disetujui admin</small></div>';
-                                    Tolak
+                } elseif ($row->status->value === 'rejected' && $row->to_dealer_id == $dealerId) {
+                    // For rejected mutations - show detail only
+                    $buttons .= '<button type="button" class="btn btn-info btn-sm btn-detail" onclick="showMutationDetail('.$row->id.')">
+                                    Detail
                                 </button>';
+                    $buttons .= '<div class="mt-1"><small class="text-danger">Ditolak admin</small></div>';
                 }
                 
                 return $buttons;

app/Http/Controllers/WarehouseManagement/ProductsController.php

@@ -26,8 +26,10 @@ class ProductsController extends Controller
     {
         $menu = Menu::where('link','products.index')->first();
         if($request->ajax()){
-            $data = Product::with(['category', 'stocks'])
+            $data = Product::with(['category'])
-                         ->orderBy('id', 'desc');
+                         ->select('products.*')
+                         ->leftJoin('product_categories', 'products.product_category_id', '=', 'product_categories.id');
+            
             return DataTables::of($data)
             ->addIndexColumn()
             ->addColumn('category_name', function ($row) {
@@ -55,6 +57,12 @@ class ProductsController extends Controller
                 
                 return $btn;
             })
+            ->filterColumn('category_name', function($query, $keyword) {
+                $query->where('product_categories.name', 'like', "%{$keyword}%");
+            })
+            ->orderColumn('category_name', function ($query, $order) {
+                $query->orderBy('product_categories.name', $order);
+            })
             ->rawColumns(['action'])
             ->make(true);
         }
@@ -196,7 +204,7 @@ class ProductsController extends Controller
 
     public function all_products(){
         try{
-            $products = Product::where('is_active', true)->select('id','name')->get();
+            $products = Product::where('active', true)->select('id','name')->get();
             return response()->json($products);
         }catch(\Exception $ex){
             Log::error($ex->getMessage());

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "ckb",
+    "name": "html",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
@@ -10,14 +10,21 @@
                 "bootstrap": "^5.1.3",
                 "browser-sync": "^2.29.3",
                 "browser-sync-webpack-plugin": "^2.3.0",
+                "chart.js": "^4.3.0",
+                "chartjs-plugin-datalabels": "^2.2.0",
                 "concurrently": "^9.1.2",
                 "cross-env": "^7.0.3",
+                "datatables.net": "^1.13.6",
+                "datatables.net-bs4": "^1.13.6",
+                "datatables.net-fixedcolumns": "^4.3.0",
+                "datatables.net-fixedcolumns-bs4": "^4.3.0",
                 "laravel-mix": "^6.0.49",
                 "lodash": "^4.17.19",
                 "postcss": "^8.1.14",
                 "resolve-url-loader": "^5.0.0",
                 "sass": "^1.32.11",
                 "sass-loader": "^11.0.1",
+                "sweetalert2": "^11.0.0",
                 "webpack": "^5.99.9",
                 "webpack-cli": "^6.0.1",
                 "webpack-dev-server": "^4.15.2"
@@ -1835,6 +1842,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "dev": true
+        },
         "node_modules/@leichtgewicht/ip-codec": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -3622,6 +3635,27 @@
                 "node": "*"
             }
         },
+        "node_modules/chart.js": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+            "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+            "dev": true,
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
+        "node_modules/chartjs-plugin-datalabels": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+            "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+            "dev": true,
+            "peerDependencies": {
+                "chart.js": ">=3.0.0"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -4450,6 +4484,46 @@
                 "node": ">=8.0.0"
             }
         },
+        "node_modules/datatables.net": {
+            "version": "1.13.11",
+            "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.11.tgz",
+            "integrity": "sha512-AE6RkMXziRaqzPcu/pl3SJXeRa6fmXQG/fVjuRESujvkzqDCYEeKTTpPMuVJSGYJpPi32WGSphVNNY1G4nSN/g==",
+            "dev": true,
+            "dependencies": {
+                "jquery": "1.8 - 4"
+            }
+        },
+        "node_modules/datatables.net-bs4": {
+            "version": "1.13.11",
+            "resolved": "https://registry.npmjs.org/datatables.net-bs4/-/datatables.net-bs4-1.13.11.tgz",
+            "integrity": "sha512-1LnxzQDFKpwvBETc8wtUtQ+pUXhs6NJomNST5pRzzHAccckkj9rZeOp3mevKDnDJKuNhBM1Y0rIeZGylJnqh9A==",
+            "dev": true,
+            "dependencies": {
+                "datatables.net": "1.13.11",
+                "jquery": "1.8 - 4"
+            }
+        },
+        "node_modules/datatables.net-fixedcolumns": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns/-/datatables.net-fixedcolumns-4.3.1.tgz",
+            "integrity": "sha512-K5hEr5PIIHFMLd2sR9CBw3RRhf0nJbbsc5NHWnfjUUtnr9d808xbifuej3TpdKOtGeRJgAnRktiL9f30sM32CQ==",
+            "dev": true,
+            "dependencies": {
+                "datatables.net": "^1.13.0",
+                "jquery": ">=1.7"
+            }
+        },
+        "node_modules/datatables.net-fixedcolumns-bs4": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns-bs4/-/datatables.net-fixedcolumns-bs4-4.3.1.tgz",
+            "integrity": "sha512-/JkG5vAil/KEB+FFvl0kcvqFMVHXZgq+6yzImlZaHE3NSApV8L5eWnyIQakShczPcxrU9iozGOxvtRRIFl0rqA==",
+            "dev": true,
+            "dependencies": {
+                "datatables.net-bs4": "^1.13.0",
+                "datatables.net-fixedcolumns": "4.3.1",
+                "jquery": ">=1.7"
+            }
+        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6468,6 +6542,12 @@
                 "url": "https://github.com/chalk/supports-color?sponsor=1"
             }
         },
+        "node_modules/jquery": {
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+            "dev": true
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9760,6 +9840,16 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/sweetalert2": {
+            "version": "11.22.0",
+            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.0.tgz",
+            "integrity": "sha512-pSMuRGDULhh+wrFkO22O0YsIXxs8yFE0O+WVYXcqc/sTa1oRnf0JlR+vfQIRY1QM1UeFfnCjyw6DYnG75/oxiQ==",
+            "dev": true,
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/limonte"
+            }
+        },
         "node_modules/tapable": {
             "version": "2.2.2",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
@@ -12134,6 +12224,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "dev": true
+        },
         "@leichtgewicht/ip-codec": {
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -13549,6 +13645,22 @@
             "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
             "dev": true
         },
+        "chart.js": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+            "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+            "dev": true,
+            "requires": {
+                "@kurkle/color": "^0.3.0"
+            }
+        },
+        "chartjs-plugin-datalabels": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+            "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+            "dev": true,
+            "requires": {}
+        },
         "chokidar": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -14175,6 +14287,46 @@
                 "css-tree": "^1.1.2"
             }
         },
+        "datatables.net": {
+            "version": "1.13.11",
+            "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.11.tgz",
+            "integrity": "sha512-AE6RkMXziRaqzPcu/pl3SJXeRa6fmXQG/fVjuRESujvkzqDCYEeKTTpPMuVJSGYJpPi32WGSphVNNY1G4nSN/g==",
+            "dev": true,
+            "requires": {
+                "jquery": "1.8 - 4"
+            }
+        },
+        "datatables.net-bs4": {
+            "version": "1.13.11",
+            "resolved": "https://registry.npmjs.org/datatables.net-bs4/-/datatables.net-bs4-1.13.11.tgz",
+            "integrity": "sha512-1LnxzQDFKpwvBETc8wtUtQ+pUXhs6NJomNST5pRzzHAccckkj9rZeOp3mevKDnDJKuNhBM1Y0rIeZGylJnqh9A==",
+            "dev": true,
+            "requires": {
+                "datatables.net": "1.13.11",
+                "jquery": "1.8 - 4"
+            }
+        },
+        "datatables.net-fixedcolumns": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns/-/datatables.net-fixedcolumns-4.3.1.tgz",
+            "integrity": "sha512-K5hEr5PIIHFMLd2sR9CBw3RRhf0nJbbsc5NHWnfjUUtnr9d808xbifuej3TpdKOtGeRJgAnRktiL9f30sM32CQ==",
+            "dev": true,
+            "requires": {
+                "datatables.net": "^1.13.0",
+                "jquery": ">=1.7"
+            }
+        },
+        "datatables.net-fixedcolumns-bs4": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/datatables.net-fixedcolumns-bs4/-/datatables.net-fixedcolumns-bs4-4.3.1.tgz",
+            "integrity": "sha512-/JkG5vAil/KEB+FFvl0kcvqFMVHXZgq+6yzImlZaHE3NSApV8L5eWnyIQakShczPcxrU9iozGOxvtRRIFl0rqA==",
+            "dev": true,
+            "requires": {
+                "datatables.net-bs4": "^1.13.0",
+                "datatables.net-fixedcolumns": "4.3.1",
+                "jquery": ">=1.7"
+            }
+        },
         "debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -15603,6 +15755,12 @@
                 }
             }
         },
+        "jquery": {
+            "version": "3.7.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+            "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+            "dev": true
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -17963,6 +18121,12 @@
                 "stable": "^0.1.8"
             }
         },
+        "sweetalert2": {
+            "version": "11.22.0",
+            "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.0.tgz",
+            "integrity": "sha512-pSMuRGDULhh+wrFkO22O0YsIXxs8yFE0O+WVYXcqc/sTa1oRnf0JlR+vfQIRY1QM1UeFfnCjyw6DYnG75/oxiQ==",
+            "dev": true
+        },
         "tapable": {
             "version": "2.2.2",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",

package.json

@@ -15,14 +15,21 @@
         "bootstrap": "^5.1.3",
         "browser-sync": "^2.29.3",
         "browser-sync-webpack-plugin": "^2.3.0",
+        "chart.js": "^4.3.0",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "concurrently": "^9.1.2",
         "cross-env": "^7.0.3",
+        "datatables.net": "^1.13.6",
+        "datatables.net-bs4": "^1.13.6",
+        "datatables.net-fixedcolumns": "^4.3.0",
+        "datatables.net-fixedcolumns-bs4": "^4.3.0",
         "laravel-mix": "^6.0.49",
         "lodash": "^4.17.19",
         "postcss": "^8.1.14",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.32.11",
         "sass-loader": "^11.0.1",
+        "sweetalert2": "^11.0.0",
         "webpack": "^5.99.9",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^4.15.2"

public/css/dataTables.bootstrap4.min.css

@@ -0,0 +1,440 @@
+:root {
+    --dt-row-selected: 2, 117, 216;
+    --dt-row-selected-text: 255, 255, 255;
+    --dt-row-selected-link: 9, 10, 11;
+    --dt-row-stripe: 0, 0, 0;
+    --dt-row-hover: 0, 0, 0;
+    --dt-column-ordering: 0, 0, 0;
+    --dt-html-background: white;
+}
+:root.dark {
+    --dt-html-background: rgb(33, 37, 41);
+}
+table.dataTable td.dt-control {
+    text-align: center;
+    cursor: pointer;
+}
+table.dataTable td.dt-control:before {
+    display: inline-block;
+    color: rgba(0, 0, 0, 0.5);
+    content: "►";
+}
+table.dataTable tr.dt-hasChild td.dt-control:before {
+    content: "▼";
+}
+html.dark table.dataTable td.dt-control:before {
+    color: rgba(255, 255, 255, 0.5);
+}
+html.dark table.dataTable tr.dt-hasChild td.dt-control:before {
+    color: rgba(255, 255, 255, 0.5);
+}
+table.dataTable thead > tr > th.sorting,
+table.dataTable thead > tr > th.sorting_asc,
+table.dataTable thead > tr > th.sorting_desc,
+table.dataTable thead > tr > th.sorting_asc_disabled,
+table.dataTable thead > tr > th.sorting_desc_disabled,
+table.dataTable thead > tr > td.sorting,
+table.dataTable thead > tr > td.sorting_asc,
+table.dataTable thead > tr > td.sorting_desc,
+table.dataTable thead > tr > td.sorting_asc_disabled,
+table.dataTable thead > tr > td.sorting_desc_disabled {
+    cursor: pointer;
+    position: relative;
+    padding-right: 26px;
+}
+table.dataTable thead > tr > th.sorting:before,
+table.dataTable thead > tr > th.sorting:after,
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_asc:after,
+table.dataTable thead > tr > th.sorting_desc:before,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > th.sorting_asc_disabled:after,
+table.dataTable thead > tr > th.sorting_desc_disabled:before,
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting:before,
+table.dataTable thead > tr > td.sorting:after,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_asc:after,
+table.dataTable thead > tr > td.sorting_desc:before,
+table.dataTable thead > tr > td.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_asc_disabled:after,
+table.dataTable thead > tr > td.sorting_desc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    position: absolute;
+    display: block;
+    opacity: 0.125;
+    right: 10px;
+    line-height: 9px;
+    font-size: 0.8em;
+}
+table.dataTable thead > tr > th.sorting:before,
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_desc:before,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > th.sorting_desc_disabled:before,
+table.dataTable thead > tr > td.sorting:before,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_desc:before,
+table.dataTable thead > tr > td.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:before {
+    bottom: 50%;
+    content: "▲";
+    content: "▲"/"";
+}
+table.dataTable thead > tr > th.sorting:after,
+table.dataTable thead > tr > th.sorting_asc:after,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:after,
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting:after,
+table.dataTable thead > tr > td.sorting_asc:after,
+table.dataTable thead > tr > td.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:after,
+table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    top: 50%;
+    content: "▼";
+    content: "▼"/"";
+}
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_desc:after {
+    opacity: 0.6;
+}
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:before {
+    display: none;
+}
+table.dataTable thead > tr > th:active,
+table.dataTable thead > tr > td:active {
+    outline: none;
+}
+div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,
+div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,
+div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,
+div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {
+    display: none;
+}
+div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    margin-top: -26px;
+    text-align: center;
+    padding: 2px;
+}
+div.dataTables_processing > div:last-child {
+    position: relative;
+    width: 80px;
+    height: 15px;
+    margin: 1em auto;
+}
+div.dataTables_processing > div:last-child > div {
+    position: absolute;
+    top: 0;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: rgb(2, 117, 216);
+    background: rgb(var(--dt-row-selected));
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+div.dataTables_processing > div:last-child > div:nth-child(1) {
+    left: 8px;
+    animation: datatables-loader-1 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(2) {
+    left: 8px;
+    animation: datatables-loader-2 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(3) {
+    left: 32px;
+    animation: datatables-loader-2 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(4) {
+    left: 56px;
+    animation: datatables-loader-3 0.6s infinite;
+}
+@keyframes datatables-loader-1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes datatables-loader-3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes datatables-loader-2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+    white-space: nowrap;
+}
+table.dataTable th.dt-left,
+table.dataTable td.dt-left {
+    text-align: left;
+}
+table.dataTable th.dt-center,
+table.dataTable td.dt-center,
+table.dataTable td.dataTables_empty {
+    text-align: center;
+}
+table.dataTable th.dt-right,
+table.dataTable td.dt-right {
+    text-align: right;
+}
+table.dataTable th.dt-justify,
+table.dataTable td.dt-justify {
+    text-align: justify;
+}
+table.dataTable th.dt-nowrap,
+table.dataTable td.dt-nowrap {
+    white-space: nowrap;
+}
+table.dataTable thead th,
+table.dataTable thead td,
+table.dataTable tfoot th,
+table.dataTable tfoot td {
+    text-align: left;
+}
+table.dataTable thead th.dt-head-left,
+table.dataTable thead td.dt-head-left,
+table.dataTable tfoot th.dt-head-left,
+table.dataTable tfoot td.dt-head-left {
+    text-align: left;
+}
+table.dataTable thead th.dt-head-center,
+table.dataTable thead td.dt-head-center,
+table.dataTable tfoot th.dt-head-center,
+table.dataTable tfoot td.dt-head-center {
+    text-align: center;
+}
+table.dataTable thead th.dt-head-right,
+table.dataTable thead td.dt-head-right,
+table.dataTable tfoot th.dt-head-right,
+table.dataTable tfoot td.dt-head-right {
+    text-align: right;
+}
+table.dataTable thead th.dt-head-justify,
+table.dataTable thead td.dt-head-justify,
+table.dataTable tfoot th.dt-head-justify,
+table.dataTable tfoot td.dt-head-justify {
+    text-align: justify;
+}
+table.dataTable thead th.dt-head-nowrap,
+table.dataTable thead td.dt-head-nowrap,
+table.dataTable tfoot th.dt-head-nowrap,
+table.dataTable tfoot td.dt-head-nowrap {
+    white-space: nowrap;
+}
+table.dataTable tbody th.dt-body-left,
+table.dataTable tbody td.dt-body-left {
+    text-align: left;
+}
+table.dataTable tbody th.dt-body-center,
+table.dataTable tbody td.dt-body-center {
+    text-align: center;
+}
+table.dataTable tbody th.dt-body-right,
+table.dataTable tbody td.dt-body-right {
+    text-align: right;
+}
+table.dataTable tbody th.dt-body-justify,
+table.dataTable tbody td.dt-body-justify {
+    text-align: justify;
+}
+table.dataTable tbody th.dt-body-nowrap,
+table.dataTable tbody td.dt-body-nowrap {
+    white-space: nowrap;
+}
+table.dataTable {
+    clear: both;
+    margin-top: 6px !important;
+    margin-bottom: 6px !important;
+    max-width: none !important;
+    border-collapse: separate !important;
+    border-spacing: 0;
+}
+table.dataTable td,
+table.dataTable th {
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+table.dataTable td.dataTables_empty,
+table.dataTable th.dataTables_empty {
+    text-align: center;
+}
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+    white-space: nowrap;
+}
+table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {
+    background-color: transparent;
+}
+table.dataTable > tbody > tr {
+    background-color: transparent;
+}
+table.dataTable > tbody > tr.selected > * {
+    box-shadow: inset 0 0 0 9999px rgb(2, 117, 216);
+    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
+    color: rgb(255, 255, 255);
+    color: rgb(var(--dt-row-selected-text));
+}
+table.dataTable > tbody > tr.selected a {
+    color: rgb(9, 10, 11);
+    color: rgb(var(--dt-row-selected-link));
+}
+table.dataTable.table-striped > tbody > tr.odd > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
+}
+table.dataTable.table-striped > tbody > tr.odd.selected > * {
+    box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
+}
+table.dataTable.table-hover > tbody > tr:hover > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);
+}
+table.dataTable.table-hover > tbody > tr.selected:hover > * {
+    box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);
+}
+div.dataTables_wrapper div.dataTables_length label {
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+}
+div.dataTables_wrapper div.dataTables_length select {
+    width: auto;
+    display: inline-block;
+}
+div.dataTables_wrapper div.dataTables_filter {
+    text-align: right;
+}
+div.dataTables_wrapper div.dataTables_filter label {
+    font-weight: normal;
+    white-space: nowrap;
+    text-align: left;
+}
+div.dataTables_wrapper div.dataTables_filter input {
+    margin-left: 0.5em;
+    display: inline-block;
+    width: auto;
+}
+div.dataTables_wrapper div.dataTables_info {
+    padding-top: 0.85em;
+}
+div.dataTables_wrapper div.dataTables_paginate {
+    margin: 0;
+    white-space: nowrap;
+    text-align: right;
+}
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+    margin: 2px 0;
+    white-space: nowrap;
+    justify-content: flex-end;
+}
+div.dataTables_wrapper div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    margin-top: -26px;
+    text-align: center;
+    padding: 1em 0;
+}
+div.dataTables_scrollHead table.dataTable {
+    margin-bottom: 0 !important;
+}
+div.dataTables_scrollBody > table {
+    border-top: none;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+div.dataTables_scrollBody > table > thead .sorting:before,
+div.dataTables_scrollBody > table > thead .sorting_asc:before,
+div.dataTables_scrollBody > table > thead .sorting_desc:before,
+div.dataTables_scrollBody > table > thead .sorting:after,
+div.dataTables_scrollBody > table > thead .sorting_asc:after,
+div.dataTables_scrollBody > table > thead .sorting_desc:after {
+    display: none;
+}
+div.dataTables_scrollBody > table > tbody tr:first-child th,
+div.dataTables_scrollBody > table > tbody tr:first-child td {
+    border-top: none;
+}
+div.dataTables_scrollFoot > .dataTables_scrollFootInner {
+    box-sizing: content-box;
+}
+div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
+    margin-top: 0 !important;
+    border-top: none;
+}
+@media screen and (max-width: 767px) {
+    div.dataTables_wrapper div.dataTables_length,
+    div.dataTables_wrapper div.dataTables_filter,
+    div.dataTables_wrapper div.dataTables_info,
+    div.dataTables_wrapper div.dataTables_paginate {
+        text-align: center;
+    }
+    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+        justify-content: center !important;
+    }
+}
+table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
+    padding-right: 20px;
+}
+table.table-bordered.dataTable {
+    border-right-width: 0;
+}
+table.table-bordered.dataTable th,
+table.table-bordered.dataTable td {
+    border-left-width: 0;
+}
+table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable td:last-child,
+table.table-bordered.dataTable td:last-child {
+    border-right-width: 1px;
+}
+table.table-bordered.dataTable tbody th,
+table.table-bordered.dataTable tbody td {
+    border-bottom-width: 0;
+}
+div.dataTables_scrollHead table.table-bordered {
+    border-bottom-width: 0;
+}
+div.table-responsive > div.dataTables_wrapper > div.row {
+    margin: 0;
+}
+div.table-responsive
+    > div.dataTables_wrapper
+    > div.row
+    > div[class^="col-"]:first-child {
+    padding-left: 0;
+}
+div.table-responsive
+    > div.dataTables_wrapper
+    > div.row
+    > div[class^="col-"]:last-child {
+    padding-right: 0;
+}

public/css/fixedColumns.bootstrap4.min.css

@@ -0,0 +1,36 @@
+table.dataTable thead tr > .dtfc-fixed-left,
+table.dataTable thead tr > .dtfc-fixed-right,
+table.dataTable tfoot tr > .dtfc-fixed-left,
+table.dataTable tfoot tr > .dtfc-fixed-right {
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    background-color: white;
+}
+table.dataTable tbody tr > .dtfc-fixed-left,
+table.dataTable tbody tr > .dtfc-fixed-right {
+    z-index: 1;
+    background-color: white;
+}
+div.dtfc-left-top-blocker,
+div.dtfc-right-top-blocker {
+    background-color: white;
+}
+div.dtfc-right-top-blocker,
+div.dtfc-left-top-blocker {
+    margin-top: 6px;
+    border-bottom: 0px solid #ddd !important;
+}
+table.dataTable.table-bordered.dtfc-has-left {
+    border-left: none;
+}
+div.dataTables_scroll.dtfc-has-left table.table-bordered {
+    border-left: none;
+}
+div.dataTables_scrollBody {
+    border-left: 1px solid #ddd !important;
+}
+div.dataTables_scrollFootInner table.table-bordered tr th:first-child,
+div.dataTables_scrollHeadInner table.table-bordered tr th:first-child {
+    border-left: 1px solid #ddd !important;
+}

public/css/google-font.css

@@ -0,0 +1,835 @@
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

public/css/vendor/fixedColumns.bootstrap4.min.css

@@ -0,0 +1 @@
+table.dataTable thead tr>.dtfc-fixed-left,table.dataTable thead tr>.dtfc-fixed-right,table.dataTable tfoot tr>.dtfc-fixed-left,table.dataTable tfoot tr>.dtfc-fixed-right{top:0;bottom:0;z-index:3;background-color:white}table.dataTable tbody tr>.dtfc-fixed-left,table.dataTable tbody tr>.dtfc-fixed-right{z-index:1;background-color:white}div.dtfc-left-top-blocker,div.dtfc-right-top-blocker{background-color:white}html.dark table.dataTable thead tr>.dtfc-fixed-left,html.dark table.dataTable thead tr>.dtfc-fixed-right,html.dark table.dataTable tfoot tr>.dtfc-fixed-left,html.dark table.dataTable tfoot tr>.dtfc-fixed-right{background-color:var(--dt-html-background)}html.dark table.dataTable tbody tr>.dtfc-fixed-left,html.dark table.dataTable tbody tr>.dtfc-fixed-right{background-color:var(--dt-html-background)}html.dark div.dtfc-left-top-blocker,html.dark div.dtfc-right-top-blocker{background-color:var(--dt-html-background)}div.dtfc-right-top-blocker,div.dtfc-left-top-blocker{margin-top:6px;border-bottom:0px solid #ddd !important}table.dataTable.table-bordered.dtfc-has-left{border-left:none}div.dataTables_scroll.dtfc-has-left table.table-bordered{border-left:none}div.dataTables_scrollBody{border-left:1px solid #ddd !important}div.dataTables_scrollFootInner table.table-bordered tr th:first-child,div.dataTables_scrollHeadInner table.table-bordered tr th:first-child{border-left:1px solid #ddd !important}

public/js/cdn/dataTables.bootstrap4.min.js

@@ -0,0 +1,129 @@
+/*! DataTables Bootstrap 4 integration
+ * ©2011-2017 SpryMedia Ltd - datatables.net/license
+ */
+!(function (t) {
+    var n, o;
+    "function" == typeof define && define.amd
+        ? define(["jquery", "datatables.net"], function (e) {
+              return t(e, window, document);
+          })
+        : "object" == typeof exports
+        ? ((n = require("jquery")),
+          (o = function (e, a) {
+              a.fn.dataTable || require("datatables.net")(e, a);
+          }),
+          "undefined" == typeof window
+              ? (module.exports = function (e, a) {
+                    return (
+                        (e = e || window),
+                        (a = a || n(e)),
+                        o(e, a),
+                        t(a, 0, e.document)
+                    );
+                })
+              : (o(window, n),
+                (module.exports = t(n, window, window.document))))
+        : t(jQuery, window, document);
+})(function (x, e, n, o) {
+    "use strict";
+    var r = x.fn.dataTable;
+    return (
+        x.extend(!0, r.defaults, {
+            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+            renderer: "bootstrap",
+        }),
+        x.extend(r.ext.classes, {
+            sWrapper: "dataTables_wrapper dt-bootstrap4",
+            sFilterInput: "form-control form-control-sm",
+            sLengthSelect:
+                "custom-select custom-select-sm form-control form-control-sm",
+            sProcessing: "dataTables_processing card",
+            sPageButton: "paginate_button page-item",
+        }),
+        (r.ext.renderer.pageButton.bootstrap = function (i, e, d, a, l, c) {
+            function u(e, a) {
+                for (
+                    var t,
+                        n,
+                        o = function (e) {
+                            e.preventDefault(),
+                                x(e.currentTarget).hasClass("disabled") ||
+                                    m.page() == e.data.action ||
+                                    m.page(e.data.action).draw("page");
+                        },
+                        r = 0,
+                        s = a.length;
+                    r < s;
+                    r++
+                )
+                    if (((t = a[r]), Array.isArray(t))) u(e, t);
+                    else {
+                        switch (((f = p = ""), t)) {
+                            case "ellipsis":
+                                (p = "&#x2026;"), (f = "disabled");
+                                break;
+                            case "first":
+                                (p = g.sFirst),
+                                    (f = t + (0 < l ? "" : " disabled"));
+                                break;
+                            case "previous":
+                                (p = g.sPrevious),
+                                    (f = t + (0 < l ? "" : " disabled"));
+                                break;
+                            case "next":
+                                (p = g.sNext),
+                                    (f = t + (l < c - 1 ? "" : " disabled"));
+                                break;
+                            case "last":
+                                (p = g.sLast),
+                                    (f = t + (l < c - 1 ? "" : " disabled"));
+                                break;
+                            default:
+                                (p = t + 1), (f = l === t ? "active" : "");
+                        }
+                        p &&
+                            ((n = -1 !== f.indexOf("disabled")),
+                            (n = x("<li>", {
+                                class: b.sPageButton + " " + f,
+                                id:
+                                    0 === d && "string" == typeof t
+                                        ? i.sTableId + "_" + t
+                                        : null,
+                            })
+                                .append(
+                                    x("<a>", {
+                                        href: n ? null : "#",
+                                        "aria-controls": i.sTableId,
+                                        "aria-disabled": n ? "true" : null,
+                                        "aria-label": w[t],
+                                        role: "link",
+                                        "aria-current":
+                                            "active" === f ? "page" : null,
+                                        "data-dt-idx": t,
+                                        tabindex: n ? -1 : i.iTabIndex,
+                                        class: "page-link",
+                                    }).html(p)
+                                )
+                                .appendTo(e)),
+                            i.oApi._fnBindAction(n, { action: t }, o));
+                    }
+            }
+            var p,
+                f,
+                t,
+                m = new r.Api(i),
+                b = i.oClasses,
+                g = i.oLanguage.oPaginate,
+                w = i.oLanguage.oAria.paginate || {};
+            try {
+                t = x(e).find(n.activeElement).data("dt-idx");
+            } catch (e) {}
+            u(x(e).empty().html('<ul class="pagination"/>').children("ul"), a),
+                t !== o &&
+                    x(e)
+                        .find("[data-dt-idx=" + t + "]")
+                        .trigger("focus");
+        }),
+        r
+    );
+});

public/js/cdn/dataTables.fixedColumns.min.js

@@ -0,0 +1,415 @@
+/*! FixedColumns 4.2.2
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!(function (e) {
+    var i, l;
+    "function" == typeof define && define.amd
+        ? define(["jquery", "datatables.net"], function (t) {
+              return e(t, window, document);
+          })
+        : "object" == typeof exports
+        ? ((i = require("jquery")),
+          (l = function (t, s) {
+              s.fn.dataTable || require("datatables.net")(t, s);
+          }),
+          "undefined" != typeof window
+              ? (module.exports = function (t, s) {
+                    return (
+                        (t = t || window),
+                        (s = s || i(t)),
+                        l(t, s),
+                        e(s, 0, t.document)
+                    );
+                })
+              : (l(window, i),
+                (module.exports = e(i, window, window.document))))
+        : e(jQuery, window, document);
+})(function (l, t, s, F) {
+    "use strict";
+    var A,
+        i,
+        e,
+        o,
+        r = l.fn.dataTable;
+    function d(t, s) {
+        var e = this;
+        if (i && i.versionCheck && i.versionCheck("1.10.0"))
+            return (
+                (t = new i.Api(t)),
+                (this.classes = A.extend(!0, {}, d.classes)),
+                (this.c = A.extend(!0, {}, d.defaults, s)),
+                (s && s.left !== F) ||
+                    this.c.leftColumns === F ||
+                    (this.c.left = this.c.leftColumns),
+                (s && s.right !== F) ||
+                    this.c.rightColumns === F ||
+                    (this.c.right = this.c.rightColumns),
+                (this.s = {
+                    barWidth: 0,
+                    dt: t,
+                    rtl: "rtl" === A("body").css("direction"),
+                }),
+                (s = {
+                    bottom: "0px",
+                    display: "block",
+                    position: "absolute",
+                    width: this.s.barWidth + 1 + "px",
+                }),
+                (this.dom = {
+                    leftBottomBlocker: A("<div>")
+                        .css(s)
+                        .css("left", 0)
+                        .addClass(this.classes.leftBottomBlocker),
+                    leftTopBlocker: A("<div>")
+                        .css(s)
+                        .css({ left: 0, top: 0 })
+                        .addClass(this.classes.leftTopBlocker),
+                    rightBottomBlocker: A("<div>")
+                        .css(s)
+                        .css("right", 0)
+                        .addClass(this.classes.rightBottomBlocker),
+                    rightTopBlocker: A("<div>")
+                        .css(s)
+                        .css({ right: 0, top: 0 })
+                        .addClass(this.classes.rightTopBlocker),
+                }),
+                this.s.dt.settings()[0]._bInitComplete
+                    ? (this._addStyles(), this._setKeyTableListener())
+                    : t.one("init.dt", function () {
+                          e._addStyles(), e._setKeyTableListener();
+                      }),
+                t.on("column-sizing.dt", function () {
+                    return e._addStyles();
+                }),
+                (t.settings()[0]._fixedColumns = this)
+            );
+        throw new Error("StateRestore requires DataTables 1.10 or newer");
+    }
+    function h(t, s) {
+        void 0 === s && (s = null);
+        (t = new r.Api(t)),
+            (s = s || t.init().fixedColumns || r.defaults.fixedColumns);
+        new e(t, s);
+    }
+    return (
+        (d.prototype.left = function (t) {
+            return (
+                t !== F && ((this.c.left = t), this._addStyles()), this.c.left
+            );
+        }),
+        (d.prototype.right = function (t) {
+            return (
+                t !== F && ((this.c.right = t), this._addStyles()), this.c.right
+            );
+        }),
+        (d.prototype._addStyles = function () {
+            this.s.dt.settings()[0].oScroll.sY &&
+                ((s = A(this.s.dt.table().node()).closest(
+                    "div.dataTables_scrollBody"
+                )[0]),
+                (e = this.s.dt.settings()[0].oBrowser.barWidth),
+                s.offsetWidth - s.clientWidth >= e
+                    ? (this.s.barWidth = e)
+                    : (this.s.barWidth = 0),
+                this.dom.rightTopBlocker.css("width", this.s.barWidth + 1),
+                this.dom.leftTopBlocker.css("width", this.s.barWidth + 1),
+                this.dom.rightBottomBlocker.css("width", this.s.barWidth + 1),
+                this.dom.leftBottomBlocker.css("width", this.s.barWidth + 1));
+            for (
+                var t = null,
+                    s = this.s.dt.column(0).header(),
+                    e = null,
+                    i =
+                        (null !== s &&
+                            ((e = (s = A(s)).outerHeight() + 1),
+                            (t = A(s.closest("div.dataTables_scroll")).css(
+                                "position",
+                                "relative"
+                            ))),
+                        this.s.dt.column(0).footer()),
+                    l = null,
+                    o =
+                        (null !== i &&
+                            ((l = (i = A(i)).outerHeight()), null === t) &&
+                            (t = A(i.closest("div.dataTables_scroll")).css(
+                                "position",
+                                "relative"
+                            )),
+                        this.s.dt.columns().data().toArray().length),
+                    r = 0,
+                    d = 0,
+                    h = A(this.s.dt.table().node())
+                        .children("tbody")
+                        .children("tr"),
+                    n = 0,
+                    a = new Map(),
+                    c = 0;
+                c < o;
+                c++
+            ) {
+                var f = this.s.dt.column(c);
+                if ((0 < c && a.set(c - 1, n), f.visible())) {
+                    var u = A(f.header()),
+                        g = A(f.footer());
+                    if (c - n < this.c.left) {
+                        if (
+                            (A(this.s.dt.table().node()).addClass(
+                                this.classes.tableFixedLeft
+                            ),
+                            t.addClass(this.classes.tableFixedLeft),
+                            0 < c - n)
+                        )
+                            for (var C = c; C + 1 < o; ) {
+                                if (
+                                    (y = this.s.dt.column(C - 1, {
+                                        page: "current",
+                                    })).visible()
+                                ) {
+                                    (r += A(y.nodes()[0]).outerWidth()),
+                                        (d +=
+                                            y.header() || y.footer()
+                                                ? A(y.header()).outerWidth()
+                                                : 0);
+                                    break;
+                                }
+                                C--;
+                            }
+                        for (var m = 0, p = h; m < p.length; m++) {
+                            var x = p[m];
+                            A(A(x).children()[c - n])
+                                .css(this._getCellCSS(!1, r, "left"))
+                                .addClass(this.classes.fixedLeft);
+                        }
+                        u
+                            .css(this._getCellCSS(!0, d, "left"))
+                            .addClass(this.classes.fixedLeft),
+                            g
+                                .css(this._getCellCSS(!0, d, "left"))
+                                .addClass(this.classes.fixedLeft);
+                    } else {
+                        for (var b = 0, v = h; b < v.length; b++) {
+                            x = v[b];
+                            (R = A(A(x).children()[c - n])).hasClass(
+                                this.classes.fixedLeft
+                            ) &&
+                                R.css(this._clearCellCSS("left")).removeClass(
+                                    this.classes.fixedLeft
+                                );
+                        }
+                        u.hasClass(this.classes.fixedLeft) &&
+                            u
+                                .css(this._clearCellCSS("left"))
+                                .removeClass(this.classes.fixedLeft),
+                            g.hasClass(this.classes.fixedLeft) &&
+                                g
+                                    .css(this._clearCellCSS("left"))
+                                    .removeClass(this.classes.fixedLeft);
+                    }
+                } else n++;
+            }
+            for (var B = 0, S = 0, _ = 0, c = o - 1; 0 <= c; c--)
+                if ((f = this.s.dt.column(c)).visible()) {
+                    var u = A(f.header()),
+                        g = A(f.footer()),
+                        k = a.get(c);
+                    if ((k === F && (k = n), c + _ >= o - this.c.right)) {
+                        if (
+                            (A(this.s.dt.table().node()).addClass(
+                                this.classes.tableFixedRight
+                            ),
+                            t.addClass(this.classes.tableFixedRight),
+                            c + 1 + _ < o)
+                        )
+                            for (var y, C = c; C + 1 < o; ) {
+                                if (
+                                    (y = this.s.dt.column(C + 1, {
+                                        page: "current",
+                                    })).visible()
+                                ) {
+                                    (B += A(y.nodes()[0]).outerWidth()),
+                                        (S +=
+                                            y.header() || y.footer()
+                                                ? A(y.header()).outerWidth()
+                                                : 0);
+                                    break;
+                                }
+                                C++;
+                            }
+                        for (var w = 0, T = h; w < T.length; w++) {
+                            x = T[w];
+                            A(A(x).children()[c - k])
+                                .css(this._getCellCSS(!1, B, "right"))
+                                .addClass(this.classes.fixedRight);
+                        }
+                        u
+                            .css(this._getCellCSS(!0, S, "right"))
+                            .addClass(this.classes.fixedRight),
+                            g
+                                .css(this._getCellCSS(!0, S, "right"))
+                                .addClass(this.classes.fixedRight);
+                    } else {
+                        for (var L = 0, W = h; L < W.length; L++) {
+                            var R,
+                                x = W[L];
+                            (R = A(A(x).children()[c - k])).hasClass(
+                                this.classes.fixedRight
+                            ) &&
+                                R.css(this._clearCellCSS("right")).removeClass(
+                                    this.classes.fixedRight
+                                );
+                        }
+                        u.hasClass(this.classes.fixedRight) &&
+                            u
+                                .css(this._clearCellCSS("right"))
+                                .removeClass(this.classes.fixedRight),
+                            g.hasClass(this.classes.fixedRight) &&
+                                g
+                                    .css(this._clearCellCSS("right"))
+                                    .removeClass(this.classes.fixedRight);
+                    }
+                } else _++;
+            s &&
+                (this.s.rtl
+                    ? (this.dom.leftTopBlocker.outerHeight(e),
+                      t.append(this.dom.leftTopBlocker))
+                    : (this.dom.rightTopBlocker.outerHeight(e),
+                      t.append(this.dom.rightTopBlocker))),
+                i &&
+                    (this.s.rtl
+                        ? (this.dom.leftBottomBlocker.outerHeight(l),
+                          t.append(this.dom.leftBottomBlocker))
+                        : (this.dom.rightBottomBlocker.outerHeight(l),
+                          t.append(this.dom.rightBottomBlocker)));
+        }),
+        (d.prototype._getCellCSS = function (t, s, e) {
+            return "left" === e
+                ? this.s.rtl
+                    ? { position: "sticky", right: s + "px" }
+                    : { left: s + "px", position: "sticky" }
+                : this.s.rtl
+                ? {
+                      left: s + (t ? this.s.barWidth : 0) + "px",
+                      position: "sticky",
+                  }
+                : {
+                      position: "sticky",
+                      right: s + (t ? this.s.barWidth : 0) + "px",
+                  };
+        }),
+        (d.prototype._clearCellCSS = function (t) {
+            return "left" === t
+                ? this.s.rtl
+                    ? { position: "", right: "" }
+                    : { left: "", position: "" }
+                : this.s.rtl
+                ? { left: "", position: "" }
+                : { position: "", right: "" };
+        }),
+        (d.prototype._setKeyTableListener = function () {
+            var h = this;
+            this.s.dt.on("key-focus", function (t, s, e) {
+                var i,
+                    l,
+                    o,
+                    r = A(e.node()).offset(),
+                    d = A(
+                        A(h.s.dt.table().node()).closest(
+                            "div.dataTables_scrollBody"
+                        )
+                    );
+                0 < h.c.left &&
+                    ((i = (l = A(
+                        h.s.dt.column(h.c.left - 1).header()
+                    )).offset()),
+                    (l = l.outerWidth()),
+                    r.left < i.left + l) &&
+                    ((o = d.scrollLeft()),
+                    d.scrollLeft(o - (i.left + l - r.left))),
+                    0 < h.c.right &&
+                        ((i = h.s.dt.columns().data().toArray().length),
+                        (l = A(e.node()).outerWidth()),
+                        (e = A(h.s.dt.column(i - h.c.right).header()).offset()),
+                        r.left + l > e.left) &&
+                        ((o = d.scrollLeft()),
+                        d.scrollLeft(o - (e.left - (r.left + l))));
+            }),
+                this.s.dt.on("draw", function () {
+                    h._addStyles();
+                }),
+                this.s.dt.on("column-reorder", function () {
+                    h._addStyles();
+                }),
+                this.s.dt.on("column-visibility", function (t, s, e, i, l) {
+                    l &&
+                        !s.bDestroying &&
+                        setTimeout(function () {
+                            h._addStyles();
+                        }, 50);
+                });
+        }),
+        (d.version = "4.2.2"),
+        (d.classes = {
+            fixedLeft: "dtfc-fixed-left",
+            fixedRight: "dtfc-fixed-right",
+            leftBottomBlocker: "dtfc-left-bottom-blocker",
+            leftTopBlocker: "dtfc-left-top-blocker",
+            rightBottomBlocker: "dtfc-right-bottom-blocker",
+            rightTopBlocker: "dtfc-right-top-blocker",
+            tableFixedLeft: "dtfc-has-left",
+            tableFixedRight: "dtfc-has-right",
+        }),
+        (d.defaults = { i18n: { button: "FixedColumns" }, left: 1, right: 0 }),
+        (e = d),
+        (i = (A = l).fn.dataTable),
+        (l.fn.dataTable.FixedColumns = e),
+        (l.fn.DataTable.FixedColumns = e),
+        (o = r.Api.register)("fixedColumns()", function () {
+            return this;
+        }),
+        o("fixedColumns().left()", function (t) {
+            var s = this.context[0];
+            return t !== F
+                ? (s._fixedColumns.left(t), this)
+                : s._fixedColumns.left();
+        }),
+        o("fixedColumns().right()", function (t) {
+            var s = this.context[0];
+            return t !== F
+                ? (s._fixedColumns.right(t), this)
+                : s._fixedColumns.right();
+        }),
+        (r.ext.buttons.fixedColumns = {
+            action: function (t, s, e, i) {
+                l(e).attr("active")
+                    ? (l(e).removeAttr("active").removeClass("active"),
+                      s.fixedColumns().left(0),
+                      s.fixedColumns().right(0))
+                    : (l(e).attr("active", "true").addClass("active"),
+                      s.fixedColumns().left(i.config.left),
+                      s.fixedColumns().right(i.config.right));
+            },
+            config: { left: 1, right: 0 },
+            init: function (t, s, e) {
+                t.settings()[0]._fixedColumns === F && h(t.settings(), e),
+                    l(s).attr("active", "true").addClass("active"),
+                    t
+                        .button(s)
+                        .text(
+                            e.text ||
+                                t.i18n(
+                                    "buttons.fixedColumns",
+                                    t.settings()[0]._fixedColumns.c.i18n.button
+                                )
+                        );
+            },
+            text: null,
+        }),
+        l(s).on("plugin-init.dt", function (t, s) {
+            "dt" !== t.namespace ||
+                (!s.oInit.fixedColumns && !r.defaults.fixedColumns) ||
+                s._fixedColumns ||
+                h(s, null);
+        }),
+        r
+    );
+});

public/js/vendor.js.LICENSE.txt

@@ -0,0 +1,43 @@
+/*!
+ * @kurkle/color v0.3.4
+ * https://github.com/kurkle/color#readme
+ * (c) 2024 Jukka Kurkela
+ * Released under the MIT License
+ */
+
+/*!
+ * Chart.js v4.5.0
+ * https://www.chartjs.org
+ * (c) 2025 Chart.js Contributors
+ * Released under the MIT License
+ */
+
+/*!
+ * chartjs-plugin-datalabels v2.2.0
+ * https://chartjs-plugin-datalabels.netlify.app
+ * (c) 2017-2022 chartjs-plugin-datalabels contributors
+ * Released under the MIT license
+ */
+
+/*!
+ * jQuery JavaScript Library v3.7.1
+ * https://jquery.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2023-08-28T13:37Z
+ */
+
+/*! DataTables Bootstrap 4 integration
+ * ©2011-2017 SpryMedia Ltd - datatables.net/license
+ */
+
+/*! FixedColumns 4.3.0
+     * © SpryMedia Ltd - datatables.net/license
+     */
+
+/*! FixedColumns 4.3.0
+ * © SpryMedia Ltd - datatables.net/license
+ */

public/js/vendor/dataTables.bootstrap4.min.js

@@ -0,0 +1,4 @@
+/*! DataTables Bootstrap 4 integration
+ * ©2011-2017 SpryMedia Ltd - datatables.net/license
+ */
+!function(t){var n,o;"function"==typeof define&&define.amd?define(["jquery","datatables.net"],function(e){return t(e,window,document)}):"object"==typeof exports?(n=require("jquery"),o=function(e,a){a.fn.dataTable||require("datatables.net")(e,a)},"undefined"==typeof window?module.exports=function(e,a){return e=e||window,a=a||n(e),o(e,a),t(a,0,e.document)}:(o(window,n),module.exports=t(n,window,window.document))):t(jQuery,window,document)}(function(x,e,n,o){"use strict";var r=x.fn.dataTable;return x.extend(!0,r.defaults,{dom:"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",renderer:"bootstrap"}),x.extend(r.ext.classes,{sWrapper:"dataTables_wrapper dt-bootstrap4",sFilterInput:"form-control form-control-sm",sLengthSelect:"custom-select custom-select-sm form-control form-control-sm",sProcessing:"dataTables_processing card",sPageButton:"paginate_button page-item"}),r.ext.renderer.pageButton.bootstrap=function(i,e,d,a,l,c){function u(e,a){for(var t,n,o=function(e){e.preventDefault(),x(e.currentTarget).hasClass("disabled")||m.page()==e.data.action||m.page(e.data.action).draw("page")},r=0,s=a.length;r<s;r++)if(t=a[r],Array.isArray(t))u(e,t);else{switch(f=p="",t){case"ellipsis":p="&#x2026;",f="disabled";break;case"first":p=g.sFirst,f=t+(0<l?"":" disabled");break;case"previous":p=g.sPrevious,f=t+(0<l?"":" disabled");break;case"next":p=g.sNext,f=t+(l<c-1?"":" disabled");break;case"last":p=g.sLast,f=t+(l<c-1?"":" disabled");break;default:p=t+1,f=l===t?"active":""}p&&(n=-1!==f.indexOf("disabled"),n=x("<li>",{class:b.sPageButton+" "+f,id:0===d&&"string"==typeof t?i.sTableId+"_"+t:null}).append(x("<a>",{href:n?null:"#","aria-controls":i.sTableId,"aria-disabled":n?"true":null,"aria-label":w[t],role:"link","aria-current":"active"===f?"page":null,"data-dt-idx":t,tabindex:n?-1:i.iTabIndex,class:"page-link"}).html(p)).appendTo(e),i.oApi._fnBindAction(n,{action:t},o))}}var p,f,t,m=new r.Api(i),b=i.oClasses,g=i.oLanguage.oPaginate,w=i.oLanguage.oAria.paginate||{};try{t=x(e).find(n.activeElement).data("dt-idx")}catch(e){}u(x(e).empty().html('<ul class="pagination"/>').children("ul"),a),t!==o&&x(e).find("[data-dt-idx="+t+"]").trigger("focus")},r});

public/mix-manifest.json

@@ -1,5 +1,6 @@
 {
     "/js/app.js": "/js/app.js",
+    "/js/vendor.js": "/js/vendor.js",
     "/js/warehouse_management/product_categories/index.js": "/js/warehouse_management/product_categories/index.js",
     "/js/warehouse_management/products/index.js": "/js/warehouse_management/products/index.js",
     "/js/warehouse_management/opnames/index.js": "/js/warehouse_management/opnames/index.js",
@@ -7,5 +8,20 @@
     "/js/warehouse_management/opnames/detail.js": "/js/warehouse_management/opnames/detail.js",
     "/js/warehouse_management/mutations/index.js": "/js/warehouse_management/mutations/index.js",
     "/js/warehouse_management/mutations/create.js": "/js/warehouse_management/mutations/create.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/vendor/jquery.dataTables.min.js": "/js/vendor/jquery.dataTables.min.js",
+    "/js/vendor/dataTables.bootstrap4.min.js": "/js/vendor/dataTables.bootstrap4.min.js",
+    "/js/vendor/dataTables.fixedColumns.min.js": "/js/vendor/dataTables.fixedColumns.min.js",
+    "/js/vendor/sweetalert2.min.js": "/js/vendor/sweetalert2.min.js",
+    "/js/vendor/chart.umd.js": "/js/vendor/chart.umd.js",
+    "/js/vendor/chartjs-plugin-datalabels.min.js": "/js/vendor/chartjs-plugin-datalabels.min.js",
+    "/css/vendor/dataTables.bootstrap4.min.css": "/css/vendor/dataTables.bootstrap4.min.css",
+    "/css/vendor/fixedColumns.bootstrap4.min.css": "/css/vendor/fixedColumns.bootstrap4.min.css",
+    "/css/vendor/sweetalert2.min.css": "/css/vendor/sweetalert2.min.css",
+    "/js/cdn/dataTables.bootstrap4.min.js": "/js/cdn/dataTables.bootstrap4.min.js",
+    "/js/cdn/dataTables.fixedColumns.min.js": "/js/cdn/dataTables.fixedColumns.min.js",
+    "/js/cdn/jquery.dataTables.min.js": "/js/cdn/jquery.dataTables.min.js",
+    "/css/dataTables.bootstrap4.min.css": "/css/dataTables.bootstrap4.min.css",
+    "/css/fixedColumns.bootstrap4.min.css": "/css/fixedColumns.bootstrap4.min.css",
+    "/css/google-font.css": "/css/google-font.css"
 }

resources/css/dataTables.bootstrap4.min.css

@@ -0,0 +1,440 @@
+:root {
+    --dt-row-selected: 2, 117, 216;
+    --dt-row-selected-text: 255, 255, 255;
+    --dt-row-selected-link: 9, 10, 11;
+    --dt-row-stripe: 0, 0, 0;
+    --dt-row-hover: 0, 0, 0;
+    --dt-column-ordering: 0, 0, 0;
+    --dt-html-background: white;
+}
+:root.dark {
+    --dt-html-background: rgb(33, 37, 41);
+}
+table.dataTable td.dt-control {
+    text-align: center;
+    cursor: pointer;
+}
+table.dataTable td.dt-control:before {
+    display: inline-block;
+    color: rgba(0, 0, 0, 0.5);
+    content: "►";
+}
+table.dataTable tr.dt-hasChild td.dt-control:before {
+    content: "▼";
+}
+html.dark table.dataTable td.dt-control:before {
+    color: rgba(255, 255, 255, 0.5);
+}
+html.dark table.dataTable tr.dt-hasChild td.dt-control:before {
+    color: rgba(255, 255, 255, 0.5);
+}
+table.dataTable thead > tr > th.sorting,
+table.dataTable thead > tr > th.sorting_asc,
+table.dataTable thead > tr > th.sorting_desc,
+table.dataTable thead > tr > th.sorting_asc_disabled,
+table.dataTable thead > tr > th.sorting_desc_disabled,
+table.dataTable thead > tr > td.sorting,
+table.dataTable thead > tr > td.sorting_asc,
+table.dataTable thead > tr > td.sorting_desc,
+table.dataTable thead > tr > td.sorting_asc_disabled,
+table.dataTable thead > tr > td.sorting_desc_disabled {
+    cursor: pointer;
+    position: relative;
+    padding-right: 26px;
+}
+table.dataTable thead > tr > th.sorting:before,
+table.dataTable thead > tr > th.sorting:after,
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_asc:after,
+table.dataTable thead > tr > th.sorting_desc:before,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > th.sorting_asc_disabled:after,
+table.dataTable thead > tr > th.sorting_desc_disabled:before,
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting:before,
+table.dataTable thead > tr > td.sorting:after,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_asc:after,
+table.dataTable thead > tr > td.sorting_desc:before,
+table.dataTable thead > tr > td.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_asc_disabled:after,
+table.dataTable thead > tr > td.sorting_desc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    position: absolute;
+    display: block;
+    opacity: 0.125;
+    right: 10px;
+    line-height: 9px;
+    font-size: 0.8em;
+}
+table.dataTable thead > tr > th.sorting:before,
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_desc:before,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > th.sorting_desc_disabled:before,
+table.dataTable thead > tr > td.sorting:before,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_desc:before,
+table.dataTable thead > tr > td.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:before {
+    bottom: 50%;
+    content: "▲";
+    content: "▲"/"";
+}
+table.dataTable thead > tr > th.sorting:after,
+table.dataTable thead > tr > th.sorting_asc:after,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:after,
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting:after,
+table.dataTable thead > tr > td.sorting_asc:after,
+table.dataTable thead > tr > td.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:after,
+table.dataTable thead > tr > td.sorting_desc_disabled:after {
+    top: 50%;
+    content: "▼";
+    content: "▼"/"";
+}
+table.dataTable thead > tr > th.sorting_asc:before,
+table.dataTable thead > tr > th.sorting_desc:after,
+table.dataTable thead > tr > td.sorting_asc:before,
+table.dataTable thead > tr > td.sorting_desc:after {
+    opacity: 0.6;
+}
+table.dataTable thead > tr > th.sorting_desc_disabled:after,
+table.dataTable thead > tr > th.sorting_asc_disabled:before,
+table.dataTable thead > tr > td.sorting_desc_disabled:after,
+table.dataTable thead > tr > td.sorting_asc_disabled:before {
+    display: none;
+}
+table.dataTable thead > tr > th:active,
+table.dataTable thead > tr > td:active {
+    outline: none;
+}
+div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,
+div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,
+div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,
+div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {
+    display: none;
+}
+div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    margin-top: -26px;
+    text-align: center;
+    padding: 2px;
+}
+div.dataTables_processing > div:last-child {
+    position: relative;
+    width: 80px;
+    height: 15px;
+    margin: 1em auto;
+}
+div.dataTables_processing > div:last-child > div {
+    position: absolute;
+    top: 0;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: rgb(2, 117, 216);
+    background: rgb(var(--dt-row-selected));
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+div.dataTables_processing > div:last-child > div:nth-child(1) {
+    left: 8px;
+    animation: datatables-loader-1 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(2) {
+    left: 8px;
+    animation: datatables-loader-2 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(3) {
+    left: 32px;
+    animation: datatables-loader-2 0.6s infinite;
+}
+div.dataTables_processing > div:last-child > div:nth-child(4) {
+    left: 56px;
+    animation: datatables-loader-3 0.6s infinite;
+}
+@keyframes datatables-loader-1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes datatables-loader-3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes datatables-loader-2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+    white-space: nowrap;
+}
+table.dataTable th.dt-left,
+table.dataTable td.dt-left {
+    text-align: left;
+}
+table.dataTable th.dt-center,
+table.dataTable td.dt-center,
+table.dataTable td.dataTables_empty {
+    text-align: center;
+}
+table.dataTable th.dt-right,
+table.dataTable td.dt-right {
+    text-align: right;
+}
+table.dataTable th.dt-justify,
+table.dataTable td.dt-justify {
+    text-align: justify;
+}
+table.dataTable th.dt-nowrap,
+table.dataTable td.dt-nowrap {
+    white-space: nowrap;
+}
+table.dataTable thead th,
+table.dataTable thead td,
+table.dataTable tfoot th,
+table.dataTable tfoot td {
+    text-align: left;
+}
+table.dataTable thead th.dt-head-left,
+table.dataTable thead td.dt-head-left,
+table.dataTable tfoot th.dt-head-left,
+table.dataTable tfoot td.dt-head-left {
+    text-align: left;
+}
+table.dataTable thead th.dt-head-center,
+table.dataTable thead td.dt-head-center,
+table.dataTable tfoot th.dt-head-center,
+table.dataTable tfoot td.dt-head-center {
+    text-align: center;
+}
+table.dataTable thead th.dt-head-right,
+table.dataTable thead td.dt-head-right,
+table.dataTable tfoot th.dt-head-right,
+table.dataTable tfoot td.dt-head-right {
+    text-align: right;
+}
+table.dataTable thead th.dt-head-justify,
+table.dataTable thead td.dt-head-justify,
+table.dataTable tfoot th.dt-head-justify,
+table.dataTable tfoot td.dt-head-justify {
+    text-align: justify;
+}
+table.dataTable thead th.dt-head-nowrap,
+table.dataTable thead td.dt-head-nowrap,
+table.dataTable tfoot th.dt-head-nowrap,
+table.dataTable tfoot td.dt-head-nowrap {
+    white-space: nowrap;
+}
+table.dataTable tbody th.dt-body-left,
+table.dataTable tbody td.dt-body-left {
+    text-align: left;
+}
+table.dataTable tbody th.dt-body-center,
+table.dataTable tbody td.dt-body-center {
+    text-align: center;
+}
+table.dataTable tbody th.dt-body-right,
+table.dataTable tbody td.dt-body-right {
+    text-align: right;
+}
+table.dataTable tbody th.dt-body-justify,
+table.dataTable tbody td.dt-body-justify {
+    text-align: justify;
+}
+table.dataTable tbody th.dt-body-nowrap,
+table.dataTable tbody td.dt-body-nowrap {
+    white-space: nowrap;
+}
+table.dataTable {
+    clear: both;
+    margin-top: 6px !important;
+    margin-bottom: 6px !important;
+    max-width: none !important;
+    border-collapse: separate !important;
+    border-spacing: 0;
+}
+table.dataTable td,
+table.dataTable th {
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+}
+table.dataTable td.dataTables_empty,
+table.dataTable th.dataTables_empty {
+    text-align: center;
+}
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+    white-space: nowrap;
+}
+table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {
+    background-color: transparent;
+}
+table.dataTable > tbody > tr {
+    background-color: transparent;
+}
+table.dataTable > tbody > tr.selected > * {
+    box-shadow: inset 0 0 0 9999px rgb(2, 117, 216);
+    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
+    color: rgb(255, 255, 255);
+    color: rgb(var(--dt-row-selected-text));
+}
+table.dataTable > tbody > tr.selected a {
+    color: rgb(9, 10, 11);
+    color: rgb(var(--dt-row-selected-link));
+}
+table.dataTable.table-striped > tbody > tr.odd > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05);
+}
+table.dataTable.table-striped > tbody > tr.odd.selected > * {
+    box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95);
+}
+table.dataTable.table-hover > tbody > tr:hover > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075);
+}
+table.dataTable.table-hover > tbody > tr.selected:hover > * {
+    box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
+    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975);
+}
+div.dataTables_wrapper div.dataTables_length label {
+    font-weight: normal;
+    text-align: left;
+    white-space: nowrap;
+}
+div.dataTables_wrapper div.dataTables_length select {
+    width: auto;
+    display: inline-block;
+}
+div.dataTables_wrapper div.dataTables_filter {
+    text-align: right;
+}
+div.dataTables_wrapper div.dataTables_filter label {
+    font-weight: normal;
+    white-space: nowrap;
+    text-align: left;
+}
+div.dataTables_wrapper div.dataTables_filter input {
+    margin-left: 0.5em;
+    display: inline-block;
+    width: auto;
+}
+div.dataTables_wrapper div.dataTables_info {
+    padding-top: 0.85em;
+}
+div.dataTables_wrapper div.dataTables_paginate {
+    margin: 0;
+    white-space: nowrap;
+    text-align: right;
+}
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+    margin: 2px 0;
+    white-space: nowrap;
+    justify-content: flex-end;
+}
+div.dataTables_wrapper div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    margin-top: -26px;
+    text-align: center;
+    padding: 1em 0;
+}
+div.dataTables_scrollHead table.dataTable {
+    margin-bottom: 0 !important;
+}
+div.dataTables_scrollBody > table {
+    border-top: none;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+div.dataTables_scrollBody > table > thead .sorting:before,
+div.dataTables_scrollBody > table > thead .sorting_asc:before,
+div.dataTables_scrollBody > table > thead .sorting_desc:before,
+div.dataTables_scrollBody > table > thead .sorting:after,
+div.dataTables_scrollBody > table > thead .sorting_asc:after,
+div.dataTables_scrollBody > table > thead .sorting_desc:after {
+    display: none;
+}
+div.dataTables_scrollBody > table > tbody tr:first-child th,
+div.dataTables_scrollBody > table > tbody tr:first-child td {
+    border-top: none;
+}
+div.dataTables_scrollFoot > .dataTables_scrollFootInner {
+    box-sizing: content-box;
+}
+div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
+    margin-top: 0 !important;
+    border-top: none;
+}
+@media screen and (max-width: 767px) {
+    div.dataTables_wrapper div.dataTables_length,
+    div.dataTables_wrapper div.dataTables_filter,
+    div.dataTables_wrapper div.dataTables_info,
+    div.dataTables_wrapper div.dataTables_paginate {
+        text-align: center;
+    }
+    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+        justify-content: center !important;
+    }
+}
+table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
+    padding-right: 20px;
+}
+table.table-bordered.dataTable {
+    border-right-width: 0;
+}
+table.table-bordered.dataTable th,
+table.table-bordered.dataTable td {
+    border-left-width: 0;
+}
+table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable td:last-child,
+table.table-bordered.dataTable td:last-child {
+    border-right-width: 1px;
+}
+table.table-bordered.dataTable tbody th,
+table.table-bordered.dataTable tbody td {
+    border-bottom-width: 0;
+}
+div.dataTables_scrollHead table.table-bordered {
+    border-bottom-width: 0;
+}
+div.table-responsive > div.dataTables_wrapper > div.row {
+    margin: 0;
+}
+div.table-responsive
+    > div.dataTables_wrapper
+    > div.row
+    > div[class^="col-"]:first-child {
+    padding-left: 0;
+}
+div.table-responsive
+    > div.dataTables_wrapper
+    > div.row
+    > div[class^="col-"]:last-child {
+    padding-right: 0;
+}

resources/css/fixedColumns.bootstrap4.min.css

@@ -0,0 +1,36 @@
+table.dataTable thead tr > .dtfc-fixed-left,
+table.dataTable thead tr > .dtfc-fixed-right,
+table.dataTable tfoot tr > .dtfc-fixed-left,
+table.dataTable tfoot tr > .dtfc-fixed-right {
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    background-color: white;
+}
+table.dataTable tbody tr > .dtfc-fixed-left,
+table.dataTable tbody tr > .dtfc-fixed-right {
+    z-index: 1;
+    background-color: white;
+}
+div.dtfc-left-top-blocker,
+div.dtfc-right-top-blocker {
+    background-color: white;
+}
+div.dtfc-right-top-blocker,
+div.dtfc-left-top-blocker {
+    margin-top: 6px;
+    border-bottom: 0px solid #ddd !important;
+}
+table.dataTable.table-bordered.dtfc-has-left {
+    border-left: none;
+}
+div.dataTables_scroll.dtfc-has-left table.table-bordered {
+    border-left: none;
+}
+div.dataTables_scrollBody {
+    border-left: 1px solid #ddd !important;
+}
+div.dataTables_scrollFootInner table.table-bordered tr th:first-child,
+div.dataTables_scrollHeadInner table.table-bordered tr th:first-child {
+    border-left: 1px solid #ddd !important;
+}

resources/css/google-font.css

@@ -0,0 +1,835 @@
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 300;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
+        U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+        U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+        U+03A3-03FF;
+}
+/* math */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315,
+        U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A,
+        U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1,
+        U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C,
+        U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
+        U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
+        U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
+        U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
+        U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
+        U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA,
+        U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11,
+        U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
+        U+1EE00-1EEFF;
+}
+/* symbols */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0,
+        U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF,
+        U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F,
+        U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981,
+        U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E,
+        U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E,
+        U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD,
+        U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
+        U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
+        U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
+        U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F,
+        U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E,
+        U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB,
+        U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6,
+        U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503,
+        U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA,
+        U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698,
+        U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7,
+        U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF,
+        U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
+        U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
+        U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
+        U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
+        U+1FAF0-1FAF8, U+1FB00-1FBFF;
+}
+/* vietnamese */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2)
+        format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
+        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA.woff2)
+        format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

resources/js/cdn/dataTables.bootstrap4.min.js

@@ -0,0 +1,129 @@
+/*! DataTables Bootstrap 4 integration
+ * ©2011-2017 SpryMedia Ltd - datatables.net/license
+ */
+!(function (t) {
+    var n, o;
+    "function" == typeof define && define.amd
+        ? define(["jquery", "datatables.net"], function (e) {
+              return t(e, window, document);
+          })
+        : "object" == typeof exports
+        ? ((n = require("jquery")),
+          (o = function (e, a) {
+              a.fn.dataTable || require("datatables.net")(e, a);
+          }),
+          "undefined" == typeof window
+              ? (module.exports = function (e, a) {
+                    return (
+                        (e = e || window),
+                        (a = a || n(e)),
+                        o(e, a),
+                        t(a, 0, e.document)
+                    );
+                })
+              : (o(window, n),
+                (module.exports = t(n, window, window.document))))
+        : t(jQuery, window, document);
+})(function (x, e, n, o) {
+    "use strict";
+    var r = x.fn.dataTable;
+    return (
+        x.extend(!0, r.defaults, {
+            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+            renderer: "bootstrap",
+        }),
+        x.extend(r.ext.classes, {
+            sWrapper: "dataTables_wrapper dt-bootstrap4",
+            sFilterInput: "form-control form-control-sm",
+            sLengthSelect:
+                "custom-select custom-select-sm form-control form-control-sm",
+            sProcessing: "dataTables_processing card",
+            sPageButton: "paginate_button page-item",
+        }),
+        (r.ext.renderer.pageButton.bootstrap = function (i, e, d, a, l, c) {
+            function u(e, a) {
+                for (
+                    var t,
+                        n,
+                        o = function (e) {
+                            e.preventDefault(),
+                                x(e.currentTarget).hasClass("disabled") ||
+                                    m.page() == e.data.action ||
+                                    m.page(e.data.action).draw("page");
+                        },
+                        r = 0,
+                        s = a.length;
+                    r < s;
+                    r++
+                )
+                    if (((t = a[r]), Array.isArray(t))) u(e, t);
+                    else {
+                        switch (((f = p = ""), t)) {
+                            case "ellipsis":
+                                (p = "&#x2026;"), (f = "disabled");
+                                break;
+                            case "first":
+                                (p = g.sFirst),
+                                    (f = t + (0 < l ? "" : " disabled"));
+                                break;
+                            case "previous":
+                                (p = g.sPrevious),
+                                    (f = t + (0 < l ? "" : " disabled"));
+                                break;
+                            case "next":
+                                (p = g.sNext),
+                                    (f = t + (l < c - 1 ? "" : " disabled"));
+                                break;
+                            case "last":
+                                (p = g.sLast),
+                                    (f = t + (l < c - 1 ? "" : " disabled"));
+                                break;
+                            default:
+                                (p = t + 1), (f = l === t ? "active" : "");
+                        }
+                        p &&
+                            ((n = -1 !== f.indexOf("disabled")),
+                            (n = x("<li>", {
+                                class: b.sPageButton + " " + f,
+                                id:
+                                    0 === d && "string" == typeof t
+                                        ? i.sTableId + "_" + t
+                                        : null,
+                            })
+                                .append(
+                                    x("<a>", {
+                                        href: n ? null : "#",
+                                        "aria-controls": i.sTableId,
+                                        "aria-disabled": n ? "true" : null,
+                                        "aria-label": w[t],
+                                        role: "link",
+                                        "aria-current":
+                                            "active" === f ? "page" : null,
+                                        "data-dt-idx": t,
+                                        tabindex: n ? -1 : i.iTabIndex,
+                                        class: "page-link",
+                                    }).html(p)
+                                )
+                                .appendTo(e)),
+                            i.oApi._fnBindAction(n, { action: t }, o));
+                    }
+            }
+            var p,
+                f,
+                t,
+                m = new r.Api(i),
+                b = i.oClasses,
+                g = i.oLanguage.oPaginate,
+                w = i.oLanguage.oAria.paginate || {};
+            try {
+                t = x(e).find(n.activeElement).data("dt-idx");
+            } catch (e) {}
+            u(x(e).empty().html('<ul class="pagination"/>').children("ul"), a),
+                t !== o &&
+                    x(e)
+                        .find("[data-dt-idx=" + t + "]")
+                        .trigger("focus");
+        }),
+        r
+    );
+});

resources/js/cdn/dataTables.fixedColumns.min.js

@@ -0,0 +1,415 @@
+/*! FixedColumns 4.2.2
+ * © SpryMedia Ltd - datatables.net/license
+ */
+!(function (e) {
+    var i, l;
+    "function" == typeof define && define.amd
+        ? define(["jquery", "datatables.net"], function (t) {
+              return e(t, window, document);
+          })
+        : "object" == typeof exports
+        ? ((i = require("jquery")),
+          (l = function (t, s) {
+              s.fn.dataTable || require("datatables.net")(t, s);
+          }),
+          "undefined" != typeof window
+              ? (module.exports = function (t, s) {
+                    return (
+                        (t = t || window),
+                        (s = s || i(t)),
+                        l(t, s),
+                        e(s, 0, t.document)
+                    );
+                })
+              : (l(window, i),
+                (module.exports = e(i, window, window.document))))
+        : e(jQuery, window, document);
+})(function (l, t, s, F) {
+    "use strict";
+    var A,
+        i,
+        e,
+        o,
+        r = l.fn.dataTable;
+    function d(t, s) {
+        var e = this;
+        if (i && i.versionCheck && i.versionCheck("1.10.0"))
+            return (
+                (t = new i.Api(t)),
+                (this.classes = A.extend(!0, {}, d.classes)),
+                (this.c = A.extend(!0, {}, d.defaults, s)),
+                (s && s.left !== F) ||
+                    this.c.leftColumns === F ||
+                    (this.c.left = this.c.leftColumns),
+                (s && s.right !== F) ||
+                    this.c.rightColumns === F ||
+                    (this.c.right = this.c.rightColumns),
+                (this.s = {
+                    barWidth: 0,
+                    dt: t,
+                    rtl: "rtl" === A("body").css("direction"),
+                }),
+                (s = {
+                    bottom: "0px",
+                    display: "block",
+                    position: "absolute",
+                    width: this.s.barWidth + 1 + "px",
+                }),
+                (this.dom = {
+                    leftBottomBlocker: A("<div>")
+                        .css(s)
+                        .css("left", 0)
+                        .addClass(this.classes.leftBottomBlocker),
+                    leftTopBlocker: A("<div>")
+                        .css(s)
+                        .css({ left: 0, top: 0 })
+                        .addClass(this.classes.leftTopBlocker),
+                    rightBottomBlocker: A("<div>")
+                        .css(s)
+                        .css("right", 0)
+                        .addClass(this.classes.rightBottomBlocker),
+                    rightTopBlocker: A("<div>")
+                        .css(s)
+                        .css({ right: 0, top: 0 })
+                        .addClass(this.classes.rightTopBlocker),
+                }),
+                this.s.dt.settings()[0]._bInitComplete
+                    ? (this._addStyles(), this._setKeyTableListener())
+                    : t.one("init.dt", function () {
+                          e._addStyles(), e._setKeyTableListener();
+                      }),
+                t.on("column-sizing.dt", function () {
+                    return e._addStyles();
+                }),
+                (t.settings()[0]._fixedColumns = this)
+            );
+        throw new Error("StateRestore requires DataTables 1.10 or newer");
+    }
+    function h(t, s) {
+        void 0 === s && (s = null);
+        (t = new r.Api(t)),
+            (s = s || t.init().fixedColumns || r.defaults.fixedColumns);
+        new e(t, s);
+    }
+    return (
+        (d.prototype.left = function (t) {
+            return (
+                t !== F && ((this.c.left = t), this._addStyles()), this.c.left
+            );
+        }),
+        (d.prototype.right = function (t) {
+            return (
+                t !== F && ((this.c.right = t), this._addStyles()), this.c.right
+            );
+        }),
+        (d.prototype._addStyles = function () {
+            this.s.dt.settings()[0].oScroll.sY &&
+                ((s = A(this.s.dt.table().node()).closest(
+                    "div.dataTables_scrollBody"
+                )[0]),
+                (e = this.s.dt.settings()[0].oBrowser.barWidth),
+                s.offsetWidth - s.clientWidth >= e
+                    ? (this.s.barWidth = e)
+                    : (this.s.barWidth = 0),
+                this.dom.rightTopBlocker.css("width", this.s.barWidth + 1),
+                this.dom.leftTopBlocker.css("width", this.s.barWidth + 1),
+                this.dom.rightBottomBlocker.css("width", this.s.barWidth + 1),
+                this.dom.leftBottomBlocker.css("width", this.s.barWidth + 1));
+            for (
+                var t = null,
+                    s = this.s.dt.column(0).header(),
+                    e = null,
+                    i =
+                        (null !== s &&
+                            ((e = (s = A(s)).outerHeight() + 1),
+                            (t = A(s.closest("div.dataTables_scroll")).css(
+                                "position",
+                                "relative"
+                            ))),
+                        this.s.dt.column(0).footer()),
+                    l = null,
+                    o =
+                        (null !== i &&
+                            ((l = (i = A(i)).outerHeight()), null === t) &&
+                            (t = A(i.closest("div.dataTables_scroll")).css(
+                                "position",
+                                "relative"
+                            )),
+                        this.s.dt.columns().data().toArray().length),
+                    r = 0,
+                    d = 0,
+                    h = A(this.s.dt.table().node())
+                        .children("tbody")
+                        .children("tr"),
+                    n = 0,
+                    a = new Map(),
+                    c = 0;
+                c < o;
+                c++
+            ) {
+                var f = this.s.dt.column(c);
+                if ((0 < c && a.set(c - 1, n), f.visible())) {
+                    var u = A(f.header()),
+                        g = A(f.footer());
+                    if (c - n < this.c.left) {
+                        if (
+                            (A(this.s.dt.table().node()).addClass(
+                                this.classes.tableFixedLeft
+                            ),
+                            t.addClass(this.classes.tableFixedLeft),
+                            0 < c - n)
+                        )
+                            for (var C = c; C + 1 < o; ) {
+                                if (
+                                    (y = this.s.dt.column(C - 1, {
+                                        page: "current",
+                                    })).visible()
+                                ) {
+                                    (r += A(y.nodes()[0]).outerWidth()),
+                                        (d +=
+                                            y.header() || y.footer()
+                                                ? A(y.header()).outerWidth()
+                                                : 0);
+                                    break;
+                                }
+                                C--;
+                            }
+                        for (var m = 0, p = h; m < p.length; m++) {
+                            var x = p[m];
+                            A(A(x).children()[c - n])
+                                .css(this._getCellCSS(!1, r, "left"))
+                                .addClass(this.classes.fixedLeft);
+                        }
+                        u
+                            .css(this._getCellCSS(!0, d, "left"))
+                            .addClass(this.classes.fixedLeft),
+                            g
+                                .css(this._getCellCSS(!0, d, "left"))
+                                .addClass(this.classes.fixedLeft);
+                    } else {
+                        for (var b = 0, v = h; b < v.length; b++) {
+                            x = v[b];
+                            (R = A(A(x).children()[c - n])).hasClass(
+                                this.classes.fixedLeft
+                            ) &&
+                                R.css(this._clearCellCSS("left")).removeClass(
+                                    this.classes.fixedLeft
+                                );
+                        }
+                        u.hasClass(this.classes.fixedLeft) &&
+                            u
+                                .css(this._clearCellCSS("left"))
+                                .removeClass(this.classes.fixedLeft),
+                            g.hasClass(this.classes.fixedLeft) &&
+                                g
+                                    .css(this._clearCellCSS("left"))
+                                    .removeClass(this.classes.fixedLeft);
+                    }
+                } else n++;
+            }
+            for (var B = 0, S = 0, _ = 0, c = o - 1; 0 <= c; c--)
+                if ((f = this.s.dt.column(c)).visible()) {
+                    var u = A(f.header()),
+                        g = A(f.footer()),
+                        k = a.get(c);
+                    if ((k === F && (k = n), c + _ >= o - this.c.right)) {
+                        if (
+                            (A(this.s.dt.table().node()).addClass(
+                                this.classes.tableFixedRight
+                            ),
+                            t.addClass(this.classes.tableFixedRight),
+                            c + 1 + _ < o)
+                        )
+                            for (var y, C = c; C + 1 < o; ) {
+                                if (
+                                    (y = this.s.dt.column(C + 1, {
+                                        page: "current",
+                                    })).visible()
+                                ) {
+                                    (B += A(y.nodes()[0]).outerWidth()),
+                                        (S +=
+                                            y.header() || y.footer()
+                                                ? A(y.header()).outerWidth()
+                                                : 0);
+                                    break;
+                                }
+                                C++;
+                            }
+                        for (var w = 0, T = h; w < T.length; w++) {
+                            x = T[w];
+                            A(A(x).children()[c - k])
+                                .css(this._getCellCSS(!1, B, "right"))
+                                .addClass(this.classes.fixedRight);
+                        }
+                        u
+                            .css(this._getCellCSS(!0, S, "right"))
+                            .addClass(this.classes.fixedRight),
+                            g
+                                .css(this._getCellCSS(!0, S, "right"))
+                                .addClass(this.classes.fixedRight);
+                    } else {
+                        for (var L = 0, W = h; L < W.length; L++) {
+                            var R,
+                                x = W[L];
+                            (R = A(A(x).children()[c - k])).hasClass(
+                                this.classes.fixedRight
+                            ) &&
+                                R.css(this._clearCellCSS("right")).removeClass(
+                                    this.classes.fixedRight
+                                );
+                        }
+                        u.hasClass(this.classes.fixedRight) &&
+                            u
+                                .css(this._clearCellCSS("right"))
+                                .removeClass(this.classes.fixedRight),
+                            g.hasClass(this.classes.fixedRight) &&
+                                g
+                                    .css(this._clearCellCSS("right"))
+                                    .removeClass(this.classes.fixedRight);
+                    }
+                } else _++;
+            s &&
+                (this.s.rtl
+                    ? (this.dom.leftTopBlocker.outerHeight(e),
+                      t.append(this.dom.leftTopBlocker))
+                    : (this.dom.rightTopBlocker.outerHeight(e),
+                      t.append(this.dom.rightTopBlocker))),
+                i &&
+                    (this.s.rtl
+                        ? (this.dom.leftBottomBlocker.outerHeight(l),
+                          t.append(this.dom.leftBottomBlocker))
+                        : (this.dom.rightBottomBlocker.outerHeight(l),
+                          t.append(this.dom.rightBottomBlocker)));
+        }),
+        (d.prototype._getCellCSS = function (t, s, e) {
+            return "left" === e
+                ? this.s.rtl
+                    ? { position: "sticky", right: s + "px" }
+                    : { left: s + "px", position: "sticky" }
+                : this.s.rtl
+                ? {
+                      left: s + (t ? this.s.barWidth : 0) + "px",
+                      position: "sticky",
+                  }
+                : {
+                      position: "sticky",
+                      right: s + (t ? this.s.barWidth : 0) + "px",
+                  };
+        }),
+        (d.prototype._clearCellCSS = function (t) {
+            return "left" === t
+                ? this.s.rtl
+                    ? { position: "", right: "" }
+                    : { left: "", position: "" }
+                : this.s.rtl
+                ? { left: "", position: "" }
+                : { position: "", right: "" };
+        }),
+        (d.prototype._setKeyTableListener = function () {
+            var h = this;
+            this.s.dt.on("key-focus", function (t, s, e) {
+                var i,
+                    l,
+                    o,
+                    r = A(e.node()).offset(),
+                    d = A(
+                        A(h.s.dt.table().node()).closest(
+                            "div.dataTables_scrollBody"
+                        )
+                    );
+                0 < h.c.left &&
+                    ((i = (l = A(
+                        h.s.dt.column(h.c.left - 1).header()
+                    )).offset()),
+                    (l = l.outerWidth()),
+                    r.left < i.left + l) &&
+                    ((o = d.scrollLeft()),
+                    d.scrollLeft(o - (i.left + l - r.left))),
+                    0 < h.c.right &&
+                        ((i = h.s.dt.columns().data().toArray().length),
+                        (l = A(e.node()).outerWidth()),
+                        (e = A(h.s.dt.column(i - h.c.right).header()).offset()),
+                        r.left + l > e.left) &&
+                        ((o = d.scrollLeft()),
+                        d.scrollLeft(o - (e.left - (r.left + l))));
+            }),
+                this.s.dt.on("draw", function () {
+                    h._addStyles();
+                }),
+                this.s.dt.on("column-reorder", function () {
+                    h._addStyles();
+                }),
+                this.s.dt.on("column-visibility", function (t, s, e, i, l) {
+                    l &&
+                        !s.bDestroying &&
+                        setTimeout(function () {
+                            h._addStyles();
+                        }, 50);
+                });
+        }),
+        (d.version = "4.2.2"),
+        (d.classes = {
+            fixedLeft: "dtfc-fixed-left",
+            fixedRight: "dtfc-fixed-right",
+            leftBottomBlocker: "dtfc-left-bottom-blocker",
+            leftTopBlocker: "dtfc-left-top-blocker",
+            rightBottomBlocker: "dtfc-right-bottom-blocker",
+            rightTopBlocker: "dtfc-right-top-blocker",
+            tableFixedLeft: "dtfc-has-left",
+            tableFixedRight: "dtfc-has-right",
+        }),
+        (d.defaults = { i18n: { button: "FixedColumns" }, left: 1, right: 0 }),
+        (e = d),
+        (i = (A = l).fn.dataTable),
+        (l.fn.dataTable.FixedColumns = e),
+        (l.fn.DataTable.FixedColumns = e),
+        (o = r.Api.register)("fixedColumns()", function () {
+            return this;
+        }),
+        o("fixedColumns().left()", function (t) {
+            var s = this.context[0];
+            return t !== F
+                ? (s._fixedColumns.left(t), this)
+                : s._fixedColumns.left();
+        }),
+        o("fixedColumns().right()", function (t) {
+            var s = this.context[0];
+            return t !== F
+                ? (s._fixedColumns.right(t), this)
+                : s._fixedColumns.right();
+        }),
+        (r.ext.buttons.fixedColumns = {
+            action: function (t, s, e, i) {
+                l(e).attr("active")
+                    ? (l(e).removeAttr("active").removeClass("active"),
+                      s.fixedColumns().left(0),
+                      s.fixedColumns().right(0))
+                    : (l(e).attr("active", "true").addClass("active"),
+                      s.fixedColumns().left(i.config.left),
+                      s.fixedColumns().right(i.config.right));
+            },
+            config: { left: 1, right: 0 },
+            init: function (t, s, e) {
+                t.settings()[0]._fixedColumns === F && h(t.settings(), e),
+                    l(s).attr("active", "true").addClass("active"),
+                    t
+                        .button(s)
+                        .text(
+                            e.text ||
+                                t.i18n(
+                                    "buttons.fixedColumns",
+                                    t.settings()[0]._fixedColumns.c.i18n.button
+                                )
+                        );
+            },
+            text: null,
+        }),
+        l(s).on("plugin-init.dt", function (t, s) {
+            "dt" !== t.namespace ||
+                (!s.oInit.fixedColumns && !r.defaults.fixedColumns) ||
+                s._fixedColumns ||
+                h(s, null);
+        }),
+        r
+    );
+});

resources/js/vendor.js

@@ -0,0 +1,16 @@
+// Import vendor libraries
+import "datatables.net";
+import "datatables.net-bs4";
+import "datatables.net-fixedcolumns";
+import "datatables.net-fixedcolumns-bs4";
+import Swal from "sweetalert2";
+import Chart from "chart.js/auto";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+
+// Make libraries globally available
+window.Swal = Swal;
+window.Chart = Chart;
+window.ChartDataLabels = ChartDataLabels;
+
+// Register Chart.js plugin
+Chart.register(ChartDataLabels);

resources/js/warehouse_management/mutations/index.js

@@ -1,74 +1,96 @@
 $(document).ready(function () {
+    console.log("Mutations index.js loaded");
+
+    // Check if DataTables is available
+    if (typeof $.fn.DataTable === "undefined") {
+        console.error("DataTables not available!");
+        return;
+    }
+
+    // Destroy existing table if any
+    if ($.fn.DataTable.isDataTable("#mutations-table")) {
+        $("#mutations-table").DataTable().destroy();
+    }
+
     // Initialize DataTable
     var table = $("#mutations-table").DataTable({
         processing: true,
         serverSide: true,
+        destroy: true,
         ajax: {
             url: $("#mutations-table").data("url"),
             type: "GET",
+            error: function (xhr, error, code) {
+                console.error("DataTables AJAX error:", error, code);
             },
-        columns: [
+        },
+        columnDefs: [
             {
-                data: "DT_RowIndex",
+                targets: 0, // No. column
-                name: "DT_RowIndex",
                 orderable: false,
                 searchable: false,
                 width: "5%",
             },
             {
-                data: "mutation_number",
+                targets: [1, 2, 3, 4, 5, 6, 7], // All sortable columns
-                name: "mutation_number",
+                orderable: true,
-                width: "12%",
+                searchable: true,
             },
             {
-                data: "created_at",
+                targets: 8, // Action column
-                name: "created_at",
-                width: "12%",
-            },
-            {
-                data: "from_dealer",
-                name: "fromDealer.name",
-                width: "13%",
-            },
-            {
-                data: "to_dealer",
-                name: "toDealer.name",
-                width: "13%",
-            },
-            {
-                data: "requested_by",
-                name: "requestedBy.name",
-                width: "12%",
-            },
-            {
-                data: "total_items",
-                name: "total_items",
-                width: "8%",
-                className: "text-center",
-            },
-            {
-                data: "status",
-                name: "status",
-                width: "12%",
-                className: "text-center",
-            },
-            {
-                data: "action",
-                name: "action",
                 orderable: false,
                 searchable: false,
                 width: "20%",
                 className: "text-center",
             },
+            {
+                targets: [6, 7], // Total Items and Status columns
+                className: "text-center",
+            },
         ],
-        order: [[2, "desc"]], // Order by created_at desc
+        columns: [
+            {
+                data: "DT_RowIndex",
+                name: "DT_RowIndex",
+            },
+            {
+                data: "mutation_number",
+                name: "mutation_number",
+            },
+            {
+                data: "created_at",
+                name: "created_at",
+            },
+            {
+                data: "from_dealer",
+                name: "fromDealer.name",
+            },
+            {
+                data: "to_dealer",
+                name: "toDealer.name",
+            },
+            {
+                data: "requested_by",
+                name: "requestedBy.name",
+            },
+            {
+                data: "total_items",
+                name: "total_items",
+            },
+            {
+                data: "status",
+                name: "status",
+            },
+            {
+                data: "action",
+                name: "action",
+            },
+        ],
+        order: [[1, "desc"]], // Order by mutation_number desc (which follows ID order)
         pageLength: 10,
         responsive: true,
     });
 
-    // Modal event handlers are now handled by Bootstrap 5 data attributes
-    // No need for manual modal show/hide handlers
-
     // Handle Cancel Button Click with SweetAlert
     $(document).on("click", ".btn-cancel", function () {
         var mutationId = $(this).data("id");

resources/js/warehouse_management/products/index.js

@@ -3,26 +3,119 @@ $.ajaxSetup({
         "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
     },
 });
-let tableContainer = $("#products-table");
+
-let url = tableContainer.data("url");
+// Wait for DataTables to be available
-let table = $("#products-table").DataTable({
+function initializeDataTable() {
+    // Debug: Check if DataTables is loaded
+    console.log("DataTables available:", typeof $.fn.DataTable !== "undefined");
+    console.log("jQuery version:", $.fn.jquery);
+
+    if (typeof $.fn.DataTable === "undefined") {
+        console.error("DataTables is not loaded! Retrying in 1 second...");
+        setTimeout(initializeDataTable, 1000);
+        return;
+    }
+
+    let tableContainer = $("#products-table");
+    let url = tableContainer.data("url");
+
+    console.log("Table URL:", url);
+    console.log("Initializing DataTable...");
+
+    let table = $("#products-table").DataTable({
         processing: true,
         serverSide: true,
-    ajax: url,
+        ajax: {
-    order: [[0, "desc"]],
+            url: url,
+            error: function (xhr, error, thrown) {
+                console.error("DataTables Ajax Error:", error, thrown);
+                console.error("Response:", xhr.responseText);
+            },
+        },
+        order: [[0, "asc"]], // Order by first column (code) ascending
         columns: [
-        { data: "code", name: "code" },
+            {
-        { data: "name", name: "name" },
+                data: "code",
-        { data: "category_name", name: "category.name" },
+                name: "code",
-        { data: "unit", name: "unit" },
+                orderable: true,
+                searchable: true,
+            },
+            {
+                data: "name",
+                name: "name",
+                orderable: true,
+                searchable: true,
+            },
+            {
+                data: "category_name",
+                name: "category.name",
+                orderable: true,
+                searchable: true,
+            },
+            {
+                data: "unit",
+                name: "unit",
+                orderable: true,
+                searchable: true,
+            },
             {
                 data: "total_stock",
                 name: "total_stock",
                 orderable: false,
                 searchable: false,
             },
-        { data: "action", name: "action", orderable: false, searchable: false },
+            {
+                data: "action",
+                name: "action",
+                orderable: false,
+                searchable: false,
+            },
         ],
+        columnDefs: [
+            {
+                targets: [4, 5], // total_stock and action columns
+                orderable: false,
+            },
+        ],
+        initComplete: function (settings, json) {
+            console.log("DataTables initialized successfully");
+            console.log("Settings:", settings);
+            console.log(
+                "Column ordering enabled for:",
+                settings.aoColumns.map((col, index) => ({
+                    index: index,
+                    orderable: col.bSortable,
+                    name: col.sName || col.mData,
+                }))
+            );
+        },
+        drawCallback: function (settings) {
+            console.log("DataTables draw completed");
+        },
+        headerCallback: function (thead, data, start, end, display) {
+            console.log("Header callback - sorting icons should be visible");
+        },
+    });
+
+    // Debug: Log table instance
+    console.log("DataTable instance:", table);
+
+    // Test column ordering programmatically
+    setTimeout(function () {
+        console.log("Testing column ordering...");
+        try {
+            table.order([1, "desc"]).draw();
+            console.log("Column ordering test successful");
+        } catch (e) {
+            console.error("Column ordering test failed:", e);
+        }
+    }, 2000);
+}
+
+// Initialize when document is ready
+$(document).ready(function () {
+    console.log("Document ready, checking for DataTables...");
+    initializeDataTable();
 });
 
 $(document).on("click", ".btn-destroy-product", function () {
@@ -44,17 +137,22 @@ $(document).on("click", ".btn-destroy-product", function () {
                     _token: $('meta[name="csrf-token"]').attr("content"),
                 },
                 success: function () {
-                    alert("Produk berhasil dihapus.");
+                    Swal.fire(
+                        "Berhasil!",
+                        "Produk berhasil dihapus.",
+                        "success"
+                    );
                     $("#products-table").DataTable().ajax.reload();
                 },
                 error: function (xhr) {
-                    alert("Gagal menghapus produk.");
+                    Swal.fire("Error!", "Gagal menghapus produk.", "error");
                     console.error(xhr.responseText);
                 },
             });
         }
     });
 });
+
 $(document).on("click", ".btn-toggle-active", function () {
     let button = $(this);
     let url = button.data("url");
@@ -79,16 +177,21 @@ $(document).on("click", ".btn-toggle-active", function () {
                         $("#products-table")
                             .DataTable()
                             .ajax.reload(null, false);
-                        alert(response.message);
+                        Swal.fire("Berhasil!", response.message, "success");
                     }
                 },
                 error: function () {
-                    alert("Gagal mengubah status produk.");
+                    Swal.fire(
+                        "Error!",
+                        "Gagal mengubah status produk.",
+                        "error"
+                    );
                 },
             });
         }
     });
 });
+
 $(document).on("click", ".btn-product-stock-dealers", function () {
     const productId = $(this).data("id");
     const productName = $(this).data("name");
@@ -99,7 +202,7 @@ $(document).on("click", ".btn-product-stock-dealers", function () {
 
     // Initialize or reload DataTable inside modal
     $("#dealer-stock-table").DataTable({
-        destroy: true, // reinit if exists
+        destroy: true,
         processing: true,
         serverSide: true,
         ajax: {
@@ -109,14 +212,25 @@ $(document).on("click", ".btn-product-stock-dealers", function () {
             },
         },
         columns: [
-            { data: "dealer_name", name: "dealer_name" },
+            {
-            { data: "quantity", name: "quantity" },
+                data: "dealer_name",
+                name: "dealer_name",
+                orderable: true,
+                searchable: true,
+            },
+            {
+                data: "quantity",
+                name: "quantity",
+                orderable: true,
+                searchable: false,
+            },
         ],
         initComplete: function () {
             $("#dealerStockModal").modal("show");
         },
     });
 });
+
 $(document).on("click", "#dealerStockModal .close", function () {
     $("#dealerStockModal").modal("hide");
 });

resources/views/layouts/backapp.blade.php

@@ -26,24 +26,23 @@ License: You must have a valid license purchased only from themeforest(the above
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!--begin::Fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700">
+    <link rel="stylesheet" href="{{ asset('css/google-font.css') }}">
     <!--end::Fonts -->
 
     <!--begin::Global Theme Styles(used by all pages) -->
-    <link href="{{ url('css/app.bundle.min.css') }}" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/app.bundle.min.css') }}" rel="stylesheet" type="text/css" />
     <!--end::Global Theme Styles -->
 
     <!--begin::Global Custom Styles(used by all pages) -->
-    <link href="{{ url('css/custom-web.css') }}" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/custom-web.css') }}" rel="stylesheet" type="text/css" />
     <!--end::Global Custom Styles -->
 
     <link rel="shortcut icon" href="{{ asset('assets/media/logos/ckb.jpeg') }}" />
     
     <!--begin::DataTables CSS -->
-    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/vendor/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
-    <link href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/vendor/fixedColumns.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
-    <!--end::DataTables CSS -->
+    <link href="{{ asset('css/vendor/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
-
     
     <!-- begin::Global Config(global config for global JS sciprts) -->
     <script>
@@ -74,24 +73,12 @@ License: You must have a valid license purchased only from themeforest(the above
     <!--end::Global Theme Bundle -->
 
     <!--begin::DataTables -->
-    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
+    <script src="{{ asset('js/vendor.js') }}"></script>
-    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
-    <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>
-    <!--end::SweetAlert2 -->
-    
-    <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>
-    
-
-
     @yield('styles')
 </head>
 <!-- end::Head -->

resources/views/layouts/frontapp.blade.php

@@ -27,8 +27,7 @@ License: You must have a valid license purchased only from themeforest(the above
     <meta name="base-url" content="{{ url('/') }}">
 
     <!--begin::Fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700">
+    <link rel="stylesheet" href="{{ asset('css/google-font.css') }}">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700|Roboto:300,400,500,600,700">
     
     <!--end::Fonts -->
 
@@ -46,8 +45,8 @@ License: You must have a valid license purchased only from themeforest(the above
     <link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
 
     <!--begin::DataTables CSS -->
-    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/vendor/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
-    <link href="https://cdn.datatables.net/fixedcolumns/4.2.2/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" type="text/css" />
+    <link href="{{ asset('css/vendor/fixedColumns.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
     <!--end::DataTables CSS -->
 
     <style>
@@ -125,7 +124,9 @@ License: You must have a valid license purchased only from themeforest(the above
     <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::DataTables -->
     <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js"></script>
     <script src="https://cdn.datatables.net/fixedcolumns/4.2.2/js/dataTables.fixedColumns.min.js"></script>
@@ -141,7 +142,7 @@ 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>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script> --}}
     <script src="{{ asset('js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
     
 

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

@@ -44,93 +44,6 @@
                 </li>
                 @endcan
 
-                @if (Auth::user()->can('view', $menus['dealer.index']) || Auth::user()->can('view', $menus['category.index']) || Auth::user()->can('view', $menus['work.index']))
-                <li class="kt-menu__item  kt-menu__item--submenu" aria-haspopup="true" data-ktmenu-submenu-toggle="hover">
-                    <a href="javascript:;" class="kt-menu__link kt-menu__toggle">
-                        <span class="kt-menu__link-icon">
-                            <i class="fa fa-box"></i>
-                        </span>
-                        <span class="kt-menu__link-text">Data Master</span><i class="kt-menu__ver-arrow la la-angle-right"></i>
-                    </a>
-                    <div class="kt-menu__submenu "><span class="kt-menu__arrow"></span>
-                        <ul class="kt-menu__subnav">
-                            {{-- <li class="kt-menu__item  kt-menu__item--parent" aria-haspopup="true"><span class="kt-menu__link"><span class="kt-menu__link-text">Kategori Pekerjaan</span></span></li> --}}
-                            @can('view', $menus['dealer.index'])
-                            <li class="kt-menu__item" aria-haspopup="true"><a href="{{ route('dealer.index') }}" class="kt-menu__link "><i class="fa fa-car" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Dealer</span></a></li>
-                            @endcan
-                            @can('view', $menus['category.index'])
-                            <li class="kt-menu__item" aria-haspopup="true"><a href="{{ route('category.index') }}" class="kt-menu__link "><i class="fa fa-users" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Kategori Pekerjaan</span></a></li>
-                            @endcan
-                            @can('view', $menus['work.index'])
-                            <li class="kt-menu__item" aria-haspopup="true"><a href="{{ route('work.index') }}" class="kt-menu__link "><i class="fa fa-list" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Pekerjaan</span></a></li>
-                            @endcan
-                        </ul>
-                    </div>
-                </li>
-                @endif
-
-                @if (Auth::user()->can('view', $menus['user.index']) || Auth::user()->can('view', $menus['roleprivileges.index']))
-                <li class="kt-menu__item  kt-menu__item--submenu" aria-haspopup="true" data-ktmenu-submenu-toggle="hover">
-                    <a href="javascript:;" class="kt-menu__link kt-menu__toggle">
-                        <span class="kt-menu__link-icon">
-                            <i class="fa fa-box"></i>
-                        </span>
-                        <span class="kt-menu__link-text">Management User</span><i class="kt-menu__ver-arrow la la-angle-right"></i>
-                    </a>
-                    <div class="kt-menu__submenu "><span class="kt-menu__arrow"></span>
-                        <ul class="kt-menu__subnav">
-                            {{-- <li class="kt-menu__item  kt-menu__item--parent" aria-haspopup="true"><span class="kt-menu__link"><span class="kt-menu__link-text">Kategori Pekerjaan</span></span></li> --}}
-                            @can('view', $menus['user.index'])
-                            <li class="kt-menu__item" aria-haspopup="true"><a href="{{ route('user.index') }}" class="kt-menu__link "><i class="fa fa-car" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">User</span></a></li>
-                            @endcan
-                            @can('view', $menus['roleprivileges.index'])
-                            <li class="kt-menu__item" aria-haspopup="true"><a href="{{ route('roleprivileges.index') }}" class="kt-menu__link "><i class="fa fa-users" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Role & Privileges</span></a></li>
-                            @endcan
-                        </ul>
-                    </div>
-                </li>
-                @endcan
-
-                {{-- <li class="kt-menu__item  kt-menu__item--submenu" aria-haspopup="true" data-ktmenu-submenu-toggle="hover">
-                    <a href="{{ route('user.index') }}" class="kt-menu__link kt-menu__toggle">
-                        <span class="kt-menu__link-icon">
-                            <i class="fa fa-list"></i>
-                        </span>
-                        <span class="kt-menu__link-text">User</span>
-                    </a>
-                </li> --}}
-
-                @if (Auth::user()->can('view', $menus['report.transaction']) || Auth::user()->can('view', $menus['report.transaction_sa']) || Auth::user()->can('view', $menus['report.transaction_dealer']))
-                <li class="kt-menu__item  kt-menu__item--submenu" aria-haspopup="true" data-ktmenu-submenu-toggle="hover">
-                    <a href="javascript:;" class="kt-menu__link kt-menu__toggle">
-                        <span class="kt-menu__link-icon">
-                            <i class="fa fa-box"></i>
-                        </span>
-                        <span class="kt-menu__link-text">Laporan</span><i class="kt-menu__ver-arrow la la-angle-right"></i>
-                    </a>
-                    <div class="kt-menu__submenu "><span class="kt-menu__arrow"></span>
-                        <ul class="kt-menu__subnav">
-                            {{-- <li class="kt-menu__item  kt-menu__item--parent" aria-haspopup="true"><span class="kt-menu__link"><span class="kt-menu__link-text">Kategori Pekerjaan</span></span></li> --}}
-                            @can('view', $menus['report.transaction'])
-                            <li class="kt-menu__item" aria-haspopup="true">
-                                <a href="{{ route('report.transaction') }}" class="kt-menu__link "><i class="fa fa-wrench" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Laporan Pekerjaan</span></a>
-                            </li>
-                            @endcan
-                            @can('view', $menus['report.transaction_sa'])
-                            <li class="kt-menu__item" aria-haspopup="true">
-                                <a href="{{ route('report.transaction_sa') }}" class="kt-menu__link "><i class="fa fa-user" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Laporan Performa SA</span></a>
-                            </li>
-                            @endcan
-                            @can('view', $menus['report.transaction_dealer'])
-                            <li class="kt-menu__item" aria-haspopup="true">
-                                <a href="{{ route('report.transaction_dealer') }}" class="kt-menu__link "><i class="fa fa-car" style="display: flex; align-items: center; margin-right: 10px;"><span></span></i><span class="kt-menu__link-text">Laporan Performa Dealer</span></a>
-                            </li>
-                            @endcan
-                        </ul>
-                    </div>
-                </li>
-                @endif
-
                 {{-- Section Header --}}
                 <div class="kt-menu__section" style="padding: 10px 20px; font-weight: bold;">
                     <i class="kt-menu__section-icon fa fa-box"></i>

resources/views/transaction/index.blade.php

@@ -1800,6 +1800,18 @@ use Illuminate\Support\Facades\Auth;
                 </div>
             </div>
             
+            ${mutation.shipping_notes ? `
+            <div class="row mb-3">
+                <div class="col-md-12">
+                    <strong>Catatan dari Pengirim:</strong><br>
+                    <div class="alert alert-info mb-0">
+                        <i class="fa fa-info-circle mr-2"></i>
+                        ${mutation.shipping_notes}
+                    </div>
+                </div>
+            </div>
+            ` : ''}
+            
             <hr>
             
             <h6 class="mb-3">Detail Produk & Penerimaan:</h6>
@@ -1945,8 +1957,8 @@ use Illuminate\Support\Facades\Auth;
                     <div class="d-flex align-items-center">
                         <i class="fa fa-check-circle mr-2"></i>
                         <div>
-                            <strong>Status:</strong> Mutasi telah diterima dan siap untuk disetujui.
+                            <strong>Status:</strong> Mutasi telah diterima dan menunggu persetujuan admin.
-                            <br><small>Stock akan dipindahkan setelah Anda menyetujui mutasi ini.</small>
+                            <br><small>Stock akan dipindahkan setelah admin menyetujui mutasi ini.</small>
                         </div>
                     </div>
                 </div>
@@ -2063,135 +2075,8 @@ use Illuminate\Support\Facades\Auth;
     
 
     
-    // Handle approve button click
+    // Note: Approve and reject buttons removed from transaction page
-    $(document).on('click', '.btn-approve-mutation', function() {
+    // These actions are now only available to admin users in the admin panel
-        var mutationId = $(this).data('id');
-        
-        Swal.fire({
-            title: 'Konfirmasi Persetujuan Mutasi',
-            html: `
-                <div class="text-left">
-                    <p class="mb-3">Dengan menyetujui mutasi ini:</p>
-                    <ul class="text-muted mb-3" style="font-size: 14px;">
-                        <li>Stock akan dipindahkan secara otomatis dari dealer asal ke dealer tujuan</li>
-                        <li>Proses mutasi akan selesai dan tidak dapat dibatalkan</li>
-                        <li>Perubahan stock akan tercatat dalam log sistem</li>
-                    </ul>
-                    <div class="form-group text-left">
-                        <label for="approval-notes" class="font-weight-bold">Catatan Persetujuan:</label>
-                        <textarea id="approval-notes" class="form-control" rows="3" placeholder="Masukkan catatan persetujuan (opsional)..."></textarea>
-                    </div>
-                </div>
-            `,
-            icon: 'question',
-            showCancelButton: true,
-            confirmButtonColor: '#28a745',
-            cancelButtonColor: '#6c757d',
-            confirmButtonText: 'Ya, Setujui Mutasi',
-            cancelButtonText: 'Batal',
-            width: '500px',
-            preConfirm: () => {
-                return document.getElementById('approval-notes').value;
-            }
-        }).then((result) => {
-            if (result.isConfirmed) {
-                // Create form and submit
-                var form = $('<form>').attr({
-                    method: 'POST',
-                    action: '{{ route("mutations.approve", ":id") }}'.replace(':id', mutationId)
-                });
-                
-                form.append($('<input>').attr({
-                    type: 'hidden',
-                    name: '_token',
-                    value: $('meta[name="csrf-token"]').attr('content')
-                }));
-                
-                form.append($('<input>').attr({
-                    type: 'hidden',
-                    name: 'from_transaction_page',
-                    value: '1'
-                }));
-                
-                if (result.value) {
-                    form.append($('<input>').attr({
-                        type: 'hidden',
-                        name: 'approval_notes',
-                        value: result.value
-                    }));
-                }
-                
-                $('body').append(form);
-                form.submit();
-            }
-        });
-    });
-    
-    // Handle reject button click
-    $(document).on('click', '.btn-reject-mutation', function() {
-        var mutationId = $(this).data('id');
-        
-        Swal.fire({
-            title: 'Konfirmasi Penolakan Mutasi',
-            html: `
-                <div class="text-left">
-                    <div class="alert alert-warning mb-3">
-                        <i class="fa fa-exclamation-triangle mr-2"></i>
-                        <strong>Perhatian:</strong> Mutasi yang ditolak tidak dapat diubah lagi dan proses akan dihentikan.
-                    </div>
-                    <div class="form-group text-left">
-                        <label for="rejection-reason" class="font-weight-bold">Alasan Penolakan: <span class="text-danger">*</span></label>
-                        <textarea id="rejection-reason" class="form-control" rows="3" placeholder="Jelaskan alasan penolakan mutasi ini..." required></textarea>
-                        <small class="text-muted">Alasan penolakan wajib diisi untuk dokumentasi.</small>
-                    </div>
-                </div>
-            `,
-            icon: 'warning',
-            showCancelButton: true,
-            confirmButtonColor: '#dc3545',
-            cancelButtonColor: '#6c757d',
-            confirmButtonText: 'Ya, Tolak Mutasi',
-            cancelButtonText: 'Batal',
-            width: '500px',
-            preConfirm: () => {
-                const reason = document.getElementById('rejection-reason').value;
-                if (!reason || reason.trim() === '') {
-                    Swal.showValidationMessage('Alasan penolakan harus diisi!');
-                    return false;
-                }
-                return reason;
-            }
-        }).then((result) => {
-            if (result.isConfirmed && result.value) {
-                // Create form and submit
-                var form = $('<form>').attr({
-                    method: 'POST',
-                    action: '{{ route("mutations.reject", ":id") }}'.replace(':id', mutationId)
-                });
-                
-                form.append($('<input>').attr({
-                    type: 'hidden',
-                    name: '_token',
-                    value: $('meta[name="csrf-token"]').attr('content')
-                }));
-                
-                form.append($('<input>').attr({
-                    type: 'hidden',
-                    name: 'from_transaction_page',
-                    value: '1'
-                }));
-                
-                form.append($('<input>').attr({
-                    type: 'hidden',
-                    name: 'rejection_reason',
-                    value: result.value
-                }));
-                
-                $('body').append(form);
-                form.submit();
-            }
-        });
-    });
     
     // Save active tab to localStorage
     $('.nav-link').on('click', function() {

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

@@ -53,7 +53,9 @@
 
     @if($row->status->value === 'approved')
         <!-- Stock has already been moved automatically after approval -->
-        <span class="badge badge-success">Stock Telah Dipindahkan</span>
+        <div class="text-center">
+            <span class="btn btn-sm btn-success" style="cursor: default; pointer-events: none;">Selesai</span>
+        </div>
     @endif
 </div>
 

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

@@ -48,6 +48,55 @@
 </div>  
 @endsection
 
+@section('styles')
+<style>
+/* DataTables Sorting Icons */
+table.dataTable thead .sorting:before,
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:before,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:before,
+table.dataTable thead .sorting_desc:after {
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    opacity: 0.5;
+}
+
+table.dataTable thead .sorting:before {
+    content: "\f0dc";
+}
+
+table.dataTable thead .sorting_asc:before {
+    content: "\f0de";
+    opacity: 1;
+}
+
+table.dataTable thead .sorting_desc:before {
+    content: "\f0dd";
+    opacity: 1;
+}
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after {
+    display: none;
+}
+
+/* Ensure column headers are clickable */
+table.dataTable thead th {
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+}
+
+table.dataTable thead th.sorting,
+table.dataTable thead th.sorting_asc,
+table.dataTable thead th.sorting_desc {
+    cursor: pointer;
+}
+</style>
+@endsection
+
 @section('javascripts')
 <script src="{{ mix('js/warehouse_management/mutations/index.js') }}"></script>
 @endsection

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

@@ -215,7 +215,7 @@
 
                         @if($mutation->status->value === 'received' && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
                             <!-- Approve Button for sender or admin -->
-                            <button type="button" class="btn btn-success btn-approve" data-id="{{ $mutation->id }}">
+                            <button type="button" class="btn btn-success btn-approve" data-toggle="modal" data-target="#approveModal{{ $mutation->id }}" data-id="{{ $mutation->id }}">
                                 Setujui Mutasi
                             </button>
                             <!-- Reject Button for sender or admin -->
@@ -248,12 +248,12 @@
 @if($mutation->status->value === 'sent' && auth()->user()->dealer_id == $mutation->to_dealer_id)
 <!-- Receive Modal -->
 <div class="modal fade" id="receiveModal{{ $mutation->id }}" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Terima Mutasi</h5>
-                <button type="button" class="close" data-dismiss="modal">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span>&times;</span>
+                    <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <form action="{{ route('mutations.receive', $mutation->id) }}" method="POST">
@@ -263,6 +263,16 @@
                         <strong>Konfirmasi!</strong> Anda akan menerima mutasi dari <strong>{{ $mutation->fromDealer->name }}</strong>.
                     </div>
                     
+                    @if($mutation->shipping_notes)
+                    <div class="form-group">
+                        <label><strong>Catatan dari Pengirim:</strong></label>
+                        <div class="alert alert-warning">
+                            <i class="fa fa-info-circle mr-2"></i>
+                            {{ $mutation->shipping_notes }}
+                        </div>
+                    </div>
+                    @endif
+                    
                     <div class="form-group">
                         <label>Catatan Penerimaan</label>
                         <textarea name="reception_notes" class="form-control" rows="3" placeholder="Catatan kondisi barang saat diterima (opsional)"></textarea>
@@ -320,13 +330,13 @@
 
 @if($mutation->status->value === 'received' && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
 <!-- Approve Modal -->
-<div class="modal fade" id="approveModal{{ $mutation->id }}" tabindex="-1" role="dialog">
+<div class="modal fade" id="approveModal{{ $mutation->id }}" tabindex="-1" role="dialog" aria-labelledby="approveModalLabel{{ $mutation->id }}" aria-hidden="true">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Setujui Mutasi</h5>
+                <h5 class="modal-title" id="approveModalLabel{{ $mutation->id }}">Setujui Mutasi</h5>
-                <button type="button" class="close" data-dismiss="modal">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span>&times;</span>
+                    <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <form action="{{ route('mutations.approve', $mutation->id) }}" method="POST" class="approve-form">
@@ -389,12 +399,12 @@
 
 <!-- Reject Modal -->
 <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Tolak Mutasi</h5>
-                <button type="button" class="close" data-dismiss="modal">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span>&times;</span>
+                    <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <form action="{{ route('mutations.reject', $mutation->id) }}" method="POST">
@@ -421,12 +431,12 @@
 @if($mutation->canBeCancelled() && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
 <!-- Cancel Modal -->
 <div class="modal fade" id="cancelModal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Batalkan Mutasi</h5>
-                <button type="button" class="close" data-dismiss="modal">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span>&times;</span>
+                    <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <form action="{{ route('mutations.cancel', $mutation->id) }}" method="POST">
@@ -472,6 +482,52 @@
 .approve-form .form-control.text-center {
     text-align: center;
 }
+
+/* Ensure modal backdrop is properly removed */
+.modal-backdrop {
+    z-index: 1040;
+}
+
+.modal {
+    z-index: 1050;
+}
+
+/* Force remove any blocking overlays */
+body.modal-open {
+    overflow: hidden;
+}
+
+body:not(.modal-open) {
+    overflow: auto !important;
+    padding-right: 0 !important;
+}
+
+/* Ensure all modals are centered */
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 1rem);
+}
+
+.modal-dialog-centered::before {
+    display: block;
+    height: calc(100vh - 1rem);
+    content: "";
+}
+
+.modal-dialog-centered.modal-dialog-centered-sm {
+    min-height: calc(100% - 1rem);
+}
+
+@media (min-width: 576px) {
+    .modal-dialog-centered {
+        min-height: calc(100% - 3.5rem);
+    }
+    
+    .modal-dialog-centered::before {
+        height: calc(100vh - 3.5rem);
+    }
+}
 </style>
 @endsection
 
@@ -484,6 +540,49 @@ $(document).ready(function() {
         $('#approveModal' + mutationId).modal('show');
     });
     
+    // Handle modal close events
+    $('.modal').on('hidden.bs.modal', function () {
+        // Reset form
+        if ($(this).find('form').length > 0) {
+            $(this).find('form')[0].reset();
+        }
+        
+        // Remove modal backdrop manually if it exists
+        $('.modal-backdrop').remove();
+        
+        // Ensure body is not blocked
+        $('body').removeClass('modal-open');
+        $('body').css('padding-right', '');
+        
+        // Remove any overlay that might be blocking
+        $('.modal-backdrop, .fade.show').remove();
+    });
+    
+    // Additional cleanup for approve modal specifically
+    $(document).on('click', '[data-dismiss="modal"]', function() {
+        var $modal = $(this).closest('.modal');
+        $modal.modal('hide');
+        
+        setTimeout(function() {
+            $('.modal-backdrop').remove();
+            $('body').removeClass('modal-open');
+            $('body').css('padding-right', '');
+            
+            // Force remove any remaining overlays
+            $('.modal-backdrop, .modal-open').remove();
+            $('body').removeClass('modal-open');
+        }, 300);
+    });
+    
+    // Force cleanup on any modal hide
+    $(document).on('hide.bs.modal', '.modal', function() {
+        setTimeout(function() {
+            $('.modal-backdrop').remove();
+            $('body').removeClass('modal-open');
+            $('body').css('padding-right', '');
+        }, 100);
+    });
+
     // Validate quantity approved in receive modal
     $(document).on('input', 'input[name*="quantity_approved"]', function() {
         var maxValue = parseFloat($(this).attr('max'));

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

@@ -1,5 +1,34 @@
 @extends('layouts.backapp')
 
+@section('styles')
+<style>
+/* Ensure DataTables sorting icons are visible */
+table.dataTable thead .sorting:before,
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:before,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:before,
+table.dataTable thead .sorting_desc:after {
+    opacity: 0.5 !important;
+}
+
+table.dataTable thead .sorting_asc:before,
+table.dataTable thead .sorting_desc:after {
+    opacity: 1 !important;
+}
+
+/* Make sure table headers are clickable */
+table.dataTable thead th {
+    cursor: pointer;
+}
+
+table.dataTable thead th.sorting_disabled {
+    cursor: default;
+}
+
+</style>
+@endsection
+
 @section('content')
 <div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
   <div class="kt-portlet__head kt-portlet__head--lg">

webpack.mix.js

@@ -12,6 +12,7 @@ const mix = require("laravel-mix");
  */
 
 mix.js("resources/js/app.js", "public/js")
+    .js("resources/js/vendor.js", "public/js")
     .sass("resources/sass/app.scss", "public/css")
     .js(
         "resources/js/warehouse_management/product_categories/index.js",
@@ -41,6 +42,48 @@ mix.js("resources/js/app.js", "public/js")
         "resources/js/warehouse_management/mutations/create.js",
         "public/js/warehouse_management/mutations"
     )
+    // Copy vendor libraries from node_modules
+    .copy(
+        "node_modules/datatables.net/js/jquery.dataTables.min.js",
+        "public/js/vendor"
+    )
+    .copy(
+        "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js",
+        "public/js/vendor"
+    )
+    .copy(
+        "node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
+        "public/js/vendor"
+    )
+    .copy(
+        "node_modules/sweetalert2/dist/sweetalert2.min.js",
+        "public/js/vendor"
+    )
+    .copy("node_modules/chart.js/dist/chart.umd.js", "public/js/vendor")
+    .copy(
+        "node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.min.js",
+        "public/js/vendor"
+    )
+    // Copy CSS files
+    .copy(
+        "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css",
+        "public/css/vendor"
+    )
+    .copy(
+        "node_modules/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
+        "public/css/vendor"
+    )
+    .copy(
+        "node_modules/sweetalert2/dist/sweetalert2.min.css",
+        "public/css/vendor"
+    )
+    // Keep existing manual files as backup
+    .copy("resources/js/cdn/dataTables.bootstrap4.min.js", "public/js/cdn")
+    .copy("resources/js/cdn/dataTables.fixedColumns.min.js", "public/js/cdn")
+    .copy("resources/js/cdn/jquery.dataTables.min.js", "public/js/cdn")
+    .copy("resources/css/dataTables.bootstrap4.min.css", "public/css")
+    .copy("resources/css/fixedColumns.bootstrap4.min.css", "public/css")
+    .copy("resources/css/google-font.css", "public/css")
     .sourceMaps();
 
 mix.browserSync({