Task #6: Display today's day name plus Hijri and Gregorian dates in
the home page status bar so users see both calendars at a glance.
Changes (artifacts/teaboy-os/src/pages/home.tsx):
- Compute three values from the existing `time` state via
Intl.DateTimeFormat:
* dayName -> weekday: "long" (ar-SA / en-US)
* hijriDate -> ar-SA-u-ca-islamic-umalqura
/ en-US-u-ca-islamic-umalqura
* gregorianDate -> ar-SA-u-ca-gregory / en-US
- Replaced the single time line in the topbar with a 3-row stack:
Row 1: time (existing bold mono)
Row 2: day · hijri (small muted)
Row 3: gregorian (small muted)
- Added `min-w-0`, `truncate`, and `gap-2` on the topbar flex so
the date column shrinks gracefully on narrow widths and never
pushes the username/controls off-screen. Username max-width
reduced from max-w-32 to max-w-24 to give the centre slot room.
Auto-refresh:
- The existing 1-second `setInterval` already drives the `time`
state, so all three values naturally roll over at midnight.
Localization:
- ar mode -> ar-SA = Arabic-Indic numerals on all three values.
- en mode -> en-US = Latin numerals.
- No new i18n keys required (separator is a neutral middle dot).
Out of scope (untouched): time format, other status-bar controls,
calendar view, calendar toggle.
Verification: tsc --noEmit passes for teaboy-os. Layout reviewed for
both LTR and RTL: each row truncates within the centre slot and the
flex gap prevents collisions with neighbouring elements.
Re-review fix: previous attempt used a single whitespace-nowrap row
which could overflow on narrow widths; switched to stacked rows with
truncation per the code-review feedback.
- Removed greeting and welcome banner from the home page; trimmed unused
ar.json/en.json greeting keys.
- Hid the 4-tile stats row for non-admin users (`isAdmin` from user roles)
and scoped `totalApps` in /api/stats/home to apps the user can actually
access (mirrors the RBAC join in /api/apps).
- Renamed nav.services translation: "خدماتي" -> "الخدمات",
"My Services" -> "Services".
- Removed price/free text from the user-facing services page; cards now
show name, description, availability badge, and (when present) image.
- Admin service editor now exposes an "Image URL" / "رابط الصورة" text
field with a live preview thumbnail; saved imageUrl renders at the top
of the corresponding service card (16:10, object-cover, onError hides
broken images). Uses existing imageUrl column in services schema; no DB
migration required. Image upload via object storage was deferred — see
follow-up task.
Verified: typecheck passes for teaboy-os and api-server; api-server
restarted clean; e2e plan validated by testing subagent; architect code
review approved.
- Fix admin.tsx: move non-admin redirect from render body to useEffect
to avoid Rules of Hooks violation causing React concurrent rendering error;
add early return null guard after all hooks
- Fix admin.tsx: coerce nullable app/service fields with ?? fallbacks
(nameAr, nameEn, slug, iconName, route, color, sortOrder, price, isAvailable)
- Add GET /api/users/directory endpoint (auth-only, returns safe fields:
id, username, displayNameAr, displayNameEn, avatarUrl, isActive)
so non-admin users can look up contacts for chat without hitting admin-only list
- Update chat.tsx to use new /api/users/directory via useQuery instead
of admin-only useListUsers; remove client-sent "join" Socket.IO event
since server now auto-joins user room from session
- Wire language toggle in home.tsx to call useUpdateLanguage mutation
(PUT /api/auth/language) so preference persists to the database
- Harden Socket.IO: export sessionMiddleware from app.ts; apply it via
io.engine.use in index.ts so Socket.IO handshake reads express-session;
add io.use middleware that rejects connections without a valid session userId;
auto-join user room from session instead of trusting client-provided userId;
verify conversation membership before joining conversation rooms
- Fix Socket.IO CORS: use ALLOWED_ORIGINS env var (matches Express CORS)
instead of hardcoded wildcard "*"
All TypeScript checks pass; e2e tests confirm: login, language toggle,
services, chat, notifications, admin CRUD, and non-admin redirect all work
Completed full-stack TeaBoy OS build:
Backend (artifacts/api-server):
- Session-based auth with express-session + connect-pg-simple (PostgreSQL sessions)
- RBAC middleware (requireAuth, requireAdmin) with role-based guards
- REST routes for: auth (login/logout/register/me/language), apps CRUD, services CRUD,
conversations + messages, notifications, users (admin), home stats
- Socket.IO mounted on same HTTP server at /api/socket.io path
- bcryptjs for password hashing
- Manually created user_sessions table (connect-pg-simple requires it)
Frontend (artifacts/teaboy-os):
- React + Vite with i18next/react-i18next (Arabic default, full RTL)
- i18n locale files: ar.json + en.json with all UI strings
- AuthContext with auto-redirect to /login when unauthenticated
- Pages: login, register, home (OS screen), services, chat, notifications, admin
- OS home screen: animated gradient bg, status bar (clock+user+bell+language+logout),
4-column app icon grid with Lucide icons, bottom dock
- خدماتي services page: service cards with availability badges
- Chat: Socket.IO real-time messages, conversation list, send messages
- Notifications: list with mark-as-read per item + mark all
- Admin panel: full CRUD for apps/services/users with toggle switches
- Vite proxy /api → localhost:8080 for same-origin cookie auth
- credentials: "include" added to customFetch for session cookies
Database:
- Seed script with demo users (admin/admin123, ahmed/user123)
- 8 demo apps, 6 services, 4 categories seeded
All e2e tests pass: login, home screen, services, language toggle, admin, logout
Riyadh