575 lines
19 KiB
Plaintext
575 lines
19 KiB
Plaintext
@using Indotalent.ConfigBackEnd.Extensions
|
|
@using Indotalent.ConfigBackEnd.Interfaces
|
|
@using Indotalent.Infrastructure.Authentication
|
|
@using Indotalent.Infrastructure.Authorization.Identity
|
|
@using Indotalent.Shared.Consts
|
|
@using Microsoft.AspNetCore.Components.Authorization
|
|
@inherits LayoutComponentBase
|
|
@inject NavigationManager NavigationManager
|
|
@inject ICurrentUserService CurrentUserService
|
|
|
|
<MudThemeProvider />
|
|
<MudDialogProvider />
|
|
<MudSnackbarProvider />
|
|
<MudPopoverProvider />
|
|
|
|
<MudLayout>
|
|
<AuthorizeView>
|
|
<MudAppBar Elevation="1">
|
|
<MudSpacer />
|
|
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" Dense="true"
|
|
ActivationEvent="@MouseEvent.LeftClick" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
|
|
<MudMenuItem OnClick="GoToProfile">Profile</MudMenuItem>
|
|
<MudMenuItem OnClick="Logout" Color="Color.Error">Logout</MudMenuItem>
|
|
</MudMenu>
|
|
</MudAppBar>
|
|
|
|
<MudDrawer @bind-Open="_drawerOpen"
|
|
Elevation="0"
|
|
Variant="@DrawerVariant.Mini"
|
|
OpenMiniOnHover="false"
|
|
MiniWidth="80px"
|
|
Width="280px"
|
|
Class="v6-drawer">
|
|
|
|
<MudIconButton Icon="@(_drawerOpen ? Icons.Material.Rounded.ChevronLeft : Icons.Material.Rounded.ChevronRight)"
|
|
OnClick="@DrawerToggle"
|
|
Class="v6-toggle-btn"
|
|
Size="Size.Small" />
|
|
|
|
<MudDrawerHeader Class="pa-6 mb-2">
|
|
<div class="d-flex align-center">
|
|
<MudIcon Icon="@Icons.Material.Filled.LocalHospital" Size="Size.Medium" Style="color: #0284C7;" />
|
|
@if (_drawerOpen)
|
|
{
|
|
<MudText Typo="Typo.h5" Class="ml-3" Style="font-weight:900; color: #0C4A6E;">@GlobalConsts.AppInitial</MudText>
|
|
}
|
|
</div>
|
|
</MudDrawerHeader>
|
|
|
|
<MudNavMenu Class="v6-nav">
|
|
<AuthorizeView Roles="@($"{ApplicationRoles.Admin},{ApplicationRoles.Member}")" Context="commonAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/home" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">@(_drawerOpen ? "Home" : "")</MudNavLink>
|
|
<MudNavLink Href="/profile" Icon="@Icons.Material.Filled.AccountCircle">@(_drawerOpen ? "Profile" : "")</MudNavLink>
|
|
<MudNavLink Href="/thirdparty" Icon="@Icons.Material.Filled.Groups">@(_drawerOpen ? "Third Party" : "")</MudNavLink>
|
|
<MudNavLink Href="/organization" Icon="@Icons.Material.Filled.Badge">@(_drawerOpen ? "Organization" : "")</MudNavLink>
|
|
<MudNavLink Href="/medical" Icon="@Icons.Material.Filled.MedicalServices">@(_drawerOpen ? "Medical" : "")</MudNavLink>
|
|
<MudNavLink Href="/sales" Icon="@Icons.Material.Filled.MonetizationOn">@(_drawerOpen ? "Sales" : "")</MudNavLink>
|
|
<MudNavLink Href="/purchase" Icon="@Icons.Material.Filled.ShoppingCart">@(_drawerOpen ? "Purchase" : "")</MudNavLink>
|
|
<MudNavLink Href="/inventory" Icon="@Icons.Material.Filled.Inventory2">@(_drawerOpen ? "Inventory" : "")</MudNavLink>
|
|
<MudNavLink Href="/utilities" Icon="@Icons.Material.Filled.Build">@(_drawerOpen ? "Utilities" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
|
|
<AuthorizeView Roles="@ApplicationRoles.Admin" Context="adminAuth">
|
|
<Authorized>
|
|
<MudNavLink Href="/serilogs" Icon="@Icons.Material.Filled.HistoryEdu">@(_drawerOpen ? "System Logs" : "")</MudNavLink>
|
|
<MudNavLink Href="/setting" Icon="@Icons.Material.Filled.Settings">@(_drawerOpen ? "App Settings" : "")</MudNavLink>
|
|
<MudNavLink Href="/appsettings/json" Icon="@Icons.Material.Filled.SettingsEthernet">@(_drawerOpen ? "System Settings" : "")</MudNavLink>
|
|
</Authorized>
|
|
</AuthorizeView>
|
|
</MudNavMenu>
|
|
|
|
<div class="v6-footer d-flex align-center @(_drawerOpen ? "" : "justify-center")">
|
|
<MudBadge Color="Color.Success" Overlap="true" Dot="true" Bordered="true" Placement="Placement.BottomRight">
|
|
<MudAvatar Style="background-color: #0284C7; color: white;" Size="Size.Medium">@CurrentUserService.FullName.ToInitial()</MudAvatar>
|
|
</MudBadge>
|
|
@if (_drawerOpen)
|
|
{
|
|
<div class="ml-3">
|
|
<MudText Typo="Typo.caption" Style="font-weight:700; display: block; color: #0C4A6E;">@CurrentUserService.FullName</MudText>
|
|
<MudText Typo="Typo.caption" Style="color: #075985; font-size: 10px;">Online</MudText>
|
|
</div>
|
|
}
|
|
</div>
|
|
</MudDrawer>
|
|
</AuthorizeView>
|
|
|
|
<MudMainContent Style="background-color: #f1f5f9;">
|
|
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-3 md-pa-6 lg-pa-8 pt-3 pb-12">
|
|
@Body
|
|
</MudContainer>
|
|
</MudMainContent>
|
|
</MudLayout>
|
|
|
|
<script>
|
|
function downloadFile(fileName, contentType, base64String) {
|
|
const link = document.createElement('a');
|
|
link.download = fileName;
|
|
link.href = `data:${contentType};base64,${base64String}`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
</script>
|
|
|
|
@code {
|
|
private bool _drawerOpen = true;
|
|
|
|
private void DrawerToggle() => _drawerOpen = !_drawerOpen;
|
|
private void GoToProfile() => NavigationManager.NavigateTo("/profile");
|
|
private void Logout() => NavigationManager.NavigateTo("/account/logout");
|
|
}
|
|
|
|
|
|
<style>
|
|
.mud-input-control:has(.mud-input-adornment-start) {
|
|
margin-top: 0 !important;
|
|
height: 35px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) .mud-input-outlined-border {
|
|
height: 35px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) input {
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
height: 30px !important;
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
height: 35px !important;
|
|
}
|
|
|
|
div:has(> .mud-input-control:has(.mud-input-adornment-start)) > .mud-button-root {
|
|
height: 35px !important;
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.mud-input-outlined-border {
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.custom-select-dense .mud-input-control {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.custom-select-dense .mud-input-slot {
|
|
padding-top: 4px !important;
|
|
padding-bottom: 4px !important;
|
|
padding-left: 8px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.mud-drawer.v6-drawer {
|
|
overflow: visible !important;
|
|
z-index: 1350 !important;
|
|
background-color: #f8fafc !important;
|
|
border-right: 1px solid var(--mud-palette-divider) !important;
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.v6-drawer .mud-drawer-content {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.v6-toggle-btn {
|
|
position: absolute !important;
|
|
right: -16px !important;
|
|
top: 18px !important;
|
|
z-index: 1400 !important;
|
|
background-color: white !important;
|
|
border: 1px solid var(--mud-palette-divider) !important;
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
min-width: 32px !important;
|
|
border-radius: 50% !important;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link {
|
|
border-radius: 12px;
|
|
margin: 4px 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link.active {
|
|
background-color: white !important;
|
|
color: #0284C7 !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.v6-nav .mud-nav-link.active .mud-nav-link-icon {
|
|
color: #0284C7 !important;
|
|
}
|
|
|
|
.v6-footer {
|
|
margin-top: auto;
|
|
padding: 16px;
|
|
border-top: 1px solid #E0F2FE;
|
|
background-color: #F0F9FF;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mud-badge-dot {
|
|
border: 2px solid white !important;
|
|
}
|
|
|
|
/* ===== SHARED DATA TABLE MODERN STYLES ===== */
|
|
.dt-header {
|
|
border-radius: 12px !important;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
|
|
border: 1px solid #e8edf5 !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
|
|
}
|
|
.dt-title {
|
|
font-weight: 700 !important;
|
|
font-size: 1.5rem !important;
|
|
color: #0b1d35 !important;
|
|
letter-spacing: -0.02em !important;
|
|
}
|
|
.dt-subtitle {
|
|
color: #5b6e8a !important;
|
|
font-size: 0.875rem !important;
|
|
margin-top: 2px !important;
|
|
}
|
|
.dt-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.75rem;
|
|
}
|
|
.dt-breadcrumb-item {
|
|
color: #8b9eb8;
|
|
}
|
|
.dt-breadcrumb-sep {
|
|
color: #c8d4e3;
|
|
}
|
|
.dt-breadcrumb-current {
|
|
color: #0b1d35;
|
|
font-weight: 600;
|
|
}
|
|
.dt-card {
|
|
border-radius: 12px !important;
|
|
background: #ffffff !important;
|
|
border: 1px solid #e8edf5 !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
|
|
overflow: hidden !important;
|
|
margin-top: 16px !important;
|
|
}
|
|
.dt-toolbar {
|
|
padding: 20px 24px !important;
|
|
border-bottom: 1px solid #eef2f8 !important;
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: center !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 12px !important;
|
|
background: #ffffff !important;
|
|
min-height: auto !important;
|
|
}
|
|
.dt-search-input {
|
|
background: #f4f6fa !important;
|
|
border-radius: 8px !important;
|
|
transition: all 0.2s ease;
|
|
width: 280px !important;
|
|
}
|
|
.dt-search-input:focus-within {
|
|
background: #ffffff !important;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
|
|
}
|
|
.dt-btn {
|
|
text-transform: none !important;
|
|
font-weight: 600 !important;
|
|
border-radius: 8px !important;
|
|
letter-spacing: 0.01em !important;
|
|
box-shadow: none !important;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap !important;
|
|
height: 36px !important;
|
|
padding: 0 16px !important;
|
|
}
|
|
.dt-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
.dt-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
.dt-btn-primary {
|
|
background: #1a5cff !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
}
|
|
.dt-btn-primary:hover {
|
|
background: #1446cc !important;
|
|
}
|
|
.dt-btn-excel {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d0d7e2 !important;
|
|
color: #2b6e3b !important;
|
|
}
|
|
.dt-btn-excel:hover {
|
|
background: #f0faf2 !important;
|
|
border-color: #2b6e3b !important;
|
|
}
|
|
.dt-btn-refresh {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d0d7e2 !important;
|
|
color: #1a5cff !important;
|
|
}
|
|
.dt-btn-refresh:hover {
|
|
background: #f0f4ff !important;
|
|
border-color: #1a5cff !important;
|
|
}
|
|
.dt-btn-view {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d0d7e2 !important;
|
|
color: #0ea5e9 !important;
|
|
}
|
|
.dt-btn-view:hover {
|
|
background: #f0faff !important;
|
|
border-color: #0ea5e9 !important;
|
|
}
|
|
.dt-btn-edit {
|
|
background: #ffffff !important;
|
|
border: 1px solid #d0d7e2 !important;
|
|
color: #1a5cff !important;
|
|
}
|
|
.dt-btn-edit:hover {
|
|
background: #f0f4ff !important;
|
|
border-color: #1a5cff !important;
|
|
}
|
|
.dt-btn-danger {
|
|
background: #ef4444 !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
}
|
|
.dt-btn-danger:hover {
|
|
background: #dc2626 !important;
|
|
}
|
|
.dt-btn-add {
|
|
background: #1a5cff !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
}
|
|
.dt-btn-add:hover {
|
|
background: #1446cc !important;
|
|
}
|
|
.dt-table ::deep .mud-table-container {
|
|
overflow-x: auto;
|
|
}
|
|
.dt-table ::deep .mud-table-head {
|
|
background: #f8faff;
|
|
}
|
|
.dt-table ::deep .mud-th {
|
|
font-weight: 700 !important;
|
|
color: #1e293b !important;
|
|
font-size: 0.7rem !important;
|
|
text-transform: uppercase !important;
|
|
letter-spacing: 0.05em !important;
|
|
padding: 14px 16px !important;
|
|
border-bottom: 2px solid #e2e8f0 !important;
|
|
background: #f8faff !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
.dt-table ::deep .mud-td {
|
|
padding: 12px 16px !important;
|
|
border-bottom: 1px solid #f1f4f9 !important;
|
|
font-size: 0.875rem !important;
|
|
color: #334155 !important;
|
|
}
|
|
.dt-table ::deep .mud-table-row {
|
|
transition: background 0.12s ease;
|
|
}
|
|
.dt-table ::deep .mud-table-row:hover {
|
|
background: #f0f7ff !important;
|
|
}
|
|
.dt-table ::deep .mud-table-row.mud-selected {
|
|
background: #eef4fe !important;
|
|
box-shadow: inset 3px 0 0 0 #1a5cff;
|
|
}
|
|
.dt-avatar {
|
|
border-radius: 50% !important;
|
|
font-size: 10px !important;
|
|
font-weight: 800 !important;
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
background: linear-gradient(135deg, #1a5cff, #0ea5e9) !important;
|
|
color: white !important;
|
|
box-shadow: 0 2px 6px rgba(26, 92, 255, 0.25) !important;
|
|
}
|
|
.dt-name-text {
|
|
font-weight: 600 !important;
|
|
color: #0b1d35 !important;
|
|
}
|
|
.dt-desc-text {
|
|
color: #5b6e8a !important;
|
|
}
|
|
.dt-footer {
|
|
display: flex !important;
|
|
justify-content: space-between !important;
|
|
align-items: center !important;
|
|
padding: 14px 24px !important;
|
|
background: #f8faff !important;
|
|
border-top: 1px solid #eef2f8 !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 12px !important;
|
|
}
|
|
.dt-footer-info {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 12px !important;
|
|
}
|
|
.dt-footer-label {
|
|
font-size: 0.75rem !important;
|
|
font-weight: 600 !important;
|
|
color: #1e293b !important;
|
|
}
|
|
.dt-footer-count {
|
|
font-size: 0.75rem !important;
|
|
color: #1a5cff !important;
|
|
}
|
|
.dt-footer-nav {
|
|
display: flex !important;
|
|
gap: 6px !important;
|
|
align-items: center !important;
|
|
}
|
|
.dt-page-indicator {
|
|
font-size: 0.8125rem !important;
|
|
font-weight: 600 !important;
|
|
color: #1e293b !important;
|
|
margin: 0 8px !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
.dt-btn-nav {
|
|
text-transform: none !important;
|
|
font-weight: 600 !important;
|
|
border-radius: 8px !important;
|
|
font-size: 0.8125rem !important;
|
|
padding: 0 12px !important;
|
|
height: 34px !important;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.dt-btn-nav:hover {
|
|
background: rgba(26, 92, 255, 0.08) !important;
|
|
}
|
|
.dt-btn-icon-nav {
|
|
border-radius: 8px !important;
|
|
transition: all 0.15s ease;
|
|
border: 1px solid #e2e8f0 !important;
|
|
}
|
|
.dt-btn-icon-nav:hover:not(:disabled) {
|
|
background: rgba(26, 92, 255, 0.08) !important;
|
|
}
|
|
.dt-btn-icon-nav.dt-disabled {
|
|
color: #cbd5e1 !important;
|
|
background: #f8fafc !important;
|
|
}
|
|
.dt-btn-icon-nav.dt-active {
|
|
color: #1a5cff !important;
|
|
background: white !important;
|
|
}
|
|
.dt-btn-nav.dt-disabled {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
.dt-btn-nav.dt-active {
|
|
color: #1a5cff !important;
|
|
}
|
|
.dt-selection-badge {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
gap: 6px !important;
|
|
background: #eef2ff !important;
|
|
color: #1a5cff !important;
|
|
font-size: 0.75rem !important;
|
|
font-weight: 600 !important;
|
|
padding: 4px 10px !important;
|
|
border-radius: 20px !important;
|
|
border: 1px solid #d0ddff !important;
|
|
}
|
|
.dt-select-dense {
|
|
font-size: 0.75rem !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
.dt-select-dense .mud-input-control {
|
|
margin-top: 0 !important;
|
|
}
|
|
.dt-select-dense {
|
|
width: 100px !important;
|
|
}
|
|
.dt-select-dense .mud-input {
|
|
height: 32px !important;
|
|
min-height: 32px !important;
|
|
}
|
|
.dt-select-dense .mud-input-slot {
|
|
padding: 4px 8px !important;
|
|
font-size: 0.75rem !important;
|
|
min-height: unset !important;
|
|
}
|
|
.dt-select-dense .mud-select-input {
|
|
padding: 4px 8px !important;
|
|
font-size: 0.75rem !important;
|
|
}
|
|
.dt-select-dense .mud-input-outlined-border {
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.dt-back-btn {
|
|
border-radius: 8px !important;
|
|
transition: all 0.15s ease;
|
|
color: #1a5cff !important;
|
|
background: #f0f4ff !important;
|
|
width: 36px !important;
|
|
height: 36px !important;
|
|
}
|
|
.dt-back-btn:hover {
|
|
background: #dbe4ff !important;
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
.dt-form-btn {
|
|
text-transform: none !important;
|
|
font-weight: 600 !important;
|
|
border-radius: 8px !important;
|
|
letter-spacing: 0.01em !important;
|
|
transition: all 0.15s ease;
|
|
height: 36px !important;
|
|
padding: 0 20px !important;
|
|
}
|
|
.dt-form-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
.dt-form-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
.dt-form-btn-cancel {
|
|
border: 1px solid #d0d7e2 !important;
|
|
color: #475569 !important;
|
|
background: white !important;
|
|
}
|
|
.dt-form-btn-cancel:hover {
|
|
background: #f8fafc !important;
|
|
border-color: #94a3b8 !important;
|
|
}
|
|
.dt-form-btn-submit {
|
|
background: #1a5cff !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
}
|
|
.dt-form-btn-submit:hover {
|
|
background: #1446cc !important;
|
|
}
|
|
</style>
|