feat: add i18n support for Vietnamese and English
This commit is contained in:
602
webappUI/feedback-detail.html
Normal file
602
webappUI/feedback-detail.html
Normal file
@@ -0,0 +1,602 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ticket #12 — 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>
|
||||
<a href="feedback-list.html" style="color:var(--crm-text-tertiary); text-decoration:none;">Feedbacks</a>
|
||||
<span class="breadcrumb-sep material-symbols-outlined">chevron_right</span>
|
||||
<span class="breadcrumb-current">#12 Leak in bathroom</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">
|
||||
<!-- Page Header -->
|
||||
<div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px;">
|
||||
<div>
|
||||
<div style="display:flex; align-items:center; gap:12px; margin-bottom:8px;">
|
||||
<a href="feedback-list.html" class="btn btn--ghost btn--sm" style="padding:6px;">
|
||||
<span class="material-symbols-outlined">arrow_back</span>
|
||||
</a>
|
||||
<h1 class="page-title" style="margin:0;">Leak in bathroom</h1>
|
||||
<span class="badge badge--pending badge--dot">Pending</span>
|
||||
<span class="badge badge--escalated" style="font-size:11px;">
|
||||
<span class="material-symbols-outlined" style="font-size:14px;">warning</span>
|
||||
Escalated
|
||||
</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:16px; margin-left:52px; font-size:13px; color:var(--crm-text-secondary);">
|
||||
<span>Ticket <strong>#12</strong></span>
|
||||
<span>•</span>
|
||||
<span>Created <strong>2 hours ago</strong></span>
|
||||
<span>•</span>
|
||||
<span>By <strong>Nguyễn A</strong></span>
|
||||
<span>•</span>
|
||||
<span>Via <strong>Zalo</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn--secondary btn--sm">
|
||||
<span class="material-symbols-outlined" style="font-size:16px;">edit</span>
|
||||
Edit
|
||||
</button>
|
||||
<button class="btn btn--secondary btn--sm">
|
||||
<span class="material-symbols-outlined" style="font-size:16px;">print</span>
|
||||
Print
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid -->
|
||||
<div class="detail-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="detail-main">
|
||||
<!-- Feedback Content -->
|
||||
<div class="card mb-6">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="card-title-icon">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
</div>
|
||||
Feedback Details
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div style="margin-bottom:20px;">
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;">Content</div>
|
||||
<div style="font-size:15px; line-height:1.7; color:var(--crm-text-primary); background:var(--crm-surface-dim); padding:16px 20px; border-radius:var(--crm-radius-md); border-left:3px solid var(--crm-primary);">
|
||||
Water is leaking from the bathroom ceiling. The leak started 3 days ago and has gotten worse. There's water damage on the ceiling and water dripping onto the floor. I've placed a bucket but need urgent repair. The apartment is Sunrise A1, Floor 12, Unit 1205.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
|
||||
<div>
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;">Customer</div>
|
||||
<div style="display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--crm-surface-dim); border-radius:var(--crm-radius-md);">
|
||||
<div class="table-avatar table-avatar--blue" style="width:36px;height:36px;font-size:13px;">NA</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:600; color:var(--crm-text-primary);">Nguyễn A</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary);">nguyen.a@email.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;">Product</div>
|
||||
<div style="display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--crm-surface-dim); border-radius:var(--crm-radius-md);">
|
||||
<div style="width:36px;height:36px;border-radius:var(--crm-radius-sm);background:linear-gradient(135deg,#3b82f6,#6366f1);display:flex;align-items:center;justify-content:center;">
|
||||
<span class="material-symbols-outlined" style="font-size:20px;color:white;">apartment</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:600; color:var(--crm-text-primary);">Sunrise A1</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary);">Floor 12, Unit 1205</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:20px;">
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-text-tertiary); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;">Tags</div>
|
||||
<div style="display:flex; gap:8px; flex-wrap:wrap;">
|
||||
<span class="badge" style="background:#ede9fe;color:#7c3aed;border:1px solid #c4b5fd;">Plumbing</span>
|
||||
<span class="badge" style="background:#fee2e2;color:#991b1b;border:1px solid #fecaca;">Urgent</span>
|
||||
<span class="badge" style="background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;">Water Damage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interaction History -->
|
||||
<div class="card mb-6">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="card-title-icon" style="background:var(--crm-processing-bg); color:var(--crm-processing);">
|
||||
<span class="material-symbols-outlined">forum</span>
|
||||
</div>
|
||||
Interaction History
|
||||
</div>
|
||||
<button class="btn btn--primary btn--sm">
|
||||
<span class="material-symbols-outlined" style="font-size:16px;">add</span>
|
||||
Add Note
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="timeline">
|
||||
<!-- Note -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot timeline-dot--note">
|
||||
<span class="material-symbols-outlined">edit_note</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-author">Staff User</span>
|
||||
<span class="timeline-type">Note</span>
|
||||
<span class="timeline-time">2 hours ago</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
Contacted customer to schedule inspection. Customer available tomorrow 2-4 PM. Will send maintenance team to check the ceiling leak. Need to coordinate with building management for access to the unit above.
|
||||
</div>
|
||||
<a href="#" class="timeline-attachment">
|
||||
<span class="material-symbols-outlined">attach_file</span>
|
||||
inspection_photo.jpg (2.3 MB)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Change -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot timeline-dot--status">
|
||||
<span class="material-symbols-outlined">sync</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-author">Manager User</span>
|
||||
<span class="timeline-type">Status Change</span>
|
||||
<span class="timeline-time">5 hours ago</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<span class="badge badge--pending" style="font-size:11px;">Pending</span>
|
||||
<span class="material-symbols-outlined" style="font-size:16px; color:var(--crm-text-tertiary);">arrow_forward</span>
|
||||
<span class="badge badge--processing" style="font-size:11px;">Processing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Assignment -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot timeline-dot--assignment">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-author">Manager User</span>
|
||||
<span class="timeline-type">Assignment</span>
|
||||
<span class="timeline-time">5 hours ago</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
Assigned to <strong>Staff User</strong> for handling
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transfer -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot timeline-dot--transfer">
|
||||
<span class="material-symbols-outlined">swap_horiz</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-author">Admin User</span>
|
||||
<span class="timeline-type">Transfer</span>
|
||||
<span class="timeline-time">1 day ago</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
|
||||
<span class="badge" style="background:var(--crm-processing-bg); color:var(--crm-processing); border:1px solid var(--crm-processing-border);">Kỹ thuật</span>
|
||||
<span class="material-symbols-outlined" style="font-size:16px; color:var(--crm-text-tertiary);">arrow_forward</span>
|
||||
<span class="badge" style="background:var(--crm-resolved-bg); color:var(--crm-resolved); border:1px solid var(--crm-resolved-border);">CSKH</span>
|
||||
</div>
|
||||
<div style="font-size:13px; color:var(--crm-text-secondary); font-style:italic;">
|
||||
"Đã kiểm tra kỹ thuật, cần CSKH liên hệ khách hàng để sắp lịch sửa chữa"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Initial Note -->
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot timeline-dot--note">
|
||||
<span class="material-symbols-outlined">edit_note</span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-author">System</span>
|
||||
<span class="timeline-type">Created</span>
|
||||
<span class="timeline-time">2 days ago</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
Feedback created via <strong>Zalo</strong> channel. Auto-assigned to <strong>CSKH</strong> department.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments -->
|
||||
<div class="card mb-6">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="card-title-icon" style="background:var(--crm-accent-light); color:var(--crm-accent);">
|
||||
<span class="material-symbols-outlined">attach_file</span>
|
||||
</div>
|
||||
Attachments
|
||||
</div>
|
||||
<span style="font-size:13px; color:var(--crm-text-tertiary);">3 files</span>
|
||||
</div>
|
||||
<div class="card-body card-body--compact">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Collection</th>
|
||||
<th>Size</th>
|
||||
<th>Uploaded By</th>
|
||||
<th>Date</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:36px;height:36px;border-radius:var(--crm-radius-sm);background:#fee2e2;display:flex;align-items:center;justify-content:center;">
|
||||
<span class="material-symbols-outlined" style="font-size:20px;color:#dc2626;">image</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:600; color:var(--crm-text-primary);">inspection_photo.jpg</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary);">image/jpeg</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge" style="background:var(--crm-surface-dim); color:var(--crm-text-secondary); border:1px solid var(--crm-border); font-size:11px;">customer_evidence</span></td>
|
||||
<td style="font-size:13px; color:var(--crm-text-secondary);">2.3 MB</td>
|
||||
<td>
|
||||
<div class="table-meta">
|
||||
<div class="table-avatar table-avatar--green" style="width:24px;height:24px;font-size:10px;">ST</div>
|
||||
Staff User
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-size:13px; color:var(--crm-text-tertiary);">2h ago</td>
|
||||
<td>
|
||||
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
||||
<span class="material-symbols-outlined" style="font-size:18px;">download</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:36px;height:36px;border-radius:var(--crm-radius-sm);background:#dbeafe;display:flex;align-items:center;justify-content:center;">
|
||||
<span class="material-symbols-outlined" style="font-size:20px;color:#2563eb;">description</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:600; color:var(--crm-text-primary);">repair_estimate.pdf</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary);">application/pdf</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge" style="background:var(--crm-surface-dim); color:var(--crm-text-secondary); border:1px solid var(--crm-border); font-size:11px;">general</span></td>
|
||||
<td style="font-size:13px; color:var(--crm-text-secondary);">1.1 MB</td>
|
||||
<td>
|
||||
<div class="table-meta">
|
||||
<div class="table-avatar table-avatar--amber" style="width:24px;height:24px;font-size:10px;">MG</div>
|
||||
Manager User
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-size:13px; color:var(--crm-text-tertiary);">1d ago</td>
|
||||
<td>
|
||||
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
||||
<span class="material-symbols-outlined" style="font-size:18px;">download</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:36px;height:36px;border-radius:var(--crm-radius-sm);background:#ecfdf5;display:flex;align-items:center;justify-content:center;">
|
||||
<span class="material-symbols-outlined" style="font-size:20px;color:#059669;">check_circle</span>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px; font-weight:600; color:var(--crm-text-primary);">proof_fixed.jpg</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary);">image/jpeg</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge" style="background:var(--crm-resolved-bg); color:var(--crm-resolved); border:1px solid var(--crm-resolved-border); font-size:11px;">proof_of_resolution</span></td>
|
||||
<td style="font-size:13px; color:var(--crm-text-secondary);">3.8 MB</td>
|
||||
<td>
|
||||
<div class="table-meta">
|
||||
<div class="table-avatar table-avatar--green" style="width:24px;height:24px;font-size:10px;">ST</div>
|
||||
Staff User
|
||||
</div>
|
||||
</td>
|
||||
<td style="font-size:13px; color:var(--crm-text-tertiary);">3d ago</td>
|
||||
<td>
|
||||
<button class="btn btn--ghost btn--sm" style="padding:4px;">
|
||||
<span class="material-symbols-outlined" style="font-size:18px;">download</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transfer History -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="card-title-icon" style="background:var(--crm-pending-bg); color:var(--crm-pending);">
|
||||
<span class="material-symbols-outlined">swap_horiz</span>
|
||||
</div>
|
||||
Transfer History
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="transfer-log">
|
||||
<div class="transfer-item">
|
||||
<span class="transfer-dept">Kỹ thuật</span>
|
||||
<span class="transfer-arrow material-symbols-outlined">arrow_forward</span>
|
||||
<span class="transfer-dept">CSKH</span>
|
||||
<span style="font-size:13px; color:var(--crm-text-secondary);">— Admin User</span>
|
||||
<div class="transfer-meta">
|
||||
<div>"Đã kiểm tra kỹ thuật, cần CSKH liên hệ"</div>
|
||||
<div style="margin-top:2px;">1 day ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transfer-item">
|
||||
<span class="transfer-dept">CSKH</span>
|
||||
<span class="transfer-arrow material-symbols-outlined">arrow_forward</span>
|
||||
<span class="transfer-dept">Kỹ thuật</span>
|
||||
<span style="font-size:13px; color:var(--crm-text-secondary);">— Manager User</span>
|
||||
<div class="transfer-meta">
|
||||
<div>"Cần kiểm tra kỹ thuật"</div>
|
||||
<div style="margin-top:2px;">2 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
<div class="detail-sidebar">
|
||||
<!-- Actions -->
|
||||
<div class="action-card">
|
||||
<div class="action-card-title">
|
||||
<span class="material-symbols-outlined">bolt</span>
|
||||
Quick Actions
|
||||
</div>
|
||||
<button class="action-btn">
|
||||
<span class="material-symbols-outlined">swap_horiz</span>
|
||||
Transfer Department
|
||||
</button>
|
||||
<button class="action-btn">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Mark as Resolved
|
||||
</button>
|
||||
<button class="action-btn action-btn--danger">
|
||||
<span class="material-symbols-outlined">lock</span>
|
||||
Close Ticket
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Ticket Info -->
|
||||
<div class="action-card">
|
||||
<div class="action-card-title">
|
||||
<span class="material-symbols-outlined">info</span>
|
||||
Ticket Information
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">sync</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Status</div>
|
||||
<div class="info-item-value"><span class="badge badge--pending badge--dot" style="font-size:12px;">Pending</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">apartment</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Department</div>
|
||||
<div class="info-item-value">CSKH</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Assigned To</div>
|
||||
<div class="info-item-value">
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<div class="table-avatar table-avatar--green" style="width:24px;height:24px;font-size:10px;">ST</div>
|
||||
Staff User
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Contract</div>
|
||||
<div class="info-item-value"><span class="badge badge--sale" style="font-size:12px;">Sale</span> Active</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">inbox_stack</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Channel</div>
|
||||
<div class="info-item-value" style="display:flex; align-items:center; gap:6px;">
|
||||
<span class="material-symbols-outlined" style="font-size:16px; color:#0066ff;">chat</span>
|
||||
Zalo
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">warning</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Escalated</div>
|
||||
<div class="info-item-value"><span style="color:var(--crm-escalated); font-weight:600;">Yes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Created</div>
|
||||
<div class="info-item-value">Jan 15, 2026 10:30 AM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-icon">
|
||||
<span class="material-symbols-outlined">update</span>
|
||||
</div>
|
||||
<div class="info-item-content">
|
||||
<div class="info-item-label">Last Updated</div>
|
||||
<div class="info-item-value">Jan 15, 2026 12:45 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Feedbacks -->
|
||||
<div class="action-card">
|
||||
<div class="action-card-title">
|
||||
<span class="material-symbols-outlined">lightbulb</span>
|
||||
Similar Cases
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||||
<a href="#" style="display:block; padding:10px 12px; background:var(--crm-surface-dim); border-radius:var(--crm-radius-sm); border:1px solid var(--crm-border); text-decoration:none; transition:all 0.15s;">
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-primary);">Water leak in kitchen</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary); margin-top:2px;">Sunrise A2 • Resolved • 2 weeks ago</div>
|
||||
</a>
|
||||
<a href="#" style="display:block; padding:10px 12px; background:var(--crm-surface-dim); border-radius:var(--crm-radius-sm); border:1px solid var(--crm-border); text-decoration:none; transition:all 0.15s;">
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-primary);">Ceiling water damage</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary); margin-top:2px;">Green Valley • Closed • 1 month ago</div>
|
||||
</a>
|
||||
<a href="#" style="display:block; padding:10px 12px; background:var(--crm-surface-dim); border-radius:var(--crm-radius-sm); border:1px solid var(--crm-border); text-decoration:none; transition:all 0.15s;">
|
||||
<div style="font-size:13px; font-weight:600; color:var(--crm-primary);">Bathroom pipe burst</div>
|
||||
<div style="font-size:12px; color:var(--crm-text-tertiary); margin-top:2px;">Ocean Tower • Resolved • 3 weeks ago</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user