add feature sort in crud controller

assets/css/admin.scss

@@ -1,14 +1,16 @@
+@import "./_admin_vars.scss";
+
 $theme-colors: (
   "primary": #1ab5dc,
   "primary-light": lighten(#3183aa, 40%),
   "dark-blue": #1e2430,
-);
+) !default;
 
-$grid-gutter-width: 0px;
-$pagination-color: #343a40;
-$pagination-bg: #ffffff;
-$pagination-active-color: #ffffff;
-$pagination-active-bg: #343a40;
+$grid-gutter-width: 0px !default;
+$pagination-color: #343a40 !default;
+$pagination-bg: #ffffff !default;
+$pagination-active-color: #ffffff !default;
+$pagination-active-bg: #343a40 !default;
 
 @import "~choices.js/src/styles/choices.scss";
 @import "~bootstrap/scss/bootstrap.scss";
@@ -21,6 +23,10 @@ $pagination-active-bg: #343a40;
     }
 }
 
+.flag-icon-en {
+    background-image: url(~flag-icon-css/flags/4x3/gb.svg);
+}
+
 body {
     overflow-x: hidden;
 }
@@ -29,10 +35,6 @@ body {
     width: 30px;
 }
 
-.flag-icon-en {
-  background-image: url(~flag-icon-css/flags/4x3/gb.svg);
-}
-
 .choices__list--dropdown {
     display: none;
 }
@@ -93,9 +95,9 @@ body {
     padding-right: 25px;
 }
 
-.thead-light {
+.table .thead-light {
     a, th {
-        color: #333333;
+        color: map-get($theme-colors, 'dark-blue');
     }
 }
 
@@ -123,7 +125,7 @@ tr.table-primary-light {
 }
 
 .bg-dark-blue {
-    background: #242b3b;
+    background: map-get($theme-colors, 'dark-blue');
     color: #fff;
 
     .nav-item-label {
@@ -277,6 +279,13 @@ th {
     }
 }
 
+.bg-tiles {
+    background-color: #c1c1c1;
+    background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
+}
+
 .tab-form {
     padding: 15px;
 }
@@ -483,3 +492,5 @@ fieldset.form-group {
         line-height: normal;
     }
 }
+
+@import "./_admin_extend.scss";

package.json

@@ -26,6 +26,7 @@
         "jquery": "^3.6.0",
         "popper.js": "^1.16.0",
         "qrcodejs": "^1.0.0",
+        "sortablejs": "^1.13.0",
         "tinymce": "^5.7.1",
         "vanillajs-datepicker": "^1.1.2",
         "zxcvbn": "^4.4.2"

yarn.lock

@@ -5402,6 +5402,11 @@ sockjs@0.3.21:
     uuid "^3.4.0"
     websocket-driver "^0.7.4"
 
+sortablejs@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.13.0.tgz#3ab2473f8c69ca63569e80b1cd1b5669b51269e9"
+  integrity sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
+
 source-list-map@^2.0.0, source-list-map@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"