admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web-client-tpos): redesign Home/NotFound pages, localize Dashboard

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-03-01 06:02:20 +07:00
parent 33e0bab4f7
commit f353f8843e
6 changed files with 471 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Dashboard.razor
View File

@@ -2,6 +2,7 @@
@layout AdminLayout
@inherits AdminBase
@inject PosDataService DataService
@inject Microsoft.Extensions.Localization.IStringLocalizer<Dashboard> L
@using WebClientTpos.Client.Services
@*
@@ -14,20 +15,20 @@
@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
<div class="admin-topbar__left">
<h1 class="admin-topbar__title">Dashboard</h1>
<p class="admin-topbar__subtitle">Tổng quan kinh doanh • @GetTodayFormatted()</p>
<h1 class="admin-topbar__title">@L["Dashboard_Title"]</h1>
<p class="admin-topbar__subtitle">@L["Dashboard_Subtitle"] • @GetTodayFormatted()</p>
</div>
<div class="admin-topbar__right">
<div class="admin-search">
<i data-lucide="search"></i>
<input type="text" placeholder="Tìm kiếm..." @bind="SearchQuery" />
<input type="text" placeholder="@L["Dashboard_Search"]" @bind="SearchQuery" />
</div>
<button class="admin-icon-btn" title="Thông báo">
<i data-lucide="bell"></i>
</button>
<button class="admin-btn-primary" @onclick="@(() => NavigateTo("stores/create"))">
<i data-lucide="plus"></i>
<span>Tạo cửa hàng</span>
<span>@L["Dashboard_CreateStore"]</span>
</button>
</div>
</div>
@@ -45,7 +46,7 @@
</div>
</div>
<div class="admin-kpi-card__value">@_shops.Count</div>
<div class="admin-kpi-card__label">Cửa hàng</div>
<div class="admin-kpi-card__label">@L["Dashboard_KPI_Stores"]</div>
</div>
@* KPI 2: Đang hoạt động *@
@@ -56,7 +57,7 @@
</div>
</div>
<div class="admin-kpi-card__value">@_shops.Count(s => s.Status == "active")</div>
<div class="admin-kpi-card__label">Đang hoạt động</div>
<div class="admin-kpi-card__label">@L["Dashboard_KPI_Active"]</div>
</div>
@* KPI 3: Đang thiết lập *@
@@ -67,7 +68,7 @@
</div>
</div>
<div class="admin-kpi-card__value">@_shops.Count(s => s.Status != "active")</div>
<div class="admin-kpi-card__label">Đang thiết lập</div>
<div class="admin-kpi-card__label">@L["Dashboard_KPI_Setup"]</div>
</div>
@* KPI 4: Ngành hàng *@
@@ -78,7 +79,7 @@
</div>
</div>
<div class="admin-kpi-card__value">@_shops.Select(s => s.Category).Distinct().Count()</div>
<div class="admin-kpi-card__label">Ngành hàng</div>
<div class="admin-kpi-card__label">@L["Dashboard_KPI_Verticals"]</div>
</div>
</div>
@@ -94,7 +95,7 @@
</h3>
@if (_shops.Count > 0)
{
<a href="/admin/stores" class="admin-panel__action">Quản lý tất cả →</a>
<a href="/admin/stores" class="admin-panel__action">@L["Dashboard_ManageAll"] →</a>
}
</div>
<div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
@@ -102,11 +103,11 @@
{
<div style="text-align:center;padding:40px 20px;">
<i data-lucide="store" style="width:48px;height:48px;color:var(--admin-orange-primary);margin-bottom:16px;"></i>
<h3 style="font-size:18px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;">Welcome! Tạo cửa hàng đầu tiên</h3>
<p style="font-size:14px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 20px;">Bắt đầu bằng việc tạo cửa hàng để quản lý kinh doanh của bạn.</p>
<h3 style="font-size:18px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;">@L["Dashboard_WelcomeTitle"]</h3>
<p style="font-size:14px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 20px;">@L["Dashboard_WelcomeSubtitle"]</p>
<a href="/admin/stores/create" class="admin-btn-primary" style="display:inline-flex;align-items:center;gap:8px;">
<i data-lucide="plus" style="width:16px;height:16px;"></i>
Tạo cửa hàng ngay
@L["Dashboard_CreateStoreNow"]
</a>
</div>
}
@@ -127,7 +128,7 @@
</div>
<div class="admin-status-badge admin-status-badge--@(shop.Status == "active" ? "online" : "setup")">
<span class="admin-status-badge__dot"></span>
@(shop.Status == "active" ? "Đang mở" : "Thiết lập")
@(shop.Status == "active" ? L["Dashboard_Status_Open"] : L["Dashboard_Status_Setup"])
</div>
</div>
</a>
@@ -143,23 +144,23 @@
<div class="admin-panel__header">
<h3 class="admin-panel__title">
<i data-lucide="zap" style="color:var(--admin-orange-primary);"></i>
Thao tác nhanh
@L["Dashboard_QuickActions"]
</h3>
</div>
<div class="admin-panel__body" style="display:flex;flex-direction:column;gap:8px;">
<a href="/admin/stores/create" class="admin-quick-action">
<i data-lucide="plus-circle" style="color:#22C55E;width:18px;height:18px;"></i>
<span>Tạo cửa hàng mới</span>
<span>@L["Dashboard_QA_CreateStore"]</span>
<i data-lucide="chevron-right" style="margin-left:auto;width:16px;height:16px;color:var(--admin-text-tertiary);"></i>
</a>
<a href="/admin/system/audit" class="admin-quick-action">
<i data-lucide="settings" style="color:#3B82F6;width:18px;height:18px;"></i>
<span>Cài đặt hệ thống</span>
<span>@L["Dashboard_QA_SystemSettings"]</span>
<i data-lucide="chevron-right" style="margin-left:auto;width:16px;height:16px;color:var(--admin-text-tertiary);"></i>
</a>
<a href="/admin/roles" class="admin-quick-action">
<i data-lucide="shield" style="color:#8B5CF6;width:18px;height:18px;"></i>
<span>Phân quyền</span>
<span>@L["Dashboard_QA_Permissions"]</span>
<i data-lucide="chevron-right" style="margin-left:auto;width:16px;height:16px;color:var(--admin-text-tertiary);"></i>
</a>
</div>
@@ -170,7 +171,7 @@
<div class="admin-panel__header">
<h3 class="admin-panel__title">
<i data-lucide="activity" style="color:#22C55E;"></i>
Trạng thái hệ thống
@L["Dashboard_SystemStatus"]
</h3>
</div>
<div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">

73
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Home.razor
View File

@@ -1,14 +1,71 @@
@*
EN: Home page — branded landing with hero CTA and quick navigation.
VI: Trang chủ — landing page với hero CTA và điều hướng nhanh.
*@
@page "/home"
@page "/"
@layout MainLayout
@inject NavigationManager NavigationManager
@inject Microsoft.Extensions.Localization.IStringLocalizer<Home> L
<PageTitle>GoodGo POS</PageTitle>
<PageTitle>@L["AppName"] — @L["HeroHeadline"]</PageTitle>
<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;padding:40px;text-align:center;">
<h1 style="font-size:48px;font-weight:800;color:#FF5C00;margin-bottom:16px;">GoodGo POS</h1>
<p style="font-size:20px;color:#fff;margin-bottom:8px;">Hệ thống quản lý POS đa ngành</p>
<p style="font-size:15px;color:#aaa;margin-bottom:40px;">Café · Nhà hàng · Karaoke · Spa · Bán lẻ</p>
<div style="display:flex;gap:16px;">
<a href="/register" style="padding:14px 32px;background:#FF5C00;color:#fff;border-radius:12px;text-decoration:none;font-weight:700;">Dùng thử miễn phí</a>
<a href="/login" style="padding:14px 32px;border:2px solid #333;color:#fff;border-radius:12px;text-decoration:none;font-weight:700;">Đăng nhập</a>
<div class="home-hero">
<div class="home-hero__badge">@L["HeroBadge"]</div>
<h1 class="home-hero__title">@L["HeroHeadline"]</h1>
<p class="home-hero__subtitle">@L["HeroSubtext"]</p>
<div class="home-hero__actions">
<a href="/auth/register" class="home-hero__btn home-hero__btn--primary">
<i data-lucide="zap"></i>
@L["HeroCTA_Primary"]
</a>
<a href="/auth/login" class="home-hero__btn home-hero__btn--secondary">
<i data-lucide="log-in"></i>
@L["Nav_Login"]
</a>
</div>
@* Trust Badges *@
<div class="home-trust">
<span class="home-trust__label">@L["Trust_Label"]</span>
<div class="home-trust__stats">
<span class="home-trust__stat">@L["Trust_Stat1"]</span>
<span class="home-trust__divider">•</span>
<span class="home-trust__stat">@L["Trust_Stat2"]</span>
</div>
</div>
</div>
@* Verticals Showcase *@
<div class="home-verticals">
<div class="home-verticals__grid">
<a href="/auth/register" class="home-vertical-card">
<i data-lucide="coffee"></i>
<span>Café</span>
</a>
<a href="/auth/register" class="home-vertical-card">
<i data-lucide="utensils-crossed"></i>
<span>@L["Industry_Restaurant_Title"]</span>
</a>
<a href="/auth/register" class="home-vertical-card">
<i data-lucide="mic"></i>
<span>@L["Industry_Karaoke_Title"]</span>
</a>
<a href="/auth/register" class="home-vertical-card">
<i data-lucide="sparkles"></i>
<span>@L["Industry_Spa_Title"]</span>
</a>
<a href="/auth/register" class="home-vertical-card">
<i data-lucide="shopping-bag"></i>
<span>@L["Vertical_Retail"]</span>
</a>
</div>
</div>
@code {
protected override void OnInitialized()
{
// EN: Redirect authenticated users to Admin dashboard
// VI: Chuyển hướng người dùng đã xác thực đến Admin dashboard
}
}

29
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/NotFound.razor
View File

@@ -1,5 +1,28 @@
@page "/not-found"
@*
EN: 404 Not Found page — branded error page with navigation options.
VI: Trang 404 — trang lỗi thương hiệu với các tùy chọn điều hướng.
*@
@page "/not-found"
@layout MainLayout
@inject Microsoft.Extensions.Localization.IStringLocalizer<NotFound> L
<h3>Not Found</h3>
<p>Sorry, the content you are looking for does not exist.</p>
<PageTitle>404 — @L["AppName"]</PageTitle>
<div class="notfound-page">
<div class="notfound-page__icon">
<i data-lucide="map-pin-off"></i>
</div>
<div class="notfound-page__code">404</div>
<h1 class="notfound-page__title">@L["NotFound_Title"]</h1>
<p class="notfound-page__subtitle">@L["NotFound_Subtitle"]</p>
<div class="notfound-page__actions">
<a href="/" class="notfound-page__btn notfound-page__btn--primary">
<i data-lucide="home"></i>
@L["NotFound_GoHome"]
</a>
<a href="/auth/login" class="notfound-page__btn notfound-page__btn--secondary">
<i data-lucide="log-in"></i>
@L["Nav_Login"]
</a>
</div>
</div>

313
apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/css/app.css
View File

@@ -1668,4 +1668,317 @@ a {
padding-left: var(--space-4);
padding-right: var(--space-4);
}
}
/* ═════════════════════════════════════════════════════════════════════════
HOME PAGE — Hero, Trust, Verticals
═════════════════════════════════════════════════════════════════════════ */
.home-hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 70vh;
padding: var(--space-16) var(--space-6) var(--space-12);
}
.home-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--accent-glow);
border: 1px solid rgba(255, 92, 0, 0.25);
color: var(--accent-light);
padding: var(--space-2) var(--space-5);
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: var(--space-8);
letter-spacing: 0.03em;
animation: fadeInUp 0.6s ease-out;
}
.home-hero__title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.08;
margin-bottom: var(--space-6);
letter-spacing: -0.03em;
background: linear-gradient(180deg, #FFFFFF 30%, #ADADB0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 800px;
animation: fadeInUp 0.6s ease-out 0.1s both;
}
.home-hero__subtitle {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto var(--space-10);
line-height: 1.7;
animation: fadeInUp 0.6s ease-out 0.2s both;
}
.home-hero__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-12);
animation: fadeInUp 0.6s ease-out 0.3s both;
}
.home-hero__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-8);
border-radius: var(--border-radius-xl);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: all 0.25s ease;
}
.home-hero__btn i {
width: 18px;
height: 18px;
}
.home-hero__btn--primary {
background: var(--brand-gradient);
color: #FFFFFF;
box-shadow: 0 4px 24px var(--accent-glow-strong);
}
.home-hero__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px var(--accent-glow-strong);
}
.home-hero__btn--secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-default);
}
.home-hero__btn--secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-strong);
}
/* Trust badges */
.home-trust {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
animation: fadeInUp 0.6s ease-out 0.4s both;
}
.home-trust__label {
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.home-trust__stats {
display: flex;
align-items: center;
gap: var(--space-4);
}
.home-trust__stat {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
}
.home-trust__divider {
color: var(--text-disabled);
}
/* Verticals showcase */
.home-verticals {
padding: var(--space-12) var(--space-6) var(--space-16);
max-width: 900px;
margin: 0 auto;
}
.home-verticals__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-4);
}
.home-vertical-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--border-radius-xl);
text-decoration: none;
color: var(--text-secondary);
font-size: 0.8125rem;
font-weight: 600;
transition: all 0.25s ease;
}
.home-vertical-card i {
width: 28px;
height: 28px;
color: var(--accent-primary);
}
.home-vertical-card:hover {
border-color: var(--accent-primary);
background: var(--accent-glow);
color: var(--text-primary);
transform: translateY(-2px);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.home-hero__title {
font-size: 2.25rem;
}
.home-verticals__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.home-verticals__grid {
grid-template-columns: repeat(2, 1fr);
}
.home-hero__actions {
flex-direction: column;
width: 100%;
max-width: 320px;
}
.home-hero__btn {
width: 100%;
justify-content: center;
}
}
/* ═════════════════════════════════════════════════════════════════════════
NOT FOUND (404) PAGE
═════════════════════════════════════════════════════════════════════════ */
.notfound-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 70vh;
padding: var(--space-16) var(--space-6);
}
.notfound-page__icon {
width: 80px;
height: 80px;
border-radius: var(--border-radius-2xl);
background: var(--accent-glow);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-6);
}
.notfound-page__icon i {
width: 36px;
height: 36px;
color: var(--accent-primary);
}
.notfound-page__code {
font-size: 5rem;
font-weight: 800;
background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--space-4);
}
.notfound-page__title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--space-3);
}
.notfound-page__subtitle {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: var(--space-8);
max-width: 400px;
}
.notfound-page__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
}
.notfound-page__btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--border-radius-lg);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: all 0.25s ease;
}
.notfound-page__btn i {
width: 16px;
height: 16px;
}
.notfound-page__btn--primary {
background: var(--accent-primary);
color: #FFFFFF;
}
.notfound-page__btn--primary:hover {
background: var(--action-primary-bg-hover);
transform: translateY(-1px);
box-shadow: 0 4px 20px var(--accent-glow-strong);
}
.notfound-page__btn--secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-default);
}
.notfound-page__btn--secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--border-strong);
}

25
apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/en-US.json
View File

@@ -399,5 +399,28 @@
"Status_Active": "Open",
"Status_Setup": "Setting up",
"Status_Paused": "Paused",
"Status_Closed": "Closed"
"Status_Closed": "Closed",
"NotFound_Title": "Page not found",
"NotFound_Subtitle": "The page you're looking for doesn't exist or has been moved.",
"NotFound_GoHome": "Go to Home",
"Dashboard_Title": "Dashboard",
"Dashboard_Subtitle": "Business Overview",
"Dashboard_Search": "Search...",
"Dashboard_CreateStore": "Create Store",
"Dashboard_KPI_Stores": "Stores",
"Dashboard_KPI_Active": "Active",
"Dashboard_KPI_Setup": "Setting up",
"Dashboard_KPI_Verticals": "Verticals",
"Dashboard_YourStores": "Your Stores",
"Dashboard_ManageAll": "Manage All",
"Dashboard_WelcomeTitle": "Welcome! Create your first store",
"Dashboard_WelcomeSubtitle": "Get started by creating a store to manage your business.",
"Dashboard_CreateStoreNow": "Create Store Now",
"Dashboard_QuickActions": "Quick Actions",
"Dashboard_QA_CreateStore": "Create new store",
"Dashboard_QA_SystemSettings": "System Settings",
"Dashboard_QA_Permissions": "Permissions",
"Dashboard_SystemStatus": "System Status",
"Dashboard_Status_Open": "Open",
"Dashboard_Status_Setup": "Setting up"
}

25
apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/locales/vi-VN.json
View File

@@ -399,5 +399,28 @@
"Status_Active": "Đang mở",
"Status_Setup": "Thiết lập",
"Status_Paused": "Tạm dừng",
"Status_Closed": "Đã đóng"
"Status_Closed": "Đã đóng",
"NotFound_Title": "Không tìm thấy trang",
"NotFound_Subtitle": "Trang bạn tìm kiếm không tồn tại hoặc đã được di chuyển.",
"NotFound_GoHome": "Về trang chủ",
"Dashboard_Title": "Dashboard",
"Dashboard_Subtitle": "Tổng quan kinh doanh",
"Dashboard_Search": "Tìm kiếm...",
"Dashboard_CreateStore": "Tạo cửa hàng",
"Dashboard_KPI_Stores": "Cửa hàng",
"Dashboard_KPI_Active": "Đang hoạt động",
"Dashboard_KPI_Setup": "Đang thiết lập",
"Dashboard_KPI_Verticals": "Ngành hàng",
"Dashboard_YourStores": "Cửa hàng của bạn",
"Dashboard_ManageAll": "Quản lý tất cả",
"Dashboard_WelcomeTitle": "Welcome! Tạo cửa hàng đầu tiên",
"Dashboard_WelcomeSubtitle": "Bắt đầu bằng việc tạo cửa hàng để quản lý kinh doanh của bạn.",
"Dashboard_CreateStoreNow": "Tạo cửa hàng ngay",
"Dashboard_QuickActions": "Thao tác nhanh",
"Dashboard_QA_CreateStore": "Tạo cửa hàng mới",
"Dashboard_QA_SystemSettings": "Cài đặt hệ thống",
"Dashboard_QA_Permissions": "Phân quyền",
"Dashboard_SystemStatus": "Trạng thái hệ thống",
"Dashboard_Status_Open": "Đang mở",
"Dashboard_Status_Setup": "Thiết lập"
}