TX/attached_assets/Pasted-Build-a-production-style-bilingual-web-app-called-TeaBo_1776684329770.txt

Build a production-style bilingual web app called "TeaBoy" that looks and behaves like a lightweight internal OS interface, optimized for desktop, tablet, and mobile browsers. The interface must support both Arabic and English, with RTL/LTR support, and use a modern light creative UI inspired by iOS-style glassmorphism. Do not use the name "TeaBoy OS" in the UI. Use only "TeaBoy" or "النظام" where appropriate.

The system must include these major parts:

1) Authentication
- No public registration page at all.
- Only admin can create users.
- Users log in with username + password.
- First time a user logs in, they must be forced to change their password before accessing the system.
- Store a boolean like mustChangePassword=true for new users.
- After password change, redirect them to their home screen.
- Secure password hashing required.
- Include session management and protected routes.

2) Main TeaBoy User Experience
- After login, the user lands on a Home Screen similar to a mobile/desktop operating system launcher.
- Display app icons in a responsive grid.
- Show only apps the logged-in user is allowed to access.
- Each app card/icon should include:
  - app icon/image
  - app name
  - optional short description
- Clicking an app opens:
  - external URL in a new tab if the app is external
  - internal route if the app is internal
- Top status bar should include:
  - current time
  - logged in user name
  - language switcher (Arabic / English)
  - profile / logout menu
- Design should be modern, elegant, light, and smooth with glassmorphism feel.

3) Admin Panel
Create a professional Admin sidebar menu with the following structure:

- Dashboard
- User Management
  - View Users
  - Create User
  - Permissions
- Application Management
  - View Applications
  - Add Application
  - Application Permissions
- Settings

Admin panel must be clean, enterprise-style, bilingual, and fully responsive.

4) Dashboard
Create an admin dashboard page showing summary cards:
- Total Users
- Total Applications
- Active Users count (basic/mock if needed)
- Admin Users count
- Recently Added Users
- Recently Added Applications

5) User Management
Create a full professional user management module.

A) View Users page
- Table/cards of all users
- Search by name or username
- Filter by role
- Show:
  - name
  - username
  - role
  - status
  - number of assigned apps
  - created date
- Clicking a user opens a detailed page or drawer showing:
  - full name
  - username
  - role
  - assigned apps
  - mustChangePassword status
  - created at
  - last updated
- Add edit and delete actions.

B) Create User page
Fields:
- Full name
- Username
- Temporary password
- Role (admin / user)
- Assigned applications (multi-select or checkboxes)
- Status (active / inactive)
- mustChangePassword should default to true for newly created users

Behavior:
- Admin creates the user manually
- No email verification flow required
- No public signup

C) Permissions page
- Admin can manage which apps are assigned to which users
- Support direct app assignment per user
- Simple and professional permission model:
  - admin has full access
  - user only sees assigned apps
- Avoid overly complex RBAC for now; use app-based permissions.

6) Application Management
Create a full professional application management module.

A) View Applications page
- Show all applications in a table/cards view
- Search by app name
- Show:
  - app icon
  - app name
  - type (internal / external)
  - url or route
  - visibility summary
  - created date

B) Add Application page
Fields:
- Application name
- External URL or internal route
- Upload/select application image/icon
- Description
- Type:
  - external
  - internal
- Visibility / assignment options:
  - admin only
  - all users
  - selected users only
- Status active/inactive

Behavior:
- External applications open in a new tab
- Internal applications route inside the platform
- Image upload should be supported, or at minimum image URL with upload-ready component design
- Store application metadata cleanly

C) Application Permissions page
- Admin can select an application and choose which users can access it
- Also allow assigning applications from the user side
- Keep permission logic consistent

7) Data Models
Use clean relational or structured schema for at least:
- users
- applications
- user_applications (many-to-many)
- sessions if needed

Suggested user fields:
- id
- fullName
- username
- passwordHash
- role
- status
- mustChangePassword
- createdAt
- updatedAt

Suggested application fields:
- id
- name
- description
- icon
- type
- url
- internalRoute
- visibilityMode
- status
- createdAt
- updatedAt

Suggested pivot:
- userId
- applicationId

8) Authorization Rules
- Admin can access admin panel, manage users, manage apps, and view dashboard
- User cannot access admin pages
- User can only see assigned applications on home screen
- If app visibility is admin only, regular users never see it
- If user is inactive, block login
- If mustChangePassword is true, force password change before anything else

9) UI / UX Requirements
- Bilingual Arabic and English from day one
- Full RTL support for Arabic
- Light modern color palette, soft creative colors, not harsh or dark-heavy
- Glassmorphism-inspired cards and panels
- Responsive for desktop, tablet, mobile
- Smooth transitions
- Professional sidebar admin layout
- User home screen should feel like a polished internal OS / app launcher
- Avoid clutter
- Typography must support Arabic beautifully
- Keep code structured and scalable

10) Technical Requirements
- Use React + TypeScript + Tailwind CSS
- Create clear folder structure
- Component-based architecture
- Use mock/local database if needed, but structure it as if production-ready
- Include route guards
- Include seed data:
  - one admin account
  - few sample users
  - few sample applications
- Include clean reusable components:
  - sidebar
  - top bar
  - app card
  - user table
  - application table
  - forms
  - permission selectors
  - password change screen
- Use best practices for state management and forms
- Add validation for create user and create application forms

11) Important Business Rules
- There must be no self-registration page
- Admin is the only one who can create users
- New users must change password on first login
- Users only see allowed applications
- Admin can add external apps by entering:
  - app name
  - external link
  - icon/image
  - description
  - who can access it
- Build this as a real internal admin-controlled system, not a public SaaS signup product

12) Deliverables
Generate:
- full app structure
- pages
- components
- routes
- mock data / seed
- authentication flow
- admin dashboard
- user management
- application management
- forced password change flow
- bilingual UI scaffolding
- responsive polished frontend

Please implement the system end-to-end in a clean, maintainable way with a professional architecture. Start with a strong frontend and working mocked backend/data layer if needed, but structure the code so it can later connect to a real database and real authentication backend easily.