File manager - Edit - /var/www/ratemypay/resources/views/profile/index.blade.php
Back
@extends('layouts.dashboard') @section('content') <div class="md:max-w-[80%] max-w-[90%] ml-auto md:pr-0 pr-10 min-h-screen flex-1 flex flex-col bg-gray-50"> <!-- Dark Header with View Profile Options --> {{-- <div class="md:mt-0 mt-16 bg-gradient-to-r from-[#2D3A5C] to-[#1A234A] px-8 py-4 text-white overflow-x-auto"> <div class="flex items-center justify-between max-w-6xl mx-auto"> <div class="flex items-center gap-3"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path> </svg> <span class="text-sm">View profile as:</span> </div> <div class="flex gap-2"> <button class="px-4 py-2 bg-white text-[#2D3A5C] rounded-lg font-medium text-sm hover:bg-gray-100 transition-colors">Myself</button> <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Public</button> <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Friend</button> <button class="px-4 py-2 bg-transparent text-white border border-white rounded-lg font-medium text-sm hover:bg-white/10 transition-colors">Trusted Friend</button> </div> </div> </div> --}} <!-- Content Area --> <div class="flex-1 overflow-auto md:px-8 px-0 py-8"> <div class="max-w-6xl mx-auto"> <!-- Profile Header Card --> <div class="bg-white rounded-lg border border-[#E5E7EB] p-8 mb-8"> <div class="flex md:flex-row flex-col items-start justify-between"> <div class="flex md:flex-row flex-col items-start gap-6"> <!-- Avatar --> <div class="relative"> <div class="w-28 h-28 bg-gradient-to-br from-[#FF6B6B] to-[#E63946] rounded-lg flex items-center justify-center text-white text-5xl font-bold"> {{ strtoupper(substr($user->name, 0, 1)) }} </div> <div class="absolute bottom-0 right-0 bg-green-500 border-4 border-white rounded-full w-8 h-8 flex items-center justify-center"> <svg class="w-4 h-4 text-white" 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> </div> </div> <!-- User Info --> <div class="flex-1"> <div class="flex items-center gap-2 mb-1"> <h1 class="text-3xl font-bold text-[#101828]"> <span>@</span><span>{{ $user->user_name ?? Str::slug($user->name) }}</span> </h1> </div> <p class="text-lg text-[#4A5565] mb-2">{{ $user->name }}</p> <p class="text-sm text-[#4A5565] mb-3"> {{ $activeJob->job_title ?? 'Member' }} • {{ $activeJob->company_name ?? 'RateMyPay' }} </p> </div> </div> <!-- Action Buttons --> <div class="flex gap-3"> <a href="{{ route('settings.index') }}#account" class="px-6 py-2 border border-[#D0D5DD] rounded-lg font-medium text-[#101828] hover:bg-gray-50 transition-colors flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"> </path> </svg> Edit Profile </a> <a href="{{ route('settings.index') }}#privacy" class="px-6 py-2 bg-[#2F3D7E] text-white rounded-lg font-medium hover:bg-[#1A234A] transition-colors flex items-center gap-2"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"> </path> </svg> Privacy Settings </a> </div> </div> </div> <!-- Tabs Navigation --> <div class="mb-8"> <div class="flex gap-1 border-b border-[#E5E7EB] overflow-x-auto"> {{-- Overview Tab --}} <button onclick="switchProfileTab('overview')" class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent active" data-tab="overview"> Overview </button> {{-- <button onclick="switchProfileTab('salary')" class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent" data-tab="salary"> Salary Data {{ $counts['salary_data'] > 0 ? "({$counts['salary_data']})" : '' }} </button> <button onclick="switchProfileTab('ratings')" class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent" data-tab="ratings"> Ratings {{ $counts['ratings'] > 0 ? "({$counts['ratings']})" : '' }} </button> <button onclick="switchProfileTab('activity')" class="profile-tab px-6 py-4 text-[#4A5565] font-medium border-b-2 border-transparent" data-tab="activity"> Activity {{ $counts['activity'] > 0 ? "({$counts['activity']})" : '' }} </button> --}} </div> </div> <div class="grid md:grid-cols-3 grid-cols-1 md:gap-8 gap-0"> <!-- Main Content Area --> <div class="col-span-2"> <!-- Overview Tab --> <div id="overview-content" class="profile-content"> <!-- Compensation Overview --> <div class="bg-white rounded-lg border border-[#E5E7EB] p-8 mb-8"> <div class="flex md:flex-row flex-col justify-between items-center mb-6"> <h2 class="text-xl font-bold text-[#101828]">Compensation Overview</h2> <p class="text-sm text-[#4A5565]">Last updated: {{ $lastUpdated->format('M d, Y') }}</p> </div> <div class="grid md:grid-cols-2 grid-cols-1 gap-6 mb-8"> <div class="bg-gray-50 rounded-lg p-6"> <p class="text-sm text-[#4A5565] font-medium mb-2">BASE SALARY</p> <p class="text-3xl font-bold text-[#101828]"> {{ $activeJob ? $activeJob->currency . ' ' . number_format($activeJob->annual_base_salary) : 'N/A' }} </p> @if($activeJob && $marketAvg > 0) <p class="text-xs {{ $activeJob->annual_base_salary >= $marketAvg ? 'text-green-600' : 'text-red-600' }} mt-2"> {{ $activeJob->annual_base_salary >= $marketAvg ? '↗' : '↘' }} {{ number_format(abs(($activeJob->annual_base_salary - $marketAvg) / $marketAvg) * 100, 1) }}% vs Market Median </p> @endif </div> <div class="bg-gray-50 rounded-lg p-6"> <p class="text-sm text-[#4A5565] font-medium mb-2">BONUS</p> <p class="text-3xl font-bold text-[#101828]"> {{ $activeJob ? $activeJob->currency . ' ' . number_format($activeJob->bonus_commission) : '0' }} </p> @if($activeJob && $activeJob->bonus_commission > 0) @if($bonusPercentile >= 95) <p class="text-xs text-green-600 mt-2 font-semibold">↗ Top 5% for Role</p> @elseif($bonusPercentile >= 75) <p class="text-xs text-blue-600 mt-2">↗ Top 25% for Role</p> @else <p class="text-xs text-[#4A5565] mt-2">Within Market Average</p> @endif @else <p class="text-xs text-gray-400 mt-2">No variable pay reported</p> @endif </div> <div class="bg-gray-50 rounded-lg p-6"> <p class="text-sm text-[#4A5565] font-medium mb-2">EQUITY</p> <p class="text-3xl font-bold text-[#101828]"> {{ $activeJob ? number_format($activeJob->equity) . "%" : 'N/A' }} </p> <div class="w-full bg-gray-200 rounded-full h-2 mt-3"> <div class="bg-[#2F3D7E] h-2 rounded-full" style="width: 45%"></div> </div> </div> <div class="bg-gray-50 rounded-lg p-6"> <p class="text-sm text-[#4A5565] font-medium mb-3">BENEFITS</p> @if($activeJob && count($activeJob->benefits_array) > 0) <div class="flex flex-wrap gap-2"> @foreach($activeJob->benefits_array as $benefit) <span class="px-3 py-1 bg-white border border-[#E5E7EB] text-[#2F3D7E] text-xs font-semibold rounded-full shadow-sm"> {{ $benefit }} </span> @endforeach </div> @else <p class="text-3xl font-bold text-gray-300">N/A</p> <p class="text-xs text-[#4A5565] mt-2">No benefits listed for this role</p> @endif </div> </div> <!-- Salary vs Market Chart --> @if($chart) <div class="border-t border-[#E5E7EB] pt-6"> <div class="mb-8 pb-8 border-b border-gray-200"> <h3 class="font-semibold text-[#101828] mb-4">Salary vs Market</h3> <div class="bg-white p-6 rounded-lg border border-gray-200"> <div id="marketComparisonChart" class="w-full"></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script> document.addEventListener('DOMContentLoaded', function () { const options = { chart: { type: 'bar', height: 320, toolbar: { show: false } }, series: [{ name: 'Salary ({{ $chart['currency'] }})', data: {!! json_encode(array_values($chart['values'])) !!} }], colors: [ '#EF4444', // red – very low / negative '#F97316', // orange – low '#EAB308', // yellow – market average '#22C55E', // green – above market '#16A34A', // dark green – top market ], plotOptions: { bar: { borderRadius: 6, columnWidth: '45%', distributed: true } }, dataLabels: { enabled: true, formatter: val => new Intl.NumberFormat().format(val), style: { colors: ['#374151'], fontSize: '12px' } }, xaxis: { categories: {!! json_encode(array_keys($chart['values'])) !!}, title: { text: 'Market Ranking' } }, yaxis: { labels: { formatter: val => new Intl.NumberFormat().format(val) }, title: { text: 'Annual Compensation' } }, tooltip: { y: { formatter: val => new Intl.NumberFormat().format(val) + ' {{ $chart['currency'] }}' } } }; new ApexCharts( document.querySelector('#marketComparisonChart'), options ).render(); }); </script> </div> @endif @if($marketComparison) <div class="mb-8"> <h3 class="text-md font-semibold text-gray-900 mb-3"> How your pay compares to the market </h3> <div class="bg-[#F9FAFB] border border-gray-200 rounded-lg p-5 space-y-4"> <p class="text-sm text-gray-700"> Your total compensation is <span class="font-semibold"> {{ number_format($job->total_compensation) }} {{ $marketComparison['currency'] }} </span>. </p> <p class="text-sm text-gray-700"> The market median for this role is <span class="font-semibold"> {{ number_format($marketComparison['percentiles']['p50']) }} {{ $marketComparison['currency'] }} </span>. </p> @php $positioning = $marketComparison['positioning']; $badgeMap = [ 'below_market' => ['bg-red-100', 'text-red-700', 'Below Market'], 'at_market' => ['bg-green-100', 'text-green-700', 'At Market'], 'above_market' => ['bg-blue-100', 'text-blue-700', 'Above Market'], ]; @endphp <div class="flex items-center gap-3"> <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $badgeMap[$positioning][0] ?? 'bg-gray-100' }} {{ $badgeMap[$positioning][1] ?? 'text-gray-700' }}"> {{ $badgeMap[$positioning][2] ?? 'Unknown' }} </span> <span class="text-xs text-gray-500"> Confidence score: {{ (int) ($marketComparison['confidence_score'] * 100) }}% </span> </div> <p class="text-xs text-gray-500"> This estimate is based on role, experience, location, industry, and company size using current market data. </p> </div> </div> @endif </div> <!-- Recent Activity --> <div class="md:mb-0 mb-6 bg-white rounded-lg border border-[#E5E7EB] p-8"> <div class="flex justify-between items-center mb-6"> <h2 class="text-xl font-bold text-[#101828]">Recent Activity</h2> <a href="#" class="text-sm text-[#2F3D7E] font-medium hover:underline">View all</a> </div> <div class="space-y-6"> @forelse($recentActivity as $activity) <div class="flex gap-4 pb-6 border-b border-[#E5E7EB] last:border-0 last:pb-0"> {{-- Icon Container with Dynamic Colors --}} <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 {{ $activity->activity_type == 'posted' ? 'bg-blue-100 text-blue-600' : '' }} {{ $activity->activity_type == 'rated' ? 'bg-red-100 text-red-600' : '' }} {{ $activity->activity_type == 'commented' ? 'bg-green-100 text-green-600' : '' }}"> @if($activity->activity_type == 'posted') {{-- Document Icon --}} <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path d="M4 4a2 2 0 012-2h6a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"> </path> </svg> @elseif($activity->activity_type == 'rated') {{-- Star Icon --}} <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"> </path> </svg> @elseif($activity->activity_type == 'commented') {{-- Heart Icon --}} <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path> </svg> @endif </div> {{-- Activity Text --}} <div class="flex-1"> <p class="font-semibold text-[#101828]"> @if($activity->activity_type == 'commented') Commented on @else {{ ucfirst($activity->activity_type) }} @endif </p> <p class="text-[#4A5565]"> @if($activity->activity_type == 'commented') {{ Str::limit($activity->rateMyPay->content ?? 'a salary post', 60) }} @elseif($activity->activity_type == 'rated') {{ Str::limit($activity->rateMyPay->content ?? 'a salary post', 60) }} @else {{ Str::limit($activity->content, 60) }} @endif </p> <p class="text-xs text-[#4A5565] mt-1"> {{ $activity->created_at->diffForHumans() }} </p> </div> </div> @empty <p class="text-center text-gray-400 py-4">No recent activity found.</p> @endforelse </div> </div> </div> <!-- Salary Data Tab --> <div id="salary-content" class="profile-content hidden"> <div class="bg-white rounded-lg border border-[#E5E7EB] p-8"> <h2 class="text-xl font-bold text-[#101828] mb-6">Salary Submissions</h2> <p class="text-[#4A5565] mb-6">You have submitted 3 salary records</p> </div> </div> <!-- Ratings Tab --> <div id="ratings-content" class="profile-content hidden"> <div class="bg-white rounded-lg border border-[#E5E7EB] p-8"> <h2 class="text-xl font-bold text-[#101828] mb-6">Ratings Given</h2> <p class="text-[#4A5565] mb-6">You have provided 67 ratings</p> </div> </div> <!-- Activity Tab --> <div id="activity-content" class="profile-content hidden"> <div class="bg-white rounded-lg border border-[#E5E7EB] p-8"> <h2 class="text-xl font-bold text-[#101828] mb-6">Recent Activity</h2> <p class="text-[#4A5565] mb-6">All your recent platform activities</p> </div> </div> </div> <!-- Sidebar --> <div class="col-span-1"> <!-- Quick Actions --> <div class="bg-[#2F3D7E] rounded-lg text-white p-6 mb-6"> <h3 class="text-lg font-semibold mb-4">Quick Actions</h3> <div class="space-y-3"> <a href="/see-salary" class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"> </path> </svg> <div class="text-left"> <p class="font-medium text-sm">See Salary</p> <p class="text-xs text-gray-300">See how you stack up</p> </div> </button> <a href="/dashboard/job-experiences/create" class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path d="M10.5 1.5H5.75A2.25 2.25 0 003.5 3.75v12.5A2.25 2.25 0 005.75 18.5h8.5a2.25 2.25 0 002.25-2.25V9.5m-12-4h6m-6 3h6m-6 3h4"> </path> </svg> <div class="text-left"> <p class="font-medium text-sm">Add Salary</p> <p class="text-xs text-gray-300">Find better opportunities</p> </div> </button> <a href="/communities" class="w-full flex items-center gap-3 px-4 py-3 bg-[#1A234A] hover:bg-[#0F1736] rounded-lg transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> <path d="M10 20a10 10 0 1110-10 10 10 0 01-10 10m0-4a4 4 0 100-8 4 4 0 000 8z"> </path> </svg> <div class="text-left"> <p class="font-medium text-sm">Join Community</p> <p class="text-xs text-gray-300">Connect with peers</p> </div> </a> </div> </div> <!-- Privacy Status --> <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6"> <div class="flex items-start gap-2 mb-3"> <svg class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> <h3 class="font-semibold text-[#101828]">Privacy Status</h3> </div> <p class="text-sm text-[#4A5565] mb-2">You are visible as <strong>Charles Deo</strong> (Nickname) to most friends.</p> <p class="text-sm text-[#4A5565] mb-4"><strong>2 trusted friends</strong> can see your real identity.</p> <a href="{{ route('settings.index') }}#privacy" class="text-sm text-blue-600 font-medium hover:underline">Manage Privacy Settings →</a> </div> <!-- Connections --> <div class="bg-white rounded-lg border border-[#E5E7EB] p-6 mb-6"> <div class="flex justify-between items-center mb-4"> <h3 class="font-semibold text-[#101828]">Connections</h3> <a href="#" class="text-sm text-[#2F3D7E] font-medium hover:underline">View all</a> </div> <div class="space-y-3"> @forelse($connections as $connection) <div class="flex items-center gap-3"> {{-- Dynamic Avatar with Initial --}} @php $colors = ['bg-purple-200 text-purple-700', 'bg-blue-200 text-blue-700', 'bg-pink-200 text-pink-700', 'bg-orange-200 text-orange-700']; $colorClass = $colors[$loop->index % count($colors)]; @endphp <div class="w-10 h-10 {{ $colorClass }} rounded-xl flex items-center justify-center font-semibold text-sm"> {{ strtoupper(substr($connection->name, 0, 1)) }} </div> <div> <p class="text-sm font-medium text-[#101828]"> <span>@</span>{{ $connection->user_name ?? Str::slug($connection->name) }} </p> <p class="text-xs text-[#4A5565]"> {{ $connection->jobExperiences->first()->job_title ?? 'Member' }} </p> </div> </div> @empty <div class="py-4 text-center"> <p class="text-sm text-gray-400 italic">No connections yet</p> <a href="{{ route('dashboard.index') }}" class="text-xs text-[#2F3D7E] font-semibold hover:underline">Find peers</a> </div> @endforelse </div> </div> <!-- About --> <div class="bg-white rounded-lg border border-[#E5E7EB] p-6"> <h3 class="font-semibold text-[#101828] mb-4">About</h3> <div class="space-y-3 text-sm"> <div class="flex gap-2"> <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"> <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"> </path> </svg> <p class="text-[#4A5565]">{{ $activeJob->job_title ?? 'Member' }} at <strong>{{ $activeJob->company_name ?? 'RateMyPay' }}</strong></p> </div> <div class="flex gap-2"> <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path> </svg> <p class="text-[#4A5565]">{{ $user->city ?? 'Remote' }}, {{ $user->country }}</p> </div> <div class="flex gap-2"> <svg class="w-5 h-5 text-[#4A5565] flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"> <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"> </path> </svg> <p class="text-[#4A5565]">{{ $activeJob->years_of_experience ?? 0 }} Years Experience </p> </div> </div> </div> </div> </div> </div> </div> </div>
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings