Login Background Updated

2026-02-17 02:44:55 +00:00 · 2026-02-17 02:44:55 +00:00 · 24c501e587
commit 24c501e587
parent 9a3496f9fd
5 changed files with 62 additions and 179 deletions
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@ -30,6 +30,7 @@ export default function NavBarItem({ item }: Props) {
  const currentUser = useAppSelector((state) => state.auth.currentUser);

  const userName = `${currentUser?.firstName ? currentUser?.firstName : ""} ${currentUser?.lastName ? currentUser?.lastName : ""}`;
+  const userInitials = `${currentUser?.firstName ? currentUser?.firstName[0] : ""}${currentUser?.lastName ? currentUser?.lastName[0] : ""}`;

  const [isDropdownActive, setIsDropdownActive] = useState(false)

@ -46,7 +47,7 @@ export default function NavBarItem({ item }: Props) {
    item.isDesktopNoLabel ? 'lg:w-16 lg:justify-center' : '',
  ].join(' ')

-  const itemLabel = item.isCurrentUser ? userName : item.label
+  const itemLabel = item.isCurrentUser ? userInitials : item.label

  const handleMenuClick = () => {
    if (item.menu) {
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@ -10,10 +10,10 @@ import {findMe, logoutUser} from "../stores/authSlice";
 import axios from 'axios';
 import { mdiAlertCircle } from '@mdi/js';
 import BaseIcon from '../components/BaseIcon';
+import NavBarItemPlain from '../components/NavBarItemPlain';
 import moment from 'moment';

 import {hasPermission} from "../helpers/userPermissions";
-import NavBarItemPlain from '../components/NavBarItemPlain';


 type Props = {
@ -72,12 +72,6 @@ export default function LayoutAuthenticated({
        const settings = response.data;
        if (settings.lockoutEnabled && settings.lockoutUntil && moment(settings.lockoutUntil).isAfter(moment())) {
          const allowed = settings.allowedUserIds?.includes(currentUser?.id);
-          // Only show banner if user is NOT allowed (or maybe show warning even if allowed?)
-          // User asked: "when the login it states their is currently a lockout".
-          // It implies everyone should see it. Allowed users might need to know they are in lockout mode.
-          // I'll show it to everyone, but maybe change color or text for allowed users?
-          // "Lockout Active (You are allowed to edit)" vs "Lockout Active (Read Only)".
-          // For simplicity, I'll show the standard message.
           setLockoutBanner({
             message: settings.lockoutMessage || `System is currently locked for reconciliation until ${moment(settings.lockoutUntil).format('LLL')}.`,
             until: settings.lockoutUntil
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@ -1,110 +1,5 @@
-import * as icon from '@mdi/js';
 import { MenuAsideItem } from './interfaces'

-const menuAside: MenuAsideItem[] = [
-  {
-    href: '/dashboard',
-    icon: icon.mdiViewDashboardOutline,
-    label: 'Dashboard',
-  },
-  
-  {
-    href: '/users/users-list',
-    label: 'Users',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiAccountGroup ?? icon.mdiTable,
-    permissions: 'READ_USERS'
-  },
-  {
-    href: '/roles/roles-list',
-    label: 'Roles',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable,
-    permissions: 'READ_ROLES'
-  },
-  {
-    href: '/permissions/permissions-list',
-    label: 'Permissions',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
-    permissions: 'READ_PERMISSIONS'
-  },
-  {
-    href: '/holidays/holidays-list',
-    label: 'Holidays',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiCalendarHoliday' in icon ? icon['mdiCalendarHoliday' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_HOLIDAYS'
-  },
-  {
-    href: '/time_off_requests/time_off_requests-list',
-    label: 'Time off requests',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiClipboardTextClock' in icon ? icon['mdiClipboardTextClock' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_TIME_OFF_REQUESTS'
-  },
-  {
-    href: '/pto_journal_entries/pto_journal_entries-list',
-    label: 'Pto journal entries',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiBookOpenPageVariant' in icon ? icon['mdiBookOpenPageVariant' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_PTO_JOURNAL_ENTRIES'
-  },
-  {
-    href: '/pto_journal_entries/balance-adjustment',
-    label: 'Balance Adjustment',
-    icon: icon.mdiScaleBalance,
-    permissions: 'READ_PTO_JOURNAL_ENTRIES'
-  },
-  {
-    href: '/yearly_leave_summaries/yearly_leave_summaries-list',
-    label: 'Yearly leave summaries',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiChartBox' in icon ? icon['mdiChartBox' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_YEARLY_LEAVE_SUMMARIES'
-  },
-  {
-    href: '/office_calendar_events/office_calendar_events-list',
-    label: 'Office calendar events',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiCalendarMonth' in icon ? icon['mdiCalendarMonth' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_OFFICE_CALENDAR_EVENTS'
-  },
-  {
-    href: '/approval_tasks/approval_tasks-list',
-    label: 'Approval tasks',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    icon: 'mdiCheckDecagram' in icon ? icon['mdiCheckDecagram' as keyof typeof icon] : icon.mdiTable ?? icon.mdiTable,
-    permissions: 'READ_APPROVAL_TASKS'
-  },
-  {
-    href: '/profile',
-    label: 'Profile',
-    icon: icon.mdiAccountCircle,
-  },
-  {
-    href: '/settings',
-    label: 'Settings',
-    icon: icon.mdiCog,
-    permissions: 'READ_USERS'
-  },
- 
-  {
-    href: '/api-docs',
-    target: '_blank',
-    label: 'Swagger API',
-    icon: icon.mdiFileCode,
-    permissions: 'READ_API_DOCS'
-  },
-]
+const menuAside: MenuAsideItem[] = []

 export default menuAside
--- a/frontend/src/menuNavBar.ts
+++ b/frontend/src/menuNavBar.ts
@ -3,19 +3,20 @@ import {
  mdiLogout,
  mdiThemeLightDark,
  mdiViewDashboardOutline,
+  mdiCalendarClock,
+  mdiScaleBalance,
  mdiAccountGroup,
-  mdiShieldAccountVariantOutline,
-  mdiShieldAccountOutline,
-  mdiCalendarStar,
-  mdiCalendarRange,
+  mdiCalendarMonth,
  mdiClipboardTextClock,
  mdiBookOpenPageVariant,
  mdiChartBox,
-  mdiCalendarMonth,
+  mdiCog,
  mdiCheckDecagram,
+  mdiCalendarStar,
+  mdiImageArea,
+  mdiShieldAccountOutline,
+  mdiShieldAccountVariantOutline,
  mdiFileCode,
-  mdiAccountCircle,
-  mdiTable
 } from '@mdi/js'
 import { MenuNavBarItem } from './interfaces'

@ -26,46 +27,30 @@ const menuNavBar: MenuNavBarItem[] = [
    label: 'Home',
  },
  {
-    label: 'Management',
+    label: 'PTO',
+    icon: mdiCalendarClock,
    menu: [
      {
-        href: '/users/users-list',
-        label: 'Users',
-        icon: mdiAccountGroup,
+        href: '/pto_journal_entries/balance-adjustment',
+        label: 'Adjustment',
+        icon: mdiScaleBalance,
        permissions: 'READ_USERS'
      },
-      {
-        href: '/roles/roles-list',
-        label: 'Roles',
-        icon: mdiShieldAccountVariantOutline,
-        permissions: 'READ_ROLES'
-      },
-      {
-        href: '/permissions/permissions-list',
-        label: 'Permissions',
-        icon: mdiShieldAccountOutline,
-        permissions: 'READ_PERMISSIONS'
-      },
-      {
-        href: '/api-docs',
-        label: 'Swagger API',
-        icon: mdiFileCode,
-        permissions: 'READ_API_DOCS'
-      },
-    ]
-  },
-  {
-    label: 'PTO & Leaves',
-    menu: [
      {
        href: '/employee-summary',
-        label: 'Employee Summary',
+        label: 'Employee Summaries',
        icon: mdiAccountGroup,
        permissions: 'READ_YEARLY_LEAVE_SUMMARIES'
      },
+      {
+        href: '/office_calendar_events/office_calendar_events-list',
+        label: 'Office Calendar',
+        icon: mdiCalendarMonth,
+        permissions: 'READ_OFFICE_CALENDAR_EVENTS'
+      },
      {
        href: '/time_off_requests/time_off_requests-list',
-        label: 'Time off requests',
+        label: 'Time Off Requests',
        icon: mdiClipboardTextClock,
        permissions: 'READ_TIME_OFF_REQUESTS'
      },
@ -84,32 +69,46 @@ const menuNavBar: MenuNavBarItem[] = [
    ]
  },
  {
-    label: 'Calendar & Tasks',
+    label: 'Settings',
+    icon: mdiCog,
    menu: [
-      {
-        href: '/office_calendar_events/office_calendar_events-list',
-        label: 'Office Calendar',
-        icon: mdiCalendarMonth,
-        permissions: 'READ_OFFICE_CALENDAR_EVENTS'
-      },
-      {
-        href: '/holidays/holidays-list',
-        label: 'Holidays',
-        icon: mdiCalendarRange,
-        permissions: 'READ_HOLIDAYS'
-      },
-      {
-        href: '/holiday_calendars/holiday_calendars-list',
-        label: 'Holiday Calendars',
-        icon: mdiCalendarStar,
-        permissions: 'READ_HOLIDAY_CALENDARS'
-      },
      {
        href: '/approval_tasks/approval_tasks-list',
        label: 'Approval Tasks',
        icon: mdiCheckDecagram,
        permissions: 'READ_APPROVAL_TASKS'
      },
+      {
+        href: '/holidays/holidays-list',
+        label: 'Holidays',
+        icon: mdiCalendarStar,
+        permissions: 'READ_HOLIDAYS'
+      },
+      {
+        href: '/settings/login-backgrounds',
+        label: 'Login Background',
+        icon: mdiImageArea,
+        permissions: 'READ_USERS'
+      },
+      {
+        href: '/permissions/permissions-list',
+        label: 'Permissions',
+        icon: mdiShieldAccountOutline,
+        permissions: 'READ_PERMISSIONS'
+      },
+      {
+        href: '/roles/roles-list',
+        label: 'Roles',
+        icon: mdiShieldAccountVariantOutline,
+        permissions: 'READ_ROLES'
+      },
+      {
+        href: '/api-docs',
+        target: '_blank',
+        label: 'Swagger API',
+        icon: mdiFileCode,
+        permissions: 'READ_API_DOCS'
+      }
    ]
  },
  {
@ -135,17 +134,11 @@ const menuNavBar: MenuNavBarItem[] = [
    label: 'Light/Dark',
    isDesktopNoLabel: true,
    isToggleLightDark: true,
-  },
-  {
-    icon: mdiLogout,
-    label: 'Log out',
-    isDesktopNoLabel: true,
-    isLogout: true,
-  },
+  }
 ]

 export const webPagesNavBar = [
    
 ];

-export default menuNavBar
+export default menuNavBar
--- a/frontend/src/pages/settings/login-backgrounds.tsx
+++ b/frontend/src/pages/settings/login-backgrounds.tsx
@ -49,7 +49,7 @@ const LoginBackgroundsPage = () => {
    setLoading(true);
    try {
      // 1. Upload file
-      const uploadedFile = await FileUploader.upload('login_backgrounds', file, { image: true });
+      const uploadedFile = await FileUploader.upload('login_backgrounds/image', file, { image: true });
      
      // 2. Save record
      const existing = backgrounds.find(b => b.month === month);
@ -146,4 +146,4 @@ LoginBackgroundsPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
 };

-export default LoginBackgroundsPage;
+export default LoginBackgroundsPage;