video preview version

client/src/pages/Campaigns.jsx

@@ -10,6 +10,7 @@ import CampaignCalendar from '../components/CampaignCalendar'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
 import Modal from '../components/Modal'
+import BudgetBar from '../components/BudgetBar'
 
 const EMPTY_CAMPAIGN = {
   name: '', description: '', brand_id: '', status: 'planning',
@@ -17,23 +18,6 @@ const EMPTY_CAMPAIGN = {
   budget_spent: '', revenue: '', impressions: '', clicks: '', conversions: '', cost_per_click: '', notes: '',
 }
 
-function BudgetBar({ budget, spent }) {
-  if (!budget || budget <= 0) return null
-  const pct = Math.min((spent / budget) * 100, 100)
-  const color = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
-  return (
-    <div className="w-full">
-      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
-        <span>{spent?.toLocaleString() || 0} SAR spent</span>
-        <span>{budget?.toLocaleString()} SAR</span>
-      </div>
-      <div className="h-1.5 bg-surface-tertiary rounded-full overflow-hidden">
-        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
-      </div>
-    </div>
-  )
-}
-
 function ROIBadge({ revenue, spent }) {
   if (!spent || spent <= 0) return null
   const roi = ((revenue - spent) / spent * 100).toFixed(0)