🤩 File Manager - Mr.X
PHP:
8.3.33
Server:
Apache
OS:
Linux 5.14.0-611.49.1.el9_7.x86_64
User:
websparkit
Navigate
Upload:
Upload
New File
New Folder
Editing:dashboard.blade.php
<x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-navy leading-tight"> {{ __('Developer Dashboard') }} </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-8"> {{-- Flash Messages --}} @if(session('success')) <div class="bg-green-50 border-l-4 border-green-400 text-green-800 px-5 py-4 rounded-lg shadow-sm flex items-center gap-3 animate-fade-in"> <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg> <span class="text-sm font-medium">{{ session('success') }}</span> </div> @endif @if(session('error')) <div class="bg-red-50 border-l-4 border-red-400 text-red-800 px-5 py-4 rounded-lg shadow-sm flex items-center gap-3 animate-fade-in"> <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v4a1 1 0 002 0V5zm-1 8a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" clip-rule="evenodd"/></svg> <span class="text-sm font-medium">{{ session('error') }}</span> </div> @endif {{-- ===================== ATTENDANCE CARD ===================== --}} <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 transition-shadow duration-300 hover:shadow-md"> {{-- Gradient Header --}} <div class="bg-gradient-to-r from-navy to-navy-dark px-6 py-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="bg-white/10 rounded-lg p-2"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"/></svg> </div> <h3 class="text-lg font-bold text-white tracking-tight">Today's Attendance</h3> </div> <span class="text-xs text-white/70 font-medium">{{ now()->format('l, F j, Y') }}</span> </div> <div class="p-6"> {{-- Status + Actions Row --}} <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"> {{-- Status Indicator --}} <div class="flex items-center gap-3"> @if(!$todayAttendance) <span class="relative flex h-3 w-3"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-gray-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-gray-500"></span> </span> <span class="text-sm font-medium text-gray-600">You have not clocked in today.</span> @elseif(!$todayAttendance->clock_out) <span class="relative flex h-3 w-3"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span> </span> <span class="text-sm font-medium text-green-700"> Clocked in at <span class="font-bold">{{ \Carbon\Carbon::parse($todayAttendance->clock_in)->format('h:i A') }}</span> </span> @else <span class="relative flex h-3 w-3"> <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span> </span> <span class="text-sm font-medium text-blue-700"> Clocked out at <span class="font-bold">{{ \Carbon\Carbon::parse($todayAttendance->clock_out)->format('h:i A') }}</span> </span> @endif </div> {{-- Action Buttons --}} <div class="flex gap-3"> @if(!$todayAttendance) <form method="POST" action="{{ route('developer.clock-in') }}"> @csrf <button type="submit" class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 rounded-lg font-semibold text-sm shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"> <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg> Clock In </button> </form> @elseif(!$todayAttendance->clock_out) <form method="POST" action="{{ route('developer.clock-out') }}"> @csrf <button type="submit" class="inline-flex items-center gap-2 bg-orange hover:bg-orange-dark text-white px-5 py-2.5 rounded-lg font-semibold text-sm shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 active:translate-y-0"> <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg> Clock Out </button> </form> @endif </div> </div> {{-- Recent Attendance Mini-Table --}} @if($recentAttendance && $recentAttendance->count()) <div class="border-t border-gray-100 pt-5"> <h4 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Recent Attendance (Last 7 Days)</h4> <div class="overflow-x-auto rounded-lg border border-gray-100"> <table class="min-w-full divide-y divide-gray-100 text-sm"> <thead class="bg-gray-50/80"> <tr> <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Date</th> <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Clock In</th> <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Clock Out</th> <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Hours</th> </tr> </thead> <tbody class="divide-y divide-gray-50 bg-white"> @foreach($recentAttendance as $record) <tr class="hover:bg-gray-50/60 transition-colors duration-150"> <td class="px-4 py-2.5 font-medium text-gray-700">{{ \Carbon\Carbon::parse($record->clock_in)->format('M d, Y') }}</td> <td class="px-4 py-2.5 text-gray-600">{{ \Carbon\Carbon::parse($record->clock_in)->format('h:i A') }}</td> <td class="px-4 py-2.5 text-gray-600"> @if($record->clock_out) {{ \Carbon\Carbon::parse($record->clock_out)->format('h:i A') }} @else <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span> @endif </td> <td class="px-4 py-2.5"> @if($record->total_hours) <span class="font-semibold text-navy">{{ number_format($record->total_hours, 1) }}h</span> @else <span class="text-gray-400">—</span> @endif </td> </tr> @endforeach </tbody> </table> </div> </div> @else <div class="border-t border-gray-100 pt-5"> <p class="text-xs text-gray-400 text-center py-3">No recent attendance records.</p> </div> @endif </div> </div> {{-- ===================== MY TASKS SECTION ===================== --}} <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 transition-shadow duration-300 hover:shadow-md"> {{-- Gradient Header --}} <div class="bg-gradient-to-r from-navy to-navy-dark px-6 py-4 flex items-center justify-between"> <div class="flex items-center gap-3"> <div class="bg-white/10 rounded-lg p-2"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> </div> <h3 class="text-lg font-bold text-white tracking-tight">My Tasks</h3> </div> @if($tasks->count()) <span class="bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full">{{ $tasks->count() }} {{ Str::plural('task', $tasks->count()) }}</span> @endif </div> <div class="p-6"> @if($tasks->isEmpty()) {{-- Empty State --}} <div class="text-center py-12"> <div class="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4"> <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg> </div> <h4 class="text-sm font-semibold text-gray-500 mb-1">No Tasks Assigned</h4> <p class="text-xs text-gray-400">Tasks assigned to you will appear here.</p> </div> @else <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5"> @foreach($tasks as $task) <div class="group relative border rounded-xl p-5 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 @if($task->status === 'done') bg-green-50/40 border-green-200 @elseif($task->status === 'in_progress') bg-blue-50/40 border-blue-200 @else bg-amber-50/40 border-amber-200 @endif"> {{-- Status Badge --}} <div class="flex items-start justify-between mb-3"> <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider @if($task->status === 'done') bg-green-100 text-green-800 @elseif($task->status === 'in_progress') bg-blue-100 text-blue-800 @else bg-yellow-100 text-yellow-800 @endif"> @if($task->status === 'done') <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg> @elseif($task->status === 'in_progress') <svg class="w-3 h-3 mr-1 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> @else <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg> @endif {{ str_replace('_', ' ', $task->status) }} </span> </div> {{-- Task Title --}} <h4 class="font-bold text-navy text-base mb-2 line-clamp-2 group-hover:text-navy-dark transition-colors duration-200">{{ $task->title }}</h4> {{-- Project & Requirement --}} <div class="space-y-1.5 mb-4"> <div class="flex items-center gap-2 text-xs text-gray-500"> <svg class="w-3.5 h-3.5 flex-shrink-0 text-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg> <span class="truncate">{{ $task->project->name ?? 'N/A' }}</span> </div> @if($task->requirement) <div class="flex items-center gap-2 text-xs text-gray-500"> <svg class="w-3.5 h-3.5 flex-shrink-0 text-orange" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> <span class="truncate">{{ $task->requirement->title }}</span> </div> @endif </div> {{-- Status-Specific Details & Actions --}} @if($task->status === 'assigned') <form method="POST" action="{{ route('developer.task.accept', $task) }}"> @csrf <button type="submit" class="w-full inline-flex items-center justify-center gap-2 bg-navy hover:bg-navy-dark text-white px-4 py-2.5 rounded-lg font-semibold text-sm shadow-sm transition-all duration-200 hover:shadow-md active:translate-y-0"> <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Accept Task </button> </form> @elseif($task->status === 'in_progress') <div class="space-y-3"> @if($task->start_time) <div class="flex items-center gap-2 text-xs text-blue-600 bg-blue-50 rounded-lg px-3 py-2"> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Started: <span class="font-semibold">{{ \Carbon\Carbon::parse($task->start_time)->format('M d, h:i A') }}</span> </div> @endif <form method="POST" action="{{ route('developer.task.complete', $task) }}"> @csrf <button type="submit" class="w-full inline-flex items-center justify-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2.5 rounded-lg font-semibold text-sm shadow-sm transition-all duration-200 hover:shadow-md active:translate-y-0"> <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Mark as Complete </button> </form> </div> @elseif($task->status === 'done') <div class="space-y-2 bg-green-50 rounded-lg px-3 py-2.5 text-xs text-green-700"> @if($task->duration_minutes) <div class="flex items-center gap-2"> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Duration: <span class="font-bold"> @if($task->duration_minutes >= 60) {{ floor($task->duration_minutes / 60) }}h {{ $task->duration_minutes % 60 }}m @else {{ $task->duration_minutes }}m @endif </span> </div> @endif @if($task->end_time) <div class="flex items-center gap-2"> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg> Completed: <span class="font-semibold">{{ \Carbon\Carbon::parse($task->end_time)->format('M d, h:i A') }}</span> </div> @endif </div> @endif </div> @endforeach </div> @endif </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> {{-- ===================== EDUCATION SECTION ===================== --}} <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 transition-shadow duration-300 hover:shadow-md"> <div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 flex items-center"> <div class="bg-white/10 rounded-lg p-2 mr-3"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/></svg> </div> <h3 class="text-lg font-bold text-white tracking-tight">Education Materials</h3> </div> <div class="p-6"> @if($educationMaterials->isEmpty()) <p class="text-gray-500 text-sm text-center py-4">No materials uploaded yet.</p> @else <div class="space-y-4"> @foreach($educationMaterials as $material) <div class="border border-gray-100 rounded-xl p-4 hover:bg-gray-50 transition-colors"> <h4 class="font-bold text-gray-900">{{ $material->title }}</h4> <p class="text-xs text-gray-500 mb-2">By {{ $material->techLead->name ?? 'Tech Lead' }}</p> @if($material->type == 'youtube') <a href="{{ $material->url_or_path }}" target="_blank" class="inline-flex items-center text-red-600 hover:text-red-800 text-sm font-medium mt-1"> <svg class="h-4 w-4 mr-1.5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg> Watch on YouTube </a> @elseif($material->type == 'mp4') <a href="{{ Storage::url($material->url_or_path) }}" target="_blank" class="inline-flex items-center text-blue-600 hover:text-blue-800 text-sm font-medium mt-1"> <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Watch Video </a> @endif @if($material->description) <p class="text-sm text-gray-600 mt-2 bg-white border border-gray-100 p-2 rounded">{{ $material->description }}</p> @endif </div> @endforeach </div> @endif </div> </div> {{-- ===================== CREDENTIALS SECTION ===================== --}} <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-100 transition-shadow duration-300 hover:shadow-md"> <div class="bg-gradient-to-r from-green-600 to-green-800 px-6 py-4 flex items-center"> <div class="bg-white/10 rounded-lg p-2 mr-3"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg> </div> <h3 class="text-lg font-bold text-white tracking-tight">Project Credentials</h3> </div> <div class="p-6"> @if($credentials->isEmpty()) <p class="text-gray-500 text-sm text-center py-4">No credentials assigned to you.</p> @else <div class="space-y-4"> @foreach($credentials as $cred) <div class="border border-gray-100 rounded-xl p-4 bg-gray-50/50"> <div class="flex justify-between items-start mb-2"> <h4 class="font-bold text-navy text-sm">{{ $cred->title }}</h4> <span class="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded">{{ $cred->project->name ?? 'N/A' }}</span> </div> <div class="space-y-1.5 text-sm"> @if($cred->url) <p class="text-gray-600 flex items-center"><span class="font-semibold w-16">URL:</span> <a href="{{ $cred->url }}" target="_blank" class="text-blue-600 hover:underline truncate">{{ $cred->url }}</a></p> @endif @if($cred->username) <p class="text-gray-600 flex items-center"><span class="font-semibold w-16">User:</span> {{ $cred->username }}</p> @endif @if($cred->password) <p class="text-gray-600 flex items-center"> <span class="font-semibold w-16">Pass:</span> <span class="font-mono bg-white border border-gray-200 px-1.5 py-0.5 rounded text-xs select-all">{{ $cred->password }}</span> </p> @endif </div> </div> @endforeach </div> @endif </div> </div> </div> </div> </div> {{-- Micro-animation keyframes --}} <style> @keyframes fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.4s ease-out; } </style> </x-app-layout>
Save Changes
Cancel
Create New File
Create New Folder