430 lines
29 KiB
HTML
430 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Feedbacks — AfterSales CRM</title>
|
|
<link rel="stylesheet" href="shared.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand">
|
|
<div class="sidebar-brand-icon">
|
|
<span class="material-symbols-outlined">support_agent</span>
|
|
</div>
|
|
<span class="sidebar-brand-text">AfterSales</span>
|
|
<span class="sidebar-brand-badge">CRM</span>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-group">
|
|
<div class="sidebar-group-label">Main</div>
|
|
<a class="sidebar-item" href="dashboard.html">
|
|
<span class="sidebar-item-icon material-symbols-outlined">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-group">
|
|
<div class="sidebar-group-label">Customer Care</div>
|
|
<a class="sidebar-item active" href="feedback-list.html">
|
|
<span class="sidebar-item-icon material-symbols-outlined">chat_bubble_left_right</span>
|
|
Feedbacks
|
|
<span class="sidebar-item-badge">8</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-group">
|
|
<div class="sidebar-group-label">Management</div>
|
|
<a class="sidebar-item" href="#">
|
|
<span class="sidebar-item-icon material-symbols-outlined">building_storefront</span>
|
|
Products
|
|
</a>
|
|
<a class="sidebar-item" href="#">
|
|
<span class="sidebar-item-icon material-symbols-outlined">group</span>
|
|
Customers
|
|
</a>
|
|
<a class="sidebar-item" href="#">
|
|
<span class="sidebar-item-icon material-symbols-outlined">inbox_stack</span>
|
|
Channels
|
|
</a>
|
|
<a class="sidebar-item" href="#">
|
|
<span class="sidebar-item-icon material-symbols-outlined">description</span>
|
|
Contracts
|
|
</a>
|
|
<a class="sidebar-item" href="#">
|
|
<span class="sidebar-item-icon material-symbols-outlined">label</span>
|
|
Tags
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-user">
|
|
<div class="sidebar-user-avatar">AD</div>
|
|
<div class="sidebar-user-info">
|
|
<div class="sidebar-user-name">Admin User</div>
|
|
<div class="sidebar-user-role">admin</div>
|
|
</div>
|
|
<span class="material-symbols-outlined" style="font-size:20px;color:var(--crm-text-tertiary)">unfold_more</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<div class="breadcrumb">
|
|
<a href="dashboard.html">Home</a>
|
|
<span class="breadcrumb-sep material-symbols-outlined">chevron_right</span>
|
|
<span style="color:var(--crm-text-tertiary)">Customer Care</span>
|
|
<span class="breadcrumb-sep material-symbols-outlined">chevron_right</span>
|
|
<span class="breadcrumb-current">Feedbacks</span>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<button class="topbar-btn">
|
|
<span class="material-symbols-outlined">search</span>
|
|
</button>
|
|
<button class="topbar-btn">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
<span class="topbar-btn-badge"></span>
|
|
</button>
|
|
<button class="topbar-btn">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page-content">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
|
|
<div>
|
|
<h1 class="page-title">Feedbacks</h1>
|
|
<p class="page-subtitle">Manage customer feedback and support tickets</p>
|
|
</div>
|
|
<button class="btn btn--primary">
|
|
<span class="material-symbols-outlined">add</span>
|
|
New Feedback
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div style="display:flex; gap:16px; margin-bottom:24px;">
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-surface); border:1px solid var(--crm-border); border-radius:var(--crm-radius-full);">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-text-tertiary)">list</span>
|
|
<span style="font-size:13px; font-weight:600; color:var(--crm-text-primary);">All</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-primary-light); color:var(--crm-primary); padding:1px 8px; border-radius:var(--crm-radius-full);">24</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-surface); border:1px solid var(--crm-border); border-radius:var(--crm-radius-full); cursor:pointer;">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-pending)">schedule</span>
|
|
<span style="font-size:13px; font-weight:500; color:var(--crm-text-secondary);">Pending</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-pending-bg); color:var(--crm-pending); padding:1px 8px; border-radius:var(--crm-radius-full);">8</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-surface); border:1px solid var(--crm-border); border-radius:var(--crm-radius-full); cursor:pointer;">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-processing)">autorenew</span>
|
|
<span style="font-size:13px; font-weight:500; color:var(--crm-text-secondary);">Processing</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-processing-bg); color:var(--crm-processing); padding:1px 8px; border-radius:var(--crm-radius-full);">6</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-surface); border:1px solid var(--crm-border); border-radius:var(--crm-radius-full); cursor:pointer;">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-resolved)">check_circle</span>
|
|
<span style="font-size:13px; font-weight:500; color:var(--crm-text-secondary);">Resolved</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-resolved-bg); color:var(--crm-resolved); padding:1px 8px; border-radius:var(--crm-radius-full);">5</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-surface); border:1px solid var(--crm-border); border-radius:var(--crm-radius-full); cursor:pointer;">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-closed)">cancel</span>
|
|
<span style="font-size:13px; font-weight:500; color:var(--crm-text-secondary);">Closed</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-closed-bg); color:var(--crm-closed); padding:1px 8px; border-radius:var(--crm-radius-full);">5</span>
|
|
</div>
|
|
<div style="display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--crm-escalated-bg); border:1px solid rgba(220,38,38,0.2); border-radius:var(--crm-radius-full); cursor:pointer;">
|
|
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-escalated)">warning</span>
|
|
<span style="font-size:13px; font-weight:600; color:var(--crm-escalated);">Escalated</span>
|
|
<span style="font-size:12px; font-weight:700; background:var(--crm-escalated); color:white; padding:1px 8px; border-radius:var(--crm-radius-full);">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Bar -->
|
|
<div class="filter-bar">
|
|
<div class="search-input">
|
|
<span class="material-symbols-outlined">search</span>
|
|
<input type="text" placeholder="Search feedbacks by title, customer...">
|
|
</div>
|
|
<div class="filter-select">
|
|
<span class="material-symbols-outlined" style="font-size:18px">filter_list</span>
|
|
All Status
|
|
<span class="material-symbols-outlined" style="font-size:18px">expand_more</span>
|
|
</div>
|
|
<div class="filter-select">
|
|
<span class="material-symbols-outlined" style="font-size:18px">inbox_stack</span>
|
|
All Channels
|
|
<span class="material-symbols-outlined" style="font-size:18px">expand_more</span>
|
|
</div>
|
|
<div class="filter-select">
|
|
<span class="material-symbols-outlined" style="font-size:18px">apartment</span>
|
|
All Departments
|
|
<span class="material-symbols-outlined" style="font-size:18px">expand_more</span>
|
|
</div>
|
|
<div class="filter-select">
|
|
<span class="material-symbols-outlined" style="font-size:18px">person</span>
|
|
All Handlers
|
|
<span class="material-symbols-outlined" style="font-size:18px">expand_more</span>
|
|
</div>
|
|
<button class="btn btn--ghost btn--sm" style="margin-left:auto;">
|
|
<span class="material-symbols-outlined" style="font-size:18px">download</span>
|
|
Export
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="card">
|
|
<div class="card-body card-body--compact">
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40px;"><input type="checkbox" style="accent-color:var(--crm-primary);"></th>
|
|
<th>Title</th>
|
|
<th>Customer</th>
|
|
<th>Product</th>
|
|
<th>Contract</th>
|
|
<th>Channel</th>
|
|
<th>Tags</th>
|
|
<th>Status</th>
|
|
<th>Department</th>
|
|
<th>Assigned To</th>
|
|
<th>Created</th>
|
|
<th style="width:60px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="feedback-detail.html" class="table-link">Leak in bathroom</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--blue">NA</div>
|
|
Nguyễn A
|
|
</div>
|
|
</td>
|
|
<td>Sunrise A1</td>
|
|
<td><span class="badge badge--sale">Sale</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#0066ff">chat</span> Zalo</span></td>
|
|
<td><span class="badge" style="background:#ede9fe;color:#7c3aed;border:1px solid #c4b5fd;font-size:11px;">Plumbing</span></td>
|
|
<td><span class="badge badge--pending badge--dot">Pending</span></td>
|
|
<td>CSKH</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--green">ST</div>
|
|
Staff
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">2h ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="#" class="table-link">AC not working</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--purple">TB</div>
|
|
Trần B
|
|
</div>
|
|
</td>
|
|
<td>Green Valley</td>
|
|
<td><span class="badge badge--lease">Lease</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#ea4335">mail</span> Email</span></td>
|
|
<td><span class="badge" style="background:#fef3c7;color:#92400e;border:1px solid #fde68a;font-size:11px;">HVAC</span></td>
|
|
<td><span class="badge badge--processing badge--dot">Processing</span></td>
|
|
<td>Kỹ thuật</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--amber">MG</div>
|
|
Manager
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">5h ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr style="background:var(--crm-escalated-bg);">
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td>
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<a href="#" class="table-link">Door lock broken</a>
|
|
<span class="material-symbols-outlined" style="font-size:16px;color:var(--crm-escalated)" title="Escalated">priority_high</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--blue">LC</div>
|
|
Lê C
|
|
</div>
|
|
</td>
|
|
<td>Ocean Tower</td>
|
|
<td><span class="badge badge--bcc">BCC</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#34a853">phone</span> Phone</span></td>
|
|
<td><span class="badge" style="background:#fee2e2;color:#991b1b;border:1px solid #fecaca;font-size:11px;">Urgent</span></td>
|
|
<td><span class="badge badge--escalated badge--dot">Escalated</span></td>
|
|
<td>CSKH</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--green">ST</div>
|
|
Staff
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">1d ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="#" class="table-link">Paint crack in living room</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--amber">PD</div>
|
|
Phạm D
|
|
</div>
|
|
</td>
|
|
<td>Park Hill</td>
|
|
<td><span class="badge badge--sale">Sale</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#6b7280">description</span> Doc</span></td>
|
|
<td><span class="badge" style="background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;font-size:11px;">Painting</span></td>
|
|
<td><span class="badge badge--resolved badge--dot">Resolved</span></td>
|
|
<td>Kỹ thuật</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--purple">AD</div>
|
|
Admin
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">3d ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="#" class="table-link">Window seal broken</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--blue">HE</div>
|
|
Hoàng E
|
|
</div>
|
|
</td>
|
|
<td>Sunrise A2</td>
|
|
<td><span class="badge badge--lease">Lease</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#9c27b0">person</span> In Person</span></td>
|
|
<td><span class="badge" style="background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;font-size:11px;">Window</span></td>
|
|
<td><span class="badge badge--closed badge--dot">Closed</span></td>
|
|
<td>CSKH</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--green">ST</div>
|
|
Staff
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">1w ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="#" class="table-link">Elevator noise complaint</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--purple">TB</div>
|
|
Trần B
|
|
</div>
|
|
</td>
|
|
<td>Green Valley</td>
|
|
<td><span class="badge badge--lease">Lease</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#0066ff">chat</span> Zalo</span></td>
|
|
<td><span class="badge" style="background:#fef3c7;color:#92400e;border:1px solid #fde68a;font-size:11px;">Noise</span></td>
|
|
<td><span class="badge badge--pending badge--dot">Pending</span></td>
|
|
<td>Kỹ thuật</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--amber">MG</div>
|
|
Manager
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">2d ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" style="accent-color:var(--crm-primary);"></td>
|
|
<td><a href="#" class="table-link">Billing discrepancy</a></td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--blue">NA</div>
|
|
Nguyễn A
|
|
</div>
|
|
</td>
|
|
<td>Sunrise A1</td>
|
|
<td><span class="badge badge--sale">Sale</span></td>
|
|
<td><span style="display:inline-flex;align-items:center;gap:4px;font-size:13px;"><span class="material-symbols-outlined" style="font-size:16px;color:#ea4335">mail</span> Email</span></td>
|
|
<td><span class="badge" style="background:#ede9fe;color:#7c3aed;border:1px solid #c4b5fd;font-size:11px;">Billing</span></td>
|
|
<td><span class="badge badge--processing badge--dot">Processing</span></td>
|
|
<td>Kế toán</td>
|
|
<td>
|
|
<div class="table-meta">
|
|
<div class="table-avatar table-avatar--green">ST</div>
|
|
Staff
|
|
</div>
|
|
</td>
|
|
<td style="color:var(--crm-text-tertiary); font-size:13px;">4d ago</td>
|
|
<td>
|
|
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
|
<span class="material-symbols-outlined" style="font-size:18px;">more_vert</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination">
|
|
<div class="pagination-info">Showing <strong>1-7</strong> of <strong>24</strong> feedbacks</div>
|
|
<div class="pagination-buttons">
|
|
<button class="pagination-btn">
|
|
<span class="material-symbols-outlined" style="font-size:18px">chevron_left</span>
|
|
</button>
|
|
<button class="pagination-btn active">1</button>
|
|
<button class="pagination-btn">2</button>
|
|
<button class="pagination-btn">3</button>
|
|
<button class="pagination-btn">4</button>
|
|
<button class="pagination-btn">
|
|
<span class="material-symbols-outlined" style="font-size:18px">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|