feat: bulk delete, team dispatch, calendar views, timeline colors

- 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>
2026-03-01 14:55:36 +03:00
parent 20d76dea8b
commit 42a5f17d0b
40 changed files with 3050 additions and 1625 deletions
@@ -0,0 +1,86 @@
+import { useState, useRef, useEffect } from 'react'
+import { Check, ChevronDown, X } from 'lucide-react'
+
+export default function ApproverMultiSelect({ users = [], selected = [], onChange }) {
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef(null)
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    if (!open) return
+    const handleClick = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  const toggle = (userId) => {
+    const id = String(userId)
+    const next = selected.includes(id) ? selected.filter(s => s !== id) : [...selected, id]
+    onChange(next)
+  }
+
+  const remove = (id) => {
+    onChange(selected.filter(s => s !== String(id)))
+  }
+
+  const selectedUsers = selected.map(id => users.find(u => String(u._id || u.id || u.Id) === String(id))).filter(Boolean)
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <div
+        onClick={() => setOpen(!open)}
+        className={`w-full min-h-[38px] px-3 py-1.5 text-sm border rounded-lg bg-surface cursor-pointer flex items-center flex-wrap gap-1.5 transition-colors ${
+          open ? 'border-brand-primary ring-2 ring-brand-primary/20' : 'border-border'
+        }`}
+      >
+        {selectedUsers.length === 0 && (
+          <span className="text-text-tertiary">Select approvers...</span>
+        )}
+        {selectedUsers.map(u => (
+          <span
+            key={u._id || u.id || u.Id}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs font-medium"
+          >
+            {u.name}
+            <button
+              type="button"
+              onClick={e => { e.stopPropagation(); remove(u._id || u.id || u.Id) }}
+              className="hover:text-amber-950"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </span>
+        ))}
+        <ChevronDown className={`w-4 h-4 text-text-tertiary ml-auto shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </div>
+      {open && (
+        <div className="absolute z-50 mt-1 w-full bg-surface border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
+          {users.map(u => {
+            const uid = String(u._id || u.id || u.Id)
+            const isSelected = selected.includes(uid)
+            return (
+              <button
+                key={uid}
+                type="button"
+                onClick={() => toggle(uid)}
+                className={`w-full text-left px-3 py-2 text-sm hover:bg-surface-secondary flex items-center justify-between ${
+                  isSelected ? 'text-brand-primary font-medium' : 'text-text-primary'
+                }`}
+              >
+                <span>{u.name}</span>
+                {isSelected && <Check className="w-3.5 h-3.5" />}
+              </button>
+            )
+          })}
+          {users.length === 0 && (
+            <div className="px-3 py-4 text-sm text-text-tertiary text-center">No users available</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}