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
2025-12-19 11:00:34 +05:30
parent 5dc9fc7db4
commit fc9a401a8c
11 changed files with 6113 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

651
resources/views/admin/chat_support.blade.php
View File

@@ -1,96 +1,605 @@
@extends('admin.layouts.app')
@section('page-title', 'Chat Support')
@section('page-title', 'Chat Support Dashboard')
@section('content')
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--danger-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
--warning-gradient: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
--info-gradient: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
--card-shadow: 0 8px 25px rgba(0,0,0,0.08);
--card-shadow-hover: 0 15px 35px rgba(0,0,0,0.12);
--border-radius: 12px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
<div class="container py-4">
* {
box-sizing: border-box;
}
<h2 class="mb-4 fw-bold">Customer Support Chat</h2>
.chat-dashboard {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 1.5rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
<div class="card shadow-sm">
<div class="card-body p-0">
.dashboard-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
}
@if($tickets->count() === 0)
<div class="p-4 text-center text-muted">
<h5>No customer chats yet.</h5>
</div>
@else
<ul class="list-group list-group-flush">
.dashboard-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
background: var(--primary-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 0.75rem 0;
position: relative;
display: inline-block;
}
@foreach($tickets as $ticket)
@php
// Get last message
$lastMsg = $ticket->messages()->latest()->first();
@endphp
.dashboard-title::before {
content: '💬';
position: absolute;
left: -2.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
animation: bounce 2s infinite;
}
<li class="list-group-item py-3">
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(-50%) translateY(0); }
40% { transform: translateY(-50%) translateY(-8px); }
60% { transform: translateY(-50%) translateY(-4px); }
}
<div class="d-flex align-items-center justify-content-between">
.dashboard-subtitle {
color: #64748b;
font-size: 1rem;
max-width: 500px;
margin: 0 auto;
line-height: 1.5;
}
<!-- LEFT -->
<div class="d-flex align-items-center gap-3">
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
<!-- Avatar -->
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
style="width: 45px; height: 45px; font-size: 18px;">
{{ strtoupper(substr($ticket->user->customer_name ?? $ticket->user->name, 0, 1)) }}
</div>
.stat-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: var(--border-radius);
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: var(--card-shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
<div>
<!-- Name + unread badge -->
<h6 class="mb-1 fw-semibold">
{{ $ticket->user->customer_name ?? $ticket->user->name }}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
}
<span
id="badge-{{ $ticket->id }}"
class="badge bg-danger ms-2 {{ $ticket->unread_count == 0 ? 'd-none' : '' }}">
{{ $ticket->unread_count }}
</span>
</h6>
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--card-shadow-hover);
}
<!-- Last message -->
<small class="text-muted">
@if($lastMsg)
@if($lastMsg->message)
{{ Str::limit($lastMsg->message, 35) }}
@elseif(Str::startsWith($lastMsg->file_type, 'image'))
📷 Image
@else
📎 Attachment
@endif
@else
<i>No messages yet</i>
@endif
</small>
</div>
.stat-card:hover::before {
transform: scaleX(1);
}
</div>
.stat-icon {
width: 55px;
height: 55px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
flex-shrink: 0;
}
<!-- RIGHT -->
<div class="text-end">
<span class="badge {{ $ticket->status === 'open' ? 'bg-success' : 'bg-danger' }}">
{{ ucfirst($ticket->status) }}
</span>
.stat-total { background: var(--primary-gradient); color: white; }
.stat-open { background: var(--success-gradient); color: white; }
.stat-closed{ background: var(--danger-gradient); color: white; }
<a href="{{ route('admin.chat.open', $ticket->id) }}"
class="btn btn-sm btn-primary ms-2">
Open Chat →
</a>
</div>
.stat-content h3 {
font-size: 2rem;
font-weight: 800;
margin: 0 0 0.125rem 0;
color: #1e293b;
}
.stat-content p {
margin: 0;
color: #64748b;
font-size: 0.9rem;
font-weight: 500;
}
.tickets-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: var(--card-shadow);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.tickets-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.tickets-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tickets-count {
background: var(--primary-gradient);
color: white;
padding: 0.2rem 0.6rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 600;
}
/* ========= COMPACT TICKET CARD ========= */
.ticket-item {
background: white;
border-radius: 10px;
padding: 0.75rem 1rem;
margin-bottom: 0.6rem;
border: 1px solid #f1f5f9;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.ticket-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--primary-gradient);
transform: scaleY(0);
transition: var(--transition);
}
.ticket-item:hover {
transform: translateY(-2px);
box-shadow: var(--card-shadow-hover);
border-color: rgba(102, 126, 234, 0.15);
}
.ticket-item:hover::before {
transform: scaleY(1);
}
.ticket-header {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.ticket-avatar {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--info-gradient);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: white;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(86, 204, 242, 0.25);
position: relative;
overflow: hidden;
}
.ticket-avatar::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.ticket-item:hover .ticket-avatar::after {
left: 100%;
}
.ticket-content {
flex: 1;
min-width: 0;
}
.ticket-name {
font-size: 0.95rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 0.15rem 0;
display: flex;
align-items: center;
gap: 0.4rem;
}
.unread-count {
background: #ef4444;
color: white;
min-width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.ticket-preview {
color: #64748b;
font-size: 0.8rem;
line-height: 1.4;
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.ticket-time {
font-size: 0.75rem;
color: #94a3b8;
display: flex;
align-items: center;
gap: 0.25rem;
}
.ticket-time svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.ticket-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.6rem;
border-top: 1px dashed #f1f5f9;
margin-top: 0.4rem;
}
.status-badge {
padding: 0.25rem 0.7rem;
border-radius: 50px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.status-open { background: var(--success-gradient); color: white; }
.status-closed{ background: var(--danger-gradient); color: white; }
.chat-btn {
background: var(--primary-gradient);
color: white;
border: none;
padding: 0.45rem 0.9rem;
border-radius: 25px;
font-weight: 600;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.4rem;
text-decoration: none;
transition: var(--transition);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}
.chat-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.35);
color: white;
}
.chat-btn::after {
content: '→';
transition: margin-left 0.3s ease;
margin-left: 0;
}
.chat-btn:hover::after {
margin-left: 0.4rem;
}
.empty-state {
text-align: center;
padding: 2.5rem 1.5rem;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--border-radius);
border: 2px dashed #e2e8f0;
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
display: block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
.empty-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
}
.empty-subtitle {
color: #64748b;
font-size: 1rem;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.ticket-id {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
padding: 0.2rem 0.75rem;
border-radius: 16px;
font-size: 0.75rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.new-message-dot {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 10px;
height: 10px;
background: #ef4444;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
animation: blink 1.5s infinite;
z-index: 10;
}
@keyframes blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.15); }
}
@media (max-width: 768px) {
.chat-dashboard {
padding: 1rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.ticket-header {
flex-direction: column;
gap: 0.75rem;
}
.ticket-footer {
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
.chat-btn {
justify-content: center;
}
}
.tickets-list {
max-height: 55vh;
overflow-y: auto;
padding-right: 0.4rem;
}
.tickets-list::-webkit-scrollbar {
width: 5px;
}
.tickets-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 8px;
}
.tickets-list::-webkit-scrollbar-thumb {
background: var(--primary-gradient);
border-radius: 8px;
}
</style>
<div class="chat-dashboard">
<!-- Header -->
<div class="dashboard-header">
<h1 class="dashboard-title">Live Chat Dashboard</h1>
<p class="dashboard-subtitle">
Monitor customer conversations with real-time updates
</p>
</div>
</li>
@endforeach
</ul>
@endif
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon stat-total">💬</div>
<div class="stat-content">
<h3>{{ $tickets->count() }}</h3>
<p>Total Conversations</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon stat-open">📈</div>
<div class="stat-content">
<h3>{{ $tickets->where('status', 'open')->count() }}</h3>
<p>Active Tickets</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon stat-closed">✅</div>
<div class="stat-content">
<h3>{{ $tickets->where('status', 'closed')->count() }}</h3>
<p>Resolved Tickets</p>
</div>
</div>
</div>
<!-- Tickets Container -->
<div class="tickets-container">
<div class="tickets-header">
<div>
<h2 class="tickets-title">
📋 Active Conversations
<span class="tickets-count">{{ $tickets->count() }}</span>
</h2>
</div>
</div>
@if($tickets->count() === 0)
<!-- Empty State -->
<div class="empty-state">
<div class="empty-icon">💬</div>
<h3 class="empty-title">No Active Conversations</h3>
<p class="empty-subtitle">
Customer conversations will appear here with real-time notifications.
</p>
<div class="ticket-id">Ready for support requests</div>
</div>
@else
<!-- Tickets List -->
<div class="tickets-list">
@foreach($tickets as $ticket)
<div class="ticket-item" data-ticket-id="{{ $ticket->id }}">
@if($ticket->unread_count > 0)
<div class="new-message-dot"></div>
@endif
<div class="ticket-header">
<div class="ticket-avatar">
{{ strtoupper(substr($ticket->user->customer_name ?? $ticket->user->name, 0, 1)) }}
</div>
<div class="ticket-content">
<div class="ticket-name">
{{ $ticket->user->customer_name ?? $ticket->user->name }}
@if($ticket->unread_count > 0)
<span id="badge-{{ $ticket->id }}" class="unread-count">
{{ $ticket->unread_count }}
</span>
@endif
</div>
@php
$lastMsg = $ticket->messages()->latest()->first();
@endphp
<div class="ticket-preview">
@if($lastMsg)
@if($lastMsg->message)
{{ Str::limit($lastMsg->message, 55) }}
@elseif(Str::startsWith($lastMsg->file_type, 'image'))
📷 Photo shared
@else
📎 File attached
@endif
@else
<em>Conversation started</em>
@endif
</div>
@if($lastMsg)
<div class="ticket-time">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
{{ $lastMsg->created_at->diffForHumans() }}
</div>
@endif
</div>
<div class="ticket-id">#{{ $ticket->id }}</div>
</div>
<div class="ticket-footer">
<span class="status-badge status-{{ $ticket->status }}">
{{ ucfirst($ticket->status) }}
</span>
<a href="{{ route('admin.chat.open', $ticket->id) }}" class="chat-btn">
Open Chat
</a>
</div>
</div>
@endforeach
</div>
@endif
</div>
</div>
@endsection
@section('scripts')
<script>
// -------------------------------
@@ -134,8 +643,4 @@ waitForEcho(() => {
});
});
</script>
@endsection
@endsection
@endsection