From 58ae406b36f5ec55982a021cbeebc47036bc9124 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 16 Jun 2026 17:14:54 +0300
Subject: [PATCH] feat: replace custom gantt chart implementation with
 DevExtreme widget

---
 .../Widgets/InternGanttChartWidget.php        |   2 +
 .../intern-gantt-chart-widget.blade.php       | 336 ++++++------------
 2 files changed, 118 insertions(+), 220 deletions(-)

diff --git a/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php b/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
index 9f16844..a91cd94 100644
--- a/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
+++ b/app/Filament/Admin/Resources/InternApplications/Widgets/InternGanttChartWidget.php
@@ -161,6 +161,8 @@ class InternGanttChartWidget extends Widget
                 'grid_end' => $gridEnd,
                 'hex_color' => $hexColor,
                 'is_stripes' => $isStripes,
+                'raw_start' => $intern->internship_start_date,
+                'raw_end' => $intern->internship_end_date,
             ];
         });
 
diff --git a/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php b/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
index e933077..31b0f56 100644
--- a/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
+++ b/resources/views/filament/admin/resources/intern-applications/widgets/intern-gantt-chart-widget.blade.php
@@ -1,157 +1,26 @@
-@php
-$monthNames = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];
-$currentMonth = (int) date('n');
-@endphp
-
 <x-filament-widgets::widget>
+    <!-- DevExtreme Gantt CSS Dependencies -->
+    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css">
+    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.css">
+
     <style>
-        .fi-wi-intern-gantt-chart .gantt {
-            display: grid;
-            border: 0;
+        .fi-wi-intern-gantt-chart .demo-container {
+            height: 560px;
+            background-color: #fff;
             border-radius: 12px;
-            position: relative;
             overflow: hidden;
-            box-sizing: border-box;
-            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
-            background-color: #fff;
-            margin-top: 10px;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            margin-top: 12px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
         }
-        .dark .fi-wi-intern-gantt-chart .gantt {
-            background-color: #1f2937;
-            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row {
-            display: grid;
-            grid-template-columns: 180px 1fr;
-            background-color: #fff;
-            position: relative;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row {
-            background-color: #111827;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
-            background-color: #f9fafb;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) {
-            background-color: #1f2937/40;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
-            background-color: #f9fafb;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row:nth-child(even) .gantt__row-first {
-            background-color: #1f2937/40;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--lines {
-            position: absolute;
-            height: 100%;
-            width: 100%;
-            background-color: transparent;
-            grid-template-columns: 180px repeat(12, 1fr);
-            pointer-events: none;
-            z-index: 1;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--lines span {
-            display: block;
-            border-right: 1px solid rgba(0, 0, 0, 0.05);
-            height: 100%;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row--lines span {
-            border-right: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
-            background-color: rgba(10, 52, 68, 0.08);
-            z-index: 2;
-            border-left: 1px dashed rgba(239, 68, 68, 0.5);
-            border-right: 1px dashed rgba(239, 68, 68, 0.5);
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row--lines span.marker {
-            background-color: rgba(255, 255, 255, 0.03);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--months {
-            color: #fff;
-            background-color: #0a3444 !important;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            grid-template-columns: 180px repeat(12, 1fr);
-            z-index: 5;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row--months {
-            background-color: #030712 !important;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
-            border-top: 0 !important;
-            background-color: #0a3444 !important;
-            color: #fff;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row--months .gantt__row-first {
-            background-color: #030712 !important;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row--months span {
-            text-align: center;
-            font-size: 13px;
-            align-self: center;
-            font-weight: bold;
-            padding: 15px 0;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row-first {
-            background-color: #fff;
-            border-width: 1px 0 0 0;
-            border-color: rgba(0, 0, 0, 0.05);
-            border-style: solid;
-            padding: 15px 12px;
-            font-size: 13px;
-            font-weight: bold;
-            text-align: left;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            color: #374151;
-            z-index: 2;
-        }
-        .dark .fi-wi-intern-gantt-chart .gantt__row-first {
+        .dark .fi-wi-intern-gantt-chart .demo-container {
             background-color: #111827;
             border-color: rgba(255, 255, 255, 0.05);
-            color: #d1d5db;
         }
-        .fi-wi-intern-gantt-chart .gantt__row-bars {
-            list-style: none;
-            display: grid;
-            padding: 12px 0;
-            margin: 0;
-            grid-template-columns: repeat(12, 1fr);
-            grid-gap: 8px 0;
-            border-top: 1px solid rgba(221, 221, 221, 0.4);
-            z-index: 2;
+        .fi-wi-intern-gantt-chart #gantt {
+            height: 100%;
             width: 100%;
         }
-        .dark .fi-wi-intern-gantt-chart .gantt__row-bars {
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row-bars li {
-            font-weight: 600;
-            text-align: left;
-            font-size: 12px;
-            min-height: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 4px 14px;
-            color: #fff;
-            overflow: hidden;
-            position: relative;
-            cursor: pointer;
-            border-radius: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-            transition: all 0.2s ease;
-        }
-        .fi-wi-intern-gantt-chart .gantt__row-bars li:hover {
-            transform: scale(1.01);
-            filter: brightness(1.05);
-        }
-        .fi-wi-intern-gantt-chart .gantt__row-bars li.stripes {
-            background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.12) 5px, rgba(255,255,255,.12) 12px);
-        }
     </style>
 
     <x-filament::section class="fi-wi-intern-gantt-chart">
@@ -161,7 +30,7 @@ $currentMonth = (int) date('n');
                     Stajyer Gantt Şeması ve Takvimi
                 </span>
                 <span class="text-xs px-2.5 py-1 bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400 rounded-full font-semibold">
-                    Stajı Onaylananlar
+                    DevExtreme Görünümü
                 </span>
             </div>
         </x-slot>
@@ -178,83 +47,110 @@ $currentMonth = (int) date('n');
                 </p>
             </div>
         @else
-            <div class="overflow-x-auto">
-                <div class="min-w-[850px] gantt">
-                    <!-- Months Header Row -->
-                    <div class="gantt__row gantt__row--months">
-                        <div class="gantt__row-first">Stajyer Bilgisi</div>
-                        @foreach($monthNames as $name)
-                            <span>{{ $name }}</span>
-                        @endforeach
-                    </div>
+            <div 
+                x-data="{
+                    internsData: @js($interns),
+                    loadScript(src) {
+                        return new Promise((resolve, reject) => {
+                            if (window.jQuery && src.includes('jquery')) { resolve(); return; }
+                            if (window.DevExpress && src.includes('dx.all')) { resolve(); return; }
+                            if (window.DevExpress && window.DevExpress.ui && window.DevExpress.ui.dxGantt && src.includes('dx-gantt')) { resolve(); return; }
+                            
+                            const existing = document.querySelector(`script[src='${src}']`);
+                            if (existing) {
+                                if (existing.readyState === 'loaded' || existing.readyState === 'complete') {
+                                    resolve();
+                                } else {
+                                    existing.addEventListener('load', resolve);
+                                    existing.addEventListener('error', reject);
+                                }
+                                return;
+                            }
+                            const script = document.createElement('script');
+                            script.src = src;
+                            script.async = true;
+                            script.onload = resolve;
+                            script.onerror = () => reject(new Error('Failed to load script: ' + src));
+                            document.head.appendChild(script);
+                        });
+                    },
+                    showError(msg) {
+                        const errDiv = document.createElement('div');
+                        errDiv.style.color = '#ef4444';
+                        errDiv.style.padding = '20px';
+                        errDiv.style.fontFamily = 'monospace';
+                        errDiv.style.fontSize = '13px';
+                        errDiv.innerHTML = '<strong>Gantt Load Error:</strong><br>' + msg;
+                        this.$refs.ganttContainer.innerHTML = '';
+                        this.$refs.ganttContainer.appendChild(errDiv);
+                    },
+                    async init() {
+                        try {
+                            await this.loadScript('https://code.jquery.com/jquery-3.7.1.min.js').catch(() => { throw new Error('jQuery failed to load'); });
+                            await this.loadScript('https://cdn3.devexpress.com/jslib/23.2.5/js/dx.all.js').catch(() => { throw new Error('dx.all.js failed to load'); });
+                            await this.loadScript('https://cdn3.devexpress.com/jslib/23.2.5/js/dx-gantt.min.js').catch(() => { throw new Error('dx-gantt.min.js failed to load'); });
 
-                    <!-- Background Grid Lines & Marker Row -->
-                    <div class="gantt__row gantt__row--lines">
-                        <span></span>
-                        @for($i = 1; $i <= 12; $i++)
-                            <span class="{{ $i === $currentMonth ? 'marker' : '' }}"></span>
-                        @endfor
-                    </div>
+                            if (window.jQuery && window.jQuery.fn.dxGantt) {
+                                const formattedData = this.internsData.map(intern => ({
+                                    id: intern.id,
+                                    parentId: 0,
+                                    title: intern.name,
+                                    start: new Date(intern.raw_start),
+                                    end: new Date(intern.raw_end),
+                                    progress: 100
+                                }));
 
-                    <!-- Intern Data Rows -->
-                    @foreach($interns as $intern)
-                        <div class="gantt__row">
-                            <div class="gantt__row-first">
-                                <span class="font-bold text-gray-900 dark:text-white">{{ $intern['name'] }}</span>
-                                <span class="text-[10px] text-gray-400 dark:text-gray-500 font-normal mt-0.5">{{ $intern['total_days'] }} İş Günü</span>
-                            </div>
-                            <ul class="gantt__row-bars">
-                                <li 
-                                    style="grid-column: {{ $intern['grid_start'] }}/{{ $intern['grid_end'] }}; background-color: {{ $intern['hex_color'] }};" 
-                                    class="{{ $intern['is_stripes'] ? 'stripes' : '' }}"
-                                    x-data="{ open: false }"
-                                    @mouseenter="open = true"
-                                    @mouseleave="open = false"
-                                >
-                                    <span class="truncate pr-1">{{ $intern['start_date'] }}</span>
-                                    <span class="text-[10px] opacity-90 shrink-0 bg-white/20 px-1.5 py-0.5 rounded-full font-bold">
-                                        {{ $intern['end_date'] }}
-                                    </span>
-
-                                    <!-- Interactive Glassmorphic Tooltip -->
-                                    <div 
-                                        x-show="open" 
-                                        x-transition:enter="transition ease-out duration-150"
-                                        x-transition:enter-start="opacity-0 translate-y-1"
-                                        x-transition:enter-end="opacity-100 translate-y-0"
-                                        x-transition:leave="transition ease-in duration-100"
-                                        x-transition:leave-start="opacity-100 translate-y-0"
-                                        x-transition:leave-end="opacity-0 translate-y-1"
-                                        class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-60 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
-                                        style="display: none;"
-                                    >
-                                        <div class="font-bold text-xs text-white border-b border-gray-800 pb-1 mb-1.5 flex justify-between items-center">
-                                            <span class="truncate pr-2">{{ $intern['name'] }}</span>
-                                            <span class="text-[9px] px-1.5 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-semibold border border-emerald-500/30 shrink-0">
-                                                {{ $intern['total_days'] }} Gün
-                                            </span>
-                                        </div>
-                                        <div class="space-y-1 text-gray-400">
-                                            <div class="flex justify-between">
-                                                <span>Staj Başlangıç:</span>
-                                                <span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
-                                            </div>
-                                            <div class="flex justify-between">
-                                                <span>Staj Bitiş:</span>
-                                                <span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    @endforeach
-                </div>
-            </div>
-            
-            <div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
-                <span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
-                <span>Kırmızı kesikli dikey sütun günün ayını göstermektedir.</span>
+                                jQuery(this.$refs.ganttContainer).dxGantt({
+                                    tasks: {
+                                        dataSource: formattedData,
+                                    },
+                                    editing: {
+                                        enabled: false,
+                                    },
+                                    validation: {
+                                        autoUpdateParentTasks: true,
+                                    },
+                                    toolbar: {
+                                        items: [
+                                            'collapseAll',
+                                            'expandAll',
+                                            'separator',
+                                            'zoomIn',
+                                            'zoomOut',
+                                        ],
+                                    },
+                                    columns: [{
+                                        dataField: 'title',
+                                        caption: 'Stajyer Adı',
+                                        width: 250,
+                                    }, {
+                                        dataField: 'start',
+                                        caption: 'Başlangıç Tarihi',
+                                        dataType: 'date',
+                                        format: 'dd.MM.yyyy',
+                                        width: 120,
+                                    }, {
+                                        dataField: 'end',
+                                        caption: 'Bitiş Tarihi',
+                                        dataType: 'date',
+                                        format: 'dd.MM.yyyy',
+                                        width: 120,
+                                    }],
+                                    scaleType: 'weeks',
+                                    taskListWidth: 490,
+                                });
+                            } else {
+                                throw new Error('DevExpress Gantt component jQuery plugin is not defined after loading scripts.');
+                            }
+                        } catch (e) {
+                            console.error(e);
+                            this.showError(e.message);
+                        }
+                    }
+                }"
+                class="dx-viewport demo-container"
+            >
+                <div id="gantt" x-ref="ganttContainer" style="height: 100%; width: 100%;"></div>
             </div>
         @endif
     </x-filament::section>