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

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>