);
}
/**
* Sortable column header for the schedule table. The whole
is the
* drag handle so it stays grabbable in any RTL/LTR mode and on touch. The
* resize handle on the trailing edge stops drag propagation so resizing
* still works.
*/
function SortableHeader({
col,
isLast,
isRtl,
t,
showResizeHandle,
onResize,
}: {
col: ColumnSetting;
isLast: boolean;
isRtl: boolean;
t: (k: string) => string;
showResizeHandle: boolean;
onResize: (delta: number) => void;
}) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: col.id });
const align =
col.id === "number" || col.id === "time" ? "text-center" : "text-start";
const style: CSSProperties = {
width: col.width,
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
cursor: "grab",
};
return (
{t(`executiveMeetings.col.${col.id}`)}
{/* Resize handles only render on large screens AND fine (mouse)
pointers — see comment on showResizeHandles. */}
{!isLast && showResizeHandle && (
)}
);
}
function RowColorPicker({
current,
onPick,
t,
}: {
current: string;
onPick: (key: string) => void;
t: (k: string) => string;
}) {
return (
);
}
// Reusable row-level "delete entire meeting" trigger. Rendered as an
// absolutely-positioned overlay inside whichever cell is the row's
// current anchor (first visible cell on unmerged rows, the merged
// cell on merged rows) so it stays available regardless of which
// columns the user has hidden via the column customizer. The host
//
for
// a11y; `listeners` go on the dedicated grip handle in the # cell so a
// normal click on the cell content (to enter inline-edit mode) is still
// possible.
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: meeting.id, disabled: !canMutate });
const numberCellCls =
"border border-gray-300 px-2 py-2 text-center align-middle font-semibold " +
(highlight || isCancelled
? "bg-red-600 text-white"
: "bg-white text-[#0B1E3F]");
// Always provide width + overflow:hidden inline. In `table-auto` mode the
// browser treats width as a hint and shrinks cells to fit; in `table-fixed`
// mode (xl screens AND any print) it enforces them. overflow:hidden + the
// existing break-words on inner divs keeps wrapping behavior correct.
const cellStyle = (col: ColumnSetting): CSSProperties => ({
width: col.width,
overflow: "hidden",
});
// Compute the cell-merge overlay for this row. We resolve the stored
// start/end column ids against the *canonical* schedule column order
// (not against `visibleColumns`) so that a merge whose start or end
// column is currently hidden still renders across whichever columns
// in the range remain visible. This guarantees a row that has a
// merge in the DB never silently falls back to "unmerged" just
// because the user toggled off one of the boundary columns.
const canonStart = canonicalMergeIndex(meeting.mergeStartColumn);
const canonEnd = canonicalMergeIndex(meeting.mergeEndColumn);
const hasStoredMerge =
canonStart >= 0 && canonEnd >= canonStart && typeof meeting.mergeText === "string";
const visibleMergeIndices: number[] = [];
if (hasStoredMerge) {
visibleColumns.forEach((c, idx) => {
const ci = canonicalMergeIndex(c.id);
if (ci >= canonStart && ci <= canonEnd) visibleMergeIndices.push(idx);
});
}
// Headers are themselves drag-sortable, so users can reorder the
// schedule columns. If a previously-set merge ends up spanning
// *non-contiguous* visible indices after a reorder, rendering one
// colSpan cell at the first index would silently swallow the wrong
// columns. In that case we degrade to "unmerged" rendering — the DB
// merge state stays intact, and unmerging or restoring canonical
// order brings the merged cell back.
const visibleMergeContiguous =
visibleMergeIndices.length === 0 ||
visibleMergeIndices[visibleMergeIndices.length - 1] -
visibleMergeIndices[0] +
1 ===
visibleMergeIndices.length;
const isMerged =
hasStoredMerge && visibleMergeIndices.length > 0 && visibleMergeContiguous;
const mergeFirstIdx = isMerged ? visibleMergeIndices[0] : -1;
const mergeSkipSet = isMerged ? new Set(visibleMergeIndices.slice(1)) : null;
// First visible cell that's NOT part of a merge. The merge trigger
// for an unmerged row is anchored here so editors can still open the
// merge menu even when the # column is hidden. We look for the
// first index in visibleColumns whose canonical id exists (which is
// every schedule column), so this collapses to `0` in practice but
// would skip non-mergeable columns if they're added later.
const firstUnmergedIdx = isMerged ? -1 : visibleColumns.length > 0 ? 0 : -1;
// Light tint for the current meeting on the editable cells (meeting,
// attendees, time). The number cell keeps its solid white background
// and original text colour so it stays legible — only the rest of the
// row gets a soft wash of highlightColor. We keep the original text
// colour everywhere so the row remains readable.
const tintBg =
isCurrent && !(highlight || isCancelled)
? hexToRgba(highlightColor, 0.13)
: null;
const tintedCellStyle = (col: ColumnSetting): CSSProperties =>
tintBg ? { ...cellStyle(col), backgroundColor: tintBg } : cellStyle(col);
const renderCell = (col: ColumnSetting, idx: number): ReactNode => {
// Anchor the merge-menu trigger to whichever cell is the first
// visible one on an unmerged row. Using "first visible cell"
// (instead of always the # cell) keeps the trigger reachable when
// editors hide the number column. The trigger is rendered as an
// absolutely-positioned overlay inside the cell, so every cell type
// needs `relative group` on its
for the overlay to find it.
const showMergeTrigger = canMutate && !isMerged && idx === firstUnmergedIdx;
const mergeOverlay = showMergeTrigger ? (
) : null;
// Delete trigger uses the same "first visible cell" anchoring as the
// merge trigger so the action stays available even when editors hide
// the # column via the column customizer. Only one button per row.
// The merged-cell branch (in renderCells below) renders its own copy.
const showDeleteTrigger = canMutate && !isMerged && idx === firstUnmergedIdx;
const deleteOverlay = showDeleteTrigger ? (
) : null;
switch (col.id) {
case "number":
return (
{canMutate && (
)}
{meeting.dailyNumber}
{deleteOverlay}
{mergeOverlay}
);
case "meeting":
return (
{meeting.location && (
{meeting.location}
)}
{deleteOverlay}
{mergeOverlay}
);
case "attendees":
return (
{deleteOverlay}
{mergeOverlay}
);
case "time":
return (
{deleteOverlay}
{mergeOverlay}
);
}
};
// When a merge is active we render a single
with an
// EditableCell for `mergeText`, and skip the cells the merge covers
// after the first. The merged cell hosts its own MergeMenu so users
// can always unmerge or re-merge — even when the # column is hidden.
// Originals stay in the DB so unmerge restores them.
const renderCells = (): ReactNode[] => {
if (!isMerged) {
return visibleColumns.map((c, idx) => renderCell(c, idx));
}
const cells: ReactNode[] = [];
const span = visibleMergeIndices.length;
visibleColumns.forEach((col, idx) => {
if (mergeSkipSet?.has(idx)) return;
if (idx === mergeFirstIdx) {
// Sum widths of the spanned visible columns so layout in
// table-fixed mode reserves the right horizontal space.
const totalWidth = visibleMergeIndices.reduce(
(sum, i) => sum + (visibleColumns[i].width || 0),
0,
);
cells.push(
,
);
} else {
cells.push(renderCell(col, idx));
}
});
return cells;
};
// Combine row background with highlight tint. When the row is the current
// meeting we apply a soft tint (color at low opacity) plus a coloured ring
// via box-shadow (rings on
);
}
// Canonical schedule column order for cell-merge ranges. MUST stay in
// sync with the API's MERGE_COLUMNS array in
// artifacts/api-server/src/routes/executive-meetings.ts. We use this
// (instead of `visibleColumns`) when computing whether a stored merge
// overlaps the currently visible columns, so that hiding one boundary
// of the range still lets the merged cell render across whichever
// columns inside the range remain visible.
const CANONICAL_MERGE_ORDER: ColumnId[] = [
"number",
"meeting",
"attendees",
"time",
];
function canonicalMergeIndex(id: ColumnId | string | null | undefined): number {
if (id == null) return -1;
return CANONICAL_MERGE_ORDER.indexOf(id as ColumnId);
}
// Convert a #RRGGBB or #RGB hex color into an rgba() string with the
// given alpha. Used to derive the soft tint applied to the current
// meeting row from the user's highlight color preference. Falls back
// to the input string unchanged if it isn't a recognised hex.
function hexToRgba(hex: string, alpha: number): string {
const m3 = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(hex);
const m6 = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
let r = 0;
let g = 0;
let b = 0;
if (m6) {
r = parseInt(m6[1], 16);
g = parseInt(m6[2], 16);
b = parseInt(m6[3], 16);
} else if (m3) {
r = parseInt(m3[1] + m3[1], 16);
g = parseInt(m3[2] + m3[2], 16);
b = parseInt(m3[3] + m3[3], 16);
} else {
return hex;
}
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
// Small popover-driven control attached to a row (in the # cell when
// not merged, or to the merged cell itself) that lets editors pick a
// merge range or clear an existing one. Each option corresponds to a
// fixed [start..end] column range.
function MergeMenu({
meetingId,
// True iff the row is rendered as a merged cell *right now*. Used
// for testid wiring only.
isMerged = false,
// True iff the row has a stored merge in the DB (regardless of
// whether it's currently renderable as merged). Drives the
// "Unmerge" option so users can always clear stored merges, even
// when the visible columns aren't contiguous.
hasStoredMerge,
// Existing merge text from the DB, preserved when the user picks a
// new merge range so we never silently overwrite their content.
existingMergeText,
t,
onChange,
}: {
meetingId: number;
isMerged?: boolean;
hasStoredMerge: boolean;
existingMergeText: string | null;
t: (k: string) => string;
onChange: (
merge:
| { mergeStartColumn: ColumnId; mergeEndColumn: ColumnId; mergeText: string }
| null,
) => Promise;
}) {
// Re-merging keeps the existing text so users don't accidentally lose
// what they had typed. New merges (no stored text) start empty.
const apply = async (start: ColumnId, end: ColumnId) => {
await onChange({
mergeStartColumn: start,
mergeEndColumn: end,
mergeText: existingMergeText ?? "",
});
};
return (
{hasStoredMerge && (
)}
);
}
function TimeRangeCell({
meeting,
t,
lang,
canMutate,
onSaveTimes,
}: {
meeting: Meeting;
t: (k: string) => string;
lang: "ar" | "en";
canMutate: boolean;
onSaveTimes: (
startTime: string | null,
endTime: string | null,
) => Promise;
}) {
const { toast } = useToast();
const startSaved = meeting.startTime ? meeting.startTime.slice(0, 5) : "";
const endSaved = meeting.endTime ? meeting.endTime.slice(0, 5) : "";
const [editing, setEditing] = useState(false);
const [start, setStart] = useState(startSaved);
const [end, setEnd] = useState(endSaved);
const wrapperRef = useRef(null);
const blurTimerRef = useRef | null>(null);
const startInputRef = useRef(null);
// If the saved times change while we're not editing (e.g. another tab
// updated them, or the user picked a different date), sync local state.
useEffect(() => {
if (!editing) {
setStart(startSaved);
setEnd(endSaved);
}
}, [editing, startSaved, endSaved]);
useEffect(() => {
if (editing) {
startInputRef.current?.focus();
}
}, [editing]);
const enterEdit = useCallback(() => {
if (!canMutate) return;
setEditing(true);
}, [canMutate]);
const cancel = useCallback(() => {
setStart(startSaved);
setEnd(endSaved);
setEditing(false);
}, [startSaved, endSaved]);
const save = useCallback(async () => {
const newStart = start || null;
const newEnd = end || null;
if (newStart === (startSaved || null) && newEnd === (endSaved || null)) {
setEditing(false);
return;
}
if (newStart && newEnd && newStart > newEnd) {
// Surface the validation error and keep the user in edit mode so they
// can correct it without losing the values they just typed.
toast({
title: t("executiveMeetings.schedule.timeOrderError"),
variant: "destructive",
});
startInputRef.current?.focus();
return;
}
setEditing(false);
try {
await onSaveTimes(newStart, newEnd);
} catch {
// The parent `saveTimes` handler is responsible for surfacing the
// error toast; we only need to roll back the local draft state so
// the cell shows the previously-saved values.
setStart(startSaved);
setEnd(endSaved);
}
}, [start, end, startSaved, endSaved, onSaveTimes]);
const onFocusOut = (e: React.FocusEvent) => {
if (!editing) return;
const next = e.relatedTarget as Node | null;
if (next && wrapperRef.current?.contains(next)) return;
if (blurTimerRef.current) clearTimeout(blurTimerRef.current);
blurTimerRef.current = setTimeout(() => {
void save();
}, 150);
};
const onFocusIn = () => {
if (blurTimerRef.current) {
clearTimeout(blurTimerRef.current);
blurTimerRef.current = null;
}
};
if (!editing) {
const hasAny = !!(meeting.startTime || meeting.endTime);
const display = hasAny
? `${formatTime(meeting.startTime, lang)} – ${formatTime(meeting.endTime, lang)}`
: "—";
return (
);
}
// Single-group cases: meeting.platform-only virtual list, all-internal,
// all-external, or empty. Pick a sensible default add type so the user
// can add a first attendee without reaching for the request modal.
const singleGroupType: Attendee["attendanceType"] =
meeting.platform !== "none" && virtual.length > 0
? "virtual"
: tagged[0]?.a.attendanceType ?? "internal";
if (meeting.platform !== "none" && virtual.length > 0) {
return (
);
}
// Empty cell or single-type cell — render flow without a header.
return (
);
}
type AttendeeWithIndex = { a: Attendee; i: number };
function AddAttendeeChip({
onClick,
label,
testId,
}: {
onClick: () => void;
label: string;
testId: string;
}) {
return (
);
}
type AttendeeFlowSharedProps = {
canMutate?: boolean;
onSaveAttendeeName?: (idx: number, html: string) => Promise;
addType: Attendee["attendanceType"];
isPending: boolean;
pendingKey: number;
onStartAdd?: (type: Attendee["attendanceType"]) => void;
onCommitAdd?: (
type: Attendee["attendanceType"],
html: string,
) => Promise;
onCancelAdd?: () => void;
addLabel: string;
editAriaLabel: string;
newAriaLabel: string;
meetingId: number;
};
function AttendeeGroup({
label,
items,
...flowProps
}: { label: string; items: AttendeeWithIndex[] } & AttendeeFlowSharedProps) {
return (
{/* The group label is purely informational — make it pointer-events:none
so a near-miss tap on the label still falls through to whatever is
underneath (e.g. an attendee name or the cell background). */}
{displayIdx + 1}-
{editable ? (
onSaveAttendeeName!(i, html)}
ariaLabel={editAriaLabel}
dir="auto"
placeholder="…"
// Always-visible dashed underline gives each attendee name a
// discoverable click target even when names wrap onto multiple
// lines. The vertical padding + min-height widen the tap
// target so a near-miss tap on an iPad/touch device still
// lands on the editor. Hidden in edit mode (the editor draws
// its own border) and on print.
className="inline-block align-baseline min-w-[3rem] min-h-[1.5rem] px-0.5 py-0.5 border-b border-dashed border-gray-400/70 hover:border-blue-500 data-[editing=true]:border-b-0 print:border-b-0 print:py-0 print:min-h-0"
testId={`em-edit-attendee-${i}`}
/>
) : (
)}
))}
{isPending && onCommitAdd && (
{items.length + 1}- onCommitAdd(addType, html)}
ariaLabel={newAriaLabel}
dir="auto"
placeholder="…"
className="inline-block align-baseline min-w-[6rem] min-h-[1.5rem] px-0.5 py-0.5 border-b border-dashed border-blue-500 data-[editing=true]:border-b-0 print:border-b-0 print:py-0 print:min-h-0"
testId={`em-add-attendee-pending-input-${addType}`}
startInEditMode
// Force a save call on blur even when the user typed nothing,
// so the parent can clear the pending ghost row.
forceSaveOnBlur
// Escape should also clear the ghost.
onCancel={onCancelAdd}
/>