feat: implement new Citrus admin design system and integrate master layout components

resources/views/admin/inc/citrus-design.blade.php

@@ -0,0 +1,373 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+<style>
+:root {
+    --sidebar-bg: #0b132b;
+    --sidebar-hover: rgba(255, 255, 255, 0.08);
+    --sidebar-active: #3b82f6;
+    --sidebar-text: rgba(255, 255, 255, 0.7);
+    --header-bg: #ffffff;
+    --body-bg: #f4f7fe;
+    --card-bg: #ffffff;
+    --primary: #3b82f6;
+    --text-main: #1e293b;
+    --text-muted: #64748b;
+    --border-color: #e2e8f0;
+}
+
+body {
+    background-color: var(--body-bg) !important;
+    font-family: 'Inter', sans-serif !important;
+    color: var(--text-main);
+}
+
+#page-container {
+    background-color: var(--body-bg) !important;
+}
+
+/* Sidebar Overrides */
+#sidebar {
+    background-color: var(--sidebar-bg) !important;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1) !important;
+}
+
+.sidebar-content {
+    background-color: var(--sidebar-bg) !important;
+}
+
+#sidebar .content-side-user {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+    padding: 30px 20px !important;
+    text-align: left !important;
+}
+
+#sidebar .content-side-user .img-link img {
+    border-radius: 12px !important;
+    width: 48px !important;
+    height: 48px !important;
+    margin-bottom: 15px;
+}
+
+#sidebar .content-side-user .badge {
+    border-radius: 6px !important;
+    padding: 4px 8px !important;
+    font-size: 10px !important;
+    text-transform: uppercase;
+}
+
+#sidebar .nav-main {
+    padding: 10px 15px !important;
+}
+
+#sidebar .nav-main li {
+    margin-bottom: 4px;
+}
+
+#sidebar .nav-main li a {
+    border-radius: 10px !important;
+    padding: 12px 15px !important;
+    color: var(--sidebar-text) !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+}
+
+#sidebar .nav-main li a i,
+#sidebar .nav-main li a img {
+    margin-right: 12px !important;
+    opacity: 0.8;
+}
+
+#sidebar .nav-main li a:hover {
+    background-color: var(--sidebar-hover) !important;
+    color: #fff !important;
+}
+
+#sidebar .nav-main li a.active,
+#sidebar .nav-main li.open > a {
+    background-color: var(--sidebar-active) !important;
+    color: #fff !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
+}
+
+#sidebar .nav-main li a.active i,
+#sidebar .nav-main li a.active img {
+    opacity: 1;
+}
+
+#sidebar .nav-main-heading {
+    padding: 20px 15px 10px !important;
+    color: rgba(255, 255, 255, 0.3) !important;
+    font-size: 11px !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+#search-module {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #fff !important;
+    border-radius: 10px !important;
+    margin: 0 15px 20px !important;
+    width: calc(100% - 30px) !important;
+}
+
+#search-module::placeholder {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+/* Header Overrides */
+#page-header {
+    background-color: var(--header-bg) !important;
+    box-shadow: 0 1px 0 var(--border-color) !important;
+    height: 70px !important;
+}
+
+.content-header {
+    padding: 0 30px !important;
+}
+
+#page-header .btn-dual-secondary {
+    background-color: #f8fafc !important;
+    border: 1px solid #f1f5f9 !important;
+    color: var(--text-muted) !important;
+    border-radius: 10px !important;
+    width: 40px !important;
+    height: 40px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+#page-header .btn-dual-secondary:hover {
+    background-color: #f1f5f9 !important;
+    color: var(--text-main) !important;
+}
+
+#page-header #page-header-user-dropdown {
+    width: auto !important;
+    padding: 0 15px !important;
+}
+
+.mini-header {
+    display: none !important;
+}
+
+/* Main Content Container */
+.main-container {
+    padding-top: 0 !important;
+}
+
+.content-ajax {
+    padding: 30px !important;
+    margin-top: 70px !important;
+}
+
+/* Card/Block Refactor */
+.block {
+    background: var(--card-bg) !important;
+    border-radius: 20px !important;
+    border: none !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
+    margin-bottom: 30px;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.block:hover {
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
+}
+
+.block-header {
+    padding: 25px 30px !important;
+    border-bottom: 1px solid #f8fafc !important;
+    background-color: transparent !important;
+}
+
+.block-title {
+    font-size: 18px !important;
+    font-weight: 700 !important;
+    color: var(--text-main) !important;
+}
+
+.block-content {
+    padding: 30px !important;
+}
+
+/* Table Design (from Image 2) */
+.table {
+    width: 100% !important;
+    border-collapse: separate !important;
+    border-spacing: 0 !important;
+}
+
+.table thead th {
+    background-color: #f8fafc !important;
+    border: none !important;
+    color: var(--text-muted) !important;
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 15px 20px !important;
+}
+
+.table thead th:first-child { border-radius: 10px 0 0 10px; }
+.table thead th:last-child { border-radius: 0 10px 10px 0; }
+
+.table tbody td {
+    padding: 18px 20px !important;
+    border-bottom: 1px solid #f8fafc !important;
+    vertical-align: middle !important;
+    color: var(--text-main) !important;
+}
+
+.table tbody tr:last-child td {
+    border-bottom: none !important;
+}
+
+/* Button & UI Element Refinement */
+.btn {
+    border-radius: 10px !important;
+    font-weight: 600 !important;
+    padding: 10px 20px !important;
+    transition: all 0.2s ease;
+}
+
+.btn-primary {
+    background-color: var(--primary) !important;
+    border-color: var(--primary) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
+}
+
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3) !important;
+}
+
+.form-control {
+    border-radius: 12px !important;
+    border: 1px solid var(--border-color) !important;
+    padding: 12px 18px !important;
+    background-color: #fff !important;
+}
+
+.form-control:focus {
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
+}
+
+/* Breadcrumbs Styling */
+.breadcrumb {
+    padding: 0 !important;
+    margin-bottom: 25px !important;
+    background: transparent !important;
+}
+
+.breadcrumb-item {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.breadcrumb-item a {
+    color: var(--text-muted) !important;
+}
+
+.breadcrumb-item.active {
+    color: var(--text-main) !important;
+}
+
+/* Scrollbar for Sidebar */
+.sidebar-content::-webkit-scrollbar {
+    width: 4px;
+}
+
+.sidebar-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+
+/* Fix for Sidebar user info area */
+.sidebar-mini-hidden-b {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.sidebar-mini-hidden-b .badge {
+    margin: 5px 0 !important;
+}
+
+.sidebar-mini-hidden-b .img-fluid {
+    filter: brightness(0) invert(1);
+    max-height: 35px;
+}
+
+/* Mini Sidebar Support */
+.sidebar-mini #sidebar {
+    width: 60px !important;
+}
+
+.sidebar-mini #sidebar .nav-main-heading {
+    display: none !important;
+}
+
+.sidebar-mini #sidebar .nav-main li a span {
+    display: none !important;
+}
+
+.sidebar-mini #sidebar .nav-main li a {
+    justify-content: center !important;
+    padding: 12px 0 !important;
+}
+
+.sidebar-mini #sidebar .nav-main li a i,
+.sidebar-mini #sidebar .nav-main li a img {
+    margin-right: 0 !important;
+}
+
+/* Responsive Fixes */
+@media (max-width: 991.98px) {
+    .content-header {
+        padding: 0 15px !important;
+    }
+    
+    .content-ajax {
+        padding: 15px !important;
+    }
+    
+    #sidebar {
+        transform: translateX(-100%);
+    }
+    
+    .sidebar-o #sidebar {
+        transform: translateX(0);
+    }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.content-ajax {
+    animation: fadeIn 0.4s ease-out;
+}
+
+/* Hide Footer Status for cleaner look */
+#page-footer {
+    background: transparent !important;
+    border-top: 1px solid var(--border-color) !important;
+    color: var(--text-muted) !important;
+    position: relative !important;
+    text-align: center !important;
+    padding: 20px !important;
+}
+</style>

resources/views/admin/master.blade.php

@@ -63,6 +63,7 @@ if (getisset("ajax")) {
         </script>
 
         @include("admin.inc.plugins")
+        @include("admin.inc.citrus-design")
 
         @yield('scripts')
 
@@ -177,14 +178,14 @@ if (getisset("ajax")) {
             <div class="clearfix"></div>
             @include('admin.inc.feedback-modal')
             <footer id="page-footer" class="t-center" style="    background: gray;
-            color: white;
+                color: white;
-            padding: 5px 10px;
+                padding: 5px 10px;
-            position: fixed;
+                position: fixed;
-            bottom: 0px;
+                bottom: 0px;
-            right: 0px;
+                right: 0px;
-            width: 100%;
+                width: 100%;
-            text-align: right;
+                text-align: right;
-            font-size: 12px;">
+                font-size: 12px;">
                 <div class="footer-status"></div>
             </footer>
         </div>