# 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`. 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. ### 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.