113 lines
6.0 KiB
Plaintext
113 lines
6.0 KiB
Plaintext
@page "/admin/system/integrations"
|
|
@layout AdminLayout
|
|
@inherits AdminBase
|
|
|
|
@*
|
|
EN: Integration hub — integration tiles (Payment, Delivery, Accounting, Social), connection status, configure button.
|
|
VI: Trung tâm tích hợp — thẻ tích hợp (Thanh toán, Giao hàng, Kế toán, Mạng xã hội), trạng thái kết nối, nút cấu hình.
|
|
Design: pencil-design/src/pages/tPOS/admin/integration-hub.pen
|
|
*@
|
|
|
|
<PageTitle>Tích hợp — GoodGo Admin</PageTitle>
|
|
|
|
@* ═══ TOP BAR ═══ *@
|
|
<div class="admin-topbar">
|
|
<div class="admin-topbar__left">
|
|
<h1 class="admin-topbar__title">Tích hợp</h1>
|
|
<p class="admin-topbar__subtitle">Quản lý kết nối với dịch vụ bên ngoài</p>
|
|
</div>
|
|
<div class="admin-topbar__right">
|
|
<div class="admin-search" style="width:200px;">
|
|
<i data-lucide="search"></i>
|
|
<input type="text" placeholder="Tìm tích hợp..." @bind="SearchQuery" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* ═══ CONTENT ═══ *@
|
|
<div class="admin-content" style="display:flex;flex-direction:column;gap:24px;">
|
|
|
|
@foreach (var group in _integrationGroups)
|
|
{
|
|
<div style="display:flex;flex-direction:column;gap:12px;">
|
|
<div style="font-size:12px;font-weight:700;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
|
|
@group.GroupName
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
|
|
@foreach (var item in group.Items)
|
|
{
|
|
<div class="admin-staff-card">
|
|
<div class="admin-staff-card__header">
|
|
<div class="admin-kpi-card__icon" style="width:48px;height:48px;border-radius:12px;background-color:@(item.Color)20;">
|
|
<i data-lucide="@item.Icon" style="color:@item.Color;width:22px;height:22px;"></i>
|
|
</div>
|
|
<div class="admin-status-badge @(item.Connected ? "admin-status-badge--online" : "admin-status-badge--offline")">
|
|
<span class="admin-status-badge__dot"></span>
|
|
@(item.Connected ? "Đã kết nối" : "Chưa kết nối")
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:2px;">
|
|
<span style="font-size:16px;font-weight:600;">@item.Name</span>
|
|
<span style="font-size:12px;color:var(--admin-text-tertiary);">@item.Description</span>
|
|
</div>
|
|
<div style="display:flex;gap:8px;margin-top:4px;">
|
|
@if (item.Connected)
|
|
{
|
|
<button class="admin-btn-secondary" style="flex:1;justify-content:center;font-size:12px;padding:8px 12px;">
|
|
<i data-lucide="settings" style="width:14px;height:14px;"></i>
|
|
Cấu hình
|
|
</button>
|
|
<button class="admin-btn-secondary" style="font-size:12px;padding:8px 12px;color:var(--admin-danger);border-color:rgba(239,68,68,0.3);">
|
|
<i data-lucide="unplug" style="width:14px;height:14px;"></i>
|
|
Ngắt
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<button class="admin-btn-primary" style="flex:1;justify-content:center;font-size:12px;padding:8px 12px;">
|
|
<i data-lucide="plug" style="width:14px;height:14px;"></i>
|
|
Kết nối
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@code {
|
|
private record IntegrationItem(string Name, string Description, string Icon, string Color, bool Connected);
|
|
private record IntegrationGroup(string GroupName, IntegrationItem[] Items);
|
|
|
|
private readonly IntegrationGroup[] _integrationGroups = new[]
|
|
{
|
|
new IntegrationGroup("THANH TOÁN", new[]
|
|
{
|
|
new IntegrationItem("VNPay", "Thanh toán QR & thẻ ngân hàng", "qr-code", "#3B82F6", true),
|
|
new IntegrationItem("MoMo", "Ví điện tử MoMo", "wallet", "#EC4899", true),
|
|
new IntegrationItem("ZaloPay", "Thanh toán qua ZaloPay", "smartphone", "#3B82F6", false),
|
|
new IntegrationItem("Visa/Mastercard", "Thanh toán thẻ quốc tế", "credit-card", "#8B5CF6", true),
|
|
}),
|
|
new IntegrationGroup("GIAO HÀNG", new[]
|
|
{
|
|
new IntegrationItem("GrabFood", "Đối tác giao đồ ăn", "bike", "#22C55E", true),
|
|
new IntegrationItem("ShopeeFood", "Nền tảng đặt đồ ăn", "shopping-bag", "#FF5C00", true),
|
|
new IntegrationItem("Baemin", "Dịch vụ giao hàng", "truck", "#06B6D4", false),
|
|
}),
|
|
new IntegrationGroup("KẾ TOÁN & QUẢN LÝ", new[]
|
|
{
|
|
new IntegrationItem("MISA", "Phần mềm kế toán", "calculator", "#F59E0B", true),
|
|
new IntegrationItem("Google Sheets", "Xuất báo cáo tự động", "file-spreadsheet", "#22C55E", false),
|
|
new IntegrationItem("Hóa đơn điện tử", "Phát hành hóa đơn GTGT", "file-text", "#3B82F6", true),
|
|
}),
|
|
new IntegrationGroup("MẠNG XÃ HỘI", new[]
|
|
{
|
|
new IntegrationItem("Facebook", "Fanpage & quảng cáo", "facebook", "#3B82F6", true),
|
|
new IntegrationItem("Zalo OA", "Chăm sóc khách hàng", "message-circle", "#3B82F6", false),
|
|
new IntegrationItem("Google Business", "Hiển thị trên Google Maps", "map-pin", "#EF4444", true),
|
|
}),
|
|
};
|
|
}
|