rafraa/TX

Files

T

riyadhafraa f4d99b6cfd Rebuild PDF generation: HTML <table> + Playwright replaces PDFKit manual drawing

Task #372: Replaced the manual PDFKit coordinate-based PDF renderer with an
HTML table-based approach using Playwright's headless Chromium.

Key changes:
- Created `pdf-html-renderer.ts` with `buildScheduleHtml()` (generates full
  HTML with embedded base64 fonts, proper `<table>`, RTL/LTR support, row
  colors, merged cells, attendees formatting) and `htmlToPdfBuffer()` (renders
  HTML to PDF via Playwright Chromium).
- Updated `pdf-renderer.ts`: `renderSchedulePdf()` now delegates to the new
  HTML renderer via dynamic import. Legacy PDFKit code preserved as
  `renderSchedulePdf_LEGACY()` for fallback reference.
- Added `playwright-core` dependency and configured esbuild externals.
- Chromium binary discovery: searches `.cache/ms-playwright/` directories with
  env var override (`PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH`). Browser instance
  is cached as singleton with launch mutex to prevent concurrent double-launch.
- Process shutdown hook closes browser on exit.

Requirements met:
- Each meeting in exactly one `<tr>` with 4 `<td>` cells
- No text outside table, attendees ~3 per line inline
- Time always in its column, `page-break-inside: avoid`, `table-layout: fixed`
- Matches reference design (blue header, centered text, DIN Next LT Arabic)

2026-05-04 10:24:08 +00:00

7.0 KiB

Raw Blame History

Tx OS

Overview

Tx OS is a bilingual (Arabic/English), full-stack internal web platform designed with an OS-like interface and glassmorphism aesthetics. It aims to provide a comprehensive suite of internal tools and services, enhancing user experience and operational efficiency within the organization. The project focuses on delivering a visually appealing and highly functional platform.

User Preferences

I want iterative development. Ask before making major changes. Do not make changes to the folder artifacts/api-server/tests. Do not make changes to the folder artifacts/tx-os/tests. Do not make changes to the folder lib/db/scripts. Do not make changes to the file artifacts/api-server/src/lib/pdf-renderer.ts (legacy PDFKit code kept for fallback). Do not make changes to the file artifacts/api-server/src/lib/pdf-html-renderer.ts (HTML-table PDF renderer via Playwright). Do not make changes to the file artifacts/tx-os/src/App.tsx. Do not make changes to the file artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx. Do not make changes to the file artifacts/tx-os/src/pages/executive-meetings.tsx. Do not make changes to the file artifacts/tx-os/src/locales/ar.json. Do not make changes to the file artifacts/tx-os/src/locales/en.json. Do not make changes to the file lib/api-client-react/src/custom-fetch.ts. Do not make changes to the file lib/db/src/schema/executive-meetings.ts. Do not make changes to the file scripts/post-merge.sh.

System Architecture

The project is structured as a pnpm monorepo.

UI/UX Decisions

Bilingual Support: Arabic (RTL) and English (LTR) with user-persisted locale settings.
Glassmorphism OS UI: Features animated gradient backgrounds and frosted glass panels.
OS Home Screen: Includes a live clock status bar with customizable styles, an app grid, and a bottom dock.
Custom Attendee Subheadings: Allows interleaving free-text section headers within attendee lists in Executive Meetings, distinct from person rows.
Shared Row Colors: Executive Meeting schedule row colors are stored on the meeting object itself, ensuring consistent viewing across all users and devices.

Technical Implementations

Monorepo: Managed with pnpm workspaces.
Backend: Node.js 24 with TypeScript 5.9, using Express 5, express-session with connect-pg-simple for PostgreSQL sessions, bcryptjs for hashing, and Socket.IO for real-time communication.
Database: PostgreSQL with Drizzle ORM for schema definition and Zod for validation.
API Codegen: Orval is used to generate React Query hooks and Zod schemas from an OpenAPI specification.
Frontend: Built with React and Vite, styled using Tailwind CSS v4, wouter for routing, and i18next with react-i18next for internationalization.
Authentication: Session-based authentication with Role-Based Access Control (RBAC) supporting admin and user roles.
Real-time Features: Implemented using Socket.IO for chat and real-time notifications.
Executive Meetings Module: A comprehensive module with scheduling, CRUD operations for meetings, change requests, approvals, tasks, notifications, and an audit log. RBAC is enforced via five role sets (READ/MUTATE/APPROVE/REQUEST/ADMIN_AUDIT). All mutations are wrapped in database transactions to ensure data consistency and atomic audit logging.
Optimistic Locking: Implemented for Executive Meeting postponements to prevent concurrent updates from silently overwriting changes, using expectedUpdatedAt and returning a 409 conflict on mismatch.
Upcoming Meeting Alert: A global, draggable alert component appears when an Executive Meeting is within five minutes of starting, providing options to postpone, reschedule, or cancel the meeting.
PDF Generation (HTML Table): Executive meetings PDFs are now generated via a real HTML <table> rendered by Playwright's headless Chromium (pdf-html-renderer.ts). This replaced the manual PDFKit drawing approach to guarantee each meeting occupies exactly one <tr> row with 4 <td> cells (number, title, attendees, time). The Chromium binary is auto-discovered from .cache/ms-playwright/ or via PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH env var. The browser instance is cached (singleton with launch mutex) and closed on process exit. The legacy PDFKit renderer is preserved as renderSchedulePdf_LEGACY in pdf-renderer.ts for fallback reference.
Custom Editor Fonts: The in-place rich-text cell editor (attendee names, meeting titles, etc.) ships a curated set of self-hosted Arabic + Latin font families (DIN Next LT Arabic, Tajawal, Helvetica Neue LT Arabic, Helvetica Neue, Majalla) declared in artifacts/tx-os/src/custom-fonts.css with font-display: swap. Files live under artifacts/tx-os/public/fonts/. The site default body font is DIN Next LT Arabic (--app-font-sans in index.css), and Google Fonts is no longer fetched at page load. The Executive Meetings Font Settings page exposes the same five families plus system as the user/global picker; the values are kept in lockstep with the backend Zod allowlist (FONT_FAMILIES in routes/executive-meetings.ts), the rich-text sanitizer's font-family allowlist (FONT_NAME_PART in lib/sanitize.ts), and the PDF renderer's family map (FAMILY_MAP in lib/pdf-renderer.ts). When adding or removing a family, update all four locations together. Note the intentional asymmetry of the system value: in the web UI it resolves to whatever the CSS default is (currently DIN Next LT Arabic, a sans family), while in server-side PDF rendering it maps to the bundled Naskh stand-in (NotoNaskhArabic) — PDFs are document-style output where Naskh is the more conventional Arabic body face, so this is by design.
Tab Quick-Add Attendees: Pressing Tab inside an attendee name cell commits the current value and immediately opens a new pending attendee row right after, so users can keep typing names without using the mouse. Implemented via an onTabNext prop on EditableCell and a chainStartAdd prop on AttendeeFlow that bypasses the single-pending UI gate (the parent's state-level guard still prevents truly overlapping pendings).

Feature Specifications

خدماتي (My Services): Displays a grid of service cards with availability status.
Internal Chat: Real-time messaging with conversation lists via Socket.IO.
Notifications: Tracks unread notifications and provides a "mark all as read" function.
Admin Panel: CRUD functionalities for applications, services, and users. Includes dependency warnings on deletion and transactional app creation with pre-set permissions.

External Dependencies

PostgreSQL: Primary database for the application.
Drizzle ORM: Used for database interactions and schema management.
Socket.IO: For real-time communication features like chat and notifications.
Orval: API code generation tool.
i18next & react-i18next: For internationalization.
Tailwind CSS v4: CSS framework for styling.
Vite: Frontend build tool.
Express 5: Backend web framework.

7.0 KiB Raw Blame History