feat: add Gantt chart widget to visualize accepted intern schedules in the admin panel
This commit is contained in:
Ümit Tunç
@@ -362,4 +362,11 @@ class InternApplicationResource extends Resource
|
|||||||
'edit' => Pages\EditInternApplication::route('/{record}/edit'),
|
'edit' => Pages\EditInternApplication::route('/{record}/edit'),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public static function getWidgets(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
Widgets\InternGanttChartWidget::class,
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,4 +8,11 @@ use Filament\Resources\Pages\ListRecords;
|
|||||||
class ListInternApplications extends ListRecords
|
class ListInternApplications extends ListRecords
|
||||||
{
|
{
|
||||||
protected static string $resource = InternApplicationResource::class;
|
protected static string $resource = InternApplicationResource::class;
|
||||||
|
|
||||||
|
protected function getHeaderWidgets(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
\App\Filament\Admin\Resources\InternApplications\Widgets\InternGanttChartWidget::class,
|
||||||
|
];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,153 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Filament\Admin\Resources\InternApplications\Widgets;
|
||||||
|
|
||||||
|
use App\Models\CareerApplication;
|
||||||
|
use Filament\Widgets\Widget;
|
||||||
|
use Carbon\Carbon;
|
||||||
|
|
||||||
|
class InternGanttChartWidget extends Widget
|
||||||
|
{
|
||||||
|
protected string $view = 'filament.admin.resources.intern-applications.widgets.intern-gantt-chart-widget';
|
||||||
|
|
||||||
|
protected int | string | array $columnSpan = 'full';
|
||||||
|
|
||||||
|
public function getViewData(): array
|
||||||
|
{
|
||||||
|
$interns = CareerApplication::query()
|
||||||
|
->where('type', 'internship')
|
||||||
|
->where('status', 'accepted')
|
||||||
|
->whereNotNull('internship_start_date')
|
||||||
|
->whereNotNull('internship_end_date')
|
||||||
|
->orderBy('internship_start_date', 'asc')
|
||||||
|
->get();
|
||||||
|
|
||||||
|
if ($interns->isEmpty()) {
|
||||||
|
return [
|
||||||
|
'interns' => [],
|
||||||
|
'months' => [],
|
||||||
|
'totalDays' => 0,
|
||||||
|
'minDate' => null,
|
||||||
|
'todayPercent' => null,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
$minDate = Carbon::parse($interns->min('internship_start_date'))->startOfDay();
|
||||||
|
$maxDate = Carbon::parse($interns->max('internship_end_date'))->endOfDay();
|
||||||
|
|
||||||
|
// Pad the range slightly for better visual presentation
|
||||||
|
$minDate = $minDate->copy()->subDays(5);
|
||||||
|
$maxDate = $maxDate->copy()->addDays(5);
|
||||||
|
|
||||||
|
$totalDays = $minDate->diffInDays($maxDate);
|
||||||
|
if ($totalDays <= 0) {
|
||||||
|
$totalDays = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate months in range
|
||||||
|
$months = [];
|
||||||
|
$tempDate = $minDate->copy()->startOfMonth();
|
||||||
|
$endLimit = $maxDate->copy()->endOfMonth();
|
||||||
|
|
||||||
|
while ($tempDate->lte($endLimit)) {
|
||||||
|
$monthStart = $tempDate->copy()->startOfMonth();
|
||||||
|
$monthEnd = $tempDate->copy()->endOfMonth();
|
||||||
|
|
||||||
|
$overlapStart = $monthStart->gt($minDate) ? $monthStart : $minDate;
|
||||||
|
$overlapEnd = $monthEnd->lt($maxDate) ? $monthEnd : $maxDate;
|
||||||
|
|
||||||
|
if ($overlapStart->lte($overlapEnd)) {
|
||||||
|
$daysInOverlap = $overlapStart->diffInDays($overlapEnd) + 1;
|
||||||
|
$startOffset = $minDate->diffInDays($overlapStart);
|
||||||
|
$months[] = [
|
||||||
|
'name' => $tempDate->translatedFormat('F Y'),
|
||||||
|
'left' => ($startOffset / $totalDays) * 100,
|
||||||
|
'width' => ($daysInOverlap / $totalDays) * 100,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
$tempDate->addMonth();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate today's line position if it falls within the range
|
||||||
|
$today = Carbon::today();
|
||||||
|
$todayPercent = null;
|
||||||
|
if ($today->between($minDate, $maxDate)) {
|
||||||
|
$todayPercent = ($minDate->diffInDays($today) / $totalDays) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
$formattedInterns = $interns->map(function ($intern) use ($minDate, $totalDays) {
|
||||||
|
$start = Carbon::parse($intern->internship_start_date)->startOfDay();
|
||||||
|
$end = Carbon::parse($intern->internship_end_date)->endOfDay();
|
||||||
|
|
||||||
|
$startOffset = $minDate->diffInDays($start);
|
||||||
|
$duration = $start->diffInDays($end) + 1;
|
||||||
|
|
||||||
|
$left = ($startOffset / $totalDays) * 100;
|
||||||
|
$width = ($duration / $totalDays) * 100;
|
||||||
|
|
||||||
|
// Ensure width is at least a visible sliver
|
||||||
|
if ($width < 1.5) {
|
||||||
|
$width = 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Assign a stable color palette based on the intern ID
|
||||||
|
$palettes = [
|
||||||
|
[
|
||||||
|
'bg' => 'bg-emerald-500 dark:bg-emerald-600',
|
||||||
|
'gradient' => 'from-emerald-400 to-teal-500 dark:from-emerald-500 dark:to-teal-600',
|
||||||
|
'text' => 'text-emerald-950 dark:text-emerald-50',
|
||||||
|
'border' => 'border-emerald-500/20',
|
||||||
|
'shadow' => 'shadow-emerald-500/20'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'bg' => 'bg-blue-500 dark:bg-blue-600',
|
||||||
|
'gradient' => 'from-blue-400 to-indigo-500 dark:from-blue-500 dark:to-indigo-600',
|
||||||
|
'text' => 'text-blue-950 dark:text-blue-50',
|
||||||
|
'border' => 'border-blue-500/20',
|
||||||
|
'shadow' => 'shadow-blue-500/20'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'bg' => 'bg-rose-500 dark:bg-rose-600',
|
||||||
|
'gradient' => 'from-rose-400 to-pink-500 dark:from-rose-500 dark:to-pink-600',
|
||||||
|
'text' => 'text-rose-950 dark:text-rose-50',
|
||||||
|
'border' => 'border-rose-500/20',
|
||||||
|
'shadow' => 'shadow-rose-500/20'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'bg' => 'bg-amber-500 dark:bg-amber-600',
|
||||||
|
'gradient' => 'from-amber-400 to-orange-500 dark:from-amber-500 dark:to-orange-600',
|
||||||
|
'text' => 'text-amber-950 dark:text-amber-50',
|
||||||
|
'border' => 'border-amber-500/20',
|
||||||
|
'shadow' => 'shadow-amber-500/20'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'bg' => 'bg-violet-500 dark:bg-violet-600',
|
||||||
|
'gradient' => 'from-violet-400 to-purple-500 dark:from-violet-500 dark:to-purple-600',
|
||||||
|
'text' => 'text-violet-950 dark:text-violet-50',
|
||||||
|
'border' => 'border-violet-500/20',
|
||||||
|
'shadow' => 'shadow-violet-500/20'
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
$paletteIndex = $intern->id % count($palettes);
|
||||||
|
$color = $palettes[$paletteIndex];
|
||||||
|
|
||||||
|
return [
|
||||||
|
'id' => $intern->id,
|
||||||
|
'name' => $intern->name,
|
||||||
|
'start_date' => $start->translatedFormat('d M Y'),
|
||||||
|
'end_date' => $end->translatedFormat('d M Y'),
|
||||||
|
'total_days' => $intern->internship_total_days,
|
||||||
|
'left' => $left,
|
||||||
|
'width' => $width,
|
||||||
|
'color' => $color,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
return [
|
||||||
|
'interns' => $formattedInterns,
|
||||||
|
'months' => $months,
|
||||||
|
'todayPercent' => $todayPercent,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
+134
@@ -0,0 +1,134 @@
|
|||||||
|
<x-filament-widgets::widget>
|
||||||
|
<x-filament::section class="fi-wi-intern-gantt-chart">
|
||||||
|
<x-slot name="heading">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-lg font-bold tracking-tight text-gray-950 dark:text-white">
|
||||||
|
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
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</x-slot>
|
||||||
|
|
||||||
|
@if(count($interns) === 0)
|
||||||
|
<div class="flex flex-col items-center justify-center p-8 text-center bg-gray-50 dark:bg-gray-900/40 rounded-xl border border-dashed border-gray-200 dark:border-gray-800">
|
||||||
|
<div class="p-3 bg-gray-100 dark:bg-gray-800 rounded-full mb-3 text-gray-400">
|
||||||
|
<svg class="w-6 h-6" 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>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
Tarihleri belirlenmiş onaylı stajyer bulunamadı.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
@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="min-w-[900px] flex flex-col">
|
||||||
|
<!-- 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">
|
||||||
|
<!-- Left Panel: Intern Info Title -->
|
||||||
|
<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">
|
||||||
|
Stajyer Bilgisi
|
||||||
|
</div>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- Body Rows -->
|
||||||
|
<div class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||||
|
@foreach($interns as $intern)
|
||||||
|
<div class="flex hover:bg-gray-50/30 dark:hover:bg-gray-800/10 transition-colors">
|
||||||
|
<!-- Left Panel: Intern Info -->
|
||||||
|
<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">
|
||||||
|
<span class="font-bold text-sm text-gray-900 dark:text-white truncate">
|
||||||
|
{{ $intern['name'] }}
|
||||||
|
</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 -->
|
||||||
|
<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
|
||||||
|
style="left: {{ $intern['left'] }}%; width: {{ $intern['width'] }}%;"
|
||||||
|
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-data="{ open: false }"
|
||||||
|
@mouseenter="open = true"
|
||||||
|
@mouseleave="open = false"
|
||||||
|
>
|
||||||
|
<!-- Intern Name / Start Date inside the bar -->
|
||||||
|
<span class="truncate pr-1">
|
||||||
|
{{ $intern['start_date'] }}
|
||||||
|
</span>
|
||||||
|
<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">
|
||||||
|
{{ $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.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 class="space-y-1.5 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</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">
|
||||||
|
<span class="w-2.5 h-0.5 bg-rose-500 inline-block border-t border-dashed"></span>
|
||||||
|
<span>Kesikli kırmızı çizgi bugünün tarihini göstermektedir.</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
</x-filament::section>
|
||||||
|
</x-filament-widgets::widget>
|
||||||
Reference in New Issue
Block a user