rafraa/TX
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the manage meetings page with a sticky header and proper title formatting

Browse Source 
Update executive-meetings.tsx to make the header sticky, render meeting titles as HTML, and remove the "Status" column.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c5984587-5347-4b07-b8da-f95fa4bc07a5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/fHzEBLA
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-03 09:36:42 +00:00
parent ea89647264
commit 51ae2f5a07
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/tx-os/src/pages/executive-meetings.tsx
+22 -10
View File
@@ -4908,7 +4908,14 @@ function ManageSection({
return (
<div className="space-y-4">
<div className="flex items-center justify-between gap-3 flex-wrap">
{/* #321: sticky toolbar — date + Add Meeting stay pinned just
under the app's top header while the meeting list scrolls,
mirroring `em-schedule-heading-bar` on the Schedule tab. */}
<div
data-testid="em-manage-heading-bar"
className="sticky z-30 bg-[#f4f6fb] -mx-3 sm:-mx-6 px-3 sm:px-6 py-2 shadow-[0_4px_6px_-4px_rgba(11,30,63,0.15)] flex items-center justify-between gap-3 flex-wrap"
style={{ top: "var(--em-header-h, 0px)" }}
>
<h2 className="text-xl sm:text-2xl font-bold text-[#0B1E3F]">
{t("executiveMeetings.manage.heading")}
</h2>
@@ -4936,21 +4943,20 @@ function ManageSection({
<th className="px-3 py-2 text-start w-12">#</th>
<th className="px-3 py-2 text-start">{t("executiveMeetings.col.meeting")}</th>
<th className="px-3 py-2 text-start w-28">{t("executiveMeetings.col.time")}</th>
<th className="px-3 py-2 text-start w-24">{t("executiveMeetings.manage.field.status")}</th>
<th className="px-3 py-2 text-end w-32">{t("executiveMeetings.common.actions")}</th>
</tr>
</thead>
<tbody>
{isLoading && (
<tr>
<td colSpan={5} className="py-8 text-center text-gray-500">
<td colSpan={4} className="py-8 text-center text-gray-500">
{t("common.loading")}
</td>
</tr>
)}
{!isLoading && meetings.length === 0 && (
<tr>
<td colSpan={5} className="py-8 text-center text-gray-500">
<td colSpan={4} className="py-8 text-center text-gray-500">
{t("executiveMeetings.manage.noMeetings")}
</td>
</tr>
@@ -4959,9 +4965,18 @@ function ManageSection({
<tr key={m.id} className="border-t border-gray-100">
<td className="px-3 py-2 align-middle">{m.dailyNumber}</td>
<td className="px-3 py-2 align-middle">
<div className="font-medium text-[#0B1E3F]">
{isRtl ? m.titleAr : m.titleEn || m.titleAr}
</div>
{/* #321: titles are stored as sanitized rich-text
HTML (Tiptap output). Render via safeHtml so the
user sees formatted text instead of literal
<p>/<span style="…"> tokens. */}
<div
className="font-medium text-[#0B1E3F]"
dangerouslySetInnerHTML={{
__html: safeHtml(
isRtl ? m.titleAr : m.titleEn || m.titleAr,
),
}}
/>
<div className="text-xs text-gray-500">
{
m.attendees.filter(
@@ -4974,9 +4989,6 @@ function ManageSection({
<td className="px-3 py-2 align-middle font-mono text-xs whitespace-nowrap" dir="ltr">
{formatTime(m.startTime, isRtl ? "ar" : "en")} — {formatTime(m.endTime, isRtl ? "ar" : "en")}
</td>
<td className="px-3 py-2 align-middle text-xs">
{t(`executiveMeetings.manage.status.${m.status}`)}
</td>
<td className="px-3 py-2 align-middle text-end">
<div className="inline-flex gap-1">
<Button