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

feat(tpos): add landing page, login selector, AuthLayout, and Spa store type

Browse Source 
- Create Layout/AuthLayout.razor with nav bar for auth pages
- Replace Pages/Home.razor with branded landing page (hero + 4 feature cards)
- Create Pages/Auth/LoginSelect.razor with 4 role-based login cards
- Add Spa & Beauty store type to OnboardingStore.razor onboarding flow

Co-authored-by: Velik <hongochai10@users.noreply.github.com>
This commit is contained in:
Cursor Agent
2026-02-26 22:07:59 +00:00
parent 9122b880ff
commit d87315ba49
4 changed files with 152 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/AuthLayout.razor Normal file
View File

@@ -0,0 +1,49 @@
@inherits LayoutComponentBase
@inject IJSRuntime JS
<MudThemeProvider IsDarkMode="true" Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<nav class="tpos-navbar">
<div class="tpos-navbar-inner">
<a href="/" class="tpos-logo">aPOS</a>
<div class="tpos-nav-links">
<a href="/#features" class="tpos-nav-link">Tính năng</a>
<a href="/#pricing" class="tpos-nav-link">Bảng giá</a>
<a href="/auth/login" class="tpos-nav-link">Đăng nhập</a>
<a href="/register" class="btn-accent">Dùng thử</a>
</div>
</div>
</nav>
<MudLayout>
<MudMainContent Style="padding-top: 0;">
@Body
</MudMainContent>
</MudLayout>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
}
private MudTheme _theme = new()
{
PaletteDark = new PaletteDark()
{
Primary = "#FF5C00",
PrimaryContrastText = "#FFFFFF",
AppbarBackground = "rgba(10,10,11,0.85)",
AppbarText = "#FFFFFF",
Background = "#0A0A0B",
Surface = "#111113",
TextPrimary = "#FFFFFF",
TextSecondary = "#ADADB0",
ActionDefault = "#FFFFFF",
LinesDefault = "#1F1F23"
}
};
}

1
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStore.razor
View File

@@ -116,6 +116,7 @@
new StoreType("cafe", "Café", "coffee", "#FF5C00", "Quán cà phê, trà sữa"),
new StoreType("restaurant", "Nhà hàng", "utensils", "#3B82F6", "Nhà hàng, quán ăn"),
new StoreType("karaoke", "Karaoke", "mic", "#8B5CF6", "Karaoke, giải trí"),
new StoreType("spa", "Spa & Beauty", "sparkles", "#EC4899", "Spa, thẩm mỹ, nail"),
new StoreType("retail", "Bán lẻ", "shopping-bag", "#22C55E", "Cửa hàng bán lẻ"),
};

57
apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Auth/LoginSelect.razor Normal file
View File

@@ -0,0 +1,57 @@
@page "/auth/login"
@layout AuthLayout
@inject NavigationManager Navigation
@inject IJSRuntime JS
<PageTitle>Chọn loại tài khoản — GoodGo POS</PageTitle>
<div style="min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 60px;">
<h1 style="font-size:28px;font-weight:800;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;text-align:center;">
Chọn loại tài khoản
</h1>
<p style="font-size:15px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 40px;text-align:center;">
Đăng nhập với vai trò phù hợp
</p>
<div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;max-width:560px;width:100%;">
@foreach (var role in _roles)
{
<div @onclick="() => Navigation.NavigateTo(role.Href)"
style="background:var(--pos-bg-elevated, #18181B);border:2px solid var(--pos-border-default, #2A2A2E);border-radius:var(--pos-radius, 12px);padding:28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;transition:border-color 0.2s, transform 0.15s;"
onmouseover="this.style.borderColor='@role.Color';this.style.transform='translateY(-2px)';"
onmouseout="this.style.borderColor='var(--pos-border-default, #2A2A2E)';this.style.transform='none';">
<div style="width:48px;height:48px;border-radius:12px;background:@(role.Color)18;display:flex;align-items:center;justify-content:center;">
<i data-lucide="@role.Icon" style="width:24px;height:24px;color:@role.Color;"></i>
</div>
<h3 style="font-size:15px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0;">@role.Title</h3>
<p style="font-size:12px;color:var(--pos-text-tertiary, #ADADB0);margin:0;line-height:1.4;">@role.Description</p>
</div>
}
</div>
<p style="margin-top:32px;font-size:14px;color:var(--pos-text-tertiary, #ADADB0);">
Chưa có tài khoản?
<a href="/register" style="color:var(--pos-orange-primary, #FF5C00);text-decoration:none;font-weight:600;">Đăng ký ngay</a>
</p>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
}
}
private record RoleCard(string Title, string Href, string Icon, string Color, string Description);
private readonly RoleCard[] _roles =
[
new("Chủ doanh nghiệp", "/auth/login/admin", "building", "#3B82F6", "Quản lý toàn bộ hệ thống, cửa hàng, nhân viên"),
new("Quản lý chi nhánh", "/auth/login/branch", "store", "#8B5CF6", "Quản lý chi nhánh, ca làm việc, báo cáo"),
new("Nhân viên", "/auth/login/staff", "user-check", "#22C55E", "Thu ngân, barista, phục vụ, bếp"),
new("Khách hàng", "/auth/login/customer", "heart", "#EC4899", "Tích điểm, ưu đãi, lịch sử mua hàng"),
];
}

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

@@ -1,341 +1,80 @@
@page "/"
@page "/{culture}"
@inject IStringLocalizer<Home> L
@page "/"
@layout AuthLayout
@inject NavigationManager Navigation
@inject IJSRuntime JS
<PageTitle>aPOS - @L["HeroHeadline"]</PageTitle>
<PageTitle>GoodGo POS — Hệ thống quản lý POS đa ngành</PageTitle>
<!-- ═══════════════════════════════════════════════════════════════════════
1. HERO SECTION
HERO SECTION
═══════════════════════════════════════════════════════════════════════ -->
<section class="hero-section">
<div class="hero-badge">
<span class="hero-badge-dot"></span>
@L["HeroBadge"]
</div>
<section style="width:100%;min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 60px;background:var(--pos-bg-elevated, #111113);text-align:center;">
<h1 class="hero-headline">
@L["HeroHeadline"]
<h1 style="font-size:48px;font-weight:800;margin:0 0 16px;color:var(--pos-text-primary, #FFFFFF);">
<span style="color:var(--pos-orange-primary, #FF5C00);">GoodGo</span> POS
</h1>
<p class="hero-subtext">
@L["HeroSubtext"]
<p style="font-size:22px;font-weight:600;color:var(--pos-text-primary, #FFFFFF);margin:0 0 8px;">
Hệ thống quản lý POS đa ngành
</p>
<div class="hero-actions">
<a href="#pricing" class="btn-accent btn-accent-lg">
<i data-lucide="arrow-right"></i>
@L["HeroCTA_Primary"]
</a>
<a href="#features" class="btn-outline btn-outline-lg">
<i data-lucide="play"></i>
@L["HeroCTA_Secondary"]
</a>
</div>
<p style="font-size:16px;color:var(--pos-text-tertiary, #ADADB0);margin:0 0 40px;max-width:560px;">
Giải pháp toàn diện cho Café, Nhà hàng, Karaoke, Spa &amp; Bán lẻ
</p>
<div class="hero-mockup">
<img src="/images/home/pos-dashboard.png" alt="@L["HeroMockup_Alt"]" class="hero-mockup-img" />
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;">
<button @onclick='() => Navigation.NavigateTo("/register")'
style="padding:14px 32px;font-size:16px;font-weight:700;border:none;border-radius:var(--pos-radius, 12px);background:var(--pos-orange-primary, #FF5C00);color:#FFF;cursor:pointer;">
Dùng thử miễn phí
</button>
<button @onclick='() => Navigation.NavigateTo("/auth/login")'
style="padding:14px 32px;font-size:16px;font-weight:700;border:2px solid var(--pos-border-default, #2A2A2E);border-radius:var(--pos-radius, 12px);background:transparent;color:var(--pos-text-primary, #FFFFFF);cursor:pointer;">
Đăng nhập
</button>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
2. TRUST SECTION
FEATURE CARDS
═══════════════════════════════════════════════════════════════════════ -->
<section class="trust-section">
<div class="container">
<div class="trust-stats">
<span class="trust-label">@L["Trust_Label"]</span>
<span class="trust-divider"></span>
<span class="trust-stat">@L["Trust_Stat1"]</span>
<span class="trust-divider"></span>
<span class="trust-stat">@L["Trust_Stat2"]</span>
</div>
<section style="width:100%;padding:60px 24px;background:var(--pos-bg-elevated, #111113);">
<div style="max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;">
@foreach (var card in _featureCards)
{
<div style="background:var(--pos-bg-elevated, #18181B);border:1px solid var(--pos-border-default, #2A2A2E);border-radius:var(--pos-radius, 12px);padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;">
<i data-lucide="@card.Icon" style="width:32px;height:32px;color:var(--pos-orange-primary, #FF5C00);"></i>
<h3 style="font-size:16px;font-weight:700;color:var(--pos-text-primary, #FFFFFF);margin:0;">@card.Title</h3>
<p style="font-size:13px;color:var(--pos-text-tertiary, #ADADB0);margin:0;">@card.Description</p>
</div>
}
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
3. FEATURES SECTION
FOOTER
═══════════════════════════════════════════════════════════════════════ -->
<section id="features" class="tpos-section">
<div class="container">
<div class="tpos-section-header">
<div class="tpos-badge">@L["Features_Badge"]</div>
<h2 class="tpos-section-title">@L["Features_Title"]</h2>
<p class="tpos-section-desc">@L["Features_Desc"]</p>
</div>
<div class="tpos-feature-grid">
@foreach (var f in _features)
{
<div class="tpos-feature-card">
<div class="tpos-feature-icon-bg" style="background: @f.IconBg;">
<i data-lucide="@L[f.Icon]" style="color: @f.IconColor;"></i>
</div>
<h3 class="tpos-feature-title">@L[f.Title]</h3>
<p class="tpos-feature-desc">@L[f.Desc]</p>
</div>
}
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
4. INDUSTRIES SECTION
═══════════════════════════════════════════════════════════════════════ -->
<section id="industries" class="tpos-section" style="background: var(--bg-surface);">
<div class="container">
<div class="tpos-section-header">
<div class="tpos-badge">@L["Industries_Badge"]</div>
<h2 class="tpos-section-title">@L["Industries_Title"]</h2>
<p class="tpos-section-desc">@L["Industries_Desc"]</p>
</div>
<div class="tpos-industry-grid">
@foreach (var ind in _industries)
{
<div class="tpos-industry-card">
<div class="tpos-industry-img">
<img src="@ind.Image" alt="@L[ind.Title]" />
</div>
<div class="tpos-industry-content">
<h3 class="tpos-industry-title">@L[ind.Title]</h3>
<p class="tpos-industry-desc">@L[ind.Desc]</p>
<div class="tpos-chips">
@foreach (var chip in L[ind.Chips].Value.Split(','))
{
<span class="tpos-chip">✦ @chip.Trim()</span>
}
</div>
</div>
</div>
}
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
5. ONBOARDING STEPS
═══════════════════════════════════════════════════════════════════════ -->
<section class="tpos-section">
<div class="container">
<div class="tpos-section-header">
<div class="tpos-badge">@L["Steps_Badge"]</div>
<h2 class="tpos-section-title">@L["Steps_Title"]</h2>
</div>
<div class="tpos-steps">
<div class="tpos-step">
<div class="tpos-step-num">1</div>
<h3 class="tpos-step-title">@L["Step1_Title"]</h3>
<p class="tpos-step-desc">@L["Step1_Desc"]</p>
</div>
<div class="tpos-step">
<div class="tpos-step-num">2</div>
<h3 class="tpos-step-title">@L["Step2_Title"]</h3>
<p class="tpos-step-desc">@L["Step2_Desc"]</p>
</div>
<div class="tpos-step">
<div class="tpos-step-num">3</div>
<h3 class="tpos-step-title">@L["Step3_Title"]</h3>
<p class="tpos-step-desc">@L["Step3_Desc"]</p>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
6. PRICING SECTION
═══════════════════════════════════════════════════════════════════════ -->
<section id="pricing" class="tpos-section" style="background: var(--bg-surface);">
<div class="container">
<div class="tpos-section-header">
<div class="tpos-badge">@L["Pricing_Badge"]</div>
<h2 class="tpos-section-title">@L["Pricing_Title"]</h2>
<p class="tpos-section-desc">@L["Pricing_Desc"]</p>
</div>
<div class="tpos-pricing-grid">
<!-- Starter Plan -->
<div class="tpos-pricing-card">
<div class="tpos-pricing-name">@L["Plan_Starter_Name"]</div>
<div class="tpos-pricing-price">
<span class="tpos-pricing-amount">@L["Plan_Starter_Price"]</span>
<span class="tpos-pricing-period">@L["Plan_Starter_Period"]</span>
</div>
<p class="tpos-pricing-desc">@L["Plan_Starter_Desc"]</p>
<hr class="tpos-pricing-divider" />
<ul class="tpos-pricing-features">
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature1"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature2"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Starter_Feature3"]</li>
</ul>
<a href="#" class="btn-outline btn-full">@L["Plan_Starter_CTA"]</a>
</div>
<!-- Growth Plan (Featured) -->
<div class="tpos-pricing-card featured">
<div class="tpos-pricing-badge">@L["Plan_Pro_Badge"]</div>
<div class="tpos-pricing-name featured-name">@L["Plan_Pro_Name"]</div>
<div class="tpos-pricing-price">
<span class="tpos-pricing-amount">@L["Plan_Pro_Price"]</span>
<span class="tpos-pricing-period">@L["Plan_Pro_Period"]</span>
</div>
<p class="tpos-pricing-desc">@L["Plan_Pro_Desc"]</p>
<hr class="tpos-pricing-divider" />
<ul class="tpos-pricing-features">
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature1"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature2"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check accent"></i> @L["Plan_Pro_Feature3"]</li>
</ul>
<a href="#" class="btn-accent btn-full">@L["Plan_Pro_CTA"]</a>
</div>
<!-- Enterprise Plan -->
<div class="tpos-pricing-card">
<div class="tpos-pricing-name">@L["Plan_Enterprise_Name"]</div>
<div class="tpos-pricing-price">
<span class="tpos-pricing-amount">@L["Plan_Enterprise_Price"]</span>
<span class="tpos-pricing-period">@L["Plan_Enterprise_Period"]</span>
</div>
<p class="tpos-pricing-desc">@L["Plan_Enterprise_Desc"]</p>
<hr class="tpos-pricing-divider" />
<ul class="tpos-pricing-features">
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature1"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature2"]</li>
<li class="tpos-pricing-feature"><i data-lucide="check" class="lucide-check green"></i> @L["Plan_Enterprise_Feature3"]</li>
</ul>
<a href="#" class="btn-outline btn-full">@L["Plan_Enterprise_CTA"]</a>
</div>
</div>
<!-- Add-ons -->
<div class="tpos-addons">
<h3 class="tpos-addons-title">@L["Addons_Title"]</h3>
<div class="tpos-addons-grid">
@foreach (var addon in _addons)
{
<div class="tpos-addon-item">
<div class="tpos-addon-left">
<i data-lucide="@L[addon.Icon]" style="color: var(--accent-primary);"></i>
<span class="tpos-addon-name">@L[addon.Name]</span>
</div>
<div class="tpos-addon-price">@L[addon.Price]</div>
</div>
}
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
7. CTA SECTION
═══════════════════════════════════════════════════════════════════════ -->
<section class="tpos-cta">
<h2 class="tpos-cta-title">@((MarkupString)L["CTA_Title"].Value)</h2>
<p class="tpos-cta-sub">@L["CTA_Subtitle"]</p>
<div class="tpos-cta-actions">
<a href="#" class="btn-accent btn-accent-lg">
<i data-lucide="arrow-right"></i>
@L["CTA_Primary"]
</a>
<a href="#" class="btn-outline btn-outline-lg">@L["CTA_Secondary"]</a>
</div>
<p class="tpos-cta-trust">@L["CTA_Trust"]</p>
</section>
<!-- ═══════════════════════════════════════════════════════════════════════
8. FOOTER
═══════════════════════════════════════════════════════════════════════ -->
<footer class="tpos-footer">
<div class="tpos-footer-grid">
<div class="tpos-footer-brand">
<span class="tpos-logo">@L["AppName"]</span>
<p class="tpos-footer-tagline">@L["Footer_Tagline"]</p>
</div>
<div>
<div class="tpos-footer-col-title">@L["Footer_Col1_Title"]</div>
<ul class="tpos-footer-links">
<li><a href="#features" class="tpos-footer-link">@L["Footer_Col1_Link1"]</a></li>
<li><a href="#pricing" class="tpos-footer-link">@L["Footer_Col1_Link2"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col1_Link3"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col1_Link4"]</a></li>
</ul>
</div>
<div>
<div class="tpos-footer-col-title">@L["Footer_Col2_Title"]</div>
<ul class="tpos-footer-links">
<li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link1"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link2"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link3"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col2_Link4"]</a></li>
</ul>
</div>
<div>
<div class="tpos-footer-col-title">@L["Footer_Col3_Title"]</div>
<ul class="tpos-footer-links">
<li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link1"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link2"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link3"]</a></li>
<li><a href="#" class="tpos-footer-link">@L["Footer_Col3_Link4"]</a></li>
</ul>
</div>
</div>
<hr class="tpos-footer-divider" />
<div class="tpos-footer-bottom">
<div class="tpos-footer-copy">@L["Footer_Copyright"]</div>
<div class="tpos-footer-socials">
<a href="#" class="tpos-social-link"><i data-lucide="facebook"></i></a>
<a href="#" class="tpos-social-link"><i data-lucide="instagram"></i></a>
<a href="#" class="tpos-social-link"><i data-lucide="youtube"></i></a>
<a href="#" class="tpos-social-link"><i data-lucide="linkedin"></i></a>
</div>
</div>
<footer style="width:100%;padding:24px;text-align:center;color:var(--pos-text-tertiary, #ADADB0);font-size:13px;border-top:1px solid var(--pos-border-default, #2A2A2E);">
© 2024 GoodGo Platform. MIT License.
</footer>
@code {
[Parameter] public string? culture { get; set; }
// Initialize Lucide icons after render
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("lucide.createIcons");
try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
}
}
// Feature cards data
private record FeatureItem(string Icon, string Title, string Desc, string IconColor, string IconBg);
private readonly FeatureItem[] _features =
[
new("Feature_POS_Icon", "Feature_POS_Title", "Feature_POS_Desc", "#FF5C00", "#FF5C0018"),
new("Feature_Loyalty_Icon", "Feature_Loyalty_Title", "Feature_Loyalty_Desc", "#22C55E", "#22C55E18"),
new("Feature_Reports_Icon", "Feature_Reports_Title", "Feature_Reports_Desc", "#3B82F6", "#3B82F618"),
new("Feature_Staff_Icon", "Feature_Staff_Title", "Feature_Staff_Desc", "#A855F7", "#A855F718"),
new("Feature_Inventory_Icon", "Feature_Inventory_Title", "Feature_Inventory_Desc", "#F59E0B", "#F59E0B18"),
new("Feature_Payments_Icon", "Feature_Payments_Title", "Feature_Payments_Desc", "#EC4899", "#EC489918"),
];
private record FeatureCard(string Icon, string Title, string Description);
// Industry cards data (5 industries matching Pencil design)
private record IndustryItem(string Title, string Desc, string Chips, string Image);
private readonly IndustryItem[] _industries =
private readonly FeatureCard[] _featureCards =
[
new("Industry_Restaurant_Title", "Industry_Restaurant_Desc", "Industry_Restaurant_Chips", "/images/home/fnb-ai.png"),
new("Industry_Bar_Title", "Industry_Bar_Desc", "Industry_Bar_Chips", "/images/home/bar-ai.png"),
new("Industry_Karaoke_Title", "Industry_Karaoke_Desc", "Industry_Karaoke_Chips", "/images/home/karaoke-ai.png"),
new("Industry_Coffee_Title", "Industry_Coffee_Desc", "Industry_Coffee_Chips", "/images/home/coffee-ai.png"),
new("Industry_Spa_Title", "Industry_Spa_Desc", "Industry_Spa_Chips", "/images/home/spa-ai.png"),
];
// Add-on items with icons (matching Pencil design)
private record AddonItem(string Name, string Price, string Icon);
private readonly AddonItem[] _addons =
[
new("Addon_Store_Name", "Addon_Store_Price", "Addon_Store_Icon"),
new("Addon_Customer_Name", "Addon_Customer_Price", "Addon_Customer_Icon"),
new("Addon_AI_Name", "Addon_AI_Price", "Addon_AI_Icon"),
new("Addon_Storage_Name", "Addon_Storage_Price", "Addon_Storage_Icon"),
new("Addon_API_Name", "Addon_API_Price", "Addon_API_Icon"),
new("Addon_Staff_Name", "Addon_Staff_Price", "Addon_Staff_Icon"),
new("coffee", "Café & Bar", "Quản lý đơn hàng, pha chế, loyalty"),
new("utensils", "Nhà hàng", "Sơ đồ bàn, bếp, đặt bàn"),
new("mic", "Karaoke", "Quản lý phòng, timer, F&B"),
new("sparkles", "Spa & Beauty", "Lịch hẹn, dịch vụ, therapist"),
];
}