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>