diff --git a/TactixAI_Performance_Report_AlexYoo.pdf b/TactixAI_Performance_Report_AlexYoo.pdf deleted file mode 100644 index 7974980..0000000 Binary files a/TactixAI_Performance_Report_AlexYoo.pdf and /dev/null differ diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..981c91a --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,10 @@ +# API endpoints +VITE_DEV_BASE_URL=http://localhost:8000 +VITE_PROD_BASE_URL=https://tactixai-api-production.up.railway.app # Replace with live api server base url +VITE_PROD_WS_BASE_URL=wss://tactixai-api-production.up.railway.app # Replace with live websocket base url + +# Runtime mode: 'DEV' uses VITE_DEV_BASE_URL, anything else uses VITE_PROD_BASE_URL +VITE_MODE='DEV' + +# JWT storage key +VITE_TOKEN_KEY='TOKEN_KEY' # Authentication Token of your choice diff --git a/frontend/README.md b/frontend/README.md index 29c6c77..da2965b 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,19 +1,22 @@ -# 🔴 TactixAI. — Cyber Threat Negotiation Training Platform +# TactixAI — Cyber Threat Negotiation Training Platform -> A GenAI-powered chatbot platform for simulating real-world ransomware negotiation scenarios. -> Built for **FlameTree Cyber** | IFN735 Industry Project — Group 34, QUT +> A GenAI-powered chatbot platform for simulating real-world ransomware negotiation scenarios. +> Built for **FlameTree Cyber** | IFN735 Industry Project — TigerByte(Group 34), QUT --- -## 📌 Project Overview +## Live Demo -Tactix ai. is a web-based training platform that allows security professionals to practice -ransomware negotiation in a safe, AI-driven environment. Learners engage with realistic -threat actor personas, receive performance feedback, and build negotiation skills aligned -with cybersecurity best practices. +[https://tactix-ai.vercel.app/](https://tactix-ai.vercel.app/) + +--- + +## Project Overview + +Tactix AI is a web-based training platform that allows security professionals to practice ransomware negotiation in a safe, AI-driven environment. Learners engage with realistic threat actor personas, receive performance feedback, and build negotiation skills aligned with cybersecurity best practices. **Key capabilities:** -- Role-based access control (Learner, Reviewer, Admin) +- Role-based access control (Learner, Admin) - AI-powered threat actor simulation with configurable personas and scenarios - Session tracking, performance metrics, and downloadable reports @@ -21,75 +24,123 @@ This repository contains the **frontend client** application. --- -## Demo Link - -[Click to navigate](https://tactix-ai.vercel.app/) - ---- - -## 🛠 FE Tech Stack +## Tech Stack | Layer | Technology | |---|---| | Framework | React 19 + TypeScript | -| Build Tool | Vite | -| Styling | Tailwind CSS v3 | -| Routing | React Router DOM v6 | -| State Management | Context API | +| Build Tool | Vite 8 | +| Styling | Tailwind CSS v4 | +| Routing | React Router DOM v7 | +| State Management | Context API + React Query | +| Form Handling | React Hook Form + Zod | | HTTP Client | Axios | +| WebSocket | react-use-websocket | | Icons | lucide-react | +| Testing | Jest + Testing Library | | Deployment | Vercel | --- -## 🚀 Getting Started +## Local Development ### Prerequisites - Node.js `v20+` - npm `v9+` -### Installation +### 1. Clone and install ```bash -# 1. Clone the repository -git clone https://github.com/your-org/tactix_ai-client.git -cd tactix_ai-client - -# 2. Install dependencies +git clone https://github.com/your-org/tactix_ai.git +cd tactix_ai/frontend npm install - -# 3. Set up environment variables -cp .env.example .env ``` -### Environment Variables +### 2. Configure environment ```bash -# .env -VITE_API_URL=http://localhost:5173 # Backend API base URL -VITE_USE_MOCK=true # true = use mock auth (no backend needed) +cp .env.example .env ``` -### Run Locally +Then edit `.env` and fill in the values. See `.env.example` for descriptions of each variable. + +### 3. Run dev server ```bash npm run dev # → http://localhost:5173 ``` -### Build for Production +> In `DEV` mode, API requests are proxied through Vite to `VITE_DEV_BASE_URL`. The proxy strips the `/api` prefix before forwarding. + +--- + +## Production Build ```bash +# Type-check and compile npm run build + +# Preview the built output locally npm run preview ``` +The output is written to `dist/`. This is the directory Vercel deploys. + +--- + +## Deployment — Vercel + +### Auto-deploy + +Pushes to `main` automatically trigger a Vercel deployment. No manual steps required. + +### Manual deploy via CLI + +```bash +npm install -g vercel +vercel --prod +``` + +### Vercel environment variables + +Set these in the Vercel project dashboard under **Settings → Environment Variables**: + +| Variable | Value | +|---|---| +| `VITE_DEV_BASE_URL` | `http://localhost:8000` | +| `VITE_PROD_BASE_URL` | `https://tactixai-api-production.up.railway.app` | +| `VITE_PROD_WS_BASE_URL` | `wss://tactixai-api-production.up.railway.app` | +| `VITE_MODE` | `PROD` | +| `VITE_TOKEN_KEY` | `FLAMETREE_TOKEN_KEY` | + +### SPA routing + +`vercel.json` rewrites all routes to `index.html` so React Router handles client-side navigation: + +```json +{ + "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] +} +``` + +--- + +## Running Tests + +```bash +npm run test # run all tests once +npm run test:watch # watch mode +``` + +Tests are located in `src/__tests__/` and cover reducers, hooks, forms, and schemas. + --- -## 🔐 Dev Test Accounts +## Test Accounts -When `VITE_USE_MOCK=true`, use these credentials (any password): +Use these credentials against the live or local backend: | Email | Role | Access | |---|---|---| @@ -98,84 +149,74 @@ When `VITE_USE_MOCK=true`, use these credentials (any password): --- -## 📁 Folder Structure +## Folder Structure ``` -src/ -├── api/ # Axios API calls (1:1 with backend endpoints) -│ ├── client.ts # Axios instance + JWT interceptor -│ ├── auth.api.ts -│ ├── user.api.ts (to be added) -│ └── chat.api.ts (to be added) -│ -├── components/ -│ ├── ui/ # Generic, reusable primitives (no page-specific logic) -│ │ ├── Logo.tsx # Brand logo used across all pages -│ │ ├── StatsCard.tsx # Metric display card -│ │ ├── DifficultyBadge.tsx -│ │ └── PanelHeader.tsx # Reusable panel/section header -│ ├── admin/ # Admin dashboard tab components -│ │ ├── OverviewTab.tsx -│ │ ├── AnalyticsTab.tsx -│ │ └── UsersTab.tsx -│ ├── forms/ # Form components -│ │ └── SubmitForm.tsx -│ ├── layout/ # App shell (Navbar, Sidebar, AppLayout) -│ └── guards/ # RBAC route protection -│ ├── ProtectedRoute.tsx -│ └── RoleGuard.tsx -│ -├── context/ # Global state (Context API) -│ └── AuthContext.tsx -│ -├── hooks/ # Custom hooks -│ ├── useAuth.ts -│ └── useRBAC.ts (to be added) -│ -├── pages/ # One file per route -│ ├── auth/ # Login, Register -│ ├── learner/ # Learner Dashboard, Chat -│ ├── admin/ # Admin Dashboard, User Management -│ └── common/ # Unauthorized, NotFound +frontend/ +├── public/ +├── src/ +│ ├── api/ # Axios API calls (1:1 with backend endpoints) +│ │ ├── client.ts # Axios instance + JWT interceptor +│ │ ├── auth.api.ts +│ │ ├── admin.api.ts +│ │ └── learner.api.ts +│ │ +│ ├── components/ +│ │ ├── ui/ # Reusable primitives (no page-specific logic) +│ │ ├── admin/ # Admin dashboard tab components +│ │ ├── learner/ # Learner-specific components +│ │ ├── layout/ # App shell (AppLayout) +│ │ └── guards/ # RBAC route protection +│ │ +│ ├── context/ # Global state (AuthContext, ScenarioContext, StatsContext) +│ ├── hooks/ # Custom hooks + reducers +│ ├── mocks/ # Static mock data for development +│ ├── pages/ +│ │ ├── auth/ # Login, ForgotPassword, SetPassword +│ │ ├── learner/ # Dashboard, Scenarios, Chat, Performance, Profile +│ │ └── admin/ # Admin Dashboard, Learner Details, Chat History +│ │ +│ ├── router/ +│ │ ├── AppRouter.tsx # Route declarations +│ │ └── routes.ts # Route path constants +│ │ +│ ├── schemas/ # Zod validation schemas +│ ├── types/ # Shared TypeScript types +│ ├── utils/ # Token helpers, formatters, parsers +│ └── config.ts # Env-aware API base URL config │ -├── router/ -│ ├── AppRouter.tsx # All route declarations -│ └── routes.ts # Route path constants -│ -├── types/ # Shared TypeScript types -├── utils/ # Token helpers, formatters -└── styles/ # Global CSS +├── vercel.json +├── vite.config.ts +└── package.json ``` --- -## 🌿 Git Branching Strategy +## Git Branching Strategy ``` main ← production (auto-deploys to Vercel) -└── feature/- ← feature branches - └── PR → reviewed → merged into main +└── feature/- ← feature branches merged via PR ``` -**Branch naming convention:** +**Branch naming:** ``` feature/epic-3-auth-scaffold -feature/epic-4-admin-dashboard -feature/epic-5-RBAC +feature/epic-7-performance-analysis fix/login-redirect ``` **Commit message format:** ``` -feat: new feature -fix: bug fix -chore: config / dependency changes -docs: documentation only +feat: new feature +fix: bug fix +chore: config / dependency changes +docs: documentation only ``` --- -## 👥 Team — Group 34 +## Team — TigerByte(Group 34) | Name | Role | Responsibility | |---|---|---| @@ -188,19 +229,8 @@ docs: documentation only --- -## 🗺 MVP Roadmap - -| MVP | Target Week | Scope | -|---|---|---| -| **MVP 1** | Week 4 | Auth + RBAC + Mock Chat + Admin Basics | -| **MVP 2** | Week 8 | AI Integration + Scenario Config + Tracking | -| **MVP 3** | Week 10-12 | Full Analytics + Reports + Final Delivery | - ---- - -## 📄 License +## License -This project was developed as part of **IFN735 Industry Project** at -Queensland University of Technology (QUT) in collaboration with **FlameTree Cyber**. +Developed as part of **IFN735 Industry Project** at Queensland University of Technology (QUT) in collaboration with **FlameTree Cyber**. -© 2026 Group 34 — All rights reserved. \ No newline at end of file +© 2026 TigerByte(Group 34) — All rights reserved.