Merge pull request #1309 from Tria-plc/alpha

feat: ( backoffice ) gate Master Data pages and sidebar on view permi…

apps/edr-passenger-web/backoffice/src/app/classes/page.tsx

@@ -10,8 +10,10 @@ import Modal from '@/components/ui/Modal';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import { seatClassesApi, apiClient } from '@/lib/api';
 import { formatCurrency } from '@/lib/utils';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
-export default function ClassesPage() {
+function ClassesPageContent() {
   const [filters, setFilters] = useState({ search: '' });
   const [showModal, setShowModal] = useState(false);
   const [editingClass, setEditingClass] = useState<any>(null);
@@ -352,3 +354,11 @@ export default function ClassesPage() {
     </div>
   );
 }
+
+export default function ClassesPage() {
+  return (
+    <PermissionGuard permission={PERMS.classes.view}>
+      <ClassesPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/coaches/page.tsx

@@ -10,6 +10,8 @@ import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import { fleetApi, apiClient } from '@/lib/api';
 import Pagination from '@/components/ui/Pagination';
 import { usePagination } from '@/lib/use-pagination';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
 type Tab = 'types' | 'coaches' | 'utilization';
 
@@ -142,7 +144,7 @@ const renderBedVisualization = (coach: any) => {
   );
 };
 
-export default function CoachesPage() {
+function CoachesPageContent() {
   const [activeTab, setActiveTab] = useState<Tab>('coaches');
   const [search, setSearch] = useState('');
   const [showModal, setShowModal] = useState(false);
@@ -929,3 +931,11 @@ export default function CoachesPage() {
     </div>
   );
 }
+
+export default function CoachesPage() {
+  return (
+    <PermissionGuard permission={PERMS.coaches.view}>
+      <CoachesPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/routes/page.tsx

@@ -11,6 +11,8 @@ import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import { routesApi } from '@/lib/api/routes';
 import { stationsApi, fleetApi, routeCoachTemplatesApi } from '@/lib/api';
 import { eatLocalToISO, isoToEATLocal } from '@/lib/timezone';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
 interface RouteStop {
   stationId: string;
@@ -166,7 +168,7 @@ function RouteCoachesTab({ routes }: { routes: any[] }) {
   );
 }
 
-export default function RoutesPage() {
+function RoutesPageContent() {
   const [activeTab, setActiveTab] = useState<Tab>('routes');
   const [showModal, setShowModal] = useState(false);
   const [editingRoute, setEditingRoute] = useState<any>(null);
@@ -922,3 +924,11 @@ export default function RoutesPage() {
     </div>
   );
 }
+
+export default function RoutesPage() {
+  return (
+    <PermissionGuard permission={PERMS.routes.view}>
+      <RoutesPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/schedules/page.tsx

@@ -14,6 +14,8 @@ import { usePagination } from '@/lib/use-pagination';
 import { formatDateTime } from '@/lib/utils';
 import { eatLocalToISO, isoToEATLocal } from '@/lib/timezone';
 import DateTimePicker from '@/components/ui/DateTimePicker';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
 interface Schedule {
   id: string;
@@ -52,7 +54,7 @@ interface Coach {
   coachType?: { name: string };
 }
 
-export default function SchedulesPage() {
+function SchedulesPageContent() {
   const [showModal, setShowModal] = useState(false);
   const [showAddModal, setShowAddModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
@@ -1248,3 +1250,11 @@ export default function SchedulesPage() {
     </div>
   );
 }
+
+export default function SchedulesPage() {
+  return (
+    <PermissionGuard permission={PERMS.schedules.view}>
+      <SchedulesPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/seats/page.tsx

@@ -6,6 +6,7 @@ import { seatsApi, schedulesApi, fleetApi, routeCoachTemplatesApi, bookingsApi }
 import { routesApi } from '@/lib/api/routes';
 import { usePermissionStrict } from '@/lib/use-permission';
 import { PERMS } from '@/lib/permissions';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
 import Modal from '@/components/ui/Modal';
 import ActionButton from '@/components/ui/ActionButton'
 import { Armchair, Lock, Unlock, Bed, X, RotateCcw, ChevronDown, Train, Wrench, Ticket as TicketIcon } from 'lucide-react';
@@ -15,7 +16,7 @@ import {
   SeatBlockReasonCategory,
 } from '@edr/types';
 
-export default function SeatsPage() {
+function SeatsPageContent() {
   const [activeTab, setActiveTab] = useState<'route' | 'schedule'>('route');
   const [selectedSchedule, setSelectedSchedule] = useState('');
   const [selectedRoute, setSelectedRoute] = useState('');
@@ -1491,3 +1492,11 @@ function SeatIcon({
     </div>
   );
 }
+
+export default function SeatsPage() {
+  return (
+    <PermissionGuard permission={PERMS.seats.view}>
+      <SeatsPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/stations/page.tsx

@@ -11,8 +11,10 @@ import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import { stationsApi } from '@/lib/api';
 import Pagination from '@/components/ui/Pagination';
 import { usePagination } from '@/lib/use-pagination';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
-export default function StationsPage() {
+function StationsPageContent() {
   const [filters, setFilters] = useState({ search: '', country: '', operational: '' });
   const [showModal, setShowModal] = useState(false);
   const [editingStation, setEditingStation] = useState<any>(null);
@@ -379,3 +381,11 @@ export default function StationsPage() {
     </div>
   );
 }
+
+export default function StationsPage() {
+  return (
+    <PermissionGuard permission={PERMS.stations.view}>
+      <StationsPageContent />
+    </PermissionGuard>
+  );
+}

apps/edr-passenger-web/backoffice/src/app/trains/page.tsx

@@ -13,8 +13,10 @@ import Pagination from '@/components/ui/Pagination';
 import { usePagination } from '@/lib/use-pagination';
 import { Train as TrainType } from '@/types';
 import { formatDate } from '@/lib/utils';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
 
-export default function TrainsPage() {
+function TrainsPageContent() {
   const [showModal, setShowModal] = useState(false);
   const [editingTrain, setEditingTrain] = useState<TrainType | null>(null);
   const [search, setSearch] = useState('');
@@ -366,3 +368,11 @@ export default function TrainsPage() {
     </div>
   );
 }
+
+export default function TrainsPage() {
+  return (
+    <PermissionGuard permission={PERMS.trains.view}>
+      <TrainsPageContent />
+    </PermissionGuard>
+  );
+}

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

@@ -81,13 +81,13 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
   {
     title: 'Master Data',
     items: [
-      { name: 'Stations',   href: '/stations',   icon: MapPin },
+      { name: 'Stations',   href: '/stations',   icon: MapPin,   permission: PERMS.stations.view },
-      { name: 'Trains',     href: '/trains',     icon: Train },
+      { name: 'Trains',     href: '/trains',     icon: Train,    permission: PERMS.trains.view },
-      { name: 'Coaches',    href: '/coaches',    icon: Grid3x3 },
+      { name: 'Coaches',    href: '/coaches',    icon: Grid3x3,  permission: PERMS.coaches.view },
-      { name: 'Seats',      href: '/seats',      icon: Armchair },
+      { name: 'Seats',      href: '/seats',      icon: Armchair, permission: PERMS.seats.view },
-      { name: 'Classes',    href: '/classes',    icon: Settings },
+      { name: 'Classes',    href: '/classes',    icon: Settings, permission: PERMS.classes.view },
-      { name: 'Routes',     href: '/routes',     icon: Route },
+      { name: 'Routes',     href: '/routes',     icon: Route,    permission: PERMS.routes.view },
-      { name: 'Schedules',  href: '/schedules',  icon: Calendar },
+      { name: 'Schedules',  href: '/schedules',  icon: Calendar, permission: PERMS.schedules.view },
     ]
   },
   {