adding brand management

client/src/components/PostCard.jsx

@@ -1,13 +1,17 @@
+import { useContext } from 'react'
 import { format } from 'date-fns'
 import { ArrowRight } from 'lucide-react'
 import { getInitials } from '../utils/api'
 import { useLanguage } from '../i18n/LanguageContext'
+import { AppContext } from '../App'
 import BrandBadge from './BrandBadge'
 import StatusBadge from './StatusBadge'
 import { PlatformIcons } from './PlatformIcon'
 
 export default function PostCard({ post, onClick, onMove, compact = false }) {
   const { t } = useLanguage()
+  const { getBrandName } = useContext(AppContext)
+  const brandName = getBrandName(post.brand_id || post.brandId) || post.brand_name || post.brand
   // Support both single platform and platforms array
   const platforms = post.platforms?.length > 0
     ? post.platforms
@@ -35,7 +39,7 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
         </div>
         
         <div className="flex items-center gap-2 flex-wrap">
-          {post.brand && <BrandBadge brand={post.brand} />}
+          {brandName && <BrandBadge brand={brandName} />}
         </div>
 
         <div className="flex items-center justify-between mt-3 pt-2 border-t border-border-light">
@@ -101,7 +105,7 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
           <span className="text-sm font-medium text-text-primary">{post.title}</span>
         </div>
       </td>
-      <td className="px-4 py-3">{post.brand && <BrandBadge brand={post.brand} />}</td>
+      <td className="px-4 py-3">{brandName && <BrandBadge brand={brandName} />}</td>
       <td className="px-4 py-3"><StatusBadge status={post.status} /></td>
       <td className="px-4 py-3">
         <PlatformIcons platforms={platforms} size={16} gap="gap-1.5" />

client/src/components/ProjectCard.jsx

@@ -1,10 +1,14 @@
+import { useContext } from 'react'
 import { format } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
+import { AppContext } from '../App'
 import StatusBadge from './StatusBadge'
 import BrandBadge from './BrandBadge'
 
 export default function ProjectCard({ project }) {
   const navigate = useNavigate()
+  const { getBrandName } = useContext(AppContext)
+  const brandLabel = getBrandName(project.brand_id) || project.brand
 
   const completedTasks = project.tasks?.filter(t => t.status === 'done').length || 0
   const totalTasks = project.tasks?.length || 0
@@ -22,9 +26,9 @@ export default function ProjectCard({ project }) {
         <StatusBadge status={project.status} size="xs" />
       </div>
 
-      {project.brand && (
+      {brandLabel && (
         <div className="mb-3">
-          <BrandBadge brand={project.brand} />
+          <BrandBadge brand={brandLabel} />
         </div>
       )}
 

client/src/components/Sidebar.jsx

@@ -2,7 +2,7 @@ import { 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
+  FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, Sparkles, Shield, LogOut, User, Settings, Languages, Tag
 } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
@@ -16,6 +16,7 @@ const navItems = [
   { to: '/projects', icon: FolderKanban, labelKey: 'nav.projects' },
   { to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
   { 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 }