91984dbde3
Implement a comprehensive overhaul of the Filament admin dashboard, introducing a structured 12-column responsive grid layout and enhanced visual identity. Key changes include: - Redesigned Dashboard layout with a 4-layer progressive disclosure architecture (KPIs, Exchange Rates, Data Tables, and Trends). - Introduced custom IFNEX design tokens via CSS, including branded stat cards, status badges, and improved sidebar typography. - Enhanced FinanceOverviewWidget with real-time trend analysis and sparkline-ready data structures. - Refactored RecentShipments and RecentTransactions widgets to use custom Blade templates for a more polished, consistent UI. - Integrated brand assets including the company logo and custom authentication pages. - Added global number formatting helpers and integrated them into financial widgets. - Updated AdminPanelProvider to support custom login pages and brand-specific header/footer hooks.
352 lines
11 KiB
PHP
352 lines
11 KiB
PHP
@php
|
|
$logoUrl = asset('images/ifnex-logo.png');
|
|
@endphp
|
|
|
|
<div class="ifnex-login-page">
|
|
{{-- Decorative background pattern: subtle globe + airplane in corners --}}
|
|
<div class="ifnex-login-decor" aria-hidden="true">
|
|
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="ifnex-decor-globe">
|
|
<circle cx="100" cy="100" r="92" fill="none" stroke="#f59e0b" stroke-width="0.6"/>
|
|
<ellipse cx="100" cy="100" rx="92" ry="34" fill="none" stroke="#f59e0b" stroke-width="0.6"/>
|
|
<ellipse cx="100" cy="100" rx="92" ry="62" fill="none" stroke="#f59e0b" stroke-width="0.6"/>
|
|
<line x1="8" y1="100" x2="192" y2="100" stroke="#f59e0b" stroke-width="0.6"/>
|
|
<line x1="100" y1="8" x2="100" y2="192" stroke="#f59e0b" stroke-width="0.6"/>
|
|
<path d="M8,70 Q100,90 192,70" fill="none" stroke="#f59e0b" stroke-width="0.4"/>
|
|
<path d="M8,130 Q100,110 192,130" fill="none" stroke="#f59e0b" stroke-width="0.4"/>
|
|
</svg>
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ifnex-decor-plane" fill="none" stroke="#f59e0b" stroke-width="0.5">
|
|
<path d="M21,16v-2l-8-5V3.5C13,2.67 12.33,2 11.5,2S10,2.67 10,3.5V9l-8,5v2l8-2.5V19l-2,1.5V22l3.5-1l3.5,1v-1.5L13,19v-5.5L21,16z" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="ifnex-login-card">
|
|
<img src="{{ $logoUrl }}" alt="IFNEX Logo" class="ifnex-login-logo" />
|
|
|
|
<h1 class="ifnex-login-title">ورود به سیستم</h1>
|
|
<p class="ifnex-login-subtitle">IFNEX Logistics — مدیریت لجستیک</p>
|
|
|
|
<form wire:submit="authenticate">
|
|
<div class="ifnex-login-form">
|
|
{{ $this->form }}
|
|
</div>
|
|
|
|
<div class="ifnex-login-submit">
|
|
{{ $this->getAuthenticateFormAction() }}
|
|
</div>
|
|
</form>
|
|
|
|
<p class="ifnex-login-footer">© 2026 IFNEX Logistics — VernaSoft</p>
|
|
</div>
|
|
|
|
<style>
|
|
/* ============================================================
|
|
IFNEX Login Page — custom redesign
|
|
scoped under .ifnex-login-* so it never leaks onto
|
|
the rest of the Filament admin UI.
|
|
============================================================ */
|
|
|
|
/* ---- Full-screen background matching WP hero ---- */
|
|
.ifnex-login-page {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow-y: auto;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #f59e0b 200%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
direction: rtl;
|
|
font-family: 'Vazirmatn', 'IranYekan', Tahoma, sans-serif;
|
|
}
|
|
|
|
/* ---- Subtle decorative globe + airplane in corners ---- */
|
|
.ifnex-login-decor {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ifnex-decor-globe {
|
|
position: absolute;
|
|
bottom: -220px;
|
|
left: -180px;
|
|
width: 620px;
|
|
height: 620px;
|
|
opacity: 0.07;
|
|
}
|
|
|
|
.ifnex-decor-plane {
|
|
position: absolute;
|
|
top: 70px;
|
|
right: 60px;
|
|
width: 260px;
|
|
height: 260px;
|
|
opacity: 0.06;
|
|
transform: rotate(-18deg);
|
|
}
|
|
|
|
/* ---- Centered login card ---- */
|
|
.ifnex-login-card {
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
max-width: 440px;
|
|
background: #FAF9F6;
|
|
border-radius: 16px;
|
|
padding: 2.5rem 2.25rem 1.75rem;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
animation: ifnexFadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes ifnexFadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ---- Logo ---- */
|
|
.ifnex-login-logo {
|
|
display: block;
|
|
margin: 0 auto 1.5rem;
|
|
width: 120px;
|
|
height: auto;
|
|
}
|
|
|
|
/* ---- Title & subtitle ---- */
|
|
.ifnex-login-title {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 22px;
|
|
color: #1f2937;
|
|
text-align: center;
|
|
margin: 0 0 0.5rem;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.ifnex-login-subtitle {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
text-align: center;
|
|
margin: 0 0 2rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ---- Form wrapper ---- */
|
|
.ifnex-login-form {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* === Filament form overrides (scoped to card) === */
|
|
|
|
/* Field labels */
|
|
.ifnex-login-card .fi-input-wrp-label,
|
|
.ifnex-login-card .fi-field-label,
|
|
.ifnex-login-card label.fi-input-wrp-label,
|
|
.ifnex-login-card .fi-label {
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
font-size: 13px !important;
|
|
font-weight: 600 !important;
|
|
color: #374151 !important;
|
|
margin-bottom: 0.375rem !important;
|
|
display: block;
|
|
}
|
|
|
|
/* Input wrapper */
|
|
.ifnex-login-card .fi-input-wrp,
|
|
.ifnex-login-card .fi-input-text-wrp,
|
|
.ifnex-login-card .fi-input-wp {
|
|
border-radius: 8px !important;
|
|
background: #ffffff !important;
|
|
border: 1px solid #e5e7eb !important;
|
|
transition: border-color 0.2s, box-shadow 0.2s !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ifnex-login-card .fi-input-wrp:focus-within,
|
|
.ifnex-login-card .fi-input-text-wrp:focus-within {
|
|
border-color: #f59e0b !important;
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
|
|
}
|
|
|
|
/* Input field itself */
|
|
.ifnex-login-card .fi-input-wrp-input,
|
|
.ifnex-login-card .ifnex-login-input,
|
|
.ifnex-login-card input[type="email"],
|
|
.ifnex-login-card input[type="password"],
|
|
.ifnex-login-card input[type="text"] {
|
|
padding: 0.75rem 1rem !important;
|
|
font-size: 14px !important;
|
|
color: #1f2937 !important;
|
|
background: transparent !important;
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
width: 100%;
|
|
}
|
|
|
|
.ifnex-login-card input::placeholder {
|
|
color: #9ca3af !important;
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
}
|
|
|
|
/* Prefix icons (at-symbol on email, lock on password) */
|
|
.ifnex-login-card .fi-input-wrp-icon,
|
|
.ifnex-login-card .fi-icon,
|
|
.ifnex-login-card .fi-input-wp-icon {
|
|
color: #9ca3af !important;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.ifnex-login-card .fi-input-wrp:focus-within .fi-input-wrp-icon,
|
|
.ifnex-login-card .fi-input-wrp:focus-within .fi-icon,
|
|
.ifnex-login-card .fi-input-text-wrp:focus-within .fi-icon {
|
|
color: #f59e0b !important;
|
|
}
|
|
|
|
/* Spacing between form fields */
|
|
.ifnex-login-card .fi-components > div + div,
|
|
.ifnex-login-card .fi-field + .fi-field,
|
|
.ifnex-login-card .fi-form-field + .fi-form-field,
|
|
.ifnex-login-card .fi-fo-wrp + .fi-fo-wrp {
|
|
margin-top: 1rem !important;
|
|
}
|
|
|
|
/* Checkbox "مرا به خاطر بسپار" — amber accent */
|
|
.ifnex-login-card .ifnex-login-remember,
|
|
.ifnex-login-card .fi-checkbox-wrp,
|
|
.ifnex-login-card .fi-checkbox {
|
|
accent-color: #f59e0b !important;
|
|
}
|
|
|
|
.ifnex-login-card .fi-checkbox-wrp-label,
|
|
.ifnex-login-card .fi-checkbox-label,
|
|
.ifnex-login-card .fi-checkbox-wp-label,
|
|
.ifnex-login-card .ifnex-login-remember + label {
|
|
font-size: 13px !important;
|
|
color: #4b5563 !important;
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
.ifnex-login-card input[type="checkbox"] {
|
|
accent-color: #f59e0b !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Submit button — gradient amber, full-width */
|
|
.ifnex-login-card .fi-btn,
|
|
.ifnex-login-card .ifnex-login-submit .fi-btn,
|
|
.ifnex-login-card button[type="submit"] {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #FDB913 100%) !important;
|
|
color: #ffffff !important;
|
|
font-weight: 700 !important;
|
|
font-family: 'Vazirmatn', sans-serif !important;
|
|
border-radius: 8px !important;
|
|
padding: 0.75rem 1rem !important;
|
|
width: 100% !important;
|
|
border: none !important;
|
|
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
|
|
transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
|
|
cursor: pointer !important;
|
|
font-size: 15px !important;
|
|
display: block !important;
|
|
text-align: center !important;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.ifnex-login-card .fi-btn:hover,
|
|
.ifnex-login-card .ifnex-login-submit .fi-btn:hover,
|
|
.ifnex-login-card button[type="submit"]:hover {
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45) !important;
|
|
background: linear-gradient(135deg, #FDB913 0%, #f59e0b 100%) !important;
|
|
}
|
|
|
|
.ifnex-login-card .fi-btn:active,
|
|
.ifnex-login-card button[type="submit"]:active {
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
/* Form actions layout — make submit action stretch full-width */
|
|
.ifnex-login-card .fi-form-actions,
|
|
.ifnex-login-card .fi-form-actions-actions,
|
|
.ifnex-login-card .fi-actions,
|
|
.ifnex-login-card .ifnex-login-submit {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin-top: 1.25rem !important;
|
|
}
|
|
|
|
.ifnex-login-card .fi-form-actions-action,
|
|
.ifnex-login-card .fi-actions-action {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Hide the default Filament auth heading/subheading/brand — we render our own */
|
|
.ifnex-login-card .fi-auth-heading,
|
|
.ifnex-login-card .fi-auth-subheading,
|
|
.ifnex-login-card .fi-auth-brand,
|
|
.ifnex-login-card .fi-panels-auth-card-heading,
|
|
.ifnex-login-card .fi-panels-auth-card-subheading {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Footer text */
|
|
.ifnex-login-footer {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 11px;
|
|
color: #9ca3af;
|
|
text-align: center;
|
|
margin: 1.25rem 0 0;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #f3f4f6;
|
|
direction: ltr;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ---- Mobile responsive ---- */
|
|
@media (max-width: 480px) {
|
|
.ifnex-login-page {
|
|
padding: 1rem;
|
|
}
|
|
.ifnex-login-card {
|
|
max-width: 100%;
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
border-radius: 14px;
|
|
}
|
|
.ifnex-login-logo {
|
|
width: 100px;
|
|
}
|
|
.ifnex-login-title {
|
|
font-size: 20px;
|
|
}
|
|
.ifnex-login-subtitle {
|
|
font-size: 12px;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
.ifnex-decor-globe,
|
|
.ifnex-decor-plane {
|
|
opacity: 0.04;
|
|
}
|
|
}
|
|
|
|
/* ---- Respect reduced-motion users ---- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ifnex-login-card {
|
|
animation: none;
|
|
}
|
|
.ifnex-login-card .fi-btn:hover,
|
|
.ifnex-login-card button[type="submit"]:hover {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
</div> |