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

Add a new application structure with enhanced user management and admin panel

Browse Source 
Implement a new application structure that includes authentication improvements, a redesigned admin panel with user and application management, and a dashboard summary.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ae9abff2-95c8-4fff-ba23-1ed74645cbe3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/SWmOa22
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-04-20 11:26:01 +00:00
parent fdca99cb3b
commit fac89031c3
1 changed files with 251 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
attached_assets/Pasted-Build-a-production-style-bilingual-web-app-called-TeaBo_1776684329770.txt
+251
View File
@@ -0,0 +1,251 @@
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.