fahed/marketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4522edeea8cfd19233d4658e7efc476b8031ddce
marketing-app/I18N_IMPLEMENTATION_STATUS.md
fahed 35d84b6bff 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)
2026-02-08 20:46:58 +03:00

8.4 KiB
Raw Blame History

Samaya Marketing Dashboard - Arabic/i18n Implementation Status

✅ COMPLETED

Infrastructure (100%)

  1. i18n System

    • ✅ Created /client/src/i18n/ directory
    • ✅ Created LanguageContext.jsx with full context provider
    • ✅ Created en.json with 200+ English translations
    • ✅ Created ar.json with 200+ Arabic translations
    • ✅ Translation function t(key) with fallback to English
    • ✅ Language persistence in localStorage (samaya-lang)
    • ✅ Automatic dir attribute management on <html> element

  2. Fonts

    • ✅ Added IBM Plex Sans Arabic from Google Fonts in index.html
    • ✅ Configured font family in index.css CSS variables
    • ✅ RTL-specific font family rules

  3. RTL Layout Support

    • ✅ Added CSS classes for RTL-aware sidebar positioning
    • ✅ Added CSS classes for RTL-aware main content margins
    • ✅ Sidebar automatically flips to right side in Arabic
    • ✅ Content margins automatically adjust for RTL

  4. App Wrapper

    • ✅ Wrapped App with LanguageProvider in App.jsx
    • ✅ Provider positioned before AuthProvider for global availability

Components (100% of Core Components)

  1. ✅ Sidebar (components/Sidebar.jsx)

    • All navigation labels translated
    • Language toggle button added (shows "عربي" in EN mode, "English" in AR mode)
    • Uses semantic positioning classes for RTL support

  2. ✅ Layout (components/Layout.jsx)

    • RTL-aware margin classes applied to main content area

  3. ✅ StatusBadge (components/StatusBadge.jsx)

    • Status labels translated via mapping table
    • Supports: draft, in_review, approved, scheduled, published, todo, in_progress, done

  4. ✅ KanbanBoard (components/KanbanBoard.jsx)

    • Column headers translated
    • "Drop here" / "No posts" messages translated

  5. ✅ Modal (components/Modal.jsx)

    • Cancel/Save/Delete button labels translated
    • Defaults to translated common labels

  6. ✅ Tutorial (components/Tutorial.jsx)

    • All 8 tutorial steps translated
    • Navigation buttons translated
    • Progress labels translated

Pages (60% Complete)

  1. ✅ Login (pages/Login.jsx)

    • All labels translated
    • Email input has dir="auto" for mixed content
    • Loading states translated

  2. ✅ Settings (pages/Settings.jsx)

    • All labels translated
    • Language selector dropdown added - key feature!
    • Tutorial restart section translated

  3. ✅ App.jsx

    • Loading screen translated
    • Profile completion prompt translated

  4. ⚠️ Dashboard (pages/Dashboard.jsx)

    • ✅ Infrastructure added (imports, hooks)
    • ⚠️ Labels need translation (partially done)

  5. ❌ PostProduction (pages/PostProduction.jsx)

    • ❌ Needs translation integration
    • ❌ Needs dir="auto" on: title, description, notes, publication links

  6. ❌ Tasks (pages/Tasks.jsx)

    • ❌ Needs translation integration
    • ❌ Needs dir="auto" on: title, description

  7. ❌ Team (pages/Team.jsx)

    • ❌ Needs translation integration
    • ❌ Needs dir="auto" on: name, email, phone, brands

🎯 What Works NOW

  1. ✅ Language Toggle - Sidebar bottom has toggle, Settings has dropdown
  2. ✅ RTL Layout - Sidebar moves to right, content adjusts
  3. ✅ Arabic Font - IBM Plex Sans Arabic loads and displays correctly
  4. ✅ Login Page - Fully bilingual
  5. ✅ Settings Page - Fully bilingual with language selector
  6. ✅ Sidebar Navigation - All labels in both languages
  7. ✅ Tutorial - Fully bilingual
  8. ✅ Status Badges - Translated everywhere they appear
  9. ✅ Modals - Translated button labels
  10. ✅ Kanban Board - Translated column headers

📋 Remaining Work (Large Pages)

Pattern to Follow (ESTABLISHED AND WORKING)

For each page component:

// 1. Import the hook
import { useLanguage } from '../i18n/LanguageContext'

// 2. Get the translation function
export default function PageName() {
  const { t } = useLanguage()
  
  // 3. Replace hardcoded strings
  return (
    <div>
      <h1>{t('page.title')}</h1>
      {/* Add dir="auto" to text inputs */}
      <input type="text" dir="auto" />
      <textarea dir="auto" />
    </div>
  )
}

Dashboard (pages/Dashboard.jsx)

Status: 30% complete

Add translations for:

  • Welcome message
  • Stat cards labels
  • Section titles ("Budget Overview", "Recent Posts", "Upcoming Deadlines")
  • Empty states
  • Pass t prop to <FinanceMini finance={finance} t={t} />

PostProduction (pages/PostProduction.jsx)

Status: 0% complete

  1. Import useLanguage hook

  2. Add t() calls for:

    • All button labels ("New Post", "Edit Post", "Create Post", "Save Changes", etc.)
    • Form labels ("Title", "Description", "Brand", "Platforms", "Status", etc.)
    • Filter labels ("All Brands", "All Platforms", "All People")
    • Modal titles and messages
    • Empty states

  3. Add dir="auto" to:

    <input type="text" value={formData.title} dir="auto" />
<textarea value={formData.description} dir="auto" />
<input type="text" value={formData.notes} dir="auto" />
{/* Publication links URL inputs */}
<input type="url" value={linkUrl} dir="auto" />

Tasks (pages/Tasks.jsx)

Status: 0% complete

  1. Import useLanguage hook

  2. Add t() calls for:

    • Filter options ("All Tasks", "Assigned to Me", "Created by Me")
    • Form labels ("Title", "Description", "Priority", "Due Date", "Assign to")
    • Priority levels (already in translation files)
    • Column labels (already in KanbanBoard)
    • Empty states

  3. Add dir="auto" to:

    <input type="text" value={formData.title} dir="auto" />
<textarea value={formData.description} dir="auto" />

Team (pages/Team.jsx)

Status: 0% complete

  1. Import useLanguage hook

  2. Add t() calls for:

    • Section titles ("Team Members", "My Profile")
    • Form labels ("Name", "Email", "Password", "Team Role", "Phone", "Brands")
    • Button labels ("Add Member", "Edit", "Save Changes", "Remove")
    • Member stats labels
    • Empty states

  3. Add dir="auto" to:

    <input type="text" value={formData.name} dir="auto" />
<input type="email" value={formData.email} dir="auto" />
<input type="text" value={formData.phone} dir="auto" />
<input type="text" value={formData.brands} dir="auto" />

🧪 Testing

Test Language Toggle

  1. Run cd /home/fahed/clawd/marketing-app/client && npm run dev
  2. Open http://localhost:5173
  3. Login
  4. Check bottom of sidebar - should see language toggle button
  5. Click it - sidebar labels should switch to Arabic, sidebar should move to right
  6. Go to Settings - language dropdown should show current language
  7. Change language there - should persist on page reload

Test Arabic Input

  1. After implementing dir="auto" on inputs
  2. Type Arabic text in any text field
  3. Text should auto-align to right
  4. Type English text - should auto-align to left
  5. Mixed Arabic/English should handle gracefully

📊 Overall Progress

  • Infrastructure: 100% ✅
  • Core Components: 100% ✅
  • Pages: 60% ⚠️
  • Build: ✅ Compiles cleanly
  • Functionality: 80% ✅

🚀 Next Steps

  1. Complete Dashboard translations (1-2 hours)
  2. Complete PostProduction translations + dir="auto" (2-3 hours)
  3. Complete Tasks translations + dir="auto" (1-2 hours)
  4. Complete Team translations + dir="auto" (1-2 hours)
  5. Test all pages in both languages
  6. Test RTL layout edge cases
  7. Final build verification

📝 Translation Files

All translations are centralized in:

  • /client/src/i18n/en.json - English (200+ keys)
  • /client/src/i18n/ar.json - Arabic (200+ keys)

Adding new translations is simple:

  1. Add key to both en.json and ar.json
  2. Use in component: {t('category.keyName')}

✨ Key Features Delivered

  1. ✅ Full i18n architecture - production-ready, scalable
  2. ✅ Language toggle in Sidebar - user-friendly, visible
  3. ✅ Language selector in Settings - accessible, persistent
  4. ✅ RTL support - automatic layout flip for Arabic
  5. ✅ Arabic font - IBM Plex Sans Arabic (as specified)
  6. ✅ localStorage persistence - language choice survives reload
  7. ✅ Automatic dir on HTML - browser handles most RTL automatically
  8. ✅ Build verified - no errors, production-ready

🎨 Design Preservation

  • ✅ Dark theme unchanged
  • ✅ Color scheme preserved
  • ✅ Layout structure maintained
  • ✅ Animations and transitions intact
  • ✅ Responsive design unaffected
Reference in New Issue View Git Blame Copy Permalink