feat: implement tabbed interface to toggle between Gantt chart and intern list in admin dashboard

resources/views/front/career/admin_dashboard.blade.php

@@ -11,11 +11,29 @@
       <!-- Statistics Section -->
       @include('front.career.partials.stats')
 
-      <!-- Gantt Chart Section -->
+      <!-- Tab Switcher Menu -->
-      @include('front.career.partials.gantt')
+      <div class="bg-white rounded-3xl p-4 shadow-xl border border-slate-100/50 mb-8">
+        <div class="flex flex-col sm:flex-row gap-3" role="tablist">
+          <button type="button" role="tab" aria-selected="true" data-tab-target="gantt-chart" class="admin-tab-btn active flex-1 flex items-center justify-center gap-3 py-4 px-6 rounded-2xl text-center font-bold text-sm transition-all border border-transparent cursor-pointer">
+            <i class="uil uil-schedule text-lg"></i>
+            <span>Gantt Şeması ve Takvimi</span>
+          </button>
+          
+          <button type="button" role="tab" aria-selected="false" data-tab-target="intern-list" class="admin-tab-btn flex-1 flex items-center justify-center gap-3 py-4 px-6 rounded-2xl text-center font-bold text-sm transition-all border border-transparent text-slate-600 hover:bg-slate-50 cursor-pointer">
+            <i class="uil uil-list-ul text-lg"></i>
+            <span>Stajyer Listesi ve Detaylı Takip</span>
+          </button>
+        </div>
+      </div>
 
-      <!-- Interns Table / Detailed List Section -->
+      <!-- Tab Panels -->
-      @include('front.career.partials.list')
+      <div id="gantt-chart-panel" class="admin-tab-panel space-y-6">
+        @include('front.career.partials.gantt')
+      </div>
+
+      <div id="intern-list-panel" class="admin-tab-panel hidden space-y-6">
+        @include('front.career.partials.list')
+      </div>
 
     </div>
   </div>
@@ -174,6 +192,22 @@
   </div>
 </div>
 
+@push('styles')
+<style>
+  .admin-tab-btn {
+    transition: all 0.2s ease-in-out;
+  }
+  .admin-tab-btn:hover:not(.active) {
+    background-color: #f8fafc;
+  }
+  .admin-tab-btn.active {
+    background-color: #eff6ff;
+    border-color: #dbeafe;
+    color: #1e40af !important;
+  }
+</style>
+@endpush
+
 @push('scripts')
 <script>
   let currentInternId = null;
@@ -557,6 +591,51 @@
   function goToSlide(idx) {
     renderSlide(parseInt(idx));
   }
+
+  // Admin Tab Switch Logic
+  document.addEventListener('DOMContentLoaded', function() {
+    const adminTabButtons = document.querySelectorAll('.admin-tab-btn');
+    const adminTabPanels = document.querySelectorAll('.admin-tab-panel');
+
+    adminTabButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        // Deactivate all buttons
+        adminTabButtons.forEach(btn => {
+          btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
+          btn.classList.add('text-slate-600', 'bg-transparent', 'border-transparent');
+          btn.setAttribute('aria-selected', 'false');
+        });
+
+        // Hide all panels
+        adminTabPanels.forEach(panel => {
+          panel.classList.add('hidden');
+        });
+
+        // Activate clicked button
+        button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
+        button.classList.remove('text-slate-600', 'bg-transparent', 'border-transparent');
+        button.setAttribute('aria-selected', 'true');
+
+        // Show target panel
+        const targetId = button.getAttribute('data-tab-target');
+        const targetPanel = document.getElementById(targetId + '-panel');
+        if (targetPanel) {
+          targetPanel.classList.remove('hidden');
+          
+          // Re-render DevExtreme Gantt chart if visible, to prevent rendering scale bugs
+          if (targetId === 'gantt-chart') {
+            const ganttEl = document.getElementById('gantt');
+            if (ganttEl) {
+              const ganttInstance = $(ganttEl).dxGantt('instance');
+              if (ganttInstance) {
+                ganttInstance.repaint();
+              }
+            }
+          }
+        }
+      });
+    });
+  });
 </script>
 @endpush