feat: use modals for creation across all pages + fix profile prompt

- Campaigns: add create modal (name, brand, team, dates, budget)
- PostProduction: add create modal (title, brand, campaign, assignee),
  auto-opens detail panel after creation
- Tasks: add create modal (title, project, priority, assignee),
  auto-opens detail panel after creation
- Fix profileComplete check: use !!user.name instead of !!user.team_role
  in /api/auth/me (was always showing profile prompt since team_role
  is now deprecated in favor of role_id)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

client/src/pages/Campaigns.jsx

@@ -12,8 +12,14 @@ import BrandBadge from '../components/BrandBadge'
 import BudgetBar from '../components/BudgetBar'
 import InteractiveTimeline from '../components/InteractiveTimeline'
 import CampaignDetailPanel from '../components/CampaignDetailPanel'
+import Modal from '../components/Modal'
 import { SkeletonStatCard, SkeletonTable } from '../components/SkeletonLoader'
 
+const EMPTY_CAMPAIGN = {
+  name: '', description: '', brand_id: '', status: 'planning',
+  start_date: '', end_date: '', budget: '', team_id: '',
+}
+
 function ROIBadge({ revenue, spent }) {
   if (!spent || spent <= 0) return null
   const roi = ((revenue - spent) / spent * 100).toFixed(0)
@@ -36,14 +42,17 @@ function MetricCard({ icon: Icon, label, value, color = 'text-text-primary' }) {
 }
 
 export default function Campaigns() {
-  const { brands, getBrandName } = useContext(AppContext)
-  const { lang, currencySymbol } = useLanguage()
+  const { brands, getBrandName, teams } = useContext(AppContext)
+  const { t, lang, currencySymbol } = useLanguage()
   const { permissions } = useAuth()
   const navigate = useNavigate()
   const [campaigns, setCampaigns] = useState([])
   const [loading, setLoading] = useState(true)
   const [panelCampaign, setPanelCampaign] = useState(null)
   const [filters, setFilters] = useState({ brand: '', status: '' })
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [createForm, setCreateForm] = useState({ ...EMPTY_CAMPAIGN })
+  const [createSaving, setCreateSaving] = useState(false)
 
   useEffect(() => { loadCampaigns() }, [])
 
@@ -73,7 +82,34 @@ export default function Campaigns() {
   }
 
   const openNew = () => {
-    setPanelCampaign({ status: 'planning', platforms: [] })
+    setCreateForm({ ...EMPTY_CAMPAIGN })
+    setShowCreateModal(true)
+  }
+
+  const handleCreate = async () => {
+    setCreateSaving(true)
+    try {
+      const data = {
+        name: createForm.name,
+        description: createForm.description,
+        brand_id: createForm.brand_id ? Number(createForm.brand_id) : null,
+        status: createForm.status,
+        start_date: createForm.start_date || null,
+        end_date: createForm.end_date || null,
+        budget: createForm.budget ? Number(createForm.budget) : null,
+        team_id: createForm.team_id ? Number(createForm.team_id) : null,
+      }
+      const created = await api.post('/campaigns', data)
+      setShowCreateModal(false)
+      loadCampaigns()
+      // Navigate to the new campaign detail page
+      const id = created?.Id || created?.id || created?._id
+      if (id) navigate(`/campaigns/${id}`)
+    } catch (err) {
+      console.error('Create campaign failed:', err)
+    } finally {
+      setCreateSaving(false)
+    }
   }
 
   const filtered = campaigns.filter(c => {
@@ -295,7 +331,62 @@ export default function Campaigns() {
         </div>
       </div>
 
-      {/* Campaign Panel */}
+      {/* Create Campaign Modal */}
+      <Modal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} title={t('campaigns.newCampaign') || 'New Campaign'} size="md">
+        <div className="space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.name')} *</label>
+            <input type="text" value={createForm.name} onChange={e => setCreateForm(f => ({ ...f, name: e.target.value }))}
+              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" autoFocus />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.description')}</label>
+            <textarea value={createForm.description} onChange={e => setCreateForm(f => ({ ...f, description: e.target.value }))} rows={2}
+              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 resize-none" />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.brand')}</label>
+              <select value={createForm.brand_id} onChange={e => setCreateForm(f => ({ ...f, brand_id: e.target.value }))}
+                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">
+                <option value="">{t('posts.allBrands')}</option>
+                {brands.map(b => <option key={b.id || b._id} value={b.id || b._id}>{lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('common.team')}</label>
+              <select value={createForm.team_id} onChange={e => setCreateForm(f => ({ ...f, team_id: e.target.value }))}
+                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">
+                <option value="">{t('common.noTeam')}</option>
+                {(teams || []).map(team => <option key={team.id || team._id} value={team.id || team._id}>{team.name}</option>)}
+              </select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.startDate')}</label>
+              <input type="date" value={createForm.start_date} onChange={e => setCreateForm(f => ({ ...f, start_date: e.target.value }))}
+                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-xs font-medium text-text-tertiary mb-1">{t('campaigns.endDate')}</label>
+              <input type="date" value={createForm.end_date} onChange={e => setCreateForm(f => ({ ...f, end_date: e.target.value }))}
+                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>
+          <div>
+            <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.budget')}</label>
+            <input type="number" value={createForm.budget} onChange={e => setCreateForm(f => ({ ...f, budget: e.target.value }))}
+              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" placeholder="0" />
+          </div>
+          <button onClick={handleCreate} disabled={!createForm.name || createSaving}
+            className={`w-full px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${createSaving ? 'btn-loading' : ''}`}>
+            {t('campaigns.newCampaign') || 'Create Campaign'}
+          </button>
+        </div>
+      </Modal>
+
+      {/* Campaign Panel (edit only) */}
       {panelCampaign && (
         <CampaignDetailPanel
           campaign={panelCampaign}