fahed
42a5f17d0b
Deploy / deploy (push) Successful in 11s
- Multi-select bulk delete in all 5 list views (Artefacts, Posts, Tasks, Issues, Assets) with cascade deletes and confirmation modals - Team-based issue dispatch: team picker on public issue form, team filter on Issues page, copy public link from Team page and Issues header, team assignment in IssueDetailPanel - Month/Week toggle on PostCalendar and TaskCalendarView - Month/Week/Day zoom on project and campaign timelines (InteractiveTimeline) and ProjectDetail GanttView, with Month as default - Custom timeline bar colors: clickable color dot with 12-color palette popover on project, campaign, and task timeline bars - Artefacts default view changed to list - BulkSelectBar reusable component - i18n keys for all new features (en + ar) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
351 lines
14 KiB
React
351 lines
14 KiB
React
import { useState, useEffect, useContext } from 'react'
|
||
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon, CalendarDays } from 'lucide-react'
|
||
import { AppContext } from '../App'
|
||
import { useLanguage } from '../i18n/LanguageContext'
|
||
import { api, PLATFORMS } from '../utils/api'
|
||
import PostDetailPanel from '../components/PostDetailPanel'
|
||
import { SkeletonCalendar } from '../components/SkeletonLoader'
|
||
|
||
const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||
|
||
const STATUS_COLORS = {
|
||
draft: 'bg-surface-tertiary text-text-secondary',
|
||
in_review: 'bg-amber-100 text-amber-700',
|
||
approved: 'bg-blue-100 text-blue-700',
|
||
scheduled: 'bg-purple-100 text-purple-700',
|
||
published: 'bg-emerald-100 text-emerald-700',
|
||
rejected: 'bg-red-100 text-red-700',
|
||
}
|
||
|
||
function getMonthData(year, month) {
|
||
const firstDay = new Date(year, month, 1).getDay()
|
||
const daysInMonth = new Date(year, month + 1, 0).getDate()
|
||
const prevDays = new Date(year, month, 0).getDate()
|
||
|
||
const cells = []
|
||
// Previous month trailing days
|
||
for (let i = firstDay - 1; i >= 0; i--) {
|
||
cells.push({ day: prevDays - i, current: false, date: new Date(year, month - 1, prevDays - i) })
|
||
}
|
||
// Current month
|
||
for (let d = 1; d <= daysInMonth; d++) {
|
||
cells.push({ day: d, current: true, date: new Date(year, month, d) })
|
||
}
|
||
// Next month leading days
|
||
const remaining = 42 - cells.length
|
||
for (let d = 1; d <= remaining; d++) {
|
||
cells.push({ day: d, current: false, date: new Date(year, month + 1, d) })
|
||
}
|
||
return cells
|
||
}
|
||
|
||
function getWeekData(startDate) {
|
||
const cells = []
|
||
const start = new Date(startDate)
|
||
// Align to Sunday
|
||
start.setDate(start.getDate() - start.getDay())
|
||
for (let i = 0; i < 7; i++) {
|
||
const d = new Date(start)
|
||
d.setDate(start.getDate() + i)
|
||
cells.push({ day: d.getDate(), current: true, date: d })
|
||
}
|
||
return cells
|
||
}
|
||
|
||
function dateKey(d) {
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||
}
|
||
|
||
export default function PostCalendar() {
|
||
const { t } = useLanguage()
|
||
const { brands } = useContext(AppContext)
|
||
const today = new Date()
|
||
const [year, setYear] = useState(today.getFullYear())
|
||
const [month, setMonth] = useState(today.getMonth())
|
||
const [posts, setPosts] = useState([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [filters, setFilters] = useState({ brand: '', platform: '', status: '' })
|
||
const [selectedPost, setSelectedPost] = useState(null)
|
||
const [calView, setCalView] = useState('month') // 'month' | 'week'
|
||
const [weekStart, setWeekStart] = useState(() => {
|
||
const d = new Date(); d.setDate(d.getDate() - d.getDay()); return d
|
||
})
|
||
|
||
useEffect(() => {
|
||
loadPosts()
|
||
}, [])
|
||
|
||
const loadPosts = async () => {
|
||
try {
|
||
const res = await api.get('/posts')
|
||
setPosts(Array.isArray(res) ? res : [])
|
||
} catch (err) {
|
||
console.error('Failed to load posts:', err)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const cells = calView === 'month' ? getMonthData(year, month) : getWeekData(weekStart)
|
||
const todayKey = dateKey(today)
|
||
|
||
// Filter posts
|
||
const filteredPosts = posts.filter(p => {
|
||
if (filters.brand && String(p.brand_id || p.brandId) !== filters.brand) return false
|
||
if (filters.platform) {
|
||
const platforms = p.platforms || (p.platform ? [p.platform] : [])
|
||
if (!platforms.includes(filters.platform)) return false
|
||
}
|
||
if (filters.status && p.status !== filters.status) return false
|
||
return true
|
||
})
|
||
|
||
// Group posts by date (use scheduled_date or published_date)
|
||
const postsByDate = {}
|
||
const unscheduled = []
|
||
for (const post of filteredPosts) {
|
||
const dateStr = post.scheduled_date || post.scheduledDate || post.published_date || post.publishedDate
|
||
if (dateStr) {
|
||
const key = dateStr.slice(0, 10) // yyyy-mm-dd
|
||
if (!postsByDate[key]) postsByDate[key] = []
|
||
postsByDate[key].push(post)
|
||
} else {
|
||
unscheduled.push(post)
|
||
}
|
||
}
|
||
|
||
const prevMonth = () => {
|
||
if (month === 0) { setMonth(11); setYear(y => y - 1) }
|
||
else setMonth(m => m - 1)
|
||
}
|
||
const nextMonth = () => {
|
||
if (month === 11) { setMonth(0); setYear(y => y + 1) }
|
||
else setMonth(m => m + 1)
|
||
}
|
||
const prevWeek = () => setWeekStart(d => { const n = new Date(d); n.setDate(n.getDate() - 7); return n })
|
||
const nextWeek = () => setWeekStart(d => { const n = new Date(d); n.setDate(n.getDate() + 7); return n })
|
||
|
||
const goToday = () => {
|
||
setYear(today.getFullYear()); setMonth(today.getMonth())
|
||
const d = new Date(); d.setDate(d.getDate() - d.getDay()); setWeekStart(d)
|
||
}
|
||
|
||
const monthLabel = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' })
|
||
const weekLabel = (() => {
|
||
const start = new Date(weekStart)
|
||
start.setDate(start.getDate() - start.getDay())
|
||
const end = new Date(start); end.setDate(start.getDate() + 6)
|
||
const fmt = (d) => d.toLocaleString('default', { month: 'short', day: 'numeric' })
|
||
return `${fmt(start)} – ${fmt(end)}, ${end.getFullYear()}`
|
||
})()
|
||
|
||
const handlePostClick = (post) => {
|
||
setSelectedPost(post)
|
||
}
|
||
|
||
const handlePanelClose = () => {
|
||
setSelectedPost(null)
|
||
loadPosts()
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<SkeletonCalendar />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4 animate-fade-in">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-text-primary">Content Calendar</h1>
|
||
<p className="text-sm text-text-secondary mt-1">Schedule and plan your posts</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<select
|
||
value={filters.brand}
|
||
onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
|
||
className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
|
||
>
|
||
<option value="">All Brands</option>
|
||
{brands.map(b => <option key={b._id} value={b._id}>{b.name}</option>)}
|
||
</select>
|
||
|
||
<select
|
||
value={filters.platform}
|
||
onChange={e => setFilters(f => ({ ...f, platform: e.target.value }))}
|
||
className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
|
||
>
|
||
<option value="">All Platforms</option>
|
||
{Object.entries(PLATFORMS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
|
||
</select>
|
||
|
||
<select
|
||
value={filters.status}
|
||
onChange={e => setFilters(f => ({ ...f, status: e.target.value }))}
|
||
className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
|
||
>
|
||
<option value="">All Statuses</option>
|
||
<option value="draft">Draft</option>
|
||
<option value="in_review">In Review</option>
|
||
<option value="approved">Approved</option>
|
||
<option value="scheduled">Scheduled</option>
|
||
<option value="published">Published</option>
|
||
<option value="rejected">Rejected</option>
|
||
</select>
|
||
</div>
|
||
|
||
{/* Calendar */}
|
||
<div className="bg-surface rounded-xl border border-border overflow-hidden">
|
||
{/* Nav */}
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
|
||
<div className="flex items-center gap-3">
|
||
<button onClick={calView === 'month' ? prevMonth : prevWeek} className="p-2 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
|
||
<ChevronLeft className="w-5 h-5" />
|
||
</button>
|
||
<h3 className="text-lg font-semibold text-text-primary min-w-[220px] text-center">
|
||
{calView === 'month' ? monthLabel : weekLabel}
|
||
</h3>
|
||
<button onClick={calView === 'month' ? nextMonth : nextWeek} className="p-2 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
|
||
<ChevronRight className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex bg-surface-tertiary rounded-lg p-0.5">
|
||
<button
|
||
onClick={() => setCalView('month')}
|
||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1.5 ${calView === 'month' ? 'bg-white shadow-sm text-text-primary' : 'text-text-tertiary'}`}
|
||
>
|
||
<CalendarIcon className="w-3.5 h-3.5" />
|
||
Month
|
||
</button>
|
||
<button
|
||
onClick={() => setCalView('week')}
|
||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors flex items-center gap-1.5 ${calView === 'week' ? 'bg-white shadow-sm text-text-primary' : 'text-text-tertiary'}`}
|
||
>
|
||
<CalendarDays className="w-3.5 h-3.5" />
|
||
Week
|
||
</button>
|
||
</div>
|
||
<button onClick={goToday} className="px-4 py-2 text-sm font-medium text-brand-primary hover:bg-brand-primary/5 rounded-lg transition-colors">
|
||
Today
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Day headers */}
|
||
<div className="grid grid-cols-7 border-b border-border bg-surface-secondary">
|
||
{DAYS.map(d => (
|
||
<div key={d} className="text-center text-xs font-semibold text-text-tertiary uppercase py-3">
|
||
{d}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Cells */}
|
||
<div className="grid grid-cols-7">
|
||
{cells.map((cell, i) => {
|
||
const key = dateKey(cell.date)
|
||
const isToday = key === todayKey
|
||
const dayPosts = postsByDate[key] || []
|
||
return (
|
||
<div
|
||
key={i}
|
||
className={`border-r border-b border-border ${calView === 'week' ? 'min-h-[300px]' : 'min-h-[110px]'} p-2 ${
|
||
cell.current ? 'bg-surface' : 'bg-surface-secondary/30'
|
||
} ${i % 7 === 6 ? 'border-r-0' : ''}`}
|
||
>
|
||
<div className={`text-sm font-semibold mb-1 w-7 h-7 flex items-center justify-center rounded-full ${
|
||
isToday ? 'bg-brand-primary text-white' : cell.current ? 'text-text-primary' : 'text-text-tertiary'
|
||
}`}>
|
||
{cell.day}
|
||
</div>
|
||
<div className="space-y-1">
|
||
{dayPosts.slice(0, calView === 'week' ? 10 : 3).map(post => (
|
||
<button
|
||
key={post.Id || post._id}
|
||
onClick={() => handlePostClick(post)}
|
||
className={`w-full text-left text-[10px] px-2 py-1 rounded font-medium hover:opacity-80 transition-opacity truncate ${
|
||
STATUS_COLORS[post.status] || 'bg-surface-tertiary text-text-secondary'
|
||
}`}
|
||
title={post.title}
|
||
>
|
||
{post.title}
|
||
</button>
|
||
))}
|
||
{dayPosts.length > (calView === 'week' ? 10 : 3) && (
|
||
<div className="text-[9px] text-text-tertiary text-center font-medium">
|
||
+{dayPosts.length - (calView === 'week' ? 10 : 3)} more
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Unscheduled Posts */}
|
||
{unscheduled.length > 0 && (
|
||
<div className="bg-surface rounded-xl border border-border p-6">
|
||
<h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Unscheduled Posts</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||
{unscheduled.map(post => (
|
||
<button
|
||
key={post.Id || post._id}
|
||
onClick={() => handlePostClick(post)}
|
||
className="text-left bg-surface-secondary border border-border rounded-lg p-3 hover:border-brand-primary/30 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_COLORS[post.status] || 'bg-surface-tertiary text-text-secondary'}`}>
|
||
{post.status}
|
||
</span>
|
||
</div>
|
||
<p className="text-sm font-medium text-text-primary truncate">{post.title}</p>
|
||
{post.brand_name && (
|
||
<p className="text-xs text-text-tertiary mt-1">{post.brand_name}</p>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Legend */}
|
||
<div className="bg-surface rounded-xl border border-border p-4">
|
||
<h4 className="text-xs font-semibold text-text-tertiary uppercase mb-3">Status Legend</h4>
|
||
<div className="flex flex-wrap gap-3">
|
||
{Object.entries(STATUS_COLORS).map(([status, color]) => (
|
||
<div key={status} className="flex items-center gap-2">
|
||
<div className={`w-4 h-4 rounded ${color}`}></div>
|
||
<span className="text-xs text-text-secondary capitalize">{status.replace('_', ' ')}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Detail Panel */}
|
||
{selectedPost && (
|
||
<PostDetailPanel
|
||
post={selectedPost}
|
||
onClose={handlePanelClose}
|
||
onSave={async (postId, data) => {
|
||
await api.patch(`/posts/${postId}`, data)
|
||
handlePanelClose()
|
||
}}
|
||
onDelete={async (postId) => {
|
||
await api.delete(`/posts/${postId}`)
|
||
handlePanelClose()
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|