kent-logistics/Kent-logistics-Laravel
SHA256
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Utkarsh Khedkar
2026-03-13 23:06:19 +05:30
parent c25b468c77
commit 785f2564be
15 changed files with 757 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
resources/views/admin/profile.blade.php
View File

@@ -5,242 +5,421 @@
@section('content')
<div class="container-fluid px-0 bg-transparent">
<style>
body {
background: linear-gradient(135deg, #f2f6ff, #fefefe);
font-family: "Poppins", sans-serif;
}
/* PROFILE HEADER */
/* ── HEADER ── */
.profile-header {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 1rem;
padding: 36px 32px;
background: linear-gradient(120deg, #4e73df 68%, #1cc88a 100%);
border-radius: 20px;
gap: 1.5rem;
padding: 32px 36px;
background: linear-gradient(120deg, #4e73df 60%, #1cc88a 100%);
border-radius: 22px;
color: white;
box-shadow: 0 8px 28px rgba(24,40,90,0.09);
margin-bottom: 34px;
box-shadow: 0 10px 36px rgba(78,115,223,0.22);
margin-bottom: 28px;
position: relative;
min-height: 140px;
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;
top: -58px;
right: -85px;
width: 210px;
height: 210px;
background: rgba(255,255,255,0.14);
border-radius: 50%;
}
.avatar {
width: 98px;
height: 98px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255,255,255,0.7);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
background: #fff;
z-index: 1;
}
.main-info {
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1;
flex: 1;
}
.main-row {
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.field-group {
min-width: 210px;
}
.label {
font-size: 0.9rem;
color: #dbe7f4;
font-weight: 500;
}
.value {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
background: rgba(255,255,255,0.13);
border-radius: 8px;
padding: 6px 12px;
border: 1.5px solid rgba(255,255,255,0.18);
transition: background 0.13s;
}
.value:hover { background: rgba(255,255,255,0.22); }
/* STATS + CARDS COMMON */
.profile-stats-row, .profile-grid-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 20px;
}
.stat-card, .profile-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 3px 18px rgba(60,80,120,0.08);
padding: 20px;
transition: all 0.3s ease;
position: relative;
flex: 1 1 200px;
}
.stat-card:hover, .profile-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 25px rgba(50,70,120,0.18);
content:"";position:absolute;bottom:-80px;right:180px;
width:180px;height:180px;
background:rgba(255,255,255,0.05);border-radius:50%;
}
/* STATS */
.stat-card::before {
content: "";
position: absolute;
top: -20px;
right: -20px;
width: 90px;
height: 90px;
background: linear-gradient(135deg, #c4d7ff, #e9f0ff);
border-radius: 50%;
opacity: 0.25;
.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.9rem;
color: #8b96ad;
font-weight: 500;
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.6rem;
font-weight: 700;
display: flex;
align-items: center;
color: #1b2330;
font-size:1.7rem;font-weight:800;color:#1b2330;
line-height:1;margin-bottom:6px;
}
.stat-footer { font-size: 0.9rem; }
.positive { color: #23a25d; }
.negative { color: #e54141; }
.neutral { color: #9a9ea8; }
.stat-footer { font-size:0.78rem;color:#94a3b8; }
.positive { color:#16a34a; }
.negative { color:#dc2626; }
/* PROFILE CARDS */
/* ── 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: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
color: #1b2330;
border-left: 4px solid #3767f4;
padding-left: 8px;
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,.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, .quick-action-list li {
padding: 9px 2px;
font-size: 1rem;
border-bottom: 1px solid #f2f4f8;
display: flex;
align-items: center;
gap: 8px;
transition: 0.2s ease;
}
.activity-list li:hover { background: #f7faff; 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;
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(4px); }
.quick-action-list li a:hover { color:#1e40af;transform:translateX(5px); }
@media (max-width: 1000px) {
.profile-header, .profile-stats-row, .profile-grid-row {
flex-direction: column;
text-align: center;
}
.avatar { margin: 0 auto 15px; }
.main-row { justify-content: center; }
@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>
<!-- PROFILE HEADER -->
@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">
<img src="https://i.pravatar.cc/100" class="avatar" alt="Avatar" />
<div class="avatar-initials">{{ $initials }}</div>
<div class="main-info">
{{-- Row 1 --}}
<div class="main-row">
<div class="field-group">
<div class="label">Name</div>
<div class="value">John Doe</div>
<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="label">Email</div>
<div class="value">john@example.com</div>
<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="label">Mobile No</div>
<div class="value">+91 12345 54321</div>
<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="label">Company Name</div>
<div class="value">XYZ Infotech</div>
<div class="ph-label">Email</div>
<div class="ph-value" style="font-size:0.88rem;">{{ $user->email ?? '—' }}</div>
</div>
<div class="field-group" style="min-width:260px;">
<div class="label">Company Address</div>
<div class="value">XYZ Infotech, East Andheri, Mumbai 400 001</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>
<!-- STATS ROW -->
{{-- ════════ 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">
<span class="stat-label">Total Shipment</span>
<span class="stat-value">📦 1,250</span>
<div class="stat-footer positive">+12% vs last month</div>
<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">
<span class="stat-label">In Transit</span>
<span class="stat-value" style="color:#2563eb;">🚚 320</span>
<div class="stat-footer neutral">65% of capacity</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">
<span class="stat-label">At Customs</span>
<span class="stat-value" style="color:#f59e0b;">🛄 85</span>
<div class="stat-footer neutral">Avg 2.3 days processing</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">
<span class="stat-label">Delayed</span>
<span class="stat-value" style="color:#e11d48;">⏰ 55</span>
<div class="stat-footer negative">-8% vs last month</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">
<span class="stat-label">Delivered</span>
<span class="stat-value" style="color:#22c55e;">✅ 780</span>
<div class="stat-footer positive">98.2% success rate</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 -->
{{-- ════════ 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.9em;margin-left:8px;">5 min ago</span></li>
<li>📝 New shipment #SH-2024-002 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">13 min ago</span></li>
<li>⏰ Delay for #SH-2024-003 <span style="color:#a1a5ad;font-size:0.9em;margin-left:8px;">1 hr ago</span></li>
<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">
@@ -253,5 +432,6 @@
</ul>
</div>
</div>
</div>
@endsection
@endsection