Dashboard fix, expense system, currency settings, visual upgrade

- 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>

client/src/components/BudgetBar.jsx

@@ -1,4 +1,7 @@
+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)
 
@@ -9,8 +12,8 @@ export default function BudgetBar({ budget, spent, height = 'h-1.5' }) {
   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>
+        <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}%` }} />