Boarding, payment methods, journey direction on seat hold, and more updates

This commit is contained in:
Stephanos A
2026-06-29 08:44:38 +03:00
parent 81ae99cee3
commit c6e56d1c4f
65 changed files with 6437 additions and 1425 deletions

View File

@@ -40,7 +40,7 @@ export default function Header() {
</button>
{showNotifications && (
<div className="absolute right-0 mt-2 w-80 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl z-50">
<div className="fixed inset-x-2 top-20 z-50 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl sm:absolute sm:inset-x-auto sm:right-0 sm:top-full sm:mt-2 sm:w-80 md:w-96">
<div className="p-4 border-b border-gray-200 dark:border-slate-700">
<h3 className="font-semibold text-foreground">Notifications</h3>
</div>
@@ -96,7 +96,7 @@ export default function Header() {
</button>
{showUserMenu && (
<div className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl z-50">
<div className="fixed inset-x-2 top-20 z-50 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl sm:absolute sm:inset-x-auto sm:right-0 sm:top-full sm:mt-2 sm:w-56">
<div className="p-3 border-b border-gray-200 dark:border-slate-700">
<p className="text-sm font-medium text-foreground">{user?.fullName || 'Full Name'}</p>
<p className="text-xs text-muted-foreground">{user?.email || 'user@email.com'}</p>

View File

@@ -2,7 +2,7 @@
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
LayoutDashboard,
Ticket,
@@ -13,6 +13,7 @@ import {
BarChart3,
Settings,
LogOut,
LogIn,
ChevronLeft,
ChevronRight,
Train,
@@ -61,6 +62,7 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
{ name: 'Bookings', href: '/bookings', icon: Ticket, permission: PERMS.bookings.view },
{ name: 'Passengers', href: '/passengers', icon: Users, permission: PERMS.passengers.view },
{ name: 'Tickets', href: '/tickets', icon: FileText, permission: PERMS.tickets.view },
{ name: 'Boarding', href: '/boarding', icon: LogIn, permission: PERMS.tickets.view },
{ name: 'Luggage', href: '/excess-baggage', icon: Banknote, permission: PERMS.bookings.view },
]
},
@@ -86,10 +88,11 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
{
title: 'Financial',
items: [
{ name: 'Pricing & Fares', href: '/pricing', icon: DollarSign, permission: PERMS.admin },
{ name: 'Currencies', href: '/currencies', icon: Banknote, permission: PERMS.currencies.manage },
{ name: 'Payments', href: '/payments', icon: CreditCard, permission: PERMS.payments.view },
{ name: 'Promo Codes', href: '/promos', icon: Gift, permission: PERMS.admin },
{ name: 'Pricing & Fares', href: '/pricing', icon: DollarSign, permission: PERMS.admin },
// { name: 'Configurable Fares', href: '/fare-management', icon: Settings, permission: PERMS.admin },
{ name: 'Currencies', href: '/currencies', icon: Banknote, permission: PERMS.currencies.manage },
{ name: 'Payment Methods', href: '/payment-methods', icon: CreditCard, permission: PERMS.payments.view },
{ name: 'Promo Codes', href: '/promos', icon: Gift, permission: PERMS.admin },
]
},
{
@@ -134,12 +137,40 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
}
];
// Hook to detect mobile devices
function useIsMobile() {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkIsMobile = () => {
setIsMobile(window.innerWidth < 768); // md breakpoint
};
// Check on mount
checkIsMobile();
// Listen for resize events
window.addEventListener('resize', checkIsMobile);
return () => window.removeEventListener('resize', checkIsMobile);
}, []);
return isMobile;
}
export default function Sidebar() {
const pathname = usePathname();
const { user, logout, hasPermission } = useAuthStore();
const { isDark, toggleTheme } = useTheme();
const isMobile = useIsMobile();
// Initialize collapsed state based on mobile detection
const [isCollapsed, setIsCollapsed] = useState(false);
// Update collapsed state when mobile status changes
useEffect(() => {
setIsCollapsed(isMobile);
}, [isMobile]);
return (
<div className={cn(
'flex h-screen flex-col transition-all duration-300',