phuongtc/minicrm
0
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add i18n support for Vietnamese and English
Some checks failed
Tests / PHP 8.3 (push) Has been cancelled
Details
Tests / PHP 8.4 (push) Has been cancelled
Details
Tests / PHP 8.5 (push) Has been cancelled
Details

Browse Source
This commit is contained in:
phuongtc
2026-05-04 10:40:39 +00:00
parent 3a8db5cae6
commit 8c6b71cb8a
64 changed files with 4652 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
webappUI/dashboard.html Normal file
View File

@@ -0,0 +1,417 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard — 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 active" 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" 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">
<!-- Top Bar -->
<header class="topbar">
<div class="topbar-left">
<div class="breadcrumb">
<a href="#">Home</a>
<span class="breadcrumb-sep material-symbols-outlined">chevron_right</span>
<span class="breadcrumb-current">Dashboard</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>
<!-- Page Content -->
<div class="page-content">
<div class="page-header">
<h1 class="page-title">Dashboard</h1>
<p class="page-subtitle">Overview of customer care operations</p>
</div>
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card stat-card--success">
<div class="stat-card-header">
<div class="stat-card-icon">
<span class="material-symbols-outlined">check_circle</span>
</div>
<div class="stat-card-trend stat-card-trend--up">
<span class="material-symbols-outlined" style="font-size:14px">trending_up</span>
+12%
</div>
</div>
<div class="stat-card-value">42</div>
<div class="stat-card-label">Resolved Tickets</div>
</div>
<div class="stat-card stat-card--info">
<div class="stat-card-header">
<div class="stat-card-icon">
<span class="material-symbols-outlined">schedule</span>
</div>
<div class="stat-card-trend stat-card-trend--down">
<span class="material-symbols-outlined" style="font-size:14px">trending_down</span>
-8%
</div>
</div>
<div class="stat-card-value">2.5h</div>
<div class="stat-card-label">Avg Processing Time</div>
</div>
<div class="stat-card stat-card--warning">
<div class="stat-card-header">
<div class="stat-card-icon">
<span class="material-symbols-outlined">pending</span>
</div>
<div class="stat-card-trend stat-card-trend--up">
<span class="material-symbols-outlined" style="font-size:14px">trending_up</span>
+3
</div>
</div>
<div class="stat-card-value">8</div>
<div class="stat-card-label">Pending Tickets</div>
</div>
<div class="stat-card stat-card--danger">
<div class="stat-card-header">
<div class="stat-card-icon">
<span class="material-symbols-outlined">warning</span>
</div>
</div>
<div class="stat-card-value">3</div>
<div class="stat-card-label">Escalated</div>
</div>
</div>
<!-- 2 Column Layout -->
<div style="display:grid; grid-template-columns: 1.2fr 1fr; gap:24px;">
<!-- Chart -->
<div class="card">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">
<span class="material-symbols-outlined">bar_chart</span>
</div>
Avg Processing Time by Handler
</div>
<div class="btn-group">
<button class="btn btn--ghost btn--sm">Week</button>
<button class="btn btn--secondary btn--sm">Month</button>
</div>
</div>
<div class="card-body">
<div class="chart-placeholder" style="height:240px; padding-bottom:40px;">
<div class="chart-bar" style="height:65%; background: linear-gradient(180deg, #3b82f6, #60a5fa);">
<span class="chart-bar-value">45m</span>
<span class="chart-bar-label">Staff A</span>
</div>
<div class="chart-bar" style="height:85%; background: linear-gradient(180deg, #3b82f6, #60a5fa);">
<span class="chart-bar-value">62m</span>
<span class="chart-bar-label">Staff B</span>
</div>
<div class="chart-bar" style="height:45%; background: linear-gradient(180deg, #3b82f6, #60a5fa);">
<span class="chart-bar-value">31m</span>
<span class="chart-bar-label">Staff C</span>
</div>
<div class="chart-bar" style="height:70%; background: linear-gradient(180deg, #3b82f6, #60a5fa);">
<span class="chart-bar-value">52m</span>
<span class="chart-bar-label">Staff D</span>
</div>
<div class="chart-bar" style="height:55%; background: linear-gradient(180deg, #3b82f6, #60a5fa);">
<span class="chart-bar-value">38m</span>
<span class="chart-bar-label">Staff E</span>
</div>
<div class="chart-bar" style="height:90%; background: linear-gradient(180deg, #f59e0b, #fbbf24);">
<span class="chart-bar-value">68m</span>
<span class="chart-bar-label">Staff F</span>
</div>
</div>
</div>
</div>
<!-- Resolved Awaiting Closure -->
<div class="card">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon" style="background:var(--crm-resolved-bg); color:var(--crm-resolved);">
<span class="material-symbols-outlined">task_alt</span>
</div>
Resolved — Awaiting Closure
</div>
<span class="badge badge--resolved badge--dot">5 tickets</span>
</div>
<div class="card-body card-body--compact">
<table>
<thead>
<tr>
<th>Ticket</th>
<th>Customer</th>
<th>Dept</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="feedback-detail.html" class="table-link">#12 Leak issue</a></td>
<td>Nguyễn A</td>
<td><span class="badge badge--processing" style="font-size:11px;">CSKH</span></td>
<td class="text-right"><span class="material-symbols-outlined" style="font-size:18px;color:var(--crm-text-tertiary)">chevron_right</span></td>
</tr>
<tr>
<td><a href="#" class="table-link">#8 AC broken</a></td>
<td>Trần B</td>
<td><span class="badge badge--processing" style="font-size:11px;">Kỹ thuật</span></td>
<td class="text-right"><span class="material-symbols-outlined" style="font-size:18px;color:var(--crm-text-tertiary)">chevron_right</span></td>
</tr>
<tr>
<td><a href="#" class="table-link">#5 Door fix</a></td>
<td>Lê C</td>
<td><span class="badge badge--processing" style="font-size:11px;">CSKH</span></td>
<td class="text-right"><span class="material-symbols-outlined" style="font-size:18px;color:var(--crm-text-tertiary)">chevron_right</span></td>
</tr>
<tr>
<td><a href="#" class="table-link">#3 Paint crack</a></td>
<td>Phạm D</td>
<td><span class="badge badge--processing" style="font-size:11px;">Kỹ thuật</span></td>
<td class="text-right"><span class="material-symbols-outlined" style="font-size:18px;color:var(--crm-text-tertiary)">chevron_right</span></td>
</tr>
<tr>
<td><a href="#" class="table-link">#1 Window leak</a></td>
<td>Hoàng E</td>
<td><span class="badge badge--processing" style="font-size:11px;">CSKH</span></td>
<td class="text-right"><span class="material-symbols-outlined" style="font-size:18px;color:var(--crm-text-tertiary)">chevron_right</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Recent Feedbacks -->
<div class="card mt-6">
<div class="card-header">
<div class="card-title">
<div class="card-title-icon">
<span class="material-symbols-outlined">history</span>
</div>
Recent Feedbacks
</div>
<a href="feedback-list.html" class="btn btn--secondary btn--sm">
View All
<span class="material-symbols-outlined" style="font-size:16px">arrow_forward</span>
</a>
</div>
<div class="card-body card-body--compact">
<div class="table-container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Customer</th>
<th>Product</th>
<th>Contract</th>
<th>Channel</th>
<th>Status</th>
<th>Department</th>
<th>Assigned To</th>
<th>Created</th>
</tr>
</thead>
<tbody>
<tr>
<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;"><span class="material-symbols-outlined" style="font-size:16px;color:#0066ff">chat</span> Zalo</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 User
</div>
</td>
<td style="color:var(--crm-text-tertiary); font-size:13px;">2 hours ago</td>
</tr>
<tr>
<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;"><span class="material-symbols-outlined" style="font-size:16px;color:#ea4335">mail</span> Email</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 User
</div>
</td>
<td style="color:var(--crm-text-tertiary); font-size:13px;">5 hours ago</td>
</tr>
<tr>
<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;"><span class="material-symbols-outlined" style="font-size:16px;color:#34a853">phone</span> Phone</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 User
</div>
</td>
<td style="color:var(--crm-text-tertiary); font-size:13px;">1 day ago</td>
</tr>
<tr>
<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;"><span class="material-symbols-outlined" style="font-size:16px;color:#6b7280">description</span> Document</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 User
</div>
</td>
<td style="color:var(--crm-text-tertiary); font-size:13px;">3 days ago</td>
</tr>
<tr>
<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;"><span class="material-symbols-outlined" style="font-size:16px;color:#9c27b0">person</span> In Person</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 User
</div>
</td>
<td style="color:var(--crm-text-tertiary); font-size:13px;">1 week ago</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

602
webappUI/feedback-detail.html Normal file
View 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>

429
webappUI/feedback-list.html Normal file
View File

@@ -0,0 +1,429 @@
<!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>

127
webappUI/login.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login — AfterSales CRM</title>
<link rel="stylesheet" href="shared.css">
</head>
<body>
<div class="login-layout">
<!-- Left Panel -->
<div class="login-left">
<div class="login-left-content">
<div class="login-left-icon">
<span class="material-symbols-outlined">support_agent</span>
</div>
<h1>AfterSales CRM</h1>
<p>Real-estate after-sales customer care system. Manage feedbacks, track tickets, and deliver exceptional service.</p>
<div style="margin-top:48px; display:flex; gap:32px; justify-content:center;">
<div style="text-align:center;">
<div style="font-size:32px; font-weight:800; font-family:var(--font-heading);">3,658</div>
<div style="font-size:13px; opacity:0.8; margin-top:4px;">Records Imported</div>
</div>
<div style="text-align:center;">
<div style="font-size:32px; font-weight:800; font-family:var(--font-heading);">4</div>
<div style="font-size:13px; opacity:0.8; margin-top:4px;">Departments</div>
</div>
<div style="text-align:center;">
<div style="font-size:32px; font-weight:800; font-family:var(--font-heading);">8</div>
<div style="font-size:13px; opacity:0.8; margin-top:4px;">Tests Passing</div>
</div>
</div>
<div style="margin-top:48px; padding:16px 24px; background:rgba(255,255,255,0.15); border-radius:var(--crm-radius-lg); backdrop-filter:blur(10px);">
<div style="display:flex; align-items:center; gap:12px; margin-bottom:12px;">
<span class="material-symbols-outlined" style="font-size:20px;">format_quote</span>
<span style="font-size:13px; font-weight:600;">Customer Feedback</span>
</div>
<p style="font-size:14px; line-height:1.6; opacity:0.9; font-style:italic;">
"The support team resolved my issue within 24 hours. Excellent service and very professional follow-up."
</p>
<div style="display:flex; align-items:center; gap:8px; margin-top:12px;">
<div style="width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;">NA</div>
<div>
<div style="font-size:13px; font-weight:600;">Nguyễn A</div>
<div style="font-size:11px; opacity:0.7;">Sunrise A1 Resident</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Panel - Login Form -->
<div class="login-right">
<div class="login-form-container">
<div class="login-form-header">
<h2>Welcome back</h2>
<p>Sign in to your account to continue</p>
</div>
<form class="login-form" onsubmit="return false;">
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-input" placeholder="Enter your email" value="admin@minicrm.local">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<div style="position:relative;">
<input type="password" class="form-input" placeholder="Enter your password" value="password" style="padding-right:44px;">
<button type="button" style="position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--crm-text-tertiary); padding:4px;">
<span class="material-symbols-outlined" style="font-size:20px;">visibility_off</span>
</button>
</div>
</div>
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
<label class="form-toggle">
<div class="toggle-switch active"></div>
<span class="toggle-label" style="font-size:13px;">Remember me</span>
</label>
<a href="#" style="font-size:13px; font-weight:600; color:var(--crm-primary); text-decoration:none;">Forgot password?</a>
</div>
<button type="submit" class="btn btn--primary btn--lg" style="width:100%;">
Sign In
</button>
</form>
<div class="login-divider">or continue with</div>
<div class="login-demo">
<div class="login-demo-title">Demo Accounts</div>
<div class="login-demo-accounts">
<div class="login-demo-account">
<div>
<div class="login-demo-role">Admin</div>
<div class="login-demo-email">admin@minicrm.local</div>
</div>
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-text-tertiary);">arrow_forward</span>
</div>
<div class="login-demo-account">
<div>
<div class="login-demo-role">Manager</div>
<div class="login-demo-email">manager@minicrm.local</div>
</div>
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-text-tertiary);">arrow_forward</span>
</div>
<div class="login-demo-account">
<div>
<div class="login-demo-role">Staff</div>
<div class="login-demo-email">staff@minicrm.local</div>
</div>
<span class="material-symbols-outlined" style="font-size:18px; color:var(--crm-text-tertiary);">arrow_forward</span>
</div>
</div>
</div>
<div style="text-align:center; margin-top:24px; font-size:12px; color:var(--crm-text-tertiary);">
Laravel 13.6 • Filament 5.6 • Spatie RBAC
</div>
</div>
</div>
</div>
</body>
</html>

1363
webappUI/shared.css Normal file
View File

File diff suppressed because it is too large Load Diff