437 lines
16 KiB
PHP
437 lines
16 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('page-title', 'Profile')
|
||
|
||
@section('content')
|
||
<div class="container-fluid px-0 bg-transparent">
|
||
<style>
|
||
/* ── HEADER ── */
|
||
.profile-header {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 1.5rem;
|
||
padding: 32px 36px;
|
||
background: linear-gradient(120deg, #4e73df 60%, #1cc88a 100%);
|
||
border-radius: 22px;
|
||
color: white;
|
||
box-shadow: 0 10px 36px rgba(78,115,223,0.22);
|
||
margin-bottom: 28px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.profile-header::before {
|
||
content:"";position:absolute;top:-60px;right:-60px;
|
||
width:220px;height:220px;
|
||
background:rgba(255,255,255,0.08);border-radius:50%;
|
||
}
|
||
.profile-header::after {
|
||
content:"";position:absolute;bottom:-80px;right:180px;
|
||
width:180px;height:180px;
|
||
background:rgba(255,255,255,0.05);border-radius:50%;
|
||
}
|
||
|
||
.avatar-initials {
|
||
width:100px;height:100px;border-radius:50%;
|
||
border:4px solid rgba(255,255,255,0.75);
|
||
box-shadow:0 6px 24px rgba(0,0,0,0.18);
|
||
background:#fff;z-index:1;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:2.6rem;font-weight:800;color:#4e73df;
|
||
letter-spacing:-1px;
|
||
}
|
||
|
||
.main-info { display:flex;flex-direction:column;gap:14px;z-index:1;flex:1; }
|
||
.main-row { display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start; }
|
||
.field-group { min-width:160px; }
|
||
|
||
.ph-label {
|
||
font-size:0.72rem;color:rgba(255,255,255,0.65);
|
||
font-weight:600;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px;
|
||
}
|
||
.ph-value {
|
||
font-size:0.95rem;font-weight:600;color:#fff;
|
||
background:rgba(255,255,255,0.12);border-radius:9px;
|
||
padding:6px 13px;border:1.5px solid rgba(255,255,255,0.2);
|
||
backdrop-filter:blur(4px);
|
||
}
|
||
|
||
.type-badge {
|
||
display:inline-block;padding:4px 14px;border-radius:50px;
|
||
font-size:0.72rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;
|
||
}
|
||
.type-admin { background:rgba(255,210,60,0.22);color:#ffe066;border:1px solid rgba(255,220,80,0.4); }
|
||
.type-staff { background:rgba(100,255,180,0.18);color:#a0ffda;border:1px solid rgba(100,255,180,0.35); }
|
||
|
||
.status-dot {
|
||
display:inline-block;width:9px;height:9px;
|
||
border-radius:50%;margin-right:5px;
|
||
}
|
||
.status-active { background:#22c55e;box-shadow:0 0 5px #22c55e; }
|
||
.status-inactive { background:#ef4444;box-shadow:0 0 5px #ef4444; }
|
||
|
||
/* ── STATS ── */
|
||
.profile-stats-row { display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px; }
|
||
|
||
.stat-card {
|
||
background:#fff;border-radius:16px;
|
||
box-shadow:0 3px 18px rgba(60,80,120,0.07);
|
||
padding:20px 22px;
|
||
transition:all 0.3s ease;
|
||
position:relative;
|
||
flex:1 1 160px;
|
||
overflow:hidden;
|
||
}
|
||
.stat-card::after {
|
||
content:"";position:absolute;
|
||
top:-25px;right:-25px;
|
||
width:80px;height:80px;
|
||
border-radius:50%;
|
||
opacity:0.35;
|
||
}
|
||
|
||
/* Per-card accent colors */
|
||
.stat-card.sc-blue { border-top:3px solid #4e73df; }
|
||
.stat-card.sc-blue::after { background:linear-gradient(135deg,#c4d7ff,#e9f0ff); }
|
||
|
||
.stat-card.sc-green { border-top:3px solid #1cc88a; }
|
||
.stat-card.sc-green::after { background:linear-gradient(135deg,#bbf7d0,#dcfce7); }
|
||
|
||
.stat-card.sc-yellow { border-top:3px solid #f6c23e; }
|
||
.stat-card.sc-yellow::after { background:linear-gradient(135deg,#fef9c3,#fef08a); }
|
||
|
||
.stat-card.sc-red { border-top:3px solid #e74a3b; }
|
||
.stat-card.sc-red::after { background:linear-gradient(135deg,#fee2e2,#fecaca); }
|
||
|
||
.stat-card.sc-purple { border-top:3px solid #8b5cf6; }
|
||
.stat-card.sc-purple::after { background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
|
||
|
||
.stat-card.sc-teal { border-top:3px solid #0ea5e9; }
|
||
.stat-card.sc-teal::after { background:linear-gradient(135deg,#e0f2fe,#bae6fd); }
|
||
|
||
.stat-card:hover { transform:translateY(-5px);box-shadow:0 10px 30px rgba(78,115,223,0.15); }
|
||
|
||
.stat-icon-wrap {
|
||
width:42px;height:42px;border-radius:11px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:1.25rem;margin-bottom:10px;
|
||
}
|
||
.sc-blue .stat-icon-wrap { background:#eff6ff; }
|
||
.sc-green .stat-icon-wrap { background:#f0fdf4; }
|
||
.sc-yellow .stat-icon-wrap { background:#fefce8; }
|
||
.sc-red .stat-icon-wrap { background:#fef2f2; }
|
||
.sc-purple .stat-icon-wrap { background:#faf5ff; }
|
||
.sc-teal .stat-icon-wrap { background:#f0f9ff; }
|
||
|
||
.stat-label {
|
||
font-size:0.78rem;color:#8b96ad;font-weight:600;
|
||
text-transform:uppercase;letter-spacing:0.06em;
|
||
margin-bottom:4px;display:block;
|
||
}
|
||
.stat-value {
|
||
font-size:1.7rem;font-weight:800;color:#1b2330;
|
||
line-height:1;margin-bottom:6px;
|
||
}
|
||
.stat-footer { font-size:0.78rem;color:#94a3b8; }
|
||
.positive { color:#16a34a; }
|
||
.negative { color:#dc2626; }
|
||
|
||
/* ── PROFESSIONAL INFO ── */
|
||
.pro-section { margin-bottom:26px; }
|
||
.pro-section-title {
|
||
font-size:0.88rem;font-weight:700;color:#1b2330;
|
||
border-left:4px solid #4e73df;padding-left:9px;margin-bottom:14px;
|
||
display:flex;align-items:center;gap:7px;
|
||
}
|
||
.pro-grid { display:flex;flex-wrap:wrap;gap:14px; }
|
||
.pro-box {
|
||
background:#fff;border-radius:14px;
|
||
padding:16px 20px;
|
||
box-shadow:0 2px 14px rgba(60,80,120,0.07);
|
||
border:1px solid #e8edf5;
|
||
transition:all 0.25s cubic-bezier(.4,0,.2,1);
|
||
flex:1 1 160px;min-width:0;
|
||
position:relative;overflow:hidden;
|
||
}
|
||
.pro-box::before {
|
||
content:"";
|
||
position:absolute;top:0;left:0;right:0;height:3px;
|
||
background:linear-gradient(90deg,#4e73df,#1cc88a);
|
||
opacity:0;transition:opacity 0.25s;
|
||
}
|
||
.pro-box:hover { transform:translateY(-4px);box-shadow:0 8px 28px rgba(78,115,223,0.15);border-color:#c7d4f8; }
|
||
.pro-box:hover::before { opacity:1; }
|
||
|
||
.box-icon { font-size:1.3rem;margin-bottom:7px;display:inline-block; }
|
||
.box-label { font-size:0.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px; }
|
||
.box-value { font-size:0.95rem;font-weight:700;color:#1b2330;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
||
|
||
/* ── BOTTOM CARDS ── */
|
||
.profile-grid-row { display:flex;flex-wrap:wrap;gap:18px;margin-bottom:10px; }
|
||
.profile-card {
|
||
background:#fff;border-radius:16px;
|
||
box-shadow:0 3px 18px rgba(60,80,120,0.07);
|
||
padding:22px;transition:all 0.3s ease;flex:1 1 220px;
|
||
}
|
||
.profile-card:hover { transform:translateY(-4px);box-shadow:0 8px 28px rgba(78,115,223,0.14); }
|
||
.profile-card h6 {
|
||
font-size:1rem;font-weight:700;margin-bottom:14px;color:#1b2330;
|
||
border-left:4px solid #4e73df;padding-left:9px;
|
||
}
|
||
.activity-list,.quick-action-list { list-style:none;padding:0;margin:0; }
|
||
.activity-list li,.quick-action-list li {
|
||
padding:9px 6px;font-size:0.92rem;border-bottom:1px solid #f2f4f8;
|
||
display:flex;align-items:center;gap:8px;transition:0.2s ease;border-radius:6px;
|
||
}
|
||
.activity-list li:hover { background:#f4f7ff;padding-left:10px; }
|
||
.quick-action-list li a {
|
||
text-decoration:none;color:#2563eb;font-weight:600;
|
||
display:flex;align-items:center;gap:8px;transition:0.2s ease;width:100%;
|
||
}
|
||
.quick-action-list li a:hover { color:#1e40af;transform:translateX(5px); }
|
||
|
||
@media (max-width:900px) {
|
||
.profile-header,.profile-stats-row,.profile-grid-row { flex-direction:column; }
|
||
.avatar-initials { margin:0 auto; }
|
||
.main-row { justify-content:center; }
|
||
.pro-grid { flex-direction:column; }
|
||
.pro-box { flex:unset;width:100%; }
|
||
}
|
||
</style>
|
||
|
||
@php
|
||
$user = $user ?? Auth::guard('admin')->user();
|
||
$isAdmin = $user->type === 'admin';
|
||
$initials = strtoupper(substr($user->name ?? 'U', 0, 1));
|
||
$joiningFormatted = $user->joining_date
|
||
? \Carbon\Carbon::parse($user->joining_date)->format('d M Y')
|
||
: '—';
|
||
$isActive = ($user->status ?? 'active') === 'active';
|
||
|
||
// stats — controller मधून येतात, fallback 0
|
||
$s = $stats ?? [];
|
||
$totalContainers = $s['total_containers'] ?? 0;
|
||
$totalInvoices = $s['total_invoices'] ?? 0;
|
||
$paidInvoices = $s['paid_invoices'] ?? 0;
|
||
$pendingInvoices = $s['pending_invoices'] ?? 0;
|
||
$totalCustomers = $s['total_customers'] ?? 0;
|
||
$totalMarklist = $s['total_marklist'] ?? 0;
|
||
$activeMarklist = $s['active_marklist'] ?? 0;
|
||
@endphp
|
||
|
||
{{-- ════════ PROFILE HEADER ════════ --}}
|
||
<div class="profile-header">
|
||
<div class="avatar-initials">{{ $initials }}</div>
|
||
|
||
<div class="main-info">
|
||
{{-- Row 1 --}}
|
||
<div class="main-row">
|
||
<div class="field-group">
|
||
<div class="ph-label">Full Name</div>
|
||
<div class="ph-value" style="font-size:1.05rem;">{{ $user->name ?? '—' }}</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<div class="ph-label">Account Type</div>
|
||
<div class="ph-value" style="padding:4px 10px;">
|
||
<span class="type-badge {{ $isAdmin ? 'type-admin' : 'type-staff' }}">
|
||
{{ $isAdmin ? '⭐ Admin' : '👤 Staff' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<div class="ph-label">Status</div>
|
||
<div class="ph-value">
|
||
<span class="status-dot {{ $isActive ? 'status-active' : 'status-inactive' }}"></span>
|
||
{{ ucfirst($user->status ?? 'active') }}
|
||
</div>
|
||
</div>
|
||
@if($user->employee_id)
|
||
<div class="field-group">
|
||
<div class="ph-label">Employee ID</div>
|
||
<div class="ph-value" style="font-family:monospace;letter-spacing:0.05em;">{{ $user->employee_id }}</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- Row 2 --}}
|
||
<div class="main-row">
|
||
<div class="field-group">
|
||
<div class="ph-label">Email</div>
|
||
<div class="ph-value" style="font-size:0.88rem;">{{ $user->email ?? '—' }}</div>
|
||
</div>
|
||
<div class="field-group">
|
||
<div class="ph-label">Phone</div>
|
||
<div class="ph-value">{{ $user->phone ?? '—' }}</div>
|
||
</div>
|
||
@if($user->department)
|
||
<div class="field-group">
|
||
<div class="ph-label">Department</div>
|
||
<div class="ph-value">{{ $user->department }}</div>
|
||
</div>
|
||
@endif
|
||
@if($user->designation)
|
||
<div class="field-group">
|
||
<div class="ph-label">Designation</div>
|
||
<div class="ph-value">{{ $user->designation }}</div>
|
||
</div>
|
||
@endif
|
||
@if($user->address)
|
||
<div class="field-group" style="min-width:220px;">
|
||
<div class="ph-label">Address</div>
|
||
<div class="ph-value" style="font-size:0.88rem;">{{ $user->address }}</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ════════ PROFESSIONAL INFO ════════ --}}
|
||
<div class="pro-section">
|
||
<div class="pro-section-title">🏢 Professional Information</div>
|
||
<div class="pro-grid">
|
||
|
||
@if($user->employee_id)
|
||
<div class="pro-box">
|
||
<div class="box-icon">🪪</div>
|
||
<div class="box-label">Employee ID</div>
|
||
<div class="box-value" style="font-family:monospace;">{{ $user->employee_id }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($user->username)
|
||
<div class="pro-box">
|
||
<div class="box-icon">👤</div>
|
||
<div class="box-label">Username</div>
|
||
<div class="box-value">{{ $user->username }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($user->role)
|
||
<div class="pro-box">
|
||
<div class="box-icon">🎯</div>
|
||
<div class="box-label">Role</div>
|
||
<div class="box-value">{{ $user->role }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($user->department)
|
||
<div class="pro-box">
|
||
<div class="box-icon">🏬</div>
|
||
<div class="box-label">Department</div>
|
||
<div class="box-value">{{ $user->department }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($user->designation)
|
||
<div class="pro-box">
|
||
<div class="box-icon">📋</div>
|
||
<div class="box-label">Designation</div>
|
||
<div class="box-value">{{ $user->designation }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="pro-box">
|
||
<div class="box-icon">📅</div>
|
||
<div class="box-label">Joining Date</div>
|
||
<div class="box-value">{{ $joiningFormatted }}</div>
|
||
</div>
|
||
|
||
@if($user->emergency_phone)
|
||
<div class="pro-box">
|
||
<div class="box-icon">🆘</div>
|
||
<div class="box-label">Emergency Phone</div>
|
||
<div class="box-value">{{ $user->emergency_phone }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($user->additional_info)
|
||
<div class="pro-box" style="flex:2 1 320px;">
|
||
<div class="box-icon">📝</div>
|
||
<div class="box-label">Additional Info</div>
|
||
<div class="box-value" style="font-size:0.88rem;font-weight:500;color:#475569;white-space:normal;">{{ $user->additional_info }}</div>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ════════ REAL STATS ════════ --}}
|
||
<div class="profile-stats-row">
|
||
|
||
<div class="stat-card sc-blue">
|
||
<div class="stat-icon-wrap">📦</div>
|
||
<span class="stat-label">Total Containers</span>
|
||
<div class="stat-value">{{ number_format($totalContainers) }}</div>
|
||
<div class="stat-footer">All containers in system</div>
|
||
</div>
|
||
|
||
<div class="stat-card sc-green">
|
||
<div class="stat-icon-wrap">🧾</div>
|
||
<span class="stat-label">Total Invoices</span>
|
||
<div class="stat-value">{{ number_format($totalInvoices) }}</div>
|
||
<div class="stat-footer positive">
|
||
{{ $paidInvoices }} paid
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card sc-yellow">
|
||
<div class="stat-icon-wrap">⏳</div>
|
||
<span class="stat-label">Pending Invoices</span>
|
||
<div class="stat-value" style="color:#d97706;">{{ number_format($pendingInvoices) }}</div>
|
||
<div class="stat-footer">Awaiting payment</div>
|
||
</div>
|
||
|
||
<div class="stat-card sc-teal">
|
||
<div class="stat-icon-wrap">✅</div>
|
||
<span class="stat-label">Paid Invoices</span>
|
||
<div class="stat-value" style="color:#0ea5e9;">{{ number_format($paidInvoices) }}</div>
|
||
<div class="stat-footer positive">
|
||
@if($totalInvoices > 0)
|
||
{{ round(($paidInvoices / $totalInvoices) * 100, 1) }}% success rate
|
||
@else
|
||
No invoices yet
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-card sc-purple">
|
||
<div class="stat-icon-wrap">👥</div>
|
||
<span class="stat-label">Total Customers</span>
|
||
<div class="stat-value" style="color:#8b5cf6;">{{ number_format($totalCustomers) }}</div>
|
||
<div class="stat-footer">Registered customers</div>
|
||
</div>
|
||
|
||
<div class="stat-card sc-red">
|
||
<div class="stat-icon-wrap">🏷️</div>
|
||
<span class="stat-label">Mark List</span>
|
||
<div class="stat-value" style="color:#e74a3b;">{{ number_format($totalMarklist) }}</div>
|
||
<div class="stat-footer positive">
|
||
{{ $activeMarklist }} active
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{{-- ════════ BOTTOM CARDS ════════ --}}
|
||
<div class="profile-grid-row">
|
||
<div class="profile-card">
|
||
<h6>Recent Activity</h6>
|
||
<ul class="activity-list">
|
||
<li>📦 Shipment #SH-2024-001 delivered <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">5 min ago</span></li>
|
||
<li>📝 New shipment #SH-2024-002 created <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">13 min ago</span></li>
|
||
<li>⏰ Delay reported for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.85em;margin-left:auto;">1 hr ago</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="profile-card">
|
||
<h6>Quick Actions</h6>
|
||
<ul class="quick-action-list">
|
||
<li><a href="#">➕ Create Shipment</a></li>
|
||
<li><a href="#">🔍 Track Package</a></li>
|
||
<li><a href="#">👥 Add Customer</a></li>
|
||
<li><a href="#">📊 View Reports</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
@endsection |