feat: implement admin dashboard UI and utility functions for plugin management

assets/admin/css/citrus.css

@@ -1,4 +1,5 @@
-.table-sm td, .table-sm th {
+.table-sm td,
+.table-sm th {
     padding: 2px;
     text-align: left;
     white-space: nowrap;
@@ -6,75 +7,93 @@
     text-overflow: ellipsis;
 }
 
-.table-sm input, .table-sm select, .table-sm .select2-selection {
+.table-sm input,
+.table-sm select,
+.table-sm .select2-selection {
     padding: 0px 10px;
-    height:30px;
-    border:none;
+    height: 30px;
+    border: none;
     background: transparent;
 }
+
 .table-sm .select2 {
-    min-width:200px;
+    min-width: 200px;
 }
+
 .table-sm td {
-    min-width:10%;
+    min-width: 10%;
 }
+
 .sidebar-inverse #sidebar img {
     filter: contrast(0) brightness(2);
 }
+
 .sidebar-inverse #sidebar input {
-    
-background:transparent;
-    
-margin-bottom:10px;
-    
-color: white;
+
+    background: transparent;
+
+    margin-bottom: 10px;
+
+    color: white;
 }
+
 .sidebar-inverse i img {
     filter: invert(1) !important;
     width: 33px;
 }
-.table-sm td:hover{
+
+.table-sm td:hover {
     /*min-width: 200px;*/
-    overflow:none !important;
+    overflow: none !important;
 }
+
 .rc-handle:hover {
     background: #e0e0e0;
     width: 5px;
     margin-left: -2px;
 }
+
 .table-responsive {
-    min-height:500px
+    min-height: 500px
 }
+
 .table-sm .dropdown-item input {
-    height:initial;
+    height: initial;
 }
+
 .table-sm .dropdown-item {
     font-size: 11px;
-    padding:3px
+    padding: 3px
 }
+
 .table-sm .dropdown-toggle {
     background: none;
 }
+
 .table-sm .dropdown-menu {
     max-height: 226px;
     overflow: auto;
 }
 
-.data-tables input, .data-tables select, .data-tables .select2-selection {
+.data-tables input,
+.data-tables select,
+.data-tables .select2-selection {
     padding: 0px 10px;
-    height:30px;
-    border:none;
+    height: 30px;
+    border: none;
     background: transparent;
 }
 
-.data-tables td, .data-tables th {
+.data-tables td,
+.data-tables th {
     padding: 2px;
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.new-form td, .new-form th {
+.new-form td,
+.new-form th {
     padding: 2px;
     text-align: center;
     white-space: nowrap;
@@ -82,29 +101,34 @@ color: white;
     text-overflow: ellipsis;
 }
 
-.new-form input, .new-form select, .new-form .select2-selection {
+.new-form input,
+.new-form select,
+.new-form .select2-selection {
     padding: 0px 10px;
-    height:30px;
-   
-}
-.new-form .select2 {
-    min-width:200px;
-}
-.new-form td {
-    min-width:10%;
+    height: 30px;
+
 }
 
-.new-form td:hover{
+.new-form .select2 {
+    min-width: 200px;
+}
+
+.new-form td {
+    min-width: 10%;
+}
+
+.new-form td:hover {
     /*min-width: 200px;*/
-    overflow:none !important;
+    overflow: none !important;
 }
 
 .new-form .dropdown-item input {
-    height:initial;
+    height: initial;
 }
+
 .new-form .dropdown-item {
     font-size: 11px;
-    padding:3px
+    padding: 3px
 }
 
 .new-form .dropdown-menu {
@@ -112,16 +136,17 @@ color: white;
     overflow: auto;
 }
 
-.new-form  .btn-sm {
+.new-form .btn-sm {
     height: 30px;
 }
 
-table .filter-list >  button {
+table .filter-list>button {
     padding: 3px;
     height: 12px;
 }
-table .filter-list > button:after {
-    margin:0px;
+
+table .filter-list>button:after {
+    margin: 0px;
     vertical-align: text-top;
     margin-top: 1px;
 }
@@ -131,42 +156,56 @@ table .filter-list > button:after {
     height: 150px;
     overflow: auto;
 }
+
 .filter-list {
-    position:absolute;
-    top:3px;
-    right:3px;
+    position: absolute;
+    top: 3px;
+    right: 3px;
     z-index: 1000;
 }
-.filter-list > button {
+
+.filter-list>button {
     background: white !important;
 }
+
 .table-sm thead th {
-    position:relative;
+    position: relative;
 }
-.dx-datagrid td, .table-bordered, .table-bordered td, .table-bordered th {
+
+.dx-datagrid td,
+.table-bordered,
+.table-bordered td,
+.table-bordered th {
     border-color: #a4a3a3 !important;
 }
+
 .sub-menu-text {
     position: relative;
     left: 40px;
 }
+
 .sub-menu-icon {
     width: 22px !important;
 }
+
 .tab-pane {
     display: none;
 }
+
 .tab-pane.active {
     display: block;
 }
+
 .tab-pane.active .select2-container {
     width: 100% !important;
 }
 
 .modal-content {
     border-radius: 15px;
-    border: none; /* Optional: Cleaner look */
+    border: none;
+    /* Optional: Cleaner look */
 }
+
 .modal-header {
     border-radius: 15px 15px 0 0;
 }
@@ -177,20 +216,31 @@ table .filter-list > button:after {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem; /* Space between icon and text */
+    gap: 0.5rem;
+    /* Space between icon and text */
     vertical-align: middle;
 }
 
-.btn i, 
-.btn .material-icons, 
+.btn i,
+.btn .material-icons,
 .btn .material-symbols-outlined,
 .btn svg {
-    font-size: 1.1em; /* Slightly larger icons usually look better */
+    font-size: 1.1em;
+    /* Slightly larger icons usually look better */
     line-height: 1;
-    margin: 0; /* Reset margins */
+    margin: 0;
+    /* Reset margins */
 }
 
 /* Reset existing specific fix to rely on flexbox */
 .btn .material-symbols-outlined {
-    top: 0; 
+    top: 0;
+}
+
+.content-header .btn {
+    color: white;
+}
+
+.content-header .btn:hover {
+    color: black;
 }