fahed/marketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard fix, expense system, currency settings, visual upgrade

Browse Source 
- 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>
This commit is contained in:
fahed
2026-02-15 15:49:28 +03:00
parent f3e6fc848d
commit e76be78498
17 changed files with 2817 additions and 1379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
client/src/components/Sidebar.jsx
View File

@@ -1,34 +1,99 @@
import { useContext } from 'react'
import { useState, useContext } from 'react'
import { NavLink } from 'react-router-dom'
import {
LayoutDashboard, FileEdit, Image, Calendar, Wallet,
FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, Sparkles, Shield, LogOut, User, Settings, Languages, Tag
FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, ChevronDown,
Sparkles, Shield, LogOut, User, Settings, Languages, Tag, LayoutList, Receipt, BarChart3
} from 'lucide-react'
import { useAuth } from '../contexts/AuthContext'
import { useLanguage } from '../i18n/LanguageContext'
const navItems = [
// Standalone items (no category)
const standaloneTop = [
{ to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard', end: true, tutorial: 'dashboard' },
{ to: '/campaigns', icon: Calendar, labelKey: 'nav.campaigns', tutorial: 'campaigns' },
{ to: '/finance', icon: Wallet, labelKey: 'nav.finance', minRole: 'manager' },
{ to: '/posts', icon: FileEdit, labelKey: 'nav.posts', tutorial: 'posts' },
{ to: '/assets', icon: Image, labelKey: 'nav.assets', tutorial: 'assets' },
{ to: '/projects', icon: FolderKanban, labelKey: 'nav.projects' },
{ to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
]
// Grouped items by module
const moduleGroups = [
{
module: 'marketing',
labelKey: 'modules.marketing',
icon: Calendar,
items: [
{ to: '/campaigns', icon: Calendar, labelKey: 'nav.campaigns', tutorial: 'campaigns' },
{ to: '/posts', icon: FileEdit, labelKey: 'nav.posts', tutorial: 'posts' },
{ to: '/assets', icon: Image, labelKey: 'nav.assets', tutorial: 'assets' },
{ to: '/brands', icon: Tag, labelKey: 'nav.brands' },
],
},
{
module: 'projects',
labelKey: 'modules.projects',
icon: FolderKanban,
items: [
{ to: '/projects', icon: LayoutList, labelKey: 'nav.projects' },
{ to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
],
},
{
module: 'finance',
labelKey: 'modules.finance',
icon: Wallet,
minRole: 'manager',
items: [
{ to: '/finance', icon: BarChart3, labelKey: 'nav.financeDashboard' },
{ to: '/budgets', icon: Receipt, labelKey: 'nav.budgets' },
],
},
]
const standaloneBottom = [
{ to: '/team', icon: Users, labelKey: 'nav.team', tutorial: 'team' },
{ to: '/brands', icon: Tag, labelKey: 'nav.brands' },
]
const ROLE_LEVEL = { contributor: 0, manager: 1, superadmin: 2 }
export default function Sidebar({ collapsed, setCollapsed }) {
const { user: currentUser, logout } = useAuth()
const { user: currentUser, logout, hasModule } = useAuth()
const { t, lang, setLang } = useLanguage()
const userLevel = ROLE_LEVEL[currentUser?.role] ?? 0
const visibleItems = navItems.filter(item => {
if (!item.minRole) return true
return userLevel >= (ROLE_LEVEL[item.minRole] ?? 0)
// Track expanded state for each module group
const [expandedGroups, setExpandedGroups] = useState(() => {
const initial = {}
moduleGroups.forEach(g => { initial[g.module] = true })
return initial
})
const toggleGroup = (module) => {
setExpandedGroups(prev => ({ ...prev, [module]: !prev[module] }))
}
const navLink = ({ to, icon: Icon, labelKey, end, tutorial }, { sub = false } = {}) => (
<NavLink
key={to}
to={to}
end={end}
data-tutorial={tutorial}
className={({ isActive }) =>
`flex items-center gap-3 rounded-lg font-medium transition-all duration-200 group ${
sub ? 'px-3 py-1.5 ms-5 text-[13px]' : 'px-3 py-2 text-sm'
} ${
isActive
? 'bg-white/15 text-white shadow-sm sidebar-active-glow'
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
}`
}
>
<Icon className={`${sub ? 'w-3.5 h-3.5' : 'w-5 h-5'} shrink-0`} />
{!collapsed && <span className="animate-fade-in whitespace-nowrap">{t(labelKey)}</span>}
</NavLink>
)
const visibleGroups = moduleGroups.filter(group => {
if (!hasModule(group.module)) return false
if (group.minRole && userLevel < (ROLE_LEVEL[group.minRole] ?? 0)) return false
return true
})
return (
@@ -39,7 +104,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
>
{/* Logo */}
<div className="flex items-center gap-3 px-4 h-16 border-b border-white/10 shrink-0">
<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center shrink-0">
<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-400 via-purple-500 to-pink-500 flex items-center justify-center shrink-0 shadow-lg shadow-indigo-500/30">
<Sparkles className="w-5 h-5 text-white" />
</div>
{!collapsed && (
@@ -51,32 +116,53 @@ export default function Sidebar({ collapsed, setCollapsed }) {
</div>
{/* Navigation */}
<nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
{visibleItems.map(({ to, icon: Icon, labelKey, end, tutorial }) => (
<NavLink
key={to}
to={to}
end={end}
data-tutorial={tutorial}
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
isActive
? 'bg-white/15 text-white shadow-sm'
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
}`
}
>
<Icon className="w-5 h-5 shrink-0" />
{!collapsed && <span className="animate-fade-in whitespace-nowrap">{t(labelKey)}</span>}
</NavLink>
))}
<nav className="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
{/* Dashboard (always visible, standalone) */}
{standaloneTop.map(item => navLink(item))}
{/* Module groups */}
{visibleGroups.map(group => {
const GroupIcon = group.icon
const isExpanded = expandedGroups[group.module]
if (collapsed) {
// When collapsed, just show the sub-item icons
return group.items.map(item => navLink(item))
}
return (
<div key={group.module} className="mt-3">
{/* Category header */}
<button
onClick={() => toggleGroup(group.module)}
className="w-full flex items-center gap-2 px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-on-dark-muted hover:text-white transition-colors rounded-lg hover:bg-white/5"
>
<GroupIcon className="w-4 h-4 shrink-0 opacity-70" />
<span className="flex-1 text-start">{t(group.labelKey)}</span>
<ChevronDown className={`w-3.5 h-3.5 opacity-60 transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
</button>
{/* Sub-items */}
{isExpanded && (
<div className="space-y-0.5 mt-0.5">
{group.items.map(item => navLink(item, { sub: true }))}
</div>
)}
</div>
)
})}
{/* Team (always visible) */}
<div className="mt-3 pt-2 border-t border-white/8">
{standaloneBottom.map(item => navLink(item))}
</div>
{/* Superadmin Only: Users Management */}
{currentUser?.role === 'superadmin' && (
<NavLink
to="/users"
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
isActive
? 'bg-white/15 text-white shadow-sm'
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
@@ -92,7 +178,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
<NavLink
to="/settings"
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
isActive
? 'bg-white/15 text-white shadow-sm'
: 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
@@ -123,7 +209,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
</div>
</div>
)}
{!collapsed && (
<>
{/* Language Toggle */}
@@ -149,7 +235,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
</div>
</>
)}
{/* Collapse toggle */}
<div className="p-3 border-t border-white/10">
<button