From 32cac678bf90291ba75a852f210a4bf7dd1d9b98 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Mon, 25 May 2026 12:51:46 +0000
Subject: [PATCH] #641 Schedule cell polish: alignment + external text colour

- Attendees column no longer centres its content. AttendeeFlow's <ul>
  switched from justify-center to justify-start; AttendeeGroup header
  and subheading rows (both committed and pending) switched from
  text-center to text-start. Restores cell-start alignment (right in
  AR, left in EN) the user expected on fresh inline-add and on
  existing rows.
- External meetings now render the meeting title cell text and the
  attendee names in red (#b91c1c), matching the row tint family, in
  addition to the existing red background. Implemented by:
  * Conditional text-[#b91c1c] / text-[#0B1E3F] on the meeting <td>
    based on meeting.isExternal.
  * New optional `externalText` prop on AttendeeFlowSharedProps,
    threaded from AttendeesCell (derived from meeting.isExternal) and
    applied as a colour class on the AttendeeFlow root <ul> so all
    attendee names inherit red. Group headers and subheadings keep
    their neutral navy palette per scope.
- Non-external rows and the cancelled/highlighted white-on-red # cell
  are untouched. Print/PDF path reuses the same renderer so the red
  carries through automatically.
- No schema/API/migration changes. TS clean.

Files: artifacts/tx-os/src/pages/executive-meetings.tsx
---
 .../tx-os/src/pages/executive-meetings.tsx      | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/artifacts/tx-os/src/pages/executive-meetings.tsx b/artifacts/tx-os/src/pages/executive-meetings.tsx
index fb897279..03e896a3 100644
--- a/artifacts/tx-os/src/pages/executive-meetings.tsx
+++ b/artifacts/tx-os/src/pages/executive-meetings.tsx
@@ -4559,7 +4559,7 @@ function MeetingRow({
         return (
           <td
             key="meeting"
-            className="border border-gray-300 px-3 py-3 align-middle text-[#0B1E3F] relative group"
+            className={`border border-gray-300 px-3 py-3 align-middle ${meeting.isExternal ? "text-[#b91c1c]" : "text-[#0B1E3F]"} relative group`}
             style={tintedCellStyle(col, true)}
           >
             <EditableCell
@@ -5558,6 +5558,7 @@ function AttendeesCell({
       "executiveMeetings.schedule.newSubheadingAria",
     ),
     meetingId: meeting.id,
+    externalText: Boolean(meeting.isExternal),
   };
 
   if (hasSplit) {
@@ -5760,6 +5761,11 @@ type AttendeeFlowSharedProps = {
   editSubheadingAriaLabel: string;
   newSubheadingAriaLabel: string;
   meetingId: number;
+  // #641: When true, attendee names render in red so the user gets the
+  // same visual cue inside the cell that the row tint already gives at
+  // the row level (external meeting). Group headers and subheadings
+  // keep their own neutral colour — only the names list flips.
+  externalText?: boolean;
   // When true, the trailing "+ عنوان فرعي" <li> at the very end of the
   // flow is NOT rendered. Used by split-mode cells (≥2 attendance
   // groups visible) so the cell shows ONE cell-level "+ عنوان فرعي"
@@ -5783,7 +5789,7 @@ function AttendeeGroup({
           than a stray line of text. */}
       <div
         data-testid="em-attendee-group-header"
-        className="text-sm font-bold text-[#0B1E3F] mt-0.5 mb-1 pb-0.5 text-center pointer-events-none select-none border-b border-[#0B1E3F]/15 print:border-b print:border-gray-400"
+        className="text-sm font-bold text-[#0B1E3F] mt-0.5 mb-1 pb-0.5 text-start pointer-events-none select-none border-b border-[#0B1E3F]/15 print:border-b print:border-gray-400"
       >
         {label}
       </div>
@@ -5811,6 +5817,7 @@ function AttendeeFlow({
   newAriaLabel,
   editSubheadingAriaLabel,
   newSubheadingAriaLabel,
+  externalText = false,
   suppressTrailingSubheadingChip = false,
 }: { items: AttendeeWithIndex[] } & AttendeeFlowSharedProps) {
   const editable = canMutate && !!onSaveAttendeeName;
@@ -5923,7 +5930,7 @@ function AttendeeFlow({
     return (
       <li
         key={key}
-        className="basis-full text-center font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5"
+        className="basis-full text-start font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5"
         data-testid={`em-add-subheading-pending-${addType}`}
       >
         <EditableCell
@@ -6038,7 +6045,7 @@ function AttendeeFlow({
   };
 
   return (
-    <ul className="flex flex-wrap justify-center items-baseline gap-x-4 gap-y-0.5 text-[#0B1E3F] leading-snug">
+    <ul className={`flex flex-wrap justify-start items-baseline gap-x-4 gap-y-0.5 ${externalText ? "text-[#b91c1c]" : "text-[#0B1E3F]"} leading-snug`}>
       {items.flatMap(({ a, i }, listIdx) => {
         const isSub = (a.kind ?? "person") === "subheading";
         const nodes: ReactNode[] = [];
@@ -6064,7 +6071,7 @@ function AttendeeFlow({
               key={a.id ?? `sub-${i}`}
               data-testid={`em-attendee-subheading-${i}`}
               data-attendee-kind="subheading"
-              className="basis-full text-center font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5 leading-snug"
+              className="basis-full text-start font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5 leading-snug"
             >
               {editable ? (
                 <EditableCell