From 7554b1cb5627a1b47f3ca233e6ff1f521b0ceb86 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Mon, 23 Feb 2026 15:40:10 +0300
Subject: [PATCH] Add language selection to profile completion wizard

Users can choose English or Arabic during profile setup. The
selection is applied immediately via the existing LanguageContext.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/src/App.jsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1ee919a..e226545 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -48,7 +48,7 @@ export const AppContext = createContext()
 
 function AppContent() {
   const { user, loading: authLoading, checkAuth, hasModule } = useAuth()
-  const { t, lang } = useLanguage()
+  const { t, lang, setLang } = useLanguage()
   const [teamMembers, setTeamMembers] = useState([])
   const [brands, setBrands] = useState([])
   const [teams, setTeams] = useState([])
@@ -209,6 +209,31 @@ function AppContent() {
               className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
             />
           </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('settings.language')}</label>
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                onClick={() => setLang('en')}
+                className={`p-3 rounded-lg border-2 text-center transition-all ${
+                  lang === 'en' ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/30'
+                }`}
+              >
+                <div className="text-lg mb-1">EN</div>
+                <div className="text-xs font-medium text-text-primary">English</div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setLang('ar')}
+                className={`p-3 rounded-lg border-2 text-center transition-all ${
+                  lang === 'ar' ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/30'
+                }`}
+              >
+                <div className="text-lg mb-1">ع</div>
+                <div className="text-xs font-medium text-text-primary">العربية</div>
+              </button>
+            </div>
+          </div>
           <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
             <button
               onClick={() => setShowProfileModal(false)}