Admin UI

Admin dashboard for a document translation platform (English/Arabic), built with Next.js and MUI.

What it does

A Next.js 14 App Router application with two route groups:

• (pre-login): authentication flows — login, registration, forgot/reset password, OTP verification, registration-completed screens
• main: the authenticated admin app, with pages for:
  • Home: dashboard landing page
  • Translator: upload a document (PDF/PPT), translate between English and Arabic, track translation progress/status via polling, and view a translation-accuracy/quality score once complete
  • History: past translation jobs
  • User Management: manage platform users
  • Tokens & Plans: token/plan usage and billing-style management
  • FeedBack: user feedback collection

State is managed with Redux Toolkit (+ redux-persist); API calls go through a shared api.mjs client (axios) and use @microsoft/fetch-event-source/SSE for streaming translation status. Auth uses JWT (jwt-decode) stored client-side.

Tech stack

• Next.js 14, React 18, TypeScript
• Material UI (@mui/material, @mui/x-data-grid), Emotion, styled-components
• Redux Toolkit + redux-persist
• react-hook-form, react-reactive-form, react-password-checklist
• axios, sse.js, @microsoft/fetch-event-source for streaming
• recharts for charts, framer-motion for animation
• Deployed via Docker (Dockerfile) with a Drone CI pipeline (.drone.yml); has separate UAT env config (.env.uat)

Project structure

src/app/
  (pre-login)/     Login, Register, Forgot/Reset Password, OTP verification
  main/             Authenticated app: home, translator, history, userManagement, tokenPlans, feedBack
  redux/            Redux Toolkit store, actions, reducers, constants
  reusable-components/  Shared UI: buttons, dropdowns, popups, snackbars
  api.mjs           Shared API client

Getting started

npm install
npm run dev        # local dev server (next dev)
npm run build:uat   # UAT build using .env.uat
npm run start:uat

Runs on port 9000 in production (start script), default Next.js port in dev.