Marketing Hub: RBAC, i18n (AR/EN), tasks overhaul, team/user merge, tutorial

Features:
- Full RBAC with 3 roles (superadmin/manager/contributor)
- Ownership tracking on posts, tasks, campaigns, projects
- Task system: assign to anyone, filter combobox, visibility scoping
- Team members merged into users table (single source of truth)
- Post thumbnails on kanban cards from attachments
- Publication link validation before publishing
- Interactive onboarding tutorial with Settings restart
- Full Arabic/English i18n with RTL layout support
- Language toggle in sidebar, IBM Plex Sans Arabic font
- Brand-based visibility filtering for non-superadmins
- Manager can only create contributors
- Profile completion flow for new users
- Cookie-based sessions (express-session + SQLite)

client/src/components/Modal.jsx

@@ -0,0 +1,122 @@
+import { useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { X, AlertTriangle } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+
+export default function Modal({ 
+  isOpen, 
+  onClose, 
+  title, 
+  children, 
+  size = 'md',
+  // Confirmation mode props
+  isConfirm = false,
+  confirmText,
+  cancelText,
+  onConfirm,
+  danger = false,
+}) {
+  const { t } = useLanguage()
+  
+  // Default translations
+  const finalConfirmText = confirmText || (danger ? t('common.delete') : t('common.save'))
+  const finalCancelText = cancelText || t('common.cancel')
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+  }
+
+  // Confirmation dialog
+  if (isConfirm) {
+    return createPortal(
+      <div className="fixed inset-0 z-[9999] flex items-center justify-center px-4">
+        {/* Backdrop */}
+        <div
+          className="fixed inset-0 bg-black/40 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        
+        {/* Modal content */}
+        <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md animate-scale-in">
+          <div className="p-6">
+            {danger && (
+              <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
+                <AlertTriangle className="w-6 h-6 text-red-600" />
+              </div>
+            )}
+            <h3 className="text-lg font-semibold text-text-primary text-center mb-2">{title}</h3>
+            <div className="text-sm text-text-secondary text-center mb-6">
+              {children}
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={onClose}
+                className="flex-1 px-4 py-2.5 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg transition-colors"
+              >
+                {finalCancelText}
+              </button>
+              <button
+                onClick={() => {
+                  onConfirm?.();
+                  onClose();
+                }}
+                className={`flex-1 px-4 py-2.5 text-sm font-medium text-white rounded-lg shadow-sm transition-colors ${
+                  danger 
+                    ? 'bg-red-600 hover:bg-red-700' 
+                    : 'bg-brand-primary hover:bg-brand-primary-light'
+                }`}
+              >
+                {finalConfirmText}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      document.body
+    )
+  }
+
+  // Regular modal
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] px-4">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/40 backdrop-blur-sm"
+        onClick={onClose}
+      />
+      
+      {/* Modal content */}
+      <div className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeClasses[size]} max-h-[80vh] flex flex-col animate-scale-in`}>
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
+          <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        
+        {/* Body */}
+        <div className="px-6 py-4 overflow-y-auto flex-1">
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}