Passenger apss UI and UX updates

apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx

@@ -62,7 +62,7 @@ const navigationSections = [
       { name: 'Coaches', href: '/coaches', icon: Grid3x3 },
       { name: 'Seats', href: '/seats', icon: Armchair },
       { name: 'Schedules', href: '/schedules', icon: Calendar },
-      { name: 'Seat Classes', href: '/seat-classes', icon: Settings },
+      { name: 'Classes', href: '/seat-classes', icon: Settings },
     ]
   },
   {
@@ -70,7 +70,6 @@ const navigationSections = [
     items: [
       { name: 'Pricing & Fares', href: '/pricing', icon: DollarSign },
       { name: 'Payments', href: '/payments', icon: CreditCard },
-      { name: 'Wallet Management', href: '/wallet', icon: Wallet },
       { name: 'Promotions', href: '/promotions', icon: Gift },
     ]
   },

apps/edr-passenger-web/backoffice/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { AlertCircle, AlertTriangle } from 'lucide-react';
+import Modal from './Modal';
+import ActionButton from './ActionButton'
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+  isDanger?: boolean;
+  warning?: string;
+}
+
+export default function ConfirmDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  isLoading = false,
+  isDanger = false,
+  warning,
+}: ConfirmDialogProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
+      <div className="space-y-4">
+        <div className="flex gap-3">
+          {isDanger && (
+            <AlertCircle className="h-6 w-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+          )}
+          <p className="text-foreground">{message}</p>
+        </div>
+        {warning && (
+          <div className="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-3 flex gap-3">
+            <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+            <div>
+              <p className="font-semibold text-amber-900 dark:text-amber-200 text-sm">Warning</p>
+              <p className="text-amber-800 dark:text-amber-300 text-sm mt-1">{warning}</p>
+            </div>
+          </div>
+        )}
+        <div className="flex justify-end gap-2 pt-4">
+          <ActionButton variant="secondary" onClick={onClose} disabled={isLoading}>
+            {cancelText}
+          </ActionButton>
+          <ActionButton
+            variant={isDanger ? 'danger' : 'primary'}
+            onClick={onConfirm}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Processing...' : confirmText}
+          </ActionButton>
+        </div>
+      </div>
+    </Modal>
+  );
+}

apps/edr-passenger-web/backoffice/src/components/ui/Modal.tsx

@@ -35,8 +35,8 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed inset-0 bg-black bg-opacity-50" onClick={onClose} />
-      <div className={`relative w-full ${sizeClasses[size]} rounded-lg bg-background p-6 shadow-xl`}>
-        <div className="mb-4 flex items-center justify-between">
+      <div className={`relative w-full ${sizeClasses[size]} rounded-lg bg-background shadow-xl flex flex-col max-h-[90vh]`}>
+        <div className="sticky top-0 bg-background border-b border-muted px-6 py-4 flex items-center justify-between z-10">
           <h2 className="text-xl font-semibold text-foreground">{title}</h2>
           <button
             onClick={onClose}
@@ -45,7 +45,9 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
             <X className="h-5 w-5 text-muted-foreground" />
           </button>
         </div>
-        <div>{children}</div>
+        <div className="overflow-y-auto flex-1 px-6 py-4">
+          {children}
+        </div>
       </div>
     </div>
   );