video preview version

client/src/components/BudgetBar.jsx

@@ -0,0 +1,20 @@
+export default function BudgetBar({ budget, spent, height = 'h-1.5' }) {
+  if (!budget || budget <= 0) return null
+  const pct = Math.min((spent / budget) * 100, 100)
+
+  let color = 'bg-emerald-500'
+  if (pct > 90) color = 'bg-red-500'
+  else if (pct > 70) color = 'bg-amber-500'
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
+        <span>{(spent || 0).toLocaleString()} SAR spent</span>
+        <span>{budget.toLocaleString()} SAR</span>
+      </div>
+      <div className={`${height} bg-surface-tertiary rounded-full overflow-hidden`}>
+        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  )
+}