e76be78498
- Fix Dashboard stat card: show "Budget Remaining" instead of "Budget Spent" with correct remaining value accounting for campaign allocations - Add expense system: budget entries now have income/expense type with server-side split, per-campaign and per-project expense tracking, colored amounts, type filters, and summary bar in Budgets page - Add configurable currency in Settings (SAR default, supports 10 currencies) replacing all hardcoded SAR references across the app - Replace PiggyBank icon with Landmark (culturally appropriate for KSA) - Visual upgrade: mesh background, gradient text, premium stat cards with accent bars, section-card containers, sidebar active glow - UX polish: consistent text-2xl headers, skeleton loaders for Finance and Budgets pages - Finance page: expenses column in campaign/project breakdown tables, ROI accounts for expenses, expense stat card Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
24 lines
873 B
JavaScript
24 lines
873 B
JavaScript
import { useLanguage } from '../i18n/LanguageContext'
|
|
|
|
export default function BudgetBar({ budget, spent, height = 'h-1.5' }) {
|
|
const { currencySymbol } = useLanguage()
|
|
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()} {currencySymbol} spent</span>
|
|
<span>{budget.toLocaleString()} {currencySymbol}</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>
|
|
)
|
|
}
|