373 lines
30 KiB
HTML
373 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AfterSales CRM — Feedback List Preview</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwindcss.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: { 50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a' },
|
|
brand: '#2563eb',
|
|
},
|
|
fontFamily: { sans: ['Inter','system-ui','sans-serif'] },
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.sidebar-link { transition: all 0.15s; }
|
|
.sidebar-link:hover { background: #eff6ff; color: #2563eb; }
|
|
.sidebar-link.active { background: #2563eb; color: white; }
|
|
.row-pending { border-left: 3px solid #fbbf24; }
|
|
.row-processing { border-left: 3px solid #3b82f6; }
|
|
.row-resolved { border-left: 3px solid #10b981; }
|
|
.row-closed { border-left: 3px solid #9ca3af; }
|
|
.escalated-pulse { animation: pulse-red 2s infinite; }
|
|
@keyframes pulse-red { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0)} }
|
|
.tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:9999px; font-size:0.7rem; font-weight:600; }
|
|
.filter-chip { transition: all 0.15s; cursor:pointer; }
|
|
.filter-chip:hover { background: #eff6ff; }
|
|
.filter-chip.active { background: #2563eb; color: white; border-color: #2563eb; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900">
|
|
<div class="flex min-h-screen">
|
|
|
|
<!-- Sidebar (same as dashboard) -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
|
|
<div class="h-16 flex items-center px-6 border-b border-gray-100">
|
|
<div class="w-8 h-8 bg-brand rounded-lg flex items-center justify-center mr-3">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
|
|
</div>
|
|
<span class="font-bold text-lg text-gray-900">AfterSales</span>
|
|
</div>
|
|
<nav class="flex-1 px-3 py-4 space-y-1">
|
|
<a href="dashboard.html" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<div class="pt-4 pb-2 px-3"><p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Customer Care</p></div>
|
|
<a href="#" class="sidebar-link active flex items-center px-3 py-2.5 rounded-lg text-sm font-medium">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
|
|
Feedbacks
|
|
<span class="ml-auto bg-red-100 text-red-700 text-xs font-semibold px-2 py-0.5 rounded-full">5</span>
|
|
</a>
|
|
<div class="pt-4 pb-2 px-3"><p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Management</p></div>
|
|
<a href="#" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
|
Products
|
|
</a>
|
|
<a href="#" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
Customers
|
|
</a>
|
|
<a href="#" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
|
Contracts
|
|
</a>
|
|
<a href="#" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/></svg>
|
|
Channels
|
|
</a>
|
|
<a href="#" class="sidebar-link flex items-center px-3 py-2.5 rounded-lg text-sm font-medium text-gray-700">
|
|
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
|
|
Tags
|
|
</a>
|
|
</nav>
|
|
<div class="p-4 border-t border-gray-100">
|
|
<div class="flex items-center">
|
|
<div class="w-9 h-9 bg-primary-100 rounded-full flex items-center justify-center"><span class="text-primary-700 font-semibold text-sm">AD</span></div>
|
|
<div class="ml-3"><p class="text-sm font-medium text-gray-900">Admin User</p><p class="text-xs text-gray-500">admin@minicrm.local</p></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-auto">
|
|
<!-- Top Bar -->
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8">
|
|
<div>
|
|
<h1 class="text-xl font-bold text-gray-900">Feedbacks</h1>
|
|
<p class="text-sm text-gray-500">Manage customer feedback and tickets</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="relative p-2 text-gray-400 hover:text-gray-600 transition">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
|
|
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
|
</button>
|
|
<a href="#" class="inline-flex items-center px-4 py-2 bg-brand text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition shadow-sm">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
New Feedback
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="p-8 space-y-5">
|
|
|
|
<!-- Quick Stats Bar -->
|
|
<div class="grid grid-cols-5 gap-4">
|
|
<button class="filter-chip active bg-white border border-gray-200 rounded-xl px-4 py-3 text-center transition">
|
|
<p class="text-2xl font-bold text-white">5</p>
|
|
<p class="text-xs font-medium text-primary-100">All</p>
|
|
</button>
|
|
<button class="filter-chip bg-white border border-gray-200 rounded-xl px-4 py-3 text-center transition">
|
|
<p class="text-2xl font-bold text-amber-600">2</p>
|
|
<p class="text-xs font-medium text-gray-500">Pending</p>
|
|
</button>
|
|
<button class="filter-chip bg-white border border-gray-200 rounded-xl px-4 py-3 text-center transition">
|
|
<p class="text-2xl font-bold text-blue-600">1</p>
|
|
<p class="text-xs font-medium text-gray-500">Processing</p>
|
|
</button>
|
|
<button class="filter-chip bg-white border border-gray-200 rounded-xl px-4 py-3 text-center transition">
|
|
<p class="text-2xl font-bold text-emerald-600">1</p>
|
|
<p class="text-xs font-medium text-gray-500">Resolved</p>
|
|
</button>
|
|
<button class="filter-chip bg-white border border-gray-200 rounded-xl px-4 py-3 text-center transition">
|
|
<p class="text-2xl font-bold text-gray-400">1</p>
|
|
<p class="text-xs font-medium text-gray-500">Closed</p>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search & Filters -->
|
|
<div class="bg-white rounded-xl border border-gray-200 p-4">
|
|
<div class="flex items-center gap-4">
|
|
<!-- Search -->
|
|
<div class="flex-1 relative">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
|
<input type="text" placeholder="Search by title, customer, or ID..." class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" value="">
|
|
</div>
|
|
<!-- Filter dropdowns -->
|
|
<select class="border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
|
|
<option>All Channels</option>
|
|
<option>Email</option>
|
|
<option>Zalo</option>
|
|
<option>Phone</option>
|
|
<option>Document</option>
|
|
<option>In Person</option>
|
|
</select>
|
|
<select class="border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
|
|
<option>All Departments</option>
|
|
<option>CSKH</option>
|
|
<option>Kỹ thuật</option>
|
|
<option>Kế toán</option>
|
|
<option>Pháp lý</option>
|
|
</select>
|
|
<select class="border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
|
|
<option>All Handlers</option>
|
|
<option>Staff User</option>
|
|
<option>Manager User</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feedback Cards -->
|
|
<div class="space-y-3">
|
|
|
|
<!-- Card 1: Pending + Escalated -->
|
|
<div class="bg-white rounded-xl border border-gray-200 row-pending hover:shadow-md transition cursor-pointer overflow-hidden">
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="text-sm font-bold text-gray-400">#002</span>
|
|
<h3 class="text-base font-semibold text-gray-900">Khách hàng phản ánh về chất lượng nước</h3>
|
|
<span class="escalated-pulse inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700 border border-red-200">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 24 24"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
|
ESCALATED
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">Khách hàng phản ánh nước sinh hoạt có màu vàng, mùi lạ trong 3 ngày liên tiếp tại căn hộ A2-0805...</p>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<span class="tag bg-amber-50 text-amber-700 border border-amber-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-linecap="round" stroke-width="2" d="M12 6v6l4 2"/></svg>
|
|
Pending
|
|
</span>
|
|
<span class="tag bg-gray-50 text-gray-600 border border-gray-200">Zalo</span>
|
|
<span class="tag bg-blue-50 text-blue-700 border border-blue-200">CSKH</span>
|
|
<span class="tag bg-emerald-50 text-emerald-700 border border-emerald-200">SALE</span>
|
|
<span class="tag bg-purple-50 text-purple-700 border border-purple-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5"/></svg>
|
|
Sunrise A2
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex flex-col items-end gap-2">
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
|
Trần Thị B
|
|
</div>
|
|
<div class="flex items-center text-sm text-gray-400">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
28/04/2026
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center mr-1"><span class="text-xs font-medium text-gray-600">?</span></div>
|
|
<span class="text-xs text-gray-400">Unassigned</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Processing -->
|
|
<div class="bg-white rounded-xl border border-gray-200 row-processing hover:shadow-md transition cursor-pointer overflow-hidden">
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="text-sm font-bold text-gray-400">#001</span>
|
|
<h3 class="text-base font-semibold text-gray-900">Khách hàng phản ánh hệ thống nước nóng không hoạt động</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">Khách hàng phản ánh về việc hệ thống nước nóng không hoạt động trong căn hộ A1-1205. Đã kiểm tra nhưng chưa xác định được nguyên nhân...</p>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<span class="tag bg-blue-50 text-blue-700 border border-blue-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
Processing
|
|
</span>
|
|
<span class="tag bg-gray-50 text-gray-600 border border-gray-200">Email</span>
|
|
<span class="tag bg-blue-50 text-blue-700 border border-blue-200">Kỹ thuật</span>
|
|
<span class="tag bg-emerald-50 text-emerald-700 border border-emerald-200">SALE</span>
|
|
<span class="tag bg-purple-50 text-purple-700 border border-purple-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5"/></svg>
|
|
Sunrise A1
|
|
</span>
|
|
<span class="tag bg-pink-50 text-pink-700 border border-pink-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
|
|
Technical
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex flex-col items-end gap-2">
|
|
<div class="flex items-center text-sm text-gray-500">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
|
Nguyễn Văn A
|
|
</div>
|
|
<div class="flex items-center text-sm text-gray-400">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
30/04/2026
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-1"><span class="text-xs font-medium text-blue-700">S</span></div>
|
|
<span class="text-xs text-gray-600">Staff User</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Pending -->
|
|
<div class="bg-white rounded-xl border border-gray-200 row-pending hover:shadow-md transition cursor-pointer overflow-hidden">
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="text-sm font-bold text-gray-400">#004</span>
|
|
<h3 class="text-base font-semibold text-gray-900">Yêu cầu hỗ trợ đăng ký cư trú</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">Khách hàng cần hỗ trợ về thủ tục đăng ký cư trú cho căn hộ mới bàn giao...</p>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<span class="tag bg-amber-50 text-amber-700 border border-amber-200">Pending</span>
|
|
<span class="tag bg-gray-50 text-gray-600 border border-gray-200">In Person</span>
|
|
<span class="tag bg-violet-50 text-violet-700 border border-violet-200">Pháp lý</span>
|
|
<span class="tag bg-amber-50 text-amber-700 border border-amber-200">BCC</span>
|
|
<span class="tag bg-purple-50 text-purple-700 border border-purple-200">Green Valley</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex flex-col items-end gap-2">
|
|
<div class="flex items-center text-sm text-gray-500">Lê Minh C</div>
|
|
<div class="flex items-center text-sm text-gray-400">27/04/2026</div>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-gray-200 rounded-full flex items-center justify-center mr-1"><span class="text-xs font-medium text-gray-600">?</span></div>
|
|
<span class="text-xs text-gray-400">Unassigned</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Resolved -->
|
|
<div class="bg-white rounded-xl border border-gray-200 row-resolved hover:shadow-md transition cursor-pointer overflow-hidden">
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="text-sm font-bold text-gray-400">#003</span>
|
|
<h3 class="text-base font-semibold text-gray-900">Yêu cầu sửa chữa hệ thống cửa sổ</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mb-3 line-clamp-2">Cửa sổ phòng ngủ bị kẹt không đóng được. Đã cử kỹ thuật viên sửa chữa xong...</p>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<span class="tag bg-emerald-50 text-emerald-700 border border-emerald-200">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Resolved
|
|
</span>
|
|
<span class="tag bg-gray-50 text-gray-600 border border-gray-200">Phone</span>
|
|
<span class="tag bg-blue-50 text-blue-700 border border-blue-200">Kỹ thuật</span>
|
|
<span class="tag bg-blue-50 text-blue-700 border border-blue-200">LEASE</span>
|
|
<span class="tag bg-purple-50 text-purple-700 border border-purple-200">Ocean Tower</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex flex-col items-end gap-2">
|
|
<div class="flex items-center text-sm text-gray-500">Phạm Thị D</div>
|
|
<div class="flex items-center text-sm text-gray-400">29/04/2026</div>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-1"><span class="text-xs font-medium text-purple-700">T</span></div>
|
|
<span class="text-xs text-gray-600">Trần Staff</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Closed -->
|
|
<div class="bg-white rounded-xl border border-gray-200 row-closed hover:shadow-md transition cursor-pointer overflow-hidden opacity-75">
|
|
<div class="p-5">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="text-sm font-bold text-gray-400">#005</span>
|
|
<h3 class="text-base font-semibold text-gray-700">Phản ánh về phí quản lý</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-3 line-clamp-2">Khách hàng thắc mắc về phí quản lý tháng 3/2026. Đã giải thích và khách hàng đồng ý...</p>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<span class="tag bg-gray-100 text-gray-500 border border-gray-200">Closed</span>
|
|
<span class="tag bg-gray-50 text-gray-500 border border-gray-200">Email</span>
|
|
<span class="tag bg-gray-50 text-gray-500 border border-gray-200">Kế toán</span>
|
|
<span class="tag bg-gray-50 text-gray-500 border border-gray-200">SALE</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-6 flex flex-col items-end gap-2">
|
|
<div class="flex items-center text-sm text-gray-400">Hoàng Văn E</div>
|
|
<div class="flex items-center text-sm text-gray-400">25/04/2026</div>
|
|
<div class="flex items-center">
|
|
<div class="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center mr-1"><span class="text-xs font-medium text-emerald-700">L</span></div>
|
|
<span class="text-xs text-gray-500">Lê Staff</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-sm text-gray-500">Showing <span class="font-medium">1-5</span> of <span class="font-medium">5</span> results</p>
|
|
<div class="flex items-center gap-1">
|
|
<button class="px-3 py-2 text-sm text-gray-400 bg-white border border-gray-200 rounded-lg cursor-not-allowed">Previous</button>
|
|
<button class="px-3 py-2 text-sm font-medium text-white bg-brand border border-brand rounded-lg">1</button>
|
|
<button class="px-3 py-2 text-sm text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|