feat: implement custom responsive gantt chart UI for intern applications widget
This commit is contained in:
Ümit Tunç
@@ -132,6 +132,22 @@ class InternGanttChartWidget extends Widget
|
|||||||
$paletteIndex = $intern->id % count($palettes);
|
$paletteIndex = $intern->id % count($palettes);
|
||||||
$color = $palettes[$paletteIndex];
|
$color = $palettes[$paletteIndex];
|
||||||
|
|
||||||
|
$startMonth = (int) $start->format('n');
|
||||||
|
$endMonth = (int) $end->format('n');
|
||||||
|
$gridStart = $startMonth + 1;
|
||||||
|
$gridEnd = min(14, $endMonth + 2);
|
||||||
|
|
||||||
|
// Background color map based on user's examples
|
||||||
|
$hexColors = [
|
||||||
|
'#2ecaac', // Emerald Teal
|
||||||
|
'#54c6f9', // Sky Blue
|
||||||
|
'#ff6252', // Red Coral
|
||||||
|
'#f59e0b', // Amber
|
||||||
|
'#8b5cf6', // Violet
|
||||||
|
];
|
||||||
|
$hexColor = $hexColors[$intern->id % count($hexColors)];
|
||||||
|
$isStripes = ($intern->id % 2 === 0);
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'id' => $intern->id,
|
'id' => $intern->id,
|
||||||
'name' => $intern->name,
|
'name' => $intern->name,
|
||||||
@@ -141,6 +157,10 @@ class InternGanttChartWidget extends Widget
|
|||||||
'left' => $left,
|
'left' => $left,
|
||||||
'width' => $width,
|
'width' => $width,
|
||||||
'color' => $color,
|
'color' => $color,
|
||||||
|
'grid_start' => $gridStart,
|
||||||
|
'grid_end' => $gridEnd,
|
||||||
|
'hex_color' => $hexColor,
|
||||||
|
'is_stripes' => $isStripes,
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
+220
-93
@@ -1,4 +1,159 @@
|
|||||||
|
@php
|
||||||
|
$monthNames = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];
|
||||||
|
$currentMonth = (int) date('n');
|
||||||
|
@endphp
|
||||||
|
|
||||||
<x-filament-widgets::widget>
|
<x-filament-widgets::widget>
|
||||||
|
<style>
|
||||||
|
.fi-wi-intern-gantt-chart .gantt {
|
||||||
|
display: grid;
|
||||||
|
border: 0;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
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;
|
||||||
|
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">
|
<x-filament::section class="fi-wi-intern-gantt-chart">
|
||||||
<x-slot name="heading">
|
<x-slot name="heading">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
@@ -23,112 +178,84 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm bg-white dark:bg-gray-900">
|
<div class="overflow-x-auto">
|
||||||
<div class="min-w-[900px] flex flex-col">
|
<div class="min-w-[850px] gantt">
|
||||||
<!-- Header Row -->
|
<!-- Months Header Row -->
|
||||||
<div class="flex bg-gray-50 dark:bg-gray-800/40 border-b border-gray-200 dark:border-gray-800 text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">
|
<div class="gantt__row gantt__row--months">
|
||||||
<!-- Left Panel: Intern Info Title -->
|
<div class="gantt__row-first">Stajyer Bilgisi</div>
|
||||||
<div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex items-center bg-gray-50 dark:bg-gray-800/50">
|
@foreach($monthNames as $name)
|
||||||
Stajyer Bilgisi
|
<span>{{ $name }}</span>
|
||||||
</div>
|
@endforeach
|
||||||
<!-- Right Panel: Months Timeline (Absolute layout to prevent flexbox squishing) -->
|
|
||||||
<div class="flex-1 relative h-12">
|
|
||||||
@foreach($months as $month)
|
|
||||||
<div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-200 dark:border-gray-800 last:border-r-0 flex items-center justify-center text-xs font-semibold text-gray-600 dark:text-gray-400 px-1 truncate">
|
|
||||||
{{ $month['name'] }}
|
|
||||||
</div>
|
|
||||||
@endforeach
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Body Rows -->
|
<!-- Background Grid Lines & Marker Row -->
|
||||||
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
<div class="gantt__row gantt__row--lines">
|
||||||
@foreach($interns as $intern)
|
<span></span>
|
||||||
<div class="flex hover:bg-gray-50/30 dark:hover:bg-gray-800/10 transition-colors">
|
@for($i = 1; $i <= 12; $i++)
|
||||||
<!-- Left Panel: Intern Info -->
|
<span class="{{ $i === $currentMonth ? 'marker' : '' }}"></span>
|
||||||
<div class="w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-800 flex flex-col justify-center bg-gray-50/10 dark:bg-gray-800/5">
|
@endfor
|
||||||
<span class="font-bold text-sm text-gray-900 dark:text-white truncate">
|
</div>
|
||||||
{{ $intern['name'] }}
|
|
||||||
|
<!-- 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>
|
</span>
|
||||||
<span class="text-[10px] text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-1">
|
|
||||||
<svg class="w-3.5 h-3.5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
|
|
||||||
</svg>
|
|
||||||
{{ $intern['total_days'] }} Gün Staj
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Panel: Timeline Gantt Bar Area -->
|
<!-- Interactive Glassmorphic Tooltip -->
|
||||||
<div class="flex-1 relative min-h-[72px] overflow-hidden">
|
|
||||||
<!-- Background Grid Lines -->
|
|
||||||
@foreach($months as $month)
|
|
||||||
<div style="left: {{ $month['left'] }}%; width: {{ $month['width'] }}%;" class="absolute inset-y-0 border-r border-gray-100 dark:border-gray-800/40 last:border-r-0 pointer-events-none"></div>
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
<!-- Today Line -->
|
|
||||||
@if($todayPercent !== null)
|
|
||||||
<div style="left: {{ $todayPercent }}%" class="absolute inset-y-0 w-px border-l border-dashed border-rose-500 z-10 pointer-events-none"></div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<!-- Gantt Bar Pill -->
|
|
||||||
<div
|
<div
|
||||||
style="left: {{ $intern['left'] }}%; width: {{ $intern['width'] }}%;"
|
x-show="open"
|
||||||
class="absolute top-1/2 -translate-y-1/2 h-9 rounded-full shadow-sm border {{ $intern['color']['bg'] }} {{ $intern['color']['gradient'] }} bg-gradient-to-r {{ $intern['color']['text'] }} {{ $intern['color']['border'] }} flex items-center justify-between px-4 text-xs font-bold transition-all duration-200 hover:scale-[1.01] hover:shadow-md cursor-pointer z-20 group/bar"
|
x-transition:enter="transition ease-out duration-150"
|
||||||
x-data="{ open: false }"
|
x-transition:enter-start="opacity-0 translate-y-1"
|
||||||
@mouseenter="open = true"
|
x-transition:enter-end="opacity-100 translate-y-0"
|
||||||
@mouseleave="open = false"
|
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;"
|
||||||
>
|
>
|
||||||
<!-- Intern Name / Start Date inside the bar -->
|
<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-1">
|
<span class="truncate pr-2">{{ $intern['name'] }}</span>
|
||||||
{{ $intern['start_date'] }}
|
<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">
|
||||||
</span>
|
{{ $intern['total_days'] }} Gün
|
||||||
<span class="text-[10px] opacity-95 shrink-0 bg-white/25 dark:bg-black/25 px-1.5 py-0.5 rounded-full font-semibold">
|
</span>
|
||||||
{{ $intern['end_date'] }}
|
</div>
|
||||||
</span>
|
<div class="space-y-1 text-gray-400">
|
||||||
|
<div class="flex justify-between">
|
||||||
<!-- Interactive Glassmorphic Tooltip -->
|
<span>Staj Başlangıç:</span>
|
||||||
<div
|
<span class="text-gray-200 font-semibold">{{ $intern['start_date'] }}</span>
|
||||||
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.5 w-64 bg-gray-900/95 dark:bg-gray-950/95 backdrop-blur-md text-white rounded-xl p-3.5 shadow-xl border border-gray-800 pointer-events-none z-50 text-xs font-normal"
|
|
||||||
style="display: none;"
|
|
||||||
>
|
|
||||||
<div class="font-bold text-sm text-white border-b border-gray-800 pb-1.5 mb-2 flex justify-between items-center">
|
|
||||||
<span class="truncate pr-2">{{ $intern['name'] }}</span>
|
|
||||||
<span class="text-[10px] px-2 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>
|
||||||
<div class="space-y-1.5 text-gray-400">
|
<div class="flex justify-between">
|
||||||
<div class="flex justify-between">
|
<span>Staj Bitiş:</span>
|
||||||
<span>Staj Başlangıç:</span>
|
<span class="text-gray-200 font-semibold">{{ $intern['end_date'] }}</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
@endforeach
|
</div>
|
||||||
</div>
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if($todayPercent !== null)
|
<div class="flex items-center gap-2 mt-3 text-xs text-rose-600 dark:text-rose-400 font-medium px-1">
|
||||||
<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 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>
|
||||||
<span>Kesikli kırmızı çizgi bugünün tarihini göstermektedir.</span>
|
</div>
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@endif
|
@endif
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-widgets::widget>
|
</x-filament-widgets::widget>
|
||||||
|
|||||||
Reference in New Issue
Block a user