feat: add i18n support for Vietnamese and English
This commit is contained in:
441
previews/dashboard.html
Normal file
441
previews/dashboard.html
Normal file
@@ -0,0 +1,441 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AfterSales CRM — Dashboard 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; }
|
||||
.stat-card { transition: all 0.2s; }
|
||||
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
|
||||
.trend-up { color: #10b981; }
|
||||
.trend-down { color: #ef4444; }
|
||||
.pulse-dot { animation: pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
|
||||
.sidebar-link { transition: all 0.15s; }
|
||||
.sidebar-link:hover { background: #eff6ff; color: #2563eb; }
|
||||
.sidebar-link.active { background: #2563eb; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-900">
|
||||
<div class="flex min-h-screen">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
|
||||
<!-- Logo -->
|
||||
<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 -->
|
||||
<nav class="flex-1 px-3 py-4 space-y-1">
|
||||
<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="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="feedback-list.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="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>
|
||||
|
||||
<!-- User -->
|
||||
<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">Dashboard</h1>
|
||||
<p class="text-sm text-gray-500">Welcome back, Admin</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<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 pulse-dot"></span>
|
||||
</button>
|
||||
<div class="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
|
||||
<span class="text-white font-semibold text-xs">AD</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div class="p-8 space-y-6">
|
||||
|
||||
<!-- Row 1: Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- Resolved -->
|
||||
<div class="stat-card bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Resolved Tickets</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">156</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-emerald-600" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center">
|
||||
<span class="trend-up text-sm font-medium flex items-center">
|
||||
<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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
+12%
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 ml-2">vs last week</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avg Processing Time -->
|
||||
<div class="stat-card bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Avg Processing Time</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">45 <span class="text-lg font-medium text-gray-400">min</span></p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center">
|
||||
<span class="trend-down text-sm font-medium flex items-center">
|
||||
<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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
|
||||
-8%
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 ml-2">improved</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending -->
|
||||
<div class="stat-card bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Pending Tickets</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">23</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center">
|
||||
<span class="trend-down text-sm font-medium flex items-center">
|
||||
<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="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
|
||||
-3
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 ml-2">from yesterday</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Escalated -->
|
||||
<div class="stat-card bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Escalated</p>
|
||||
<p class="text-3xl font-bold text-red-600 mt-1">5</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center">
|
||||
<span class="trend-up text-sm font-medium flex items-center text-red-600">
|
||||
<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="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
|
||||
+2
|
||||
</span>
|
||||
<span class="text-sm text-gray-500 ml-2">needs attention</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Charts -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Handler Performance Chart -->
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Handler Performance</h3>
|
||||
<p class="text-sm text-gray-500">Average processing time per handler</p>
|
||||
</div>
|
||||
<select class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500">
|
||||
<option>This Week</option>
|
||||
<option>This Month</option>
|
||||
<option>This Quarter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm font-medium text-gray-700">Nguyễn A</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="h-8 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 rounded-lg flex items-center justify-end pr-3" style="width: 48%">
|
||||
<span class="text-xs font-semibold text-white">32 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 text-right">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">Fast</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm font-medium text-gray-700">Trần B</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="h-8 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div class="h-full bg-blue-500 rounded-lg flex items-center justify-end pr-3" style="width: 65%">
|
||||
<span class="text-xs font-semibold text-white">48 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 text-right">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">Normal</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm font-medium text-gray-700">Lê C</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="h-8 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div class="h-full bg-amber-500 rounded-lg flex items-center justify-end pr-3" style="width: 85%">
|
||||
<span class="text-xs font-semibold text-white">65 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 text-right">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-50 text-amber-700">Slow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm font-medium text-gray-700">Phạm D</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="h-8 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div class="h-full bg-emerald-500 rounded-lg flex items-center justify-end pr-3" style="width: 40%">
|
||||
<span class="text-xs font-semibold text-white">28 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 text-right">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">Fast</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-24 text-sm font-medium text-gray-700">Hoàng E</div>
|
||||
<div class="flex-1 mx-4">
|
||||
<div class="h-8 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div class="h-full bg-red-500 rounded-lg flex items-center justify-end pr-3" style="width: 95%">
|
||||
<span class="text-xs font-semibold text-white">82 min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-16 text-right">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700">Alert</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tickets by Status Donut -->
|
||||
<div class="bg-white rounded-xl border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Tickets by Status</h3>
|
||||
<p class="text-sm text-gray-500">Current distribution</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<!-- SVG Donut Chart -->
|
||||
<div class="relative">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200">
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="#fbbf24" stroke-width="32" stroke-dasharray="100.53 402.12" stroke-dashoffset="0" transform="rotate(-90 100 100)"/>
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="#3b82f6" stroke-width="32" stroke-dasharray="75.4 402.12" stroke-dashoffset="-100.53" transform="rotate(-90 100 100)"/>
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="#10b981" stroke-width="32" stroke-dasharray="150.8 402.12" stroke-dashoffset="-175.93" transform="rotate(-90 100 100)"/>
|
||||
<circle cx="100" cy="100" r="80" fill="none" stroke="#9ca3af" stroke-width="32" stroke-dasharray="75.4 402.12" stroke-dashoffset="-326.73" transform="rotate(-90 100 100)"/>
|
||||
<text x="100" y="95" text-anchor="middle" class="text-3xl font-bold" fill="#111827">207</text>
|
||||
<text x="100" y="115" text-anchor="middle" class="text-sm" fill="#6b7280">Total</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-2 gap-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-amber-400 mr-2"></div>
|
||||
<span class="text-sm text-gray-600">Pending</span>
|
||||
<span class="ml-auto text-sm font-semibold text-gray-900">23</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
|
||||
<span class="text-sm text-gray-600">Processing</span>
|
||||
<span class="ml-auto text-sm font-semibold text-gray-900">18</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-emerald-500 mr-2"></div>
|
||||
<span class="text-sm text-gray-600">Resolved</span>
|
||||
<span class="ml-auto text-sm font-semibold text-gray-900">156</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-gray-400 mr-2"></div>
|
||||
<span class="text-sm text-gray-600">Closed</span>
|
||||
<span class="ml-auto text-sm font-semibold text-gray-900">10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Resolved Tickets Table -->
|
||||
<div class="bg-white rounded-xl border border-gray-200">
|
||||
<div class="px-6 py-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Tickets Awaiting Closure</h3>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Resolved tickets pending manager review</p>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-50 text-amber-700 border border-amber-200">
|
||||
4 tickets
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">#</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Ticket</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Customer</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Handler</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Department</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Contract</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Resolved Date</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 text-sm font-medium text-gray-900">#001</td>
|
||||
<td class="px-6 py-4">
|
||||
<a href="edit-feedback.html" class="text-sm font-medium text-primary-600 hover:text-primary-800 hover:underline">Khách hàng phản ánh nước nóng</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700">Nguyễn Văn A</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2"><span class="text-xs font-medium text-blue-700">S</span></div>
|
||||
<span class="text-sm text-gray-700">Staff User</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4"><span class="text-sm text-gray-700">CSKH</span></td>
|
||||
<td class="px-6 py-4"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">SALE</span></td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500">30/04/2026</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="inline-flex items-center px-3 py-1.5 bg-emerald-600 text-white text-xs font-medium rounded-lg hover:bg-emerald-700 transition">
|
||||
<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="M5 13l4 4L19 7"/></svg>
|
||||
Close
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 text-sm font-medium text-gray-900">#003</td>
|
||||
<td class="px-6 py-4">
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-800 hover:underline">Yêu cầu sửa chữa cửa sổ</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700">Trần Thị B</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-2"><span class="text-xs font-medium text-purple-700">T</span></div>
|
||||
<span class="text-sm text-gray-700">Trần Staff</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4"><span class="text-sm text-gray-700">Kỹ thuật</span></td>
|
||||
<td class="px-6 py-4"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-200">LEASE</span></td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500">29/04/2026</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="inline-flex items-center px-3 py-1.5 bg-emerald-600 text-white text-xs font-medium rounded-lg hover:bg-emerald-700 transition">
|
||||
<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="M5 13l4 4L19 7"/></svg>
|
||||
Close
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 text-sm font-medium text-gray-900">#005</td>
|
||||
<td class="px-6 py-4">
|
||||
<a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-800 hover:underline">Hỗ trợ đăng ký cư trú</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-700">Lê Minh C</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center">
|
||||
<div class="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center mr-2"><span class="text-xs font-medium text-emerald-700">L</span></div>
|
||||
<span class="text-sm text-gray-700">Lê Staff</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4"><span class="text-sm text-gray-700">Pháp lý</span></td>
|
||||
<td class="px-6 py-4"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-50 text-amber-700 border border-amber-200">BCC</span></td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500">28/04/2026</td>
|
||||
<td class="px-6 py-4">
|
||||
<button class="inline-flex items-center px-3 py-1.5 bg-emerald-600 text-white text-xs font-medium rounded-lg hover:bg-emerald-700 transition">
|
||||
<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="M5 13l4 4L19 7"/></svg>
|
||||
Close
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user