feat: add internship workflow guide modal to dashboards and visualize current date in Gantt chart

This commit is contained in:
Ümit Tunç
2026-06-26 16:42:24 +03:00
parent aa6858bc0f
commit 32c556a87b
5 changed files with 170 additions and 1 deletions
@@ -20,4 +20,6 @@
</div> </div>
</div> </div>
</section> </section>
@include('front.career.partials.guide_modal')
@endsection @endsection
@@ -21,6 +21,23 @@
</form> </form>
</div> </div>
<!-- Stajyer Çalışma Rehberi Callout -->
<div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-3xl p-6 shadow-xl text-white mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-2xl text-white flex-shrink-0">
<i class="uil uil-info-circle"></i>
</div>
<div>
<h4 class="font-extrabold text-base tracking-tight">Stajyer Çalışma & Git Workflow Rehberi</h4>
<p class="text-xs text-blue-100 font-medium mt-1">GitHub reposu oluşturma, günlük commitler ve toplantı kuralları hakkında bilgi edinin.</p>
</div>
</div>
<button onclick="toggleGuideModal(true)" class="px-5 py-3 bg-white text-blue-600 hover:bg-blue-50 font-extrabold text-sm rounded-xl transition-all shadow-md flex items-center gap-2 self-stretch sm:self-auto justify-center">
<i class="uil uil-book-open"></i>
<span>Rehberi İncele</span>
</button>
</div>
<!-- Session & Validation Alerts --> <!-- Session & Validation Alerts -->
@if(session('success')) @if(session('success'))
<div class="bg-green-50 border border-green-200 text-green-700 px-6 py-4 rounded-3xl mb-8 flex items-center gap-3 shadow-sm"> <div class="bg-green-50 border border-green-200 text-green-700 px-6 py-4 rounded-3xl mb-8 flex items-center gap-3 shadow-sm">
@@ -1079,4 +1096,6 @@
} }
</style> </style>
@endpush @endpush
@include('front.career.partials.guide_modal')
@endsection @endsection
@@ -25,6 +25,13 @@
<!-- DevExtreme Gantt CSS Dependencies --> <!-- DevExtreme Gantt CSS Dependencies -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.fluent.blue.light.css"> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.fluent.blue.light.css">
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.min.css"> <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx-gantt.min.css">
<style>
.current-time-line {
background-color: rgba(239, 68, 68, 0.4) !important;
border-left: 2px dashed #ef4444 !important;
width: 2px !important;
}
</style>
<script> <script>
tailwind = { tailwind = {
config: { config: {
@@ -93,6 +100,11 @@
}], }],
scaleType: 'days', scaleType: 'days',
taskListWidth: 420, taskListWidth: 420,
stripLines: [{
title: 'Bugün',
start: new Date(),
cssClass: 'current-time-line'
}],
}); });
}); });
</script> </script>
@@ -0,0 +1,132 @@
<!-- Stajyer Rehberi Modal -->
<div id="guideModal" class="fixed inset-0 z-[9999] hidden flex items-center justify-center p-4">
<!-- Backdrop -->
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-md transition-opacity duration-300" onclick="toggleGuideModal(false)"></div>
<!-- Modal Content Card -->
<div class="relative bg-white rounded-3xl w-full max-w-2xl max-h-[85vh] overflow-y-auto shadow-2xl border border-slate-100/50 transform scale-95 opacity-0 transition-all duration-300 flex flex-col" id="guideModalCard">
<!-- Modal Header -->
<div class="sticky top-0 bg-white z-10 px-6 py-5 border-b border-slate-100 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-red-50 text-[#e31e24] flex items-center justify-center text-xl">
<i class="uil uil-book-open"></i>
</div>
<div>
<h3 class="font-bold text-slate-800 text-lg">Stajyer Çalışma & Git Workflow Rehberi</h3>
<p class="text-xs text-slate-400 font-semibold mt-0.5">Başarılı bir staj süreci için uymanız gereken kurallar</p>
</div>
</div>
<button onclick="toggleGuideModal(false)" class="w-8 h-8 rounded-lg bg-slate-50 hover:bg-slate-100 text-slate-400 hover:text-slate-600 flex items-center justify-center transition-colors">
<i class="uil uil-times text-xl"></i>
</button>
</div>
<!-- Modal Body -->
<div class="p-6 md:p-8 space-y-6">
<!-- Bullet 1: GitHub Public Repo -->
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
1
</div>
<div>
<h4 class="font-extrabold text-slate-800 text-sm">GitHub Public Repo Oluşturma</h4>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
Staj süresince geliştireceğiniz projeler için GitHub üzerinde <strong>public (herkese açık)</strong> bir repository oluşturmanız ve bu repo bağlantısını stajyer panelinize kaydetmeniz gerekmektedir.
</p>
</div>
</div>
<!-- Bullet 2: Implementation Plan -->
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
2
</div>
<div>
<h4 class="font-extrabold text-slate-800 text-sm">İlk Adım: Implementation Plan</h4>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
Deponuzu oluşturduktan sonra ilk commit olarak ana dizinde <code>implementation_plan.md</code> adında bir dosya hazırlamalısınız. Bu plan, projenizin mimarisini, hedeflerinizi ve yapacağınız işlerin genel haritasını içermelidir.
</p>
</div>
</div>
<!-- Bullet 3: Daily Commits & Intern Journal -->
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
3
</div>
<div>
<h4 class="font-extrabold text-slate-800 text-sm">Günlük Commit Zorunluluğu (Staj Defteri)</h4>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
Projeyi geliştirirken yaptığınız günlük commitler otomatik olarak staj günlüğünüze işlenir ve staj defterinizin içeriğini oluşturur. <strong>Eğer o gün commit gönderilmemişse, o gün çalışılmamış sayılacaktır.</strong>
</p>
</div>
</div>
<!-- Bullet 4: Daily Standup Meetings -->
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
4
</div>
<div>
<h4 class="font-extrabold text-slate-800 text-sm">Daily Standup Toplantıları</h4>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
Her günü düzenli olarak daily standup (günlük durum değerlendirme) toplantısı yapılacaktır. Toplantılarda dünün özeti, bugünün planları ve karşılaşılan engeller paylaşılır. <strong>Tüm stajyerlerin katılımı zorunludur.</strong>
</p>
</div>
</div>
<!-- Bullet 5: Git Workflow & Commit Culture -->
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0 mt-1 font-bold text-xs">
5
</div>
<div>
<h4 class="font-extrabold text-slate-800 text-sm">Git Workflow & Temiz Kod Kültürü</h4>
<p class="text-xs text-slate-500 mt-1 leading-relaxed">
Anlamlı commit mesajları yazmaya özen gösterin (örn. <code>feat: add login validation</code>). Kodlarınızı mantıksal parçalara ayırarak commit atın ve Git versiyon kontrol standartlarına uyun.
</p>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="sticky bottom-0 bg-slate-50 z-10 px-6 py-4 border-t border-slate-100/50 flex items-center justify-end gap-3 rounded-b-3xl">
<button onclick="toggleGuideModal(false)" class="px-5 py-2.5 bg-slate-850 hover:bg-slate-900 text-white font-extrabold rounded-xl text-xs transition-colors shadow-md shadow-slate-800/10">
Anladım, Kapat
</button>
</div>
</div>
</div>
<script>
function toggleGuideModal(show) {
const modal = document.getElementById('guideModal');
const card = document.getElementById('guideModalCard');
if (!modal || !card) return;
if (show) {
modal.classList.remove('hidden');
setTimeout(() => {
card.classList.remove('scale-95', 'opacity-0');
card.classList.add('scale-100', 'opacity-100');
}, 10);
} else {
card.classList.remove('scale-100', 'opacity-100');
card.classList.add('scale-95', 'opacity-0');
setTimeout(() => {
modal.classList.add('hidden');
}, 300);
}
}
// Handle ESC key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
toggleGuideModal(false);
}
});
</script>
@@ -5,7 +5,11 @@
<h1 class="text-3xl font-extrabold text-slate-900 tracking-tight mt-3">Hoş Geldiniz, Yöneticimiz</h1> <h1 class="text-3xl font-extrabold text-slate-900 tracking-tight mt-3">Hoş Geldiniz, Yöneticimiz</h1>
<p class="text-sm text-slate-500 mt-1">Stajyer başvurularını, takvimlerini ve proje depolarını buradan takip edebilirsiniz.</p> <p class="text-sm text-slate-500 mt-1">Stajyer başvurularını, takvimlerini ve proje depolarını buradan takip edebilirsiniz.</p>
</div> </div>
<div class="flex gap-3"> <div class="flex gap-3 flex-wrap">
<button onclick="toggleGuideModal(true)" class="px-5 py-3 rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-600 font-extrabold text-sm transition-all flex items-center gap-2 border border-blue-100">
<i class="uil uil-book-open text-lg"></i>
<span>Stajyer Rehberi</span>
</button>
<a href="{{ route('homepage') }}" class="px-5 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-sm transition-all flex items-center gap-2 border border-slate-200/50"> <a href="{{ route('homepage') }}" class="px-5 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold text-sm transition-all flex items-center gap-2 border border-slate-200/50">
<i class="uil uil-home text-lg"></i> <i class="uil uil-home text-lg"></i>
<span>Ana Sayfa</span> <span>Ana Sayfa</span>