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

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

@@ -14,6 +14,12 @@ interface ActionButtonProps {
   loading?: boolean;
   className?: string;
   type?: 'button' | 'submit' | 'reset';
+  /**
+   * Native tooltip. CLAUDE.md asks for a disabled control with a visible reason
+   * over a silently hidden one, so permission-gated buttons pass the reason here
+   * alongside `disabled`.
+   */
+  title?: string;
 }
 
 const variants = {
@@ -40,6 +46,7 @@ export default function ActionButton({
   loading = false,
   className,
   type = 'button',
+  title,
 }: ActionButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -63,6 +70,7 @@ export default function ActionButton({
       type={type}
       onClick={handleClick}
       disabled={isDisabled}
+      title={title}
       className={cn(
         'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all duration-200',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(20,113,76)]',