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>
+  )
+}

client/src/components/CommentsSection.jsx

@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react'
+import { Send, Trash2, MessageCircle } from 'lucide-react'
+import { api, getInitials } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../i18n/LanguageContext'
+
+function relativeTime(dateStr, t) {
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diffMs = now - then
+  const diffMin = Math.floor(diffMs / 60000)
+  if (diffMin < 1) return t('comments.justNow')
+  if (diffMin < 60) return t('comments.minutesAgo').replace('{n}', diffMin)
+  const diffHours = Math.floor(diffMin / 60)
+  if (diffHours < 24) return t('comments.hoursAgo').replace('{n}', diffHours)
+  const diffDays = Math.floor(diffHours / 24)
+  return t('comments.daysAgo').replace('{n}', diffDays)
+}
+
+export default function CommentsSection({ entityType, entityId }) {
+  const { user } = useAuth()
+  const { t } = useLanguage()
+  const [comments, setComments] = useState([])
+  const [newComment, setNewComment] = useState('')
+  const [sending, setSending] = useState(false)
+
+  useEffect(() => {
+    if (entityType && entityId) loadComments()
+  }, [entityType, entityId])
+
+  const loadComments = async () => {
+    try {
+      const data = await api.get(`/comments/${entityType}/${entityId}`)
+      setComments(Array.isArray(data) ? data : (data.data || []))
+    } catch (err) {
+      console.error('Failed to load comments:', err)
+    }
+  }
+
+  const handleSend = async () => {
+    if (!newComment.trim() || sending) return
+    setSending(true)
+    try {
+      await api.post(`/comments/${entityType}/${entityId}`, { content: newComment.trim() })
+      setNewComment('')
+      loadComments()
+    } catch (err) {
+      console.error('Failed to send comment:', err)
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleDelete = async (id) => {
+    try {
+      await api.delete(`/comments/${id}`)
+      loadComments()
+    } catch (err) {
+      console.error('Failed to delete comment:', err)
+    }
+  }
+
+  const canDelete = (comment) => {
+    if (!user) return false
+    if (comment.user_id === user.id) return true
+    return user.role === 'superadmin' || user.role === 'manager'
+  }
+
+  return (
+    <div className="space-y-3">
+      <h4 className="text-sm font-semibold text-text-primary flex items-center gap-1.5">
+        <MessageCircle className="w-4 h-4" />
+        {t('comments.title')}
+        {comments.length > 0 && (
+          <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-1.5 py-0.5 rounded-full">
+            {comments.length}
+          </span>
+        )}
+      </h4>
+
+      {comments.length === 0 && (
+        <p className="text-xs text-text-tertiary py-2">{t('comments.noComments')}</p>
+      )}
+
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {comments.map(c => (
+          <div key={c.id} className="flex items-start gap-2 group">
+            <div className="w-7 h-7 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              {c.user_avatar ? (
+                <img src={c.user_avatar} className="w-full h-full rounded-full object-cover" alt="" />
+              ) : (
+                getInitials(c.user_name)
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium text-text-primary">{c.user_name}</span>
+                <span className="text-[10px] text-text-tertiary">{relativeTime(c.created_at, t)}</span>
+                {canDelete(c) && (
+                  <button
+                    onClick={() => handleDelete(c.id)}
+                    className="p-0.5 rounded text-text-tertiary hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity ml-auto"
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
+              <p className="text-xs text-text-secondary whitespace-pre-wrap break-words">{c.content}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={newComment}
+          onChange={e => setNewComment(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()}
+          placeholder={t('comments.placeholder')}
+          className="flex-1 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+        />
+        <button
+          onClick={handleSend}
+          disabled={!newComment.trim() || sending}
+          className="p-2 bg-brand-primary text-white rounded-lg hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <Send className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/Header.jsx

@@ -1,7 +1,8 @@
 import { useState, useRef, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Bell, ChevronDown, LogOut, Settings, User, Shield } from 'lucide-react'
+import { Bell, ChevronDown, LogOut, Shield } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
+import { getInitials } from '../utils/api'
 
 const pageTitles = {
   '/': 'Dashboard',
@@ -27,9 +28,13 @@ export default function Header() {
   const dropdownRef = useRef(null)
   const location = useLocation()
 
-  const pageTitle = pageTitles[location.pathname] || 
-    (location.pathname.startsWith('/projects/') ? 'Project Details' : 
-     location.pathname.startsWith('/campaigns/') ? 'Campaign Details' : 'Page')
+  function getPageTitle(pathname) {
+    if (pageTitles[pathname]) return pageTitles[pathname]
+    if (pathname.startsWith('/projects/')) return 'Project Details'
+    if (pathname.startsWith('/campaigns/')) return 'Campaign Details'
+    return 'Page'
+  }
+  const pageTitle = getPageTitle(location.pathname)
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -41,11 +46,6 @@ export default function Header() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const roleInfo = ROLE_INFO[user?.role] || ROLE_INFO.contributor
 
   return (

client/src/components/MemberCard.jsx

@@ -1,3 +1,4 @@
+import { getInitials } from '../utils/api'
 import BrandBadge from './BrandBadge'
 
 const ROLE_BADGES = {
@@ -16,11 +17,6 @@ const ROLE_BADGES = {
 }
 
 export default function MemberCard({ member, onClick }) {
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const role = ROLE_BADGES[member.team_role || member.role] || ROLE_BADGES.default
 
   const avatarColors = [

client/src/components/PostCard.jsx

@@ -1,9 +1,10 @@
 import { format } from 'date-fns'
 import { ArrowRight } from 'lucide-react'
+import { getInitials } from '../utils/api'
 import { useLanguage } from '../i18n/LanguageContext'
 import BrandBadge from './BrandBadge'
 import StatusBadge from './StatusBadge'
-import PlatformIcon, { PlatformIcons } from './PlatformIcon'
+import { PlatformIcons } from './PlatformIcon'
 
 export default function PostCard({ post, onClick, onMove, compact = false }) {
   const { t } = useLanguage()
@@ -12,21 +13,16 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
     ? post.platforms
     : (post.platform ? [post.platform] : [])
 
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const assigneeName = post.assignedToName || post.assignedName || post.assigned_name || (typeof post.assignedTo === 'object' ? post.assignedTo?.name : null)
 
   if (compact) {
     return (
       <div
         onClick={onClick}
-        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 hover:shadow-md cursor-pointer transition-all group"
+        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 hover:shadow-md cursor-pointer transition-all group overflow-hidden"
       >
         {post.thumbnail_url && (
-          <div className="w-full h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
+          <div className="w-[calc(100%+1.5rem)] h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
             <img src={`http://localhost:3001${post.thumbnail_url}`} alt="" className="w-full h-full object-cover" />
           </div>
         )}