feat: ( permissions ) enforce specific permission keys across API and backoffice

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

@@ -9,6 +9,9 @@ import ActionButton from '@/components/ui/ActionButton';
 import Modal from '@/components/ui/Modal';
 import { fraudApi } from '@/lib/api';
 import { formatDateTime } from '@/lib/utils';
+import { PermissionGuard } from '@/components/layout/PermissionGuard';
+import { PERMS } from '@/lib/permissions';
+import { useWritePermission } from '@/lib/use-permission';
 
 const Field = ({ label, value, mono = false, truncate = false }: { label: string; value: string; mono?: boolean; truncate?: boolean }) => (
   <div className="bg-muted/40 rounded-lg p-3">
@@ -30,11 +33,13 @@ const SEVERITY_GRAD: Record<string, string> = {
   LOW:      'from-blue-500 to-blue-600',
 };
 
-export default function FraudDetectionPage() {
+function FraudDetectionPageContent() {
   const [filters, setFilters] = useState({ search: '', severity: '', status: '' });
   const [selected, setSelected] = useState<any>(null);
   const queryClient = useQueryClient();
 
+  const canManageFraud = useWritePermission(PERMS.fraud.edit, PERMS.fraud.manage);
+
   const { data, isLoading } = useQuery({
     queryKey: ['fraud-alerts', filters],
     queryFn: () => fraudApi.getAlerts(filters),
@@ -130,10 +135,11 @@ export default function FraudDetectionPage() {
       onClick: handleAcknowledge,
       variant: 'primary' as const,
       icon: CheckCircle,
-      show: (alert: any) => !alert.acknowledged,
+      show: (alert: any) => canManageFraud && !alert.acknowledged,
     },
     {
       label: 'Block User',
+      show: () => canManageFraud,
       onClick: handleBlockUser,
       variant: 'danger' as const,
       icon: Ban,
@@ -301,3 +307,11 @@ export default function FraudDetectionPage() {
     </div>
   );
 }
+
+export default function FraudDetectionPage() {
+  return (
+    <PermissionGuard permission={PERMS.fraud.view}>
+      <FraudDetectionPageContent />
+    </PermissionGuard>
+  );
+}